Rename and refactor pirate ship to kraken game.

Author: lukehollis

api/examples/pirate_ship.py api/examples/kraken.pyapi/examples/pirate_ship.py renamed to api/examples/kraken.py

@@ -43,7 +43,8 @@ def reset(self, seed=None, options=None):
         self.ship_healths = np.full(NUM_SHIPS, SHIP_HEALTH)
         self.kraken_position = np.array([GRID_SIZE / 2, GRID_SIZE / 2])
         self.kraken_health = KRAKEN_HEALTH
-        self.tentacle_positions = np.random.uniform(0, GRID_SIZE, (NUM_TENTACLES, 2))
+        self.tentacle_offsets = np.random.uniform(-10, 10, (NUM_TENTACLES, 2))
+        self.tentacle_positions = self.kraken_position[None, :] + self.tentacle_offsets
         return self._get_obs(), {}
 
     def _get_obs(self):
@@ -98,6 +99,7 @@ def step(self, actions):
             direction /= (np.linalg.norm(direction) + 1e-8)
             self.kraken_position += direction * KRAKEN_SPEED
             self.kraken_position = np.clip(self.kraken_position, 0, GRID_SIZE)
+            self.tentacle_positions = self.kraken_position[None, :] + self.tentacle_offsets
 
         # Check done
         if self.kraken_health <= 0 or np.all(self.ship_healths <= 0) or self.steps >= MAX_STEPS:
@@ -118,14 +120,36 @@ class WebSocketCallback(BaseCallback):
     def __init__(self, websocket, verbose=0):
         super().__init__(verbose)
         self.websocket = websocket
+        self.episode_rewards = []
+        self.episode_lengths = []
 
     def _on_step(self):
         # Send state every few steps
         if self.n_calls % 10 == 0:
             state = self.training_env.get_attr("get_state_for_viz")[0]()
             asyncio.run(self.websocket.send_json({"type": "train_step", "state": state}))
+
+        # Collect rewards
+        done = self.locals['dones'][0]
+        reward = self.locals['rewards'][0]
+        if done:
+            self.episode_rewards.append(self.locals['infos'][0].get('episode', {}).get('r', 0))
+            self.episode_lengths.append(self.locals['infos'][0].get('episode', {}).get('l', 0))
         return True
 
+    def _on_rollout_end(self):
+        if self.episode_rewards:
+            avg_reward = np.mean(self.episode_rewards)
+            avg_length = np.mean(self.episode_lengths)
+            asyncio.run(self.websocket.send_json({
+                "type": "progress",
+                "episode": self.num_timesteps // 1000,  # Approximate episode count
+                "reward": float(avg_reward),
+                "loss": 0.0  # Placeholder, as SB3 doesn't directly provide loss here; can be extended if needed
+            }))
+            self.episode_rewards = []
+            self.episode_lengths = []
+
 async def train_pirate_ship(websocket: WebSocket):
     env = make_vec_env(PirateShipEnv, n_envs=8)
     model = PPO("MlpPolicy", env, verbose=1)

api/main.py

@@ -40,7 +40,7 @@
 import logging
 from examples.simcity import run_simcity, train_simcity, SimCityEnv
 from examples.simcity_deckgl import run_simcity as run_simcity_deckgl, train_simcity as train_simcity_deckgl, SimCityEnv as SimCityDeckGLEnv
-from examples.pirate_ship import train_pirate_ship, run_pirate_ship, PirateShipEnv
+from examples.kraken import train_pirate_ship, run_pirate_ship, PirateShipEnv
 
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -676,8 +676,8 @@ async def websocket_endpoint_simcity_deckgl(websocket: WebSocket):
             await websocket.send_json({"type": "error", "message": str(e)})
 
 
-@app.websocket("/ws/pirate-ship")
-async def websocket_pirate_ship(websocket: WebSocket):
+@app.websocket("/ws/kraken")
+async def websocket_kraken(websocket: WebSocket):
     await websocket.accept()
     preview_env = PirateShipEnv()
     preview_state = preview_env.get_state_for_viz()
