/* global React */ const { useEffect, useMemo, useRef } = React; const { TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio } = window; /* The Tweaks UI for the PFC dashboard. Owns: theme switch (dark/light), sound on/off + volume, ECG wave on/off, heart pulse on/off, density, student-notes visibility. */ function PCCTweaks({ tweaks, setTweak, currentVitals }) { // Apply theme to useEffect(() => { document.documentElement.setAttribute('data-theme', tweaks.theme === 'light' ? 'light' : 'dark'); }, [tweaks.theme]); // Apply density to useEffect(() => { document.body.setAttribute('data-density', tweaks.density); }, [tweaks.density]); // Apply ECG visibility useEffect(() => { document.body.classList.toggle('no-ecg', !tweaks.ecgWave); }, [tweaks.ecgWave]); // Sound enabled state useEffect(() => { window.PCC_SOUND.setEnabled(!!tweaks.soundEnabled); }, [tweaks.soundEnabled]); // Sound volume useEffect(() => { window.PCC_SOUND.setVolume((tweaks.soundVolume ?? 25) / 100); }, [tweaks.soundVolume]); // Update sound vitals when scenario changes useEffect(() => { if (!currentVitals) { window.PCC_SOUND.setVitals({ hr: 0, spo2: 0, critical: false }); return; } const hr = +currentVitals.hr || 0; const spo2 = +currentVitals.spo2 || 0; // critical if HR way off, SpO2 < 90, BP < 90/?, temp >= 39 etc. const bpSys = currentVitals.bp ? +currentVitals.bp.split('/')[0] : null; const temp = +currentVitals.temp || 0; const critical = (hr && (hr < 50 || hr > 130)) || (spo2 && spo2 < 90) || (bpSys && bpSys < 90) || (temp && temp >= 39); window.PCC_SOUND.setVitals({ hr, spo2, critical }); }, [currentVitals]); // Lub-Dub useEffect(() => { window.PCC_SOUND.setLubDub(!!tweaks.lubDub); }, [tweaks.lubDub]); // Glass panels — translucent chrome so the WebGL field shows through useEffect(() => { document.body.classList.toggle('glass', !!tweaks.glassPanels); if (window.PFC_BG) window.PFC_BG.setGlass(!!tweaks.glassPanels); }, [tweaks.glassPanels]); // Glass opacity — drives --glass-alpha (panel translucency) useEffect(() => { const a = (tweaks.glassOpacity ?? 62) / 100; document.body.style.setProperty('--glass-alpha', String(a)); }, [tweaks.glassOpacity]); return ( setTweak('theme', v)} /> setTweak('density', v)} /> setTweak('ecgWave', v)} /> setTweak('pulseHeart', v)} /> setTweak('soundEnabled', v)} /> setTweak('lubDub', v)} /> setTweak('soundVolume', v)} /> setTweak('glassPanels', v)} /> setTweak('glassOpacity', v)} /> setTweak('bgCondition', v)} /> setTweak('showStudentNotes', v)} /> ); } window.PCCTweaks = PCCTweaks;