Highlight active item slot and activate when shortcut key is pressed

This commit is contained in:
Peter Stockings
2026-01-06 22:33:51 +11:00
parent 309ab19e8c
commit 505f62ac97
6 changed files with 275 additions and 23 deletions

View File

@@ -53,13 +53,14 @@ export class QuickSlotComponent {
this.scene.input.keyboard?.on("keydown-FOUR", () => this.activateSlot(3));
}
update(player: CombatantActor) {
update(player: CombatantActor, activeItemId?: string | null) {
if (!player.inventory) return;
// Update slots based on inventory availability
for (let i = 0; i < 4; i++) {
const desiredId = this.assignedIds[i];
const slot = this.slots[i];
const bgGraphics = slot.list[0] as Phaser.GameObjects.Graphics;
// Clear previous item icon if any (children > 2, since 0=bg, 1=text)
if (slot.list.length > 2) {
@@ -70,6 +71,20 @@ export class QuickSlotComponent {
const foundItem = player.inventory.items.find(it => it.id === desiredId);
this.itemMap[i] = foundItem || null;
const isActive = foundItem && foundItem.id === activeItemId;
// Redraw background based on active state
bgGraphics.clear();
bgGraphics.fillStyle(0x1a1a1a, 0.8);
bgGraphics.fillRect(0, 0, 40, 40);
if (isActive) {
bgGraphics.lineStyle(2, 0xffff00); // Gold highlight
} else {
bgGraphics.lineStyle(1, 0x555555); // Default gray
}
bgGraphics.strokeRect(0, 0, 40, 40);
if (foundItem) {
const texture = foundItem.textureKey ?? "items";
const sprite = this.scene.add.sprite(20, 20, texture, foundItem.spriteIndex);
@@ -87,6 +102,12 @@ export class QuickSlotComponent {
}
} else {
this.itemMap[i] = null;
// Reset bg
bgGraphics.clear();
bgGraphics.fillStyle(0x1a1a1a, 0.8);
bgGraphics.fillRect(0, 0, 40, 40);
bgGraphics.lineStyle(1, 0x555555);
bgGraphics.strokeRect(0, 0, 40, 40);
}
}
}