Add hot-reload capacity to game.

Author: Half-Shot

src/entities/playable/worm.ts

@@ -739,7 +739,7 @@ export class Worm extends PlayableEntity<WormRecordedState> {
       } else {
         this.weaponSprite.position.set(
           this.sprite.x -
-            (this.sprite.width + this.currentWeapon.sprite.offset.x),
+          (this.sprite.width + this.currentWeapon.sprite.offset.x),
           this.sprite.y + this.currentWeapon.sprite.offset.y,
         );
         this.weaponSprite.rotation = this.fireAngle - Math.PI;
@@ -817,6 +817,11 @@ export class Worm extends PlayableEntity<WormRecordedState> {
 
   destroy(): void {
     super.destroy();
+    this.targettingGfx.destroy();
+    this.wireframe.renderable.destroy();
+    this.healthTextBox.destroy();
+    this.weaponSprite.destroy();
+    this.arrowSprite.destroy();
     // XXX: This might need to be dead.
     this.state.transition(InnerWormState.Inactive);
     if (this.isSinking) {

src/frontend/components/ingame-view.tsx

@@ -1,13 +1,24 @@
 import { useEffect, useRef, useState } from "preact/hooks";
 import styles from "./ingame-view.module.css";
-import { Game } from "../../game";
+import { type Game } from "../../game";
 import { AmmoCount, GameReactChannel } from "../../interop/gamechannel";
 import { WeaponSelector } from "./gameui/weapon-select";
 import {
   IRunningGameInstance,
   LocalGameInstance,
 } from "../../logic/gameinstance";
 import { LoadingPage } from "./loading-page";
+import Logger from "../../log";
+import { logger } from "matrix-js-sdk/lib/logger";
+
+const log = new Logger('ingame-view');
+
+if (import.meta.hot) {
+  import.meta.hot.accept('../../game', (newFoo) => {
+    log.info("New foo", newFoo);
+  })
+
+}
 
 export function IngameView({
   scenario,
@@ -25,30 +36,67 @@ export function IngameView({
   const [game, setGame] = useState<Game>();
   const ref = useRef<HTMLDivElement>(null);
   const [weaponMenu, setWeaponMenu] = useState<AmmoCount | null>(null);
+
+  const onGameLoaded = (newGame: Game) => {
+    if (!newGame) {
+      return;
+    }
+    void newGame.loadResources();
+
+    log.info("Game effect", newGame);
+
+    // Bind the game to the window such that we can debug it.
+    (globalThis as unknown as { wormgine: Game }).wormgine = newGame;
+
+    newGame.needsReload$.subscribe(() => {
+      setLoaded(false);
+      log.info("needs reload");
+      import(`../../game?ts=${Date.now()}`).then((imp) =>
+        imp.Game.create(
+          window,
+          scenario,
+          gameReactChannel,
+          gameInstance,
+          level,
+        )
+      ).then((g) => {
+        setGame(g);
+        logger.info("onGameLoaded called");
+        onGameLoaded(g);
+      });
+    });
+
+    newGame.ready$.subscribe((r) => {
+      if (r) {
+        log.info("Game loaded");
+        setLoaded(true);
+      }
+    });
+
+    newGame.run().catch((ex) => {
+      setFatalError(ex);
+      newGame.destroy();
+    });
+  };
+
   useEffect(() => {
     async function init() {
       if (gameInstance instanceof LocalGameInstance) {
         // XXX: Only so the game feels more responsive by capturing this inside the loading phase.
         await gameInstance.startGame();
-        console.log("Game started");
+        log.info("Game started");
       }
-      const game = await Game.create(
+      const { Game } = await import("../../game");
+      const newGame = await Game.create(
         window,
         scenario,
         gameReactChannel,
         gameInstance,
         level,
       );
-      setGame(game);
-      game.ready$.subscribe((r) => {
-        if (r) {
-          console.log("Game loaded");
-          setLoaded(true);
-        }
-      });
-      // Bind the game to the window such that we can debug it.
-      (globalThis as unknown as { wormgine: Game }).wormgine = game;
-      await game.loadResources();
+      setGame(newGame);
+      logger.info("useEffect called");
+      onGameLoaded(newGame);
     }
 
     void init().catch((ex) => {
@@ -60,16 +108,7 @@ export function IngameView({
     if (!ref.current || !game) {
       return;
     }
-    if (ref.current.children.length > 0) {
-      // Already bound
-      return;
-    }
-
-    ref.current.appendChild(game.canvas);
-    game.run().catch((ex) => {
-      setFatalError(ex);
-      game.destroy();
-    });
+    ref.current.replaceChildren(game.canvas);
   }, [ref, game]);
 
   useEffect(() => {

src/game.ts

@@ -1,4 +1,4 @@
-import { Application, Graphics, UPDATE_PRIORITY } from "pixi.js";
+import { Application, Graphics, Ticker, UPDATE_PRIORITY } from "pixi.js";
 import { Viewport } from "pixi-viewport";
 import { getAssets } from "./assets";
 import { GameDebugOverlay } from "./overlays/debugOverlay";
@@ -17,6 +17,7 @@ import { NetGameWorld } from "./net/netGameWorld";
 import {
   BehaviorSubject,
   debounceTime,
+  filter,
   fromEvent,
   map,
   merge,
@@ -25,10 +26,14 @@ import {
 } from "rxjs";
 import { IRunningGameInstance } from "./logic/gameinstance";
 import { RunningNetGameInstance } from "./net/netgameinstance";
+import { UpdatePayload } from "vite/types/hmrPayload";
 
 const worldWidth = 1920;
 const worldHeight = 1080;
 
+// Run physics engine at 90fps.
+const tickEveryMs = 1000 / 90;
+
 const logger = new Logger("Game");
 
 export class Game {
@@ -39,6 +44,10 @@ export class Game {
   public readonly screenSize$: Observable<{ width: number; height: number }>;
   private readonly ready = new BehaviorSubject(false);
   public readonly ready$ = this.ready.asObservable();
+  private lastPhysicsTick: number = 0;
+  private overlay?: GameDebugOverlay;
+  private readonly reloadState = new BehaviorSubject<null | any>(null);
+  public readonly needsReload$ = this.reloadState.pipe(filter(s => s));
 
   public get pixiRoot() {
     return this.viewport;
@@ -80,10 +89,10 @@ export class Game {
     this.world =
       netGameInstance instanceof RunningNetGameInstance
         ? new NetGameWorld(
-            this.rapierWorld,
-            this.pixiApp.ticker,
-            netGameInstance,
-          )
+          this.rapierWorld,
+          this.pixiApp.ticker,
+          netGameInstance,
+        )
         : new GameWorld(this.rapierWorld, this.pixiApp.ticker);
     this.pixiApp.stage.addChild(this.viewport);
     this.viewport.decelerate().drag();
@@ -126,7 +135,7 @@ export class Game {
       );
     }
 
-    const overlay = new GameDebugOverlay(
+    this.overlay = new GameDebugOverlay(
       this.rapierWorld,
       this.pixiApp.ticker,
       this.pixiApp.stage,
@@ -136,22 +145,9 @@ export class Game {
     this.pixiApp.stage.addChildAt(this.rapierGfx, 0);
     this.ready.next(true);
 
-    // Run physics engine at 90fps.
-    const tickEveryMs = 1000 / 90;
-    let lastPhysicsTick = 0;
-
-    this.pixiApp.ticker.add(
-      (dt) => {
-        // TODO: Timing.
-        const startTime = performance.now();
-        lastPhysicsTick += dt.deltaMS;
-        // Note: If we are lagging behind terribly, this will multiple ticks
-        while (lastPhysicsTick >= tickEveryMs) {
-          this.world.step();
-          lastPhysicsTick -= tickEveryMs;
-        }
-        overlay.physicsSamples.push(performance.now() - startTime);
-      },
+    import.meta.hot?.on('vite:beforeUpdate', this.hotReload);
+
+    this.pixiApp.ticker.add(this.tickWorld,
       undefined,
       UPDATE_PRIORITY.HIGH,
     );
@@ -161,7 +157,34 @@ export class Game {
     return this.pixiApp.canvas;
   }
 
+  public tickWorld = (dt: Ticker) => {
+    // TODO: Timing.
+    const startTime = performance.now();
+    this.lastPhysicsTick += dt.deltaMS;
+    // Note: If we are lagging behind terribly, this will run multiple ticks
+    while (this.lastPhysicsTick >= tickEveryMs) {
+      this.world.step();
+      this.lastPhysicsTick -= tickEveryMs;
+    }
+    this.overlay?.physicsSamples.push(performance.now() - startTime);
+  }
+
   public destroy() {
+    import.meta.hot?.off('vite:beforeUpdate', this.hotReload);
+    this.overlay?.destroy();
     this.pixiApp.destroy();
+    this.rapierWorld.free();
+  }
+
+  public hotReload = (payload: UpdatePayload) => {
+    logger.info("hot reload requested, saving game state");
+    this.pixiApp.ticker.stop();
+    const handler = async () => {
+      const state = await this.gameReactChannel.saveGameState();
+      this.destroy();
+      logger.info("game state saved, ready to reload");
+      this.reloadState.next(state);
+    };
+    void handler();
   }
-}
+}

src/interop/gamechannel.ts

@@ -19,6 +19,7 @@ type GameReactChannelEvents = {
   closeWeaponMenu: () => void;
   openWeaponMenu: (weapons: AmmoCount) => void;
   weaponSelected: (code: IWeaponCode) => void;
+  saveGameState: (callback: () => void) => void;
 };
 
 export class GameReactChannel extends (EventEmitter as new () => TypedEmitter<GameReactChannelEvents>) {
@@ -41,4 +42,8 @@ export class GameReactChannel extends (EventEmitter as new () => TypedEmitter<Ga
   public weaponMenuSelect(code: IWeaponCode) {
     this.emit("weaponSelected", code);
   }
+
+  public async saveGameState(): Promise<void> {
+    return new Promise(resolve => this.emit("saveGameState", () => resolve()));
+  }
 }

src/logic/gamestate.ts

@@ -52,6 +52,7 @@ const PREROUND_TIMER_MS = 5000;
 const logger = new Logger("GameState");
 
 export class GameState {
+
   static getTeamMaxHealth(team: TeamDefinition) {
     return team.worms.map((w) => w.maxHealth).reduce((a, b) => a + b);
   }
@@ -65,7 +66,7 @@ export class GameState {
       Math.ceil(
         (team.worms.map((w) => w.health).reduce((a, b) => a + b) /
           team.worms.map((w) => w.maxHealth).reduce((a, b) => a + b)) *
-          100,
+        100,
       ) / 100
     );
   }
@@ -230,6 +231,7 @@ export class GameState {
   public markAsFinished() {
     logger.info("Mark as finished");
     this.roundState.next(RoundState.Finished);
+    this.remainingRoundTimeMs.next(0);
   }
 
   public update(ticker: { deltaMS: number }) {

src/overlays/debugOverlay.ts

@@ -51,13 +51,7 @@ export class GameDebugOverlay {
     });
     this.rapierGfx = new Graphics();
     this.tickerFn = this.update.bind(this);
-    globalFlags.on("toggleDebugView", (level: DebugLevel) => {
-      if (level !== DebugLevel.None) {
-        this.enableOverlay();
-      } else {
-        this.disableOverlay();
-      }
-    });
+    globalFlags.on("toggleDebugView", this.toggleDebugView);
     if (globalFlags.DebugView) {
       this.enableOverlay();
     }
@@ -67,6 +61,14 @@ export class GameDebugOverlay {
     };
   }
 
+  private toggleDebugView = (level: DebugLevel) => {
+    if (level !== DebugLevel.None) {
+      this.enableOverlay();
+    } else {
+      this.disableOverlay();
+    }
+  }
+
   private enableOverlay() {
     this.stage.addChild(this.text);
     this.viewport.addChild(this.rapierGfx);
@@ -81,6 +83,11 @@ export class GameDebugOverlay {
     window.removeEventListener("mousemove", this.mouseMoveListener);
   }
 
+  public destroy() {
+    this.disableOverlay();
+    globalFlags.off("toggleDebugView", this.toggleDebugView);
+  }
+
   private update(dt: Ticker) {
     this.fpsSamples.splice(0, 0, dt.FPS);
     while (this.fpsSamples.length > FRAME_SAMPLES) {
@@ -97,7 +104,7 @@ export class GameDebugOverlay {
       Math.ceil(
         (this.physicsSamples.reduce((a, b) => a + b, 0) /
           (this.physicsSamples.length || 1)) *
-          100,
+        100,
       ) / 100;
 
     this.text.text = `FPS: ${avgFps} | Physics time: ${avgPhysicsCostMs}ms| Total bodies: ${this.rapierWorld.bodies.len()} | Mouse: ${Math.round(this.mouse.x)} ${Math.round(this.mouse.y)} | Ticker fns: ${this.ticker.count}`;