fixed preview

backend/controller/controller.ts

@@ -18,13 +18,12 @@ export type Endpoint<TInputSchema extends ZodType, TResponse> = {
   ) => Promise<TResponse>;
 };
 
-export const createEndpoint = <
-  TInputSchema extends ZodType,
-  TResponse,
-  TInput = z.infer<TInputSchema>,
->(
+export const createEndpoint = <TInputSchema extends ZodType, TResponse>(
   validate: TInputSchema,
-  handler: (input: TInput, context: RequestContext) => Promise<TResponse>,
+  handler: (
+    input: z.infer<TInputSchema>,
+    context: RequestContext,
+  ) => Promise<TResponse>,
 ): Endpoint<TInputSchema, TResponse> => {
   return { validate, handler };
 };

eslint.config.js

@@ -28,6 +28,7 @@ export default [
       "react/react-in-jsx-scope": "off",
       "react/prop-types": "off",
       "react/display-name": "off",
+      "react/no-unknown-property": "off",
     },
   },
   {

package.json

@@ -15,60 +15,60 @@
     "nukedb": "rm sqlite.db && bun run backend/migrate.ts"
   },
   "dependencies": {
-    "@msgpack/msgpack": "^3.0.0-beta2",
-    "@pixi/canvas-display": "^7.4.2",
-    "@pixi/canvas-renderer": "^7.4.2",
-    "@pixi/react": "^7.1.2",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@tanstack/react-query": "^5.59.11",
-    "@tanstack/react-query-devtools": "^5.59.11",
-    "@tsparticles/engine": "^3.5.0",
-    "@tsparticles/preset-sea-anemone": "^3.1.0",
+    "@msgpack/msgpack": "^3.1.2",
+    "@pixi/canvas-display": "^7.4.3",
+    "@pixi/canvas-renderer": "^7.4.3",
+    "@pixi/react": "^8.0.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-query": "^5.87.4",
+    "@tanstack/react-query-devtools": "^5.87.4",
+    "@tsparticles/engine": "^3.9.1",
+    "@tsparticles/preset-sea-anemone": "^3.2.0",
     "@tsparticles/react": "^3.0.0",
-    "@tsparticles/slim": "^3.5.0",
+    "@tsparticles/slim": "^3.9.1",
     "@uidotdev/usehooks": "^2.4.1",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
-    "drizzle-orm": "0.33.0",
-    "jotai": "^2.10.0",
-    "lucide-react": "^0.452.0",
-    "motion": "^12.18.1",
-    "pixi-viewport": "^5.0.3",
-    "pixi.js": "^7.0.0",
-    "pixi.js-legacy": "^7.4.2",
+    "dayjs": "^1.11.18",
+    "drizzle-orm": "0.44.5",
+    "jotai": "^2.14.0",
+    "lucide-react": "^0.544.0",
+    "motion": "^12.23.12",
+    "pixi-viewport": "^6.0.3",
+    "pixi.js": "^8.13.2",
+    "pixi.js-legacy": "^7.4.3",
     "prom-client": "^15.1.3",
     "random-seed": "^0.3.0",
-    "react": "^18.3.1",
-    "react-confetti-boom": "^1.0.0",
-    "react-dom": "^18.3.1",
-    "tailwind-merge": "^2.5.3",
-    "wouter": "^3.3.5",
-    "zod": "^3.23.8"
+    "react": "^19.1.1",
+    "react-confetti-boom": "^2.0.1",
+    "react-dom": "^19.1.1",
+    "tailwind-merge": "^3.3.1",
+    "wouter": "^3.7.1",
+    "zod": "^4.1.8"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.2.0",
-    "@eslint/js": "^9.12.0",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/js": "^9.35.0",
     "@tailwindcss/vite": "next",
     "@types/bun": "latest",
     "@types/random-seed": "^0.3.5",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "drizzle-kit": "0.24.2",
-    "eslint": "^9.12.0",
-    "eslint-plugin-react": "^7.37.1",
-    "eslint-plugin-react-hooks": "5.0.0",
-    "globals": "^15.11.0",
-    "tailwindcss": "^4.0.0-alpha.26",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.8.1",
-    "vite": "^5.4.8",
-    "vite-bundle-analyzer": "^0.22.3",
-    "vite-imagetools": "^7.0.4"
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react-swc": "^4.0.1",
+    "drizzle-kit": "0.31.4",
+    "eslint": "^9.35.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "globals": "^16.4.0",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^7.1.5",
+    "vite-bundle-analyzer": "^1.2.3",
+    "vite-imagetools": "^8.0.0"
   }
 }

