grouping

1 files changed, 42 insertions, 4 deletions

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f6f5296..4eb26bd 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -6,11 +6,17 @@ import { Grid } from "./Grid";
 import { getWords } from "./serverHelper";
 
 export type GameState = {
-  words: { word: string; selected: boolean }[];
+  words: { word: string; selected: boolean; used: boolean }[];
+  groups: { title: string; words: string[] }[];
 };
 
 const initializeGameState = async (): Promise<GameState> => ({
-  words: (await getWords()).map((word) => ({ word, selected: false })),
+  words: (await getWords()).map((word) => ({
+    word,
+    selected: false,
+    used: false,
+  })),
+  groups: [],
 });
 
 const Game = () => {
@@ -39,12 +45,44 @@ const Game = () => {
     //FIXME don't mutate state
     candidateState.words[idx].selected = !candidateState.words[idx].selected;
     setGameState(candidateState);
-    console.log(`selected ${idx}`);
+  };
+  const submitSelectionHandler = () => {
+    const candidateState = { ...gameState! };
+
+    const selectedWords = candidateState.words
+      .filter(({ selected }) => selected)
+      .map(({ word }) => word);
+
+    if (selectedWords.length !== 4) {
+      return;
+    }
+
+    candidateState.words = candidateState.words.map(
+      ({ selected, word, used }) => ({
+        used: used || selected,
+        selected: false,
+        word,
+      })
+    );
+
+    //mock the server response for this selection
+    const response = "Four letter verbs";
+    const newGroup: GameState["groups"][number] = {
+      title: response,
+      words: selectedWords,
+    };
+    candidateState.groups = [...candidateState.groups, newGroup];
+
+    setGameState(candidateState);
   };
 
   //display logic
   return gameState ? (
-    <Grid selectWordHandler={selectWordHandler} words={gameState.words!} />
+    <Grid
+      selectWordHandler={selectWordHandler}
+      submitSelectionHandler={submitSelectionHandler}
+      gameState={gameState!}
+    />
   ) : (
     <h1>Loading...</h1>
   );