peterstockings/rogue
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: when applying or cancelling upgrade clear border effect on items

Browse Source
This commit is contained in:
Peter Stockings
2026-01-27 18:03:11 +11:00
parent cdedf47e0d
commit 2493d37c7a
2 changed files with 48 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/scenes/GameScene.ts
View File

@@ -291,6 +291,8 @@ export class GameScene extends Phaser.Scene {
} else {
// Should technically be prevented by UI highlights, but safety check
this.dungeonRenderer.showFloatingText(player.pos.x, player.pos.y, "Cannot upgrade!", "#ff0000");
inventoryOverlay.cancelUpgradeMode();
this.emitUIUpdate();
}
});

118
src/ui/components/InventoryOverlay.ts
View File

@@ -22,6 +22,13 @@ export class InventoryOverlay extends OverlayComponent {
// Upgrade Mode
public isUpgradeMode = false;
private onUpgradeSelect?: (item: any) => void;
public setVisible(visible: boolean) {
if (!visible && this.isUpgradeMode) {
this.cancelUpgradeMode();
}
super.setVisible(visible);
}
private tooltip: Phaser.GameObjects.Container | null = null;
private tooltipName: Phaser.GameObjects.Text | null = null;
@@ -61,8 +68,8 @@ export class InventoryOverlay extends OverlayComponent {
const overEquip = this.getEquipmentSlotAt(pointer.x, pointer.y) !== null;
if (!overBackpack && !overEquip) {
console.log("Clicked outside - cancelling (DEBUG: DISABLED to fix interaction)");
// this.cancelUpgradeMode();
console.log("Clicked outside - cancelling");
this.cancelUpgradeMode();
}
}
});
@@ -213,23 +220,10 @@ export class InventoryOverlay extends OverlayComponent {
}
private createEquipmentSlots(centerX: number, centerY: number) {
const slotBorder = 0xd4af37;
const slotBg = 0x3a2a2a;
const createSlot = (x: number, y: number, size: number, key: string) => {
const g = this.scene.add.graphics();
// Outer golden border
g.lineStyle(2, slotBorder, 1);
g.strokeRect(-size / 2, -size / 2, size, size);
// Inner darker border
g.lineStyle(1, 0x8b7355, 1);
g.strokeRect(-size / 2 + 2, -size / 2 + 2, size - 4, size - 4);
// Background
g.fillStyle(slotBg, 1);
g.fillRect(-size / 2 + 3, -size / 2 + 3, size - 6, size - 6);
this.drawBaseSlot(g, size, false);
const container = this.scene.add.container(x, y, [g]);
this.equipmentSlots.set(key, container);
@@ -299,18 +293,7 @@ export class InventoryOverlay extends OverlayComponent {
const y = startY + r * (slotSize + spacing) + slotSize / 2;
const g = this.scene.add.graphics();
// Golden border
g.lineStyle(2, 0xd4af37, 1);
g.strokeRect(-slotSize / 2, -slotSize / 2, slotSize, slotSize);
// Inner border
g.lineStyle(1, 0x8b7355, 1);
g.strokeRect(-slotSize / 2 + 2, -slotSize / 2 + 2, slotSize - 4, slotSize - 4);
// Background
g.fillStyle(0x1a0f1a, 1);
g.fillRect(-slotSize / 2 + 3, -slotSize / 2 + 3, slotSize - 6, slotSize - 6);
this.drawBaseSlot(g, slotSize, true);
const container = this.scene.add.container(x, y, [g]);
this.container.add(container);
@@ -448,21 +431,8 @@ export class InventoryOverlay extends OverlayComponent {
const compatible = isItemCompatibleWithSlot(item, key);
if (compatible) {
const graphics = container.list[0] as Phaser.GameObjects.Graphics;
if (graphics) {
graphics.clear();
const size = getEquipmentSlotSize(key);
// Glowing border
graphics.lineStyle(4, 0xffd700, 1);
graphics.strokeRect(-size / 2, -size / 2, size, size);
graphics.lineStyle(1, 0x8b7355, 1);
graphics.strokeRect(-size / 2 + 2, -size / 2 + 2, size - 4, size - 4);
graphics.fillStyle(0x4a3a3a, 1);
graphics.fillRect(-size / 2 + 3, -size / 2 + 3, size - 6, size - 6);
}
const size = getEquipmentSlotSize(key);
this.drawSlotHighlight(container, size);
}
});
}
@@ -472,21 +442,11 @@ export class InventoryOverlay extends OverlayComponent {
this.equipmentSlots.forEach((container, key) => {
const graphics = container.list[0] as Phaser.GameObjects.Graphics;
if (graphics) {
graphics.clear();
const slotBorder = 0xd4af37;
const slotBg = 0x3a2a2a;
const size = getEquipmentSlotSize(key);
graphics.lineStyle(2, slotBorder, 1);
graphics.strokeRect(-size / 2, -size / 2, size, size);
this.drawBaseSlot(graphics, size, false);
graphics.lineStyle(1, 0x8b7355, 1);
graphics.strokeRect(-size / 2 + 2, -size / 2 + 2, size - 4, size - 4);
graphics.fillStyle(slotBg, 1);
graphics.fillRect(-size / 2 + 3, -size / 2 + 3, size - 6, size - 6);
// Allow interactions again if they were disabled (though we don't disable them currently)
// Allow interactions again and reset alpha
graphics.setAlpha(1);
container.setAlpha(1);
}
});
@@ -495,19 +455,10 @@ export class InventoryOverlay extends OverlayComponent {
this.backpackSlots.forEach(container => {
const graphics = container.list[0] as Phaser.GameObjects.Graphics;
if (graphics) {
graphics.clear();
const slotSize = INVENTORY_CONSTANTS.BACKPACK_SLOT_SIZE;
const { SLOT_BORDER, SLOT_INNER_BORDER, BACKPACK_BG } = INVENTORY_CONSTANTS.COLORS;
graphics.lineStyle(2, SLOT_BORDER, 1);
graphics.strokeRect(-slotSize / 2, -slotSize / 2, slotSize, slotSize);
graphics.lineStyle(1, SLOT_INNER_BORDER, 1);
graphics.strokeRect(-slotSize / 2 + 2, -slotSize / 2 + 2, slotSize - 4, slotSize - 4);
graphics.fillStyle(BACKPACK_BG, 1);
graphics.fillRect(-slotSize / 2 + 3, -slotSize / 2 + 3, slotSize - 6, slotSize - 6);
this.drawBaseSlot(graphics, slotSize, true);
graphics.setAlpha(1);
container.setAlpha(1);
}
});
@@ -559,19 +510,42 @@ export class InventoryOverlay extends OverlayComponent {
private drawSlotHighlight(slot: Phaser.GameObjects.Container, size: number) {
const g = slot.list[0] as Phaser.GameObjects.Graphics;
if (g) {
g.clear();
// Highlight border
g.lineStyle(2, 0x00ff00, 1);
// Draw base first (preserves gold border logic)
const isBackpack = this.backpackSlots.includes(slot);
this.drawBaseSlot(g, size, isBackpack);
// Add green highlight on top
const { UPGRADE_HIGHLIGHT, UPGRADE_INNER, UPGRADE_BG } = INVENTORY_CONSTANTS.COLORS;
g.lineStyle(2, UPGRADE_HIGHLIGHT, 1);
g.strokeRect(-size / 2, -size / 2, size, size);
g.lineStyle(1, 0x00aa00, 1);
g.lineStyle(1, UPGRADE_INNER, 1);
g.strokeRect(-size / 2 + 2, -size / 2 + 2, size - 4, size - 4);
g.fillStyle(0x1a2f1a, 1);
g.fillStyle(UPGRADE_BG, 1);
g.fillRect(-size / 2 + 3, -size / 2 + 3, size - 6, size - 6);
}
}
private drawBaseSlot(g: Phaser.GameObjects.Graphics, size: number, isBackpack: boolean) {
g.clear();
const { SLOT_BORDER, SLOT_INNER_BORDER, SLOT_BG, BACKPACK_BG } = INVENTORY_CONSTANTS.COLORS;
const border = SLOT_BORDER;
const inner = SLOT_INNER_BORDER;
const bg = isBackpack ? BACKPACK_BG : SLOT_BG;
g.lineStyle(2, border, 1);
g.strokeRect(-size / 2, -size / 2, size, size);
g.lineStyle(1, inner, 1);
g.strokeRect(-size / 2 + 2, -size / 2 + 2, size - 4, size - 4);
g.fillStyle(bg, 1);
g.fillRect(-size / 2 + 3, -size / 2 + 3, size - 6, size - 6);
}
private drawSlotDim(slot: Phaser.GameObjects.Container) {
const g = slot.list[0] as Phaser.GameObjects.Graphics;
if (g) {