Merge pull request #466 from Kaggle/repeated-poker-to-static-assets

develra · web-flow · commit 31895761003c · 2025-10-24T17:08:25.000-06:00
Migrate Repeated Poker to use the new Vite builder strategy
diff --git a/kaggle_environments/envs/connectx/visualizer/default/package.json b/kaggle_environments/envs/connectx/visualizer/default/package.json
@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "cross-env VITE_REPLAY_FILE=./replays/test-replay.json vite",
+    "dev:iframe": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
diff --git a/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/index.html b/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Repeated Poker Visualizer</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/package.json b/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@kaggle-environments/repeated-poker-visualizer",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev-with-replay": "cross-env VITE_REPLAY_FILE=./replays/test-replay.json vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "cross-env": "^10.1.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  },
+  "dependencies": {
+    "@kaggle-environments/core": "workspace:*",
+    "htm": "^3.1.1",
+    "preact": "^10.13.2"
+  }
+}
diff --git a/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/replays/test-replay.json b/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/replays/test-replay.json
diff --git a/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/src/main.ts b/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/src/main.ts
@@ -0,0 +1,37 @@
+import { Player, GameAdapter, ReplayData } from '@kaggle-environments/core';
+import { renderer } from './repeated_poker_renderer.js';
+import { render } from 'preact';
+
+class LegacyAdapter implements GameAdapter {
+    private container: HTMLElement | null = null;
+
+    mount(container: HTMLElement): void {
+        this.container = container;
+    }
+
+    render(step: number, replay: ReplayData, agents: any[]): void {
+        if (!this.container) return;
+        this.container.innerHTML = ''; // Clear container before rendering
+        renderer({
+            parent: this.container,
+            environment: replay,
+            step: step,
+            agents: agents,
+            // These are probably not used by poker but good to have
+            width: this.container.clientWidth,
+            height: this.container.clientHeight
+        });
+    }
+
+    unmount(): void {
+        if (this.container) {
+            render(null, this.container);
+        }
+        this.container = null;
+    }
+}
+
+const app = document.getElementById('app');
+if (app) {
+    new Player(app, new LegacyAdapter());
+}
diff --git a/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/src/repeated_poker_renderer.js b/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/src/repeated_poker_renderer.js
diff --git a/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/tsconfig.json b/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../../../../../../web/tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true
+  },
+  "include": ["src"]
+}
diff --git a/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/vite.config.ts b/kaggle_environments/envs/open_spiel_env/games/repeated_poker/visualizer/default/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig, mergeConfig } from 'vite';
+import baseConfig from '../../../../../../../web/vite.config.base';
+
+// https://vitejs.dev/config/
+export default mergeConfig(baseConfig, defineConfig({
+}));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -1,3 +1,4 @@
 packages:
   - "web/*"
   - "kaggle_environments/envs/*/visualizer/*"
