diff options
Diffstat (limited to 'frontend/src/Grid.tsx')
-rw-r--r-- | frontend/src/Grid.tsx | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/frontend/src/Grid.tsx b/frontend/src/Grid.tsx new file mode 100644 index 0000000..b35f757 --- /dev/null +++ b/frontend/src/Grid.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { GameState } from "./App"; + +const Tile = ({ + word, + selectWordHandler, +}: { + selectWordHandler: () => void; + word: GameState["words"][number]; +}) => ( + <button + onClick={selectWordHandler} + className={`Grid-square ${word.selected ? "Selected" : ""}`} + style={{ cursor: "pointer" }} + > + <h1 className="Fit-text">{word.word.toUpperCase()}</h1> + </button> +); + +export const Grid = ({ + selectWordHandler, + words, +}: { + selectWordHandler: (idx: number) => void; + words: GameState["words"]; +}) => ( + <div className="Grid"> + {new Array(16).fill(undefined).map((_, i) => ( + <Tile + selectWordHandler={() => selectWordHandler(i)} + word={words[i]} + key={i} + /> + ))} + </div> +); |