feat: side panel controls

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/App.css

@@ -1,11 +1,29 @@
 #root {
-  max-width: 80vh;
   margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  width: 100%;
+  height: 100%;
+}
+
+#container {
+  width: 100%;
+  height: 100%;
+}
+
+#board {
+  margin: 0 auto;
+  padding: 1em;
+}
+
+#renderer {
+  max-width: 800px;
+  height: auto;
+  max-height: 80%;
+  aspect-ratio: 1;
+  margin: 0 auto;
 }
 
 #legend {
+  text-align: center;
   margin-top: 1em;
   height: 3em;
 }

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/App.tsx

@@ -1,16 +1,21 @@
-import StyledChessboard from './components/StyledChessboard';
-import Controls from './components/Controls';
-import Legend from './components/Legend';
+import { useEffect, useRef } from 'react';
+import { createReplayVisualizer, ReplayAdapter } from '@kaggle-environments/core';
+import GameRenderer from './components/GameRenderer';
 import './App.css';
 
 function App() {
-  return (
-    <div className="container">
-      <StyledChessboard />
-      <Controls />
-      <Legend />
-    </div>
-  );
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    const container = containerRef.current!;
+    const gameName = 'open_spiel_chess';
+    const ui = 'side-panel';
+    const adapter = new ReplayAdapter({ gameName, GameRenderer, ui });
+
+    createReplayVisualizer(container, adapter);
+  });
+
+  return <div id="container" ref={containerRef} />;
 }
 
 export default App;

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

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+import { Chess } from 'chess.js';
+import { ChessPlayer, ChessStep, GameRendererProps } from '@kaggle-environments/core';
+import StyledBoard from '../components/StyledBoard';
+import Legend from './Legend';
+import useChessStore from '../stores/useChessStore';
+
+export default function GameRenderer(options: GameRendererProps<ChessStep[]>) {
+  const setState = useChessStore((state) => state.setState);
+
+  useEffect(() => {
+    const step = options.replay.steps.at(options.step);
+    const player = step!.players.find((player: ChessPlayer) => player.isTurn);
+
+    if (player) {
+      const history = options.replay.info!.stateHistory;
+      const fen = history.at(options.step);
+      const chess = new Chess(fen);
+      const move = chess.move(player.actionDisplayText!);
+
+      step!.players.forEach((p) => {
+        const opposite = { w: 'b', b: 'w' };
+        const color = p.isTurn ? move.color : opposite[move.color];
+        chess.setHeader(color, p.name);
+      });
+
+      setState(chess);
+    }
+  }, [setState, options]);
+
+  return (
+    <div id="renderer">
+      <StyledBoard />
+      <Legend />
+    </div>
+  );
+}

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/StyledChessboard.tsx → kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/components/StyledBoard.tsx

@@ -1,7 +1,7 @@
 import { Chessboard } from 'react-chessboard';
 import useChessStore from '../stores/useChessStore';
 
-export default function StyledChessboard() {
+export default function StyledBoard() {
   const chess = useChessStore((state) => state.chess);
   const position = chess.fen();
 
@@ -38,15 +38,11 @@ export default function StyledChessboard() {
   };
 
   return (
-    // Div with style needed only for the React 18 compatible
-    // version of react-chessboard.
-    <div style={{ aspectRatio: '1', minHeight: '400px' }}>
-      <Chessboard
-        position={position}
-        customDarkSquareStyle={darkSquareStyle}
-        customLightSquareStyle={lightSquareStyle}
-        customPieces={pieces}
-      />
-    </div>
+    <Chessboard
+      position={position}
+      customDarkSquareStyle={darkSquareStyle}
+      customLightSquareStyle={lightSquareStyle}
+      customPieces={pieces}
+    />
   );
 }

kaggle_environments/envs/open_spiel_env/games/chess/visualizer/v2/src/index.css

@@ -29,40 +29,3 @@ body {
   min-width: 320px;
   min-height: 100vh;
 }
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}