summaryrefslogtreecommitdiff
path: root/frontend/src/Grid.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/Grid.tsx')
-rw-r--r--frontend/src/Grid.tsx36
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>
+);