Something went wrong. Try again.
A daily game
Something went wrong. Try again.
1.3 kB · 47 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748import { groupByValue } from "@/lib/game";import { useBoardSubset, useSessionSubset } from "@/lib/hooks";import { cva } from "class-variance-authority";
const variantHeader = cva("flex gap-2 text-sm font-bold items-center", { variants: { orientation: { horizontal: "", vertical: "flex-col", }, result: { correct: "text-lime-400", almost: "text-amber-300", inProgress: "text-main", }, },});
type Props = { orientation: "horizontal" | "vertical"; index: number; variant: number;};
export function VariantHeader({ orientation, index, variant }: Props) { const dir = orientation === "horizontal" ? "row" : "col"; const boardRow = useBoardSubset(dir, index); const boardHints = groupByValue(boardRow, variant); const sessionRow = useSessionSubset(dir, index); const sessionHints = groupByValue(sessionRow, variant);
const result = sessionRow.toString() === boardRow.toString() ? "correct" : sessionHints.toString() === boardHints.toString() && sessionRow.filter((i) => i > -1).length === boardRow.length ? "almost" : "inProgress";
return ( <div className={variantHeader({ orientation, result })}> {boardHints.map((count, i) => ( <p key={i}>{count}</p> ))} </div> );}