866 lines
43 KiB
JavaScript
866 lines
43 KiB
JavaScript
// Спільне ядро клієнта: мережа, стан, бічна дошка, звинувачення, модалки.
|
||
"use strict";
|
||
|
||
const App = (window.App = {
|
||
ws: null,
|
||
role: null,
|
||
session: null,
|
||
init: null, // {district, citizens, intro, options...}
|
||
state: null, // останній снапшот від сервера
|
||
handlers: {},
|
||
on(t, fn) {
|
||
(this.handlers[t] ??= []).push(fn);
|
||
},
|
||
send(m) {
|
||
if (this.ws && this.ws.readyState === 1) this.ws.send(JSON.stringify(m));
|
||
},
|
||
byId(cid) {
|
||
return this.init.citizens.find((c) => c.id === cid);
|
||
},
|
||
});
|
||
|
||
const $ = (sel) => document.querySelector(sel);
|
||
const el = (tag, cls, html) => {
|
||
const e = document.createElement(tag);
|
||
if (cls) e.className = cls;
|
||
if (html != null) e.innerHTML = html;
|
||
return e;
|
||
};
|
||
const esc = (s) =>
|
||
String(s).replace(
|
||
/[&<>"]/g,
|
||
(c) => ({ "&": "&", "<": "<", ">": ">", '"': """ })[c],
|
||
);
|
||
|
||
function toast(txt) {
|
||
const t = el("div", "toast", esc(txt));
|
||
$("#toasts").append(t);
|
||
setTimeout(() => t.remove(), 4200);
|
||
}
|
||
|
||
// Підказки приховані за замовчуванням — спершу думаємо самі.
|
||
function hintBlock(text) {
|
||
const wrap = el("div", "hintwrap");
|
||
if (!text) return wrap;
|
||
const btn = el("button", "small", "💡 Підказка");
|
||
const body = el("div", "small dim");
|
||
body.style.cssText = "display:none;margin-top:4px";
|
||
body.textContent = text;
|
||
btn.onclick = () => {
|
||
body.style.display = body.style.display === "none" ? "block" : "none";
|
||
};
|
||
wrap.append(btn, body);
|
||
return wrap;
|
||
}
|
||
|
||
// ---------- Мережа ----------
|
||
function connect(code, role) {
|
||
App.noReconnect = false;
|
||
const ws = (App.ws = new WebSocket(`ws://${location.host}`));
|
||
ws.onopen = () =>
|
||
ws.send(
|
||
JSON.stringify({ t: "join", session: code, role, pos: App.lastFieldPos }),
|
||
);
|
||
ws.onmessage = (e) => {
|
||
const m = JSON.parse(e.data);
|
||
if (m.t === "reset") {
|
||
toast("Сейв видалено — справа починається з нуля.");
|
||
setTimeout(() => location.reload(), 1400);
|
||
return;
|
||
}
|
||
if (m.t === "joinerr") {
|
||
// сесія заповнена по цій ролі — лишаємось у лобі, без автоперепідключення
|
||
App.noReconnect = true;
|
||
toast(m.txt);
|
||
ws.close();
|
||
return;
|
||
}
|
||
if (m.t === "pos") App.fieldPositions = m.field || [];
|
||
if (m.t === "toast") {
|
||
if (m.txt.includes("підписав ордер") && window.Snd) Snd.stamp();
|
||
return toast(m.txt);
|
||
}
|
||
if (m.t === "init") {
|
||
App.init = m;
|
||
App.role = m.role;
|
||
App.myNum = m.num;
|
||
document.body.classList.add("role-" + m.role);
|
||
$("#lobby").style.display = "none";
|
||
$("#app").classList.add("on");
|
||
$("#b-session").textContent = "справа: " + App.session;
|
||
for (const fn of App.handlers.init) fn(m);
|
||
showIntro();
|
||
return;
|
||
}
|
||
if (m.t === "state") {
|
||
App.state = m;
|
||
$("#b-field").classList.toggle("on", m.online.field > 0);
|
||
$("#b-analyst").classList.toggle("on", m.online.analyst > 0);
|
||
$("#b-field").textContent = "поле" + (m.online.field > 1 ? " ×" + m.online.field : "");
|
||
$("#b-analyst").textContent = "аналітик" + (m.online.analyst > 1 ? " ×" + m.online.analyst : "");
|
||
renderSide();
|
||
renderEnd();
|
||
for (const fn of App.handlers.state) fn(m);
|
||
return;
|
||
}
|
||
for (const fn of App.handlers[m.t] || []) fn(m);
|
||
};
|
||
ws.onclose = () => {
|
||
if (App.noReconnect) return;
|
||
toast("Зв'язок втрачено, перепідключення…");
|
||
setTimeout(() => connect(code, role), 1500);
|
||
};
|
||
}
|
||
|
||
// ---------- Лобі ----------
|
||
for (const b of document.querySelectorAll(".rolebtn")) {
|
||
b.onclick = () => {
|
||
const code = ($("#code").value.trim() || "DEFAULT").toUpperCase();
|
||
App.session = code;
|
||
localStorage.setItem("ch3", JSON.stringify({ code, role: b.dataset.role }));
|
||
if (window.Snd) Snd.start(b.dataset.role);
|
||
connect(code, b.dataset.role);
|
||
};
|
||
}
|
||
try {
|
||
const prev = JSON.parse(localStorage.getItem("ch3"));
|
||
if (prev && prev.code) $("#code").value = prev.code;
|
||
} catch {}
|
||
|
||
// ---------- Бічна дошка ----------
|
||
let sideTab = "ev";
|
||
let showHidden = false; // згорнута секція «Приховані» на дні дошки
|
||
let evFilter = ""; // текстовий фільтр по картках доказів
|
||
let evTag = null; // активний чип-тег (null = всі)
|
||
|
||
// Дошка перемальовується на кожен стан — тож недодруковані нотатки треба зберігати,
|
||
// інакше broadcast напарника стирає те, що ти зараз друкуєш. Тримаємо чернетку в мапі
|
||
// (ключ = data-draft-key поля) і відновлюємо фокус/курсор після перемальовки.
|
||
const noteDraft = {};
|
||
// Але фокус повертаємо, ЛИШЕ якщо гравець справді щойно друкував. Раніше було
|
||
// «завжди, якщо колись друкував»: варто польовому один раз клацнути в нотатку,
|
||
// і кожен наступний broadcast знову садив фокус у той інпут — а обробник клавіш
|
||
// у field.js свідомо ігнорує натискання в INPUT/TEXTAREA. Клавіатура мовчала,
|
||
// візуально нічого не змінювалось.
|
||
const FOCUS_GRACE_MS = 3000;
|
||
let lastTypedAt = 0;
|
||
let restoringFocus = false; // наш власний .focus() не має продовжувати вікно
|
||
{
|
||
const side = $("#side");
|
||
const touch = () => {
|
||
if (!restoringFocus) lastTypedAt = Date.now();
|
||
};
|
||
// capture: фільтр дошки сам кличе renderSide() зі свого oninput, тож позначку
|
||
// часу треба поставити ДО того, як обробник цілі встигне перемалювати панель.
|
||
side.addEventListener("input", touch, true);
|
||
side.addEventListener("focusin", touch, true);
|
||
}
|
||
function wireDraft(input, key) {
|
||
input.dataset.draftKey = key;
|
||
if (noteDraft[key]) input.value = noteDraft[key];
|
||
input.addEventListener("input", () => {
|
||
noteDraft[key] = input.value;
|
||
});
|
||
}
|
||
|
||
// Які нотатки зараз відкриті на правку. Дошка перемальовується на кожен снапшот
|
||
// стану, тож цей прапорець мусить жити ПОЗА рендером — інакше будь-яка дія
|
||
// напарника згортала б поле просто під пальцями.
|
||
const noteEditing = new Set();
|
||
|
||
// Рядок нотатки на дошці: текст, автор, ✎ і видалення. Один рендер на два місця —
|
||
// спільні нотатки у вкладці й точкові на картці доказу, — щоб вони не розійшлися,
|
||
// як свого часу розійшлися дві копії пошуку по базі.
|
||
// compact — вигляд для картки доказу (рядок) проти вкладки «Нотатки» (картка);
|
||
// draftKey — власний ключ чернетки, НЕ спільний із полем нової нотатки;
|
||
// onSave(txt) / onDel() — хто саме шле повідомлення, вирішує викличне місце.
|
||
// Правка йде на місці: сервер міняє лише txt, тож нотатка лишається там, де була.
|
||
function noteRow(n, { compact, draftKey, onSave, onDel }) {
|
||
const author = n.by === "field" ? "польовий" : "аналітик";
|
||
const row = el("div", compact ? "small dim" : "card");
|
||
|
||
if (noteEditing.has(n.id)) {
|
||
const inp = el(compact ? "input" : "textarea", "small");
|
||
if (!compact) inp.rows = 2;
|
||
inp.style.cssText = "width:100%";
|
||
inp.value = noteDraft[draftKey] ?? n.txt;
|
||
wireDraft(inp, draftKey);
|
||
const finish = () => {
|
||
noteEditing.delete(n.id);
|
||
delete noteDraft[draftKey];
|
||
};
|
||
const save = () => {
|
||
const txt = inp.value.trim();
|
||
const changed = txt && txt !== n.txt;
|
||
finish();
|
||
if (changed) onSave(txt);
|
||
renderSide();
|
||
};
|
||
const cancel = () => {
|
||
finish();
|
||
renderSide();
|
||
};
|
||
inp.onkeydown = (e) => {
|
||
// У textarea Shift+Enter лишається переносом рядка — зберігає лише чистий Enter.
|
||
if (e.key === "Enter" && (compact || !e.shiftKey)) {
|
||
e.preventDefault();
|
||
save();
|
||
}
|
||
// Esc скасовує правку і далі не йде: глобальний обробник інакше просто
|
||
// зняв би фокус, і поле лишилось би відкритим без причини.
|
||
if (e.key === "Escape") {
|
||
e.stopPropagation();
|
||
cancel();
|
||
}
|
||
};
|
||
const ok = el("button", "small", "Зберегти");
|
||
ok.onclick = save;
|
||
const no = el("button", "small", "Скасувати");
|
||
no.onclick = cancel;
|
||
row.append(inp, ok, no);
|
||
return row;
|
||
}
|
||
|
||
if (compact)
|
||
row.append(el("span", "", `✎ ${esc(n.txt)} `), el("span", "tag", author));
|
||
else row.append(el("div", "", esc(n.txt)), el("div", "small dim", author));
|
||
|
||
const ed = el("button", "small", "✎");
|
||
ed.title = "редагувати нотатку";
|
||
ed.onclick = () => {
|
||
noteEditing.add(n.id);
|
||
renderSide();
|
||
// Перемальовка щойно замінила вузол — фокус ставимо на новий, інакше
|
||
// гравцеві довелося б клацати ще раз у поле, яке він сам щойно відкрив.
|
||
const f = $(`#sidebody [data-draft-key="${CSS.escape(draftKey)}"]`);
|
||
if (f) {
|
||
f.focus();
|
||
f.setSelectionRange(f.value.length, f.value.length);
|
||
}
|
||
};
|
||
const del = el("button", "small", compact ? "×" : "видалити");
|
||
del.title = "видалити нотатку";
|
||
del.onclick = onDel;
|
||
row.append(ed, del);
|
||
return row;
|
||
}
|
||
$("#sidetabs").onclick = (e) => {
|
||
const b = e.target.closest("button");
|
||
if (!b) return;
|
||
sideTab = b.dataset.tab;
|
||
for (const x of $("#sidetabs").children) x.classList.toggle("on", x === b);
|
||
renderSide();
|
||
};
|
||
|
||
// Мітки. На картках доказів лишається ✓/✗/…, а на людях трьох станів замало —
|
||
// треба вести кілька версій одночасно. Тому для ключів 'c:' окрема палітра
|
||
// кольорів. Що саме означає кожен колір — вирішують гравці: жодних підписів,
|
||
// легенд і тултипів ми не нав'язуємо. «Сховати» лишається в обох: на ньому
|
||
// тримається секція «Приховані».
|
||
const EV_MARKS = [
|
||
["tick", "відмітити", null],
|
||
["cross", "викреслити", null],
|
||
["hide", "сховати", null],
|
||
];
|
||
// Порядок кольорів — це порядок кнопок. Замість синього тут фіолетовий: синій
|
||
// (#5b8dbf) і зелений (#5aa870) майже збігалися за яскравістю, і на кольоровій
|
||
// лівій грані рядка — смужці 4px — розрізнити їх було майже неможливо.
|
||
const PEOPLE_MARKS = [
|
||
["green", null, "var(--mk-green)"],
|
||
["red", null, "var(--mk-red)"],
|
||
["violet", null, "var(--mk-violet)"],
|
||
["amber", null, "var(--mk-amber)"],
|
||
["hide", "сховати", null],
|
||
];
|
||
const MARK_GLYPH = { tick: "✓", cross: "✗", hide: "…" };
|
||
// Сейви зі старих версій тримають на людях ✓/✗ — читаємо їх як два перші кольори,
|
||
// а колишній синій показуємо як фіолетовий, що прийшов йому на зміну.
|
||
const LEGACY_PERSON_MARK = { tick: "green", cross: "red", blue: "violet" };
|
||
const isPersonKey = (key) => String(key).startsWith("c:");
|
||
|
||
function markOf(key) {
|
||
const m = App.state.board.marks[key];
|
||
if (!m) return null;
|
||
return isPersonKey(key) ? LEGACY_PERSON_MARK[m] || m : m;
|
||
}
|
||
|
||
function markButtons(key) {
|
||
const cur = markOf(key);
|
||
const mk = el("div", "mk");
|
||
for (const [kind, title, colour] of isPersonKey(key)
|
||
? PEOPLE_MARKS
|
||
: EV_MARKS) {
|
||
const b = el(
|
||
"button",
|
||
(colour ? "swatch " : "") + (cur === kind ? "on" : ""),
|
||
colour
|
||
? `<span class="dot" style="background:${colour}"></span>`
|
||
: MARK_GLYPH[kind],
|
||
);
|
||
if (title) b.title = title; // кольори лишаємо без підписів — значення за гравцями
|
||
if (colour) b.style.color = colour;
|
||
b.onclick = (ev) => {
|
||
ev.stopPropagation();
|
||
App.send({ t: "mark", key, kind });
|
||
};
|
||
mk.append(b);
|
||
}
|
||
return mk;
|
||
}
|
||
|
||
function cardClasses(key) {
|
||
const m = markOf(key);
|
||
if (!m || m === "hide") return "";
|
||
return isPersonKey(key) ? " mk-" + m : " " + m;
|
||
}
|
||
|
||
// Свотч кольору для місць, де мітку лише показують (база польового).
|
||
function markSwatch(kind) {
|
||
const found = PEOPLE_MARKS.find(([k]) => k === kind);
|
||
if (!found || !found[2]) return "";
|
||
return `<span class="dot" style="background:${found[2]}"></span>`;
|
||
}
|
||
|
||
// Прокрутити дошку до доказу за id і коротко підсвітити. Якщо він у згорнутій
|
||
// секції «Приховані» — спершу розгортаємо її й перемальовуємо.
|
||
function jumpToEvidence(id) {
|
||
const find = () =>
|
||
document.querySelector(`#sidebody [data-ev="${CSS.escape(id)}"]`);
|
||
let card = find();
|
||
if (!card && !showHidden) {
|
||
showHidden = true;
|
||
renderSide();
|
||
card = find();
|
||
}
|
||
if (!card) return;
|
||
card.scrollIntoView({ behavior: "smooth", block: "center" });
|
||
card.classList.add("flash");
|
||
setTimeout(() => card.classList.remove("flash"), 1300);
|
||
}
|
||
|
||
function renderSide() {
|
||
if (!App.state) return;
|
||
const body = $("#sidebody");
|
||
// запам'ятати, яке поле нотатки в фокусі, щоб повернути його після перемальовки
|
||
const act = document.activeElement;
|
||
const activeKey = act && act.dataset ? act.dataset.draftKey : null;
|
||
const caret = activeKey ? act.selectionStart : null;
|
||
body.innerHTML = "";
|
||
const marks = App.state.board.marks;
|
||
|
||
if (sideTab === "ev") {
|
||
const pins = App.state.board.pins;
|
||
const found = App.state.found;
|
||
const tagOf = (e) => e.tag || "запит";
|
||
body.append(
|
||
el(
|
||
"div",
|
||
"dim small",
|
||
"Закріплене 📌 піде в справу для прокурора. Знайдено: " + found.length,
|
||
),
|
||
);
|
||
|
||
// Пошук + чипи-теги. До фіналу на дошці 30+ карток одним стовпчиком, і знайти
|
||
// потрібну можна лише прокруткою. Чипи будуємо з тегів, що реально є на дошці, —
|
||
// так жоден доказ не лишається поза жодним зрізом.
|
||
const q = el("input", "small evfilter");
|
||
q.placeholder = "🔎 фільтр за текстом…";
|
||
q.value = evFilter;
|
||
q.dataset.draftKey = "evfilter"; // щоб фокус/курсор пережили перемальовку
|
||
q.oninput = () => {
|
||
evFilter = q.value;
|
||
renderSide();
|
||
};
|
||
body.append(q);
|
||
|
||
const chips = el("div", "chips");
|
||
const allTags = [...new Set(found.map(tagOf))].sort((a, b) =>
|
||
a.localeCompare(b, "uk"),
|
||
);
|
||
for (const t of [null, ...allTags]) {
|
||
const b = el("button", "chip" + (evTag === t ? " on" : ""), t || "всі");
|
||
b.onclick = () => {
|
||
evTag = evTag === t ? null : t;
|
||
renderSide();
|
||
};
|
||
chips.append(b);
|
||
}
|
||
body.append(chips);
|
||
|
||
// Фільтр застосовуємо ДО поділу на закріплені/решту, щоб 📌 не зникали з очей.
|
||
const low = evFilter.trim().toLowerCase();
|
||
const passes = (e) =>
|
||
(!evTag || tagOf(e) === evTag) &&
|
||
(!low ||
|
||
`${e.title} ${e.detail} ${e.from || ""}`.toLowerCase().includes(low));
|
||
const shown = found.filter(passes);
|
||
|
||
// Закріплені — зверху, від останнього запіненого до першого; далі решта доказів,
|
||
// від найновішого знайденого до найстарішого. (pins — у порядку закріплення.)
|
||
const pinnedCards = [...pins]
|
||
.reverse()
|
||
.map((id) => shown.find((e) => e.id === id))
|
||
.filter(Boolean);
|
||
const rest = [...shown].reverse().filter((e) => !pins.includes(e.id));
|
||
|
||
const buildCard = (e) => {
|
||
const key = "e:" + e.id;
|
||
const isPinned = pins.includes(e.id);
|
||
const c = el("div", "card" + cardClasses(key) + (isPinned ? " pinned" : ""));
|
||
c.dataset.ev = e.id; // якір для прокрутки-до-доказу
|
||
const t = el("div", "t");
|
||
t.append(el("b", "", esc(e.title)), el("span", "tag", esc(tagOf(e))));
|
||
const pin = el("button", "pinbtn" + (isPinned ? " on" : ""), "📌");
|
||
pin.title = isPinned ? "відкріпити" : "закріпити для прокурора";
|
||
pin.onclick = () => App.send({ t: "pin", evId: e.id });
|
||
t.append(pin);
|
||
c.append(t);
|
||
// Звідки знахідка — лише для фізичних: решта прийшла з термінала чи розмови.
|
||
if (e.from) c.append(el("div", "small dim orig", esc(e.from)));
|
||
c.append(el("div", "small", esc(e.detail)));
|
||
// Експертиза називає доказ, який розбирала, і веде до нього (прокрутка + підсвітка).
|
||
if (e.ref) {
|
||
const src = found.find((x) => x.id === e.ref);
|
||
if (src) {
|
||
const link = el("button", "evref small", `↳ аналіз доказу: «${esc(src.title)}»`);
|
||
link.onclick = () => jumpToEvidence(e.ref);
|
||
c.append(link);
|
||
}
|
||
}
|
||
c.append(markButtons(key));
|
||
const notes = (App.state.board.enotes || {})[e.id] || [];
|
||
for (const n of notes)
|
||
c.append(
|
||
noteRow(n, {
|
||
compact: true,
|
||
draftKey: "edit:" + n.id,
|
||
onSave: (txt) =>
|
||
App.send({ t: "enote_edit", evId: e.id, id: n.id, txt }),
|
||
onDel: () => App.send({ t: "enote_del", evId: e.id, id: n.id }),
|
||
}),
|
||
);
|
||
const ni = el("input", "small");
|
||
ni.placeholder = "нотатка до доказу…";
|
||
ni.style.cssText = "width:100%;margin-top:4px";
|
||
wireDraft(ni, "e:" + e.id);
|
||
ni.onkeydown = (ev) => {
|
||
if (ev.key === "Enter" && ni.value.trim()) {
|
||
App.send({ t: "enote", evId: e.id, txt: ni.value });
|
||
ni.value = "";
|
||
delete noteDraft["e:" + e.id];
|
||
}
|
||
};
|
||
c.append(ni);
|
||
return c;
|
||
};
|
||
|
||
const hidden = [];
|
||
const visible = (arr) =>
|
||
arr.filter((e) => {
|
||
if (marks["e:" + e.id] === "hide") {
|
||
hidden.push(e);
|
||
return false;
|
||
}
|
||
return true;
|
||
});
|
||
const pinnedVisible = visible(pinnedCards);
|
||
const restVisible = visible(rest);
|
||
for (const e of pinnedVisible) body.append(buildCard(e));
|
||
// Межа теки: видно, де закінчується те, що піде прокуророві.
|
||
if (pinnedVisible.length && restVisible.length)
|
||
body.append(el("div", "divider small dim", "— решта доказів —"));
|
||
for (const e of restVisible) body.append(buildCard(e));
|
||
if (!pinnedVisible.length && !restVisible.length && !hidden.length)
|
||
body.append(
|
||
el(
|
||
"div",
|
||
"dim small",
|
||
found.length
|
||
? "За цим фільтром нічого немає."
|
||
: "Дошка порожня — знахідки з'являться тут.",
|
||
),
|
||
);
|
||
// Приховані — окрема згорнута секція на дні, кожен доказ окремо (не «одна кнопка = все»)
|
||
if (hidden.length) {
|
||
const head = el(
|
||
"button",
|
||
"small",
|
||
`${showHidden ? "▾" : "▸"} Приховані (${hidden.length})`,
|
||
);
|
||
head.style.cssText = "width:100%;margin-top:10px;text-align:left";
|
||
head.onclick = () => {
|
||
showHidden = !showHidden;
|
||
renderSide();
|
||
};
|
||
body.append(head);
|
||
if (showHidden) for (const e of hidden) body.append(buildCard(e));
|
||
}
|
||
}
|
||
|
||
if (sideTab === "notes") {
|
||
const ta = el("textarea", "", "");
|
||
ta.rows = 2;
|
||
ta.style.width = "100%";
|
||
ta.placeholder = "спільна нотатка…";
|
||
wireDraft(ta, "shared");
|
||
const add = el("button", "primary", "Додати");
|
||
add.onclick = () => {
|
||
if (ta.value.trim()) {
|
||
App.send({ t: "note", txt: ta.value });
|
||
ta.value = "";
|
||
delete noteDraft["shared"];
|
||
}
|
||
};
|
||
body.append(ta, add);
|
||
for (const n of [...App.state.board.notes].reverse())
|
||
body.append(
|
||
noteRow(n, {
|
||
compact: false,
|
||
draftKey: "edit:" + n.id,
|
||
onSave: (txt) => App.send({ t: "note_edit", id: n.id, txt }),
|
||
onDel: () => App.send({ t: "note_del", id: n.id }),
|
||
}),
|
||
);
|
||
}
|
||
|
||
// Повернути фокус і курсор у поле, де друкували до перемальовки, — але лише
|
||
// якщо друкували щойно (див. FOCUS_GRACE_MS): інакше поле перехоплює клавіатуру
|
||
// польового назавжди.
|
||
if (activeKey && Date.now() - lastTypedAt < FOCUS_GRACE_MS) {
|
||
const again = body.querySelector(`[data-draft-key="${activeKey}"]`);
|
||
if (again) {
|
||
restoringFocus = true;
|
||
again.focus();
|
||
if (caret != null)
|
||
try {
|
||
again.setSelectionRange(caret, caret);
|
||
} catch {}
|
||
restoringFocus = false;
|
||
}
|
||
}
|
||
}
|
||
|
||
// ---------- Досьє ----------
|
||
function showDossier(c) {
|
||
const dnaCells = c.dna
|
||
.map(
|
||
(v) =>
|
||
`<span style="display:inline-block;width:10px;height:${6 + v * 2}px;background:var(--blue);margin-right:2px;vertical-align:bottom"></span>`,
|
||
)
|
||
.join("");
|
||
const m = openModal(`
|
||
<h3>${esc(c.name)}</h3>
|
||
<table>
|
||
<tr><th>Вік / стать</th><td>${c.age} / ${c.sex === "ч" ? "чол." : "жін."} (${c.birthYear} р.н.)</td></tr>
|
||
<tr><th>Адреса</th><td>${esc(c.home)}</td></tr>
|
||
<tr><th>Робота</th><td>${esc(c.job)}${c.workplace ? " — " + esc(bName(c.workplace)) : ""}</td></tr>
|
||
<tr><th>Телефон</th><td>${esc(c.phone)}</td></tr>
|
||
<tr><th>Зріст / взуття</th><td>${c.height} см / ${c.shoe} розмір</td></tr>
|
||
<tr><th>Кров / відбитки</th><td>${esc(c.blood)} / ${esc(c.printType)}</td></tr>
|
||
<tr><th>Верхній одяг</th><td>${esc(c.coat)}</td></tr>
|
||
<tr><th>Звички</th><td>${c.smoker ? "курить; " : ""}${c.dog ? "собака " + esc(c.dog) + "; " : ""}${c.tattoo ? "тату: " + esc(c.tattoo) : ""}</td></tr>
|
||
<tr><th>ДНК-профіль</th><td>${dnaCells}</td></tr>
|
||
</table>`,
|
||
// Ключ із id: досьє іншої людини — це інша модалка, а не дубль цієї.
|
||
{ key: "dossier:" + c.id },
|
||
);
|
||
if (App.state && App.state.warrants.includes(c.id))
|
||
m.inner.append(el("div", "small", "📜 Ордер на обшук житла — отримано"));
|
||
m.inner.append(logSection(c.id));
|
||
}
|
||
|
||
// Журнал допитів із мітками (✓ виділити / ✗ закреслити) на кожному записі. Мітки
|
||
// спільні (board.marks, ключ 'q:'+id) — бачать обидві ролі. Модалка статична, тож
|
||
// клік дає оптимістичний відгук одразу; збережений стан підтягнеться при повторному відкритті.
|
||
function logSection(cid) {
|
||
const wrap = el("div");
|
||
const log = (App.state && App.state.log && App.state.log[cid]) || [];
|
||
if (!log.length) return wrap;
|
||
wrap.append(el("div", "syshead", "Журнал допитів"));
|
||
for (const e of log.slice(-12)) {
|
||
const key = "q:" + e.id;
|
||
let cur = App.state.board.marks[key];
|
||
const row = el("div", "small logrow");
|
||
row.style.cssText = "padding-left:7px;border-left:2px solid transparent;margin:5px 0";
|
||
const apply = (mk) => {
|
||
row.style.textDecoration = mk === "cross" ? "line-through" : "none";
|
||
row.style.opacity = mk === "cross" ? ".5" : "1";
|
||
row.style.borderLeftColor = mk === "tick" ? "var(--green,#5aa870)" : "transparent";
|
||
};
|
||
row.append(
|
||
el("div", "", `<span class="dim">${esc(e.q)}</span><br>${esc(e.a)}`),
|
||
);
|
||
const ctrl = el("div", "mk");
|
||
for (const [kind, label] of [
|
||
["tick", "✓"],
|
||
["cross", "✗"],
|
||
]) {
|
||
const b = el("button", cur === kind ? "on" : "", label);
|
||
b.title = kind === "tick" ? "виділити" : "закреслити";
|
||
b.onclick = () => {
|
||
App.send({ t: "mark", key, kind });
|
||
cur = cur === kind ? undefined : kind; // сервер toggl-ить так само
|
||
apply(cur);
|
||
for (const bb of ctrl.children) bb.classList.remove("on");
|
||
if (cur) b.classList.add("on");
|
||
};
|
||
ctrl.append(b);
|
||
}
|
||
row.append(ctrl);
|
||
apply(cur);
|
||
wrap.append(row);
|
||
}
|
||
return wrap;
|
||
}
|
||
function bName(bid) {
|
||
const b = App.init.district.buildings.find((x) => x.id === bid);
|
||
return b ? b.name : bid;
|
||
}
|
||
|
||
// Пошук за іменем — ОДИН на обидві ролі. Кожне слово запиту має бути початком
|
||
// якогось слова в імені; регістр не важить. Раніше це були дві копії (база
|
||
// аналітика і база польового), і аналітикова загубила .toLowerCase() з обох
|
||
// боків — «поліна» не знаходило «Поліна». Сервер шукає банк і реєстри так само.
|
||
function matchName(citizens, query) {
|
||
const words = String(query || "")
|
||
.trim()
|
||
.toLowerCase()
|
||
.split(/\s+/)
|
||
.filter(Boolean);
|
||
if (!words.length) return [];
|
||
return citizens.filter((c) => {
|
||
const nameWords = c.name.toLowerCase().split(/\s+/);
|
||
return words.every((w) => nameWords.some((nw) => nw.startsWith(w)));
|
||
});
|
||
}
|
||
|
||
// Enter у полі = натиснути кнопку поруч. Поля пошуку лежать у <div class="filters">,
|
||
// а не у <form>, тож неявного сабміту браузер не дає — доводиться вішати руками.
|
||
// Хелпер спільний, бо це вже четверте місце з тим самим рядком, а база мешканців
|
||
// існує у двох копіях (аналітик і польовий), які одного разу вже розійшлися.
|
||
const submitOn = (input, button) => {
|
||
input.addEventListener("keydown", (e) => {
|
||
if (e.key === "Enter") {
|
||
e.preventDefault();
|
||
button.click();
|
||
}
|
||
});
|
||
};
|
||
|
||
// ---------- Модалки ----------
|
||
// Кроки більше не заміщають один одного: батьківська модалка лишається під
|
||
// поточною, тож скасування picker'а повертає до розмови, а не в порожнечу.
|
||
// opts.back — явне «← Назад» там, де попередній крок треба перезібрати
|
||
// (порожня тека ордера, шортліст лабораторії); opts.onClose — прибирання за собою.
|
||
//
|
||
// opts.key робить відкриття ІДЕМПОТЕНТНИМ: повторний клік по тій самій кнопці
|
||
// замінює наявний шар, а не кладе ще один зверху. Раніше N кліків по «Справа»
|
||
// давали N однакових модалок стосом — і оскільки .modal це fixed/inset:0, вони
|
||
// накладались ідеально й читались як панель, що не закривається.
|
||
// Ключ — це КОНКРЕТНА ціль ('unit:C8', 'talk:c23'), а не тип панелі: інакше
|
||
// перехід «квартира A2 → квартира A3» затирав би сам себе. Кроки одного ланцюга
|
||
// (відділок → ордер → вибір підстави) ключів не мають зовсім — там стос
|
||
// навмисний, на ньому тримається «← Назад».
|
||
function openModal(html, opts = {}) {
|
||
// Заміна, а не закриття: onClose тут не кличемо свідомо — у деяких місцях він
|
||
// прибирає БАТЬКІВСЬКУ модалку (шортліст лабораторії), і повторний клік
|
||
// рознiс би ланцюг, який гравець не чіпав.
|
||
if (opts.key) {
|
||
const old = document.querySelector(`.modal[data-key="${CSS.escape(opts.key)}"]`);
|
||
if (old) old.remove();
|
||
}
|
||
const wrap = el("div", "modal");
|
||
if (opts.key) wrap.dataset.key = opts.key;
|
||
// Позначка для Esc: locked-модалки (мінігра вилучення) мають власний вихід
|
||
// «Відкласти» — клавіатурою їх не обходять.
|
||
if (opts.locked) wrap.dataset.locked = "1";
|
||
const inner = el("div", "", html);
|
||
wrap.append(inner);
|
||
const close = () => {
|
||
wrap.remove();
|
||
if (opts.onClose) opts.onClose();
|
||
};
|
||
const goBack = opts.back
|
||
? () => {
|
||
wrap.remove();
|
||
opts.back();
|
||
}
|
||
: null;
|
||
if (!opts.locked) {
|
||
wrap.onclick = (e) => {
|
||
if (e.target === wrap) close();
|
||
};
|
||
const foot = el("div", "modalfoot");
|
||
if (goBack) {
|
||
const bk = el("button", "small", "← Назад");
|
||
bk.onclick = goBack;
|
||
foot.append(bk);
|
||
}
|
||
const x = el("button", "small", "Закрити");
|
||
x.onclick = close;
|
||
foot.append(x);
|
||
inner.append(foot);
|
||
// Автори модалок дописують вміст уже після openModal (журнал допитів, підказки).
|
||
// Мікрозадача переносить кнопки в кінець, коли всі синхронні append'и минули.
|
||
queueMicrotask(() => inner.append(foot));
|
||
}
|
||
// Хендли на самому вузлі: глобальний Esc знаходить модалку в DOM і мусить
|
||
// закрити її тим самим шляхом, що й кнопка, — інакше загубиться onClose.
|
||
wrap.__close = close;
|
||
wrap.__back = goBack;
|
||
document.body.append(wrap);
|
||
return { wrap, inner, close };
|
||
}
|
||
|
||
// Прибрати модалку за ключем ззовні: стан прийшов — чернетку звинувачення
|
||
// відкликано, справу закрито. Заміняє ручні змінні-сингтони, які раніше
|
||
// тримали посилання на вузол лише заради цього.
|
||
const closeModalByKey = (key) => {
|
||
const m = document.querySelector(`.modal[data-key="${CSS.escape(key)}"]`);
|
||
if (m) m.remove();
|
||
};
|
||
|
||
// Esc закриває ВЕРХНЮ модалку — саме верхню, бо стос навмисний: жест, який
|
||
// здуває весь ланцюг, зруйнував би навігацію «← Назад» так само, як її зруйнував
|
||
// би глобальний сингтон замість ключів.
|
||
addEventListener("keydown", (e) => {
|
||
if (e.key !== "Escape") return;
|
||
// Перший Esc із поля вводу лише звільняє поле — клавіатура дорожча за модалку:
|
||
// у польового це аварійне повернення керування району (той самий жест у
|
||
// field.js), а для аналітика, де того обробника немає, знімаємо фокус тут.
|
||
// Модалку закриє наступний Esc — уже «чистий».
|
||
const t = e.target;
|
||
if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA")) {
|
||
t.blur();
|
||
return;
|
||
}
|
||
const open = document.querySelectorAll(".modal:not([data-locked])");
|
||
const top = open[open.length - 1];
|
||
if (!top) return;
|
||
e.preventDefault();
|
||
// Є «← Назад» — Esc робить крок назад, а не викидає з усього ланцюга.
|
||
(top.__back || top.__close)();
|
||
});
|
||
|
||
function showIntro() {
|
||
const i = App.init.intro;
|
||
const fieldHow = `
|
||
<div class="syshead">Польовий детектив</div>
|
||
<ul class="small">
|
||
<li>WASD/стрілки — рух, E — увійти. Почніть із <b>місця злочину</b> (позначене ✖): обшукуйте його точку, поки знахідки не скінчаться. Не кожен слід — вбивці: місце публічне.</li>
|
||
<li><b>Розмови:</b> у кожної людини — теми у справі, «Де ви були о …?» (повзунок часу), «Про людину…», «Показати доказ…». Люди брешуть і помиляються. Збрехав? Перевірте його місце камерами і <b>спитайте вдруге</b> — розколеться і скаже, чому брехав. Вірити чи ні — вирішуєте ви.</li>
|
||
<li><b>Ордер</b> — особисто у відділку: оберіть людину і доказ із закріплених 📌, який прямо на неї вказує.</li>
|
||
<li><b>Пристрої:</b> в житлі під ордером трапляються телефони й ноутбуки. Вилучайте — самі ви їх не відкриєте, вони йдуть аналітику в лабораторію на злам.</li>
|
||
<li>З ордером можна <b>оглянути людину особисто</b> — реєстр місцями застарілий, очі надійніші. Результат ніде не записується: занотовуйте самі.</li>
|
||
<li>Червоні ✖ на мапі — мітки напарника «перевір тут».</li>
|
||
</ul>`;
|
||
const analystHow = `
|
||
<div class="syshead">Аналітик</div>
|
||
<ul class="small">
|
||
<li><b>База мешканців:</b> фільтри вводите руками — значення беріть із доказів. Мітьте людей кольорами — чотири кольори плюс «…» (сховати); що означає кожен, вирішуєте ви з напарником, гра не підказує. Реєстр місцями застарілий: одяг/взуття надійніше звіряти очним оглядом польового.</li>
|
||
<li><b>Системи:</b> оператор (власник, дзвінки, тріангуляція «де зараз»), банк, реєстри, криміналістика (експертиза + архів), камери. Дані для запитів шукайте в доказах. <b>Кожен результат лягає на дошку</b> — навіть дрібниця; що з того справа, вирішуєте ви.</li>
|
||
<li><b>Журнал дзвінків</b> — це покази, які не брешуть: хто з ким говорив і о котрій у вечір злочину. Звіряйте з тим, що люди кажуть на допиті. Порожній вечір теж промовистий: апарат могли вимкнути.</li>
|
||
<li><b>Вилучені пристрої</b> потрапляють у лабораторію заблокованими: PIN — це зазвичай рік народження власника (є в реєстрі), пароль ноутбука — або щось особисте латиницею, або словниковий перебір. Усередині буває історія браузера й чати — а буває порожньо.</li>
|
||
<li><b>Камери:</b> час злочину ±12 хв — головні кадри; будь-який вечірній час — хто взагалі потрапляв у кадри. Звіряйте з тим, що люди <i>кажуть</i> («Зведення алібі»). Брехня вбивці, спіймана камерою, — повноцінний доказ для прокурора.</li>
|
||
<li><b>Лабораторія:</b> ДНК і відбитки порівнюєте вручну — до 6 профілів за раз. Шифри теж тут. Увага: ДНК каже лише, ЧИЯ вона, — не коли й чому лишена. На місці буває ДНК людей, що не мають стосунку до злочину: збіг — привід для допиту, а не вирок.</li>
|
||
<li>Клік по порожньому місцю мапи — мітка для напарника.</li>
|
||
</ul>`;
|
||
openModal(
|
||
`<h3>${esc(i.title)}: ${esc(i.scene)}, ~${esc(i.time)}</h3><p>${esc(i.text)}</p>
|
||
<p class="dim small">Роль: ${App.role === "field" ? "польовий детектив — район, обшуки, розмови" : "аналітик — бази, камери, лабораторія"}.</p>
|
||
${App.role === "field" ? fieldHow : analystHow}
|
||
<div class="syshead">Фінал</div>
|
||
<p class="small">Одне звинувачення на двох: ХТО (ім'я з клавіатури) / ЯК чи ДЕ / ЧОМУ, підписи обох. Прокурор дивиться лише на закріплені 📌 докази: потрібне підтвердження особи (ДНК, відбиток або зламане алібі), мотив і спосіб. Нотатки — спільні: загальні у вкладці, точкові — прямо на картці доказу.</p>`,
|
||
{ key: "intro" },
|
||
);
|
||
}
|
||
$("#introbtn").onclick = showIntro;
|
||
|
||
const sndBtn = $("#sndbtn");
|
||
if (sndBtn && window.Snd) {
|
||
sndBtn.textContent = Snd.muted ? "🔇" : "🔊";
|
||
sndBtn.onclick = () => (sndBtn.textContent = Snd.toggle() ? "🔇" : "🔊");
|
||
}
|
||
|
||
// ---------- Звинувачення ----------
|
||
$("#accusebtn").onclick = () => {
|
||
const st = App.state;
|
||
if (!st || st.ended) return;
|
||
if (st.accuseDraft) return showAccuseStatus();
|
||
const o = App.init.options;
|
||
const isK = App.init.caseType === "kidnap";
|
||
const m = openModal(`
|
||
<h3>${isK ? "Рапорт на штурм — один шанс" : "Звинувачення — один шанс"}</h3>
|
||
<p class="dim small">Помилка в будь-якому полі — і ${isK ? "штурм піде не туди" : "вас звільнять"}. Прокурор дивиться лише на закріплені 📌 докази.</p>
|
||
<p>ХТО (повне ім'я, з клавіатури):<br><input id="ac-who" style="width:100%" placeholder="Ім'я Прізвище"></p>
|
||
<p>${isK ? "ДЕ утримують:" : "ЯК / ЧИМ:"}<br><select id="ac-how" style="width:100%">${o.methods.map((x) => `<option>${esc(x)}</option>`).join("")}</select></p>
|
||
<p>ЧОМУ:<br><select id="ac-why" style="width:100%">${o.motives.map((x) => `<option>${esc(x)}</option>`).join("")}</select></p>
|
||
<p>Закріплено доказів: <b>${st.board.pins.length}</b></p>
|
||
<button class="danger" id="ac-go">Подати на підпис напарнику</button>`,
|
||
// Спільний ключ із модалкою статусу: щойно з'явиться чернетка, форма
|
||
// сама поступиться їй місцем, а не ляже під нею другим шаром.
|
||
{ key: "accuse" },
|
||
);
|
||
m.inner.querySelector("#ac-go").onclick = () => {
|
||
const who = m.inner.querySelector("#ac-who").value.trim();
|
||
if (!who) return toast("Впишіть ім'я.");
|
||
App.send({
|
||
t: "accuse_draft",
|
||
who,
|
||
how: m.inner.querySelector("#ac-how").value,
|
||
why: m.inner.querySelector("#ac-why").value,
|
||
});
|
||
m.wrap.remove();
|
||
};
|
||
};
|
||
|
||
function showAccuseStatus() {
|
||
const d = App.state.accuseDraft;
|
||
const m = openModal(`
|
||
<h3>${App.init.caseType === "kidnap" ? "Рапорт на штурм — на підписі" : "Звинувачення на підписі"}</h3>
|
||
<table>
|
||
<tr><th>ХТО</th><td>${esc(d.who)}</td></tr>
|
||
<tr><th>${App.init.caseType === "kidnap" ? "ДЕ" : "ЯК"}</th><td>${esc(d.how)}</td></tr>
|
||
<tr><th>ЧОМУ</th><td>${esc(d.why)}</td></tr>
|
||
</table>
|
||
<p class="small">Підписано: ${d.signed} з ${d.need}</p>
|
||
<p class="dim small">Потрібен підпис КОЖНОГО гравця — і вироку вже не відкликати.</p>
|
||
<button class="danger" id="ac-sign">Підписати</button>
|
||
<button id="ac-cancel">Відкликати</button>`,
|
||
{ key: "accuse" },
|
||
);
|
||
m.inner.querySelector("#ac-sign").onclick = () =>
|
||
App.send({ t: "accuse_confirm" });
|
||
m.inner.querySelector("#ac-cancel").onclick = () =>
|
||
App.send({ t: "accuse_cancel" });
|
||
}
|
||
// Статус перезбирається на кожен снапшот (змінилася кількість підписів), тож
|
||
// стару модалку прибираємо явно: ключ сам по собі замінив би її лише в момент
|
||
// відкриття нової, а тут буває й відкликання — коли нову не відкривають зовсім.
|
||
App.on("state", () => {
|
||
closeModalByKey("accuse");
|
||
if (App.state.accuseDraft && !App.state.ended) showAccuseStatus();
|
||
});
|
||
|
||
// ---------- Фінал ----------
|
||
let endShown = false;
|
||
function renderEnd() {
|
||
const e = App.state.ended;
|
||
if (!e || endShown) return;
|
||
endShown = true;
|
||
if (window.Snd) Snd.sting(!!e.solved);
|
||
closeModalByKey("accuse");
|
||
// endShown лишається: він гасить не подвійний клік, а повторний показ фіналу
|
||
// на кожен наступний снапшот — ключ від цього не рятує, бо модалку щоразу
|
||
// відкривали б наново.
|
||
openModal(
|
||
`
|
||
<div id="endscreen">
|
||
<h3>${e.solved ? (App.init.caseType === "kidnap" ? "ЛЮДИНУ ВРЯТОВАНО" : "СПРАВУ РОЗКРИТО") : "ВАС ЗВІЛЬНЕНО"}</h3>
|
||
${e.hint ? `<p class="dim">Де ви схибили: ${esc(e.hint)}</p>` : ""}
|
||
<p>${esc(e.recap)}</p>
|
||
<p class="dim small">${e.solved ? "Новий код сесії — цілком нова справа." : "Справжню картину відновив ваш наступник. Новий код сесії — нова спроба в новій справі."}</p>
|
||
</div>`,
|
||
{ key: "end" },
|
||
);
|
||
}
|