From 452ac1d2a9e238684605acc8820a4dd365e70cf8 Mon Sep 17 00:00:00 2001
From: Kai Stevenson <kai@kaistevenson.com>
Date: Sat, 28 Jun 2025 13:36:02 -0700
Subject: MVP

---
 frontend/src/Grid.tsx | 68 +++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 60 insertions(+), 8 deletions(-)

(limited to 'frontend/src/Grid.tsx')

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
-- 
cgit v1.2.3-70-g09d2