/* global React, ReactDOM */
const { useState, useEffect, useMemo, useCallback } = React;
const { ScenarioIndex, ScenarioMain, RightPanel } = window;
const useTweaks = window.useTweaks;
// =================================================================
// TOP BAR
// =================================================================
function TopBar({ s, total, idx, onOpenTweaks, soundEnabled, tweaksOpen, view, onToggleDocs }) {
const [clock, setClock] = useState(new Date());
useEffect(() => {
const t = setInterval(() => setClock(new Date()), 1000);
return () => clearInterval(t);
}, []);
const z = (n) => String(n).padStart(2, '0');
return (
PFC · CASUALTY CARE
SUBJECT AREA 20 · PROLONGED CASUALTY CARE
SCENARIO {z(idx + 1)} / {z(total)}
{s.ctl} · {s.title}
23 SCENARIOS · 2002–2025
ZULU
{z(clock.getUTCHours())}:{z(clock.getUTCMinutes())}:{z(clock.getUTCSeconds())}
);
}
// =================================================================
// FOOTER STRIP
// =================================================================
function FootStrip({ s, onPrev, onNext, idx, total }) {
return (
23 SCENARIOS · 2002–2025
·
Socratic Teaching
·
Universal Design for Learning
← → NAVIGATE
/ FILTER
);
}
// =================================================================
// QUICK REFERENCE BOTTOM ROW
// =================================================================
function QuickReference() {
return (
▮
PCC Quick Reference
CROSS-SCENARIO · ALWAYS-ON
4-2-1 Rule · Maintenance Fluids
- 4 mL/kg/hr for first 10 kg
- 2 mL/kg/hr for next 10 kg
- 1 mL/kg/hr for each kg thereafter
- 80 kg → 120 mL/hr
ETCO₂ Targets
- TBI patients: 35–40 mmHg
- Acute herniation: brief 25–30
- High ETCO₂ → ↑ RR or TV
- Low ETCO₂ → ↓ RR or TV
Sepsis · Hour-1 Bundle
- 30 mL/kg crystalloid w/in 3 h
- Broad-spec abx w/in 1 hour
- Source control (drain collections)
- Vasopressors if hypotensive despite fluids
RASS Sedation Scale
- +4 Combative · +3 V. Agitated
- +2 Agitated · +1 Restless
- 0 Alert & calm
- −1 Drowsy · −2 Light (TARGET)
- −3 Moderate · −4 Deep · −5 Unarousable
Key Medications
- Ketamine 0.5–2 mg/kg bolus, 0.5–2 mg/kg/hr inf.
- Midazolam 0.05–0.1 mg/kg bolus
- Morphine 4 mg IV q4h, 2 mg PRN
- Meropenem 1 g IV (sepsis)
- Ceftriaxone 2 g + Metronidazole 500 mg
MARCH-PAWS · PCC Pillars
- Massive hemorrhage · Airway · Resp
- Circulation · Head/Hypothermia
- Pain · Antibiotics · Wounds · Splinting
- Reassess hourly · document everything
);
}
// =================================================================
// SOUND PROMPT — shown when sound is enabled but AudioContext not yet
// resumed (browser autoplay policy requires a user gesture).
// =================================================================
function SoundPrompt({ enabled, onActivate, onDismiss }) {
const [needsClick, setNeedsClick] = useState(false);
useEffect(() => {
if (!enabled) { setNeedsClick(false); return; }
const ctx = window.PCC_SOUND.getCtx();
setNeedsClick(!ctx || ctx.state !== 'running');
// poll for ctx state changes (some browsers fire 'statechange' on AudioContext)
if (ctx) {
const h = () => setNeedsClick(ctx.state !== 'running');
ctx.addEventListener && ctx.addEventListener('statechange', h);
return () => ctx.removeEventListener && ctx.removeEventListener('statechange', h);
}
}, [enabled]);
if (!enabled || !needsClick) return null;
return (
♪
Patient telemetry audio is queued — click to enable
);
}
// =================================================================
// APP
// =================================================================
function App() {
const data = window.PCC_SCENARIOS;
const [t, setTweak] = useTweaks(window.PCC_TWEAK_DEFAULTS);
const [soundDismissed, setSoundDismissed] = useState(false);
const [tweaksOpen, setTweaksOpen] = useState(false);
const [view, setView] = useState(() => {
try { return localStorage.getItem('pfc.view') === 'docs' ? 'docs' : 'monitor'; } catch (e) { return 'monitor'; }
});
const toggleDocs = useCallback(() => {
setView(v => {
const next = v === 'docs' ? 'monitor' : 'docs';
try { localStorage.setItem('pfc.view', next); } catch (e) {}
return next;
});
}, []);
const toggleTweaks = useCallback(() => {
if (tweaksOpen) {
window.postMessage({ type: '__deactivate_edit_mode' }, '*');
setTweaksOpen(false);
} else {
window.postMessage({ type: '__activate_edit_mode' }, '*');
setTweaksOpen(true);
}
}, [tweaksOpen]);
// Listen for panel-driven open/dismiss events to keep button state in sync
useEffect(() => {
const onMsg = (e) => {
const ty = e?.data?.type;
if (ty === '__edit_mode_dismissed' || ty === '__deactivate_edit_mode') setTweaksOpen(false);
else if (ty === '__activate_edit_mode') setTweaksOpen(true);
};
window.addEventListener('message', onMsg);
return () => window.removeEventListener('message', onMsg);
}, []);
// Apply pulseHeart toggle to body
useEffect(() => {
document.body.classList.toggle('no-pulse', !t.pulseHeart);
}, [t.pulseHeart]);
// Initial: from hash or first
const [activeCtl, setActiveCtl] = useState(() => {
const h = (location.hash || '').replace('#', '');
return data.find(d => d.ctl === h) ? h : data[0].ctl;
});
useEffect(() => {
history.replaceState(null, '', '#' + activeCtl);
// scroll panels to top on change
document.querySelectorAll('.panel-body').forEach(el => el.scrollTop = 0);
}, [activeCtl]);
const idx = data.findIndex(d => d.ctl === activeCtl);
const s = data[idx];
// Drive the WebGL background colour from the current patient's condition
// (scenario priority → stable / urgent / critical) and the heartbeat
// tempo from their heart rate. Disabled when "Tint to condition" is off.
useEffect(() => {
if (!window.PFC_BG || !s) return;
const level = t.bgCondition === false
? 'stable'
: s.priority === 0 ? 'critical'
: s.priority === 1 ? 'urgent'
: 'stable';
const hr = s.vitalsParsed ? +s.vitalsParsed.hr || 0 : 0;
window.PFC_BG.setCondition(level, { hr });
}, [s && s.ctl, t.bgCondition]);
const onPrev = useCallback(() => {
if (idx > 0) setActiveCtl(data[idx - 1].ctl);
}, [idx, data]);
const onNext = useCallback(() => {
if (idx < data.length - 1) setActiveCtl(data[idx + 1].ctl);
}, [idx, data]);
useEffect(() => {
const onKey = (e) => {
const tag = (e.target.tagName || '').toUpperCase();
if (tag === 'INPUT' || tag === 'TEXTAREA') return;
if (e.key === 'ArrowLeft') onPrev();
else if (e.key === 'ArrowRight') onNext();
else if (e.key === '/') {
e.preventDefault();
const inp = document.querySelector('.idx-filter input');
inp && inp.focus();
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [onPrev, onNext]);
// Click sounds — only on interactive controls we own
useEffect(() => {
const onClick = (e) => {
const el = e.target.closest && e.target.closest('.idx-item, .action-item, .tab, .q-item button.toggle, .topbar-btn');
if (el) window.PCC_SOUND.click();
};
document.addEventListener('click', onClick);
return () => document.removeEventListener('click', onClick);
}, []);
if (!s) return No scenario loaded.
;
return (
{view === 'docs' ? (
) : (
<>
)}
{!soundDismissed && (
setSoundDismissed(true)}
onDismiss={() => setSoundDismissed(true)}
/>
)}
);
}
ReactDOM.createRoot(document.getElementById('root')).render();