From a923e1b226617218c50b8830ec4fe8324857f193 Mon Sep 17 00:00:00 2001
From: Aaron Wood <aaron.wood@mac.lan>
Date: Sat, 11 Apr 2026 23:30:39 -0400
Subject: [PATCH] feat: add snow atmosphere effect
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

tsParticles snow — 60–300 flakes depending on intensity, size variation
for depth, gentle drift via random speed + curved paths. Appears in
atmosphere panel between Rain and Embers.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/components/AtmospherePanel.tsx |  3 +++
 client/src/components/ParticleOverlay.tsx | 11 ++++++--
 client/src/lib/atmosphereTypes.ts         |  2 ++
 client/src/lib/particleConfigs.ts         | 31 +++++++++++++++++++++++
 4 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/client/src/components/AtmospherePanel.tsx b/client/src/components/AtmospherePanel.tsx
index 6ce70ef..dd06e1c 100644
--- a/client/src/components/AtmospherePanel.tsx
+++ b/client/src/components/AtmospherePanel.tsx
@@ -8,6 +8,7 @@ const EFFECTS: { key: EffectKey; emoji: string; label: string }[] = [
   { key: "fog",    emoji: "🌫",  label: "Fog"    },
   { key: "fire",   emoji: "🔥",  label: "Fire"   },
   { key: "rain",   emoji: "🌧",  label: "Rain"   },
+  { key: "snow",   emoji: "❄️",  label: "Snow"   },
   { key: "embers", emoji: "✨", label: "Embers" },
 ];
 
@@ -26,6 +27,7 @@ export default function AtmospherePanel({
     fog:    atmosphere.fog.intensity,
     fire:   atmosphere.fire.intensity,
     rain:   atmosphere.rain.intensity,
+    snow:   atmosphere.snow.intensity,
     embers: atmosphere.embers.intensity,
   });
   const containerRef = useRef<HTMLDivElement>(null);
@@ -48,6 +50,7 @@ export default function AtmospherePanel({
       fog:    atmosphere.fog.intensity,
       fire:   atmosphere.fire.intensity,
       rain:   atmosphere.rain.intensity,
+      snow:   atmosphere.snow.intensity,
       embers: atmosphere.embers.intensity,
     });
   }, [atmosphere]);
diff --git a/client/src/components/ParticleOverlay.tsx b/client/src/components/ParticleOverlay.tsx
index ad6d70b..c1adf66 100644
--- a/client/src/components/ParticleOverlay.tsx
+++ b/client/src/components/ParticleOverlay.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import Particles, { initParticlesEngine } from "@tsparticles/react";
 import { loadSlim } from "@tsparticles/slim";
 import type { AtmosphereState } from "../lib/atmosphereTypes";
-import { getRainConfig, getEmbersConfig } from "../lib/particleConfigs";
+import { getRainConfig, getSnowConfig, getEmbersConfig } from "../lib/particleConfigs";
 
 // Module-level singleton so the engine is only initialised once
 let enginePromise: Promise<void> | null = null;
@@ -28,7 +28,7 @@ export default function ParticleOverlay({ atmosphere }: ParticleOverlayProps) {
 
   if (!ready) return null;
 
-  const { rain, embers } = atmosphere;
+  const { rain, snow, embers } = atmosphere;
 
   return (
     <>
@@ -39,6 +39,13 @@ export default function ParticleOverlay({ atmosphere }: ParticleOverlayProps) {
           options={getRainConfig(rain.intensity)}
         />
       )}
+      {snow.active && (
+        <Particles
+          key={`snow-${snow.intensity}`}
+          id="particles-snow"
+          options={getSnowConfig(snow.intensity)}
+        />
+      )}
       {embers.active && (
         <Particles
           key={`embers-${embers.intensity}`}
diff --git a/client/src/lib/atmosphereTypes.ts b/client/src/lib/atmosphereTypes.ts
index a05c1e2..cf1312a 100644
--- a/client/src/lib/atmosphereTypes.ts
+++ b/client/src/lib/atmosphereTypes.ts
@@ -7,6 +7,7 @@ export interface AtmosphereState {
   fog: EffectState;
   fire: EffectState;
   rain: EffectState;
+  snow: EffectState;
   embers: EffectState;
 }
 
@@ -14,5 +15,6 @@ export const defaultAtmosphere: AtmosphereState = {
   fog:    { active: false, intensity: 50 },
   fire:   { active: false, intensity: 50 },
   rain:   { active: false, intensity: 50 },
+  snow:   { active: false, intensity: 50 },
   embers: { active: false, intensity: 50 },
 };
diff --git a/client/src/lib/particleConfigs.ts b/client/src/lib/particleConfigs.ts
index ea47e9a..5f2b0d9 100644
--- a/client/src/lib/particleConfigs.ts
+++ b/client/src/lib/particleConfigs.ts
@@ -29,6 +29,37 @@ export function getRainConfig(intensity: number): ISourceOptions {
   };
 }
 
+/**
+ * Snow — intensity 0–100 → count 60–300, speed 1–3.5
+ * Gentle falling flakes with wobble drift. Size varies for depth illusion.
+ */
+export function getSnowConfig(intensity: number): ISourceOptions {
+  const count = Math.round(60 + (intensity / 100) * 240);
+  const speed = 1 + (intensity / 100) * 2.5;
+  return {
+    fullScreen: { enable: true, zIndex: 9997 },
+    particles: {
+      number: { value: count, density: { enable: false } },
+      color: { value: ["#ffffff", "#ddeeff", "#eef6ff"] },
+      shape: { type: "circle" },
+      opacity: {
+        value: { min: 0.25, max: 0.75 },
+        animation: { enable: true, speed: 0.3, sync: false, startValue: "random" },
+      },
+      size: { value: { min: 1, max: 5 } },
+      move: {
+        enable: true,
+        speed: speed,
+        direction: "bottom",
+        random: true,
+        straight: false,
+        outModes: { default: "out" },
+      },
+    },
+    interactivity: { events: { onClick: { enable: false }, onHover: { enable: false } } },
+  };
+}
+
 /**
  * Embers — intensity 0–100 → count 50–150, speed 0.5–2
  * Smaller, more numerous slow-drifting sparks. Flickering opacity.