perf: restart no longer reloads the page

Author: aster-void

src/main.ts

@@ -2,6 +2,7 @@ import { Application, Container, type Ticker } from "pixi.js";
 import { derived, get, writable } from "svelte/store";
 import { Facing } from "./constants.ts";
 import { Grid, createCellsFromStageDefinition } from "./grid.ts";
+import * as History from "./history.ts";
 import * as Player from "./player.ts";
 import type { Context, GameState, UIInfo } from "./public-types.ts";
 import { bunnyTexture } from "./resources.ts";
@@ -12,18 +13,13 @@ export async function setup(
   el: HTMLElement,
   stageDefinition: StageDefinition,
   bindings: {
-    onpause: () => void;
-    onresume: () => void;
-    ondestroy: () => void;
+    pause: () => void;
+    resume: () => void;
+    destroy: () => void;
+    reset: () => 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;
@@ -65,6 +61,7 @@ export async function setup(
 
   const gridMarginY =
     (app.screen.height - blockSize * stageDefinition.stage.length) / 2;
+  // things that don't need to reset on reset()
   const config = writable({
     gridX,
     gridY,
@@ -73,7 +70,12 @@ export async function setup(
     initialPlayerX: stageDefinition.initialPlayerX,
     initialPlayerY: stageDefinition.initialPlayerY,
   });
-  const state = writable<GameState>({
+
+  const initialHistory = {
+    index: 0,
+    tree: [],
+  };
+  const initialGameState = {
     inventory: null,
     inventoryIsInfinite: false,
     usage: {
@@ -86,7 +88,27 @@ export async function setup(
     paused: false,
     switches: [],
     switchingBlocks: [],
-  });
+  };
+  const initialDynamic = {
+    focus: null,
+    player: {
+      // HACK: these values are immediately overwritten inside Player.init().
+      sprite: null,
+      coords: {
+        x: stageDefinition.initialPlayerX,
+        y: stageDefinition.initialPlayerY,
+      },
+      x: 0,
+      y: 0,
+      vx: 0,
+      vy: 0,
+      onGround: false,
+      jumpingBegin: null,
+      holdingKeys: {},
+      facing: Facing.right,
+    },
+  };
+  const state = writable<GameState>(structuredClone(initialGameState));
   const grid = new Grid(
     {
       _stage_container: stage,
@@ -97,44 +119,40 @@ export async function setup(
     blockSize,
     stageDefinition,
   );
-  const history = writable({
-    index: -1,
-    tree: [],
-  });
-  const uiContext = derived([state, history], ([$state, $history]) => {
-    return useUI($state, $history);
-  });
+  const history = writable(structuredClone(initialHistory));
   const cx: Context = {
     _stage_container: stage,
     grid,
-    dynamic: {
-      focus: null,
-      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.right,
-      },
-    },
+    dynamic: structuredClone(initialDynamic),
     state: state,
     history,
-    uiContext,
     config,
-    elapsed: writable(0),
+    elapsed: 0, // does this need to be writable? like is anyone listening to this/
+  };
+  bindings.reset = () => {
+    const d = stageDefinition;
+    cx.history = writable(structuredClone(initialHistory));
+    // 内部実装ゴリゴリに知ってるリセットなので、直したかったら直して。多分 coords の各プロパティのセッターをいい感じにしてやれば良い
+    // MEMO: `coords` は抽象化失敗してるので、直すか消すほうが良い
+    cx.dynamic.player.x = blockSize * d.initialPlayerX;
+    cx.dynamic.player.y = blockSize * d.initialPlayerY + get(cx.config).marginY;
+    cx.dynamic.focus = null;
+    cx.elapsed = 0;
+    cx.state.update((prev) => ({
+      ...prev,
+      paused: false,
+    }));
+    cx.grid.diffAndUpdateTo(
+      cx,
+      createCellsFromStageDefinition(stageDefinition),
+    );
+    // 上に同じく。 init を使う？でも init は中で document.addEventListener してるので...
+    History.record(cx);
   };
 
   app.ticker.add(
     unlessPaused((ticker) => {
-      cx.elapsed.update((prev) => prev + ticker.deltaTime);
+      cx.elapsed += ticker.deltaTime;
     }),
   );
 
@@ -157,23 +175,27 @@ export async function setup(
     window.removeEventListener("resize", onresize);
   });
 
-  bindings.ondestroy = () => {
+  bindings.destroy = () => {
     for (const cleanup of cleanups) {
       cleanup();
     }
   };
-  bindings.onresume = () => {
+  bindings.resume = () => {
     cx.state.update((prev) => {
       prev.paused = false;
       return prev;
     });
   };
-  bindings.onpause = () => {
+  bindings.pause = () => {
     cx.state.update((prev) => {
       prev.paused = true;
       return prev;
     });
   };
+
+  const uiContext = derived([state, history], ([$state, $history]) => {
+    return useUI($state, $history);
+  });
   uiContext.subscribe((uiInfo) => {
     bindings.uiInfo = uiInfo;
   });

src/player.ts

@@ -39,7 +39,7 @@ export function init(
   Ability.init(cx, options?.ability);
   return {
     sprite,
-    coords() {
+    get coords() {
       return { x: this.x, y: this.y };
     },
     get x() {
@@ -65,7 +65,7 @@ export function init(
 
 export function getCoords(cx: Context) {
   const { blockSize, marginY } = get(cx.config);
-  const coords = cx.dynamic.player.coords();
+  const coords = cx.dynamic.player.coords;
   const x = Math.floor(coords.x / blockSize);
   const y = Math.round((coords.y - marginY) / blockSize) - 1; // it was not working well so take my patch
   return { x, y };
@@ -140,7 +140,7 @@ export function tick(cx: Context, ticker: Ticker) {
   if (player.holdingKeys[Inputs.Right]) {
     player.vx += consts.moveVX * blockSize;
   }
-  const elapsed = get(cx.elapsed);
+  const elapsed = cx.elapsed;
   if (player.holdingKeys[Inputs.Up]) {
     if (player.onGround) {
       player.vy = -consts.jumpVY * blockSize;

src/public-types.ts

@@ -65,7 +65,7 @@ export type Context = {
     focus: Coords | null; // current focus coordinates
     player: {
       holdingKeys: { [key in Inputs]?: boolean };
-      coords: () => { x: number; y: number };
+      coords: { x: number; y: number };
       sprite: Sprite | null;
       x: number;
       y: number;
@@ -77,9 +77,7 @@ export type Context = {
     };
   };
   // about time
-  elapsed: Writable<number>;
-  // TODO: make it derived from state, because this doesn't need to be separate state
-  uiContext: Readable<UIInfo>;
+  elapsed: number;
 };
 
 export type UIInfo = {

src/ui-components/Game.svelte

@@ -13,9 +13,10 @@ const { stageNum, stage }: Props = $props();
 let container: HTMLElement | null = $state(null);
 
 const bindings = $state({
-  onpause: () => {},
-  onresume: () => {},
-  ondestroy: () => {},
+  pause: () => {},
+  resume: () => {},
+  destroy: () => {},
+  reset: () => {},
   uiInfo: <UIInfo>{
     inventory: null,
     inventoryIsInfinite: false,
@@ -35,14 +36,18 @@ $effect(() => {
   }
 });
 
-onDestroy(() => bindings.ondestroy());
+onDestroy(() => bindings.destroy());
 </script>
 
 <div bind:this={container} id="container">
   <PauseMenu
     paused={uiContext.paused}
-    onpause={() => bindings.onpause()}
-    onresume={() => bindings.onresume()}
+    onpause={() => bindings.pause()}
+    onresume={() => bindings.resume()}
+    onreset={() => {
+      // if this isn't working well, we can use window.location.reload(); instead
+      bindings.reset();
+    }}
   />
   <div
     class="uiBackground"
@@ -57,6 +62,7 @@ onDestroy(() => bindings.ondestroy());
     <div class="inventory">
       {#if uiContext.inventory !== null}
         <!-- todo: tint 0xff0000 をする必要があるが、そもそもこの画像は仮なのか本当に赤色にするのか -->
+
         <img
           src="/assets/block.png"
           alt="inventory"

src/ui-components/PauseMenu.svelte

@@ -3,8 +3,9 @@ type Props = {
   paused: boolean;
   onresume: () => void;
   onpause: () => void;
+  onreset: () => void;
 };
-const { paused, onresume, onpause }: Props = $props();
+let { paused, onresume, onpause, onreset }: Props = $props();
 let el: HTMLDialogElement;
 $effect(() => {
   if (paused) {
@@ -36,7 +37,9 @@ document.addEventListener("keydown", (ev) => {
     <button
       style="font-size: 1.5rem;"
       class="btn btn-block"
-      onclick={() => window.location.reload()}
+      onclick={() => {
+        onreset();
+      }}
     >
       Restart
     </button>