// ============================================================ // SCREEN 7 · NOTES / JOURNAL // ============================================================ const KIND_META = { battle: { label: 'Битва', icon: 'sword' }, find: { label: 'Знахідка', icon: 'star' }, npc: { label: 'Зустріч', icon: 'character' }, milestone: { label: 'Важливе', icon: 'star' }, travel: { label: 'Подорож', icon: 'hourglass' }, lore: { label: 'Лор', icon: 'rune' }, }; const BLANK_TIMELINE_EVENT = () => ({ _id: Math.random().toString(36).slice(2, 10), date: new Date().toLocaleDateString('uk-UA', { day: '2-digit', month: '2-digit', year: 'numeric' }), session: '', kind: 'find', title: '', body: '', related: '', }); const ScreenNotes = ({ ch, setCh, timeline, setTimeline }) => { const { push } = useToast(); if (!ch) return null; const [tab, setTabRaw] = useState(() => sessionStorage.getItem('notes_tab') || 'sessions'); const setTab = (t) => { sessionStorage.setItem('notes_tab', t); setTabRaw(t); }; const [quickNote, setQuickNoteRaw] = useState(() => sessionStorage.getItem('notes_qn') || ''); const setQuickNote = (v) => { const s = typeof v === 'function' ? v(quickNote) : v; sessionStorage.setItem('notes_qn', s); setQuickNoteRaw(s); }; // ── Sessions ── const sessions = ch.sessions ?? SESSIONS; const setSessions = (updater) => setCh(c => ({ ...c, sessions: typeof updater === 'function' ? updater(c.sessions ?? SESSIONS) : updater, })); const [timelineFilter, setTimelineFilter] = useState('ALL'); const [addSessionOpen, setAddSessionOpen] = useState(false); const [newSessionTitle, setNewSessionTitle] = useState(''); const [newSessionBody, setNewSessionBody] = useState(''); const [newSessionDate, setNewSessionDate] = useState(''); const [newSessionTags, setNewSessionTags] = useState(''); const [editSessionOpen, setEditSessionOpen] = useState(false); const [editSessionDraft, setEditSessionDraft] = useState(null); const [expandedSessions, setExpandedSessions] = useState({}); const openEditSession = (s) => { setEditSessionDraft({ ...s }); setEditSessionOpen(true); }; const saveEditSession = () => { if (editSessionDraft.n == null) { setEditSessionOpen(false); return; } setSessions(ss => ss.map(s => s.n === editSessionDraft.n ? editSessionDraft : s)); setEditSessionOpen(false); push({ label: `Сесію #${editSessionDraft.n} збережено` }); }; const deleteSession = (n) => { if (!window.confirm(`Видалити запис сесії #${n}?`)) return; setSessions(ss => ss.filter(s => s.n !== n)); setEditSessionOpen(false); push({ label: `Запис #${n} видалено` }); }; const todayStr = () => new Date().toLocaleDateString('uk-UA', { day: '2-digit', month: '2-digit', year: 'numeric' }); const openAddSession = () => { setNewSessionTitle(''); setNewSessionBody(''); setNewSessionDate(todayStr()); setNewSessionTags(''); setAddSessionOpen(true); }; const nextSessionN = (ss) => ss.length > 0 ? Math.max(...ss.map(x => x.n)) + 1 : 1; const submitNewSession = () => { if (!newSessionTitle.trim() && !newSessionBody.trim()) return; const tags = newSessionTags.split(',').map(t => t.trim()).filter(Boolean); setSessions(s => [{ n: nextSessionN(s), date: newSessionDate.trim() || todayStr(), title: newSessionTitle.trim() || newSessionBody.trim().slice(0, 60), body: newSessionBody.trim(), tags: tags.length ? tags : ['нова'], }, ...s]); setAddSessionOpen(false); setTab('sessions'); push({ label: `Сесію додано: ${newSessionTitle.trim() || 'новий запис'}` }); }; // ── Timeline (global) ── const [addTimelineOpen, setAddTimelineOpen] = useState(false); const [newEvent, setNewEvent] = useState(BLANK_TIMELINE_EVENT()); // timelineDetailId — стабільний _id відкритої події; timelineDetail деривується з timeline щоразу const [timelineDetailId, setTimelineDetailId] = useState(null); const timelineDetail = timelineDetailId ? (timeline.find(e => e._id === timelineDetailId) ?? null) : null; const [timelineEditMode, setTimelineEditMode] = useState(false); const [timelineEditDraft, setTimelineEditDraft] = useState(null); const parseUADate = (s) => { const [d, m, y] = (s || '').split('.').map(Number); return (y > 0 && m > 0 && d > 0) ? new Date(y, m - 1, d).getTime() : 0; }; const filteredTimeline = (timelineFilter === 'ALL' ? timeline : timeline.filter(e => e.kind === timelineFilter)) .slice().sort((a, b) => parseUADate(b.date) - parseUADate(a.date)); const openAddTimeline = () => { setNewEvent(BLANK_TIMELINE_EVENT()); setAddTimelineOpen(true); }; const submitNewEvent = () => { if (!newEvent.title.trim()) return; const meta = KIND_META[newEvent.kind] || KIND_META['find']; const ev = { _id: newEvent._id || Math.random().toString(36).slice(2, 10), date: newEvent.date.trim() || todayStr(), session: newEvent.session ? (parseInt(newEvent.session, 10) || null) : null, kind: newEvent.kind, kindLabel: meta.label, icon: meta.icon, title: newEvent.title.trim(), body: newEvent.body.trim(), related: newEvent.related.split(',').map(r => r.trim()).filter(Boolean), }; setTimeline(tl => [ev, ...tl]); setAddTimelineOpen(false); push({ label: `Подію додано: ${ev.title}` }); }; const openTimelineDetail = (ev) => { // Якщо у старій події немає _id (завантажена до патчу) — мінтимо на льоту і зберігаємо if (!ev._id) { const id = Math.random().toString(36).slice(2, 10); setTimeline(tl => tl.map(e => e === ev ? { ...e, _id: id } : e)); setTimelineDetailId(id); } else { setTimelineDetailId(ev._id); } setTimelineEditMode(false); setTimelineEditDraft(null); }; const startTimelineEdit = () => { setTimelineEditDraft({ ...timelineDetail, related: (timelineDetail.related || []).join(', '), session: timelineDetail.session != null ? String(timelineDetail.session) : '', }); setTimelineEditMode(true); }; const saveTimelineEdit = () => { const meta = KIND_META[timelineEditDraft.kind] || KIND_META['find']; const updated = { ...timelineEditDraft, kindLabel: meta.label, icon: meta.icon, session: timelineEditDraft.session ? (parseInt(timelineEditDraft.session, 10) || null) : null, related: typeof timelineEditDraft.related === 'string' ? timelineEditDraft.related.split(',').map(r => r.trim()).filter(Boolean) : timelineEditDraft.related, }; setTimeline(tl => tl.map(e => e._id === timelineDetailId ? updated : e)); setTimelineEditMode(false); setTimelineEditDraft(null); push({ label: `Подію оновлено: ${updated.title}` }); }; const deleteTimelineEvent = () => { if (!window.confirm(`Видалити подію «${timelineDetail?.title}»?`)) return; setTimeline(tl => tl.filter(e => e._id !== timelineDetailId)); setTimelineDetailId(null); push({ label: 'Подію видалено' }); }; // ── Quests (per-character) ── const quests = ch.quests ?? []; const setQuests = (updater) => setCh(c => ({ ...c, quests: typeof updater === 'function' ? updater(c.quests ?? []) : updater, })); const [addQuestOpen, setAddQuestOpen] = useState(false); const [newQuest, setNewQuest] = useState({ name: '', kind: 'побічний', progress: 0 }); const toggleQuestStatus = (i) => setQuests(qs => qs.map((q, j) => j === i ? { ...q, status: q.status === 'done' ? 'active' : 'done' } : q)); const setQuestProgress = (i, v) => setQuests(qs => qs.map((q, j) => j === i ? { ...q, progress: Math.max(0, Math.min(100, v)) } : q)); const deleteQuest = (i, name) => { if (!window.confirm(`Видалити квест «${name}»?`)) return; setQuests(qs => qs.filter((_, j) => j !== i)); }; const submitNewQuest = () => { if (!newQuest.name.trim()) return; setQuests(qs => [...qs, { ...newQuest, name: newQuest.name.trim(), status: 'active' }]); setNewQuest({ name: '', kind: 'побічний', progress: 0 }); setAddQuestOpen(false); push({ label: `Квест додано: ${newQuest.name.trim()}` }); }; // ── NPCs (per-character) ── const npcs = ch.npcs ?? []; const setNpcs = (updater) => setCh(c => ({ ...c, npcs: typeof updater === 'function' ? updater(c.npcs ?? []) : updater, })); const [npcDetailId, setNpcDetailId] = useState(null); const npcDetail = npcDetailId ? (npcs.find(n => n._id === npcDetailId) ?? null) : null; const [npcEditMode, setNpcEditMode] = useState(false); const [npcEditDraft, setNpcEditDraft] = useState(null); const openNpcDetail = (n) => { // Мінтимо _id для старих NPC без ідентифікатора if (!n._id) { const id = Math.random().toString(36).slice(2, 10); setNpcs(ns => ns.map(x => x === n ? { ...x, _id: id } : x)); setNpcDetailId(id); } else { setNpcDetailId(n._id); } setNpcEditMode(false); setNpcEditDraft(null); }; const startNpcEdit = () => { setNpcEditDraft({ ...npcDetail }); setNpcEditMode(true); }; const saveNpcEdit = () => { setNpcs(ns => ns.map(n => n._id === npcDetailId ? npcEditDraft : n)); setNpcEditMode(false); setNpcEditDraft(null); }; const deleteNpc = () => { if (!window.confirm(`Видалити NPC «${npcDetail.name}»?`)) return; setNpcs(ns => ns.filter(n => n._id !== npcDetailId)); setNpcDetailId(null); push({ label: `NPC видалено: ${npcDetail.name}` }); }; const [addNpcOpen, setAddNpcOpen] = useState(false); const [newNpc, setNewNpc] = useState({ name: '', rel: 'нейтр.', note: '' }); const submitNewNpc = () => { if (!newNpc.name.trim()) return; setNpcs(ns => [...ns, { ...newNpc, name: newNpc.name.trim(), _id: Math.random().toString(36).slice(2, 10) }]); setNewNpc({ name: '', rel: 'нейтр.', note: '' }); setAddNpcOpen(false); push({ label: `NPC додано: ${newNpc.name.trim()}` }); }; const saveQuickNote = () => { if (!quickNote.trim()) return; setSessions(s => { const entry = { n: nextSessionN(s), date: new Date().toLocaleDateString('uk-UA', { day: '2-digit', month: '2-digit', year: 'numeric' }), title: quickNote.trim().split('\n')[0].slice(0, 60), body: quickNote.trim(), tags: ['нотатка'], }; return [entry, ...s]; }); setQuickNote(''); setTab('sessions'); }; return ( <> {tab === 'sessions' && Нова сесія} {tab === 'timeline' && Подія} } />
{[ ['sessions', 'Сесії', 'book'], ['timeline', 'Хронологія', 'hourglass'], ['quests', 'Квести', 'scroll'], ['npcs', 'NPC та локації', 'character'], ].map(([id, label, icon]) => ( ))}
{/* MAIN COLUMN */}
{tab === 'sessions' && ( {sessions.length === 0 && (
Немає записів — натисни «Нова сесія»
)} {sessions.map(s => { const LIMIT = 400; const isLong = (s.body || '').length > LIMIT; const expanded = !!expandedSessions[s.n]; const displayBody = isLong && !expanded ? s.body.slice(0, LIMIT) + '…' : (s.body || ''); return (
{s.n.toString().padStart(2, '0')}
сесія

{s.title}

{s.date}
openEditSession(s)}>
{displayBody}
{isLong && ( )}
{(s.tags || []).map(t => {t})}
); })} )} {tab === 'timeline' && ( setTimelineFilter('ALL')}>Усі setTimelineFilter('battle')}>Битви setTimelineFilter('find')}>Знахідки setTimelineFilter('npc')}>NPC setTimelineFilter('milestone')}>Важливі setTimelineFilter('travel')}>Подорожі setTimelineFilter('lore')}>Лор
}> {filteredTimeline.length === 0 && (
Немає подій — натисни «+ Подія»
)}
{filteredTimeline.map((ev, i) => (
{ev.date} {ev.kindLabel} {ev.session && сесія {ev.session}}
openTimelineDetail(ev)}>
{ev.title}
{ev.body}
{ev.related && ev.related.length > 0 && (
{ev.related.map((r, j) => ↪ {r})}
)}
))} {timeline.length > 0 && (
початок історії
)}
)} {tab === 'quests' && ( q.status === 'active').length} активних`} action={ setAddQuestOpen(true)}> Квест}> {quests.length === 0 && (
Немає квестів
)} {quests.map((q, i) => (
toggleQuestStatus(i)}/> {q.name} {q.kind}
setQuestProgress(i, Math.max(0, Math.min(100, parseInt(e.target.value, 10) || 0)))} onClick={e => e.stopPropagation()}/> %
deleteQuest(i, q.name)}/>
))} )} {tab === 'npcs' && ( setAddNpcOpen(true)}> NPC}> {npcs.length === 0 && (
Немає NPC
)} {npcs.map((n, i) => (
{n.name.split(' ').map(p => p[0]).slice(0, 2).join('')}
{n.name} {n.rel}
{n.note}
openNpcDetail(n)}/>
))} )}
{/* SIDE COLUMN */}