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.

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";
-
+import { moveItem } from "@/state/inventory";
-export interface InventoryItemContainerCallbacks {
+import {
-  onMoveItem: (
+  InventorySurface,
-    itemId: string,
+  InventorySurfaceState,
-    newX: number,
+  inventoryToScene,
-    newY: number,
+  sceneToInventory,
-    newRotation: number,
+} from "@/state/inventorySurfaceState";
-  ) => boolean;
-}
 
 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,
+    item: GameItem,
-    private gridOffsetY: number,
+    surface: InventorySurface,
-    private callbacks: InventoryItemContainerCallbacks,
+    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(
+    graphics.setPosition(cellSize / 2, cellSize / 2);
-      GRID_CONFIG.VIEWER_CELL_SIZE / 2,
-      GRID_CONFIG.VIEWER_CELL_SIZE / 2,
-    );
     const label = this.scene.add.text(
-      GRID_CONFIG.VIEWER_CELL_SIZE / 2,
+      cellSize / 2,
-      GRID_CONFIG.VIEWER_CELL_SIZE / 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 {
+  private renderGraphics(
-    this.itemState.setItem(item);
-  }
-
-  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 localX = (cell.x - cells[0].x) * cellSize;
-      const localY = (cell.y - cells[0].y) * GRID_CONFIG.VIEWER_CELL_SIZE;
+      const localY = (cell.y - cells[0].y) * cellSize;
 
       graphics.fillStyle(itemColor);
       graphics.fillRect(
-        localX + 2 - GRID_CONFIG.VIEWER_CELL_SIZE / 2,
+        localX + 2 - cellSize / 2,
-        localY + 2 - GRID_CONFIG.VIEWER_CELL_SIZE / 2,
+        localY + 2 - cellSize / 2,
-        GRID_CONFIG.VIEWER_CELL_SIZE - 4,
+        cellSize - 4,
-        GRID_CONFIG.VIEWER_CELL_SIZE - 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)) {
+        const finalX = this.x;
-          this.itemState.setPreviewRotation(0);
+        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 target = this.findDropSurface(finalX, finalY);
-    const shapeWidth = item.shape?.width ?? 1;
+    if (!target) return false;
-    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));
 
     if (
-      clampedX !== item.transform.offset.x ||
+      this.surfaceState.surface === target.surface &&
-      clampedY !== item.transform.offset.y ||
+      item.transform.offset.x === target.x &&
-      finalRotation !== 0
+      item.transform.offset.y === target.y &&
-    ) {
+      item.transform.rotation === finalRotation
-      return this.callbacks.onMoveItem(
+    )
-        item.id,
+      return false;
-        clampedX,
+
-        clampedY,
+    return moveItem(
-        finalRotation,
+      this.surfaceState.invSignal,
-      );
+      target.surface.invSignal,
+      item.id,
+      target.x,
+      target.y,
+      finalRotation,
+    );
+  }
+
+  private findDropSurface(x: number, y: number) {
+    for (const surface of this.surfaces) {
+      const target = sceneToInventory(surface, x, y);
+      if (target)
+        return {
+          surface,
+          ...target,
+        };
     }
-    return false;
+    return null;
   }
 
   private snapBack(transform: Transform2D): void {
     const { x, y } = transform.offset;
-    const targetX = this.gridOffsetX + x * GRID_CONFIG.VIEWER_CELL_SIZE;
+    const target = inventoryToScene(this.surfaceState, x, y);
-    const targetY = this.gridOffsetY + y * GRID_CONFIG.VIEWER_CELL_SIZE;
 
     this.scene.tweens.add({
       targets: this,
-      x: targetX,
+      ...target,
-      y: targetY,
       duration: 150,
       ease: "Power2",
     });

packages/sts-like-viewer/src/gameobjects/InventoryItemSpawner.ts

@@ -1,64 +1,53 @@
 import Phaser from "phaser";
 import type { Spawner } from "boardgame-phaser";
-import type {
+import type { GameItem } from "boardgame-core/samples/slay-the-spire-like";
-  GameItemMeta,
-  InventoryItem,
-} from "boardgame-core/samples/slay-the-spire-like";
-import type { InventorySignal } from "@/state/inventory";
 import { spawnEffect } from "boardgame-phaser";
 import { InventoryItemContainer } from "./InventoryItemContainer";
-import type { InventoryItemContainerCallbacks } from "./InventoryItemContainer";
+import { InventorySurface } from "@/state/inventorySurfaceState";
-
-export interface InventoryItemSpawnerCallbacks extends InventoryItemContainerCallbacks {}
 
 export class InventoryItemSpawner implements Spawner<
-  [string, InventoryItem<GameItemMeta>],
+  [InventorySurface, GameItem],
   InventoryItemContainer
 > {
   constructor(
     private scene: Phaser.Scene,
-    private inventorySignal: InventorySignal,
+    private surfaces: Iterable<InventorySurface>,
-    private gridOffsetX: number,
-    private gridOffsetY: number,
-    private callbacks: InventoryItemSpawnerCallbacks,
   ) {}
 
-  *getData(): Iterable<[string, InventoryItem<GameItemMeta>]> {
+  *getData(): Iterable<[InventorySurface, GameItem]> {
-    const inventory = this.inventorySignal.value;
+    for (const surface of this.surfaces) {
-    yield* inventory.items.entries();
+      const inv = surface.invSignal.value;
+      for (const item of inv.items.values()) {
+        yield [surface, item];
+      }
+    }
   }
 
-  getKey(entry: [string, InventoryItem<GameItemMeta>]): string {
+  getKey(entry: [InventorySurface, GameItem]): string {
-    return entry[0];
+    return entry[1].id;
   }
 
-  onSpawn(
+  onSpawn(entry: [InventorySurface, GameItem]): InventoryItemContainer | null {
-    entry: [string, InventoryItem<GameItemMeta>],
+    const [surface, item] = entry;
-  ): InventoryItemContainer | null {
-    const [itemId, item] = entry;
 
     const container = new InventoryItemContainer(
       this.scene,
-      this.gridOffsetX,
+      item,
-      this.gridOffsetY,
+      surface,
-      {
+      this.surfaces,
-        onMoveItem: (id, newX, newY, newRotation) => {
-          return this.callbacks.onMoveItem(id, newX, newY, newRotation);
-        },
-      },
     );
 
-    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,
+  surfaces: Iterable<InventorySurface>,
-  gridOffsetX: number,
-  gridOffsetY: number,
-  callbacks: InventoryItemSpawnerCallbacks,
 ) {
-  return spawnEffect(
+  return spawnEffect(new InventoryItemSpawner(scene, surfaces));
-    new InventoryItemSpawner(
-      scene,
-      inventorySignal,
-      gridOffsetX,
-      gridOffsetY,
-      callbacks,
-    ),
-  );
 }

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 readonly _surfaces: InventorySurface[] = [];
-  private gridOffsetX = 0;
+  private _leftInv!: InventorySignal;
-  private gridOffsetY = 0;
+  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._leftInv = createInventorySignal();
-    this.gridOffsetY =
+    this._rightInv = createInventorySignal();
-      (height - invHeight * GRID_CONFIG.VIEWER_CELL_SIZE) / 2 + 40;
 
-    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 px = offsetX + x * GRID_CONFIG.VIEWER_CELL_SIZE;
-          const py = this.gridOffsetY + y * GRID_CONFIG.VIEWER_CELL_SIZE;
+          const py = offsetY + y * GRID_CONFIG.VIEWER_CELL_SIZE;
 
-          const isOccupied = this.inventorySignal.value.occupiedCells.has(
+          const isOccupied = inv.value.occupiedCells.has(`${x},${y}`);
-            `${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(
+    const spawner = createInventoryItemSpawner(this, this._surfaces);
-      this,
-      this.inventorySignal,
-      this.gridOffsetX,
-      this.gridOffsetY,
-      {
-        onMoveItem: (
-          itemId: string,
-          newX: number,
-          newY: number,
-          newRotation: number,
-        ) => {
-          return moveItem(
-            this.inventorySignal,
-            itemId,
-            newX,
-            newY,
-            newRotation,
-          );
-        },
-      },
-    );
     this.disposables.add(spawner);
   }
 
@@ -127,29 +155,29 @@ export class InventoryTestScene extends ReactiveScene {
 
     createButton({
       scene: this,
-      label: "添加道具",
+      label: "添加道具(左)",
-      x: width - 300,
+      x: width - 350,
       y: 40,
       onClick: () => {
-        this.addRandomItem();
+        this.addRandomItem(this._leftInv);
       },
     });
 
     createButton({
       scene: this,
-      label: "移除最后一个",
+      label: "添加道具(右)",
-      x: width - 150,
+      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);
-    });
-  }
 }

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;
   }
 

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,12 +18,14 @@ function genId() {
 
 export type InventorySignal = ReturnType<typeof createInventorySignal>;
 
-export function createInventorySignal() {
+export function createInventorySignal(giveStart = false) {
   const inventory = createGridInventory<GameItemMeta>(4, 6);
 
-  const startingItems = data.desert.getStartingItems();
+  if (giveStart) {
-  for (const d of startingItems) {
+    const startingItems = data.desert.getStartingItems();
-    createItemIn(inventory, `${d.id}-${genId()}`, d);
+    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) => {
+  batch(() => {
-    const item = inv.items.get(itemId)!;
+    from.produce((inv) => {
-    removeItemFromGrid(inv, itemId);
+      removeItemFromGrid(inv, itemId);
-    item.transform = newTransform;
+    });
-    placeItem(inv, item);
+    to.produce((inv) => {
+      placeItem(inv, {
+        ...item,
+        transform: newTransform,
+      });
+    });
   });
 
   return true;

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,
+  };
+}