emarref.net
A daily game
1import { PropsWithChildren } from "react";
2import { groupIntoCols, groupIntoRows } from "../../lib/game";
3import { useBoard, useBoardDimensions, useVariantAt } from "../../lib/hooks";
4import { VariantCaption } from "./variant-caption";
5import { VariantHints } from "./variant-hints";
6
7type HeaderProps = {
8 position: "left" | "top" | "right" | "bottom";
9 variant: number;
10};
11
12export function GameHeader({
13 variant,
14 position,
15}: PropsWithChildren<HeaderProps>) {
16 const label = useVariantAt(variant);
17 const orientation = ["top", "bottom"].includes(position)
18 ? "horizontal"
19 : "vertical";
20 const board = useBoard();
21 const [width] = useBoardDimensions();
22 const items =
23 orientation === "horizontal"
24 ? groupIntoCols(board, width)
25 : groupIntoRows(board, width);
26
27 return (
28 <>
29 <VariantCaption position={position}>{label}</VariantCaption>
30 <VariantHints variant={variant} position={position} blocks={items} />
31 </>
32 );
33}