+  - "kaggle_environments/envs/open_spiel_env/games/*/visualizer/*"
diff --git a/web/core/src/player.ts b/web/core/src/player.ts
@@ -18,6 +18,7 @@ export class Player {
     private step = 0;
     private playing = false;
     private speed = 500; // ms per step
+    private mounted = false;
 
     // --- Element references ---
     private viewer: HTMLElement;
@@ -107,17 +108,47 @@ export class Player {
 
     private loadData() {
         const handleMessage = (event: MessageEvent) => {
+            if (!event.data) return;
+
+            let needsRender = false;
+
+            // Update agents if provided
+            if (event.data.agents) {
+                this.agents = event.data.agents;
+                needsRender = true;
+            }
+
+            // Update replay object from 'environment'
             if (event.data.environment) {
-                const replayData: ReplayData = {
-                    name: event.data.environment.name,
-                    version: event.data.environment.version,
-                    steps: event.data.environment.steps,
-                    configuration: event.data.environment.configuration,
-                    info: event.data.environment.info
-                };
-                this.setData(replayData, event.data.agents || []);
-            } else if (event.data.replay) {
-                this.setData(event.data.replay, event.data.agents || []);
+                if (!this.replay) {
+                    this.replay = { name: 'unknown', version: 'unknown', steps: [], configuration: {}, info: {} };
+                }
+                // Use Object.assign to merge new data without overwriting the whole object
+                Object.assign(this.replay, event.data.environment);
+                needsRender = true;
+            }
+
+            // Update steps from 'setSteps'
+            if (event.data.setSteps && this.replay) {
+                this.replay.steps = event.data.setSteps;
+                needsRender = true;
+            }
+
+            // Overwrite replay object if a full 'replay' is provided
+            if (event.data.replay) {
+                this.replay = event.data.replay;
+                needsRender = true;
+            }
+
+            // Update the current step
+            if (typeof event.data.step === 'number') {
+                this.step = event.data.step;
+                needsRender = true;
+            }
+
+            // If any data was updated and we have a replay object, call setData.
+            if (needsRender && this.replay) {
+                this.setData(this.replay, this.agents);
             }
         };
         window.addEventListener('message', handleMessage);
@@ -130,7 +161,7 @@ export class Player {
                     .then((data) => this.setData(data))
                     .catch((err) => console.error(`Error fetching ${replayFile}:`, err));
             } else {
-                this.viewer.innerHTML = '<div>Loading... (No replay file specified)</div>';
+                this.viewer.innerHTML = '<div>Waiting for replay data...</div>';
             }
         } else {
             this.viewer.innerHTML = '<div>Loading...</div>';
@@ -140,9 +171,17 @@ export class Player {
     private setData(replay: ReplayData, agents: any[] = []) {
         this.replay = replay;
         this.agents = agents;
-        this.adapter.mount(this.viewer, this.replay);
-        this.stepSlider.max = (this.replay.steps.length - 1).toString();
+
+        if (!this.mounted) {
+            this.adapter.mount(this.viewer, this.replay);
+            this.mounted = true;
+        }
+
+        // Always update controls and render the current state.
+        this.stepSlider.max = (this.replay.steps.length > 0 ? this.replay.steps.length - 1 : 0).toString();
         this.renderControls();
+        this.adapter.render(this.step, this.replay, this.agents);
+
         this.tick();
     }
 
diff --git a/web/core/src/preact-adapter.ts b/web/core/src/preact-adapter.ts
@@ -1,34 +1,34 @@
-import { h, render, FunctionComponent } from "preact";
-import { GameAdapter } from "./adapter";
-import { ReplayData } from "./types";
+import { h, render, FunctionComponent } from 'preact';
+import { GameAdapter } from './adapter';
+import { ReplayData } from './types';
 
 interface RendererProps {
-  replay: ReplayData;
-  step: number;
-  agents: any[];
+    replay: ReplayData;
+    step: number;
+    agents: any[];
 }
 
 export class PreactAdapter implements GameAdapter {
-  private container: HTMLElement | null = null;
-  private renderer: FunctionComponent<RendererProps>;
+    private container: HTMLElement | null = null;
+    private renderer: FunctionComponent<RendererProps>;
 
-  constructor(renderer: FunctionComponent<RendererProps>) {
-    this.renderer = renderer;
-  }
+    constructor(renderer: FunctionComponent<RendererProps>) {
+        this.renderer = renderer;
+    }
 
-  mount(container: HTMLElement, initialData: ReplayData): void {
-    this.container = container;
-    this.render(0, initialData, []);
-  }
+    mount(container: HTMLElement, initialData: ReplayData): void {
+        this.container = container;
+        this.render(0, initialData, []);
+    }
 
-  render(step: number, replay: ReplayData, agents: any[]): void {
-    if (!this.container) return;
-    render(h(this.renderer, { replay, step, agents }), this.container);
-  }
+    render(step: number, replay: ReplayData, agents: any[]): void {
+        if (!this.container) return;
+        render(h(this.renderer, { replay, step, agents }), this.container);
+    }
 
-  unmount(): void {
-    if (!this.container) return;
-    render(null, this.container);
-    this.container = null;
-  }
+    unmount(): void {
+        if (!this.container) return;
+        render(null, this.container);
+        this.container = null;
+    }
 }
diff --git a/web/scripts/collect-artifacts.sh b/web/scripts/collect-artifacts.sh
@@ -34,7 +34,8 @@ while IFS= read -r line; do
 
   if [ -d "$source_dist" ]; then
     # Extract game and visualizer names from the path
-    game_name=$(echo "$pkg_path" | sed 's|.*/envs/\([^/]*\)/.*|\1|')
+    game_dir=$(dirname "$(dirname "$pkg_path")")
+    game_name=$(basename "$game_dir")
     visualizer_name=$(basename "$pkg_path")
     dest_dir="$BUILD_DIR/$game_name/$visualizer_name"
 
diff --git a/web/vite.config.base.ts b/web/vite.config.base.ts
@@ -6,6 +6,10 @@ export default defineConfig({
     optimizeDeps: {
         exclude: ['@kaggle-environments/core']
     },
+    server: {
+        port: 5173,
+        cors: true
+    },
     plugins: [
         checker({ typescript: true }),
         {
