From 73a0c652b24eb86ebe6243ee900bc52242a20a3a Mon Sep 17 00:00:00 2001
From: Randall Stillwell <me@randallstillwell.com>
Date: Thu, 24 Jul 2025 14:54:12 -0500
Subject: [PATCH] Fix card sizing consistency across all TCGs

- Added wrapper div with max-width constraint to ensure consistent card sizes
- Updated image rendering to use object-cover with proper positioning
- Removed maxWidth from Card3D component since it's now handled by wrapper
- Ensures all cards (MTG, Pokemon, Lorcana) have identical dimensions
- Fixed responsive grid layout to maintain consistent card sizes
---
 ...port-results-2025-07-24T17-27-46-410Z.json | 34 ++++++++++
 ...port-results-2025-07-24T17-32-10-187Z.json | 25 +++++++
 ...port-results-2025-07-24T17-34-04-839Z.json | 34 ++++++++++
 pages/cards.js                                | 27 ++++----
 scripts/import-lorcana.js                     | 66 ++++++-------------
 5 files changed, 129 insertions(+), 57 deletions(-)
 create mode 100644 lorcana-import-results-2025-07-24T17-27-46-410Z.json
 create mode 100644 lorcana-import-results-2025-07-24T17-32-10-187Z.json
 create mode 100644 lorcana-import-results-2025-07-24T17-34-04-839Z.json

