1

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() {