From d01dd8a4fc99d60a6371fc6c548b9dc7a90c9e72 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Wed, 7 Jan 2026 16:57:54 +1100
Subject: [PATCH] Update look of quickslots

---
 src/ui/components/QuickSlotComponent.ts | 79 +++++++++++++++----------
 1 file changed, 47 insertions(+), 32 deletions(-)

diff --git a/src/ui/components/QuickSlotComponent.ts b/src/ui/components/QuickSlotComponent.ts
index fc8bb81..b3285b7 100644
--- a/src/ui/components/QuickSlotComponent.ts
+++ b/src/ui/components/QuickSlotComponent.ts
@@ -14,32 +14,39 @@ export class QuickSlotComponent {
 
   create() {
     const { width, height } = this.scene.scale;
-    // Position bottom center-ish
-    this.container = this.scene.add.container(width / 2 - 100, height - 50);
+    const slotSize = 48;
+    const slotSpacing = 4;
+    const totalWidth = (slotSize + slotSpacing) * 4 - slotSpacing;
+    
+    // Position bottom center
+    this.container = this.scene.add.container(width / 2 - totalWidth / 2, height - slotSize - 20);
     this.container.setScrollFactor(0).setDepth(1500);
 
     for (let i = 0; i < 4; i++) {
-        const x = i * 50;
+        const x = i * (slotSize + slotSpacing);
         const g = this.scene.add.graphics();
         
-        // Slot bg
-        g.fillStyle(0x1a1a1a, 0.8);
-        g.fillRect(0, 0, 40, 40);
-        g.lineStyle(1, 0x555555);
-        g.strokeRect(0, 0, 40, 40);
+        // Draw slot background (dark purple/brown)
+        g.fillStyle(0x2a1f3d, 0.95);
+        g.fillRect(0, 0, slotSize, slotSize);
+        
+        // Draw gold border (default state)
+        g.lineStyle(2, 0xD4AF37, 1);
+        g.strokeRect(0, 0, slotSize, slotSize);
 
-        // Hotkey label
-        const key = this.scene.add.text(2, 2, `${i + 1}`, {
-            fontSize: "10px",
-            color: "#aaaaaa"
-        });
+        // Hotkey label (bottom-left, gold color)
+        const key = this.scene.add.text(3, slotSize - 3, `${i + 1}`, {
+            fontSize: "12px",
+            color: "#D4AF37",
+            fontStyle: "bold"
+        }).setOrigin(0, 1);
 
         const slotContainer = this.scene.add.container(x, 0, [g, key]);
         this.slots.push(slotContainer);
         this.container.add(slotContainer);
 
         // Input
-        const hitArea = new Phaser.Geom.Rectangle(0, 0, 40, 40);
+        const hitArea = new Phaser.Geom.Rectangle(0, 0, slotSize, slotSize);
         slotContainer.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains);
         slotContainer.on("pointerdown", () => {
             this.activateSlot(i);
@@ -56,6 +63,8 @@ export class QuickSlotComponent {
   update(player: CombatantActor, activeItemId?: string | null) {
       if (!player.inventory) return;
 
+      const slotSize = 48;
+
       // Update slots based on inventory availability
       for (let i = 0; i < 4; i++) {
           const desiredId = this.assignedIds[i];
@@ -75,39 +84,45 @@ export class QuickSlotComponent {
 
               // Redraw background based on active state
               bgGraphics.clear();
-              bgGraphics.fillStyle(0x1a1a1a, 0.8);
-              bgGraphics.fillRect(0, 0, 40, 40);
               
+              // Dark background
+              bgGraphics.fillStyle(0x2a1f3d, 0.95);
+              bgGraphics.fillRect(0, 0, slotSize, slotSize);
+              
+              // Border - subtle cyan for active, gold for normal
               if (isActive) {
-                  bgGraphics.lineStyle(2, 0xffff00); // Gold highlight
+                  bgGraphics.lineStyle(2, 0x00E5FF, 1); // Cyan highlight
               } else {
-                  bgGraphics.lineStyle(1, 0x555555); // Default gray
+                  bgGraphics.lineStyle(2, 0xD4AF37, 1); // Gold border
               }
-              bgGraphics.strokeRect(0, 0, 40, 40);
+              bgGraphics.strokeRect(0, 0, slotSize, slotSize);
 
               if (foundItem) {
                 const texture = foundItem.textureKey ?? "items";
-                const sprite = this.scene.add.sprite(20, 20, texture, foundItem.spriteIndex);
-                // PD items are 16x16, slot is 40x40. Scale it up?
-                sprite.setScale(2); 
+                const sprite = this.scene.add.sprite(slotSize / 2, slotSize / 2, texture, foundItem.spriteIndex);
+                // PD items are 16x16, slot is 48x48. Scale up slightly
+                sprite.setScale(2.5); 
                 slot.add(sprite);
 
-                // Add count if stackable (future)
+                // Add count in bottom-right corner (white with x prefix)
                 const count = player.inventory.items.filter(it => it.id === desiredId).length;
-                const countText = this.scene.add.text(38, 38, `${count}`, {
-                    fontSize: "10px",
-                    color: "#ffffff"
-                }).setOrigin(1, 1);
-                slot.add(countText);
+                if (count > 1) {
+                    const countText = this.scene.add.text(slotSize - 3, slotSize - 3, `x${count}`, {
+                        fontSize: "11px",
+                        color: "#ffffff",
+                        fontStyle: "bold"
+                    }).setOrigin(1, 1);
+                    slot.add(countText);
+                }
               }
           } 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);
+              bgGraphics.fillStyle(0x2a1f3d, 0.95);
+              bgGraphics.fillRect(0, 0, slotSize, slotSize);
+              bgGraphics.lineStyle(2, 0xD4AF37, 1);
+              bgGraphics.strokeRect(0, 0, slotSize, slotSize);
           }
       }
   }