fix(sts-like-viewer): correct y-coordinate comparison in

InventoryItemContainer Fix a bug where the y-coordinate of an item's offset was being compared against the target's x-coordinate instead of its y-coordinate.
feat(sts-like-viewer): batch inventory item movement
2026-04-21 19:07:04 +08:00 · 2026-04-21 16:50:48 +08:00 · 2026-04-21 16:48:45 +08:00 · 2026-04-21 16:39:10 +08:00 · 2026-04-21 09:51:10 +08:00 · 2026-04-21 00:16:50 +08:00
6 changed files with 278 additions and 200 deletions
--- a/packages/sts-like-viewer/src/gameobjects/InventoryItemContainer.ts
+++ b/packages/sts-like-viewer/src/gameobjects/InventoryItemContainer.ts
@ -11,44 +11,44 @@ import {
 } from "boardgame-core/samples/slay-the-spire-like";
 import { DisposableBag } from "../../../framework/dist";
 import { InventoryItemState } from "@/state/InventoryItemState";
-
-export interface InventoryItemContainerCallbacks {
-  onMoveItem: (
-    itemId: string,
-    newX: number,
-    newY: number,
-    newRotation: number,
-  ) => boolean;
-}
+import { moveItem } from "@/state/inventory";
+import {
+  InventorySurface,
+  InventorySurfaceState,
+  inventoryToScene,
+  sceneToInventory,
+} from "@/state/inventorySurfaceState";

 export class InventoryItemContainer extends Phaser.GameObjects.Container {
  private itemState: InventoryItemState;
+  private surfaceState: InventorySurfaceState;
+  private surfaces: Iterable<InventorySurface>;
  private hitArea: Point2D[] = [];

  constructor(
    scene: Phaser.Scene,
-    private gridOffsetX: number,
-    private gridOffsetY: number,
-    private callbacks: InventoryItemContainerCallbacks,
+    item: GameItem,
+    surface: InventorySurface,
+    surfaces: Iterable<InventorySurface>,
  ) {
-    super(scene, gridOffsetX, gridOffsetY);
+    super(scene, surface.gridOffsetX, surface.gridOffsetY);
    scene.add.existing(this);

+    const cellSize = surface.cellSize;
    const graphics = this.scene.add.graphics();
-    graphics.setPosition(
-      GRID_CONFIG.VIEWER_CELL_SIZE / 2,
-      GRID_CONFIG.VIEWER_CELL_SIZE / 2,
-    );
+    graphics.setPosition(cellSize / 2, cellSize / 2);
    const label = this.scene.add.text(
-      GRID_CONFIG.VIEWER_CELL_SIZE / 2,
-      GRID_CONFIG.VIEWER_CELL_SIZE / 2,
+      cellSize / 2,
+      cellSize / 2,
      "",
      GRID_CONFIG.ITEM_NAME_STYLE,
    );
    this.add([graphics, label]);
    this.setupInteractive();

-    this.itemState = new InventoryItemState();
+    this.itemState = new InventoryItemState(item);
+    this.surfaceState = new InventorySurfaceState(surface);
+    this.surfaces = surfaces;

    const disposables = new DisposableBag(this);

@ -60,9 +60,9 @@ export class InventoryItemContainer extends Phaser.GameObjects.Container {

    disposables.addEffect(() => {
      graphics.clear();
-      if (!this.itemState.shape.value) return;
      this.renderGraphics(
        graphics,
+        this.surfaceState.cellSize,
        this.itemState.shape.value,
        this.itemState.color.value,
      );
@ -79,13 +79,17 @@ export class InventoryItemContainer extends Phaser.GameObjects.Container {
    });

    disposables.addEffect(() => {
-      if (!this.itemState.transform.value) return;
      this.snapBack(this.itemState.transform.value);
      this.itemState.setPreviewRotation(0);
    });
  }

-  updateHitArea(value: number): Point2D[] {
+  setSurfaceItem(surface: InventorySurface, item: GameItem): void {
+    this.surfaceState.setSurface(surface);
+    this.itemState.setItem(item);
+  }
+
+  private updateHitArea(value: number): Point2D[] {
    const shape = this.itemState.shape.value;
    if (!shape) return [];

@ -96,7 +100,7 @@ export class InventoryItemContainer extends Phaser.GameObjects.Container {
      flipX: false,
      flipY: false,
    });
-    const cellSize = GRID_CONFIG.VIEWER_CELL_SIZE;
+    const cellSize = this.surfaceState.cellSize;

    return cells.map((cell) => ({
      x: (cell.x - cells[0].x) * cellSize,
@ -104,34 +108,30 @@ export class InventoryItemContainer extends Phaser.GameObjects.Container {
    }));
  }

-  setItem(item: GameItem): void {
-    this.itemState.setItem(item);
-  }
-
-  renderGraphics(
+  private renderGraphics(
    graphics: Phaser.GameObjects.Graphics,
+    cellSize: number,
    shape: ParsedShape,
    itemColor: number,
  ) {
    const cells = transformShape(shape, IDENTITY_TRANSFORM);

    for (const cell of cells) {
-      const localX = (cell.x - cells[0].x) * GRID_CONFIG.VIEWER_CELL_SIZE;
-      const localY = (cell.y - cells[0].y) * GRID_CONFIG.VIEWER_CELL_SIZE;
+      const localX = (cell.x - cells[0].x) * cellSize;
+      const localY = (cell.y - cells[0].y) * cellSize;

      graphics.fillStyle(itemColor);
      graphics.fillRect(
-        localX + 2 - GRID_CONFIG.VIEWER_CELL_SIZE / 2,
-        localY + 2 - GRID_CONFIG.VIEWER_CELL_SIZE / 2,
-        GRID_CONFIG.VIEWER_CELL_SIZE - 4,
-        GRID_CONFIG.VIEWER_CELL_SIZE - 4,
+        localX + 2 - cellSize / 2,
+        localY + 2 - cellSize / 2,
+        cellSize - 4,
+        cellSize - 4,
      );
    }
  }

  private setupInteractive() {
    this.setScrollFactor(0);
-    const cellSize = GRID_CONFIG.VIEWER_CELL_SIZE;
    this.setInteractive({
      hitArea: this,
      hitAreaCallback: (
@ -142,9 +142,9 @@ export class InventoryItemContainer extends Phaser.GameObjects.Container {
        hitArea.hitArea.some(
          (cell) =>
            x >= cell.x &&
-            x < cell.x + cellSize &&
+            x < cell.x + this.surfaceState.cellSize &&
            y >= cell.y &&
-            y < cell.y + cellSize,
+            y < cell.y + this.surfaceState.cellSize,
        ),
      useHandCursor: true,
    } as Phaser.Types.Input.InputConfiguration);
@ -164,60 +164,68 @@ export class InventoryItemContainer extends Phaser.GameObjects.Container {
      } else if (event.type === DragDropEventType.ALTBUTTON) {
        this.itemState.addPreviewRotation(90);
      } else if (event.type === DragDropEventType.UP) {
-        this.setAlpha(1);
        const finalRotation = this.itemState.previewRotation.peek();
-        if (!this.handleDragEnd(finalRotation)) {
-          this.itemState.setPreviewRotation(0);
+        const finalX = this.x;
+        const finalY = this.y;
+        if (!this.handleDragEnd(finalX, finalY, finalRotation)) {
          const t = this.itemState.transform.peek();
          t && this.snapBack(t);
-        } else {
-          this.itemState.setPreviewRotation(0);
        }
+        this.setAlpha(1);
+        this.itemState.setPreviewRotation(0);
        startX = startY = 0;
      }
    });
  }

-  private handleDragEnd(finalRotation: number): boolean {
+  private handleDragEnd(
+    finalX: number,
+    finalY: number,
+    finalRotation: number,
+  ): boolean {
    const item = this.itemState.item;
    if (!item) return false;

-    const cellSize = GRID_CONFIG.VIEWER_CELL_SIZE;
-    const shapeWidth = item.shape?.width ?? 1;
-    const shapeHeight = item.shape?.height ?? 1;
-
-    const x = this.x - this.gridOffsetX;
-    const y = this.y - this.gridOffsetY;
-    const targetX = Math.round(x / cellSize);
-    const targetY = Math.round(y / cellSize);
-
-    const clampedX = Math.max(0, Math.min(targetX, 10 - shapeWidth));
-    const clampedY = Math.max(0, Math.min(targetY, 10 - shapeHeight));
+    const target = this.findDropSurface(finalX, finalY);
+    if (!target) return false;

    if (
-      clampedX !== item.transform.offset.x ||
-      clampedY !== item.transform.offset.y ||
-      finalRotation !== 0
-    ) {
-      return this.callbacks.onMoveItem(
+      this.surfaceState.surface === target.surface &&
+      item.transform.offset.x === target.x &&
+      item.transform.offset.y === target.y &&
+      item.transform.rotation === finalRotation
+    )
+      return false;
+
+    return moveItem(
+      this.surfaceState.invSignal,
+      target.surface.invSignal,
      item.id,
-        clampedX,
-        clampedY,
+      target.x,
+      target.y,
      finalRotation,
    );
  }
-    return false;
+
+  private findDropSurface(x: number, y: number) {
+    for (const surface of this.surfaces) {
+      const target = sceneToInventory(surface, x, y);
+      if (target)
+        return {
+          surface,
+          ...target,
+        };
+    }
+    return null;
  }

  private snapBack(transform: Transform2D): void {
    const { x, y } = transform.offset;
-    const targetX = this.gridOffsetX + x * GRID_CONFIG.VIEWER_CELL_SIZE;
-    const targetY = this.gridOffsetY + y * GRID_CONFIG.VIEWER_CELL_SIZE;
+    const target = inventoryToScene(this.surfaceState, x, y);

    this.scene.tweens.add({
      targets: this,
-      x: targetX,
-      y: targetY,
+      ...target,
      duration: 150,
      ease: "Power2",
    });
--- a/packages/sts-like-viewer/src/gameobjects/InventoryItemSpawner.ts
+++ b/packages/sts-like-viewer/src/gameobjects/InventoryItemSpawner.ts
@ -1,64 +1,53 @@
 import Phaser from "phaser";
 import type { Spawner } from "boardgame-phaser";
-import type {
-  GameItemMeta,
-  InventoryItem,
-} from "boardgame-core/samples/slay-the-spire-like";
-import type { InventorySignal } from "@/state/inventory";
+import type { GameItem } from "boardgame-core/samples/slay-the-spire-like";
 import { spawnEffect } from "boardgame-phaser";
 import { InventoryItemContainer } from "./InventoryItemContainer";
-import type { InventoryItemContainerCallbacks } from "./InventoryItemContainer";
-
-export interface InventoryItemSpawnerCallbacks extends InventoryItemContainerCallbacks {}
+import { InventorySurface } from "@/state/inventorySurfaceState";

 export class InventoryItemSpawner implements Spawner<
-  [string, InventoryItem<GameItemMeta>],
+  [InventorySurface, GameItem],
  InventoryItemContainer
 > {
  constructor(
    private scene: Phaser.Scene,
-    private inventorySignal: InventorySignal,
-    private gridOffsetX: number,
-    private gridOffsetY: number,
-    private callbacks: InventoryItemSpawnerCallbacks,
+    private surfaces: Iterable<InventorySurface>,
  ) {}

-  *getData(): Iterable<[string, InventoryItem<GameItemMeta>]> {
-    const inventory = this.inventorySignal.value;
-    yield* inventory.items.entries();
+  *getData(): Iterable<[InventorySurface, GameItem]> {
+    for (const surface of this.surfaces) {
+      const inv = surface.invSignal.value;
+      for (const item of inv.items.values()) {
+        yield [surface, item];
+      }
+    }
  }

-  getKey(entry: [string, InventoryItem<GameItemMeta>]): string {
-    return entry[0];
+  getKey(entry: [InventorySurface, GameItem]): string {
+    return entry[1].id;
  }

-  onSpawn(
-    entry: [string, InventoryItem<GameItemMeta>],
-  ): InventoryItemContainer | null {
-    const [itemId, item] = entry;
+  onSpawn(entry: [InventorySurface, GameItem]): InventoryItemContainer | null {
+    const [surface, item] = entry;

    const container = new InventoryItemContainer(
      this.scene,
-      this.gridOffsetX,
-      this.gridOffsetY,
-      {
-        onMoveItem: (id, newX, newY, newRotation) => {
-          return this.callbacks.onMoveItem(id, newX, newY, newRotation);
-        },
-      },
+      item,
+      surface,
+      this.surfaces,
    );

-    container.setItem(item);
+    container.setSurfaceItem(surface, item);
    return container;
  }

  onUpdate(
-    entry: [string, InventoryItem<GameItemMeta>],
+    entry: [InventorySurface, GameItem],
    container: InventoryItemContainer,
  ): void {
-    const [itemId, item] = entry;
+    const [surface, item] = entry;

-    container.setItem(item);
+    container.setSurfaceItem(surface, item);
  }

  onDespawn(container: InventoryItemContainer): void {
@ -69,18 +58,7 @@ export class InventoryItemSpawner implements Spawner<

 export function createInventoryItemSpawner(
  scene: Phaser.Scene,
-  inventorySignal: InventorySignal,
-  gridOffsetX: number,
-  gridOffsetY: number,
-  callbacks: InventoryItemSpawnerCallbacks,
+  surfaces: Iterable<InventorySurface>,
 ) {
-  return spawnEffect(
-    new InventoryItemSpawner(
-      scene,
-      inventorySignal,
-      gridOffsetX,
-      gridOffsetY,
-      callbacks,
-    ),
-  );
+  return spawnEffect(new InventoryItemSpawner(scene, surfaces));
 }
--- a/packages/sts-like-viewer/src/scenes/InventoryTestScene.ts
+++ b/packages/sts-like-viewer/src/scenes/InventoryTestScene.ts
@ -1,15 +1,20 @@
 import { ReactiveScene } from "boardgame-phaser";
 import { createButton } from "@/utils/createButton";
 import { GRID_CONFIG } from "@/config";
-import { createInventorySignal, moveItem } from "@/state/inventory";
+import { createInventorySignal, type InventorySignal } from "@/state/inventory";
 import { createItemIn, data } from "boardgame-core/samples/slay-the-spire-like";
 import { createInventoryItemSpawner } from "@/gameobjects/InventoryItemSpawner";
 import { SceneKey } from "./types";
+import { InventorySurface } from "@/state/inventorySurfaceState";

 export class InventoryTestScene extends ReactiveScene {
-  private inventorySignal = createInventorySignal();
-  private gridOffsetX = 0;
-  private gridOffsetY = 0;
+  private readonly _surfaces: InventorySurface[] = [];
+  private _leftInv!: InventorySignal;
+  private _rightInv!: InventorySignal;
+  private _leftGridOffsetX = 0;
+  private _leftGridOffsetY = 0;
+  private _rightGridOffsetX = 0;
+  private _rightGridOffsetY = 0;

  constructor() {
    super("InventoryTestScene");
@ -19,22 +24,62 @@ export class InventoryTestScene extends ReactiveScene {
    super.create();

    const { width, height } = this.scale;
-    const inventory = this.inventorySignal.value;
-    const invWidth = inventory.width;
-    const invHeight = inventory.height;

-    this.gridOffsetX = (width - invWidth * GRID_CONFIG.VIEWER_CELL_SIZE) / 2;
-    this.gridOffsetY =
-      (height - invHeight * GRID_CONFIG.VIEWER_CELL_SIZE) / 2 + 40;
+    this._leftInv = createInventorySignal();
+    this._rightInv = createInventorySignal();

-    this.drawGrid(invWidth, invHeight);
+    const invWidth = 4;
+    const invHeight = 6;
+    const cellSize = GRID_CONFIG.VIEWER_CELL_SIZE;
+    const gap = 80;
+
+    this._leftGridOffsetX =
+      (width / 2 - gap / 2) / 2 - (invWidth * cellSize) / 2;
+    this._leftGridOffsetY = (height - invHeight * cellSize) / 2 + 40;
+
+    this._rightGridOffsetX =
+      width / 2 +
+      gap / 2 +
+      (width / 2 - gap / 2) / 2 -
+      (invWidth * cellSize) / 2;
+    this._rightGridOffsetY = (height - invHeight * cellSize) / 2 + 40;
+
+    this._surfaces.push(
+      {
+        invSignal: this._leftInv,
+        gridOffsetX: this._leftGridOffsetX,
+        gridOffsetY: this._leftGridOffsetY,
+        cellSize,
+      },
+      {
+        invSignal: this._rightInv,
+        gridOffsetX: this._rightGridOffsetX,
+        gridOffsetY: this._rightGridOffsetY,
+        cellSize,
+      },
+    );
+
+    this.drawGrid(
+      this._leftInv,
+      invWidth,
+      invHeight,
+      this._leftGridOffsetX,
+      this._leftGridOffsetY,
+    );
+    this.drawGrid(
+      this._rightInv,
+      invWidth,
+      invHeight,
+      this._rightGridOffsetX,
+      this._rightGridOffsetY,
+    );
    this.setupItemSpawner();

    this.add
      .text(
        width / 2,
        30,
-        "Inventory Signal Test (4x6)",
+        "Inventory Signal Test (4x6 x2)",
        GRID_CONFIG.TITLE_STYLE,
      )
      .setOrigin(0.5);
@ -45,24 +90,28 @@ export class InventoryTestScene extends ReactiveScene {
      .text(
        width / 2,
        height - 40,
-        "Drag items to move them",
+        "Drag items between inventories",
        GRID_CONFIG.SUBTITLE_STYLE,
      )
      .setOrigin(0.5);
  }

-  private drawGrid(invWidth: number, invHeight: number): void {
+  private drawGrid(
+    inv: InventorySignal,
+    invWidth: number,
+    invHeight: number,
+    offsetX: number,
+    offsetY: number,
+  ): void {
    const graphics = this.add.graphics();

    this.addEffect(() => {
      for (let y = 0; y < invHeight; y++) {
        for (let x = 0; x < invWidth; x++) {
-          const px = this.gridOffsetX + x * GRID_CONFIG.VIEWER_CELL_SIZE;
-          const py = this.gridOffsetY + y * GRID_CONFIG.VIEWER_CELL_SIZE;
+          const px = offsetX + x * GRID_CONFIG.VIEWER_CELL_SIZE;
+          const py = offsetY + y * GRID_CONFIG.VIEWER_CELL_SIZE;

-          const isOccupied = this.inventorySignal.value.occupiedCells.has(
-            `${x},${y}`,
-          );
+          const isOccupied = inv.value.occupiedCells.has(`${x},${y}`);
          graphics.fillStyle(
            isOccupied
              ? GRID_CONFIG.CELL_OCCUPIED_COLOR
@ -87,28 +136,7 @@ export class InventoryTestScene extends ReactiveScene {
  }

  private setupItemSpawner(): void {
-    const spawner = createInventoryItemSpawner(
-      this,
-      this.inventorySignal,
-      this.gridOffsetX,
-      this.gridOffsetY,
-      {
-        onMoveItem: (
-          itemId: string,
-          newX: number,
-          newY: number,
-          newRotation: number,
-        ) => {
-          return moveItem(
-            this.inventorySignal,
-            itemId,
-            newX,
-            newY,
-            newRotation,
-          );
-        },
-      },
-    );
+    const spawner = createInventoryItemSpawner(this, this._surfaces);
    this.disposables.add(spawner);
  }

@ -127,29 +155,29 @@ export class InventoryTestScene extends ReactiveScene {

    createButton({
      scene: this,
-      label: "添加道具",
-      x: width - 300,
+      label: "添加道具(左)",
+      x: width - 350,
      y: 40,
      onClick: () => {
-        this.addRandomItem();
+        this.addRandomItem(this._leftInv);
      },
    });

    createButton({
      scene: this,
-      label: "移除最后一个",
-      x: width - 150,
+      label: "添加道具(右)",
+      x: width - 180,
      y: 40,
      onClick: () => {
-        this.removeLastItem();
+        this.addRandomItem(this._rightInv);
      },
    });
  }

-  private addRandomItem(): void {
+  private addRandomItem(inv: InventorySignal): void {
    const items = data.desert.getItems();

-    this.inventorySignal.produce((inventory) => {
+    inv.produce((inventory) => {
      const usedIndices = new Set<number>();

      for (const item of inventory.items.values()) {
@ -173,17 +201,4 @@ export class InventoryTestScene extends ReactiveScene {
      createItemIn(inventory, id, itemData);
    });
  }
-
-  private removeLastItem(): void {
-    this.inventorySignal.produce((inventory) => {
-      const items = Array.from(inventory.items.entries());
-
-      if (items.length === 0) {
-        return;
-      }
-
-      const [lastId] = items[items.length - 1];
-      inventory.items.delete(lastId);
-    });
-  }
 }
--- a/packages/sts-like-viewer/src/state/InventoryItemState.ts
+++ b/packages/sts-like-viewer/src/state/InventoryItemState.ts
@ -7,37 +7,37 @@ import {
 } from "boardgame-core/samples/slay-the-spire-like";

 export class InventoryItemState {
-  private readonly _item: Signal<GameItem | undefined>;
+  private readonly _item: Signal<GameItem>;
  private readonly _previewRotation: Signal<number>;

  readonly name: ReadonlySignal<string>;
-  readonly shape: ReadonlySignal<ParsedShape | undefined>;
+  readonly shape: ReadonlySignal<ParsedShape>;
  readonly color: ReadonlySignal<number>;
-  readonly transform: ReadonlySignal<Transform2D | undefined>;
+  readonly transform: ReadonlySignal<Transform2D>;
  readonly previewRotation: ReadonlySignal<number>;

-  constructor(initialItem?: GameItem) {
+  constructor(initialItem: GameItem) {
    this._item = signal(initialItem);
    this._previewRotation = signal(0);

    this.name = computed(() => {
      const item = this._item.value;
-      return item?.meta?.itemData.name ?? item?.id ?? "";
+      return item.meta?.itemData.name ?? item?.id ?? "";
    });

-    this.shape = computed(() => this._item.value?.shape);
+    this.shape = computed(() => this._item.value.shape);

-    this.color = computed(() => this.computeColor(this._item.value?.id ?? ""));
+    this.color = computed(() => this.computeColor(this._item.value.id ?? ""));

-    this.transform = computed(() => this._item.value?.transform);
+    this.transform = computed(() => this._item.value.transform);

    this.previewRotation = computed(() => {
-      const base = this._item.value?.transform?.rotation ?? 0;
+      const base = this._item.value.transform.rotation ?? 0;
      return (base + this._previewRotation.value) % 360;
    });
  }

-  get item(): GameItem | undefined {
+  get item(): GameItem {
    return this._item.value;
  }

--- a/packages/sts-like-viewer/src/state/inventory.ts
+++ b/packages/sts-like-viewer/src/state/inventory.ts
@ -10,6 +10,7 @@ import {
  Transform2D,
  validatePlacement,
 } from "boardgame-core/samples/slay-the-spire-like";
+import { batch } from "@preact/signals-core";

 function genId() {
  return Math.random().toString(16).slice(-8);
@ -17,13 +18,15 @@ function genId() {

 export type InventorySignal = ReturnType<typeof createInventorySignal>;

-export function createInventorySignal() {
+export function createInventorySignal(giveStart = false) {
  const inventory = createGridInventory<GameItemMeta>(4, 6);

+  if (giveStart) {
    const startingItems = data.desert.getStartingItems();
    for (const d of startingItems) {
      createItemIn(inventory, `${d.id}-${genId()}`, d);
    }
+  }

  return mutableSignal(inventory);
 }
@ -33,13 +36,14 @@ export function createInventorySignal() {
 * Returns true if the move was successful, false if the new position is invalid.
 */
 export function moveItem(
-  inventorySignal: InventorySignal,
+  from: InventorySignal,
+  to: InventorySignal,
  itemId: string,
  newX: number,
  newY: number,
  newRotation?: number,
 ): boolean {
-  const inventory = inventorySignal.value;
+  const inventory = from.value;
  const item = inventory.items.get(itemId);

  if (!item) {
@ -53,17 +57,22 @@ export function moveItem(
    flipY: false,
  };

-  const removed = create(inventory, (inv) => {
+  const removed = create(to.value, (inv) => {
    removeItemFromGrid(inv, itemId);
  });
  const validation = validatePlacement(removed, item.shape, newTransform);
  if (!validation.valid) return false;

-  inventorySignal.produce((inv) => {
-    const item = inv.items.get(itemId)!;
+  batch(() => {
+    from.produce((inv) => {
      removeItemFromGrid(inv, itemId);
-    item.transform = newTransform;
-    placeItem(inv, item);
+    });
+    to.produce((inv) => {
+      placeItem(inv, {
+        ...item,
+        transform: newTransform,
+      });
+    });
  });

  return true;
--- a/packages/sts-like-viewer/src/state/inventorySurfaceState.ts
+++ b/packages/sts-like-viewer/src/state/inventorySurfaceState.ts
@ -0,0 +1,68 @@
+import { InventorySignal } from "./inventory";
+import { MutableSignal, mutableSignal } from "boardgame-core";
+
+export type InventorySurface = {
+  invSignal: InventorySignal;
+  gridOffsetX: number;
+  gridOffsetY: number;
+  cellSize: number;
+};
+
+export class InventorySurfaceState {
+  private readonly _signal: MutableSignal<InventorySurface>;
+
+  constructor(init: InventorySurface) {
+    this._signal = mutableSignal(init);
+  }
+
+  public get surface() {
+    return this._signal.value;
+  }
+
+  public get invSignal() {
+    return this._signal.value.invSignal;
+  }
+
+  public get gridOffsetX() {
+    return this._signal.value.gridOffsetX;
+  }
+
+  public get gridOffsetY() {
+    return this._signal.value.gridOffsetY;
+  }
+
+  public get cellSize() {
+    return this._signal.value.cellSize;
+  }
+
+  public setSurface(surface: InventorySurface) {
+    this._signal.value = surface;
+  }
+}
+
+export function sceneToInventory(
+  surface: InventorySurface | InventorySurfaceState,
+  x: number,
+  y: number,
+): { x: number; y: number } | null {
+  const invX = Math.round((x - surface.gridOffsetX) / surface.cellSize);
+  const invY = Math.round((y - surface.gridOffsetY) / surface.cellSize);
+
+  const { width, height } = surface.invSignal.peek();
+  if (invX < 0 || invY < 0 || invX >= width || invY >= height) {
+    return null;
+  }
+
+  return { x: invX, y: invY };
+}
+
+export function inventoryToScene(
+  surface: InventorySurface | InventorySurfaceState,
+  x: number,
+  y: number,
+): { x: number; y: number } {
+  return {
+    x: x * surface.cellSize + surface.gridOffsetX,
+    y: y * surface.cellSize + surface.gridOffsetY,
+  };
+}
Author	SHA1	Message	Date
hypercross	89343c1954	fix(sts-like-viewer): correct y-coordinate comparison in InventoryItemContainer Fix a bug where the y-coordinate of an item's offset was being compared against the target's x-coordinate instead of its y-coordinate.	2026-04-21 19:07:04 +08:00
hypercross	a92b889dfa	feat(sts-like-viewer): batch inventory item movement Wrap item removal and placement in a batch to prevent multiple reactive updates when moving items between inventories.	2026-04-21 16:50:48 +08:00
hypercross	c97c2c4150	feat(sts-viewer): support multiple inventory surfaces Refactor `InventoryTestScene` to support multiple inventory signals simultaneously. This introduces `InventorySurface` to manage positioning and signal mapping for multiple grids, allowing for testing item movement between different inventory areas.	2026-04-21 16:48:45 +08:00
hypercross	422ddde200	refactor: support multiple inventory surfaces Introduce `InventorySurface` to allow items to be moved between different inventory grids. - Update `InventoryItemContainer` to use surface-specific cell sizes and coordinate transformations. - Update `InventoryItemSpawner` to handle multiple surfaces. - Refactor `moveItem` to support transferring items from one `InventorySignal` to another. - Add `InventorySurfaceState` to manage surface-specific metadata. - Remove reliance on global `GRID_CONFIG` in favor of surface data.	2026-04-21 16:39:10 +08:00
hypercross	093eadbefd	refactor: encapsulate InventoryItemContainer internals Make `updateHitArea` and `renderGraphics` private to prevent external access to internal rendering logic. Move the preview rotation reset to ensure it always executes after a drag operation.	2026-04-21 09:51:10 +08:00
hypercross	eff62bc0ed	fix(sts-like-viewer): fix item movement detection and removal - Update `InventoryItemContainer` to correctly detect rotation changes - Use `removeItemFromGrid` in `InventoryTestScene` for item removal	2026-04-21 00:16:50 +08:00