Add per-move battery drain animation. Fixed a bug related to the battery depleting. Altered the bot-path overlay to look more natural. Fixed a bug in the Dijkstra pathfinding. Fixed a bug with Manhattan movement related to turn-direction selection. Fixed planning-phase bug where objects were allowed to overlap.

Author: Faisal5546

package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview",
     "test": "vitest",
     "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "test:seeds": "RUN_EXHAUSTIVE_SEEDS=1 vitest run src/__tests__/virtual-grid-invariants.test.ts"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^7.0.0",

public/assets/0_battery.png

@@ -11,7 +11,13 @@ import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, cleanup, fireEvent, act } from "@testing-library/react";
 import { GameApp } from "../ui/react/GameApp";
 import { VirtualGrid } from "../grid/virtual-grid";
-import { USER_A } from "./helpers/fixtures";
+import { makeBot, makeCoin, USER_A } from "./helpers/fixtures";
+import {
+  ANGLE_DIRS,
+  COIN_COLLECT_TYPES,
+  MOVEMENT_VALUES,
+  MIN_COIN_ID,
+} from "../types";
 
 function fakeLiveUpdates() {
   return {
@@ -23,8 +29,7 @@ function fakeLiveUpdates() {
   };
 }
 
-function renderApp() {
-  const grid = new VirtualGrid(16, 16);
+function renderApp(grid = new VirtualGrid(16, 16)) {
   render(
     <GameApp
       grid={grid} myUserId={USER_A} liveUpdates={fakeLiveUpdates() as never}
@@ -33,6 +38,17 @@ function renderApp() {
   );
 }
 
+// A grid where the local bot has a predicted path (bot + target coin).
+function makePathGrid(): VirtualGrid {
+  const grid = new VirtualGrid(16, 16);
+  grid.add_bot(makeBot({
+    userId: USER_A, real_bottom_left: [2, 3], angle: ANGLE_DIRS.RIGHT,
+    movement_type: MOVEMENT_VALUES.MANHATTAN.value, targets: [COIN_COLLECT_TYPES.COIN],
+  }));
+  grid.add_coin(makeCoin({ id: MIN_COIN_ID, real_bottom_left: [8, 3] }));
+  return grid;
+}
+
 afterEach(() => {
   cleanup();
   document.body.innerHTML = "";
@@ -70,3 +86,30 @@ describe("GameApp layout", () => {
     expect(container().style.height).toBe("320px");
   });
 });
+
+describe("bot path toggle", () => {
+  it("renders a 'Show bot path' checkbox next to the gridlines one, on by default", () => {
+    renderApp();
+    const box = document.querySelector<HTMLInputElement>("#check_bot_paths")!;
+    expect(box).not.toBeNull();
+    expect(box.checked).toBe(true);
+    // Same control row as the gridlines checkbox.
+    expect(box.parentElement).toBe(
+      document.querySelector("#check_gridlines")!.parentElement,
+    );
+  });
+
+  it("hides and re-shows the path overlay via the checkbox", () => {
+    document.body.setAttribute("is-moving", "true");
+    renderApp(makePathGrid());
+
+    expect(document.querySelector("#botPath")).not.toBeNull();
+
+    const box = document.querySelector<HTMLInputElement>("#check_bot_paths")!;
+    fireEvent.click(box);
+    expect(document.querySelector("#botPath")).toBeNull();
+
+    fireEvent.click(box);
+    expect(document.querySelector("#botPath")).not.toBeNull();
+  });
+});

public/assets/100_battery.png

@@ -0,0 +1,153 @@
+// @vitest-environment jsdom
+//
+// The <BotBatteryPopup> cost layer: a floating movement-cost indicator that pops
+// over the local player's bot each movement tick to make the battery cost felt
+// in-place. Driven by the botBatteryCost bus event; local bot only (battery is
+// local/cosmetic and never synced). It draws the cost number (-2 / -1) alongside a
+// transparent battery-fill icon chosen from the bot's remaining charge (0..100).
+
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render, cleanup, act } from "@testing-library/react";
+import { GameBoard } from "../ui/react/GameBoard";
+import {
+  POPUP_DURATION_MS,
+  batteryImageLevel,
+  batteryImageFile,
+} from "../ui/react/BotBatteryPopup";
+import { gameEvents } from "../events";
+import { VirtualGrid } from "../grid/virtual-grid";
+import { makeBot, USER_A, USER_B } from "./helpers/fixtures";
+import { ANGLE_DIRS } from "../types";
+
+const CELL = 40;
+
+function makeBoardGrid(battery_pct = 100): VirtualGrid {
+  const grid = new VirtualGrid(16, 16);
+  grid.add_bot(makeBot({
+    userId: USER_A, real_bottom_left: [2, 3], angle: ANGLE_DIRS.RIGHT,
+    width: 1, height: 1, battery_pct,
+  }));
+  return grid;
+}
+
+function renderBoard(grid: VirtualGrid): HTMLElement {
+  render(
+    <GameBoard
+      grid={grid} myUserId={USER_A}
+      cellSize={CELL} rows={grid.rows} cols={grid.cols} theme="None"
+    />,
+  );
+  return document.querySelector<HTMLElement>("#gridContainer")!;
+}
+
+function emitCost(userId: string, amount: number): void {
+  act(() => gameEvents.emit("botBatteryCost", { userId, amount }));
+}
+
+function popups(container: HTMLElement): HTMLElement[] {
+  return Array.from(
+    container.querySelectorAll<HTMLElement>(".bot-battery-popup"),
+  );
+}
+
+function popupImg(container: HTMLElement): HTMLImageElement {
+  return container.querySelector<HTMLImageElement>(".bot-battery-popup img")!;
+}
+
+function popupAmount(container: HTMLElement): string {
+  return container.querySelector<HTMLElement>(".bot-battery-popup-amount")!
+    .textContent!;
+}
+
+afterEach(() => {
+  cleanup();
+  document.body.innerHTML = "";
+  document.body.removeAttribute("chosen-bot");
+});
+
+// ── Pure helpers ──────────────────────────────────────────────────────────────
+
+describe("batteryImageLevel (pure)", () => {
+  it("rounds remaining charge to the nearest 25 and clamps 0–100", () => {
+    expect(batteryImageLevel(100)).toBe(100);
+    expect(batteryImageLevel(90)).toBe(100);
+    expect(batteryImageLevel(87)).toBe(75);
+    expect(batteryImageLevel(63)).toBe(75);
+    expect(batteryImageLevel(62)).toBe(50);
+    expect(batteryImageLevel(50)).toBe(50);
+    expect(batteryImageLevel(12)).toBe(0);
+    expect(batteryImageLevel(0)).toBe(0);
+  });
+});
+
+describe("batteryImageFile (pure)", () => {
+  it("names the battery-icon sprite by rounded charge level", () => {
+    expect(batteryImageFile(100)).toBe("100_battery.png");
+    expect(batteryImageFile(50)).toBe("50_battery.png");
+    expect(batteryImageFile(10)).toBe("0_battery.png");
+  });
+});
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+describe("BotBatteryPopup", () => {
+  it("draws the '-2' full-step label + battery icon over the local bot", () => {
+    const container = renderBoard(makeBoardGrid(100));
+    emitCost(USER_A, 2);
+
+    const shown = popups(container);
+    expect(shown).toHaveLength(1);
+    expect(shown[0].getAttribute("data-battery-popup")).toBe(USER_A);
+    expect(popupAmount(container)).toBe("-2");
+    expect(popupImg(container).getAttribute("src")).toContain("100_battery.png");
+  });
+
+  it("draws the '-1' half-cost turn label", () => {
+    const container = renderBoard(makeBoardGrid(100));
+    emitCost(USER_A, 1);
+
+    expect(popups(container)).toHaveLength(1);
+    expect(popupAmount(container)).toBe("-1");
+  });
+
+  it("picks the battery icon from the bot's remaining charge", () => {
+    const medium = renderBoard(makeBoardGrid(50));
+    emitCost(USER_A, 2);
+    expect(popupImg(medium).getAttribute("src")).toContain("50_battery.png");
+    cleanup();
+    document.body.innerHTML = "";
+
+    const low = renderBoard(makeBoardGrid(10));
+    emitCost(USER_A, 2);
+    expect(popupImg(low).getAttribute("src")).toContain("0_battery.png");
+  });
+
+  it("ignores battery costs for any other bot (local bot only)", () => {
+    const grid = makeBoardGrid();
+    grid.add_bot(makeBot({ userId: USER_B, real_bottom_left: [8, 8], width: 1, height: 1 }));
+    const container = renderBoard(grid);
+
+    emitCost(USER_B, 2);
+    expect(popups(container)).toHaveLength(0);
+  });
+
+  it("never intercepts pointer events (board drag/edit unaffected)", () => {
+    const container = renderBoard(makeBoardGrid());
+    emitCost(USER_A, 2);
+    expect(popups(container)[0].style.pointerEvents).toBe("none");
+  });
+
+  it("removes each popup once its float animation has run its course", () => {
+    vi.useFakeTimers();
+    try {
+      const container = renderBoard(makeBoardGrid());
+      emitCost(USER_A, 2);
+      expect(popups(container)).toHaveLength(1);
+
+      act(() => vi.advanceTimersByTime(POPUP_DURATION_MS));
+      expect(popups(container)).toHaveLength(0);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

public/assets/25_battery.png

@@ -183,7 +183,11 @@ describe("single local loop", () => {
     expect(reward.claim_coin).toHaveBeenCalledWith(21);
   });
 
-  it("stops the loop when the battery is flat", () => {
+  it("freezes the bot but keeps the play UI when the battery is flat", () => {
+    // A dead battery must NOT bounce the player back to editing while the opponent
+    // is still playing: the loop halts (bot frozen) but the `is-moving` play state
+    // stays set, so the board/palette/edit-icons/start-stop button remain locked
+    // until the phase actually ends.
     const grid = new VirtualGrid(10, 10);
     grid.add_bot(makeBot({
       userId: USER, real_bottom_left: [3, 3], angle: ANGLE_DIRS.RIGHT,
@@ -194,8 +198,95 @@ describe("single local loop", () => {
 
     startMoving();
     expect(isMoving()).toBe(true);
-    vi.advanceTimersByTime(500); // first tick sees battery<=0 and stops
-    expect(isMoving()).toBe(false);
-    expect(grid.bots[USER].real_bottom_left).toEqual([3, 3]); // never moved
+    vi.advanceTimersByTime(500); // first tick sees battery<=0 and freezes
+
+    expect(grid.bots[USER].real_bottom_left).toEqual([3, 3]);     // never moved
+    expect(document.body.hasAttribute("is-moving")).toBe(true);   // UI stays frozen
+    expect(isMoving()).toBe(true);                                // still in play mode
+  });
+
+  it("charges a full battery step for a straight move and announces the cost", () => {
+    const grid = new VirtualGrid(10, 10);
+    grid.add_bot(makeBot({
+      userId: USER, real_bottom_left: [3, 3], angle: ANGLE_DIRS.RIGHT,
+      movement_type: MOVEMENT_VALUES.MANHATTAN.value, targets: [COIN_COLLECT_TYPES.COIN],
+      battery_pct: 100, width: 1, height: 1,
+    }));
+    grid.add_coin(makeCoin({ id: 21, real_bottom_left: [8, 3] })); // straight ahead → steps
+    initBotMovement(grid, USER, noReward());
+    const cap = captureEvent("botBatteryCost");
+
+    startLocalLoop();
+    vi.advanceTimersByTime(500);
+
+    expect(grid.bots[USER].real_bottom_left).toEqual([4, 3]); // stepped
+    expect(grid.bots[USER].battery_pct).toBe(98);             // full step cost (−2)
+    expect(cap.calls[cap.calls.length - 1]).toEqual({ userId: USER, amount: 2 });
+    cap.stop();
+  });
+
+  it("charges only half a battery step for a 90° turn and announces the reduced cost", () => {
+    const grid = new VirtualGrid(10, 10);
+    grid.add_bot(makeBot({
+      userId: USER, real_bottom_left: [3, 3], angle: ANGLE_DIRS.UP,
+      movement_type: MOVEMENT_VALUES.MANHATTAN.value, targets: [COIN_COLLECT_TYPES.COIN],
+      battery_pct: 100, width: 1, height: 1,
+    }));
+    grid.add_coin(makeCoin({ id: 21, real_bottom_left: [8, 3] })); // to the right → turns to face it first
+    initBotMovement(grid, USER, noReward());
+    const cap = captureEvent("botBatteryCost");
+
+    startLocalLoop();
+    vi.advanceTimersByTime(500);
+
+    expect(grid.bots[USER].real_bottom_left).toEqual([3, 3]); // rotated in place, no translation
+    expect(grid.bots[USER].battery_pct).toBe(99);            // half step cost (−1)
+    expect(cap.calls[cap.calls.length - 1]).toEqual({ userId: USER, amount: 1 });
+    cap.stop();
+  });
+
+  it("announces a flat battery once and halts the loop (no re-emit while frozen)", () => {
+    const grid = new VirtualGrid(10, 10);
+    grid.add_bot(makeBot({
+      userId: USER, real_bottom_left: [3, 3], angle: ANGLE_DIRS.RIGHT,
+      movement_type: MOVEMENT_VALUES.MANHATTAN.value, battery_pct: 0,
+    }));
+    initBotMovement(grid, USER, noReward());
+    const cap = captureEvent("localBatteryDepleted");
+
+    startMoving();
+    vi.advanceTimersByTime(2000); // several ticks worth of time
+
+    // The loop is truly stopped: the death is announced exactly once, not once per
+    // tick — and the play state is still frozen (not transitioned to editing).
+    expect(cap.calls.length).toBe(1);
+    expect(document.body.hasAttribute("is-moving")).toBe(true);
+    cap.stop();
+  });
+});
+
+describe("same-coin race — a coin claimed out from under the local bot", () => {
+  it("does not claim a coin removed before arrival and retargets to the next", () => {
+    // The opponent collects the nearer coin (its removal syncs in) while the local
+    // bot is still approaching. The bot must NOT phantom-claim the vanished coin;
+    // because targets are re-derived each tick it retargets and claims the next.
+    const grid = new VirtualGrid(10, 10);
+    grid.add_bot(makeBot({
+      userId: USER, real_bottom_left: [3, 3], angle: ANGLE_DIRS.RIGHT,
+      movement_type: MOVEMENT_VALUES.MANHATTAN.value, targets: [COIN_COLLECT_TYPES.COIN],
+      width: 1, height: 1,
+    }));
+    grid.add_coin(makeCoin({ id: 21, real_bottom_left: [5, 3] })); // nearer, ahead
+    grid.add_coin(makeCoin({ id: 22, real_bottom_left: [8, 3] })); // farther, ahead
+    const reward = noReward();
+    initBotMovement(grid, USER, reward);
+
+    startLocalLoop();
+    vi.advanceTimersByTime(500);              // tick 1: bot steps to [4,3]
+    grid.remove_coin(21);                     // opponent claims the near coin first
+    vi.advanceTimersByTime(5000);             // bot continues past [5,3] to [8,3]
+
+    expect(reward.claim_coin).toHaveBeenCalledWith(22);
+    expect(reward.claim_coin).not.toHaveBeenCalledWith(21);
   });
 });