feat: wire AtmospherePanel and ParticleOverlay into CampaignView

client/src/pages/CampaignView.tsx

@@ -20,6 +20,10 @@ import CharacterDetail from "../components/CharacterDetail";
 import RollLog from "../components/RollLog";
 import DiceTray from "../components/DiceTray";
 import FogOverlay from "../components/FogOverlay";
+import AtmospherePanel from "../components/AtmospherePanel";
+import ParticleOverlay from "../components/ParticleOverlay";
+import type { AtmosphereState } from "../lib/atmosphereTypes";
+import { defaultAtmosphere } from "../lib/atmosphereTypes";
 import SelectDropdown from "../components/SelectDropdown";
 import styles from "./CampaignView.module.css";
 
@@ -49,7 +53,12 @@ export default function CampaignView() {
     id: number;
   } | null>(null);
   const pendingRollRef = useRef<RollResult | null>(null);
-  const [fogActive, setFogActive] = useState(false);
+  const [atmosphere, setAtmosphere] = useState<AtmosphereState>(defaultAtmosphere);
+
+  function handleAtmosphereChange(next: AtmosphereState) {
+    setAtmosphere(next);
+    socket.emit("atmosphere:update", { campaignId, ...next });
+  }
 
   // Fetch characters and join socket room
   useEffect(() => {
@@ -242,8 +251,8 @@ export default function CampaignView() {
     socket.on("talent:added", onTalentAdded);
     socket.on("talent:removed", onTalentRemoved);
     socket.on("roll:result", onRollResult);
-    socket.on("atmosphere:update", (data: { fog: boolean }) => {
-      setFogActive(data.fog);
+    socket.on("atmosphere:update", (data: AtmosphereState) => {
+      setAtmosphere(data);
     });
 
     return () => {
@@ -344,20 +353,10 @@ export default function CampaignView() {
             {campaignName || "Campaign"}
           </span>
           <div className={styles.headerBtns}>
-            <button
-              className={`${styles.fogBtn} ${fogActive ? styles.fogBtnActive : ""}`}
-              onClick={() => {
-                const next = !fogActive;
-                setFogActive(next);
-                socket.emit("atmosphere:update", {
-                  campaignId,
-                  fog: next,
-                });
-              }}
-              title={fogActive ? "Clear fog" : "Summon fog"}
-            >
-              🌫
-            </button>
+            <AtmospherePanel
+              atmosphere={atmosphere}
+              onAtmosphereChange={handleAtmosphereChange}
+            />
             <button
               className={styles.addBtn}
               onClick={() => setShowCreate(true)}
@@ -473,7 +472,8 @@ export default function CampaignView() {
       </div>
       <RollLog campaignId={campaignId} rolls={rolls} freshIds={freshIds} />
       <DiceTray roll={diceRoll} onAnimationComplete={handleDiceComplete} />
-      <FogOverlay active={fogActive} />
+      <FogOverlay active={atmosphere.fog.active} />
+      <ParticleOverlay atmosphere={atmosphere} />
     </div>
   );
 }