Flip Card Demo

1"use client"
2 
3import * as React from "react"
4 
5import { FlipCard } from "@/registry/loomui/flip-card"
6 
7/** Fixed order, not shuffled, so the server and the client agree. */
8const DECK = ["🫐", "🍑", "🍑", "🫐"]
9const MISS_DELAY = 700
10/** The card's own turn. The match ring waits for both to land. */
11const FLIP_MS = 480
12 
13const FACE =
14  "grid size-24 place-items-center rounded-xl border text-3xl transition-colors"
15 
16export default function FlipCardDemo() {
17  const [faceUp, setFaceUp] = React.useState<number[]>([])
18  const [matched, setMatched] = React.useState<number[]>([])
19  // The ring waits for the turn, so it lands on a card already face up.
20  const [landed, setLanded] = React.useState<number[]>([])
21  const timer = React.useRef<ReturnType<typeof setTimeout>>(undefined)
22  const ring = React.useRef<ReturnType<typeof setTimeout>>(undefined)
23 
24  React.useEffect(
25    () => () => {
26      clearTimeout(timer.current)
27      clearTimeout(ring.current)
28    },
29    []
30  )
31 
32  const reveal = (index: number) => {
33    if (
34      faceUp.length === 2 ||
35      faceUp.includes(index) ||
36      matched.includes(index)
37    ) {
38      return
39    }
40 
41    const next = [...faceUp, index]
42    setFaceUp(next)
43 
44    if (next.length < 2) {
45      return
46    }
47 
48    const [first, second] = next
49    if (DECK[first] === DECK[second]) {
50      setMatched((current) => [...current, first, second])
51      setFaceUp([])
52      ring.current = setTimeout(
53        () => setLanded((current) => [...current, first, second]),
54        FLIP_MS
55      )
56      return
57    }
58 
59    timer.current = setTimeout(() => setFaceUp([]), MISS_DELAY)
60  }
61 
62  const reset = () => {
63    clearTimeout(timer.current)
64    clearTimeout(ring.current)
65    setFaceUp([])
66    setMatched([])
67    setLanded([])
68  }
69 
70  const won = landed.length === DECK.length
71 
72  return (
73    <div className="flex flex-col items-center gap-5">
74      <div className="grid grid-cols-2 gap-3">
75        {DECK.map((emoji, index) => (
76          <FlipCard
77            key={index}
78            flipped={faceUp.includes(index) || matched.includes(index)}
79            onClick={() => reveal(index)}
80            aria-label={`Card ${index + 1}`}
81            front={
82              <span
83                className={`${FACE} bg-card text-muted-foreground/60 text-xl`}
84              >
85                ?
86              </span>
87            }
88            back={
89              <span
90                className={`${FACE} bg-card ${
91// … truncated