New rain and thunder effects added

js/effects/ThunderstormEffect.js

@@ -0,0 +1,88 @@
+import {FullscreenEffect} from "./FullscreenEffect.js";
+
+export class ThunderstormEffect extends FullscreenEffect
+{
+	static NAME = 'thunderstorm';
+
+	constructor()
+	{
+		super();
+
+		this.currentAlpha = 0.0;
+		this.nextFlash = undefined;
+		this.duration = 150;
+		this.sounds = [
+			new Audio('js/effects/thunder01.mp3'),
+			new Audio('js/effects/thunder02.mp3'),
+			new Audio('js/effects/thunder03.mp3'),
+			new Audio('js/effects/thunder04.mp3'),
+		];
+		this.currentSound = 0;
+	}
+
+	shuffleSounds(iterations = 10)
+	{
+		const buffer = this.sounds.slice(0, this.sounds.length - 1);
+
+		for (let i = 0; i < iterations; i++) {
+			buffer.sort(
+				(a, b) => {
+					return 1 - Math.round(Math.random()) * 2
+				}
+			);
+		}
+
+		const index = 1 + Math.round(Math.random() * (buffer.length - 1));
+
+		this.sounds = buffer.slice(0, index)
+			.concat([this.sounds[this.sounds.length - 1]])
+			.concat(buffer.slice(index));
+	}
+
+	update(timestamp)
+	{
+		super.update(timestamp);
+
+		if (this.nextFlash > timestamp) {
+			this.currentAlpha = 0.0;
+
+			return;
+		}
+
+		if (timestamp < this.nextFlash + this.duration) {
+			const progress = (timestamp - this.nextFlash) / this.duration;
+
+			this.currentAlpha = Math.sin(Math.PI * progress) * 0.75;
+		} else {
+			const duration = 3000 + Math.round(Math.random() * 27000);
+
+			this.nextFlash = timestamp + duration;
+
+			setTimeout(
+				() => {
+					if (this.currentSound === 0) {
+						this.shuffleSounds();
+					}
+
+					this.sounds[this.currentSound].currentTime = 0;
+					this.sounds[this.currentSound].play();
+
+					this.currentSound = (this.currentSound + 1) % this.sounds.length;
+				},
+				duration + 1000
+			);
+		}
+	}
+
+	render(context, camera)
+	{
+		super.render(context, camera);
+
+		if (this.currentAlpha === 0.0) {
+			return;
+		}
+
+		context.fillStyle = 'rgba(255, 255, 255, ' + this.currentAlpha + ')';
+		context.fillRect(0, 0, context.canvas.width, context.canvas.height);
+	}
+}