/* Main App - TCCC 360° Casualty Dashboard */ /* global React, ReactDOM, BodyDiagram, VitalsPanel, TreatmentsTab, MedsTab, DripCalcTab, BloodTab, RefTab, nowHHMM, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSelect, TweakColor, useTweaks */ const STORAGE_KEY = 'tccc360-v1'; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "tactical", "accent": "op", "density": "regular", "sectionStyle": "tactical", "showSparklines": true, "showGrid": true, "timeMode": "both", "glassPanels": true, "glassOpacity": 56, "bgCondition": true, "webglField": true, "soundOn": false, "soundMode": "lubdub", "soundVolume": 55 }/*EDITMODE-END*/; const DEFAULT_STATE = { rosterNum: '', opName: 'ENDURING SHIELD', medic: 'SGT R. PHAM', name: 'DOE, J.', last4: '4521', gender: 'M', date: '', time: '', service: 'USA', unit: '', allergies: 'NKDA', bloodType: 'A+', evac: 'urgent', triage: '', weight: 90, mechanism: ['GSW', 'Blast'], acuteFindings: [], injuries: [ { view:'front', x: 70, y: 130, type:'gsw' }, { view:'front', x: 132, y: 280, type:'gsw' }, { view:'back', x: 110, y: 160, type:'gsw' }, ], burnedRegions: [], tourniquets: { rArm: { active: false, type: '', time: '', position: '' }, lArm: { active: false, type: '', time: '', position: '' }, rLeg: { active: true, type: 'CAT', time: '1342', position: 'Proximal' }, lLeg: { active: false, type: '', time: '', position: '' }, }, vitals: [ { time: '1338', hr: '128', sbp: '92', dbp: '60', rr: '22', spo2: '94', pain: '8' }, { time: '1345', hr: '118', sbp: '98', dbp: '64', rr: '20', spo2: '96', pain: '6' }, { time: '1352', hr: '110', sbp: '104', dbp: '68', rr: '18', spo2: '97', pain: '4' }, ], draftVitals: { hr: '110', sbp: '104', dbp: '68', rr: '18', spo2: '97', pain: '4' }, avpu: 'V', interventions: [ 'massive:Tourniquet applied', 'massive:TXA 2g IV', 'circ:IV established', 'head:Hypothermia prevention kit', ], medsGiven: [ { id: 1, time: '1343', name: 'Fentanyl OTFC', dose: '800 mcg' }, { id: 2, time: '1346', name: 'TXA', dose: '2 g IV' }, { id: 3, time: '1350', name: 'Ketamine IV', dose: '0.2 mg/kg' }, ], fluidsGiven: [ { id: 1, time: '1348', type: 'Whole Blood', vol: '500' }, ], notes: '1340: PT received, GSW R thigh + L flank. CAT applied prox R thigh; bleeding controlled. IV L AC 18g. TXA 2g over 10 min. Permissive hypotension target SBP 90+. Pt warming with hypo kit.', }; const MECHANISMS = ['Artillery', 'Blast', 'Blunt', 'Burn', 'Drone', 'Fall', 'Grenade', 'GSW', 'IED', 'Landmine', 'MVC', 'RPG', 'Other']; const ACUTE_FINDINGS = [ 'Impalement', 'Evisceration', 'Amputation', 'Open Chest', 'Sucking Chest', 'Flail Chest', 'Open Abdomen', 'Crush', 'Avulsion', 'Degloving', 'Penetrating Head', 'Spinal Injury', ]; function loadState() { try { const raw = localStorage.getItem(STORAGE_KEY); if (raw) return { ...DEFAULT_STATE, ...JSON.parse(raw) }; } catch (e) {} return DEFAULT_STATE; } function App() { const [state, setState] = React.useState(loadState); const [tab, setTab] = React.useState('treatments'); const [now, setNow] = React.useState(new Date()); const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply theme attributes to React.useEffect(() => { const root = document.documentElement; root.setAttribute('data-theme', t.theme || 'tactical'); root.setAttribute('data-accent', t.accent || 'op'); root.setAttribute('data-density', t.density || 'regular'); root.setAttribute('data-section-style', t.sectionStyle || 'tactical'); root.style.setProperty('--grid-op', t.showGrid && t.theme !== 'paper' ? 0.18 : 0); }, [t.theme, t.accent, t.density, t.sectionStyle, t.showGrid]); React.useEffect(() => { try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch (e) {} }, [state]); React.useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []); const set = (k) => (v) => setState(prev => ({ ...prev, [k]: typeof v === 'function' ? v(prev[k]) : v })); const toggleMechanism = (m) => { setState(prev => ({ ...prev, mechanism: prev.mechanism.includes(m) ? prev.mechanism.filter(x => x !== m) : [...prev.mechanism, m] })); }; const toggleFinding = (f) => { setState(prev => { const list = prev.acuteFindings || []; return { ...prev, acuteFindings: list.includes(f) ? list.filter(x => x !== f) : [...list, f] }; }); }; const setEvac = (level) => setState(prev => ({ ...prev, evac: prev.evac === level ? '' : level })); const z = (n) => String(n).padStart(2, '0'); const zuluTime = `${z(now.getUTCHours())}${z(now.getUTCMinutes())}${z(now.getUTCSeconds())}Z`; const localTime = `${z(now.getHours())}:${z(now.getMinutes())}:${z(now.getSeconds())}`; const dateStr = now.toISOString().slice(0,10).replace(/-/g,'') + 'L'; const activeTQs = Object.values(state.tourniquets).filter(t => t.active).length; const lastVital = state.vitals[state.vitals.length - 1] || {}; // Glass mode + WebGL field controls (driven by Tweaks). React.useEffect(() => { document.body.classList.toggle('glass', t.glassPanels !== false); }, [t.glassPanels]); React.useEffect(() => { document.body.style.setProperty('--glass-alpha', String((t.glassOpacity ?? 56) / 100)); }, [t.glassOpacity]); React.useEffect(() => { const c = document.getElementById('webgl-bg'); if (c) c.style.display = (t.webglField === false) ? 'none' : 'block'; }, [t.webglField]); // Heart sound (lub-dub / beep), beating at the patient's heart rate. React.useEffect(() => { window.HeartAudio && window.HeartAudio.setEnabled(!!t.soundOn); }, [t.soundOn]); React.useEffect(() => { window.HeartAudio && window.HeartAudio.setMode(t.soundMode || 'lubdub'); }, [t.soundMode]); React.useEffect(() => { window.HeartAudio && window.HeartAudio.setVolume((t.soundVolume ?? 55) / 100); }, [t.soundVolume]); React.useEffect(() => { if (!window.HeartAudio || !t.soundOn) return; const hr = +lastVital.hr; if (!hr) return; window.HeartAudio.beat(); const id = setInterval(() => window.HeartAudio.beat(), 60000 / hr); return () => clearInterval(id); }, [t.soundOn, lastVital.hr]); // WebGL field tracks patient acuity from the latest vitals; tempo follows HR. React.useEffect(() => { if (!window.PFC_BG) return; const hr = +lastVital.hr, sbp = +lastVital.sbp, spo2 = +lastVital.spo2; const level = (t.bgCondition === false) ? 'stable' : ((sbp && sbp < 90) || (spo2 && spo2 < 90) || (hr && (hr > 130 || hr < 40))) ? 'critical' : ((sbp && sbp < 100) || (spo2 && spo2 < 94) || (hr && (hr > 110 || hr < 50))) ? 'urgent' : 'stable'; window.PFC_BG.setCondition(level, { hr: hr || 0 }); }, [lastVital.hr, lastVital.sbp, lastVital.spo2, t.bgCondition]); return (
{/* Copyright / IP notice — fixed; this view is viewport-locked */}
© 2025–2026 Special-Purpose-Medics. All rights reserved · For training use only — not medical advice · specialpurposemedic@gmail.com
{/* ===== TOP BAR ===== */}
TCCC · 360 CASUALTY VIEW · DD-1380
OP set('opName')(e.target.value)} style={{width: `${Math.max(8, (state.opName||'').length)}ch`}}/> MEDIC set('medic')(e.target.value)} style={{width: `${Math.max(8, (state.medic||'').length)}ch`}}/> DTG { t.timeMode === 'local' ? `${dateStr.slice(0,8)} ${localTime}` : t.timeMode === 'zulu' ? `${dateStr} ${zuluTime}` : `${dateStr} ${zuluTime}` } LOC 34.5°N 69.2°E
{/* ===== ROSTER HEADER ===== */}
Name · Last4
set('name')(e.target.value)} style={{width:'180px'}}/> / set('last4')(e.target.value)} maxLength="4" style={{width:'84px'}} className="last4-input"/>
Acute Findings {state.acuteFindings && state.acuteFindings.length ? `${state.acuteFindings.length} flagged` : 'tap to flag'}
{ACUTE_FINDINGS.map(f => (
toggleFinding(f)}> {f}
))}
Roster #
set('rosterNum')(e.target.value)} placeholder="HO0332"/>
Service · Unit
set('service')(e.target.value)} style={{width:'48px'}}/> · set('unit')(e.target.value)} placeholder="A/2-75" style={{width:'90px'}}/>
Sex · Wt
{['M','F'].map(g => ( ))}
Weight
set('weight')(Number(e.target.value)||0)} style={{width:'60px'}}/> kg
Blood Type
{state.bloodType}
Allergies
set('allergies')(e.target.value)}/>
EVAC Priority
Triage
{[ {k:'Immediate',c:'var(--crit)'}, {k:'Delayed',c:'var(--amber)'}, {k:'Minimal',c:'var(--op)'}, {k:'Expectant',c:'#555'} ].map(opt => { const isActive = state.triage === opt.k.toLowerCase(); return ( ); })}
{/* ===== MAIN GRID ===== */}
{/* ----- LEFT COLUMN: Body Diagram + Mechanism ----- */}
INJURY MAP click body to mark · {state.injuries.length} marks · {activeTQs} TQ
MECHANISM OF INJURY
{MECHANISMS.map(m => (
toggleMechanism(m)}> {m}
))}
{/* ----- CENTER COLUMN: Vitals + Notes ----- */}
SIGNS & SYMPTOMS · LIVE click any tile or cell to edit · latest: {lastVital.time || '—'}
TQ & MED · TIMELINE
FIELD NOTES · MIST auto-fills as data is entered
{/* ----- RIGHT COLUMN: Tabs ----- */}
{[ ['treatments', 'Tx'], ['meds', 'Meds'], ['drip', 'Drip'], ['blood', 'Blood'], ['ref', 'Ref'] ].map(([k, l]) => ( ))}
{tab === 'treatments' && } {tab === 'meds' && } {tab === 'drip' && } {tab === 'blood' && } {tab === 'ref' && }
{/* ===== STATUS BAR ===== */}
●SECURE
PT {state.name}
EVAC {state.evac.toUpperCase() || '—'}
TQ {activeTQs}/4
VITALS {state.vitals.length} rec
MEDS {state.medsGiven.length}
{(t.timeMode === 'local' || t.timeMode === 'both') && <>{localTime} LOC} {t.timeMode === 'both' && ' · '} {(t.timeMode === 'zulu' || t.timeMode === 'both') && <>{zuluTime}}
setTweak('theme', v)} /> setTweak('accent', v)} /> setTweak('sectionStyle', v)} /> setTweak('density', v)} /> setTweak('showGrid', v)} /> setTweak('showSparklines', v)} /> setTweak('timeMode', v)} /> setTweak('webglField', v)} /> setTweak('glassPanels', v)} /> setTweak('glassOpacity', v)} /> setTweak('bgCondition', v)} /> { setTweak('soundOn', v); if (window.HeartAudio) { window.HeartAudio.setEnabled(v); if (v) window.HeartAudio.beat(); } }} /> { setTweak('soundMode', v); if (window.HeartAudio) { window.HeartAudio.setMode(v); if (t.soundOn) window.HeartAudio.beat(); } }} /> setTweak('soundVolume', v)} /> {/* Separate drip & dosage calculator box (floating, with teaching mode) */}
); } /* ---- Combined timeline of TQ + meds + vitals events ---- */ function Timeline({ state, setState }) { const events = []; state.medsGiven.forEach(m => events.push({ t: m.time, k: 'med', label: m.name, sub: m.dose, onClear: () => setState(p => ({ ...p, medsGiven: p.medsGiven.filter(x => x.id !== m.id) })) })); state.fluidsGiven.forEach(m => events.push({ t: m.time, k: 'fluid', label: m.type, sub: m.vol ? m.vol + ' mL' : '', onClear: () => setState(p => ({ ...p, fluidsGiven: p.fluidsGiven.filter(x => x.id !== m.id) })) })); state.vitals.forEach((v, idx) => events.push({ t: v.time, k: 'vital', label: `HR ${v.hr} · BP ${v.sbp}/${v.dbp}`, sub: `RR ${v.rr} SpO₂ ${v.spo2}`, onClear: () => setState(p => ({ ...p, vitals: p.vitals.filter((_, i) => i !== idx) })) })); Object.entries(state.tourniquets).forEach(([k, tq]) => { if (tq.active && tq.time) { const side = { rArm:'R ARM', lArm:'L ARM', rLeg:'R LEG', lLeg:'L LEG' }[k]; events.push({ t: tq.time, k: 'tq', label: `TQ ${side}`, sub: [tq.type, tq.position].filter(Boolean).join(' · ') || 'applied', onClear: () => setState(p => ({ ...p, tourniquets: { ...p.tourniquets, [k]: { active: false, type: '', time: '', position: '' } } })) }); } }); events.sort((a, b) => (a.t || '').localeCompare(b.t || '')); if (events.length === 0) { return
No events yet.
; } // Visual timeline const times = events.map(e => parseTime(e.t)).filter(n => !isNaN(n)); const t0 = Math.min(...times); const t1 = Math.max(...times); const span = Math.max(1, t1 - t0); return (
{/* axis */}
{/* tick labels */}
{events[0]?.t || ''} {events[events.length-1]?.t || ''}
{events.map((e, i) => { const tx = parseTime(e.t); const pct = isNaN(tx) ? 0 : ((tx - t0) / span) * 100; const color = e.k === 'tq' ? 'var(--op)' : e.k === 'med' ? 'var(--amber)' : e.k === 'fluid' ? 'var(--info)' : 'var(--fg-2)'; return (
{e.t || '----'} {e.label} · {e.sub}
); })}
); } function parseTime(t) { if (!t) return NaN; const s = String(t).replace(':',''); const h = parseInt(s.slice(0,2)); const m = parseInt(s.slice(2,4)); if (isNaN(h) || isNaN(m)) return NaN; return h * 60 + m; } /* ---- Build MIST text from current casualty state ---- */ function buildMIST(state) { // M — Mechanism const M = state.mechanism && state.mechanism.length ? state.mechanism.join(' · ') : '—'; // I — Injuries (count by type and view) + tourniquets const counts = { gsw: 0, burn: 0, frac: 0, shrap: 0 }; (state.injuries || []).forEach(i => { counts[i.type] = (counts[i.type] || 0) + 1; }); const front = (state.injuries || []).filter(i => i.view === 'front').length; const back = (state.injuries || []).filter(i => i.view === 'back').length; const injParts = []; if (counts.gsw) injParts.push(`${counts.gsw}× GSW`); if (counts.burn || (state.burnedRegions && state.burnedRegions.length)) { const burnTbsa = (typeof estimateBurnTBSA === 'function') ? estimateBurnTBSA(state.injuries, state.burnedRegions) : 0; if (burnTbsa > 0) injParts.push(`Burn ~${burnTbsa.toFixed(1)}% TBSA`); else if (counts.burn) injParts.push(`${counts.burn}× Burn`); } if (counts.frac) injParts.push(`${counts.frac}× Frac`); if (counts.shrap) injParts.push(`${counts.shrap}× Shrap`); if (front || back) injParts.push(`(ant ${front}/post ${back})`); const tqActive = Object.entries(state.tourniquets || {}) .filter(([_,t]) => t.active) .map(([k,t]) => { const side = { rArm:'R arm', lArm:'L arm', rLeg:'R leg', lLeg:'L leg' }[k]; return `TQ ${side}${t.type ? ' '+t.type : ''}${t.position ? ' ('+t.position+')' : ''}${t.time ? ' @'+t.time : ''}`; }); if (tqActive.length) injParts.push(...tqActive); if (state.acuteFindings && state.acuteFindings.length) { injParts.unshift(state.acuteFindings.join(' · ')); } const I = injParts.length ? injParts.join(', ') : '—'; // S — Signs (latest vital + AVPU). Prefer the live draft if it has data; else last recorded. const draft = state.draftVitals || {}; const draftHasData = !!(draft.hr || draft.sbp || draft.dbp || draft.rr || draft.spo2 || draft.pain); const v = draftHasData ? { ...draft, time: '' } : (state.vitals || [])[state.vitals.length - 1]; let S = '—'; if (v) { const bits = []; if (v.hr) bits.push(`HR ${v.hr}`); if (v.sbp || v.dbp) bits.push(`BP ${v.sbp||'?'}/${v.dbp||'?'}`); if (v.rr) bits.push(`RR ${v.rr}`); if (v.spo2)bits.push(`SpO₂ ${v.spo2}`); if (v.pain)bits.push(`Pain ${v.pain}/10`); if (state.avpu) bits.push(`AVPU ${state.avpu}`); S = (v.time ? `@${v.time} ` : '') + bits.join(' · '); } else if (state.avpu) { S = `AVPU ${state.avpu}`; } // T — Treatments (interventions + meds + fluids) const tx = []; (state.interventions || []).forEach(s => { const [, label] = s.split(':'); if (label) tx.push(label); }); (state.medsGiven || []).forEach(m => { tx.push(`${m.name} ${m.dose}${m.time ? ' @'+m.time : ''}`); }); (state.fluidsGiven || []).forEach(f => { tx.push(`${f.type}${f.vol ? ' '+f.vol+'mL' : ''}${f.time ? ' @'+f.time : ''}`); }); const T = tx.length ? tx.join('; ') : '—'; return { M, I, S, T }; } /* ---- MIST auto-fill panel ---- */ function MistPanel({ state, notes, setNotes }) { const mist = buildMIST(state); const fullText = `M: ${mist.M}\nI: ${mist.I}\nS: ${mist.S}\nT: ${mist.T}`; const copyToNotes = () => { const sep = notes && notes.trim() ? '\n\n' : ''; setNotes((notes || '') + sep + `--- MIST @ ${nowHHMM()} ---\n` + fullText); }; return (
{[ ['M', 'Mechanism', mist.M], ['I', 'Injuries', mist.I], ['S', 'Signs', mist.S], ['T', 'Treatments', mist.T], ].map(([k, label, val]) => (
{k}{label} {val}
))}
NARRATIVE