diff --git a/lorcana-import-results-2025-07-24T17-27-46-410Z.json b/lorcana-import-results-2025-07-24T17-27-46-410Z.json
new file mode 100644
index 0000000..a85c839
--- /dev/null
+++ b/lorcana-import-results-2025-07-24T17-27-46-410Z.json
@@ -0,0 +1,34 @@
+{
+  "total": 0,
+  "successful": 3,
+  "failed": 0,
+  "sets": [
+    {
+      "code": "tfc",
+      "name": "The First Chapter",
+      "lorcastCode": "1",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 216,
+      "total": 216
+    },
+    {
+      "code": "rotf",
+      "name": "Rise of the Floodborn",
+      "lorcastCode": "2",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 216,
+      "total": 216
+    },
+    {
+      "code": "ink",
+      "name": "Into the Inklands",
+      "lorcastCode": "3",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 226,
+      "total": 226
+    }
+  ]
+}
\ No newline at end of file
diff --git a/lorcana-import-results-2025-07-24T17-32-10-187Z.json b/lorcana-import-results-2025-07-24T17-32-10-187Z.json
new file mode 100644
index 0000000..22da8c7
--- /dev/null
+++ b/lorcana-import-results-2025-07-24T17-32-10-187Z.json
@@ -0,0 +1,25 @@
+{
+  "total": 658,
+  "successful": 3,
+  "failed": 0,
+  "sets": [
+    {
+      "code": "tfc",
+      "name": "The First Chapter",
+      "success": true,
+      "importedCount": 216
+    },
+    {
+      "code": "rotf",
+      "name": "Rise of the Floodborn",
+      "success": true,
+      "importedCount": 216
+    },
+    {
+      "code": "ink",
+      "name": "Into the Inklands",
+      "success": true,
+      "importedCount": 226
+    }
+  ]
+}
\ No newline at end of file
diff --git a/lorcana-import-results-2025-07-24T17-34-04-839Z.json b/lorcana-import-results-2025-07-24T17-34-04-839Z.json
new file mode 100644
index 0000000..a85c839
--- /dev/null
+++ b/lorcana-import-results-2025-07-24T17-34-04-839Z.json
@@ -0,0 +1,34 @@
+{
+  "total": 0,
+  "successful": 3,
+  "failed": 0,
+  "sets": [
+    {
+      "code": "tfc",
+      "name": "The First Chapter",
+      "lorcastCode": "1",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 216,
+      "total": 216
+    },
+    {
+      "code": "rotf",
+      "name": "Rise of the Floodborn",
+      "lorcastCode": "2",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 216,
+      "total": 216
+    },
+    {
+      "code": "ink",
+      "name": "Into the Inklands",
+      "lorcastCode": "3",
+      "success": true,
+      "importedCount": 0,
+      "skippedCount": 226,
+      "total": 226
+    }
+  ]
+}
\ No newline at end of file
diff --git a/pages/cards.js b/pages/cards.js
index 18fd0dd..b1c9d25 100644
--- a/pages/cards.js
+++ b/pages/cards.js
@@ -593,12 +593,14 @@ export default function Cards() {
             <div className={viewMode === 'grid' ? 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-6 p-6' : 'space-y-4'}>
               {cards.map(card => (
                 <div key={card.id} onClick={() => router.push(`/card/${card.id}`)} className="flex justify-center">
-                  <Card3D 
-                    card={card} 
-                    viewMode={viewMode}
-                    getRarityLabel={getRarityLabel}
-                    getRarityColor={getRarityColor}
-                  />
+                  <div className="w-full max-w-[200px]">
+                    <Card3D 
+                      card={card} 
+                      viewMode={viewMode}
+                      getRarityLabel={getRarityLabel}
+                      getRarityColor={getRarityColor}
+                    />
+                  </div>
                 </div>
               ))}
             </div>
@@ -767,10 +769,8 @@ function Card3D({ card, viewMode, getRarityLabel, getRarityColor }) {
     <div className="relative">
               {/* Card Container with proper ratio and rarity glow */}
         <div 
-          className="relative cursor-pointer transition-transform duration-300 hover:scale-105"
+          className="relative cursor-pointer transition-transform duration-300 hover:scale-105 w-full"
           style={{
-            width: '100%',
-            maxWidth: '200px',
             aspectRatio: '5/7',
             boxShadow: getRarityGlow(card.rarity),
             borderRadius: '12px',
@@ -926,12 +926,17 @@ function Card3D({ card, viewMode, getRarityLabel, getRarityColor }) {
             </div>
           )}
         {/* Card Image */}
-        <div className="w-full h-full">
+        <div className="w-full h-full relative">
           {card.image_url ? (
             <img 
               src={card.image_url} 
               alt={card.name}
               className="w-full h-full object-cover"
+              style={{
+                objectFit: 'cover',
+                objectPosition: 'center',
+                borderRadius: '10px'
+              }}
               onError={(e) => {
                 e.target.style.display = 'none';
                 e.target.nextSibling.style.display = 'flex';
@@ -941,7 +946,7 @@ function Card3D({ card, viewMode, getRarityLabel, getRarityColor }) {
           
           {/* Card Back placeholder when no image */}
           <div 
-            className={`w-full h-full ${!card.image_url ? 'block' : 'hidden'}`}
+            className={`w-full h-full absolute inset-0 ${!card.image_url ? 'block' : 'hidden'}`}
             style={{ borderRadius: '10px' }}
           >
             <CardBack game={card.game} />
diff --git a/scripts/import-lorcana.js b/scripts/import-lorcana.js
index 7109794..325f1ac 100644
--- a/scripts/import-lorcana.js
+++ b/scripts/import-lorcana.js
@@ -69,55 +69,29 @@ async function importLorcanaSet(setCode, setName, lorcastCode) {
     let importedCount = 0;
     let skippedCount = 0;
 
-    for (const card of cards) {
-      try {
-        // Check if card already exists in database
-        const checkResponse = await fetch('http://localhost:3000/api/cards/search', {
-          method: 'GET',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            query: card.name,
-            game: 'Lorcana',
-            set: card.set.code
-          })
-        });
+    // Import all cards via our API in a single batch
+    const importResponse = await fetch('http://localhost:3000/api/cards/import-lorcana', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        setCode: setCode,
+        setName: setName
+      })
+    });
 
-        const checkData = await checkResponse.json();
-        const existingCard = checkData.cards?.find(c => c.scryfall_id === card.id);
-
-        if (existingCard) {
-          skippedCount++;
-          continue;
-        }
-
-        // Import card via our API
-        const importResponse = await fetch('http://localhost:3000/api/cards/import-lorcana', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify({
-            setCode: setCode,
-            cardData: card
-          })
-        });
-
-        const importResult = await importResponse.json();
-        
-        if (importResult.success) {
-          importedCount++;
-        } else {
-          skippedCount++;
-        }
-      } catch (error) {
-        console.error(`Error processing card ${card.name}:`, error.message);
-        skippedCount++;
-      }
+    const importResult = await importResponse.json();
+    
+    if (importResult.success) {
+      importedCount = importResult.imported || 0;
+      skippedCount = importResult.skipped || 0;
+      console.log(`✅ Import completed for ${setName}: ${importedCount} imported, ${skippedCount} skipped`);
+    } else {
+      console.log(`❌ Failed to import ${setName}: ${importResult.error}`);
+      return { success: false, error: importResult.error };
     }
 
-    console.log(`✅ Import completed for ${setName}: ${importedCount} imported, ${skippedCount} skipped`);
     return { success: true, importedCount, skippedCount, total: cards.length };
 
   } catch (error) {