emarref.net
A daily game
1"use client";
2import { CSSProperties } from "react";
3import { arrayOfSize } from "../lib/game";
4import { useBoardDimensions, useVariants } from "../lib/hooks";
5import { GameButton } from "./game/game-button";
6import { GameHeader } from "./game/game-header";
7import { Celebration } from "./game/celebration";
8import { ClearButton } from "./game/clear-button";
9import { NewGameButton } from "./game/new-game-button";
10import { PreferencesButton } from "./game/preferences-button";
11
12interface GameProperties extends CSSProperties {
13 "--game-width": number;
14 "--game-height": number;
15}
16
17export function Game() {
18 const variants = useVariants();
19 const [width, height] = useBoardDimensions();
20
21 return (
22 <>
23 <div>
24 <div
25 style={
26 { "--game-width": width, "--game-height": height } as GameProperties
27 }
28 className="grid grid-cols-[repeat(2,auto)_repeat(var(--game-width),3rem)_repeat(2,auto)] grid-rows-[repeat(2,auto)_repeat(var(--game-height),3rem)_repeat(2,auto)] gap-1 content-stretch"
29 >
30 <GameHeader position={"left"} variant={0} />
31 <GameHeader position={"top"} variant={1} />
32 {variants.length > 2 && <GameHeader position={"right"} variant={2} />}
33 {variants.length > 3 && (
34 <GameHeader position={"bottom"} variant={3} />
35 )}
36 <div className="grid grid-rows-subgrid grid-cols-subgrid row-start-3 -row-end-3 col-start-3 -col-end-3">
37 {arrayOfSize(width * height).map((_, i) => (
38 <GameButton key={i} index={i} />
39 ))}
40 </div>
41 </div>
42 </div>
43 <div className="grid grid-cols-2 my-6 pt-6 gap-4 border-t-2">
44 <ClearButton>Clear</ClearButton>
45 <NewGameButton>New game</NewGameButton>
46 <PreferencesButton>Preferences</PreferencesButton>
47 </div>
48 <Celebration />
49 </>
50 );
51}