Ревью: корректность фронтенда
Находки прохода /code-review high по frontend/src: - CreateMatchPage: барабан рандома, таймеры и строки адресовались по индексу, а удаление строки индексы сдвигает — фракция могла записаться соседу или потеряться. Строки получили стабильный id. - AdminAccountsPage: переключение «активен» глотало ошибку и всё равно показывало «Сохранено». - useServerEvents/useFinishMatch: завершение чужой партии не инвалидировало историю игр и публичные профили — открытый профиль показывал состав до завершения. - guards/useMe: обрыв связи не отличался от «нет сессии», и мигание сети выкидывало авторизованного пользователя на /login. Транспортные ошибки повторяем, гварды показывают сообщение вместо редиректа. - format: fallback на нераспознанную дату не работал (new Date не бросает исключение), и в интерфейс попадало «NaN.NaN NaN:NaN». - PlaceEditor: без onPointerCancel прерванный перенос оставлял блок с классом dragging и сдвигом, которые React не снимает — они выставлены в обход него. - AdminFactionsPage: refetch после сохранения одной фракции затирал несохранённый ввод в остальных. - MatchDetailPage: nav(-1) после удаления уводил из приложения при открытии партии по прямой ссылке; id из URL мог быть NaN и уходил в запрос. #8 Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0186Fk74jkkszahEHSjBzTjD
This commit is contained in:
Claude Opus 5
@@ -15,13 +15,19 @@ import { useGroupMembers } from "../hooks/groups";
|
||||
import { useRandomizeFaction, useStartMatch } from "../hooks/matches";
|
||||
|
||||
interface Draft {
|
||||
// Стабильный ключ строки: индексы сдвигаются при удалении, а барабан рандома
|
||||
// отложенно дописывает результат в свою строку и промахнулся бы по соседа.
|
||||
id: number;
|
||||
user_id: number | "";
|
||||
faction_id: number | "";
|
||||
was_random: boolean;
|
||||
}
|
||||
|
||||
let draftSeq = 0;
|
||||
|
||||
function emptyDraft(): Draft {
|
||||
return { user_id: "", faction_id: "", was_random: false };
|
||||
draftSeq += 1;
|
||||
return { id: draftSeq, user_id: "", faction_id: "", was_random: false };
|
||||
}
|
||||
|
||||
export function CreateMatchPage() {
|
||||
@@ -51,30 +57,39 @@ export function CreateMatchPage() {
|
||||
if (lm || lf) return <Spinner />;
|
||||
if (!groupId) return <div className="muted">Нет активной группы.</div>;
|
||||
|
||||
const takenFactionIds = (exceptIdx: number) =>
|
||||
const takenFactionIds = (exceptId: number) =>
|
||||
rows
|
||||
.filter((_, i) => i !== exceptIdx)
|
||||
.filter((r) => r.id !== exceptId)
|
||||
.map((r) => r.faction_id)
|
||||
.filter((x): x is number => typeof x === "number");
|
||||
|
||||
// Игроки, уже выбранные в других строках, — в списке не предлагаются.
|
||||
const takenUserIds = (exceptIdx: number) =>
|
||||
const takenUserIds = (exceptId: number) =>
|
||||
rows
|
||||
.filter((_, i) => i !== exceptIdx)
|
||||
.filter((r) => r.id !== exceptId)
|
||||
.map((r) => r.user_id)
|
||||
.filter((x): x is number => typeof x === "number");
|
||||
|
||||
const update = (idx: number, patch: Partial<Draft>) =>
|
||||
setRows((rs) => rs.map((r, i) => (i === idx ? { ...r, ...patch } : r)));
|
||||
const update = (id: number, patch: Partial<Draft>) =>
|
||||
setRows((rs) => rs.map((r) => (r.id === id ? { ...r, ...patch } : r)));
|
||||
|
||||
const addRow = () => setRows((rs) => [...rs, emptyDraft()]);
|
||||
const removeRow = (idx: number) => setRows((rs) => rs.filter((_, i) => i !== idx));
|
||||
const removeRow = (id: number) => {
|
||||
const timer = reelTimers.current[id];
|
||||
if (timer) clearTimeout(timer);
|
||||
delete reelTimers.current[id];
|
||||
setSpin((sp) => {
|
||||
const { [id]: _dropped, ...rest } = sp;
|
||||
return rest;
|
||||
});
|
||||
setRows((rs) => rs.filter((r) => r.id !== id));
|
||||
};
|
||||
|
||||
// «Барабан»: мелькаем названиями с нарастающим интервалом (плавное замедление),
|
||||
// затем рулетка останавливается на выбранной фракции, держит её 0.5с — и только
|
||||
// после этого фракция «выбирается» (onReveal: показываем select с результатом).
|
||||
const animateReel = (
|
||||
idx: number,
|
||||
id: number,
|
||||
names: string[],
|
||||
finalName: string,
|
||||
onReveal: () => void,
|
||||
@@ -82,16 +97,16 @@ export function CreateMatchPage() {
|
||||
new Promise((resolve) => {
|
||||
let delay = 50;
|
||||
const tick = () => {
|
||||
setSpin((s) => ({ ...s, [idx]: names[Math.floor(Math.random() * names.length)] }));
|
||||
setSpin((s) => ({ ...s, [id]: names[Math.floor(Math.random() * names.length)] }));
|
||||
delay *= 1.18;
|
||||
if (delay < 300) {
|
||||
reelTimers.current[idx] = setTimeout(tick, delay);
|
||||
reelTimers.current[id] = setTimeout(tick, delay);
|
||||
} else {
|
||||
reelTimers.current[idx] = setTimeout(() => {
|
||||
setSpin((s) => ({ ...s, [idx]: finalName })); // остановка на выбранной
|
||||
reelTimers.current[idx] = setTimeout(() => {
|
||||
reelTimers.current[id] = setTimeout(() => {
|
||||
setSpin((s) => ({ ...s, [id]: finalName })); // остановка на выбранной
|
||||
reelTimers.current[id] = setTimeout(() => {
|
||||
onReveal();
|
||||
setSpin((s) => ({ ...s, [idx]: null }));
|
||||
setSpin((s) => ({ ...s, [id]: null }));
|
||||
resolve();
|
||||
}, 500); // пауза перед «выбором»
|
||||
}, delay);
|
||||
@@ -100,20 +115,20 @@ export function CreateMatchPage() {
|
||||
tick();
|
||||
});
|
||||
|
||||
const randomizeRow = async (idx: number) => {
|
||||
const randomizeRow = async (id: number) => {
|
||||
const pool = factions ?? [];
|
||||
if (pool.length === 0 || spin[idx] != null) return;
|
||||
if (pool.length === 0 || spin[id] != null) return;
|
||||
try {
|
||||
const faction = await randomize.mutateAsync({
|
||||
group_id: groupId,
|
||||
exclude_faction_ids: takenFactionIds(idx),
|
||||
exclude_faction_ids: takenFactionIds(id),
|
||||
});
|
||||
await animateReel(idx, pool.map((f) => f.name_ru), faction.name_ru, () =>
|
||||
update(idx, { faction_id: faction.id, was_random: true }),
|
||||
await animateReel(id, pool.map((f) => f.name_ru), faction.name_ru, () =>
|
||||
update(id, { faction_id: faction.id, was_random: true }),
|
||||
);
|
||||
} catch (e) {
|
||||
if (reelTimers.current[idx]) clearTimeout(reelTimers.current[idx]);
|
||||
setSpin((s) => ({ ...s, [idx]: null }));
|
||||
if (reelTimers.current[id]) clearTimeout(reelTimers.current[id]);
|
||||
setSpin((s) => ({ ...s, [id]: null }));
|
||||
toast.show(e instanceof ApiError ? e.message : "Ошибка рандома");
|
||||
}
|
||||
};
|
||||
@@ -130,10 +145,10 @@ export function CreateMatchPage() {
|
||||
const names = all.map((f) => f.name_ru);
|
||||
// Барабан крутится во всех строках одновременно, каждая садится на свою фракцию.
|
||||
await Promise.all(
|
||||
rows.map((_, idx) => {
|
||||
rows.map((row, idx) => {
|
||||
const f = pool[idx % pool.length];
|
||||
return animateReel(idx, names, f.name_ru, () =>
|
||||
update(idx, { faction_id: f.id, was_random: true }),
|
||||
return animateReel(row.id, names, f.name_ru, () =>
|
||||
update(row.id, { faction_id: f.id, was_random: true }),
|
||||
);
|
||||
}),
|
||||
);
|
||||
@@ -194,11 +209,11 @@ export function CreateMatchPage() {
|
||||
</div>
|
||||
|
||||
{rows.map((row, idx) => (
|
||||
<div className="participant-row" key={idx}>
|
||||
<div className="participant-row" key={row.id}>
|
||||
<div className="row-between">
|
||||
<b>Игрок {idx + 1}</b>
|
||||
{rows.length > 2 && (
|
||||
<button className="btn btn-ghost btn-danger small" onClick={() => removeRow(idx)}>
|
||||
<button className="btn btn-ghost btn-danger small" onClick={() => removeRow(row.id)}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
)}
|
||||
@@ -206,29 +221,29 @@ export function CreateMatchPage() {
|
||||
|
||||
<PickerSelect
|
||||
selected={playerOptions.find((m) => m.id === row.user_id) ?? null}
|
||||
options={playerOptions.filter((m) => !takenUserIds(idx).includes(m.id))}
|
||||
options={playerOptions.filter((m) => !takenUserIds(row.id).includes(m.id))}
|
||||
placeholder="— игрок —"
|
||||
renderOption={(m) => playerLabel(m, 28)}
|
||||
renderValue={(m) => playerLabel(m, 24)}
|
||||
onPick={(m) => update(idx, { user_id: m.id })}
|
||||
onPick={(m) => update(row.id, { user_id: m.id })}
|
||||
/>
|
||||
|
||||
<div className="row">
|
||||
{spin[idx] != null ? (
|
||||
<div className="faction-spin" style={{ flex: 1 }}>{spin[idx]}</div>
|
||||
{spin[row.id] != null ? (
|
||||
<div className="faction-spin" style={{ flex: 1 }}>{spin[row.id]}</div>
|
||||
) : (
|
||||
<PickerSelect
|
||||
selected={(factions ?? []).find((f) => f.id === row.faction_id) ?? null}
|
||||
options={(factions ?? []).filter((f) => !takenFactionIds(idx).includes(f.id))}
|
||||
options={(factions ?? []).filter((f) => !takenFactionIds(row.id).includes(f.id))}
|
||||
placeholder="— фракция —"
|
||||
renderOption={(f) => f.name_ru}
|
||||
onPick={(f) => update(idx, { faction_id: f.id, was_random: false })}
|
||||
onPick={(f) => update(row.id, { faction_id: f.id, was_random: false })}
|
||||
/>
|
||||
)}
|
||||
<button
|
||||
className="btn"
|
||||
onClick={() => randomizeRow(idx)}
|
||||
disabled={spin[idx] != null}
|
||||
onClick={() => randomizeRow(row.id)}
|
||||
disabled={spin[row.id] != null}
|
||||
title="Случайная фракция"
|
||||
>
|
||||
<Dices size={18} />
|
||||
|
||||
Reference in New Issue
Block a user