diff options
Diffstat (limited to 'frontend/src/Grid.tsx')
| -rw-r--r-- | frontend/src/Grid.tsx | 68 |
1 files changed, 60 insertions, 8 deletions
diff --git a/frontend/src/Grid.tsx b/frontend/src/Grid.tsx index f6df3a8..8d822f3 100644 --- a/frontend/src/Grid.tsx +++ b/frontend/src/Grid.tsx @@ -1,5 +1,6 @@ import React from "react"; import { GameState } from "./App"; +import Typewriter from "typewriter-effect"; const Tile = ({ word, @@ -23,20 +24,71 @@ const Tile = ({ export const Grid = ({ selectWordHandler, submitSelectionHandler, + flipGroupHandler, gameState, }: { selectWordHandler: (idx: number) => void; + flipGroupHandler: (idx: number) => void; 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 groups = gameState.groups.map( + ({ words, title, reason, flipped }, idx) => ( + <button onClick={() => flipGroupHandler(idx)} className="Completed-group"> + { + <pre> + {flipped ? ( + <Typewriter + key={"reason-tw"} + options={{ + delay: 1, + wrapperClassName: "Group-reason", + cursor: "", + }} + onInit={(tw) => tw.typeString(reason).start()} + component={"p"} + ></Typewriter> + ) : ( + <div> + {title !== "LOADING" ? ( + <Typewriter + key={"header-tw"} + options={{ + delay: 30, + wrapperClassName: "Group-header", + cursor: "", + }} + onInit={(tw) => tw.typeString(title).start()} + component={"h1"} + ></Typewriter> + ) : ( + <Typewriter + key={"loading-tw"} + options={{ + delay: 150, + wrapperClassName: "Group-header", + cursor: "", + }} + onInit={(tw) => tw.typeString("Loading...").start()} + component={"h1"} + ></Typewriter> + )} + <Typewriter + options={{ + delay: 15, + wrapperClassName: "Group-content", + cursor: "", + }} + onInit={(tw) => tw.typeString(words.join(", ")).start()} + component={"h2"} + ></Typewriter> + </div> + )} + </pre> + } + </button> + ) + ); const tiles = gameState.words.map((word, i) => !word.used ? ( <Tile |