Implement custom drag-and-drop for cards with proper positioning and visual feedback

Author: Top-5

src/App.css

@@ -157,12 +157,17 @@ h1 {
 .card[draggable="true"] {
   cursor: grab;
   transition: opacity 0.2s;
+  -webkit-user-drag: element;
 }
 
 .card[draggable="true"]:active {
   cursor: grabbing;
 }
 
+.card-dragging {
+  opacity: 0 !important;
+}
+
 .card-flying {
   animation: flyToFoundation 0.4s ease-in-out forwards;
   z-index: 1000;

src/App.tsx

@@ -10,11 +10,22 @@ interface DragData {
   cardIndex?: number;
 }
 
+interface DragState {
+  isDragging: boolean;
+  cards: Card[];
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  sourceElement: HTMLElement | null;
+}
+
 function App() {
   const [gameState, setGameState] = useState<GameState>(createInitialState());
   const [time, setTime] = useState(0);
   const [dragData, setDragData] = useState<DragData | null>(null);
   const [cardImages, setCardImages] = useState<CardImageMap | null>(null);
+  const [customDrag, setCustomDrag] = useState<DragState | null>(null);
 
   // Load card sprites on mount
   useEffect(() => {
@@ -30,6 +41,59 @@ function App() {
     return () => clearInterval(timer);
   }, [gameState.startTime]);
 
+  // Handle custom drag mouse move
+  useEffect(() => {
+    if (!customDrag?.isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      setCustomDrag(prev => prev ? {
+        ...prev,
+        currentX: e.clientX,
+        currentY: e.clientY
+      } : null);
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      if (!customDrag) return;
+
+      // Reset cursor
+      document.body.style.cursor = '';
+
+      // Find the drop target
+      const target = document.elementFromPoint(e.clientX, e.clientY);
+      const dropZone = target?.closest('.tableau-column, .card-pile.foundation');
+      
+      if (dropZone && dragData) {
+        // Determine target type and index
+        if (dropZone.classList.contains('tableau-column')) {
+          const columns = Array.from(document.querySelectorAll('.tableau-column'));
+          const targetIndex = columns.indexOf(dropZone);
+          if (targetIndex >= 0) {
+            handleDrop('tableau', targetIndex);
+          }
+        } else if (dropZone.classList.contains('foundation')) {
+          const foundations = Array.from(document.querySelectorAll('.card-pile.foundation'));
+          const targetIndex = foundations.indexOf(dropZone);
+          if (targetIndex >= 0) {
+            handleDrop('foundation', targetIndex);
+          }
+        }
+      }
+
+      // Clear custom drag
+      setCustomDrag(null);
+      setDragData(null);
+    };
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [customDrag, dragData]);
+
   const handleNewGame = () => {
     setGameState(createInitialState());
     setTime(0);
@@ -44,6 +108,39 @@ function App() {
     setDragData({ source, index, cardIndex });
   };
 
+  const handleCustomDragStart = (
+    e: React.MouseEvent,
+    source: 'waste' | 'tableau',
+    index: number,
+    cardIndex?: number,
+    cards?: Card[]
+  ) => {
+    e.preventDefault();
+    
+    if (!cards || cards.length === 0) return;
+
+    // Get the position of the clicked card element
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    
+    // Calculate offset from card's top-left corner to mouse position
+    const offsetX = e.clientX - rect.left;
+    const offsetY = e.clientY - rect.top;
+    
+    setDragData({ source, index, cardIndex });
+    setCustomDrag({
+      isDragging: true,
+      cards: cards,
+      startX: offsetX, // Store offset within the card
+      startY: offsetY,
+      currentX: e.clientX,
+      currentY: e.clientY,
+      sourceElement: e.currentTarget as HTMLElement
+    });
+
+    // Set cursor to grabbing
+    document.body.style.cursor = 'grabbing';
+  };
+
   const handleDrop = (target: 'tableau' | 'foundation', targetIndex: number) => {
     if (!dragData) return;
 
@@ -91,7 +188,9 @@ function App() {
     draggable?: boolean,
     onDragStart?: () => void,
     key?: string | number,
-    onDoubleClick?: () => void
+    onDoubleClick?: () => void,
+    column?: Card[], // Optional: full column for stack preview
+    cardIndex?: number // Optional: card index in column
   ) => {
     if (!cardImages) {
       // Loading fallback - show empty card
@@ -104,23 +203,19 @@ function App() {
       return <div key={key} className={className} style={style}></div>;
     }
 
-    const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => {
-      // Make the drag preview fully visible
-      if (e.dataTransfer) {
-        const dragImage = e.currentTarget.cloneNode(true) as HTMLElement;
-        dragImage.style.opacity = '1';
-        document.body.appendChild(dragImage);
-        e.dataTransfer.setDragImage(dragImage, e.currentTarget.offsetWidth / 2, e.currentTarget.offsetHeight / 2);
-        setTimeout(() => document.body.removeChild(dragImage), 0);
+    const handleMouseDown = (e: React.MouseEvent) => {
+      if (!draggable) return;
+      
+      // Get the cards to drag (current card and all below it in the column)
+      let cardsToMove: Card[] = [card];
+      if (column && cardIndex !== undefined && cardIndex < column.length - 1) {
+        cardsToMove = column.slice(cardIndex);
       }
-      // Make the original card invisible
-      e.currentTarget.style.opacity = '0';
-      if (onDragStart) onDragStart();
-    };
 
-    const handleDragEnd = (e: React.DragEvent<HTMLDivElement>) => {
-      // Restore the original card visibility
-      e.currentTarget.style.opacity = '1';
+      // Start custom drag
+      handleCustomDragStart(e, 'tableau', 0, cardIndex, cardsToMove);
+      
+      if (onDragStart) onDragStart();
     };
 
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -137,15 +232,22 @@ function App() {
       }
     };
 
+    // Check if this card is being dragged
+    const isBeingDragged = customDrag?.isDragging && customDrag.cards.some(c => 
+      c.suit === card.suit && c.rank === card.rank
+    );
+
     return (
       <div 
         key={key}
         className={className} 
         data-suit={card.suit} 
-        style={style}
-        draggable={draggable}
-        onDragStart={draggable ? handleDragStart : undefined}
-        onDragEnd={draggable ? handleDragEnd : undefined}
+        style={{
+          ...style,
+          opacity: isBeingDragged ? 0 : 1, // Fully hide the original cards during drag
+          cursor: draggable ? 'grab' : 'default'
+        }}
+        onMouseDown={draggable ? handleMouseDown : undefined}
         onDoubleClick={draggable ? handleClick : undefined}
       >
         <img src={imageUrl} alt={`${card.rank} of ${card.suit}`} draggable={false} />
@@ -190,19 +292,22 @@ function App() {
           </div>
 
           <div className="card-pile waste">
-            {gameState.waste.length > 0 && (() => {
-              const card = gameState.waste[gameState.waste.length - 1]!;
-              const canAutoMove = canPlaceOnFoundation(card, gameState.foundations[card.suit]);
-              return renderCard(
-                card,
-                'card',
-                undefined,
-                true,
-                () => handleDragStart('waste', 0),
-                undefined,
-                canAutoMove ? () => handleAutoMoveToFoundation('waste', 0) : undefined
-              );
-            })()}
+            {gameState.waste.length > 0 && (
+              // Render all cards in the waste pile (stacked with no offset)
+              gameState.waste.map((card, cardIdx) => {
+                const isTopCard = cardIdx === gameState.waste.length - 1;
+                const canAutoMove = isTopCard && canPlaceOnFoundation(card, gameState.foundations[card.suit]);
+                return renderCard(
+                  card,
+                  'card',
+                  undefined, // No offset - cards are perfectly stacked
+                  isTopCard, // Only top card is draggable
+                  isTopCard ? () => handleDragStart('waste', 0) : undefined,
+                  cardIdx,
+                  canAutoMove ? () => handleAutoMoveToFoundation('waste', 0) : undefined
+                );
+              })
+            )}
           </div>
 
           <div className="spacer"></div>
@@ -214,10 +319,21 @@ function App() {
               onDragOver={(e) => e.preventDefault()}
               onDrop={() => handleDrop('foundation', idx)}
             >
-              {gameState.foundations[suit].length > 0 ? (() => {
-                const card = gameState.foundations[suit][gameState.foundations[suit].length - 1]!;
-                return renderCard(card);
-              })() : (
+              {gameState.foundations[suit].length > 0 ? (
+                // Render all cards in the foundation stack
+                gameState.foundations[suit].map((card, cardIdx) => {
+                  // Only top card should be draggable from foundation (but we disable dragging in Klondike)
+                  return renderCard(
+                    card,
+                    'card',
+                    { top: `${Math.min(cardIdx * 2, 20)}px` }, // Slight offset, max 20px
+                    false, // Foundations are not draggable in Klondike
+                    undefined,
+                    cardIdx,
+                    undefined
+                  );
+                })
+              ) : (
                 <div className="pile-placeholder">{['♠', '♥', '♦', '♣'][idx]}</div>
               )}
             </div>
@@ -251,14 +367,51 @@ function App() {
                     true,
                     () => handleDragStart('tableau', colIdx, cardIdx),
                     cardIdx,
-                    canAutoMove ? () => handleAutoMoveToFoundation('tableau', colIdx) : undefined
+                    canAutoMove ? () => handleAutoMoveToFoundation('tableau', colIdx) : undefined,
+                    column, // Pass the full column
+                    cardIdx  // Pass the card index
                   );
                 })
               )}
             </div>
           ))}
         </div>
       </div>
+
+      {/* Custom drag overlay */}
+      {customDrag && customDrag.isDragging && (
+        <div
+          style={{
+            position: 'fixed',
+            left: customDrag.currentX - customDrag.startX, // Subtract the offset
+            top: customDrag.currentY - customDrag.startY,
+            pointerEvents: 'none',
+            zIndex: 10000,
+            cursor: 'grabbing'
+          }}
+        >
+          {customDrag.cards.map((card, idx) => (
+            <div
+              key={`${card.suit}-${card.rank}-drag`}
+              className="card"
+              style={{
+                position: 'absolute',
+                top: `${idx * 25}px`,
+                left: 0,
+                width: 'calc(min(100vw, 100vh) * 0.095)',
+                height: 'calc(min(100vw, 100vh) * 0.134)'
+              }}
+            >
+              <img 
+                src={cardImages?.get(card.suit, card.rank)} 
+                alt={`${card.rank} of ${card.suit}`} 
+                draggable={false}
+                style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+              />
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }