hypercross/boardgame-phaser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: move InventoryItemSpawner and update grid drawing

Browse Source 
- Move `InventoryItemSpawner` to `@/gameobjects`
- Wrap grid drawing in `addEffect` in `InventoryTestScene` to ensure
  reactivity
- Fix return type in `onMoveItem` callback
This commit is contained in:
hypercross
2026-04-20 18:44:50 +08:00
parent 7039938a72
commit f03e6c5a7b
4 changed files with 289 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/sts-like-viewer/src/scenes/InventoryItemSpawner.ts
-270
View File
@@ -1,270 +0,0 @@
import Phaser from "phaser";
import {
spawnEffect,
dragDropEventEffect,
DragDropEventType,
type Spawner,
} from "boardgame-phaser";
import { GRID_CONFIG, ITEM_COLORS } from "@/config";
import type {
GameItemMeta,
InventoryItem,
} from "boardgame-core/samples/slay-the-spire-like";
import type { InventorySignal } from "@/state/inventory";
export interface InventoryItemSpawnerCallbacks {
onMoveItem: (itemId: string, newX: number, newY: number) => void;
}
export class InventoryItemSpawner implements Spawner<
[string, InventoryItem<GameItemMeta>],
Phaser.GameObjects.Container
> {
private dragState: {
itemId: string;
startX: number;
startY: number;
container: Phaser.GameObjects.Container;
} | null = null;
constructor(
private scene: Phaser.Scene,
private inventorySignal: InventorySignal,
private gridOffsetX: number,
private gridOffsetY: number,
private callbacks: InventoryItemSpawnerCallbacks,
) {}
*getData(): Iterable<[string, InventoryItem<GameItemMeta>]> {
const inventory = this.inventorySignal.value;
yield* inventory.items.entries();
}
getKey(entry: [string, InventoryItem<GameItemMeta>]): string {
return entry[0];
}
private getCells(
item: InventoryItem<GameItemMeta>,
): { x: number; y: number }[] {
const cells: { x: number; y: number }[] = [];
const shape = item.shape;
const transform = item.transform;
for (let y = 0; y < shape.height; y++) {
for (let x = 0; x < shape.width; x++) {
if (shape.grid[y]?.[x]) {
const finalX = x + transform.offset.x;
const finalY = y + transform.offset.y;
cells.push({ x: finalX, y: finalY });
}
}
}
return cells;
}
private getItemColor(itemId: string): number {
const hash = itemId.split("").reduce((acc, c) => acc + c.charCodeAt(0), 0);
return ITEM_COLORS[hash % ITEM_COLORS.length];
}
onSpawn(
entry: [string, InventoryItem<GameItemMeta>],
): Phaser.GameObjects.Container | null {
const [itemId, item] = entry;
const container = this.scene.add.container(0, 0);
const cells = this.getCells(item);
const itemColor = this.getItemColor(itemId);
const graphics = this.scene.add.graphics();
// Draw graphics in container-local coordinates (container is at firstCell position)
for (const cell of cells) {
// Local coordinates relative to container position
const localX = (cell.x - cells[0].x) * GRID_CONFIG.VIEWER_CELL_SIZE;
const localY = (cell.y - cells[0].y) * GRID_CONFIG.VIEWER_CELL_SIZE;
graphics.fillStyle(itemColor);
graphics.fillRect(
localX + 2,
localY + 2,
GRID_CONFIG.VIEWER_CELL_SIZE - 4,
GRID_CONFIG.VIEWER_CELL_SIZE - 4,
);
}
if (cells.length > 0) {
const itemName = item.meta?.itemData.name ?? itemId;
// Text is centered in the first cell, relative to container
const textX = GRID_CONFIG.VIEWER_CELL_SIZE / 2;
const textY = GRID_CONFIG.VIEWER_CELL_SIZE / 2;
const text = this.scene.add.text(
textX,
textY,
itemName,
GRID_CONFIG.ITEM_NAME_STYLE,
);
text.setOrigin(0.5);
container.add([graphics, text]);
// Position container at the first cell's world position
const worldX =
this.gridOffsetX + cells[0].x * GRID_CONFIG.VIEWER_CELL_SIZE;
const worldY =
this.gridOffsetY + cells[0].y * GRID_CONFIG.VIEWER_CELL_SIZE;
container.setPosition(worldX, worldY);
} else {
container.add(graphics);
}
// Make container interactive for drag-and-drop
container.setInteractive(
new Phaser.Geom.Rectangle(
0,
0,
GRID_CONFIG.VIEWER_CELL_SIZE,
GRID_CONFIG.VIEWER_CELL_SIZE,
),
Phaser.Geom.Rectangle.Contains,
);
container.setScrollFactor(0);
container.setSize(
GRID_CONFIG.VIEWER_CELL_SIZE * (item.shape?.width ?? 1),
GRID_CONFIG.VIEWER_CELL_SIZE * (item.shape?.height ?? 1),
);
// Setup drag handling
dragDropEventEffect(container, (event) => {
if (event.type === DragDropEventType.DOWN) {
// Start drag
this.dragState = {
itemId,
startX: container.x,
startY: container.y,
container,
};
container.setAlpha(0.7);
} else if (event.type === DragDropEventType.MOVE) {
// Update drag position
if (this.dragState?.itemId === itemId) {
container.x = this.dragState.startX + event.deltaX;
container.y = this.dragState.startY + event.deltaY;
}
} else if (event.type === DragDropEventType.UP) {
// End drag
if (this.dragState?.itemId === itemId) {
container.setAlpha(1);
this.handleDragEnd(itemId, container);
this.dragState = null;
}
}
});
return container;
}
private handleDragEnd(
itemId: string,
container: Phaser.GameObjects.Container,
): void {
const inventory = this.inventorySignal.value;
const item = inventory.items.get(itemId);
if (!item) return;
const cellSize = GRID_CONFIG.VIEWER_CELL_SIZE;
const shapeWidth = item.shape?.width ?? 1;
const shapeHeight = item.shape?.height ?? 1;
// Calculate target grid position based on container center
const targetX = Math.round((container.x - cellSize / 2) / cellSize);
const targetY = Math.round((container.y - cellSize / 2) / cellSize);
// Clamp to inventory bounds
const clampedX = Math.max(
0,
Math.min(targetX, inventory.width - shapeWidth),
);
const clampedY = Math.max(
0,
Math.min(targetY, inventory.height - shapeHeight),
);
// If position changed, notify callback
if (
clampedX !== item.transform.offset.x ||
clampedY !== item.transform.offset.y
) {
this.callbacks.onMoveItem(itemId, clampedX, clampedY);
} else {
// Snap back to original position
const originalX = this.gridOffsetX + item.transform.offset.x * cellSize;
const originalY = this.gridOffsetY + item.transform.offset.y * cellSize;
this.scene.tweens.add({
targets: container,
x: originalX,
y: originalY,
duration: 150,
ease: "Power2",
});
}
}
onUpdate(
entry: [string, InventoryItem<GameItemMeta>],
obj: Phaser.GameObjects.Container,
): void {
const [, item] = entry;
const cells = this.getCells(item);
if (cells.length > 0) {
// Don't animate if currently dragging this item
if (this.dragState?.itemId !== entry[0]) {
const worldX =
this.gridOffsetX + cells[0].x * GRID_CONFIG.VIEWER_CELL_SIZE;
const worldY =
this.gridOffsetY + cells[0].y * GRID_CONFIG.VIEWER_CELL_SIZE;
this.scene.tweens.add({
targets: obj,
x: worldX,
y: worldY,
duration: 200,
ease: "Power2",
});
}
}
}
onDespawn(obj: Phaser.GameObjects.Container): void {
this.scene.tweens.add({
targets: obj,
alpha: 0,
scale: 0.5,
duration: 200,
ease: "Back.easeIn",
onComplete: () => obj.destroy(),
});
}
}
export function createInventoryItemSpawner(
scene: Phaser.Scene,
inventorySignal: InventorySignal,
gridOffsetX: number,
gridOffsetY: number,
callbacks: InventoryItemSpawnerCallbacks,
) {
return spawnEffect(
new InventoryItemSpawner(
scene,
inventorySignal,
gridOffsetX,
gridOffsetY,
callbacks,
),
);
}
packages/sts-like-viewer/src/scenes/InventoryTestScene.ts
+30 -28
View File
@@ -3,7 +3,7 @@ import { createButton } from "@/utils/createButton";
import { GRID_CONFIG } from "@/config";
import { createInventorySignal, moveItem } from "@/state/inventory";
import { createItemIn, data } from "boardgame-core/samples/slay-the-spire-like";
import { createInventoryItemSpawner } from "./InventoryItemSpawner";
import { createInventoryItemSpawner } from "@/gameobjects/InventoryItemSpawner";
import { SceneKey } from "./types";
export class InventoryTestScene extends ReactiveScene {
@@ -54,34 +54,36 @@ export class InventoryTestScene extends ReactiveScene {
private drawGrid(invWidth: number, invHeight: number): void {
const graphics = this.add.graphics();
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;
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 isOccupied = this.inventorySignal.value.occupiedCells.has(
`${x},${y}`,
);
graphics.fillStyle(
isOccupied
? GRID_CONFIG.CELL_OCCUPIED_COLOR
: GRID_CONFIG.CELL_EMPTY_COLOR,
);
graphics.fillRect(
px + 1,
py + 1,
GRID_CONFIG.VIEWER_CELL_SIZE - 2,
GRID_CONFIG.VIEWER_CELL_SIZE - 2,
);
graphics.lineStyle(1, GRID_CONFIG.GRID_LINE_COLOR);
graphics.strokeRect(
px,
py,
GRID_CONFIG.VIEWER_CELL_SIZE,
GRID_CONFIG.VIEWER_CELL_SIZE,
);
const isOccupied = this.inventorySignal.value.occupiedCells.has(
`${x},${y}`,
);
graphics.fillStyle(
isOccupied
? GRID_CONFIG.CELL_OCCUPIED_COLOR
: GRID_CONFIG.CELL_EMPTY_COLOR,
);
graphics.fillRect(
px + 1,
py + 1,
GRID_CONFIG.VIEWER_CELL_SIZE - 2,
GRID_CONFIG.VIEWER_CELL_SIZE - 2,
);
graphics.lineStyle(1, GRID_CONFIG.GRID_LINE_COLOR);
graphics.strokeRect(
px,
py,
GRID_CONFIG.VIEWER_CELL_SIZE,
GRID_CONFIG.VIEWER_CELL_SIZE,
);
}
}
}
});
}
private setupItemSpawner(): void {
@@ -92,7 +94,7 @@ export class InventoryTestScene extends ReactiveScene {
this.gridOffsetY,
{
onMoveItem: (itemId: string, newX: number, newY: number) => {
moveItem(this.inventorySignal, itemId, newX, newY);
return moveItem(this.inventorySignal, itemId, newX, newY);
},
},
);