1 files changed, 37 insertions, 13 deletions
diff --git a/frontend/src/Grid.tsx b/frontend/src/Grid.tsx
index b35f757..f6df3a8 100644
--- a/frontend/src/Grid.tsx
+++ b/frontend/src/Grid.tsx
@@ -9,28 +9,52 @@ const Tile = ({
   word: GameState["words"][number];
 }) => (
   <button
-    onClick={selectWordHandler}
-    className={`Grid-square ${word.selected ? "Selected" : ""}`}
-    style={{ cursor: "pointer" }}
+    onClick={!word.used ? selectWordHandler : undefined}
+    className={`Grid-square ${
+      word.selected ? "Selected" : word.used ? "Removed" : ""
+    }`}
   >
-    <h1 className="Fit-text">{word.word.toUpperCase()}</h1>
+    <pre>
+      <h1 className="Fit-text">{word.word.toUpperCase()}</h1>
+    </pre>
   </button>
 );
 
 export const Grid = ({
   selectWordHandler,
-  words,
+  submitSelectionHandler,
+  gameState,
 }: {
   selectWordHandler: (idx: number) => void;
-  words: GameState["words"];
-}) => (
-  <div className="Grid">
-    {new Array(16).fill(undefined).map((_, i) => (
+  submitSelectionHandler: () => void;
+  gameState: GameState;
+}) => {
+  const groups = gameState.groups.map(({ title, words }) => (
+    <div className="Completed-group">
+      <pre>
+        <h1 className="Fit-text">{title.toUpperCase()}</h1>
+        <h2 className="Fit-text">{words.join(", ")}</h2>
+      </pre>
+    </div>
+  ));
+  const tiles = gameState.words.map((word, i) =>
+    !word.used ? (
       <Tile
         selectWordHandler={() => selectWordHandler(i)}
-        word={words[i]}
+        word={word}
         key={i}
       />
-    ))}
-  </div>
-);
+    ) : undefined
+  );
+  return (
+    <div className="Grid-container">
+      {groups}
+      <div className="Grid">{tiles}</div>
+      {gameState.words.filter(({ selected }) => selected).length === 4 ? (
+        <button className="Submit-button" onClick={submitSelectionHandler}>
+          SUBMIT
+        </button>
+      ) : undefined}
+    </div>
+  );
+};