// ============================================================ // SCREEN 1 · CHARACTER (overview / dashboard) // ============================================================ // Illustration uploader / placeholder used inside the Biography card. const BiographyIllustration = ({ portrait, onChange, name }) => { const inputRef = useRef(null); const [drag, setDrag] = useState(false); const { push: pushToast } = useToast(); const onFile = (file) => { if (!file || !/^image\//.test(file.type)) return; if (file.size > 4 * 1024 * 1024) { pushToast({ label: '⚠ Файл занадто великий', detail: 'Максимальний розмір портрету — 4 МБ' }); return; } const reader = new FileReader(); reader.onload = (e) => onChange(e.target.result); reader.readAsDataURL(file); }; return (
{ e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={(e) => { e.preventDefault(); setDrag(false); onFile(e.dataTransfer.files[0]); }} onClick={() => inputRef.current?.click()}> onFile(e.target.files[0])}/> {portrait ? {name}/ : ( <> {/* hatched illuminated frame */} {/* corners */}
ілюстрація
перетягни фото або клікни щоб обрати
)} {portrait && (
Змінити { e.stopPropagation(); onChange(null); }}> Прибрати
)}
); }; const ScreenCharacter = ({ ch, setCh }) => { const { push } = useToast(); if (!ch) return null; const importRef = useRef(null); const [editOpen, setEditOpen] = useState(false); const [editDraft, setEditDraft] = useState(null); const doExport = () => { const json = JSON.stringify(ch, null, 2); const blob = new Blob([json], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `${ch.name || 'character'}.json`; a.click(); // Даємо браузеру час почати завантаження перед тим як відкликати URL setTimeout(() => URL.revokeObjectURL(url), 100); push({ label: 'Експортовано', detail: `${ch.name}.json` }); }; const doImport = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = (ev) => { try { const data = JSON.parse(ev.target.result); if (data.name && data.klass) { setCh(() => ({ ...data, id: ch.id })); push({ label: 'Імпортовано', detail: data.name }); } else { push({ label: '⚠ Помилка імпорту', detail: 'Файл не є даними персонажа' }); } } catch { push({ label: '⚠ Помилка читання', detail: 'Перевір формат JSON' }); } }; reader.readAsText(file); e.target.value = ''; }; const openEdit = () => { setEditDraft({ ...ch }); setEditOpen(true); }; const setF = (k, v) => setEditDraft(d => ({ ...d, [k]: v })); const saveEdit = () => { // Мержимо editDraft поверх поточного стану — не перезаписуємо поля що могли змінитись ззовні (Firebase) setCh(c => ({ ...c, ...editDraft })); setEditOpen(false); push({ label: 'Збережено', detail: editDraft.name }); }; const XP_THRESHOLDS = [0, 300, 900, 2700, 6500, 14000, 23000, 34000, 48000, 64000, 85000, 100000, 120000, 140000, 165000, 195000, 225000, 265000, 305000, 355000]; const levelSystem = ch.levelSystem || 'xp'; const [xpInput, setXpInput] = useState(0); const doAddXp = () => { if (!xpInput) return; setCh(c => ({ ...c, xp: c.xp + xpInput })); push({ icon: 'star', label: '+XP', value: `+${xpInput}`, detail: `Всього: ${ch.xp + xpInput}` }); setXpInput(0); }; const doLevelUp = () => { const newLevel = Math.min(20, ch.level + 1); const newProf = Math.floor((newLevel - 1) / 4) + 2; const newXpNext = XP_THRESHOLDS[newLevel] ?? XP_THRESHOLDS[19]; setCh(c => ({ ...c, level: newLevel, profBonus: newProf, xpNext: newXpNext, hitDiceTotal: newLevel })); push({ icon: 'star', label: `Рівень ${newLevel}!`, detail: `${ch.klass} · Профіцієнція +${newProf}` }); }; const canLevelUpXp = levelSystem === 'xp' && ch.xp >= ch.xpNext && ch.level < 20; const generateBio = () => { const { personality = '', ideals = '', bonds = '', flaws = '' } = ch.traits || {}; const parts = []; if (personality) parts.push(`${ch.name} — ${personality.charAt(0).toLowerCase() + personality.slice(1).replace(/\.$/, '')}.`); if (ideals) parts.push(`${ch.name.split(' ')[0]} вірить у ${ideals.charAt(0).toLowerCase() + ideals.slice(1).replace(/\.$/, '')}.`); if (bonds) parts.push(`Їх пов'язує ${bonds.charAt(0).toLowerCase() + bonds.slice(1).replace(/\.$/, '')}.`); if (flaws) parts.push(`Проте ${flaws.charAt(0).toLowerCase() + flaws.slice(1).replace(/\.$/, '')}.`); if (!parts.length) { push({ label: '⚠ Немає рис', detail: 'Заповни риси особистості спочатку' }); return; } if ((ch.biography || '').trim() && !window.confirm('Поточна біографія буде перезаписана. Продовжити?')) return; setCh(c => ({ ...c, biography: parts.join(' ') })); push({ label: 'Біографію згенеровано', detail: 'на основі рис особистості' }); }; const [addingLang, setAddingLang] = useState(false); const [langInput, setLangInput] = useState(''); const doAddLang = () => { if (!langInput.trim()) return; setCh(c => ({ ...c, languages: [c.languages, langInput.trim()].filter(Boolean).join(', ') })); setLangInput(''); setAddingLang(false); }; const removeLang = (lang) => setCh(c => ({ ...c, languages: (c.languages || '').split(',').map(l => l.trim()).filter(l => l && l !== lang).join(', ') })); const [addingTool, setAddingTool] = useState(false); const [toolInput, setToolInput] = useState(''); const doAddTool = () => { if (!toolInput.trim()) return; setCh(c => ({ ...c, toolProfs: [c.toolProfs, toolInput.trim()].filter(Boolean).join(', ') })); setToolInput(''); setAddingTool(false); }; const removeTool = (tool) => setCh(c => ({ ...c, toolProfs: (c.toolProfs || '').split(',').map(t => t.trim()).filter(t => t && t !== tool).join(', ') })); // Per-character ability scores (fallback to global ABILITIES if not set) const abilityVal = (k) => (ch.abilityScores || {})[k] ?? (ABILITIES.find(a => a.k === k)?.v ?? 10); // Per-character saving throw proficiencies (fallback to global SAVES) const saveProf = (k) => (ch.saveProfs || {})[k] ?? (SAVES.find(s => s.k === k)?.prof ?? false); const toggleSaveProf = (k) => setCh(c => ({ ...c, saveProfs: { ...(c.saveProfs || {}), [k]: !saveProf(k) } })); const rollAbility = (ab) => { const m = mod(abilityVal(ab.k)); const r = rollDie(20); push({ icon: 'dice', label: `${ab.name} (${ab.k})`, value: r + m, detail: `d20[${r}] ${fmtMod(m)}` }); }; const rollSave = (sk) => { const ab = ABILITIES.find(a => a.k === sk.k); const hasProf = saveProf(sk.k); const m = mod(abilityVal(sk.k)) + (hasProf ? ch.profBonus : 0); const r = rollDie(20); push({ icon: 'shield', label: `Ряткуб ${ab.name}`, value: r + m, detail: `d20[${r}] ${fmtMod(m)}`, crit: r === 20 }); }; return ( <> importRef.current?.click()}> Імпорт Експорт } /> {/* ========== IDENTITY CARD ========== */}
setCh(c => ({ ...c, portrait: p }))} name={ch.name} size={120} />
Натхнення

{ch.name}

«{ch.epithet}»
Редагувати
{ch.race} {ch.klass} {ch.level} {ch.subclass} {ch.background} {ch.alignment}
Досвід ({levelSystem === 'milestone' ? 'майлстоун' : 'XP'})
{levelSystem === 'xp' ? ( <>
{ch.xp.toLocaleString('uk-UA')} / {ch.xpNext.toLocaleString('uk-UA')}
setXpInput(Number(e.target.value) || 0)} onKeyDown={e => e.key === 'Enter' && doAddXp()}/> {canLevelUpXp && ( ⬆ Рівень! )}
) : (
Рівень {ch.level}{ch.level < 20 ? '' : ' (макс)'} {ch.level < 20 && ( ⬆ Підняти рівень )}
)}
Бонус майстер.
{fmtMod(ch.profBonus)}
Швидкість
{ch.speed} фут
Кубик HP
{ch.hitDiceTotal - ch.hitDiceUsed} / {ch.hitDiceTotal} d{ch.hitDie}
Пасивне сприйн.
{ch.passivePerc}
{/* ========== MAIN GRID ========== */}
{/* Ability scores */}
{ABILITIES.map(ab => { const v = abilityVal(ab.k); const m = mod(v); return (
rollAbility(ab)} data-tooltip={`(${v} − 10) / 2 = ${m >= 0 ? '+' : ''}${m}`}> {saveProf(ab.k) && { e.stopPropagation(); toggleSaveProf(ab.k); }}/>}
{ab.k}
{v}
{fmtMod(m)}
{ab.name}
); })}
{/* Saving throws */} ● = майстерність}>
{SAVES.map((s) => { const hasProf = saveProf(s.k); const m = mod(abilityVal(s.k)) + (hasProf ? ch.profBonus : 0); return (
rollSave(s)} data-tooltip={hasProf ? `мод ${s.k} (${fmtMod(mod(abilityVal(s.k)))}) + проф (${ch.profBonus})` : `мод ${s.k}`}> { e.stopPropagation(); toggleSaveProf(s.k); }}/> {s.k} = 0 ? 'var(--ink-0)' : 'var(--crimson-1)' }}>{fmtMod(m)}
); })}
{/* Personality */}