diff --git a/web/src/discover/DeckCard.tsx b/web/src/discover/DeckCard.tsx index 6c2cb2d..3c6dbbc 100644 --- a/web/src/discover/DeckCard.tsx +++ b/web/src/discover/DeckCard.tsx @@ -1,3 +1,4 @@ +import type { DOMAttributes } from 'react' import { DIFFICULTIES, type Difficulty } from '../dinners/api.ts' import { Photo } from '../ui/Photo.tsx' import type { SideQuest } from './api.ts' @@ -8,25 +9,32 @@ export const DECK_DEPTH = [0, 1, 2] as const const DIFFICULTY_LABEL: Record = { easy: 'Easy', medium: 'Medium', hard: 'Hard' } +// SwipeHandlers are the pointer handlers that drag the top card. +export type SwipeHandlers = Pick, 'onPointerDown' | 'onPointerMove' | 'onPointerUp' | 'onPointerCancel'> + export type DeckCardProps = { quest: SideQuest // 0 is the top card; 1 and 2 stack behind it. depth: number + // swipe makes the card draggable; only the top card gets it. + swipe?: SwipeHandlers } // DeckCard is one Side quest in the deck. Only the top card is read out and // reachable; the cards behind it are the stack's edge, kept rendered so they // can be promoted. Its "Try it!" and "Pass" stamps stay hidden until a -// decision shows them, and its shade until Pass folds it (see motion.ts). -export function DeckCard({ quest, depth }: DeckCardProps) { +// decision or a drag shows them, and its shade until Pass folds it (see +// motion.ts). +export function DeckCard({ quest, depth, swipe }: DeckCardProps) { const top = depth === 0 const titleId = `side-quest-${quest.id}` return (
@@ -41,7 +49,7 @@ export function DeckCard({ quest, depth }: DeckCardProps) { -