"use client"; import React, { useState } from "react"; import { motion, useMotionValue, useReducedMotion, useTransform, type PanInfo, } from "motion/react"; export interface TossDeckProps { /** Card faces, front of deck first. */ items: React.ReactNode[]; /** Card size in px. */ width?: number; height?: number; /** Cards visible behind the top card. */ peek?: number; /** Show the 01 / 05 counter under the deck. */ counter?: boolean; /** Called with the item index that lands on top after a toss. */ onChange?: (index: number) => void; className?: string; style?: React.CSSProperties; } /** * A card deck with weight — drag the top card past the threshold (or press * an arrow key) and it flies off with a spin, then slips back under the pile. */ export function TossDeck({ items, width = 320, height = 420, peek = 2, counter = true, onChange, className, style, }: TossDeckProps) { const [order, setOrder] = useState(() => items.map((_, i) => i)); const [fly, setFly] = useState<{ key: number; dir: 1 | -1 } | null>(null); const reduced = useReducedMotion(); const n = items.length; const toss = (dir: 1 | -1) => { if (fly || n < 2) return; setFly({ key: order[0], dir }); }; const completeToss = () => { const next = [...order.slice(1), order[0]]; setOrder(next); setFly(null); onChange?.(next[0]); }; return (

{ if (e.key === "ArrowLeft") { e.preventDefault(); toss(-1); } if (e.key === "ArrowRight") { e.preventDefault(); toss(1); } }} className="relative outline-none focus-visible:ring-2 focus-visible:ring-[rgba(var(--ink-rgb),0.3)]" style={{ width, height: height + peek * 10 }} > {order.map((itemIdx, pos) => ( {items[itemIdx]} ))}

{counter && ( {String(order[0] + 1).padStart(2, "0")} /{" "} {String(n).padStart(2, "0")} )}

); } function DeckCard({ children, pos, n, peek, width, height, flying, isTop, onToss, onFlown, reduced, }: { children: React.ReactNode; pos: number; n: number; peek: number; width: number; height: number; flying: 0 | 1 | -1; isTop: boolean; onToss: (dir: 1 | -1) => void; onFlown: () => void; reduced: boolean; }) { const x = useMotionValue(0); const dragRotate = useTransform( x, [-width * 0.5, width * 0.5], [-5, 5], ); // Cards deeper than `peek` park exactly under the last visible slot instead // of fading out, so a tossed card never vanishes — it just tucks under. const depth = Math.min(pos, peek); const fan = depth === 0 ? 0 : (depth % 2 === 1 ? 1 : -1) * depth * 1.8; const stackX = depth === 0 ? 0 : (depth % 2 === 1 ? -1 : 1) * depth * 6; const stackY = depth * 10 + (depth % 2 === 1 ? 3 : 0); const slotSpring = reduced ? ({ duration: 0 } as const) : ({ type: "spring", stiffness: 360, damping: 34, mass: 0.8 } as const); const handleDragEnd = (_: unknown, info: PanInfo) => { const past = Math.abs(info.offset.x) > width * 0.24 || Math.abs(info.velocity.x) > 500; if (!past) return; const dir = Math.abs(info.velocity.x) > 500 ? Math.sign(info.velocity.x) : Math.sign(info.offset.x); onToss(dir >= 0 ? 1 : -1); }; return ( { if (flying !== 0) onFlown(); }} style={{ x, rotate: dragRotate }} className={[ "relative h-full w-full overflow-hidden rounded-[1.25rem] border border-[var(--rule)] bg-[var(--background)] shadow-[0_24px_50px_-24px_color-mix(in_srgb,light-dark(var(--ink),var(--background))_42%,transparent)]", isTop ? "cursor-grab active:cursor-grabbing" : "", ] .filter(Boolean) .join(" ")} >