From d932dbbb525f4f7ad1aba7a0b8aae97496775201 Mon Sep 17 00:00:00 2001 From: "soroush.asadi" Date: Tue, 16 Jun 2026 08:52:40 +0330 Subject: [PATCH] feat(game): drag a card up to the board center to play it Playable hand cards are now draggable (Framer drag + dragSnapToOrigin): drag one up toward the table center and release to play it; release short and it snaps back. Tapping still plays as before. touch-action:none so the drag gesture works on mobile without scrolling. Co-Authored-By: Claude Opus 4.8 --- src/components/GameTable.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/GameTable.tsx b/src/components/GameTable.tsx index 846df64..d4f2bf6 100644 --- a/src/components/GameTable.tsx +++ b/src/components/GameTable.tsx @@ -577,14 +577,23 @@ function PlayerHand({ legalIds }: { legalIds: Set }) { transition={{ type: "spring", stiffness: 280, damping: 28, delay: i * 0.012 }} whileHover={playable ? { y: lift - 26, scale: 1.08, zIndex: 50 } : {}} whileTap={playable ? { scale: 1.05 } : {}} + // Drag a playable card up toward the board center to play it (tap also works). + drag={playable} + dragSnapToOrigin + dragElastic={0.6} + dragMomentum={false} + whileDrag={{ scale: 1.12, rotate: 0, zIndex: 60, cursor: "grabbing" }} + onDragEnd={(_e, info) => { + if (playable && info.offset.y < -90) playHuman(card); + }} onClick={() => playable && playHuman(card)} disabled={!playable} data-card={card.id} data-playable={playable ? "1" : "0"} - style={{ marginInlineStart: i === 0 ? 0 : overlap }} + style={{ marginInlineStart: i === 0 ? 0 : overlap, touchAction: "none" }} className={cn( "origin-bottom shrink-0 relative", - playable ? "cursor-pointer z-30" : "cursor-default", + playable ? "cursor-grab z-30" : "cursor-default", playable && "card-playable" )} >