// ── CharacterSheetTab — D&D 5.5e (2024 PHB) sheet ────────────────────────── // Wraps the new Character columns into a single sheet view. Layout sections: // Identity, Abilities, Combat, Saves, Skills, Conditions / Death saves // Languages, Features, Backstory will land in a follow-up iteration. // // Editing model: `editable` is true for the character's owning user or any // DM/Admin of their campaign. Each field has an inline edit affordance — // numbers are , role-style pickers use setField(a.col, Math.max(1, Math.min(30, parseInt(e.target.value)||0)))} style={shStyles.abilityScoreInput} /> ))} {/* COMBAT */}
Combat
setField('armorClass', v)} /> setField('speed', v)} />
setField('hpMax', v)} /> setField('hpCurrent', v)} /> setField('hpTemp', v)} />
setField('hitDieType', v)} select={['d6','d8','d10','d12']} /> setField('hitDiceUsed', v)} /> setField('exhaustionLevel', v)} />
setField('deathSaveSuccesses', v)} color="#22c55e" /> setField('deathSaveFailures', v)} color="#f87171" />
{/* WEALTH — full 5e currency set + computed total in gp. Each field is editable inline; total recomputes from the local draft. */}
Wealth
{[ ['platinumPieces','PP','#e5e4e2','Platinum'], ['gold', 'GP','#c9a227','Gold'], ['electrumPieces','EP','#cdb88a','Electrum'], ['silver', 'SP','#9a9793','Silver'], ['copper', 'CP','#b45309','Copper'], ].map(([col, abbr, color, long]) => (
{abbr}
setField(col, Math.max(0, parseInt(e.target.value)||0))} style={{ ...shStyles.coinInput, color }} />
{long}
))}
Total value: {/* 5e: 1pp = 10gp, 1ep = 0.5gp, 1sp = 0.1gp, 1cp = 0.01gp */} {( (draft.platinumPieces||0)*10 + (draft.gold||0) + (draft.electrumPieces||0)*0.5 + (draft.silver||0)*0.1 + (draft.copper||0)*0.01 ).toFixed(2)} gp
{/* MATERIALS — carved materials (per-character stockpile). Has its own add/delete flow because materials are sub-rows, not flat fields. */} {/* SAVES + SKILLS — two columns on wide screens */}
{/* Saving throws */}
Saving Throws
{ABILITIES.map(a => { const prof = saveProfs.includes(a.key); return (
); })}
{/* Skills */}
Skills
{SKILLS.map(s => { const lvl = skillProfs[s.key]; // undefined | 'proficient' | 'expert' const dot = lvl === 'expert' ? '◉' : lvl === 'proficient' ? '●' : '○'; const dotColor = lvl === 'expert' ? '#c9a227' : lvl === 'proficient' ? '#c9a227' : '#4a4a52'; return (
{s.label} ({s.ability}) {fmtMod(skillTotal(s))}
); })}
Passive Perception {10 + skillTotal(SKILLS.find(s => s.key === 'perception'))}
{/* CONDITIONS — togglable PHB-2024 status conditions. Exhaustion has its own scale (0-10) and lives in the Combat panel above. */} setJsonField('conditionsJson', next)} /> {/* LANGUAGES — chip list with add/remove. Pre-fills a known list of 5e languages but accepts free-form additions for homebrew / regional. */} setJsonField('languagesJson', next)} /> {/* PROFICIENCIES — weapons / armor / tools, each a free-form chip list. 5e proficiencies aren't strictly enum-bounded, so we don't try to dropdown them — just typeable chips. */} setJsonField('proficienciesJson', next)} /> {/* FEATURES & TRAITS — card list. Each card has name + source + description, all editable inline. New entries open a draft card at the top. */} setJsonField('featuresJson', next)} /> {/* BACKSTORY — the six standard PHB narrative fields. Each is a free-form textarea. Stored as a single JSON object so the schema stays flat. */} setJsonField('backstoryJson', next)} /> ); }; // ── MaterialsPanel — carved-material stockpile, inlined into the sheet ──── // Lives in its own component because materials have their own add/delete // lifecycle (separate sub-rows, not flat character fields). After mutating, // we ask the parent to reload the character so the rest of the sheet sees // the new state — the alternative would be local state that drifts from the // parent's ch prop, which led to bugs in the prior tab implementation. const MaterialsPanel = ({ ch, editable, onRefresh }) => { const [adding, setAdding] = React.useState(false); const [busy, setBusy] = React.useState(false); const blank = { name:'', quantity:1, unit:'', notes:'' }; const [form, setForm] = React.useState(blank); const addMaterial = async () => { if (!form.name.trim() || busy) return; setBusy(true); try { await api.characters.materials.add(ch.id, { name: form.name.trim(), quantity: Number(form.quantity) || 1, unit: form.unit, notes: form.notes, }); setForm(blank); setAdding(false); await onRefresh?.(); } catch (err) { console.error('[MaterialsPanel] add failed:', err); window.dialog.alert('Failed to add material: ' + (err.message || 'unknown error')); } finally { setBusy(false); } }; const deleteMaterial = async (matId) => { if (!(await window.dialog.confirm({ title:'Remove material?', message:'Remove this material?', danger:true, confirmLabel:'Remove' }))) return; try { await api.characters.materials.delete(ch.id, matId); await onRefresh?.(); } catch (err) { console.error('[MaterialsPanel] delete failed:', err); window.dialog.alert('Failed to remove material: ' + (err.message || 'unknown error')); } }; const list = ch.carvedMaterials || []; return (
Carved Materials ({list.length}) {editable && !adding && ( )}
{adding && (
Name
setForm(p => ({...p, name:e.target.value}))} placeholder="e.g. Moonstone Dust" autoFocus />
Qty
setForm(p => ({...p, quantity:e.target.value}))} />
Unit
setForm(p => ({...p, unit:e.target.value}))} placeholder="vials, shards, …" />
Notes
setForm(p => ({...p, notes:e.target.value}))} placeholder="Where it came from, how it was carved…" />
)} {list.length === 0 ? (
No carved materials recorded.
) : (
{list.map(m => (
◆
{m.name}
{m.notes &&
{m.notes}
}
{m.quantity}
{m.unit}
{editable && ( )}
))}
)}
); }; // ── ConditionsPanel — the 14 PHB 2024 status conditions. Active conditions // are highlighted; clicking toggles on/off. Hover shows the rules summary so // players don't have to flip a book mid-fight. Exhaustion is its own scale // (level 0-10) and lives in the Combat panel — we exclude it here. const PHB_CONDITIONS = [ { key:'blinded', desc:"Can't see; attack rolls have disadvantage and attacks against you have advantage." }, { key:'charmed', desc:"Can't attack or harm the charmer; they have advantage on social checks against you." }, { key:'deafened', desc:"Can't hear; auto-fail any check that requires hearing." }, { key:'frightened', desc:"Disadvantage on checks & attacks while the source is in sight; can't move closer to it." }, { key:'grappled', desc:"Speed becomes 0; ends if the grappler is incapacitated or you’re moved out of range." }, { key:'incapacitated',desc:"Can't take actions, bonus actions, or reactions. Concentration breaks." }, { key:'invisible', desc:"Can't be seen without magic or special sense; attacks against you have disadvantage, your attacks have advantage." }, { key:'paralyzed', desc:"Incapacitated, can't move/speak; auto-fail STR and DEX saves; melee crits within 5 ft." }, { key:'petrified', desc:"Turned to stone — incapacitated, weight x10, resist all damage, immune to poison/disease." }, { key:'poisoned', desc:"Disadvantage on attack rolls and ability checks." }, { key:'prone', desc:"Movement halved (must crawl); disadvantage on attacks; melee attacks against you have advantage." }, { key:'restrained', desc:"Speed 0; disadvantage on attacks & DEX saves; attacks against you have advantage." }, { key:'stunned', desc:"Incapacitated, can't move, can speak falteringly; auto-fail STR and DEX saves." }, { key:'unconscious', desc:"Incapacitated, prone, drops what they're holding; melee crits within 5 ft; auto-fail STR/DEX saves." }, ]; const ConditionsPanel = ({ conditions, editable, onChange }) => { // Stored lowercase so toggling stays canonical regardless of case the DM // typed elsewhere. We compare lowercased keys. const active = new Set((conditions || []).map(c => (c || '').toLowerCase())); const toggle = (key) => { const next = active.has(key) ? conditions.filter(c => (c || '').toLowerCase() !== key) : [...conditions, key]; onChange(next); }; return (
Conditions {active.size > 0 && ( {active.size} active )}
{PHB_CONDITIONS.map(c => { const on = active.has(c.key); return ( ); })}
Hover a chip for the rules summary. Exhaustion is tracked separately in the Combat panel.
); }; // ── ProficienciesPanel — three free-form chip strips (weapons / armor / tools). // No fixed dropdown set because 5e proficiencies are open-ended (a class can // grant "all simple weapons", a feat grants a specific weapon, etc.). Type a // label, press Enter, get a chip. const ProficienciesPanel = ({ proficiencies, editable, onChange }) => { const get = (key) => Array.isArray(proficiencies[key]) ? proficiencies[key] : []; const set = (key, next) => onChange({ ...proficiencies, [key]: next }); return (
Proficiencies
set('weapons', next)} /> set('armor', next)} /> set('tools', next)} />
); }; const ProficiencyStrip = ({ label, items, editable, onChange, placeholder }) => { const [draft, setDraft] = React.useState(''); const add = () => { const v = draft.trim(); if (!v) return; if (items.some(x => x.toLowerCase() === v.toLowerCase())) { setDraft(''); return; } onChange([...items, v]); setDraft(''); }; const remove = (x) => onChange(items.filter(i => i !== x)); return (
{label}
{items.length === 0 && !editable && ( None )} {items.map(x => (
{x} {editable && ( )}
))} {editable && (
setDraft(e.target.value)} onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), add())} placeholder={placeholder} style={{ ...shStyles.fieldInput, width:280, padding:'4px 8px', fontSize:12 }} />
)}
); }; // ── LanguagesPanel — chip list. PHB-known languages in the picker plus an // "Other…" option that prompts for a custom string (homebrew dialects etc). const PHB_LANGUAGES = [ 'Common', 'Common Sign Language', 'Draconic', 'Dwarvish', 'Elvish', 'Giant', 'Gnomish', 'Goblin', 'Halfling', 'Orc', 'Abyssal', 'Celestial', 'Deep Speech', 'Infernal', 'Primordial', 'Sylvan', 'Undercommon', 'Thieves’ Cant', 'Druidic', ]; const LanguagesPanel = ({ languages, editable, onChange }) => { const [adding, setAdding] = React.useState(false); const [pick, setPick] = React.useState(''); const [custom, setCustom] = React.useState(''); const remove = (lang) => onChange(languages.filter(l => l !== lang)); const add = (val) => { const trimmed = (val || '').trim(); if (!trimmed) return; if (languages.some(l => l.toLowerCase() === trimmed.toLowerCase())) { setAdding(false); setPick(''); setCustom(''); return; } onChange([...languages, trimmed]); setAdding(false); setPick(''); setCustom(''); }; const onPickerChange = (val) => { if (val === '__custom') { setPick('__custom'); return; } if (val) add(val); }; // Pre-filter known languages so the picker doesn't suggest ones already taken. const available = PHB_LANGUAGES.filter(l => !languages.includes(l)); return (
Languages {editable && !adding && ( )}
{languages.length === 0 && !adding && (
No languages recorded.
)}
{languages.map(l => (
{l} {editable && ( )}
))}
{adding && (
{pick !== '__custom' ? ( <> ) : ( <> setCustom(e.target.value)} onKeyDown={e => e.key === 'Enter' && add(custom)} placeholder="Custom language name" style={shStyles.fieldInput} /> )}
)}
); }; // ── FeaturesPanel — card list of class features, racial traits, background // boons, magic-item attunements, anything the player wants to remember on // their sheet. Each row is { name, source, description }; description is // long-form (multi-line textarea). const FeaturesPanel = ({ features, editable, onChange }) => { // Adding a feature opens an inline draft at the top. Existing rows toggle // their own edit mode on click; we don't open a modal. const [adding, setAdding] = React.useState(false); const blank = { name:'', source:'', description:'' }; const [draft, setDraft] = React.useState(blank); const [editIndex, setEditIndex] = React.useState(null); const [editBuf, setEditBuf] = React.useState(blank); const commitNew = () => { if (!draft.name.trim()) return; onChange([...features, { ...draft, name: draft.name.trim() }]); setDraft(blank); setAdding(false); }; const startEdit = (i) => { setEditIndex(i); setEditBuf({ ...features[i] }); }; const commitEdit = () => { if (editIndex == null) return; const next = features.map((f, i) => i === editIndex ? { ...editBuf, name: (editBuf.name || '').trim() || f.name } : f); onChange(next); setEditIndex(null); }; const remove = async (i) => { const f = features[i]; if (!(await window.dialog.confirm({ title:'Remove feature?', message:`Remove "${f.name}" from this sheet?`, danger:true, confirmLabel:'Remove' }))) return; onChange(features.filter((_, j) => j !== i)); if (editIndex === i) setEditIndex(null); }; return (
Features & Traits ({features.length}) {editable && !adding && ( )}
{adding && (
Name
setDraft(d => ({...d, name: e.target.value}))} placeholder="e.g. Second Wind" />
Source
setDraft(d => ({...d, source: e.target.value}))} placeholder="e.g. Fighter 1, Folk Hero, Belt of Hill Giant Strength" />
Description