src/components/Board.tsx

@@ -12,9 +12,10 @@ import {
   type Theme,
 } from "../themes/Theme";
 import { useTheme } from "../themes/useTheme";
-import { Container, Sprite, Stage, useTick } from "@pixi/react";
+import { extend, useTick, Application } from "@pixi/react";
 import Viewport from "./pixi/PixiViewport";
 import type { Viewport as PixiViewport } from "pixi-viewport";
+import { Container, FederatedPointerEvent, Sprite, Texture } from "pixi.js";
 import {
   type ClientGame,
   getValue,
@@ -22,7 +23,6 @@ import {
   type ServerGame,
 } from "../../shared/game";
 import { useWSQuery } from "../hooks";
-import { Texture } from "pixi.js";
 import { useAtom } from "jotai";
 import { cursorXAtom, cursorYAtom } from "../atoms";
 import Coords from "./Coords";
@@ -46,6 +46,11 @@ import { weightedPickRandom } from "../../shared/utils";
 import gen from "random-seed";
 import type { UserSettings } from "../../shared/user-settings";
 
+extend({
+  Container,
+  Sprite,
+});
+
 interface BoardProps {
   className?: string;
   game: ServerGame | ClientGame;
@@ -157,6 +162,26 @@ const Board: React.FC<BoardProps> = (props) => {
     };
   }, []);
 
+  const clamp = useMemo(
+    () =>
+      theme &&
+      (props.width || props.height
+        ? { left: 0, right: boardWidth, top: 0, bottom: boardHeight }
+        : {
+            left: -theme.size,
+            right: boardWidth + theme.size,
+            top: -theme.size,
+            bottom: boardHeight + theme.size,
+          }),
+    [boardHeight, boardWidth, props.height, props.width, theme],
+  );
+  const clampZoom = useMemo(
+    () => ({
+      minScale: 1,
+    }),
+    [],
+  );
+
   return (
     <div className="flex flex-col w-full">
       <div
@@ -199,11 +224,13 @@ const Board: React.FC<BoardProps> = (props) => {
           )}
         </div>
         {theme && (
-          <Stage
-            options={{ hello: true, forceCanvas: !!props.width }}
+          <Application
+            hello
+            forceFallbackAdapter={!!props.width}
             width={width}
             height={height}
             className="select-none"
+            preference="webgl"
           >
             <Viewport
               viewportRef={viewportRef}
@@ -211,19 +238,8 @@ const Board: React.FC<BoardProps> = (props) => {
               worldHeight={boardHeight}
               width={width}
               height={height}
-              clamp={
-                props.width || props.height
-                  ? { left: 0, right: boardWidth, top: 0, bottom: boardHeight }
-                  : {
-                      left: -theme.size,
-                      right: boardWidth + theme.size,
-                      top: -theme.size,
-                      bottom: boardHeight + theme.size,
-                    }
-              }
-              clampZoom={{
-                minScale: 1,
-              }}
+              clamp={clamp}
+              clampZoom={clampZoom}
               onViewportChange={onViewportChange}
             >
               {Array.from({ length: game.width }).map((_, i) => {
@@ -254,7 +270,7 @@ const Board: React.FC<BoardProps> = (props) => {
                 });
               })}
             </Viewport>
-          </Stage>
+          </Application>
         )}
       </div>
       {!props.width && !props.height && <Coords />}
