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);
+        }
+    }
 }

src/systems/FogOfWarSystem.js

@@ -18,11 +18,11 @@ class FogOfWarSystem {
 
         // Settings
         this.settings = {
-            enabled: true,
+            enabled: false,  // DISABLED - use weather fog instead
             fogColor: 0x000000,
-            fogAlpha: 0.8,
-            exploredAlpha: 0.3,
-            visibleRadius: 5, // tiles
+            fogAlpha: 0.15,  // Very light animated fog
+            exploredAlpha: 0.05,  // Almost invisible for explored areas
+            visibleRadius: 8, // tiles (increased more)
             smoothEdges: true,
             persistMemory: true,
             refogDungeons: true
@@ -159,7 +159,7 @@ class FogOfWarSystem {
     }
 
     /**
-     * Render fog based on current state
+     * Render fog based on current state - ANIMATED FOG EFFECT
      */
     renderFog() {
         if (!this.fogGraphics) return;
@@ -168,38 +168,55 @@ class FogOfWarSystem {
 
         // Get camera bounds
         const cam = this.scene.cameras.main;
-        const offsetX = this.scene.terrainOffsetX || 0;
-        const offsetY = this.scene.terrainOffsetY || 0;
+        const time = this.scene.time.now * 0.0005; // Slow animation
 
-        // Render fog tiles
+        // Render fog as smooth animated overlay
         for (let y = 0; y < this.gridHeight; y++) {
             for (let x = 0; x < this.gridWidth; x++) {
                 const state = this.fogGrid[y][x];
 
-                // Convert grid to screen coordinates
-                const iso = this.scene.iso || { toScreen: (x, y) => ({ x: x * 32, y: y * 32 }) };
-                const screenPos = iso.toScreen(x, y);
-                const screenX = screenPos.x + offsetX;
-                const screenY = screenPos.y + offsetY;
+                // Skip if visible
+                if (state === 2) continue;
 
-                // Only render if on screen
+                // Simple 2D tile coordinates
+                const screenX = x * this.tileSize;
+                const screenY = y * this.tileSize;
+
+                // Only render if on screen (with margin)
                 if (screenX < cam.scrollX - 100 || screenX > cam.scrollX + cam.width + 100) continue;
                 if (screenY < cam.scrollY - 100 || screenY > cam.scrollY + cam.height + 100) continue;
 
+                // Animated fog effect - wave pattern
+                const waveX = Math.sin(time + x * 0.1) * 5;
+                const waveY = Math.cos(time + y * 0.1) * 5;
+
                 if (state === 0) {
-                    // Unexplored - full fog
-                    this.fogGraphics.fillStyle(this.settings.fogColor, this.settings.fogAlpha);
-                    this.fogGraphics.fillRect(screenX - 32, screenY - 16, 64, 32);
+                    // Unexplored - animated fog particles
+                    const alpha = this.settings.fogAlpha + Math.sin(time + x + y) * 0.05;
+                    this.fogGraphics.fillStyle(this.settings.fogColor, alpha);
+
+                    // Draw multiple overlapping circles for smooth fog
+                    this.fogGraphics.fillCircle(
+                        screenX + this.tileSize / 2 + waveX,
+                        screenY + this.tileSize / 2 + waveY,
+                        this.tileSize * 0.8
+                    );
                 } else if (state === 1) {
-                    // Explored but not visible - light fog
-                    this.fogGraphics.fillStyle(this.settings.fogColor, this.settings.exploredAlpha);
-                    this.fogGraphics.fillRect(screenX - 32, screenY - 16, 64, 32);
+                    // Explored but not visible - very light animated fog
+                    const alpha = this.settings.exploredAlpha + Math.sin(time + x + y) * 0.02;
+                    this.fogGraphics.fillStyle(this.settings.fogColor, alpha);
+
+                    // Smaller, lighter circles
+                    this.fogGraphics.fillCircle(
+                        screenX + this.tileSize / 2 + waveX,
+                        screenY + this.tileSize / 2 + waveY,
+                        this.tileSize * 0.6
+                    );
                 }
-                // state === 2 (visible) - no fog
             }
         }
 
-        // Smooth edges if enabled
+        // Apply blur effect for smooth fog
         if (this.settings.smoothEdges) {
             this.fogGraphics.setBlendMode(Phaser.BlendModes.NORMAL);
         }

src/systems/InventorySystem.js

@@ -95,10 +95,12 @@ class InventorySystem {
 
     updateUI() {
         const uiScene = this.scene.scene.get('UIScene');
-        if (uiScene) {
-            uiScene.updateInventory(this.slots);
-            if (uiScene.updateGold) uiScene.updateGold(this.gold);
+        if (!uiScene || !uiScene.goldText) {
+            // UIScene not ready yet, skip update
+            return;
         }
+        uiScene.updateInventory(this.slots);
+        if (uiScene.updateGold) uiScene.updateGold(this.gold);
     }
 
     hasItem(type, count) {

src/systems/ScreenReaderSystem.js

@@ -15,15 +15,15 @@ class ScreenReaderSystem {
 
         // Settings
         this.settings = {
-            enabled: true,
+            enabled: false,  // DISABLED by default
             rate: 1.0,        // 0.1 - 10 (speech speed)
             pitch: 1.0,       // 0 - 2 (voice pitch)
             volume: 1.0,      // 0 - 1 (volume)
             language: 'en-US', // Voice language
-            autoNarrate: true, // Auto-narrate UI changes
+            autoNarrate: false, // Auto-narrate UI changes
             verboseMode: false, // Detailed descriptions
-            soundCues: true,   // Audio cues for actions
-            navigationHelp: true // Navigation assistance
+            soundCues: false,   // Audio cues for actions
+            navigationHelp: false // Navigation assistance
         };
 
         // ARIA live regions (for screen reader announcements)

src/systems/VisualEnhancementSystem.js

@@ -200,6 +200,72 @@ class VisualEnhancementSystem {
         });
     }
 
+    createFogEffect() {
+        // Atmospheric fog overlay - covers entire screen
+        const fogOverlay = this.scene.add.graphics();
+        fogOverlay.setScrollFactor(0);
+        fogOverlay.setDepth(8000); // Above game, below UI
+        fogOverlay.setAlpha(0.4); // Semi-transparent
+
+        // Create fog particles for movement effect
+        const fogParticles = this.scene.add.particles(0, 0, 'particle_white', {
+            x: { min: 0, max: this.scene.cameras.main.width },
+            y: { min: 0, max: this.scene.cameras.main.height },
+            speedX: { min: -10, max: 10 },
+            speedY: { min: -5, max: 5 },
+            scale: { min: 2, max: 4 },
+            alpha: { min: 0.1, max: 0.3 },
+            lifespan: 10000,
+            frequency: 100,
+            quantity: 3,
+            tint: 0xcccccc,
+            blendMode: 'SCREEN'
+        });
+        fogParticles.setScrollFactor(0);
+        fogParticles.setDepth(8001);
+
+        // Animated fog overlay
+        let fogTime = 0;
+        const updateFog = () => {
+            fogTime += 0.01;
+            fogOverlay.clear();
+
+            const cam = this.scene.cameras.main;
+
+            // Draw multiple layers of fog for depth
+            for (let layer = 0; layer < 3; layer++) {
+                const offset = Math.sin(fogTime + layer) * 50;
+                const alpha = 0.1 + layer * 0.05;
+
+                fogOverlay.fillStyle(0xffffff, alpha);
+
+                // Draw wavy fog shapes
+                for (let i = 0; i < 5; i++) {
+                    const x = (i * cam.width / 4) + offset;
+                    const y = (layer * 100) + Math.cos(fogTime + i) * 30;
+                    fogOverlay.fillCircle(x, y, 200 + layer * 50);
+                }
+            }
+        };
+
+        // Update fog animation every frame
+        this.scene.events.on('update', updateFog);
+
+        this.weatherEffects.push({
+            overlay: fogOverlay,
+            particles: fogParticles,
+            update: updateFog,
+            destroy: () => {
+                fogOverlay.destroy();
+                fogParticles.destroy();
+                this.scene.events.off('update', updateFog);
+            }
+        });
+
+        console.log('🌫️ Atmospheric fog effect created');
+        return { overlay: fogOverlay, particles: fogParticles };
+    }
+
     // ========== LIGHTING SYSTEM ==========
 
     initLightingSystem() {