refactor: use functions instead of classes, in order to reduce unnecessary states

Author: aster-void

src/ability.ts

@@ -15,3 +15,9 @@ export enum Facing {
   left = "left",
   right = "right",
 }
+export enum Inputs {
+  Left = 0,
+  Right = 1,
+  Up = 2,
+  Ctrl = 3,
+}

src/constants.ts

@@ -173,6 +173,8 @@ export class Grid {
   getBlock(x: number, y: number): Block | undefined {
     return this.cells[y]?.[x]?.block;
   }
+  // satisfies: every(MovableObject.relativePositions, (pos) => pos.x >= 0)
+  // satisfies: every(MovableObject.relativePositions, (pos) => pos.y <= 0)
   getMovableObject(x: number, y: number): MovableObject | undefined {
     const cell = this.cells[y]?.[x];
     if (!cell) return undefined;
@@ -186,12 +188,19 @@ export class Grid {
         }
       }
     }
+    const minX = retrievedBlocks
+      .map((v) => v.x)
+      .reduce((a, b) => Math.min(a, b), Number.POSITIVE_INFINITY);
+    const maxY = retrievedBlocks
+      .map((v) => v.y)
+      .reduce((a, b) => Math.max(a, b), 0);
+
     const retrievedObject: MovableObject = {
       block: cell.block,
       objectId,
       relativePositions: retrievedBlocks.map((block) => ({
-        x: block.x - x,
-        y: block.y - y,
+        x: block.x - minX,
+        y: block.y - maxY,
       })),
     };
     return retrievedObject;
