Atmosphere-Pro/weather-engine.js at main · RudranshGawande/Atmosphere-Pro · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
 * Atmosphere Pro - Living Environment Engine
 * Dynamically generates weather-specific visuals (clouds, rain, sunrays)
 */

class WeatherEngine {
    constructor() {
        this.container = null;
        this.init();
    }

    init() {
        // Create the environment container
        this.container = document.createElement('div');
        this.container.className = 'weather-env sunny';
        document.body.prepend(this.container);

        // Start base animations
        this.spawnClouds();

        // Cycle moods for landing page (simulating dynamic environment)
        this.startMoodCycle();
    }

    setMode(mode) {
        // Sync container and body classes
        this.container.className = `weather-env ${mode}`;
        document.body.classList.remove('sunny', 'rainy', 'cloudy');
        document.body.classList.add(mode);

        this.clearPrecipitation();

        if (mode === 'rainy') {
            this.startRain();
        } else if (mode === 'sunny') {
            this.startSunRays();
        }
    }

    spawnClouds() {
        const createCloud = () => {
            const cloud = document.createElement('div');
            cloud.className = 'cloud';

            // Randomize size and position
            const size = Math.random() * 200 + 100;
            const top = Math.random() * 60; // Keep in upper half

            cloud.innerHTML = `
                <svg width="${size}" height="${size * 0.6}" viewBox="0 0 24 24" fill="white" style="opacity: 0.2;">
                    <path d="M17.5,19c-3.1,0-5.6-2.5-5.6-5.6c0-0.1,0-0.3,0-0.4c-0.6,0.3-1.3,0.5-2,0.5c-2.3,0-4.1-1.8-4.1-4.1c0-0.5,0.1-1,0.3-1.4 C4,8.8,3,10.3,3,12c0,3.3,2.7,6,6,6h8.5c1.9,0,3.5-1.6,3.5-3.5S19.4,12,17.5,12c-0.2,0-0.3,0-0.5,0.1c-0.5-2.3-2.5-4.1-4.9-4.1 c-1.5,0-2.8,0.7-3.7,1.7c-0.2-0.1-0.4-0.1-0.6-0.1c-1.3,0-2.3,1-2.3,2.3c0,0.1,0,0.2,0,0.4c0.1,0.1,0.2,0.1,0.3,0.2 c0.6-1.1,1.8-1.9,3.1-1.9c0.4,0,0.9,0.1,1.2,0.2c0.8-1.4,2.3-2.3,4.1-2.3c2.4,0,4.4,1.8,4.6,4.2c1.4,0.3,2.5,1.5,2.5,3 C21,17.3,19.4,18.9,17.5,19z"></path>
                </svg>
            `;

            cloud.style.top = `${top}vh`;
            cloud.style.animation = `cloudDrift ${Math.random() * 60 + 60}s linear infinite`;
            cloud.style.animationDelay = `-${Math.random() * 100}s`;

            this.container.appendChild(cloud);
        };

        for (let i = 0; i < 8; i++) createCloud();
    }

    startRain() {
        this.rainInterval = setInterval(() => {
            const drop = document.createElement('div');
            drop.className = 'raindrop';
            drop.style.left = `${Math.random() * 100}vw`;
            drop.style.opacity = Math.random() * 0.5;
            drop.style.animation = `rainFall ${Math.random() * 0.5 + 0.5}s linear forwards`;

            this.container.appendChild(drop);
            setTimeout(() => drop.remove(), 1000);
        }, 50);
    }

    startSunRays() {
        for (let i = 0; i < 5; i++) {
            const ray = document.createElement('div');
            ray.className = 'sunray';
            ray.style.left = `${20 + i * 15}%`;
            ray.style.animation = `rayPulse ${Math.random() * 5 + 5}s ease-in-out infinite`;
            ray.style.animationDelay = `${i * 1}s`;
            this.container.appendChild(ray);
        }
    }

    clearPrecipitation() {
        if (this.rainInterval) clearInterval(this.rainInterval);
        this.container.querySelectorAll('.raindrop, .sunray').forEach(el => el.remove());
    }

    startMoodCycle() {
        const moods = ['sunny', 'cloudy', 'rainy'];
        let currentIndex = 0;

        this.moodInterval = setInterval(() => {
            currentIndex = (currentIndex + 1) % moods.length;
            this.setMode(moods[currentIndex]);
        }, 15000); // Shift every 15 seconds
    }

    stopMoodCycle() {
        if (this.moodInterval) {
            clearInterval(this.moodInterval);
            this.moodInterval = null;
        }
    }
}

// Initialize on Load
window.addEventListener('load', () => {
    window.weatherEngine = new WeatherEngine();
});