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 <noreply@anthropic.com>
This commit is contained in:
@@ -577,14 +577,23 @@ function PlayerHand({ legalIds }: { legalIds: Set<string> }) {
|
||||
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"
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user