Use a redirect to serve the random grid instead of the earlier kludge…

… with gridID

ui/src/main.tsx

@@ -1,20 +1,31 @@
 import { createRoot } from "react-dom/client";
 import "./index.css";
-import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom";
+import { createBrowserRouter, createRoutesFromElements, redirect, Route, RouterProvider } from "react-router-dom";
 import Root from "./pages/Root";
 import Home from "./pages/Home";
 import LocalPlayGrid from "./pages/LocalPlayGrid";
 import CreateJoinTimerBattle from "./pages/CreateJoinTimerBattle";
 import CreateGrid from "./pages/CreateGrid";
 import GridLeaderboard from "./pages/GridLeaderboard";
 
+const randomGridLoader = async () => {
+  const res = await fetch("/api/grids/random");
+  if (!res.ok) {
+    console.error("Failed to fetch a random grid ID", res);
+    redirect("/");
+  }
+  const json = await res.json();
+  return json.id ? redirect(`/grids/${json.id}`) : redirect("/");
+};
+
 const router = createBrowserRouter(
   createRoutesFromElements(
     <Route path="/" element={<Root />}>
       <Route path="" element={<Home />} />
       <Route path="/:battleCode" element={<CreateJoinTimerBattle />} />
       <Route path="/battle" element={<CreateJoinTimerBattle />} />
       <Route path="/grids/create" element={<CreateGrid />} />
+      <Route path="/grids/random" loader={randomGridLoader} />
       <Route path="/grids/:gridId" element={<LocalPlayGrid />} />
       <Route path="/grids/:gridId/leaderboard" element={<GridLeaderboard />} />
     </Route>

ui/src/pages/LocalPlayGrid.tsx

@@ -38,16 +38,23 @@ export default function LocalPlayGrid() {
       return;
     }
 
+    if (gridId === grid?.id) return;
+
     setLoading(true);
     apiClient.getGrid(gridId).then(({ res, json }) => {
       if (res.status !== 200) {
         addError("Grid not found");
         return;
       }
-      if (json) setGrid(json);
+      if (json) {
+        setGrid((x) => {
+          // Only update if the grid is actually different
+          return x?.id === json.id ? x : json;
+        });
+      }
       setLoading(false);
     });
-  }, [gridId, addError, apiClient]);
+  }, [gridId, grid?.id, addError, apiClient]);
 
   useEffect(() => {
     // Reset the state when the grid changes

ui/src/timer-battle/TimerBattleScreen.tsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { TimerBattleContext } from "./TimerBattleContext";
-import { Badge, Button, Popover, Table } from "flowbite-react";
+import { Badge, Button, Clipboard, Popover, Table } from "flowbite-react";
 import _ from "underscore";
 import TimedGrid from "../grid/TimedGrid";
 import { Category } from "../Models";
@@ -217,7 +217,10 @@ function TimerBattleScores() {
           })}
         <Table.Row>
           <Table.Cell className="text-center" colSpan={99}>
-            Room Code: <span className="font-mono font-semibold">{battle?.roomId}</span>
+            <div className="relative w-52 mx-auto">
+              Room Code: <span className="font-mono font-semibold">{battle!.roomId}</span>
+              <Clipboard.WithIcon valueToCopy={battle!.roomId} />
+            </div>
           </Table.Cell>
         </Table.Row>
       </Table.Body>