fixed build

shared/game.test.ts

@@ -17,6 +17,7 @@ describe("Game", () => {
 
   it("should convert server to client game", () => {
     const serverGame: ServerGame = {
+      theme: "default",
       mines: [
         [false, false, true, true, true],
         [true, false, true, false, true],
@@ -52,6 +53,7 @@ describe("Game", () => {
       ],
     };
     expect(serverToClientGame(serverGame)).toEqual({
+      theme: "default",
       minesCount: 4,
       isRevealed: [
         [false, false, true, false, true],

shared/game.ts

@@ -39,5 +39,6 @@ export const serverToClientGame = (game: ServerGame): ClientGame => {
     lastClick: game.lastClick,
     started: game.started,
     stage: game.stage,
+    theme: game.theme,
   };
 };

shared/testBoard.ts

@@ -4,7 +4,7 @@ const rotate = (arr: boolean[][]) => {
   return arr[0].map((_, colIndex) => arr.map((row) => row[colIndex]));
 };
 
-export const testBoard: ServerGame = {
+export const testBoard: (theme: string) => ServerGame = (theme: string) => ({
   user: "TestUser",
   uuid: "C270D7CD-AF97-42CE-A6C9-CB765102CA17",
   width: 11,
@@ -38,4 +38,5 @@ export const testBoard: ServerGame = {
     [...Array<boolean>(11).fill(false)],
     [...Array<boolean>(11).fill(false)],
   ]),
-};
+  theme,
+});

src/components/Board.tsx

@@ -36,10 +36,10 @@ import "@pixi/canvas-renderer";
 import "@pixi/canvas-sprite-tiling";
 import "@pixi/canvas-sprite";
 import "@pixi/canvas-text";
+import { themes } from "../themes";
 
 interface BoardProps {
   className?: string;
-  theme: Theme;
   game: ServerGame | ClientGame;
   onLeftClick: (x: number, y: number) => void;
   onRightClick: (x: number, y: number) => void;
@@ -120,7 +120,10 @@ const Board: React.FC<BoardProps> = (props) => {
     resizeObserver.observe(ref.current);
     return () => resizeObserver.disconnect();
   }, [onViewportChange]);
-  const theme = useTheme(props.theme);
+  const theme = useTheme(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    themes.find((t) => t.id === (game.theme as any))!.theme,
+  );
   const boardWidth = game.width * (theme?.size || 0);
   const boardHeight = game.height * (theme?.size || 0);
 

src/themes/index.ts

@@ -45,7 +45,7 @@ interface ThemeEntry {
   tags: string[];
   /** dont't ever change this! */
   id: string;
-  theme: Theme;
+  theme: Readonly<Theme>;
 }
 
 export const themes = [

src/views/collection/Collection.tsx

@@ -68,8 +68,7 @@ const Collection = () => {
                 </DropdownMenu>
               </div>
               <Board
-                game={testBoard}
+                game={testBoard(theme.id)}
-                theme={theme.theme}
                 onLeftClick={() => {}}
                 restartGame={() => {}}
                 onRightClick={() => {}}

src/views/endless/Endless.tsx

@@ -1,4 +1,3 @@
-import { defaultTheme } from "../../themes/default";
 import Board from "../../components/Board";
 import { useWSMutation, useWSQuery } from "../../hooks";
 import { useAtom } from "jotai";
@@ -46,7 +45,6 @@ const Endless: React.FC<EndlessProps> = (props) => {
         <LeaderboardButton label="View Leaderboard" />
       </div>
       <Board
-        theme={defaultTheme}
         game={game}
         restartGame={async () => {
           const gameId = await startGame.mutateAsync(null);