1 files changed, 64 insertions, 0 deletions
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000..f6f5296
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import logo from "./kaistevenson.svg";
+import "./App.css";
+
+import { Grid } from "./Grid";
+import { getWords } from "./serverHelper";
+
+export type GameState = {
+  words: { word: string; selected: boolean }[];
+};
+
+const initializeGameState = async (): Promise<GameState> => ({
+  words: (await getWords()).map((word) => ({ word, selected: false })),
+});
+
+const Game = () => {
+  //state
+  const [gameState, setGameState] = useState<GameState | undefined>(undefined);
+
+  //initialize
+  useEffect(() => {
+    if (!gameState) {
+      initializeGameState()
+        .then((state) => setGameState(state))
+        .catch(console.error);
+    }
+  });
+
+  //handlers
+  const selectWordHandler = (idx: number) => {
+    const candidateState = { ...gameState! };
+    if (candidateState.words.filter((word) => word.selected).length === 4) {
+      if (!candidateState.words[idx].selected) {
+        //if we've already selected 4 words and we would select another,
+        //do nothing
+        return;
+      }
+    }
+    //FIXME don't mutate state
+    candidateState.words[idx].selected = !candidateState.words[idx].selected;
+    setGameState(candidateState);
+    console.log(`selected ${idx}`);
+  };
+
+  //display logic
+  return gameState ? (
+    <Grid selectWordHandler={selectWordHandler} words={gameState.words!} />
+  ) : (
+    <h1>Loading...</h1>
+  );
+};
+
+export const App = () => (
+  <div className="App">
+    <div className="App-bg">
+      <div className="Logo-container">
+        <img src={logo} className="App-logo" alt="logo" />
+      </div>
+      <div className="App-main">
+        <Game />
+      </div>
+    </div>
+  </div>
+);