diff options
author | Kai Stevenson <kai@kaistevenson.com> | 2025-06-28 13:36:02 -0700 |
---|---|---|
committer | Kai Stevenson <kai@kaistevenson.com> | 2025-06-28 13:36:02 -0700 |
commit | 452ac1d2a9e238684605acc8820a4dd365e70cf8 (patch) | |
tree | 744d0d4fe08edc06ad8c0693f9444021d0aa00ea /frontend/src/App.tsx | |
parent | 6475f534e7bf457113dcc82d94bfb7ac413f71c4 (diff) |
Diffstat (limited to 'frontend/src/App.tsx')
-rw-r--r-- | frontend/src/App.tsx | 68 |
1 files changed, 51 insertions, 17 deletions
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 4eb26bd..b3203bc 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,13 +1,27 @@ import React, { useEffect, useState } from "react"; -import logo from "./kaistevenson.svg"; +import logo from "./kaistevenson_white.svg"; import "./App.css"; import { Grid } from "./Grid"; -import { getWords } from "./serverHelper"; +import { getCategory, getWords } from "./serverHelper"; export type GameState = { words: { word: string; selected: boolean; used: boolean }[]; - groups: { title: string; words: string[] }[]; + groups: { + title: string; + reason: string; + words: string[]; + flipped: boolean; + }[]; +}; + +const loadingGameState: GameState = { + words: new Array(16).fill({ + word: "Loading...", + selected: false, + used: false, + }), + groups: [], }; const initializeGameState = async (): Promise<GameState> => ({ @@ -46,6 +60,12 @@ const Game = () => { candidateState.words[idx].selected = !candidateState.words[idx].selected; setGameState(candidateState); }; + const flipGroupHandler = (idx: number) => { + const candidateState = { ...gameState! }; + //FIXME don't mutate state + candidateState.groups[idx].flipped = !candidateState.groups[idx].flipped; + setGameState(candidateState); + }; const submitSelectionHandler = () => { const candidateState = { ...gameState! }; @@ -65,26 +85,40 @@ const Game = () => { }) ); - //mock the server response for this selection - const response = "Four letter verbs"; - const newGroup: GameState["groups"][number] = { - title: response, + const loadingGroup: GameState["groups"][number] = { + title: "LOADING", words: selectedWords, + reason: "LOADING", + flipped: false, }; - candidateState.groups = [...candidateState.groups, newGroup]; - setGameState(candidateState); + setGameState((prevState) => ({ + ...candidateState!, + groups: [...prevState!.groups, loadingGroup], + })); + + getCategory(selectedWords).then(({ categoryName, reason }) => { + setGameState((prevState) => { + const updatedGroups = prevState!.groups.map((group) => + group === loadingGroup + ? { ...group, title: categoryName, reason } + : group + ); + return { ...candidateState!, groups: updatedGroups }; + }); + }); }; //display logic - return gameState ? ( - <Grid - selectWordHandler={selectWordHandler} - submitSelectionHandler={submitSelectionHandler} - gameState={gameState!} - /> - ) : ( - <h1>Loading...</h1> + return ( + <div className="Game-main"> + <Grid + selectWordHandler={selectWordHandler} + flipGroupHandler={flipGroupHandler} + submitSelectionHandler={submitSelectionHandler} + gameState={gameState ?? loadingGameState} + /> + </div> ); }; |