Added pregress bar for reloading

src/ui/components/QuickSlotComponent.ts

@@ -1,6 +1,7 @@
 import Phaser from "phaser";
 import type { CombatantActor, Item } from "../../core/types";
 import { ItemSpriteFactory } from "../../rendering/ItemSpriteFactory";
+import { GAME_CONFIG } from "../../core/config/GameConfig";
 
 export class QuickSlotComponent {
     private scene: Phaser.Scene;
@@ -10,6 +11,7 @@ export class QuickSlotComponent {
     private assignedIds: string[] = ["health_potion", "pistol", "throwing_dagger", ...new Array(7).fill("")];
     private draggedSlotIndex: number | null = null;
     private dragIcon: Phaser.GameObjects.Sprite | null = null;
+    private reloadSliderContainer!: Phaser.GameObjects.Container;
 
     constructor(scene: Phaser.Scene) {
         this.scene = scene;
@@ -181,6 +183,13 @@ export class QuickSlotComponent {
         this.scene.input.keyboard?.on("keydown-EIGHT", () => this.activateSlot(7));
         this.scene.input.keyboard?.on("keydown-NINE", () => this.activateSlot(8));
         this.scene.input.keyboard?.on("keydown-ZERO", () => this.activateSlot(9));
+
+        // Global Slider Container
+        this.reloadSliderContainer = this.scene.add.container(
+            totalWidth / 2,
+            -40
+        );
+        this.container.add(this.reloadSliderContainer);
     }
 
     update(player: CombatantActor, activeItemId?: string | null) {
@@ -251,16 +260,13 @@ export class QuickSlotComponent {
                         slot.add(display);
                     }
 
-                    // Reloading overlay
+                    // Reloading overlay logic removed from individual slots -> Replacing with active lock symbol
                     if (foundItem.type === "Weapon" && foundItem.weaponType === "ranged" && foundItem.reloadingTurnsLeft > 0) {
-                        const reloadText = this.scene.add.text(slotSize / 2, slotSize / 2, "RELOADING", {
-                            fontSize: "8px",
-                            color: "#ff0000",
-                            fontStyle: "bold",
-                            backgroundColor: "#000000aa",
-                            padding: { x: 2, y: 1 }
-                        }).setOrigin(0.5, 0.5);
-                        slot.add(reloadText);
+                        // Transparent grey overlay
+                        const overlay = this.scene.add.graphics();
+                        overlay.fillStyle(0x000000, 0.5);
+                        overlay.fillRect(0, 0, slotSize, slotSize);
+                        slot.add(overlay);
                     }
                 }
             } else {
@@ -273,6 +279,120 @@ export class QuickSlotComponent {
                 bgGraphics.strokeRect(0, 0, slotSize, slotSize);
             }
         }
+
+        // -----------------------------------------------------------------------
+        // Global Reload Slider Logic
+        // -----------------------------------------------------------------------
+        this.reloadSliderContainer.removeAll(true);
+
+        // Find ANY reloading item in the inventory (that needs the UI)
+        // Usually the active one, or just the first one found since turn-based RL doesn't do parallel reloading much
+        const reloadingItem = player.inventory.items.find(
+            it => it.type === "Weapon" && it.weaponType === "ranged" && it.reloadingTurnsLeft > 0
+        ) as any; // Cast for easier access to RangedWeaponItem props
+
+        if (reloadingItem) {
+            const maxTurns = GAME_CONFIG.player.reloadDuration;
+            const progress = 1 - (reloadingItem.reloadingTurnsLeft / maxTurns);
+
+            const sliderWidth = 260; // Half of ~520px
+            const sliderHeight = 14;
+            const grooveColor = 0x1a1a1a;
+            const trackColor = 0x4a4a4a; // Stone Grey
+            const handleColor = 0x888888; // Lighter Stone
+
+            // 1. Draw Track Base (Stone Slab)
+            const g = this.scene.add.graphics();
+
+            // Stone Border / Bevel
+            g.lineStyle(4, 0x666666); // Light edge (Top/Left)
+            g.beginPath();
+            g.moveTo(-sliderWidth / 2, sliderHeight / 2);
+            g.lineTo(-sliderWidth / 2, -sliderHeight / 2);
+            g.lineTo(sliderWidth / 2, -sliderHeight / 2);
+            g.strokePath();
+
+            g.lineStyle(4, 0x222222); // Dark edge (Bottom/Right)
+            g.beginPath();
+            g.moveTo(sliderWidth / 2, -sliderHeight / 2);
+            g.lineTo(sliderWidth / 2, sliderHeight / 2);
+            g.lineTo(-sliderWidth / 2, sliderHeight / 2);
+            g.strokePath();
+
+            // Main Track Body
+            g.fillStyle(trackColor);
+            g.fillRect(-sliderWidth / 2, -sliderHeight / 2, sliderWidth, sliderHeight);
+
+            // Groove (Chiseled out)
+            g.fillStyle(grooveColor);
+            g.fillRect(-sliderWidth / 2 + 4, -2, sliderWidth - 8, 4);
+
+            // Tick marks (Etched into stone)
+            g.lineStyle(2, 0x222222, 0.5);
+            // Draw ticks based on actual turns
+            for (let k = 0; k <= maxTurns; k++) {
+                const tx = (-sliderWidth / 2 + 4) + (k * ((sliderWidth - 8) / maxTurns));
+                g.moveTo(tx, -sliderHeight / 2);
+                g.lineTo(tx, -4); // Stop at groove
+
+                g.moveTo(tx, 4); // Start after groove
+                g.lineTo(tx, sliderHeight / 2);
+            }
+            g.strokePath();
+
+            this.reloadSliderContainer.add(g);
+
+            // 2. Draw Handle / Knob (Stone Block)
+            const safeProgress = Math.max(0, Math.min(1, progress));
+            const knobWidth = 20;
+            const knobHeight = 28;
+            const travelLength = (sliderWidth - 8) - knobWidth; // Subtract padding/groove end
+            const startX = (-sliderWidth / 2 + 4) + knobWidth / 2;
+            const knobX = startX + (safeProgress * travelLength);
+
+            const knob = this.scene.add.graphics();
+
+            // Knob Body
+            knob.fillStyle(handleColor);
+            knob.fillRect(knobX - knobWidth / 2, -knobHeight / 2, knobWidth, knobHeight);
+
+            // Stone texture (noise/dots) - simplified as darker specks
+            knob.fillStyle(0x555555, 0.4);
+            knob.fillRect(knobX - knobWidth / 2 + 2, -knobHeight / 2 + 2, 4, 4);
+            knob.fillRect(knobX + knobWidth / 2 - 6, knobHeight / 2 - 6, 4, 4);
+
+            // 3D Bevel for Block
+            knob.lineStyle(2, 0xaaaaaa); // Highlight
+            knob.beginPath();
+            knob.moveTo(knobX - knobWidth / 2, knobHeight / 2);
+            knob.lineTo(knobX - knobWidth / 2, -knobHeight / 2);
+            knob.lineTo(knobX + knobWidth / 2, -knobHeight / 2);
+            knob.strokePath();
+
+            knob.lineStyle(2, 0x333333); // Shadow
+            knob.beginPath();
+            knob.moveTo(knobX + knobWidth / 2, -knobHeight / 2);
+            knob.lineTo(knobX + knobWidth / 2, knobHeight / 2);
+            knob.lineTo(knobX - knobWidth / 2, knobHeight / 2);
+            knob.strokePath();
+
+            // Center indent line
+            knob.lineStyle(2, 0x444444);
+            knob.moveTo(knobX, -knobHeight / 2 + 6);
+            knob.lineTo(knobX, knobHeight / 2 - 6);
+            knob.strokePath();
+
+            this.reloadSliderContainer.add(knob);
+
+            const label = this.scene.add.text(0, sliderHeight + 4, "RELOADING", {
+                fontSize: "12px",
+                color: "#888888",
+                fontFamily: "monospace",
+                fontStyle: "bold",
+                shadow: { offsetX: 1, offsetY: 1, color: "#000000", blur: 0, stroke: true, fill: true }
+            }).setOrigin(0.5, 0);
+            this.reloadSliderContainer.add(label);
+        }
     }
 
     private activateSlot(index: number) {