feat(preloader): preload assets and initialise game before showing board

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/Layout.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useEffect } from 'react';
 import HiddenHeader from './HiddenHeader';
 import BoardControls from './BoardControls';
 import GameBoard from './GameBoard';
@@ -9,15 +9,22 @@ import CheckBanner from './CheckBanner';
 import GameOver from './GameOver';
 import HeroAnimation from './HeroAnimation';
 import useBoardRect from '../hooks/useBoardRect';
+import usePreloader from '../stores/usePreloader';
+import { assetsReady } from '../utils/preloadAssets';
 import styles from './Layout.module.css';
 import { Vignette } from './Vignette.tsx';
 import PlayerBar from './PlayerBar.tsx';
 
 export default memo(function Layout() {
+  const loaded = usePreloader((s) => s.pixiReady && s.assetsReady);
   useBoardRect();
 
+  useEffect(() => {
+    assetsReady.then(() => usePreloader.getState().setAssetsReady());
+  }, []);
+
   return (
-    <main id="playable-area" className={styles.playableArea} data-loaded={true}>
+    <main id="playable-area" className={styles.playableArea} data-loaded={loaded || undefined}>
       <HiddenHeader />
       <PlayerBar color="b" />
       <div className={styles.board}>

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/graphics/game.ts

@@ -7,6 +7,7 @@ import { loadPieceTextureAtlas, syncPieces } from './pieces';
 import { createTrails } from './trails';
 import { SCRUB_THRESHOLD_MS } from '../constants';
 import type { PreferencesState } from '../stores/usePreferences';
+import usePreloader from '../stores/usePreloader';
 
 export interface Game {
   update: (chess: Chess, step: number, prefs: PreferencesState, isTerminal: boolean) => void;
@@ -36,6 +37,8 @@ export async function createGame(canvas: HTMLCanvasElement): Promise<Game> {
 
   const trails = createTrails(eng);
 
+  usePreloader.getState().setPixiReady();
+
   return {
     update(chess: Chess, step: number, prefs: PreferencesState, isTerminal: boolean) {
       // Stop all in-flight animations before rebuilding sprites.

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/stores/usePreloader.ts

@@ -0,0 +1,17 @@
+import { create } from 'zustand';
+
+interface PreloaderStore {
+  pixiReady: boolean;
+  assetsReady: boolean;
+  setPixiReady: () => void;
+  setAssetsReady: () => void;
+}
+
+const usePreloader = create<PreloaderStore>((set) => ({
+  pixiReady: false,
+  assetsReady: false,
+  setPixiReady: () => set({ pixiReady: true }),
+  setAssetsReady: () => set({ assetsReady: true }),
+}));
+
+export default usePreloader;

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/utils/preloadAssets.ts

@@ -0,0 +1,23 @@
+import playerWhitePath from '../assets/images/player-color-w.webp';
+import playerBlackPath from '../assets/images/player-color-b.webp';
+
+function preloadImage(src: string): Promise<void> {
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = img.onerror = () => resolve();
+    img.src = src;
+  });
+}
+
+const criticalImages = [
+  // Public directory images (CSS backgrounds)
+  './images/paper.webp',
+  './images/popover.webp',
+  './images/squiggle-solid.png',
+  './images/squiggle-v.png',
+  // Bundled assets (player bar)
+  playerWhitePath,
+  playerBlackPath,
+];
+
+export const assetsReady = Promise.all([...criticalImages.map(preloadImage), document.fonts.ready]);