@@ -202,7 +211,7 @@ export class Grid {
     const prev = this.cells[y][x];
     if (prev.block === cell.block) return;
     if (prevSprite.sprite) {
-      cx._stage.removeChild(prevSprite.sprite);
+      cx._stage_container.removeChild(prevSprite.sprite);
     }
     if (prev.block === Block.air && prevSprite.sprite) {
       console.warn(

src/grid.ts

@@ -3,9 +3,9 @@ import type { Context, StateSnapshot } from "./public-types.ts";
 
 export function createSnapshot(cx: Context): StateSnapshot {
   const game = get(cx.state);
-  const playerX = cx.dynamic.playerX;
-  const playerY = cx.dynamic.playerY;
-  const playerFacing = cx.dynamic.playerFacing;
+  const playerX = cx.dynamic.player.x;
+  const playerY = cx.dynamic.player.y;
+  const playerFacing = cx.dynamic.player.facing;
   return {
     game: structuredClone(game),
     playerX,

src/history.ts

@@ -1,30 +1,40 @@
 import { Application, Container, type Ticker } from "pixi.js";
-import { type Writable, get, writable } from "svelte/store";
+import { derived, get, writable } from "svelte/store";
 import { Facing } from "./constants.ts";
 import { Grid } from "./grid.ts";
-import { Player } from "./player.ts";
-import type { Context, GameState, UIContext } from "./public-types.ts";
+import * as Player from "./player.ts";
+import type { Context, GameState, UIInfo } from "./public-types.ts";
 import { bunnyTexture } from "./resources.ts";
 import type { StageDefinition } from "./stages.ts";
+import { useUI } from "./ui-info.ts";
 
 export async function setup(
   el: HTMLElement,
   stageDefinition: StageDefinition,
-  uiContext: Writable<UIContext>,
-) {
-  let paused = false;
-  uiContext.subscribe((v) => {
-    paused = v.paused;
-  });
+  bindings: {
+    onpause: () => void;
+    onresume: () => void;
+    ondestroy: () => void;
+    uiInfo: UIInfo;
+  },
+): Promise<void> {
+  bindings.onpause = () => {
+    cx.state.update((prev) => {
+      prev.paused = true;
+      return prev;
+    });
+  };
+  const cleanups: (() => void)[] = [];
   const unlessPaused = (f: (ticker: Ticker) => void) => (ticker: Ticker) => {
+    const paused = get(cx.state).paused;
     if (!paused) {
       f(ticker);
     }
   };
 
   function tick() {
     // highlight is re-rendered every tick
-    const highlight = player.createHighlight(cx);
+    const highlight = Player.createHighlight(cx);
     if (highlight) {
       stage.addChild(highlight);
     }
@@ -39,6 +49,9 @@ export async function setup(
   const app = new Application();
   const stage = new Container();
   app.stage.addChild(stage);
+  cleanups.push(() => {
+    app.destroy(true, { children: true });
+  });
 
   const gridX = stageDefinition.stage[0].length;
   const gridY = stageDefinition.stage.length;
@@ -51,27 +64,49 @@ export async function setup(
   );
   const grid = new Grid(stage, app.screen.height, blockSize, stageDefinition);
 
+  const state = writable<GameState>({
+    inventory: null,
+    inventoryIsInfinite: false,
+    usage: {
+      // TODO
+      copy: Number.POSITIVE_INFINITY,
+      paste: Number.POSITIVE_INFINITY,
+      cut: Number.POSITIVE_INFINITY,
+    },
+    cells: grid.snapshot(),
+    paused: false,
+  });
+  const history = writable({
+    index: -1,
+    tree: [],
+  });
+  const uiContext = derived([state, history], ([$state, $history]) => {
+    return useUI($state, $history);
+  });
   const cx: Context = {
-    _stage: stage,
+    _stage_container: stage,
     grid,
     dynamic: {
       focus: null,
-      playerX: stageDefinition.initialPlayerX,
-      playerY: stageDefinition.initialPlayerY,
-      playerFacing: Facing.right,
-    },
-
-    state: writable<GameState>({
-      inventory: null,
-      inventoryIsInfinite: false,
-      usage: {
-        // TODO
-        copy: Number.POSITIVE_INFINITY,
-        paste: Number.POSITIVE_INFINITY,
-        cut: Number.POSITIVE_INFINITY,
+      player: {
+        // HACK: these values are immediately overwritten inside Player.init().
+        sprite: null,
+        coords() {
+          return { x: this.x, y: this.y };
+        },
+        x: 0,
+        y: 0,
+        vx: 0,
+        vy: 0,
+        onGround: false,
+        jumpingBegin: null,
+        holdingKeys: {},
+        facing: Facing.left,
       },
-      cells: grid.snapshot(),
-    }),
+    },
+    state: state,
+    history,
+    uiContext,
     config: writable({
       gridX,
       gridY,
@@ -80,22 +115,17 @@ export async function setup(
       initialPlayerX: stageDefinition.initialPlayerX,
       initialPlayerY: stageDefinition.initialPlayerY,
     }),
-    history: writable({
-      index: -1,
-      tree: [],
-    }),
     elapsed: writable(0),
-    uiContext,
   };
+
   app.ticker.add(
     unlessPaused((ticker) => {
       cx.elapsed.update((prev) => prev + ticker.deltaTime);
     }),
   );
 
-  const player = new Player(cx, bunnyTexture);
-  app.ticker.add(unlessPaused((ticker) => player.tick(cx, ticker)));
-  app.stage.addChild(player.sprite);
+  cx.dynamic.player = Player.init(cx, bunnyTexture);
+  app.ticker.add(unlessPaused((ticker) => Player.tick(cx, ticker)));
 
   let cleanup: undefined | (() => void) = undefined;
   app.ticker.add(
@@ -107,8 +137,42 @@ export async function setup(
 
   // Append the application canvas to the document body
   el.appendChild(app.canvas);
+  const onresize = useOnResize(cx, app, grid, gridX, gridY);
+  window.addEventListener("resize", onresize);
+  cleanups.push(() => {
+    window.removeEventListener("resize", onresize);
+  });
+
+  bindings.ondestroy = () => {
+    for (const cleanup of cleanups) {
+      cleanup();
+    }
+  };
+  bindings.onresume = () => {
+    cx.state.update((prev) => {
+      prev.paused = false;
+      return prev;
+    });
+  };
+  bindings.onpause = () => {
+    cx.state.update((prev) => {
+      prev.paused = true;
+      return prev;
+    });
+  };
+  uiContext.subscribe((uiInfo) => {
+    bindings.uiInfo = uiInfo;
+  });
+}
 
-  window.addEventListener("resize", () => {
+function useOnResize(
+  cx: Context,
+  app: Application,
+  grid: Grid,
+  gridX: number,
+  gridY: number,
+) {
+  return () => {
     app.renderer.resize(window.innerWidth, window.innerHeight);
     const blockSize = Math.min(
       app.screen.width / gridX,
@@ -120,6 +184,6 @@ export async function setup(
       return prev;
     });
     cx.grid.rerender(app.screen.height, blockSize);
-    player.resize(cx);
-  });
+    Player.resize(cx);
+  };
 }