feat: add tooltip for equipment stats

src/ui/components/InventoryOverlay.ts

@@ -8,6 +8,10 @@ export class InventoryOverlay extends OverlayComponent {
   private dragIcon: Phaser.GameObjects.Sprite | null = null;
   private draggedItemIndex: number | null = null;
   private draggedEquipmentKey: string | null = null;
+  private tooltip: Phaser.GameObjects.Container | null = null;
+  private tooltipName: Phaser.GameObjects.Text | null = null;
+  private tooltipStats: Phaser.GameObjects.Text | null = null;
+  private tooltipBg: Phaser.GameObjects.Graphics | null = null;
 
   protected setupContent() {
     // Base overlay is 700x500, so we need to fit within those bounds
@@ -29,6 +33,93 @@ export class InventoryOverlay extends OverlayComponent {
     // Create two distinct panels
     this.createEquipmentPanel();
     this.createBackpackPanel();
+    this.createTooltip();
+  }
+
+  private createTooltip() {
+    this.tooltip = this.scene.add.container(0, 0);
+    this.tooltip.setDepth(3000).setVisible(false);
+    
+    this.tooltipBg = this.scene.add.graphics();
+    this.tooltip.add(this.tooltipBg);
+
+    this.tooltipName = this.scene.add.text(10, 8, "", {
+      fontSize: "16px",
+      color: "#ffd700",
+      fontStyle: "bold",
+      fontFamily: "serif"
+    });
+    this.tooltip.add(this.tooltipName);
+
+    this.tooltipStats = this.scene.add.text(10, 30, "", {
+      fontSize: "13px",
+      color: "#ffffff",
+      lineSpacing: 4
+    });
+    this.tooltip.add(this.tooltipStats);
+
+    this.container.add(this.tooltip);
+  }
+
+  private showTooltip(item: any, x: number, y: number) {
+    if (!this.tooltip || !this.tooltipName || !this.tooltipStats || !this.tooltipBg) return;
+    if (this.dragIcon && this.dragIcon.visible) return;
+
+    this.tooltipName.setText(item.name.toUpperCase());
+    
+    let statsText = "";
+    if (item.stats) {
+        const stats = item.stats;
+        const lines: string[] = [];
+        
+        if (stats.attack) lines.push(`Attack: +${stats.attack}`);
+        if (stats.defense) lines.push(`Defense: +${stats.defense}`);
+        if (stats.maxHp) lines.push(`HP: +${stats.maxHp}`);
+        if (stats.maxMana) lines.push(`Mana: +${stats.maxMana}`);
+        if (stats.critChance) lines.push(`Crit Chance: +${stats.critChance}%`);
+        if (stats.accuracy) lines.push(`Accuracy: +${stats.accuracy}%`);
+        if (stats.evasion) lines.push(`Evasion: +${stats.evasion}%`);
+        if (stats.blockChance) lines.push(`Block Chance: +${stats.blockChance}%`);
+        if (stats.range) lines.push(`Range: ${stats.range}`);
+        
+        statsText = lines.join("\n");
+    }
+    
+    if (item.type === "Consumable" && item.stats?.hp) {
+        statsText = `Heals ${item.stats.hp} HP`;
+    }
+
+    this.tooltipStats.setText(statsText);
+
+    // Resize background
+    const nameWidth = this.tooltipName.width;
+    const statsWidth = this.tooltipStats.width;
+    const width = Math.max(nameWidth, statsWidth, 120) + 20;
+    const height = 38 + this.tooltipStats.height + (statsText ? 5 : -15);
+
+    this.tooltipBg.clear();
+    this.tooltipBg.fillStyle(0x1a0f1a, 0.95);
+    this.tooltipBg.lineStyle(1, 0xd4af37, 1);
+    this.tooltipBg.fillRoundedRect(0, 0, width, height, 4);
+    this.tooltipBg.strokeRoundedRect(0, 0, width, height, 4);
+
+    // Position relative to mouse
+    // localX = x - this.container.x
+    const localX = x - this.container.x + 15;
+    const localY = y - this.container.y + 15;
+    
+    // Boundary check
+    let finalX = localX;
+    let finalY = localY;
+    if (finalX + width > 340) finalX = localX - width - 30;
+    if (finalY + height > 240) finalY = localY - height - 30;
+
+    this.tooltip.setPosition(finalX, finalY);
+    this.tooltip.setVisible(true);
+  }
+
+  private hideTooltip() {
+    if (this.tooltip) this.tooltip.setVisible(false);
   }
 
   private drawOrnateBorder(w: number, h: number) {
@@ -276,6 +367,14 @@ export class InventoryOverlay extends OverlayComponent {
       slot.on("pointerdown", () => {
         console.log("Clicked item:", item);
       });
+
+      slot.on("pointerover", (pointer: Phaser.Input.Pointer) => {
+        this.showTooltip(item, pointer.x, pointer.y);
+      });
+
+      slot.on("pointerout", () => {
+        this.hideTooltip();
+      });
     });
 
     // Populate equipment slots
@@ -294,6 +393,14 @@ export class InventoryOverlay extends OverlayComponent {
         slot.setInteractive(new Phaser.Geom.Rectangle(-size/2, -size/2, size, size), Phaser.Geom.Rectangle.Contains);
         slot.setData("equipmentKey", key);
         this.scene.input.setDraggable(slot);
+
+        slot.on("pointerover", (pointer: Phaser.Input.Pointer) => {
+            this.showTooltip(item, pointer.x, pointer.y);
+        });
+
+        slot.on("pointerout", () => {
+            this.hideTooltip();
+        });
       });
     }
 
@@ -389,6 +496,7 @@ export class InventoryOverlay extends OverlayComponent {
             this.dragIcon.setVisible(true);
         }
         this.dragIcon.setPosition(pointer.x, pointer.y);
+        this.hideTooltip();
 
         if (item.type !== "Consumable" && item.type !== "Currency" && item.type !== "Ammo") {
             this.highlightCompatibleSlots(item);