history is not working well but idc

Author: aster-void

src/ability.ts

@@ -1,5 +1,6 @@
 import { get } from "svelte/store";
 import { Block, Facing } from "./constants.ts";
+import { printCells } from "./grid.ts";
 import { createSnapshot } from "./history.ts";
 import type { Player } from "./player.ts";
 import type {
@@ -44,6 +45,12 @@ export class AbilityControl {
       e.preventDefault();
       if (this.usage.paste > 0) this.paste(cx, parent.facing);
     });
+    const ss = createSnapshot(cx);
+    const cfg = get(cx.config);
+    ss.playerX = cfg.initialPlayerX;
+    ss.playerY = cfg.initialPlayerY;
+    console.log(ss);
+    this.pushHistory(cx, ss);
   }
   setInventory(cx: Context, inventory: MovableObject | null) {
     this.inventory = structuredClone(inventory);
@@ -96,7 +103,7 @@ export class AbilityControl {
   paste(cx: Context, facing: Facing) {
     const state = get(cx.state);
     if (!this.focused) return;
-    if (!this.inventory /*|| this.inventory === Block.air*/) return;
+    if (!this.inventory) return;
 
     // 左向きのときにブロックを配置する位置を変更するのに使用
     const width =
@@ -134,6 +141,7 @@ export class AbilityControl {
       paste: --this.usage.paste,
     }));
 
+    printCells(createSnapshot(cx).game.cells, "paste");
     this.pushHistory(cx, createSnapshot(cx));
   }
   cut(cx: Context) {
@@ -145,90 +153,103 @@ export class AbilityControl {
     const target = cx.grid.getBlock(x, y);
     // removable 以外はカットできない
     if (!target || target !== Block.movable) return;
-    const prevInventory = this.inventory;
     const movableObject = cx.grid.getMovableObject(x, y);
     if (!movableObject) return;
 
-    this.pushHistory(cx, createSnapshot(cx)); // TODO: snapshot current state
-
+    this.pushHistory(cx, createSnapshot(cx));
     this.setInventory(cx, movableObject);
 
     cx.grid.update(cx, (prev) =>
       prev.objectId === movableObject.objectId ? { block: Block.air } : prev,
     );
-    const prevEnabled = { ...this.usage };
     cx.uiContext.update((prev) => ({
       ...prev,
       cut: --this.usage.cut,
     }));
 
+    printCells(createSnapshot(cx).game.cells, "cut");
     this.pushHistory(cx, createSnapshot(cx));
   }
 
   // History については、 `docs/history-stack.png` を参照のこと
   pushHistory(cx: Context, h: StateSnapshot) {
+    printCells(h.game.cells, "pushHistory");
     cx.history.update((prev) => {
-      prev.tree = prev.tree.slice(0, prev.index + 1);
+      if (prev.tree.length > prev.index + 1) {
+        // redo した後に undo した場合、履歴を切り詰める
+        prev.tree.length = prev.index + 1;
+      }
       prev.tree.push(h);
-      prev.index++;
+      prev.index = prev.tree.length - 1;
       return prev;
     });
   }
-  undo(cx: Context) {
-    cx.history.update((prev) => {
-      const history = prev;
-      const grid = cx.grid;
-      if (history.index <= 0) return history;
-      history.index--;
-      const snapshot = history.tree[history.index];
+  undo(cx: Context): { x: number; y: number } | undefined {
+    const history = get(cx.history);
+    if (history.index <= 0) return undefined;
+    const grid = cx.grid;
+    history.index--;
+    const snapshot = history.tree[history.index];
+    printCells(snapshot.game.cells);
 
-      // オブジェクトを配置
-      this.setInventory(cx, snapshot.game.inventory);
-      grid.diffAndUpdateTo(snapshot.game.cells);
+    // オブジェクトを配置
+    this.setInventory(cx, snapshot.game.inventory);
+    grid.diffAndUpdateTo(cx, snapshot.game.cells);
+    printCells(snapshot.game.cells, "undo");
+    this.usage = snapshot.game.usage;
+    cx.uiContext.update((ui) => ({
+      ...ui,
+      ...this.usage,
+      undo: history.index,
+      redo: history.tree.length - history.index,
+    }));
 
-      this.usage = snapshot.game.usage;
-      cx.uiContext.update((prev) => ({
-        ...prev,
-        ...this.usage,
-        undo: history.index,
-        redo: history.tree.length - history.index,
-      }));
+    cx.history.set(history);
 
-      console.log(`history: ${history.index} / ${history.tree.length}`);
-      return prev;
-    });
+    console.log(`history: ${history.index} / ${history.tree.length - 1}`);
+    return {
+      x: history.tree[history.index].playerX,
+      y: history.tree[history.index].playerY,
+    };
   }
-  redo(cx: Context, history: GameHistory) {
-    if (history.index >= history.tree.length) return;
+  redo(cx: Context): { x: number; y: number } | undefined {
+    // TODO: プレイヤーの座標の履歴を「いい感じ」にするため、 history を二重管理する
+    const history = get(cx.history);
+    if (history.index >= history.tree.length - 1) return undefined;
     const snapshot = history.tree[history.index];
+    printCells(snapshot.game.cells, "redo");
     history.index++; // redo は、巻き戻し前の index
     const grid = cx.grid;
 
-    // オブジェクトを配置
-    grid.diffAndUpdateTo(snapshot.game.cells);
-
+    // 状態を巻き戻す
+    grid.diffAndUpdateTo(cx, snapshot.game.cells);
     this.setInventory(cx, snapshot.game.inventory);
 
     this.usage = snapshot.game.usage;
-    cx.uiContext.update((prev) => ({
-      ...prev,
+    cx.uiContext.update((ui) => ({
+      ...ui,
       ...this.usage,
       undo: history.index,
       redo: history.tree.length - history.index,
     }));
 
-    console.log(`history: ${history.index} / ${history.tree.length}`);
+    console.log(`history: ${history.index} / ${history.tree.length - 1}`);
+    cx.history.set(history);
+    return {
+      x: history.tree[history.index].playerX,
+      y: history.tree[history.index].playerY,
+    };
   }
   handleKeyDown(
     cx: Context,
     e: KeyboardEvent,
     onGround: boolean,
     facing: Facing,
-    history: GameHistory,
     playerAt: Coords,
-  ) {
+  ): { x: number; y: number } | undefined {
     if (!(e.ctrlKey || e.metaKey)) return undefined;
 
+    e.preventDefault();
     if (this.usage.paste > 0 && onGround && e.key === "v") {
       this.paste(cx, facing);
     }
@@ -237,24 +258,14 @@ export class AbilityControl {
     }
     if (this.usage.cut > 0 && onGround && e.key === "x") {
       this.cut(cx);
+      return undefined;
     }
     if (e.key === "z") {
-      console.log(history);
-      this.undo(cx);
-      e.preventDefault();
-      return {
-        x: history.tree[history.index].playerX,
-        y: history.tree[history.index].playerY,
-      };
+      return this.undo(cx);
     }
     if (e.key === "y") {
-      this.redo(cx, history);
       e.preventDefault();
-      if (history.index >= history.tree.length) return;
-      return {
-        x: history.tree[history.index].playerX,
-        y: history.tree[history.index].playerY,
-      };
+      return this.redo(cx);
     }
   }
 }
@@ -263,11 +274,11 @@ function placeMovableObject(
   cx: Context,
   x: number,
   y: number,
-  movableObject: MovableObject,
+  object: MovableObject,
 ) {
   const grid = cx.grid;
 
-  for (const i of movableObject.relativePositions) {
+  for (const i of object.relativePositions) {
     const positionX = x + i.x;
     const positionY = y + i.y;
     const target = grid.getBlock(positionX, positionY);
@@ -276,12 +287,12 @@ function placeMovableObject(
       return;
     }
   }
-  for (const i of movableObject.relativePositions) {
-    const positionX = x + i.x;
-    const positionY = y + i.y;
-    grid.setBlock(cx, x, y, {
-      block: movableObject.block,
-      objectId: movableObject.objectId,
+  for (const rel of object.relativePositions) {
+    const positionX = x + rel.x;
+    const positionY = y + rel.y;
+    grid.setBlock(cx, positionX, positionY, {
+      block: object.block,
+      objectId: object.objectId,
     });
   }
 }

src/grid.ts

@@ -95,9 +95,16 @@ export class Grid {
 
     this.initOOBSprites(cellSize);
   }
-  diffAndUpdateTo(newGrid: GridCell[][]) {
-    // TODO
-    console.log("TODO: implement diffing alg");
+  diffAndUpdateTo(cx: Context, newGrid: GridCell[][]) {
+    for (let y = 0; y < this.cells.length; y++) {
+      for (let x = 0; x < this.cells[y].length; x++) {
+        const cell = this.cells[y][x];
+        const newCell = newGrid[y][x];
+        if (cell.block !== newCell.block) {
+          this.setBlock(cx, x, y, newCell);
+        }
+      }
+    }
   }
   update(cx: Context, fn: (cell: GridCell, x: number, y: number) => GridCell) {
     const { blockSize } = get(cx.config);
@@ -112,7 +119,6 @@ export class Grid {
     }
   }
   snapshot(): GridCell[][] {
-    console.log(this.cells);
     return structuredClone(this.cells);
   }
   initOOBSprites(cellSize: number) {
@@ -174,9 +180,10 @@ export class Grid {
     const objectId = cell.objectId;
     const retrievedBlocks: { x: number; y: number }[] = [];
     for (let y = 0; y < this.cells.length; y++) {
-      for (let x = 0; x < this.cells[y].length; x++) {}
-      if (this.cells[y][x].objectId === cell.objectId) {
-        retrievedBlocks.push({ x, y });
+      for (let x = 0; x < this.cells[y].length; x++) {
+        if (this.cells[y][x].objectId === cell.objectId) {
+          retrievedBlocks.push({ x, y });
+        }
       }
     }
     const retrievedObject: MovableObject = {
@@ -190,13 +197,11 @@ export class Grid {
     return retrievedObject;
   }
   setBlock(cx: Context, x: number, y: number, cell: GridCell) {
-    console.log("setBlock called at", x, y);
     const prevSprite = this.sprites[y][x];
     const { blockSize, marginY } = get(cx.config);
     const prev = this.cells[y][x];
     if (prev.block === cell.block) return;
     if (prevSprite.sprite) {
-      console.log("removing child at", x, y);
       cx._stage.removeChild(prevSprite.sprite);
     }
     if (prev.block === Block.air && prevSprite.sprite) {
@@ -252,6 +257,10 @@ export class Grid {
       default:
         cell satisfies never;
     }
+    cx.state.update((prev) => ({
+      ...prev,
+      cells: this.cells,
+    }));
   }
 }
 
@@ -291,3 +300,27 @@ function updateSprite(
   sprite.x = x * blockSize;
   sprite.y = y * blockSize + marginY;
 }
+
+export function printCells(cells: GridCell[][], context?: string) {
+  console.log(
+    `${context ? context : "Grid"}:
+     ${cells
+       .map((row) =>
+         row
+           .map((cell) => {
+             switch (cell.block) {
+               case Block.air:
+                 return ".";
+               case Block.block:
+                 return "b";
+               case Block.movable:
+                 return "m";
+               default:
+                 cell satisfies never;
+             }
+           })
+           .join(""),
+       )
+       .join("\n")}`,
+  );
+}

src/history.ts

@@ -7,7 +7,7 @@ export function createSnapshot(cx: Context): StateSnapshot {
   const playerY = cx.dynamic.playerY;
   const playerFacing = cx.dynamic.playerFacing;
   return {
-    game,
+    game: structuredClone(game),
     playerX,
     playerY,
     playerFacing,

src/main.ts

@@ -81,7 +81,7 @@ export async function setup(
       initialPlayerY: stageDefinition.initialPlayerY,
     }),
     history: writable({
-      index: 0,
+      index: -1,
       tree: [],
     }),
     elapsed: writable(0),

src/player.ts

@@ -95,7 +95,6 @@ export class Player {
         event,
         this.onGround,
         this.facing,
-        get(_cx.history),
         { x: this.x, y: this.y },
       );
       if (playerPosition) {
@@ -244,6 +243,11 @@ export class Player {
     this.x += this.vx * ticker.deltaTime;
     this.y += this.vy * ticker.deltaTime;
     this.vy += consts.gravity * blockSize * ticker.deltaTime;
+
+    cx.dynamic.playerX = this.x;
+    cx.dynamic.playerY = this.y;
+    cx.dynamic.playerFacing = this.facing;
+    cx.dynamic.focus = this.getCoords(cx); // TODO: これをやると、focusがplayerの位置に移動してしまう。修正する。
   }
   resize(cx: Context) {
     const state = get(cx.state);