feature: Added game show view.

src/App.tsx

@@ -3,6 +3,7 @@ import { GameList } from "./games/GameList";
 import { supabaseDataProvider } from "ra-supabase";
 import { createClient } from "@supabase/supabase-js";
 import { Box, Typography } from "@mui/material";
+import { GameShow } from "./games/GameShow";
 
 const instanceUrl =
   import.meta.env.VITE_SUPABASE_API_URL || "http://127.0.0.1:54321";
@@ -47,6 +48,7 @@ const App = () => {
       <Resource
         name="games_view"
         list={GameList}
+        show={GameShow}
         options={{ label: "Games" }}
       ></Resource>
     </Admin>

src/games/GameList.tsx

@@ -6,6 +6,7 @@ import {
   ReferenceInput,
   SearchInput,
   SelectInput,
+  ShowButton,
   TextField,
   WrapperField,
 } from "react-admin";
@@ -32,6 +33,7 @@ export const GameList = () => (
   <List filters={postFilters}>
     <Datagrid>
       <TextField source="id" />
+      <ShowButton />
       <TextField source="first_player" label="First player" />
       <TextField source="second_player" label="Second player" />
       <WrapperField label="Game status">

src/games/GameShow.tsx

@@ -0,0 +1,45 @@
+import Typography from "@mui/material/Typography/Typography";
+import { Show, SimpleShowLayout, TextField, useFieldValue } from "react-admin";
+import GameGrid from "../boardView/GameGrid";
+import { tokenColors } from "../boardView/model/consts";
+
+const MatchupField = () => {
+  const p1 = useFieldValue({ source: "first_player" });
+  const p2 = useFieldValue({ source: "second_player" });
+  return (
+    <Typography variant="h6" sx={{ textAlign: "center" }}>
+      <span className={tokenColors[1]}>{p1}</span> <b>vs</b>{" "}
+      <span className={tokenColors[2]}>{p2}</span>
+    </Typography>
+  );
+};
+
+const GameStatusField = () => {
+  const gameStatus = useFieldValue({ source: "_game_status" });
+  return (
+    <Typography sx={{ textAlign: "center" }}>
+      The match status is: <b>{gameStatus}</b>.
+    </Typography>
+  );
+};
+
+const GameBoardView = () => {
+  const victoryState = useFieldValue({ source: "_victory_state" });
+  const boardState = useFieldValue({ source: "board_state" });
+  console.log(victoryState, boardState);
+  if (!victoryState || !boardState) {
+    return "";
+  }
+  return <GameGrid victoryState={victoryState} boardState={boardState} />;
+};
+
+export const GameShow = () => (
+  <Show>
+    <SimpleShowLayout>
+      <MatchupField />
+      <GameStatusField />
+      <GameBoardView />
+      <TextField source="creation_date" />
+    </SimpleShowLayout>
+  </Show>
+);