1

src/scenes/UIScene.js

@@ -732,9 +732,11 @@ class UIScene extends Phaser.Scene {
     }
 
     updateGold(amount) {
-        if (this.goldText) {
-            this.goldText.setText(`GOLD: ${amount}`);
+        if (!this.goldText) {
+            console.warn('goldText not ready yet, skipping update');
+            return;
         }
+        this.goldText.setText(`GOLD: ${amount}`);
     }
 
     createDebugInfo() {
@@ -2551,4 +2553,171 @@ class UIScene extends Phaser.Scene {
             this.equipmentIcon.setVisible(false);
         }
     }
+
+    /**
+     * CREATE MINIMAP - Circular minimap in top-right corner
+     */
+    createMinimap() {
+        const minimapSize = 60; // Small circle size when collapsed
+        const expandedSize = 200; // Large size when expanded
+        const x = this.scale.width - 80; // Top-right position
+        const y = 80;
+
+        // Minimap container
+        this.minimapContainer = this.add.container(x, y);
+        this.minimapContainer.setDepth(9500); // Above most UI
+        this.minimapContainer.setScrollFactor(0);
+
+        // State
+        this.minimapExpanded = false;
+        this.minimapCurrentSize = minimapSize;
+
+        // Background circle
+        this.minimapBg = this.add.graphics();
+        this.minimapBg.fillStyle(0x000000, 0.7);
+        this.minimapBg.fillCircle(0, 0, minimapSize);
+        this.minimapBg.lineStyle(3, 0xffffff, 0.8);
+        this.minimapBg.strokeCircle(0, 0, minimapSize);
+        this.minimapContainer.add(this.minimapBg);
+
+        // Map graphics (terrain)
+        this.minimapGraphics = this.add.graphics();
+        this.minimapContainer.add(this.minimapGraphics);
+
+        // Player dot
+        this.minimapPlayerDot = this.add.circle(0, 0, 3, 0xff0000);
+        this.minimapContainer.add(this.minimapPlayerDot);
+
+        // Label
+        this.minimapLabel = this.add.text(0, -minimapSize - 10, 'MAP', {
+            fontSize: '12px',
+            fontFamily: 'Arial',
+            fill: '#ffffff',
+            fontStyle: 'bold'
+        }).setOrigin(0.5);
+        this.minimapContainer.add(this.minimapLabel);
+
+        // Make clickable
+        const hitArea = new Phaser.Geom.Circle(0, 0, minimapSize);
+        this.minimapBg.setInteractive(hitArea, Phaser.Geom.Circle.Contains, { useHandCursor: true });
+
+        this.minimapBg.on('pointerdown', () => {
+            this.toggleMinimap();
+        });
+
+        console.log('🗺️ Circular minimap created!');
+    }
+
+    /**
+     * TOGGLE MINIMAP - Expand/Collapse
+     */
+    toggleMinimap() {
+        this.minimapExpanded = !this.minimapExpanded;
+
+        const targetSize = this.minimapExpanded ? 200 : 60;
+
+        // Animate size change
+        this.tweens.add({
+            targets: this,
+            minimapCurrentSize: targetSize,
+            duration: 300,
+            ease: 'Power2',
+            onUpdate: () => {
+                // Redraw background
+                this.minimapBg.clear();
+                this.minimapBg.fillStyle(0x000000, 0.7);
+                this.minimapBg.fillCircle(0, 0, this.minimapCurrentSize);
+                this.minimapBg.lineStyle(3, 0xffffff, 0.8);
+                this.minimapBg.strokeCircle(0, 0, this.minimapCurrentSize);
+
+                // Update hit area
+                const hitArea = new Phaser.Geom.Circle(0, 0, this.minimapCurrentSize);
+                this.minimapBg.setInteractive(hitArea, Phaser.Geom.Circle.Contains);
+
+                // Update label position
+                this.minimapLabel.setY(-this.minimapCurrentSize - 10);
+            },
+            onComplete: () => {
+                this.updateMinimapContent();
+            }
+        });
+    }
+
+    /**
+     * UPDATE MINIMAP - Called every frame
+     */
+    updateMinimap() {
+        if (!this.minimapGraphics || !this.gameScene || !this.gameScene.player) return;
+
+        // Only update content if expanded
+        if (this.minimapExpanded) {
+            this.updateMinimapContent();
+        }
+
+        // Always update player dot position
+        this.updateMinimapPlayerPosition();
+    }
+
+    /**
+     * UPDATE MINIMAP CONTENT - Render terrain
+     */
+    updateMinimapContent() {
+        if (!this.minimapExpanded) return;
+        if (!this.gameScene || !this.gameScene.terrain) return;
+
+        this.minimapGraphics.clear();
+
+        const mapSize = this.minimapCurrentSize;
+        const worldSize = 100; // 100x100 tiles
+        const scale = (mapSize * 2) / worldSize;
+
+        // Get player position
+        const playerPos = this.gameScene.player.getPosition();
+        const centerX = playerPos.x;
+        const centerY = playerPos.y;
+
+        // View radius around player
+        const viewRadius = 25;
+
+        // Draw terrain tiles
+        for (let y = Math.max(0, centerY - viewRadius); y < Math.min(worldSize, centerY + viewRadius); y++) {
+            for (let x = Math.max(0, centerX - viewRadius); x < Math.min(worldSize, centerX + viewRadius); x++) {
+                const tile = this.gameScene.terrain[y] && this.gameScene.terrain[y][x];
+                if (!tile) continue;
+
+                // Calculate position relative to player
+                const relX = (x - centerX) * scale;
+                const relY = (y - centerY) * scale;
+
+                // Only draw if within circle
+                const dist = Math.sqrt(relX * relX + relY * relY);
+                if (dist > mapSize) continue;
+
+                // Color based on tile type
+                let color = 0x228B22; // Default green
+                if (tile.type === 'water') color = 0x4488ff;
+                else if (tile.type === 'sand') color = 0xf4a460;
+                else if (tile.type === 'stone') color = 0x808080;
+                else if (tile.type === 'grass') color = 0x228B22;
+
+                this.minimapGraphics.fillStyle(color, 0.8);
+                this.minimapGraphics.fillRect(relX - scale / 2, relY - scale / 2, scale, scale);
+            }
+        }
+    }
+
+    /**
+     * UPDATE PLAYER DOT POSITION
+     */
+    updateMinimapPlayerPosition() {
+        // Player is always at center when expanded
+        if (this.minimapExpanded) {
+            this.minimapPlayerDot.setPosition(0, 0);
+            this.minimapPlayerDot.setRadius(5);
+        } else {
+            // When collapsed, just show dot at center
+            this.minimapPlayerDot.setPosition(0, 0);
+            this.minimapPlayerDot.setRadius(3);
+        }
+    }
 }