50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T3a40,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Shared helpers */ /* -------------------------------------------------------------------------- */ function usePrefersReducedMotion(): boolean { const [reduce, setReduce] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduce(mq.matches); const onChange = (e: MediaQueryListEvent) => setReduce(e.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduce; } /* -------------------------------------------------------------------------- */ /* Game constants */ /* -------------------------------------------------------------------------- */ // 8 distinct symbols rendered as large bold characters — A through H. const SYMBOLS = ["A", "B", "C", "D", "E", "F", "G", "H"] as const; type Symbol = (typeof SYMBOLS)[number]; const GRID_SIZE = 16; // 4×4 interface Card { id: number; symbol: Symbol; state: "face-down" | "flipped" | "matched"; } /* -------------------------------------------------------------------------- */ /* Shuffle util */ /* -------------------------------------------------------------------------- */ function buildDeck(): Card[] { // Duplicate each symbol to form pairs, then shuffle. const pairs: Symbol[] = [...SYMBOLS, ...SYMBOLS]; // Fisher-Yates shuffle with Math.random for (let i = pairs.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); const tmp = pairs[i]; const src = pairs[j]; if (tmp !== undefined && src !== undefined) { pairs[i] = src; pairs[j] = tmp; } } return pairs.map((symbol, id) => ({ id, symbol, state: "face-down" as const })); } // Deterministic face-down deck for the idle screen so the board reserves its // full size before the game starts (and matches SSR markup — no random tiles). function placeholderDeck(): Card[] { return Array.from({ length: GRID_SIZE }, (_, id) => ({ id, symbol: SYMBOLS[id % SYMBOLS.length] as Symbol, state: "face-down" as const, })); } /* -------------------------------------------------------------------------- */ /* Props */ /* -------------------------------------------------------------------------- */ export interface MemoryMatchProps { className?: string; autoFocus?: boolean; persistHighScore?: boolean | string; onScoreChange?: (score: number) => void; onGameOver?: (r: { score: number; won: boolean }) => void; onStart?: () => void; width?: number; } /* -------------------------------------------------------------------------- */ /* Component */ /* -------------------------------------------------------------------------- */ export function MemoryMatch({ className, autoFocus = true, persistHighScore = true, onScoreChange, onGameOver, onStart, width, }: MemoryMatchProps) { const wrapperRef = React.useRef(null); const reduce = usePrefersReducedMotion(); const storageKey = typeof persistHighScore === "string" ? persistHighScore : persistHighScore === false ? null : "gamekitui:memory-match:hi"; // ── game state ────────────────────────────────────────────────────────────── const [status, setStatus] = React.useState<"idle" | "playing" | "won">("idle"); const [cards, setCards] = React.useState(placeholderDeck); const [moves, setMoves] = React.useState(0); const [best, setBest] = React.useState(0); const [announcement, setAnnouncement] = React.useState(""); // flipped indices (at most 2 during a turn) const [flipped, setFlipped] = React.useState<[number, number] | [number] | []>([]); // locked while mismatch timeout is running const [locked, setLocked] = React.useState(false); // ── load persisted best ───────────────────────────────────────────────────── React.useEffect(() => { if (!storageKey) return; try { const raw = window.localStorage.getItem(storageKey); if (raw) { const parsed = Number(raw); if (parsed > 0) setBest(parsed); } } catch { /* ignore */ } }, [storageKey]); // ── submit best (lower = better) ──────────────────────────────────────────── const submitBest = React.useCallback( (m: number) => { setBest((prev) => { const isNewBest = prev === 0 || m < prev; if (!isNewBest) return prev; if (storageKey) { try { window.localStorage.setItem(storageKey, String(m)); } catch { /* ignore */ } } return m; }); }, [storageKey], ); // ── start / restart ───────────────────────────────────────────────────────── const start = React.useCallback(() => { setCards(buildDeck()); setMoves(0); setFlipped([]); setLocked(false); setStatus("playing"); setAnnouncement("Game started. Flip cards to find matching pairs."); onStart?.(); onScoreChange?.(0); wrapperRef.current?.focus(); }, [onStart, onScoreChange]); // auto-focus React.useEffect(() => { if (autoFocus) wrapperRef.current?.focus(); }, [autoFocus]); // ── flip logic ────────────────────────────────────────────────────────────── const handleFlip = React.useCallback( (index: number) => { if (locked || status !== "playing") return; setCards((prev) => { const card = prev[index]; if (!card || card.state !== "face-down") return prev; return prev.map((c, i) => (i === index ? { ...c, state: "flipped" as const } : c)); }); setFlipped((prev) => { if (prev.length === 0) { return [index]; } if (prev.length === 1) { const firstIdx = prev[0]; if (firstIdx === undefined || firstIdx === index) return prev; // We need to check outside of this setter; use a ref trick below. return [firstIdx, index] as [number, number]; } return prev; }); }, [locked, status], ); // ── check for match whenever flipped has 2 entries ────────────────────────── React.useEffect(() => { if (flipped.length !== 2) return; const [a, b] = flipped as [number, number]; const cardA = cards[a]; const cardB = cards[b]; if (!cardA || !cardB) return; const newMoves = moves + 1; setMoves(newMoves); onScoreChange?.(newMoves); if (cardA.symbol === cardB.symbol) { // Match! const nextCards = cards.map((c, i) => i === a || i === b ? { ...c, state: "matched" as const } : c, ); setCards(nextCards); setFlipped([]); const allMatched = nextCards.every((c) => c.state === "matched"); if (allMatched) { setStatus("won"); submitBest(newMoves); const isNewBest = best === 0 || newMoves < best; setAnnouncement( `You won in ${newMoves} moves!${isNewBest ? " New best!" : ""}`, ); onGameOver?.({ score: newMoves, won: true }); } else { setAnnouncement(`Match! ${newMoves} moves so far.`); } } else { // No match — lock and flip back after delay. setLocked(true); setAnnouncement(`No match. ${newMoves} moves so far.`); const delay = reduce ? 0 : 700; const timer = setTimeout(() => { setCards((prev) => prev.map((c, i) => i === a || i === b ? { ...c, state: "face-down" as const } : c, ), ); setFlipped([]); setLocked(false); }, delay); return () => clearTimeout(timer); } // eslint-disable-next-line react-hooks/exhaustive-deps }, [flipped]); // NOTE: intentionally not including `cards`, `moves`, `best`, etc. in deps // to avoid double-firing; this effect is keyed entirely on the `flipped` pair. // ── keyboard: wrapper handles Enter/Space on idle/won ─────────────────────── const handleWrapperKey = React.useCallback( (e: React.KeyboardEvent) => { if ((e.key === "Enter" || e.key === " ") && status !== "playing") { e.preventDefault(); start(); } }, [status, start], ); // ── card bg / text classes ────────────────────────────────────────────────── function cardClasses(state: Card["state"]): string { if (state === "face-down") { return "bg-primary text-primary-foreground"; } if (state === "flipped") { return "bg-secondary text-secondary-foreground"; } // matched return "bg-accent text-accent-foreground opacity-60"; } // ── flip animation class ──────────────────────────────────────────────────── // We use a simple scale trick when not reduce. CSS-only via Tailwind. function transitionClass(state: Card["state"]): string { if (reduce) return ""; if (state === "face-down") return "transition-transform duration-200"; return "transition-transform duration-200 scale-95"; } const isNewBestOnWin = status === "won" && (best === 0 || moves <= best); return (

{/* ── score bar ─────────────────────────────────────────────────────── */}

Moves {moves} Best {best === 0 ? "—" : best}

{/* ── board ─────────────────────────────────────────────────────────── */}

{cards.map((card, index) => ( ))}

{/* ── overlay ─────────────────────────────────────────────────────── */} {status !== "playing" && (

{status === "won" ? ( <>

You won!

{moves} moves {isNewBestOnWin ? " — new best!" : ""}

) : ( <>

Memory Match

Flip cards to find all 8 matching pairs.

)}

{/* ── aria-live region for screen readers ──────────────────────────── */}

{announcement}

); } export default MemoryMatch; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/games/memory-match.tsx","content":"$51","type":"registry:component","target":"@/components/games/memory-match.tsx"}],"className":"h-[70svh] min-h-80"}]]}]