aaron/darkwatch
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: wire AtmospherePanel and ParticleOverlay into CampaignView

Browse source
This commit is contained in:
Aaron Wood 2026-04-10 19:30:51 -04:00
parent 55e9019fa9
commit 10ba151b6e
1 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
client/src/pages/CampaignView.tsx
View file

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