allow showing past game

src/components/Board.tsx

@@ -241,7 +241,7 @@ const Tile = ({
   const isFlagged = game.isFlagged[i][j];
   const isQuestionMark = game.isQuestionMark[i][j];
   const base =
-    isRevealed || isMine ? (
+    isRevealed || (isMine && !isFlagged) ? (
       <Sprite key="b" texture={theme.revealed} />
     ) : (
       <Sprite key="b" texture={theme.tile} />

src/components/PastMatch.tsx

@@ -1,3 +1,4 @@
+import { Link } from "wouter";
 import { ServerGame } from "../../shared/game";
 import { formatRelativeTime, formatTimeSpan } from "../../shared/time";
 import { Button } from "./Button";
@@ -27,7 +28,10 @@ const PastMatch = ({ game }: PastMatchProps) => {
           <div>Duration: {formatTimeSpan(game.finished - game.started)}</div>
         </div>
         <div className="flex justify-end">
-          <Button variant="outline">Show Board</Button>
+          {/* @ts-expect-error as is cheaply typed */}
+          <Button as={Link} href={`/play/${game.uuid}`} variant="outline">
+            Show Board
+          </Button>
         </div>
       </div>
     </div>

src/main.tsx

@@ -33,7 +33,9 @@ setup().then(() => {
         <Shell>
           <Switch>
             <Route path="/" component={Home} />
-            <Route path="/play" component={Endless} />
+            <Route path="/play/:gameId?">
+              {(params) => <Endless gameId={params.gameId} />}
+            </Route>
             <Route path="/history" component={MatchHistory} />
             <Route path="/settings" component={Settings} />
           </Switch>

src/views/endless/Endless.tsx

@@ -7,7 +7,11 @@ import { Button } from "../../components/Button";
 import LeaderboardButton from "../../components/LeaderboardButton";
 import { Fragment, useEffect } from "react";
 
-const Endless = () => {
+interface EndlessProps {
+  gameId?: string;
+}
+
+const Endless: React.FC<EndlessProps> = (props) => {
   const [gameId, setGameId] = useAtom(gameIdAtom);
   const { data: game } = useWSQuery("game.getGameState", gameId!, !!gameId);
   const { data: settings } = useWSQuery("user.getSettings", null);
@@ -17,11 +21,15 @@ const Endless = () => {
   const placeFlag = useWSMutation("game.placeFlag");
   const placeQuestionMark = useWSMutation("game.placeQuestionMark");
   const clearTile = useWSMutation("game.clearTile");
+
   useEffect(() => {
+    if (props.gameId) {
+      setGameId(props.gameId);
+    }
     return () => {
       setGameId(undefined);
     };
-  }, [setGameId]);
+  }, [props.gameId, setGameId]);
 
   return game ? (
     <>