@@ -311,13 +327,14 @@ const Tile = ({
   const isQuestionMark = game.isQuestionMark[i][j];
   const base =
     isRevealed || (isMine && !isFlagged) ? (
-      <Sprite key="b" texture={resolveSprite(theme.revealed)} />
+      <pixiSprite key="b" texture={resolveSprite(theme.revealed)} />
     ) : (
-      <Sprite key="b" texture={resolveSprite(theme.tile)} />
+      <pixiSprite key="b" texture={resolveSprite(theme.tile)} />
     );
   const extra = isLastPos ? (
-    <Sprite key="e" texture={resolveSprite(theme.lastPos)} />
+    <pixiSprite key="e" texture={resolveSprite(theme.lastPos)} />
   ) : null;
+
   const touchStart = useRef<number>(0);
   const isMove = useRef<boolean>(false);
   const startX = useRef<number>(0);
@@ -334,13 +351,16 @@ const Tile = ({
       setDoTick(true);
     }
   }, [isMine, isRevealed, userSettings?.showRevealAnimation, value]);
-  useTick((delta) => {
-    frame.current += delta * 0.1;
-    if (frame.current > 3) {
-      setDoTick(false);
-    }
-    setScale(Math.max(1, -2 * Math.pow(frame.current - 0.5, 2) + 1.2));
-  }, doTick);
+  useTick({
+    callback: (delta) => {
+      frame.current += delta.count * 0.1;
+      if (frame.current > 3) {
+        setDoTick(false);
+      }
+      setScale(Math.max(1, -2 * Math.pow(frame.current - 0.5, 2) + 1.2));
+    },
+    isEnabled: doTick,
+  });
   const baseProps = useMemo(
     () => ({
       scale,
@@ -353,18 +373,18 @@ const Tile = ({
   let content: ReactNode = null;
   if (isFlagged) {
     content = (
-      <Sprite key="c" texture={resolveSprite(theme.flag)} {...baseProps} />
+      <pixiSprite key="c" texture={resolveSprite(theme.flag)} {...baseProps} />
     );
   } else if (isMine) {
     content = (
-      <Sprite key="c" texture={resolveSprite(theme.mine)} {...baseProps} />
+      <pixiSprite key="c" texture={resolveSprite(theme.mine)} {...baseProps} />
     );
   } else if (value !== -1 && isRevealed) {
     const img = theme[value.toString() as keyof Theme] as Texture;
-    content = img ? <Sprite key="c" texture={img} {...baseProps} /> : null;
+    content = img ? <pixiSprite key="c" texture={img} {...baseProps} /> : null;
   } else if (isQuestionMark) {
     content = (
-      <Sprite
+      <pixiSprite
         key="c"
         texture={resolveSprite(theme.questionMark)}
         {...baseProps}
@@ -375,16 +395,16 @@ const Tile = ({
   const [, setCursorY] = useAtom(cursorYAtom);
 
   return (
-    <Container
+    <pixiContainer
       eventMode="static"
       interactive
       x={i * theme.size}
       y={j * theme.size}
       key={`${i},${j}`}
-      onrightup={() => {
+      onRightUp={() => {
         onRightClick(i, j);
       }}
-      onpointerup={(e) => {
+      onPointerUp={(e: FederatedPointerEvent) => {
         if (e.button !== 0) return;
         if (isMove.current) return;
         if (Date.now() - touchStart.current > 300) {
@@ -393,17 +413,17 @@ const Tile = ({
           onLeftClick(i, j);
         }
       }}
-      onpointerdown={(e) => {
+      onPointerDown={(e: FederatedPointerEvent) => {
         isMove.current = false;
         touchStart.current = Date.now();
         startX.current = e.global.x;
         startY.current = e.global.y;
       }}
-      onpointerenter={() => {
+      onPointerEnter={() => {
         setCursorX(i);
         setCursorY(j);
       }}
-      onpointermove={(e) => {
+      onPointerMove={(e: FederatedPointerEvent) => {
         if (
           Math.abs(startX.current - e.global.x) > 10 ||
           Math.abs(startY.current - e.global.y) > 10
@@ -415,7 +435,7 @@ const Tile = ({
       {base}
       {content}
       {extra}
-    </Container>
+    </pixiContainer>
   );
 };
 

src/components/StaticBoardPreview.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { Application, Container, Sprite, Texture } from "pixi.js";
+import type { ServerGame, ClientGame } from "../../shared/game";
+import { useTheme } from "../themes/useTheme";
+import { themes } from "../themes";
+import { getValue, isServerGame } from "../../shared/game";
+import type { LoadedTexture, LoadedTheme } from "../themes/Theme";
+import { weightedPickRandom } from "../../shared/utils";
+import gen from "random-seed";
+
+// Cache for static board previews with size limit
+const MAX_CACHE_SIZE = 250;
+const previewCache = new Map<string, string>();
+
+// Helper function to manage cache size
+const addToCache = (key: string, value: string) => {
+  // If cache is at max size, remove the oldest entry
+  if (previewCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = previewCache.keys().next().value;
+    if (firstKey) {
+      previewCache.delete(firstKey);
+    }
+  }
+  previewCache.set(key, value);
+};
+
+interface StaticBoardPreviewProps {
+  game: ServerGame | ClientGame;
+  width: number;
+  height: number;
+  className?: string;
+}
+
+const StaticBoardPreview: React.FC<StaticBoardPreviewProps> = ({
+  game,
+  width,
+  height,
+  className,
+}) => {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const theme = useTheme(themes.find((t) => t.id === game.theme)!.theme);
+
+  useEffect(() => {
+    if (!theme) return;
+
+    // Generate a cache key based on game state and dimensions
+    const cacheKey = `${game.theme}-${game.uuid}-${width}x${height}`;
+
+    // Check if we have a cached image
+    const cachedImage = previewCache.get(cacheKey);
+    if (cachedImage) {
+      setImageUrl(cachedImage);
+      return;
+    }
+
+    const generateStaticImage = async () => {
+      // Create a temporary Pixi application for rendering
+      const app = new Application();
+      await app.init({
+        width,
+        height,
+        backgroundAlpha: 0,
+        preference: "webgl",
+      });
+
+      const container = new Container();
+      app.stage.addChild(container);
+
+      // Helper function to resolve sprites
+      const resolveSprite = (lt: LoadedTexture, x: number, y: number) => {
+        if (Array.isArray(lt)) {
+          const rng = gen.create(game.uuid + ";" + x + ";" + y);
+          return weightedPickRandom(
+            lt,
+            (i) => i.weight,
+            (tw) => rng.floatBetween(0, tw),
+          ).sprite;
+        }
+        return lt;
+      };
+
+      // Render all tiles
+      for (let i = 0; i < game.width; i++) {
+        for (let j = 0; j < game.height; j++) {
+          const isRevealed = game.isRevealed[i][j];
+          const value = isServerGame(game)
+            ? getValue(game.mines, i, j)
+            : game.values[i][j];
+          const isMine = isServerGame(game) ? game.mines[i][j] : false;
+          const isFlagged = game.isFlagged[i][j];
+          const isQuestionMark = game.isQuestionMark[i][j];
+
+          // Base tile
+          const baseTexture =
+            isRevealed || (isMine && !isFlagged)
+              ? resolveSprite(theme.revealed, i, j)
+              : resolveSprite(theme.tile, i, j);
+
+          const baseSprite = new Sprite(baseTexture);
+          baseSprite.x = i * theme.size;
+          baseSprite.y = j * theme.size;
+          container.addChild(baseSprite);
+
+          // Content overlay
+          let contentTexture: Texture | null = null;
+          if (isFlagged) {
+            contentTexture = resolveSprite(theme.flag, i, j);
+          } else if (isMine) {
+            contentTexture = resolveSprite(theme.mine, i, j);
+          } else if (value !== -1 && isRevealed) {
+            const numberTexture = theme[
+              value.toString() as keyof LoadedTheme
+            ] as Texture;
+            if (numberTexture) {
+              contentTexture = numberTexture;
+            }
+          } else if (isQuestionMark) {
+            contentTexture = resolveSprite(theme.questionMark, i, j);
+          }
+
+          if (contentTexture) {
+            const contentSprite = new Sprite(contentTexture);
+            contentSprite.x = i * theme.size + theme.size * 0.5;
+            contentSprite.y = j * theme.size + theme.size * 0.5;
+            contentSprite.anchor.set(0.5);
+            container.addChild(contentSprite);
+          }
+        }
+      }
+
+      // Render to canvas and create data URL
+      app.renderer.render(container);
+      const canvas = app.canvas;
+      const dataUrl = canvas.toDataURL();
+
+      // Cache the generated image
+      addToCache(cacheKey, dataUrl);
+      setImageUrl(dataUrl);
+
+      // Clean up
+      app.destroy(true);
+    };
+
+    generateStaticImage().catch(console.error);
+  }, [game, theme, width, height]);
+
+  if (!imageUrl) {
+    return (
+      <div
+        className={className}
+        style={{ width, height, backgroundColor: "#1a1a1a" }}
+      />
+    );
+  }
+
+  return (
+    <img
+      src={imageUrl}
+      alt="Board preview"
+      className={className}
+      style={{ width, height, imageRendering: "pixelated" }}
+    />
+  );
+};
+
+export default StaticBoardPreview;
+

src/components/pixi/PixiViewport.tsx

@@ -1,14 +1,18 @@
-import React from "react";
-import type { Application } from "pixi.js";
-import {
-  type IClampZoomOptions,
-  Viewport as PixiViewport,
-} from "pixi-viewport";
-import { PixiComponent, useApp } from "@pixi/react";
-import { BaseTexture, SCALE_MODES } from "pixi.js";
-BaseTexture.defaultOptions.scaleMode = SCALE_MODES.NEAREST;
+import React, { useLayoutEffect } from "react";
+import { type IClampZoomOptions, Viewport } from "pixi-viewport";
+import { extend, useApplication } from "@pixi/react";
 
-export interface ViewportProps {
+extend({ Viewport });
+
+import { type PixiReactElementProps } from "@pixi/react";
+
+declare module "@pixi/react" {
+  interface PixiElements {
+    pixiViewport: PixiReactElementProps<typeof Viewport>;
+  }
+}
+
+interface ViewportProps {
   width: number;
   height: number;
   worldWidth: number;
@@ -21,26 +25,18 @@ export interface ViewportProps {
     bottom: number;
   };
   clampZoom?: IClampZoomOptions;
-  onViewportChange?: (viewport: PixiViewport) => void;
-  viewportRef?: React.RefObject<PixiViewport>;
+  onViewportChange?: (viewport: Viewport) => void;
+  viewportRef?: React.RefObject<Viewport | null>;
 }
 
-export interface PixiComponentViewportProps extends ViewportProps {
-  app: Application;
-}
-
-const PixiComponentViewport = PixiComponent("Viewport", {
-  create: (props: PixiComponentViewportProps) => {
-    const viewport = new PixiViewport({
-      screenWidth: props.width,
-      screenHeight: props.height,
-      worldWidth: props.worldWidth,
-      worldHeight: props.worldHeight,
-      ticker: props.app.ticker,
-      events: props.app.renderer.events,
-      disableOnContextMenu: true,
-      allowPreserveDragOutside: true,
-    });
+const PixiViewport = (props: ViewportProps) => {
+  const { app } = useApplication();
+  const ref = React.useRef<Viewport | null>(null);
+  const { clamp, clampZoom, onViewportChange, viewportRef } = props;
+  useLayoutEffect(() => {
+    void app.renderer;
+    const viewport = ref.current;
+    if (!viewport) return () => {};
     viewport
       .drag({
         ignoreKeyToPressOnTouch: true,
@@ -48,53 +44,43 @@ const PixiComponentViewport = PixiComponent("Viewport", {
       })
       .pinch()
       .wheel();
-    if (props.clamp) {
-      viewport.clamp(props.clamp);
+    if (clamp) {
+      viewport.clamp(clamp);
     }
-    if (props.clampZoom) {
-      viewport.clampZoom(props.clampZoom);
+    if (clampZoom) {
+      viewport.clampZoom(clampZoom);
     }
     viewport.on("moved", () => {
-      props.onViewportChange?.(viewport);
+      onViewportChange?.(viewport);
     });
     viewport.on("zoomed-end", () => {
-      props.onViewportChange?.(viewport);
+      onViewportChange?.(viewport);
     });
 
-    if (props.viewportRef) {
-      // @ts-expect-error We dont care since this is internal api
-      props.viewportRef.current = viewport;
+    if (viewportRef) {
+      viewportRef.current = viewport;
     }
-
-    return viewport;
-  },
-  applyProps: (
-    viewport: PixiViewport,
-    oldProps: ViewportProps,
-    newProps: ViewportProps,
-  ) => {
-    if (
-      oldProps.width !== newProps.width ||
-      oldProps.height !== newProps.height ||
-      oldProps.worldWidth !== newProps.worldWidth ||
-      oldProps.worldHeight !== newProps.worldHeight
-    ) {
-      viewport.resize(
-        newProps.width,
-        newProps.height,
-        newProps.worldWidth,
-        newProps.worldHeight,
-      );
-    }
-    if (oldProps.clamp !== newProps.clamp) {
-      viewport.clamp(newProps.clamp);
-    }
-  },
-});
-
-const Viewport = (props: ViewportProps) => {
-  const app = useApp();
-  return <PixiComponentViewport app={app} {...props} />;
+    return () => {
+      viewport.off("moved");
+      viewport.off("zoomed-end");
+    };
+  }, [clamp, clampZoom, onViewportChange, viewportRef, app.renderer]);
+  if (!app.renderer) return null;
+  return (
+    <pixiViewport
+      ref={ref}
+      screenWidth={props.width}
+      screenHeight={props.height}
+      worldWidth={props.worldWidth}
+      worldHeight={props.worldHeight}
+      ticker={app.ticker}
+      events={app.renderer.events}
+      disableOnContextMenu
+      allowPreserveDragOutside
+    >
+      {props.children}
+    </pixiViewport>
+  );
 };
 
-export default Viewport;
+export default PixiViewport;

src/hooks.ts

@@ -23,6 +23,7 @@ export const useWSQuery = <
   // @ts-expect-error We dont care since this is internal api
   Awaited<ReturnType<Routes[TController][TAction]["handler"]>>
 > => {
+  // @ts-expect-error We dont care since this is internal api
   return useQuery({
     queryKey: [action, payload],
     queryFn: async () => {

src/themes/useTheme.ts

@@ -1,4 +1,4 @@
-import { Assets } from "pixi.js";
+import { Assets, Texture } from "pixi.js";
 import { useState, useEffect } from "react";
 import type { Theme, LoadedTheme, WeightedLazySprites } from "./Theme";
 
@@ -12,14 +12,20 @@ export const useTheme = (theme: Theme) => {
         Object.entries(theme).map(async ([key, value]) => {
           let loaded = value;
           if (typeof value === "function") {
-            loaded = await Assets.load((await value()).default);
+            const texture = await Assets.load<Texture>((await value()).default);
+            texture.source.scaleMode = "nearest";
+            loaded = texture;
           }
           if (Array.isArray(value)) {
             loaded = await Promise.all(
               loaded.map(async (sprite: WeightedLazySprites) => {
+                const texture = await Assets.load<Texture>(
+                  (await sprite.sprite()).default,
+                );
+                texture.source.scaleMode = "nearest";
                 return {
                   weight: sprite.weight,
-                  sprite: await Assets.load((await sprite.sprite()).default),
+                  sprite: texture,
                 };
               }),
             );

src/views/collection/Collection.tsx

@@ -1,6 +1,7 @@
 import { Ellipsis } from "lucide-react";
 import { testBoard } from "../../../shared/testBoard";
 import { Board } from "../../components/LazyBoard";
+import StaticBoardPreview from "../../components/StaticBoardPreview";
 import { Button } from "../../components/Button";
 import { themes } from "../../themes";
 import {
@@ -11,7 +12,7 @@ import {
 } from "../../components/DropdownMenu";
 import { cn } from "../../lib/utils";
 import { useWSMutation, useWSQuery } from "../../hooks";
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 
 const Collection = () => {
   const { data: collection, refetch } = useWSQuery(
@@ -20,6 +21,7 @@ const Collection = () => {
   );
   const mutateSelected = useWSMutation("user.selectCollectionEntry");
   const mutateShuffle = useWSMutation("user.addCollectionEntryToShuffle");
+  const [hoveredTheme, setHoveredTheme] = useState<string | null>(null);
 
   return (
     <div className="flex flex-col gap-4 w-full">
@@ -76,19 +78,35 @@ const Collection = () => {
                   </DropdownMenu>
                 )}
               </div>
-              <Suspense>
-                <Board
-                  game={testBoard(theme.id)}
-                  onLeftClick={() => {}}
-                  restartGame={() => {}}
-                  onRightClick={() => {}}
-                  width={11 * 32}
-                  height={4 * 32}
-                  className={cn(
-                    selected && "outline-primary outline-4 rounded-md",
-                  )}
-                />
-              </Suspense>
+              <div
+                onMouseEnter={() => setHoveredTheme(theme.id)}
+                onMouseLeave={() => setHoveredTheme(null)}
+              >
+                {hoveredTheme === theme.id ? (
+                  <Suspense>
+                    <Board
+                      game={testBoard(theme.id)}
+                      onLeftClick={() => {}}
+                      restartGame={() => {}}
+                      onRightClick={() => {}}
+                      width={11 * 32}
+                      height={4 * 32}
+                      className={cn(
+                        selected && "outline-primary outline-4 rounded-md",
+                      )}
+                    />
+                  </Suspense>
+                ) : (
+                  <StaticBoardPreview
+                    game={testBoard(theme.id)}
+                    width={11 * 32}
+                    height={4 * 32}
+                    className={cn(
+                      selected && "outline-primary outline-4 rounded-md",
+                    )}
+                  />
+                )}
+              </div>
             </div>
           );
         })}

src/views/profile/Profile.tsx

@@ -20,7 +20,7 @@ const TouchTooltip = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isTouchDevice, setIsTouchDevice] = useState(false);
-  const timeoutRef = useRef<Timer>();
+  const timeoutRef = useRef<Timer | null>(null);
 
   useEffect(() => {
     // Detect if device supports touch

src/wsClient.ts

@@ -146,7 +146,7 @@ const createWSClient = () => {
   >(
     action: `${TController}.${TAction}`,
     // @ts-expect-error We dont care since this is internal api
-    payload: Routes[TController][TAction]["validate"]["_input"],
+    payload: z.input<Routes[TController][TAction]["validate"]>,
     // @ts-expect-error We dont care since this is internal api
   ): Promise<Awaited<ReturnType<Routes[TController][TAction]["handler"]>>> => {
     if (ws.readyState !== WebSocket.OPEN) {