feat: Introduce image_uris property to Card interface and update components to prioritize it for card image display.

src/client/src/modules/draft/DeckBuilderView.tsx

@@ -429,13 +429,25 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
       const targetId = c.scryfallId; // DraftCard uses scryfallId for the real ID
       const setCode = c.setCode || c.set;
 
+      const cardWithDefinition = {
+        ...c,
+        definition: {
+          set: setCode,
+          id: targetId,
+          ...(c.definition || {})
+        }
+      };
+
       if (targetId && setCode) {
         return {
-          ...c,
-          image: `/cards/images/${setCode}/full/${targetId}.jpg`
+          ...cardWithDefinition,
+          image_uris: {
+            normal: `/cards/images/${setCode}/full/${targetId}.jpg`,
+            crop: `/cards/images/${setCode}/crop/${targetId}.jpg`
+          }
         };
       }
-      return c;
+      return cardWithDefinition;
     });
 
     socketService.socket.emit('player_ready', { deck: preparedDeck });

src/client/src/modules/game/CardComponent.tsx

@@ -29,11 +29,18 @@ export const CardComponent: React.FC<CardComponentProps> = ({ card, onDragStart,
     return () => unregisterCard(card.instanceId);
   }, [card.instanceId]);
 
+  // Robustly resolve Art Crop
   // Robustly resolve Art Crop
   // Robustly resolve Art Crop
   let imageSrc = card.imageUrl;
 
-  if (card.definition && card.definition.set && card.definition.id) {
+  if (card.image_uris) {
+    if (viewMode === 'cutout' && card.image_uris.crop) {
+      imageSrc = card.image_uris.crop;
+    } else if (card.image_uris.normal) {
+      imageSrc = card.image_uris.normal;
+    }
+  } else if (card.definition && card.definition.set && card.definition.id) {
     if (viewMode === 'cutout') {
       imageSrc = `/cards/images/${card.definition.set}/crop/${card.definition.id}.jpg`;
     } else {

src/client/src/modules/game/GameView.tsx

@@ -502,6 +502,9 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                       {hoveredCard && (
                         <img
                           src={(() => {
+                            if (hoveredCard.image_uris?.normal) {
+                              return hoveredCard.image_uris.normal;
+                            }
                             if (hoveredCard.definition?.set && hoveredCard.definition?.id) {
                               return `/cards/images/${hoveredCard.definition.set}/full/${hoveredCard.definition.id}.jpg`;
                             }
@@ -859,9 +862,10 @@ export const GameView: React.FC<GameViewProps> = ({ gameState, currentPlayerId }
                       <DraggableCardWrapper card={card}>
                         <CardComponent
                           card={card}
+                          viewMode="normal"
                           onDragStart={() => { }}
                           onDragEnd={() => { }}
-                          onClick={toggleTap}
+                          onClick={() => setInspectedCard(card)}
                           onContextMenu={(id, e) => handleContextMenu(e, 'card', id)}
                           style={{ transformOrigin: 'bottom center' }}
                           onMouseEnter={() => setHoveredCard(card)}

src/client/src/types/game.ts

@@ -45,6 +45,15 @@ export interface CardInstance {
   oracleText?: string;
   manaCost?: string;
   definition?: any;
+  image_uris?: {
+    normal?: string;
+    crop?: string;
+    art_crop?: string;
+    small?: string;
+    large?: string;
+    png?: string;
+    border_crop?: string;
+  };
 }
 
 export interface PlayerState {