@@ -690,7 +690,7 @@ async def websocket_pirate_ship(websocket: WebSocket):
             elif data['cmd'] == 'run':
                 await run_pirate_ship(websocket)
     except Exception as e:
-        print(f"Pirate Ship websocket disconnected: {e}")
+        print(f"Kraken websocket disconnected: {e}")
 
 
 if __name__ == "__main__":

client/src/App.jsx

@@ -20,7 +20,7 @@ import SimCityDeckGLExample from './examples/SimCityDeckGL.jsx';
 import FishExample from './examples/Fish.jsx';
 import IntersectionExample from './examples/Intersection.jsx';
 import SelfDrivingCarExample from './examples/SelfDrivingCar.jsx';
-import PirateShip from './examples/PirateShip.jsx';
+import KrakenGame from './examples/KrakenGame.jsx';
 
 export default function App() {
   return (
@@ -68,7 +68,7 @@ export default function App() {
         <Route path="/fish" element={<FishExample />} />
         <Route path="/intersection" element={<IntersectionExample />} />
         <Route path="/self-driving-car" element={<SelfDrivingCarExample />} />
-        <Route path="/pirate-ship" element={<PirateShip />} />
+        <Route path="/kraken" element={<KrakenGame />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </BrowserRouter>

client/src/examples/PirateShip.jsx client/src/examples/KrakenGame.jsxclient/src/examples/PirateShip.jsx renamed to client/src/examples/KrakenGame.jsx

@@ -3,12 +3,14 @@ import { Canvas, useFrame } from '@react-three/fiber';
 import { OrbitControls, Text as DreiText, Stars, Line } from '@react-three/drei';
 import { Button, Text, Card } from '@geist-ui/core';
 import { Link } from 'react-router-dom';
+import InfoPanel from '../components/InfoPanel.jsx';
 import * as THREE from 'three';
 import config from '../config.js';
 import { useResponsive } from '../hooks/useResponsive.js';
 import { EffectComposer, Bloom } from '@react-three/postprocessing';
 
-const WS_URL = `${config.WS_BASE_URL}/ws/pirate-ship`;
+const WS_URL = `${config.WS_BASE_URL}/ws/kraken`;
+const GRID_SIZE = 200;
 
 // Water surface component (adapted from example)
 const WaterSurface = ({ waterSize }) => {
@@ -71,14 +73,37 @@ const Kraken = ({ position, health }) => {
   );
 };
 
-// Tentacle component
-const Tentacle = ({ position }) => {
-  return (
-    <mesh position={[position[0] - GRID_SIZE/2, 1, position[1] - GRID_SIZE/2]}>
-      <cylinderGeometry args={[0.5, 0.5, 3]} />
-      <meshStandardMaterial color="darkgreen" />
-    </mesh>
-  );
+// Tentacle component - PURPLE tentacles emerging from water and reaching UP!
+const Tentacle = ({ start, end }) => {
+  // Safety check for undefined end position
+  if (!end || !Array.isArray(end) || end.length < 2) {
+    return null;
+  }
+  
+  // Start at water surface (y = 0)
+  const startAdj = [end[0] - GRID_SIZE/2, 0, end[1] - GRID_SIZE/2];
+  // End point high in the air (y = 15)
+  const endAdj = [end[0] - GRID_SIZE/2, 15, end[1] - GRID_SIZE/2];
+  // Mid-point for nice curve
+  const midRef = useRef([startAdj[0], 8, startAdj[2]]);
+  const lineRef = useRef();
+  
+  useFrame(({ clock }) => {
+    const time = clock.getElapsedTime();
+    const wave = Math.sin(time * 2 + (start[0] + start[1])) * 2;
+    const sway = Math.cos(time * 1.5 + (start[0] + start[1])) * 1.5;
+    // Animate mid-point for writhing effect
+    midRef.current[1] = 8 + wave;
+    midRef.current[0] = startAdj[0] + sway;
+    midRef.current[2] = startAdj[2] + sway * 0.7;
+    if (lineRef.current) {
+      lineRef.current.points = [startAdj, midRef.current, endAdj];
+      lineRef.current.geometry.setPositions(lineRef.current.points.flat());
+    }
+  });
+
+  const points = [startAdj, midRef.current, endAdj];
+  return <Line ref={lineRef} points={points} color="purple" lineWidth={5} />;
 };
 
 const StatusPanel = ({ ships, kraken }) => {
@@ -91,26 +116,63 @@ const StatusPanel = ({ ships, kraken }) => {
   );
 };
 
-export default function PirateShip() {
-  const [state, setState] = useState(null);
+export default function KrakenGame() {
+  const initialState = {
+    ships: Array(4).fill().map(() => ({ pos: [Math.random() * 200, Math.random() * 200], health: 100 })),
+    kraken: { pos: [100, 100], health: 500 },
+    tentacles: Array(6).fill().map(() => [Math.random() * 200, Math.random() * 200]),
+    grid_size: 200
+  };
+  const [state, setState] = useState(initialState);
   const [running, setRunning] = useState(false);
   const [training, setTraining] = useState(false);
   const [trained, setTrained] = useState(false);
+  const [logs, setLogs] = useState([]);
+  const [chartState, setChartState] = useState({ labels: [], rewards: [], losses: [] });
   const wsRef = useRef(null);
   const { isMobile } = useResponsive();
 
+  const addLog = (txt) => {
+    setLogs((l) => {
+      const upd = [...l, txt];
+      return upd.length > 200 ? upd.slice(upd.length - 200) : upd;
+    });
+  };
+
+  const resetTraining = () => {
+    setTraining(false);
+    setTrained(false);
+    setChartState({ labels: [], rewards: [], losses: [] });
+    setState(initialState);
+    addLog('Training has been reset.');
+  };
+
   useEffect(() => {
     const ws = new WebSocket(WS_URL);
     wsRef.current = ws;
+    ws.onopen = () => addLog('WS opened');
     ws.onmessage = (ev) => {
-      const parsed = JSON.parse(ev.data);
+      addLog(ev.data);
+      let parsed;
+      try {
+        parsed = JSON.parse(ev.data);
+      } catch {
+        return;
+      }
       if (parsed.type === 'train_step' || parsed.type === 'run_step') {
         setState(parsed.state);
+      } else if (parsed.type === 'progress') {
+        setChartState((prev) => ({
+          labels: [...prev.labels, parsed.episode],
+          rewards: [...prev.rewards, parsed.reward],
+          losses: [...prev.losses, parsed.loss ?? null],
+        }));
       } else if (parsed.type === 'trained') {
         setTraining(false);
         setTrained(true);
       }
     };
+    ws.onclose = () => addLog('WS closed');
     return () => ws.close();
   }, []);
 
@@ -121,11 +183,14 @@ export default function PirateShip() {
   };
 
   const startTraining = () => {
+    if (training || trained) return;
     setTraining(true);
+    addLog('Starting training...');
     send({ cmd: 'train' });
   };
 
   const startRun = () => {
+    if (!trained) return;
     setRunning(true);
     send({ cmd: 'run' });
   };
@@ -146,7 +211,7 @@ export default function PirateShip() {
         {state && <Kraken position={state.kraken.pos} health={state.kraken.health} />}
 
         {state && state.tentacles.map((tentacle, i) => (
-          <Tentacle key={i} position={tentacle} />
+          <Tentacle key={i} start={state.kraken.pos} end={tentacle} />
         ))}
 
         <EffectComposer>
@@ -160,7 +225,9 @@ export default function PirateShip() {
         <Text h1>Pirate Ship vs Kraken</Text>
         <Button type="secondary" disabled={training || trained} onClick={startTraining}>Train</Button>
         <Button type="success" disabled={!trained || running} onClick={startRun}>Run</Button>
+        {trained && <Button type="error" onClick={resetTraining}>Reset</Button>}
       </div>
+      <InfoPanel logs={logs} chartState={chartState} />
 
       {state && (
         <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 1 }}>