emarref.net
A daily game
1"use client";
2import { useAtom } from "jotai";
3import { useGameResult, useGuessAt, useVariants } from "../../lib/hooks";
4import { Button } from "../ui/button";
5
6interface Props {
7 index: number;
8}
9
10export function GameButton({ index }: Props) {
11 const [label, incrValue] = useGameButton(index);
12 const isWin = useGameResult();
13
14 return (
15 <button
16 onClick={() => incrValue()}
17 // variant={isWin ? "noShadow" : "reverse"}
18 className="flex h-auto text-4xl p-0 justify-center items-center text-main"
19 >
20 <span className={isWin ? "animate-bounce" : ""}>{label}</span>
21 </button>
22 );
23}
24
25function useGameButton(index: number) {
26 const variants = useVariants();
27 const guessAtom = useGuessAt(index);
28 const [currentGuess, incrementGuess] = useAtom(guessAtom);
29 const label = currentGuess === -1 ? "•" : variants[currentGuess];
30
31 return [label, incrementGuess] as const;
32}