Something went wrong. Try again.
A daily game
Something went wrong. Try again.
1.9 kB · 51 lines
TSX
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152"use client";import { CSSProperties } from "react";import { arrayOfSize } from "../lib/game";import { useBoardDimensions, useVariants } from "../lib/hooks";import { GameButton } from "./game/game-button";import { GameHeader } from "./game/game-header";import { Celebration } from "./game/celebration";import { ClearButton } from "./game/clear-button";import { NewGameButton } from "./game/new-game-button";import { PreferencesButton } from "./game/preferences-button";
interface GameProperties extends CSSProperties { "--game-width": number; "--game-height": number;}
export function Game() { const variants = useVariants(); const [width, height] = useBoardDimensions();
return ( <> <div> <div style={ { "--game-width": width, "--game-height": height } as GameProperties } 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" > <GameHeader position={"left"} variant={0} /> <GameHeader position={"top"} variant={1} /> {variants.length > 2 && <GameHeader position={"right"} variant={2} />} {variants.length > 3 && ( <GameHeader position={"bottom"} variant={3} /> )} <div className="grid grid-rows-subgrid grid-cols-subgrid row-start-3 -row-end-3 col-start-3 -col-end-3"> {arrayOfSize(width * height).map((_, i) => ( <GameButton key={i} index={i} /> ))} </div> </div> </div> <div className="grid grid-cols-2 my-6 pt-6 gap-4 border-t-2"> <ClearButton>Clear</ClearButton> <NewGameButton>New game</NewGameButton> <PreferencesButton>Preferences</PreferencesButton> </div> <Celebration /> </> );}