[feat] Hot reload support.

src/frontend/components/ingame-view.tsx

@@ -47,7 +47,7 @@ export function IngameView({
     // Bind the game to the window such that we can debug it.
     (globalThis as unknown as { wormgine: Game }).wormgine = newGame;
 
-    newGame.needsReload$.subscribe(() => {
+    newGame.needsReload$.subscribe((previousState) => {
       setLoaded(false);
       log.info("needs reload");
       import(`../../game?ts=${Date.now()}`)
@@ -58,6 +58,7 @@ export function IngameView({
             gameReactChannel,
             gameInstance,
             level,
+            previousState,
           ),
         )
         .then((g) => {

src/game.ts

@@ -35,7 +35,7 @@ const tickEveryMs = 1000 / 90;
 
 const logger = new Logger("Game");
 
-export class Game {
+export class Game<ReloadedGameState extends object = {}> {
   public readonly viewport: Viewport;
   private readonly rapierWorld: RAPIER.World;
   public readonly world: GameWorld;
@@ -44,33 +44,35 @@ export class Game {
   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 | boolean>(null);
+  public overlay?: GameDebugOverlay;
+  private readonly reloadState = new BehaviorSubject<ReloadedGameState | null>(null);
   public readonly needsReload$ = this.reloadState.pipe(filter((s) => !!s));
 
   public get pixiRoot() {
     return this.viewport;
   }
 
-  public static async create(
+  public static async create<ReloadedGameState extends object>(
     window: Window,
     scenario: string,
-    gameReactChannel: GameReactChannel,
+    gameReactChannel: GameReactChannel<ReloadedGameState>,
     gameInstance: IRunningGameInstance,
     level?: string,
-  ): Promise<Game> {
+    previousGameState?: ReloadedGameState,
+  ): Promise<Game<ReloadedGameState>> {
     await RAPIER.init();
     const pixiApp = new Application();
     await pixiApp.init({ resizeTo: window, preference: "webgl" });
-    return new Game(pixiApp, scenario, gameReactChannel, gameInstance, level);
+    return new Game(pixiApp, scenario, gameReactChannel, gameInstance, level, previousGameState);
   }
 
   constructor(
     public readonly pixiApp: Application,
     private readonly scenario: string,
-    public readonly gameReactChannel: GameReactChannel,
+    public readonly gameReactChannel: GameReactChannel<ReloadedGameState>,
     public readonly netGameInstance: IRunningGameInstance,
     public readonly level?: string,
+    public readonly previousGameState?: ReloadedGameState,
   ) {
     // TODO: Set a sensible static width/height and have the canvas pan it.
     this.rapierWorld = new RAPIER.World({ x: 0, y: 9.81 });
@@ -88,10 +90,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();
@@ -124,6 +126,16 @@ export class Game {
     if (this.scenario.replaceAll(/[A-Za-z]/g, "") !== "") {
       throw new CriticalGameError(Error("Invalid level name"));
     }
+
+
+    this.overlay = new GameDebugOverlay(
+      this.rapierWorld,
+      this.pixiApp.ticker,
+      this.pixiApp.stage,
+      this.viewport,
+      undefined,
+    );
+
     try {
       logger.info(`Loading scenario ${this.scenario}`);
       const module = await import(`./scenarios/${this.scenario}.ts`);
@@ -134,13 +146,6 @@ export class Game {
       );
     }
 
-    this.overlay = new GameDebugOverlay(
-      this.rapierWorld,
-      this.pixiApp.ticker,
-      this.pixiApp.stage,
-      this.viewport,
-      undefined,
-    );
     this.pixiApp.stage.addChildAt(this.rapierGfx, 0);
     this.ready.next(true);
 
@@ -176,10 +181,10 @@ export class Game {
     logger.info("hot reload requested, saving game state");
     this.pixiApp.ticker.stop();
     const handler = async () => {
-      await this.gameReactChannel.saveGameState();
+      const state = await this.gameReactChannel.saveGameState();
       this.destroy();
       logger.info("game state saved, ready to reload");
-      this.reloadState.next(true);
+      this.reloadState.next(state);
     };
     void handler();
   };

src/interop/gamechannel.ts

@@ -14,15 +14,15 @@ interface WinDetails {
 
 export type AmmoCount = [IWeaponDefiniton, number][];
 
-type GameReactChannelEvents = {
+type GameReactChannelEvents<ReloadedGameState extends object> = {
   goToMenu: (event: GoToMenuEvent) => void;
   closeWeaponMenu: () => void;
   openWeaponMenu: (weapons: AmmoCount) => void;
   weaponSelected: (code: IWeaponCode) => void;
-  saveGameState: (callback: () => void) => void;
+  saveGameState: (callback: (state: ReloadedGameState) => void) => void;
 };
 
-export class GameReactChannel extends (EventEmitter as new () => TypedEmitter<GameReactChannelEvents>) {
+export class GameReactChannel<ReloadedGameState extends object = object> extends (EventEmitter as new () => TypedEmitter<GameReactChannelEvents<object>>) {
   constructor() {
     super();
   }
@@ -43,9 +43,9 @@ export class GameReactChannel extends (EventEmitter as new () => TypedEmitter<Ga
     this.emit("weaponSelected", code);
   }
 
-  public async saveGameState(): Promise<void> {
+  public async saveGameState(): Promise<ReloadedGameState> {
     return new Promise((resolve) =>
-      this.emit("saveGameState", () => resolve()),
+      this.emit("saveGameState", (state) => resolve(state as ReloadedGameState)),
     );
   }
 }

src/overlays/debugOverlay.ts

@@ -30,6 +30,8 @@ export class GameDebugOverlay {
   private mouse: Point = new Point();
   private mouseMoveListener: (e: MouseEvent) => void;
 
+  private readonly textFields = new Set<{ text: string }>();
+
   private static registeredDebugPoints: Record<
     string,
     { points: Point[]; color: ColorSource }
@@ -61,6 +63,12 @@ export class GameDebugOverlay {
     };
   }
 
+  public addTextField() {
+    const newTextField = { text: "" };
+    this.textFields.add(newTextField);
+    return newTextField;
+  }
+
   private toggleDebugView = (level: DebugLevel) => {
     if (level !== DebugLevel.None) {
       this.enableOverlay();
@@ -104,10 +112,16 @@ 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}`;
+    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}`,
+    ].concat(this.textFields.values().filter(v => !!v.text).map(v => v.text).toArray()).join(' | ')
 
     this.skippedUpdatesTarget = 180 / avgFps;
 

src/scenarios/netGame.ts

@@ -28,10 +28,15 @@ import { combineLatest, filter } from "rxjs";
 import { RoundState } from "../logic/gamestate";
 import { RunningNetGameInstance } from "../net/netgameinstance";
 import { Mine } from "../entities/phys/mine";
+import { PlayableCondition } from "../entities/playable/conditions";
 
 const log = new Logger("scenario");
 
-export default async function runScenario(game: Game) {
+interface HotReloadGameState {
+  iteration: number;
+}
+
+export default async function runScenario(game: Game<HotReloadGameState>) {
   if (!game.level) {
     throw Error("Level required!");
   }
@@ -44,8 +49,16 @@ export default async function runScenario(game: Game) {
   const { worldWidth } = game.viewport;
   const wormInstances = new Map<string, Worm>();
 
+  const iteration = game.previousGameState?.iteration || 1;
+  const iterField = game.overlay?.addTextField();
+  if (iterField) {
+    iterField.text = `Iteration: ${iteration}`;
+  }
+
   game.gameReactChannel.on("saveGameState", (cb) => {
-    cb();
+    cb({
+      iteration: iteration + 1
+    } satisfies HotReloadGameState);
   });
 
   const stateRecorder = new StateRecorder({
@@ -223,24 +236,26 @@ export default async function runScenario(game: Game) {
       const wormEnt = world.addEntity(
         wormInstance.team.playerUserId === myUserId
           ? Worm.create(
-              parent,
-              world,
-              pos,
-              wormInstance,
-              fireFn,
-              overlay.toaster,
-              stateRecorder,
-            )
+            parent,
+            world,
+            pos,
+            wormInstance,
+            fireFn,
+            overlay.toaster,
+            stateRecorder,
+          )
           : RemoteWorm.create(
-              parent,
-              world,
-              pos,
-              wormInstance,
-              fireFn,
-              overlay.toaster,
-            ),
+            parent,
+            world,
+            pos,
+            wormInstance,
+            fireFn,
+            overlay.toaster,
+          ),
         wormInstance.uuid,
       );
+      wormEnt.addCondition(PlayableCondition.Sickness);
+      wormEnt.addCondition(PlayableCondition.Metallic);
       wormInstances.set(wormInstance.uuid, wormEnt);
     }
   }
@@ -301,6 +316,14 @@ export default async function runScenario(game: Game) {
     }
   }
 
+
+  combineLatest([gameState.roundState$])
+    .pipe(filter(([state]) => state === RoundState.Finished))
+    .subscribe(() => {
+      log.info("Round tick")
+      wormInstances.forEach(w => w.roundTick());
+    });
+
   combineLatest([gameState.roundState$, gameState.remainingRoundTimeSeconds$])
     .pipe(filter(([state]) => state === RoundState.Finished))
     .subscribe(() => {