Make grids more consistent, add better titles

ui/src/LocalPlayGrid.tsx

@@ -1,9 +1,11 @@
 import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { Category, Grid } from "./Models";
-import { Spinner } from "flowbite-react";
+import { Button, Spinner } from "flowbite-react";
 import TimedGrid from "./grid/TimedGrid";
 import { ErrorContext } from "./ErrorContext";
+import SimpleGrid from "./grid/SimpleGrid";
+import GridTitle from "./grid/GridTitle";
 
 export default function LocalPlayGrid() {
   const { gridId } = useParams();
@@ -13,6 +15,7 @@ export default function LocalPlayGrid() {
   const [startTime, setStartTime] = useState<number>(Date.now());
   const [staticTime, setStaticTime] = useState<number | undefined>(undefined);
   const [penalties, setPenalties] = useState<number>(0);
+  const [playing, setPlaying] = useState(false);
 
   const onCorrect = (_: Category, total: number) => {
     if (total === grid?.categories.length) {
@@ -37,9 +40,17 @@ export default function LocalPlayGrid() {
         setStartTime(Date.now());
         setStaticTime(undefined);
         setPenalties(0);
+        setPlaying(false);
       });
   }, [gridId, addError]);
 
+  const startGame = () => {
+    setPlaying(true);
+    setStartTime(Date.now());
+    setStaticTime(undefined);
+    setPenalties(0);
+  };
+
   if (loading) {
     return (
       <div className="flex flex-col items-center mt-8 text-lg gap-4">
@@ -53,6 +64,24 @@ export default function LocalPlayGrid() {
     return <div>unknown error, no grid loaded</div>;
   }
 
+  if (!playing) {
+    return (
+      <div className="flex flex-col grow">
+        <div className="flex grow justify-center p-4">
+          <div className="flex flex-col grow max-w-screen-md mx-auto">
+            <GridTitle grid={grid} />
+
+            <div className="mt-4 grow">
+              <SimpleGrid grid={grid} matchedCount={0} />
+            </div>
+
+            <Button onClick={startGame}>Play Grid</Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col grow mb-4">
       <div className="flex grow justify-center p-2">

ui/src/grid/GridTitle.tsx

@@ -0,0 +1,27 @@
+import { Grid } from "../Models";
+
+export default function GridTitle({ grid }: { grid: Grid }) {
+  return (
+    <div className="flex flex-row justify-between mb-1">
+      <div className="flex flex-col items-start">
+        <span className="text-lg font-semibold">{grid.name}</span>
+
+        <span className="text-xs text-gray-400 mr-1">
+          by
+          {grid.source === "NYT" ? (
+            <a href="https://www.nytimes.com/games/connections" target="_" className="ml-1 text-sky-400 hover:text-sky-600">
+              {grid.createdBy}
+            </a>
+          ) : (
+            <span className="ml-1 text-gray-400">{grid.createdBy}</span>
+          )}
+        </span>
+      </div>
+
+      <div className="flex flex-col items-end justify-around">
+        <span className="text-xs text-gray-400">{new Date(grid.createdDateTime).toLocaleDateString()}</span>
+        <span className="text-xs text-gray-400">ID: {grid.id}</span>
+      </div>
+    </div>
+  );
+}

ui/src/grid/InteractiveGrid.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { Category, Grid } from "../Models";
 import * as _ from "underscore";
+import GridTitle from "./GridTitle";
 
 type Props = {
   grid: Grid;
@@ -9,7 +10,7 @@ type Props = {
 };
 
 function Row({ children }: React.PropsWithChildren) {
-  return <div className="flex flex-row grow text-xs md:text-lg max-h-20 md:max-h-24 gap-2">{children}</div>;
+  return <div className="flex flex-row aspect-[6/1] gap-1 md:gap-2">{children}</div>;
 }
 
 export default function InteractiveGrid({ grid, onCorrect, onIncorrect }: Props) {
@@ -31,7 +32,6 @@ export default function InteractiveGrid({ grid, onCorrect, onIncorrect }: Props)
           r = _.reject(r, (r) => matchedCategory.answers.includes(r));
           return [...r];
         });
-
       } else {
         onIncorrect(selected);
       }
@@ -51,22 +51,9 @@ export default function InteractiveGrid({ grid, onCorrect, onIncorrect }: Props)
   };
 
   return (
-    <div className="flex flex-col grow text-center gap-2">
-      <div>
-        <h1 className="text-xl font-bold">{grid.name}</h1>
+    <div className="flex flex-col grow text-center gap-1 md:gap-2">
+      <GridTitle grid={grid} />
 
-        <h2 className="text-sm text-gray-400">
-          <span className="mr-1">{grid.id}</span>
-          <span className="mr-1">by</span>
-          {grid.source === "NYT" ? (
-            <a href="https://www.nytimes.com/games/connections" target="_" className="text-sky-400 hover:text-sky-600">
-              {grid.createdBy}
-            </a>
-          ) : (
-            <span>{grid.createdBy}</span>
-          )}
-        </h2>
-      </div>
       {matchedCategories.map((category, i) => (
         <Row key={i}>
           {category.answers.map((word, j) => {
@@ -88,7 +75,7 @@ export default function InteractiveGrid({ grid, onCorrect, onIncorrect }: Props)
             return (
               <button
                 key={j}
-                className={`flex-1 grow rounded-lg content-center font-semibold ${color}`}
+                className={`flex-1 grow rounded-lg content-center font-semibold text-[0.6rem] md:text-lg ${color}`}
                 onClick={() => toggleSelected(word)}
               >
                 {word}

ui/src/grid/TimedGrid.tsx

@@ -27,7 +27,7 @@ export default function TimedGrid({
   matchedCount,
 }: Props) {
   return (
-    <div className={`flex flex-col flex-auto px-2 md:px-4 pb-1 gap-2 rounded-lg border-2 ${interactive ? "pt-4" : "pt-1"}`}>
+    <div className={`flex flex-col flex-auto px-2 md:px-4 pb-1 gap-2 rounded-lg border-2 ${interactive ? "pt-1 md:pt-3" : "pt-1"}`}>
       {interactive ? (
         <InteractiveGrid grid={grid} onCorrect={onCorrect} onIncorrect={onIncorrect} />
       ) : (