NotBigGhost/ForbiddenStarsApp
1
1
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

v1.11 — QoL улучшения интерфейса, унификация его эллементов

Browse Source
This commit is contained in:
NotBigGhost
2026-07-17 02:46:13 +03:00
parent 98cd82f045 ddbcd74058
commit 05e1f79c25
41 changed files with 735 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/routers/users.py
+19
View File
@@ -173,3 +173,22 @@ def nickname_available(
) -> s.NicknameAvailable:
available = user_service.nickname_available(session, value.strip(), exclude_user_id=user.id)
return s.NicknameAvailable(available=available)
@router.get("/search", response_model=list[s.UserSuggestion])
def search_users(
q: str = Query("", max_length=64),
limit: int = Query(3, ge=1, le=10),
session: Session = Depends(get_session),
_user: User = Depends(get_current_user),
) -> list[s.UserSuggestion]:
"""Автокомплит по нику. Пустой q — пустой список (не ошибка): удобнее при наборе."""
users = user_service.search_users(session, q, limit=limit)
return [
s.UserSuggestion(
user_id=u.id, # type: ignore[arg-type]
nickname=u.nickname,
avatar_url=user_service.avatar_url_for(u.id, u.avatar_path, u.updated_at), # type: ignore[arg-type]
)
for u in users
]
backend/app/schemas/api.py
+8
View File
@@ -112,6 +112,14 @@ class NicknameAvailable(BaseModel):
available: bool
class UserSuggestion(BaseModel):
"""Подсказка автокомплита по нику (приглашение в группу и т.п.)."""
user_id: int
nickname: str
avatar_url: str | None = None
# ─── Группы и членство ───────────────────────────────────────────────────────
class GroupCreate(BaseModel):
backend/app/services/scoring.py
+1 -1
View File
@@ -9,7 +9,7 @@
from __future__ import annotations
# Порог числа игр для попадания в ранжированный топ (ниже — «Новички»/provisional).
MIN_GAMES = 3
MIN_GAMES = 5
# Порог числа игр на фракцию для расчёта лучшей/худшей фракции.
FACTION_MIN_GAMES = 2
backend/app/services/user_service.py
+22
View File
@@ -34,6 +34,28 @@ def nickname_available(session: Session, nickname: str, exclude_user_id: int | N
return existing is None or existing.id == exclude_user_id
def search_users(session: Session, query: str, limit: int = 3) -> list[User]:
"""Подсказки по нику: активные игроки (role='player'), без учёта регистра.
SQLite LIKE/lower() сворачивают регистр только для ASCII, а ники бывают
кириллицей — поэтому выбираем активных игроков и фильтруем/ранжируем в
Python (casefold). Пользователей десятки, полный проход дёшев; при росте
до тысяч — заменить на индексированную колонку nickname_lower.
Сначала префиксные совпадения, затем подстрочные, внутри — по алфавиту.
"""
q = (query or "").strip().casefold()
if not q:
return []
users = session.exec(
select(User).where(User.role == "player", User.is_active == True) # noqa: E712
).all()
matched = [u for u in users if q in u.nickname.casefold()]
matched.sort(
key=lambda u: (0 if u.nickname.casefold().startswith(q) else 1, u.nickname.casefold())
)
return matched[:limit]
def nickname_format_ok(nickname: str) -> bool:
"""Ник подходит по формату (2–64, буквы/цифры/пробел/.-_)."""
return bool(_NICK_RE.match((nickname or "").strip()))
backend/tests/test_user_search.py
+65
View File
@@ -0,0 +1,65 @@
"""Поиск игроков для автокомплита по нику: GET /api/users/search."""
from __future__ import annotations
from fastapi.testclient import TestClient
from sqlmodel import Session
from app.models import User
from tests.conftest import login
def _add_user(engine, nickname: str, *, active: bool = True, role: str = "player") -> None:
"""Готовим данные напрямую в БД: нужны выключенные аккаунты и админы."""
with Session(engine) as s:
s.add(
User(
nickname=nickname,
role=role,
auth_provider="stub" if role == "player" else "local",
is_active=active,
# CHECK ck_users_admin_has_password: админ обязан иметь пароль.
password_hash="x" if role == "admin" else None,
)
)
s.commit()
def test_search_prefix_first_cyrillic_case_insensitive(client: TestClient, engine):
login(client, "Искатель")
for nick in ("Барсик", "барс", "Морбарс", "Zed"):
_add_user(engine, nick)
r = client.get("/api/users/search", params={"q": "БАР"})
assert r.status_code == 200, r.text
got = r.json()
# Префиксные раньше подстрочных, внутри — по алфавиту; регистр кириллицы не важен.
assert [u["nickname"] for u in got] == ["барс", "Барсик", "Морбарс"]
assert {"user_id", "nickname", "avatar_url"} <= set(got[0].keys())
def test_search_empty_query_returns_empty_list(client: TestClient):
login(client, "Искатель")
r = client.get("/api/users/search", params={"q": " "})
assert r.status_code == 200, r.text
assert r.json() == []
def test_search_skips_inactive_and_admins(client: TestClient, engine):
login(client, "Искатель")
_add_user(engine, "Спящий барсук", active=False)
_add_user(engine, "адм барс", role="admin")
r = client.get("/api/users/search", params={"q": "барс"})
assert r.status_code == 200, r.text
assert r.json() == []
def test_search_respects_limit(client: TestClient, engine):
login(client, "Искатель")
for i in range(5):
_add_user(engine, f"Игрок {i}")
assert len(client.get("/api/users/search", params={"q": "игрок"}).json()) == 3
assert (
len(client.get("/api/users/search", params={"q": "игрок", "limit": 5}).json()) == 5
)
frontend/src/api/queryKeys.ts
+1
View File
@@ -7,6 +7,7 @@ export const qk = {
factions: ["factions"] as const,
myStats: ["myStats"] as const,
publicProfile: (id: number) => ["publicProfile", id] as const,
userSearch: (q: string, limit: number) => ["userSearch", q, limit] as const,
groups: ["groups"] as const,
group: (id: number) => ["group", id] as const,
groupFactions: (id: number) => ["group", id, "factions"] as const,
frontend/src/api/schema.d.ts
Vendored
+64
View File
@@ -225,6 +225,26 @@ export interface paths {
patch?: never;
trace?: never;
};
"/api/users/search": {
parameters: {
query?: never;
header?: never;
path?: never;
cookie?: never;
};
/**
* Search Users
* @description Автокомплит по нику. Пустой q — пустой список (не ошибка): удобнее при наборе.
*/
get: operations["search_users_api_users_search_get"];
put?: never;
post?: never;
delete?: never;
options?: never;
head?: never;
patch?: never;
trace?: never;
};
"/api/groups": {
parameters: {
query?: never;
@@ -1975,6 +1995,18 @@ export interface components {
/** Avatar Url */
avatar_url?: string | null;
};
/**
* UserSuggestion
* @description Подсказка автокомплита по нику (приглашение в группу и т.п.).
*/
UserSuggestion: {
/** User Id */
user_id: number;
/** Nickname */
nickname: string;
/** Avatar Url */
avatar_url?: string | null;
};
/** ValidationError */
ValidationError: {
/** Location */
@@ -2388,6 +2420,38 @@ export interface operations {
};
};
};
search_users_api_users_search_get: {
parameters: {
query?: {
q?: string;
limit?: number;
};
header?: never;
path?: never;
cookie?: never;
};
requestBody?: never;
responses: {
/** @description Successful Response */
200: {
headers: {
[name: string]: unknown;
};
content: {
"application/json": components["schemas"]["UserSuggestion"][];
};
};
/** @description Validation Error */
422: {
headers: {
[name: string]: unknown;
};
content: {
"application/json": components["schemas"]["HTTPValidationError"];
};
};
};
};
my_groups_api_groups_get: {
parameters: {
query?: never;
frontend/src/components/CreateGroupForm.tsx
+3 -4
View File
@@ -4,6 +4,7 @@ import { ApiError } from "../api/client";
import { useToast } from "../context/ToastContext";
import { useCreateGroup } from "../hooks/groups";
import { useExpansions } from "../hooks/reference";
import { Switch } from "./Switch";
export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
const { data: expansions } = useExpansions();
@@ -47,9 +48,7 @@ export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
{e.name_ru}
{e.is_base && <span className="muted small"> (всегда включено)</span>}
</span>
<input
type="checkbox"
style={{ width: "auto" }}
<Switch
disabled={e.is_base}
checked={e.is_base || selected.has(e.id)}
onChange={() => toggle(e.id)}
@@ -59,7 +58,7 @@ export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
</div>
</div>
{error && <p className="error-text">{error}</p>}
<button className="btn btn-primary" style={{ width: "100%" }} onClick={submit} disabled={createGroup.isPending}>
<button className="btn btn-primary btn-block" onClick={submit} disabled={createGroup.isPending}>
Создать
</button>
</div>
frontend/src/components/GroupSwitcher.tsx
+3 -7
View File
@@ -21,17 +21,13 @@ export function GroupSwitcher() {
className={"btn" + (active ? " btn-primary" : "")}
onClick={() => !active && setActive.mutate(g.id)}
>
{g.name} {active && "✓"} <span className="muted small"></span>
{g.name} {active && "✓"}
</button>
);
})}
{/* Плашка создания новой группы — в одном ряду логики с выбором группы. */}
<button
className="btn"
aria-label="Создать группу"
onClick={() => setCreating((v) => !v)}
>
+
<button className="btn" onClick={() => setCreating((v) => !v)}>
Создать группу
</button>
</div>
frontend/src/components/InProgressMatches.tsx
+8 -13
View File
@@ -1,7 +1,7 @@
import { ChevronRight } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { formatTime } from "../domain/format";
import { formatTime, plural } from "../domain/format";
import type { HomeInProgressMatch } from "../domain/types";
export function InProgressMatches({ items }: { items: HomeInProgressMatch[] }) {
@@ -15,30 +15,25 @@ export function InProgressMatches({ items }: { items: HomeInProgressMatch[] }) {
{items.map((m) => (
<button
key={m.id}
className="row-between"
className="card row-between"
onClick={() => navigate(`/match/${m.id}`)}
style={{
width: "100%",
textAlign: "left",
background: "var(--surface-2)",
border: "1px solid var(--border)",
borderRadius: "var(--radius-sm)",
padding: 12,
color: "var(--text)",
}}
style={{ margin: 0, width: "100%", textAlign: "left" }}
>
<div style={{ minWidth: 0 }}>
<div className="row" style={{ gap: 8 }}>
<b>{m.group_name}</b>
<span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
<span className="badge badge-live">идёт</span>
</div>
<div className="muted small">
{formatTime(m.started_at)} · {m.player_count} игр.
{formatTime(m.started_at)} · {m.player_count}{" "}
{plural(m.player_count, "игрок", "игрока", "игроков")}
</div>
<div
className="small"
style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
>
{/* Ники — просто текст: карточка целиком ведёт в партию,
как и в списке партий группы. */}
{m.participants.map((p) => p.nickname).join(", ")}
</div>
</div>
frontend/src/components/Leaderboard.tsx
+28 -18
View File
@@ -1,22 +1,22 @@
import { Link } from "react-router-dom";
import type { LeaderboardEntry } from "../domain/types";
import { Avatar } from "./Avatar";
import { PlayerLink } from "./PlayerLink";
function pct(v: number | null | undefined): string {
return v == null ? "—" : `${Math.round(v * 100)}%`;
}
function Row({ entry }: { entry: LeaderboardEntry }) {
return (
// Вся строка — ссылка на профиль. stopPropagation: на главной карточка-обёртка
// ведёт в общую статистику, а клик по строке игрока — в его профиль.
<Link
to={`/u/${entry.user_id}`}
className="lb-row"
style={{ color: "inherit" }}
onClick={(e) => e.stopPropagation()}
>
function Row({
entry,
provisional,
profileLinks,
}: {
entry: LeaderboardEntry;
provisional?: boolean;
profileLinks: boolean;
}) {
const content = (
<>
<div className={"lb-rank" + (entry.rank && entry.rank <= 3 ? " top" : "")}>
{entry.rank ?? "—"}
</div>
@@ -29,8 +29,16 @@ function Row({ entry }: { entry: LeaderboardEntry }) {
<span>WR: {pct(entry.win_rate)}</span>
</div>
</div>
<div className="lb-score">{entry.score ?? "—"}</div>
</Link>
<div className={"lb-score" + (provisional ? " provisional" : "")}>{entry.score ?? "—"}</div>
</>
);
// Строка-ссылка на профиль — только там, где сама карточка никуда не ведёт
// (на главной карточка топа целиком открывает общую статистику).
if (!profileLinks) return <div className="lb-row">{content}</div>;
return (
<PlayerLink userId={entry.user_id} className="lb-row">
{content}
</PlayerLink>
);
}
@@ -38,20 +46,22 @@ export function Leaderboard({
entries,
provisional,
inactive,
profileLinks = true,
}: {
entries: LeaderboardEntry[];
provisional?: LeaderboardEntry[];
inactive?: LeaderboardEntry[];
profileLinks?: boolean;
}) {
const empty =
entries.length === 0 && !provisional?.length && !inactive?.length;
if (empty) {
return <div className="muted small">Пока нет сыгранных партий.</div>;
return <div className="muted small">Сыгранных партий пока нет.</div>;
}
return (
<div>
{entries.map((e) => (
<Row key={e.user_id} entry={e} />
<Row key={e.user_id} entry={e} profileLinks={profileLinks} />
))}
{provisional && provisional.length > 0 && (
<>
@@ -59,7 +69,7 @@ export function Leaderboard({
Новички (мало игр)
</div>
{provisional.map((e) => (
<Row key={e.user_id} entry={e} />
<Row key={e.user_id} entry={e} provisional profileLinks={profileLinks} />
))}
</>
)}
@@ -69,7 +79,7 @@ export function Leaderboard({
Ещё не играли
</div>
{inactive.map((e) => (
<Row key={e.user_id} entry={e} />
<Row key={e.user_id} entry={e} profileLinks={profileLinks} />
))}
</>
)}
frontend/src/components/MatchList.tsx
+6 -3
View File
@@ -1,6 +1,6 @@
import { useNavigate } from "react-router-dom";
import { formatDuration } from "../domain/format";
import { formatDate, formatDuration } from "../domain/format";
import { winReasonLabel } from "../domain/winReasons";
import type { MatchListItem } from "../domain/types";
@@ -21,9 +21,9 @@ export function MatchListView({ items }: { items: MatchListItem[] }) {
onClick={() => navigate(`/match/${m.id}`)}
>
<div className="row-between">
<span className="muted small">{m.played_at}</span>
<span className="muted small">{formatDate(m.played_at)}</span>
{inProgress ? (
<span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
<span className="badge badge-live">идёт</span>
) : (
<span className="muted small">
{formatDuration(m.duration_minutes)} · {winReasonLabel(m.win_reason)}
@@ -31,6 +31,8 @@ export function MatchListView({ items }: { items: MatchListItem[] }) {
)}
</div>
<div className="stack" style={{ marginTop: 6, gap: 4 }}>
{/* Ники здесь — просто текст: карточка целиком ведёт в партию,
вложенные ссылки на профили мешали бы выбору партии. */}
{sorted.map((p) => (
<div key={p.user_id} className="row" style={{ gap: 8 }}>
<span
@@ -44,6 +46,7 @@ export function MatchListView({ items }: { items: MatchListItem[] }) {
</span>
<span>{p.nickname}</span>
<span className="muted small">· {p.faction_name}</span>
{p.was_random && <span className="badge">🎲</span>}
</div>
))}
</div>
frontend/src/components/NotificationPanel.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export function NotificationPanel({
<div className="notif-panel">
<div className="notif-panel-head">Уведомления</div>
{items.length === 0 ? (
<div className="notif-empty muted small">Уведомлений нет</div>
<div className="notif-empty muted small">Уведомлений пока нет.</div>
) : (
<div className="notif-list">
{items.map((n) => (
frontend/src/components/PlayerLink.tsx
+31
View File
@@ -0,0 +1,31 @@
import type { CSSProperties, ReactNode } from "react";
import { Link } from "react-router-dom";
/**
* Ссылка на профиль игрока (/u/:id). Оборачивает всё поле с ником (строку с аватаром,
* местом, фракцией…), а не голый текст. stopPropagation — строки часто лежат внутри
* кликабельных карточек (список партий, топ на главной), и клик по игроку должен
* вести в профиль, а не срабатывать навигацией карточки.
*/
export function PlayerLink({
userId,
className,
style,
children,
}: {
userId: number;
className?: string;
style?: CSSProperties;
children: ReactNode;
}) {
return (
<Link
to={`/u/${userId}`}
className={className}
style={{ color: "inherit", ...style }}
onClick={(e) => e.stopPropagation()}
>
{children}
</Link>
);
}
frontend/src/components/PlayerSuggestions.tsx
+44
View File
@@ -0,0 +1,44 @@
import { Avatar } from "./Avatar";
export interface PlayerSuggestion {
user_id: number;
nickname: string;
avatar_url?: string | null;
}
/**
* Выпадающие подсказки ников под инпутом. Родитель оборачивает инпут в
* .suggest-wrap, управляет видимостью и решает, что делать по выбору
* (подставить ник, перейти в профиль и т.п.).
*/
export function PlayerSuggestions({
items,
onPick,
}: {
items: PlayerSuggestion[];
onPick: (item: PlayerSuggestion) => void;
}) {
if (items.length === 0) return null;
return (
<div className="suggest-list" role="listbox">
{items.map((u) => (
<button
key={u.user_id}
type="button"
className="suggest-row"
role="option"
// mousedown, а не click: mousedown срабатывает ДО blur инпута — иначе
// onBlur родителя скрыл бы список раньше клика. preventDefault
// оставляет фокус в инпуте.
onMouseDown={(e) => {
e.preventDefault();
onPick(u);
}}
>
<Avatar url={u.avatar_url} nickname={u.nickname} size={28} />
<span className="nick">{u.nickname}</span>
</button>
))}
</div>
);
}
frontend/src/components/ProfileStatsCard.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export function ProfileStatsCard({
<b>{o.wins}</b>
</div>
<div className="row-between">
<div>Winrate</div>
<div>Винрейт</div>
<b>{pct(o.win_rate)}</b>
</div>
<div className="row-between">
frontend/src/components/Switch.tsx
+27
View File
@@ -0,0 +1,27 @@
/**
* Тумблер вкл/выкл (стили .switch в global.css) — единый контрол для булевых опций
* (дополнения группы, фильтры, флаги). Вместо нативных чекбоксов.
*/
export function Switch({
checked,
disabled,
onChange,
}: {
checked: boolean;
disabled?: boolean;
onChange?: (checked: boolean) => void;
}) {
return (
<span className="switch">
<input
type="checkbox"
checked={checked}
disabled={disabled}
onChange={(e) => onChange?.(e.target.checked)}
/>
<span className="switch-track">
<span className="switch-thumb" />
</span>
</span>
);
}
frontend/src/domain/format.ts
+17
View File
@@ -9,6 +9,15 @@ function shifted(iso: string): Date {
return new Date(new Date(iso).getTime() + APP_TZ_OFFSET_MIN * 60_000);
}
// Склонение существительного при числе: plural(3, "игрок", "игрока", "игроков").
export function plural(n: number, one: string, few: string, many: string): string {
const m10 = n % 10;
const m100 = n % 100;
if (m10 === 1 && m100 !== 11) return one;
if (m10 >= 2 && m10 <= 4 && (m100 < 12 || m100 > 14)) return few;
return many;
}
export function formatDuration(minutes: number | null | undefined): string {
if (minutes == null) return "—";
const h = Math.floor(minutes / 60);
@@ -28,6 +37,14 @@ export function formatTime(iso: string | null | undefined): string {
}
}
// «Дата игры» приходит date-only строкой (YYYY-MM-DD) — просто переставляем части,
// без сдвига пояса (бэкенд уже посчитал дату в поясе приложения).
export function formatDate(iso: string | null | undefined): string {
if (!iso) return "—";
const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(iso);
return m ? `${m[3]}.${m[2]}.${m[1]}` : iso;
}
export function formatDateTime(iso: string | null | undefined): string {
if (!iso) return "—";
try {
frontend/src/hooks/groups.ts
+20
View File
@@ -75,6 +75,26 @@ export function useCreateGroup() {
});
}
export function useRenameGroup(groupId: number) {
const qc = useQueryClient();
return useMutation({
mutationFn: async (name: string) =>
unwrap(
await api.PATCH("/api/groups/{group_id}", {
params: { path: { group_id: groupId } },
body: { name },
}),
),
onSuccess: () => {
// Имя группы видно в шапке группы, переключателе групп (me), на главной.
qc.invalidateQueries({ queryKey: qk.group(groupId) });
qc.invalidateQueries({ queryKey: qk.groups });
qc.invalidateQueries({ queryKey: qk.me });
qc.invalidateQueries({ queryKey: qk.home });
},
});
}
export function useSetGroupExpansions(groupId: number) {
const qc = useQueryClient();
return useMutation({
frontend/src/hooks/users.ts
+30
View File
@@ -0,0 +1,30 @@
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import { useEffect, useState } from "react";
import { api, unwrap } from "../api/client";
import { qk } from "../api/queryKeys";
/** Значение с задержкой: не дёргаем поиск на каждый введённый символ. */
function useDebounced<T>(value: T, ms = 250): T {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const t = setTimeout(() => setDebounced(value), ms);
return () => clearTimeout(t);
}, [value, ms]);
return debounced;
}
/** Подсказки по нику среди всех активных игроков (GET /api/users/search). */
export function useUserSearch(q: string, limit = 3) {
const dq = useDebounced(q.trim());
return useQuery({
queryKey: qk.userSearch(dq, limit),
enabled: dq.length > 0,
// Список не мигает пустым между буквами; при пустом q данные остаются —
// видимость выпадашки родитель гейтит по q, а не по data.
placeholderData: keepPreviousData,
staleTime: 30_000,
queryFn: async () =>
unwrap(await api.GET("/api/users/search", { params: { query: { q: dq, limit } } })),
});
}
frontend/src/pages/AccountPage.tsx
+2 -2
View File
@@ -145,7 +145,7 @@ export function AccountPage() {
<div className="row">
<input value={nickname} onChange={(e) => setNickname(e.target.value)} placeholder={me.nickname} />
<button className="btn btn-primary" onClick={saveNick} disabled={updateNick.isPending}>
ОК
Сохранить
</button>
</div>
</div>
@@ -153,7 +153,7 @@ export function AccountPage() {
{stats && <ProfileStatsCard stats={stats} />}
<button className="btn btn-danger" style={{ width: "100%" }} onClick={doLogout}>
<button className="btn btn-danger btn-block" onClick={doLogout}>
Выйти
</button>
</div>
frontend/src/pages/CreateMatchPage.tsx
+3 -3
View File
@@ -134,7 +134,7 @@ export function CreateMatchPage() {
setError(null);
const filled = rows.filter((r) => r.user_id !== "" && r.faction_id !== "");
if (filled.length < 2) {
setError("Нужно минимум 2 участника с выбранным игроком и фракцией.");
setError("Нужно минимум 2 игрока с выбранной фракцией.");
return;
}
if (filled.length > MAX_MATCH_PLAYERS) {
@@ -236,8 +236,8 @@ export function CreateMatchPage() {
{error && <p className="error-text">{error}</p>}
<button
className="btn btn-primary"
style={{ width: "100%", marginTop: 12 }}
className="btn btn-primary btn-block"
style={{ marginTop: 12 }}
onClick={submit}
disabled={startMatch.isPending}
>
frontend/src/pages/GroupPage.tsx
+82 -3
View File
@@ -1,13 +1,27 @@
import { UserPlus } from "lucide-react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { ApiError } from "../api/client";
import { CreateGroupForm } from "../components/CreateGroupForm";
import { GroupInvitations } from "../components/GroupInvitations";
import { GroupSwitcher } from "../components/GroupSwitcher";
import { Leaderboard } from "../components/Leaderboard";
import { MatchListView } from "../components/MatchList";
import { PlayerSuggestions } from "../components/PlayerSuggestions";
import { Spinner } from "../components/Spinner";
import { MAX_GROUP_SIZE } from "../domain/constants";
import { formatDate } from "../domain/format";
import { useToast } from "../context/ToastContext";
import { useMe } from "../hooks/auth";
import { useGroup, useGroupMatches, useGroupStats } from "../hooks/groups";
import {
useGroup,
useGroupMatches,
useGroupMembers,
useGroupStats,
useInviteMember,
} from "../hooks/groups";
import { useUserSearch } from "../hooks/users";
export function GroupPage() {
const { data: me, isLoading } = useMe();
@@ -17,9 +31,37 @@ export function GroupPage() {
const { data: group } = useGroup(groupId);
const { data: stats } = useGroupStats(groupId);
const { data: matches } = useGroupMatches(groupId);
const { data: members } = useGroupMembers(groupId);
const inviteMember = useInviteMember();
const toast = useToast();
const [newNick, setNewNick] = useState("");
const [nickFocused, setNickFocused] = useState(false);
// После подстановки ника из подсказки список прячем: подставленный ник сам
// совпадает с собой и без флага выпадашка вернулась бы сразу.
const [nickPicked, setNickPicked] = useState(false);
// limit с запасом: уже состоящих в группе отфильтруем ниже, до 3 подсказок.
const { data: foundUsers } = useUserSearch(newNick, 10);
if (isLoading) return <Spinner />;
const invite = async () => {
const nick = newNick.trim();
if (!nick || !groupId) return;
try {
await inviteMember.mutateAsync({ groupId, nickname: nick });
setNewNick("");
toast.show("Приглашение отправлено");
} catch (e) {
toast.show(e instanceof ApiError ? e.message : "Ошибка");
}
};
// Подсказки: уже состоящих в группе не предлагаем, показываем до 3.
const memberIds = new Set((members ?? []).map((m) => m.user_id));
const suggestions = (foundUsers ?? []).filter((u) => !memberIds.has(u.user_id)).slice(0, 3);
const showSuggest =
nickFocused && !nickPicked && newNick.trim().length > 0 && suggestions.length > 0;
if (!groupId) {
return (
<div>
@@ -49,14 +91,14 @@ export function GroupPage() {
</div>
<p className="muted small">
Партий: {stats?.total_matches ?? 0}
{stats?.last_match_at ? ` · последняя: ${stats.last_match_at}` : ""}
{stats?.last_match_at ? ` · последняя: ${formatDate(stats.last_match_at)}` : ""}
</p>
</div>
<GroupInvitations />
<div className="card">
<h3>Статистика игроков</h3>
<h3>Список игроков</h3>
{stats && (
<Leaderboard
entries={stats.leaderboard}
@@ -64,6 +106,43 @@ export function GroupPage() {
inactive={stats.inactive}
/>
)}
{/* Приглашение нового игрока — здесь, рядом со списком (не в настройках). */}
{(members ?? []).length >= MAX_GROUP_SIZE ? (
<p className="muted small" style={{ margin: "10px 0 0" }}>
Достигнут максимум участников ({MAX_GROUP_SIZE}).
</p>
) : (
<div className="row" style={{ marginTop: 10 }}>
<div className="suggest-wrap">
<input
placeholder="Ник игрока — отправить приглашение"
value={newNick}
onChange={(e) => {
setNewNick(e.target.value);
setNickPicked(false);
}}
onFocus={() => setNickFocused(true)}
onBlur={() => setNickFocused(false)}
onKeyDown={(e) => {
if (e.key === "Enter") invite();
if (e.key === "Escape") e.currentTarget.blur();
}}
/>
{showSuggest && (
<PlayerSuggestions
items={suggestions}
onPick={(u) => {
setNewNick(u.nickname);
setNickPicked(true);
}}
/>
)}
</div>
<button className="btn btn-primary" onClick={invite} disabled={inviteMember.isPending}>
<UserPlus size={18} />
</button>
</div>
)}
</div>
<GroupSwitcher />
frontend/src/pages/GroupSettingsPage.tsx
+85 -50
View File
@@ -1,12 +1,21 @@
import { Trash2, UserPlus } from "lucide-react";
import { Trash2 } from "lucide-react";
import { useEffect, useState } from "react";
import { ApiError } from "../api/client";
import { ConfirmDialog } from "../components/ConfirmDialog";
import { PlayerLink } from "../components/PlayerLink";
import { Spinner } from "../components/Spinner";
import { Switch } from "../components/Switch";
import { MAX_GROUP_SIZE } from "../domain/constants";
import { useToast } from "../context/ToastContext";
import { useMe } from "../hooks/auth";
import { useGroup, useGroupMembers, useInviteMember, useRemoveMember, useSetGroupExpansions } from "../hooks/groups";
import {
useGroup,
useGroupMembers,
useRemoveMember,
useRenameGroup,
useSetGroupExpansions,
} from "../hooks/groups";
import { useExpansions } from "../hooks/reference";
export function GroupSettingsPage() {
@@ -16,12 +25,14 @@ export function GroupSettingsPage() {
const { data: expansions } = useExpansions();
const { data: members } = useGroupMembers(groupId);
const setExpansions = useSetGroupExpansions(groupId ?? 0);
const inviteMember = useInviteMember();
const renameGroup = useRenameGroup(groupId ?? 0);
const removeMember = useRemoveMember(groupId ?? 0);
const toast = useToast();
const [selected, setSelected] = useState<Set<number>>(new Set());
const [newNick, setNewNick] = useState("");
// Название редактируется локально; до первого ввода берём значение из группы.
const [name, setName] = useState<string | null>(null);
const [removeTarget, setRemoveTarget] = useState<{ userId: number; nickname: string } | null>(null);
useEffect(() => {
if (group) setSelected(new Set(group.expansion_ids));
@@ -38,22 +49,24 @@ export function GroupSettingsPage() {
return next;
});
const saveExpansions = async () => {
const nameValue = name ?? group.name;
const saveName = async () => {
const trimmed = nameValue.trim();
if (!trimmed || trimmed === group.name) return;
try {
await setExpansions.mutateAsync([...selected]);
toast.show("Дополнения сохранены");
await renameGroup.mutateAsync(trimmed);
setName(null);
toast.show("Название сохранено");
} catch (e) {
toast.show(e instanceof ApiError ? e.message : "Ошибка");
}
};
const add = async () => {
const nick = newNick.trim();
if (!nick) return;
const saveExpansions = async () => {
try {
await inviteMember.mutateAsync({ groupId: group.id, nickname: nick });
setNewNick("");
toast.show("Приглашение отправлено");
await setExpansions.mutateAsync([...selected]);
toast.show("Дополнения сохранены");
} catch (e) {
toast.show(e instanceof ApiError ? e.message : "Ошибка");
}
@@ -69,27 +82,43 @@ export function GroupSettingsPage() {
return (
<div>
<div className="card">
<h3>Название</h3>
<div className="row">
<input
value={nameValue}
onChange={(e) => setName(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") saveName();
}}
/>
<button
className="btn btn-primary"
onClick={saveName}
disabled={renameGroup.isPending || !nameValue.trim() || nameValue.trim() === group.name}
>
Сохранить
</button>
</div>
</div>
<div className="card">
<h3>Дополнения</h3>
<div className="stack">
{(expansions ?? [])
.filter((e) => !e.is_base)
.map((e) => (
<label key={e.id} className="row" style={{ justifyContent: "space-between" }}>
<span>{e.name_ru}</span>
<span className="switch">
<input
type="checkbox"
disabled={!isOwner}
checked={selected.has(e.id)}
onChange={() => toggle(e.id)}
/>
<span className="switch-track">
<span className="switch-thumb" />
</span>
</span>
</label>
))}
{/* Базовые дополнения показываем, как и при создании группы: включены и заблокированы. */}
{(expansions ?? []).map((e) => (
<label key={e.id} className="row" style={{ justifyContent: "space-between" }}>
<span>
{e.name_ru}
{e.is_base && <span className="muted small"> (всегда включено)</span>}
</span>
<Switch
disabled={e.is_base || !isOwner}
checked={e.is_base || selected.has(e.id)}
onChange={() => toggle(e.id)}
/>
</label>
))}
</div>
{isOwner && (
<button className="btn btn-primary" style={{ marginTop: 10 }} onClick={saveExpansions}>
@@ -99,30 +128,21 @@ export function GroupSettingsPage() {
</div>
<div className="card">
{/* Приглашение нового игрока — на странице группы («Список игроков»). */}
<h3>Участники ({(members ?? []).length}/{MAX_GROUP_SIZE})</h3>
{isOwner && (members ?? []).length >= MAX_GROUP_SIZE && (
<p className="muted small">Достигнут максимум участников ({MAX_GROUP_SIZE}).</p>
)}
{isOwner && (members ?? []).length < MAX_GROUP_SIZE && (
<div className="row" style={{ marginBottom: 10 }}>
<input
placeholder="Ник игрока — отправить приглашение"
value={newNick}
onChange={(e) => setNewNick(e.target.value)}
/>
<button className="btn btn-primary" onClick={add} disabled={inviteMember.isPending}>
<UserPlus size={18} />
</button>
</div>
)}
<div className="stack">
{(members ?? []).map((m) => (
<div key={m.user_id} className="row-between">
<span>
{m.nickname} <span className="muted small">· {m.role}</span>
</span>
{/* Кликабельна вся левая часть строки, не только текст ника. */}
<PlayerLink userId={m.user_id} style={{ flex: 1 }}>
{m.nickname}{" "}
<span className="muted small">· {m.role === "owner" ? "владелец" : "участник"}</span>
</PlayerLink>
{isOwner && m.role !== "owner" && (
<button className="btn btn-ghost btn-danger small" onClick={() => remove(m.user_id)}>
<button
className="btn btn-ghost btn-danger small"
onClick={() => setRemoveTarget({ userId: m.user_id, nickname: m.nickname })}
>
<Trash2 size={16} />
</button>
)}
@@ -130,6 +150,21 @@ export function GroupSettingsPage() {
))}
</div>
</div>
<ConfirmDialog
open={removeTarget != null}
danger
title={`Удалить участника «${removeTarget?.nickname}»?`}
message="Игрок будет удалён из группы. Его сыгранные партии сохранятся."
confirmLabel="Удалить"
onCancel={() => setRemoveTarget(null)}
onConfirm={() => {
if (!removeTarget) return;
const userId = removeTarget.userId;
setRemoveTarget(null);
remove(userId);
}}
/>
</div>
);
}
frontend/src/pages/HelpPage.tsx
+4 -4
View File
@@ -5,9 +5,9 @@
export function HelpPage() {
return (
<div>
{/* Название страницы уже в верхней панели — в теле только пояснение. */}
<div className="card">
<h2 style={{ margin: 0 }}>Справка</h2>
<p className="muted small" style={{ marginTop: 6 }}>
<p className="muted small" style={{ margin: 0 }}>
Здесь со временем появятся правила, подсказки и пояснения. Пока — о том, как
считается рейтинг игроков.
</p>
@@ -55,7 +55,7 @@ export function HelpPage() {
<div className="card">
<h3>Попадание в топ</h3>
<p className="small">
Чтобы попасть в ранжированный топ, нужно сыграть минимум <b>3 партии</b>. До этого
Чтобы попасть в ранжированный топ, нужно сыграть минимум <b>5 партий</b>. До этого
игрок показывается в блоке «Новички» — предварительно, без места в рейтинге.
</p>
</div>
@@ -63,7 +63,7 @@ export function HelpPage() {
<div className="card">
<h3>Другие показатели</h3>
<ul className="small" style={{ margin: 0, paddingLeft: 18 }}>
<li><b>Винрейт</b> — доля партий, в которых игрок занял 1-е место.</li>
<li><b>Винрейт (WR)</b> — доля партий, в которых игрок занял 1-е место.</li>
<li><b>Среднее место</b> — среднее по завершённым партиям.</li>
<li>
При равенстве рейтинга топ сортируется по: винрейту, числу игр, среднему месту
frontend/src/pages/HomePage.tsx
+3 -3
View File
@@ -15,15 +15,15 @@ export function HomePage() {
return (
<div>
{/* Карточка кликабельна целиком → общая статистика; клик по нику внутри
ведёт в профиль (Leaderboard останавливает всплытие на ссылках ников). */}
{/* Карточка кликабельна целиком → общая статистика; ники внутри — просто
текст, ссылки на профили есть в самой общей статистике. */}
<div className="card" style={{ cursor: "pointer" }} onClick={() => navigate("/stats")}>
<div className="row-between">
<h3 style={{ margin: 0 }}>Топ игроков</h3>
<span className="muted small">Вся статистика →</span>
</div>
<div style={{ marginTop: 10 }}>
<Leaderboard entries={data.leaderboard} provisional={data.provisional} />
<Leaderboard entries={data.leaderboard} provisional={data.provisional} profileLinks={false} />
</div>
</div>
frontend/src/pages/LoginPage.tsx
+1 -1
View File
@@ -154,7 +154,7 @@ function TelegramNicknamePicker({
</div>
{error && <p className="error-text">{error}</p>}
<button className="btn btn-ghost small" onClick={onCancel}>
Назад
Отмена
</button>
</div>
);
frontend/src/pages/MatchDetailPage.tsx
+10 -15
View File
@@ -4,8 +4,9 @@ import { useNavigate, useParams } from "react-router-dom";
import { ApiError } from "../api/client";
import { ConfirmDialog } from "../components/ConfirmDialog";
import { MatchMedia } from "../components/MatchMedia";
import { PlayerLink } from "../components/PlayerLink";
import { Spinner } from "../components/Spinner";
import { formatDuration, formatTime } from "../domain/format";
import { formatDate, formatDuration, formatTime } from "../domain/format";
import { WIN_REASONS, type WinReason, winReasonLabel } from "../domain/winReasons";
import { useToast } from "../context/ToastContext";
import {
@@ -119,9 +120,9 @@ export function MatchDetailPage() {
<div>
<div className="card">
<div className="row-between">
<h2 style={{ margin: 0 }}>{match.played_at}</h2>
<h2 style={{ margin: 0 }}>{formatDate(match.played_at)}</h2>
{inProgress ? (
<span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
<span className="badge badge-live">идёт</span>
) : (
<span className="muted small">{formatDuration(match.duration_minutes)}</span>
)}
@@ -145,7 +146,7 @@ export function MatchDetailPage() {
<div className="stack">
{sorted.map((p) => (
<div key={p.user_id}>
<div className="row" style={{ gap: 8 }}>
<PlayerLink userId={p.user_id} className="row" style={{ gap: 8 }}>
<span
className={
"place-badge" +
@@ -158,7 +159,7 @@ export function MatchDetailPage() {
<b>{p.nickname}</b>
<span className="muted small">· {p.faction_name}</span>
{p.was_random && <span className="badge">🎲</span>}
</div>
</PlayerLink>
{p.comment && <div className="small muted" style={{ marginLeft: 32 }}>{p.comment}</div>}
</div>
))}
@@ -181,11 +182,11 @@ export function MatchDetailPage() {
<h3>Состав</h3>
<div className="stack">
{match.participants.map((p) => (
<div key={p.user_id} className="row" style={{ gap: 8 }}>
<PlayerLink key={p.user_id} userId={p.user_id} className="row" style={{ gap: 8 }}>
<b>{p.nickname}</b>
<span className="muted small">· {p.faction_name}</span>
{p.was_random && <span className="badge">🎲</span>}
</div>
</PlayerLink>
))}
</div>
</div>
@@ -260,8 +261,7 @@ export function MatchDetailPage() {
{error && <p className="error-text">{error}</p>}
<button
className="btn btn-primary"
style={{ width: "100%" }}
className="btn btn-primary btn-block"
onClick={submitFinish}
disabled={finish.isPending}
>
@@ -273,11 +273,7 @@ export function MatchDetailPage() {
)}
{canModify && (
<button
className="btn btn-danger"
style={{ width: "100%" }}
onClick={() => setConfirmRemove(true)}
>
<button className="btn btn-danger btn-block" onClick={() => setConfirmRemove(true)}>
{inProgress ? "Отменить партию" : "Удалить партию"}
</button>
)}
@@ -292,7 +288,6 @@ export function MatchDetailPage() {
: "Сыгранная партия и её результаты будут удалены. Действие необратимо."
}
confirmLabel={inProgress ? "Отменить партию" : "Удалить"}
cancelLabel="Назад"
onCancel={() => setConfirmRemove(false)}
onConfirm={() => {
setConfirmRemove(false);
frontend/src/pages/OverallStatsPage.tsx
+10 -8
View File
@@ -1,7 +1,7 @@
import { useMemo, useState } from "react";
import { Link } from "react-router-dom";
import { Avatar } from "../components/Avatar";
import { PlayerLink } from "../components/PlayerLink";
import { Spinner } from "../components/Spinner";
import type { LeaderboardEntry } from "../domain/types";
import { useLeaderboard } from "../hooks/stats";
@@ -42,8 +42,8 @@ export function OverallStatsPage() {
const provisional = filterSort(data.provisional);
const arrow = (k: SortKey) => (k === sortKey ? (dir === 1 ? " ↑" : " ↓") : "");
const row = (e: LeaderboardEntry) => (
<Link key={e.user_id} to={`/u/${e.user_id}`} className="st-row" style={{ color: "inherit" }}>
const row = (e: LeaderboardEntry, isProvisional = false) => (
<PlayerLink key={e.user_id} userId={e.user_id} className="st-row">
<span className={"st-num" + (e.rank && e.rank <= 3 ? " gold" : "")}>{e.rank ?? "—"}</span>
<span className="st-player">
<Avatar url={e.avatar_url} nickname={e.nickname} size={28} />
@@ -52,14 +52,16 @@ export function OverallStatsPage() {
<span className="st-num">{e.games}</span>
<span className="st-num">{e.wins}</span>
<span className="st-num">{pct(e.win_rate)}</span>
<span className="st-num lb-score">{e.score ?? "—"}</span>
</Link>
<span className={"st-num lb-score" + (isProvisional ? " provisional" : "")}>
{e.score ?? "—"}
</span>
</PlayerLink>
);
return (
<div>
{/* Название страницы уже в верхней панели — в теле сразу поиск. */}
<div className="card">
<h3>Общая статистика</h3>
<input placeholder="Поиск по нику…" value={q} onChange={(e) => setQ(e.target.value)} />
</div>
@@ -77,14 +79,14 @@ export function OverallStatsPage() {
Никого не найдено.
</div>
) : (
entries.map(row)
entries.map((e) => row(e))
)}
</div>
{provisional.length > 0 && (
<div className="card">
<div className="label">Новички (меньше {data.min_games} игр)</div>
{provisional.map(row)}
{provisional.map((e) => row(e, true))}
</div>
)}
</div>
frontend/src/pages/PublicProfilePage.tsx
+2 -4
View File
@@ -64,8 +64,7 @@ export function PublicProfilePage() {
<div className="card">
{groups.length === 1 ? (
<button
className="btn btn-primary"
style={{ width: "100%" }}
className="btn btn-primary btn-block"
onClick={() => doInvite(groups[0].id)}
disabled={invite.isPending}
>
@@ -74,8 +73,7 @@ export function PublicProfilePage() {
) : (
<>
<button
className="btn btn-primary"
style={{ width: "100%" }}
className="btn btn-primary btn-block"
onClick={() => setPickOpen((v) => !v)}
>
Добавить в группу
frontend/src/pages/admin/AdminAccountsPage.tsx
+4 -4
View File
@@ -28,7 +28,7 @@ export function AdminAccountsPage() {
if (editId == null || !name) return;
try {
await update.mutateAsync({ userId: editId, nickname: name });
toast.show("Имя обновлено");
toast.show("Ник обновлён");
setEditId(null);
} catch (e) {
toast.show(e instanceof ApiError ? e.message : "Не удалось переименовать");
@@ -42,7 +42,7 @@ export function AdminAccountsPage() {
return (
<div>
<h3>Аккаунты</h3>
{/* Название раздела уже в активной вкладке админки. */}
<div className="stack">
{(users ?? []).map((u) => (
<div key={u.id} className="card" style={{ margin: 0 }}>
@@ -63,7 +63,7 @@ export function AdminAccountsPage() {
disabled={update.isPending || !editName.trim() || editName.trim() === u.nickname}
onClick={saveName}
>
ОК
Сохранить
</button>
<button className="btn btn-ghost small" onClick={() => setEditId(null)}>
Отмена
@@ -72,7 +72,7 @@ export function AdminAccountsPage() {
) : (
<div className="row-between">
<div>
<b>{u.nickname}</b> {u.role === "admin" && <span className="badge">admin</span>}
<b>{u.nickname}</b> {u.role === "admin" && <span className="badge">админ</span>}
<div className="muted small">
#{u.id} · {u.auth_provider} · {u.is_active ? "активен" : "отключён"}
</div>
frontend/src/pages/admin/AdminAchievementsPage.tsx
+20 -2
View File
@@ -2,6 +2,7 @@ import { useRef, useState } from "react";
import { ApiError } from "../../api/client";
import { Avatar } from "../../components/Avatar";
import { ConfirmDialog } from "../../components/ConfirmDialog";
import { Spinner } from "../../components/Spinner";
import { useToast } from "../../context/ToastContext";
import {
@@ -87,6 +88,7 @@ function AchievementCard({ ach }: { ach: AchievementRead }) {
const toast = useToast();
const fileRef = useRef<HTMLInputElement>(null);
const [editing, setEditing] = useState(false);
const [confirmRemove, setConfirmRemove] = useState(false);
const [name, setName] = useState(ach.name);
const [description, setDescription] = useState(ach.description);
const [condition, setCondition] = useState(ach.condition);
@@ -117,7 +119,6 @@ function AchievementCard({ ach }: { ach: AchievementRead }) {
};
const remove = async () => {
if (!window.confirm(`Удалить ачивку «${ach.name}»?`)) return;
try {
await del.mutateAsync(ach.slug);
toast.show("Удалено");
@@ -175,7 +176,11 @@ function AchievementCard({ ach }: { ach: AchievementRead }) {
<button className="btn small" onClick={() => setEditing(true)}>
Изменить
</button>
<button className="btn btn-ghost btn-danger small" onClick={remove} disabled={del.isPending}>
<button
className="btn btn-ghost btn-danger small"
onClick={() => setConfirmRemove(true)}
disabled={del.isPending}
>
Удалить
</button>
<input
@@ -187,6 +192,19 @@ function AchievementCard({ ach }: { ach: AchievementRead }) {
/>
</div>
)}
<ConfirmDialog
open={confirmRemove}
danger
title={`Удалить ачивку «${ach.name}»?`}
message="Ачивка и её иконка будут удалены. Действие необратимо."
confirmLabel="Удалить"
onCancel={() => setConfirmRemove(false)}
onConfirm={() => {
setConfirmRemove(false);
remove();
}}
/>
</div>
);
}
frontend/src/pages/admin/AdminFactionsPage.tsx
+3 -3
View File
@@ -30,8 +30,8 @@ export function AdminFactionsPage() {
return (
<div>
<h3>Фракции</h3>
<p className="muted small">
{/* Название раздела уже в активной вкладке админки. */}
<p className="muted small" style={{ marginTop: 0 }}>
Переименование меняет название фракции во всех партиях и статистике.
</p>
<div className="stack">
@@ -48,7 +48,7 @@ export function AdminFactionsPage() {
disabled={!names[f.id] || names[f.id] === f.name_ru}
onClick={() => save(f.id)}
>
ОК
Сохранить
</button>
</div>
</div>
frontend/src/pages/admin/AdminLoginPage.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function AdminLoginPage() {
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
</div>
{error && <p className="error-text">{error}</p>}
<button className="btn btn-primary" style={{ width: "100%" }} onClick={submit} disabled={login.isPending}>
<button className="btn btn-primary btn-block" onClick={submit} disabled={login.isPending}>
Войти
</button>
</div>
frontend/src/pages/admin/AdminLogsPage.tsx
+2 -2
View File
@@ -17,7 +17,7 @@ export function AdminLogsPage() {
return (
<div>
<h3>Журнал событий</h3>
{/* Название раздела уже в активной вкладке админки. */}
<div className="row" style={{ marginBottom: 10, gap: 8 }}>
<select style={{ width: "auto" }} value={action} onChange={(e) => setAction(e.target.value)}>
{ACTIONS.map((a) => (
@@ -59,7 +59,7 @@ export function AdminLogsPage() {
)}
</div>
))}
{(data?.items ?? []).length === 0 && <div className="muted small">Событий нет.</div>}
{(data?.items ?? []).length === 0 && <div className="muted small">Событий пока нет.</div>}
</div>
)}
</div>
frontend/src/pages/admin/AdminMatchEdit.tsx
+3 -7
View File
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
import { ApiError } from "../../api/client";
import { MatchMedia } from "../../components/MatchMedia";
import { Spinner } from "../../components/Spinner";
import { Switch } from "../../components/Switch";
import { WIN_REASONS, type WinReason } from "../../domain/winReasons";
import { useToast } from "../../context/ToastContext";
import {
@@ -141,12 +142,7 @@ export function AdminMatchEdit({ matchId, onClose }: { matchId: number; onClose:
/>
</div>
<label className="row small" style={{ flex: "0 0 auto", gap: 4 }}>
<input
type="checkbox"
style={{ width: "auto" }}
checked={r.eliminated}
onChange={(e) => upd(i, { eliminated: e.target.checked })}
/>
<Switch checked={r.eliminated} onChange={(v) => upd(i, { eliminated: v })} />
выбыл
</label>
</div>
@@ -190,7 +186,7 @@ export function AdminMatchEdit({ matchId, onClose }: { matchId: number; onClose:
{error && <p className="error-text">{error}</p>}
<button className="btn btn-primary" style={{ width: "100%" }} onClick={save} disabled={update.isPending}>
<button className="btn btn-primary btn-block" onClick={save} disabled={update.isPending}>
Сохранить изменения
</button>
</>
frontend/src/pages/admin/AdminRecordsPage.tsx
+30 -16
View File
@@ -1,7 +1,11 @@
import { Pencil, Trash2 } from "lucide-react";
import { useMemo, useState } from "react";
import { ApiError } from "../../api/client";
import { ConfirmDialog } from "../../components/ConfirmDialog";
import { formatDate, plural } from "../../domain/format";
import { Spinner } from "../../components/Spinner";
import { Switch } from "../../components/Switch";
import { useToast } from "../../context/ToastContext";
import {
useAdminDeleteMatch,
@@ -19,6 +23,7 @@ export function AdminRecordsPage() {
const [factionFilter, setFactionFilter] = useState<number | null>(null);
const [grouped, setGrouped] = useState(true);
const [editId, setEditId] = useState<number | null>(null);
const [deleteTarget, setDeleteTarget] = useState<AdminMatchRead | null>(null);
const { data: groups } = useAdminGroups();
const { data: users } = useAdminUsers();
@@ -50,23 +55,18 @@ export function AdminRecordsPage() {
<div key={m.id} className="card" style={{ margin: 0 }}>
<div className="row-between">
<div>
<b>#{m.id}</b> · {m.played_at}
<b>#{m.id}</b> · {formatDate(m.played_at)}
{!grouped && <span className="muted small"> · {m.group_name}</span>}
<div className="muted small">
{m.player_count} игр. · автор {m.created_by}
{m.player_count} {plural(m.player_count, "игрок", "игрока", "игроков")} · автор{" "}
{m.created_by}
</div>
</div>
<div className="row" style={{ gap: 4 }}>
<button className="btn btn-ghost small" onClick={() => setEditId(m.id)}>
<Pencil size={16} />
</button>
<button
className="btn btn-ghost btn-danger small"
onClick={async () => {
await del.mutateAsync(m.id).catch(() => {});
toast.show("Удалено");
}}
>
<button className="btn btn-ghost btn-danger small" onClick={() => setDeleteTarget(m)}>
<Trash2 size={16} />
</button>
</div>
@@ -112,12 +112,7 @@ export function AdminRecordsPage() {
))}
</select>
<label className="row" style={{ gap: 8 }}>
<input
type="checkbox"
style={{ width: "auto" }}
checked={grouped}
onChange={(e) => setGrouped(e.target.checked)}
/>
<Switch checked={grouped} onChange={setGrouped} />
Группировать по группам
</label>
</div>
@@ -126,7 +121,7 @@ export function AdminRecordsPage() {
{isLoading ? (
<Spinner />
) : (matches ?? []).length === 0 ? (
<div className="muted small">Записей нет.</div>
<div className="muted small">Записей пока нет.</div>
) : grouped ? (
byGroup.map(([gid, { name, items }]) => (
<div key={gid} style={{ marginBottom: 16 }}>
@@ -141,6 +136,25 @@ export function AdminRecordsPage() {
)}
{editId != null && <AdminMatchEdit matchId={editId} onClose={() => setEditId(null)} />}
<ConfirmDialog
open={deleteTarget != null}
danger
title={`Удалить партию #${deleteTarget?.id}?`}
message="Партия и её результаты будут удалены. Действие необратимо."
confirmLabel="Удалить"
onCancel={() => setDeleteTarget(null)}
onConfirm={async () => {
if (!deleteTarget) return;
setDeleteTarget(null);
try {
await del.mutateAsync(deleteTarget.id);
toast.show("Удалено");
} catch (e) {
toast.show(e instanceof ApiError ? e.message : "Не удалось удалить");
}
}}
/>
</div>
);
}
frontend/src/pages/admin/DevDeleteAccountButton.tsx
+32 -24
View File
@@ -1,7 +1,9 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { ApiError, api, unwrap } from "../../api/client";
import { qk } from "../../api/queryKeys";
import { ConfirmDialog } from "../../components/ConfirmDialog";
import { useToast } from "../../context/ToastContext";
/**
@@ -21,6 +23,7 @@ export function DevDeleteAccountButton({
}) {
const qc = useQueryClient();
const toast = useToast();
const [confirmOpen, setConfirmOpen] = useState(false);
const del = useMutation({
mutationFn: async () =>
unwrap(
@@ -32,29 +35,34 @@ export function DevDeleteAccountButton({
});
return (
<button
className="btn small"
// Яркая (сплошная) красная кнопка. Стиль инлайном, а не классом в общем CSS,
// чтобы в прод/тест-стили не попало ничего, связанного с удалением.
style={{ background: "var(--danger)", borderColor: "var(--danger)", color: "#fff" }}
disabled={del.isPending}
onClick={async () => {
if (
!window.confirm(
`Удалить аккаунт «${nickname}»? Партии сохранятся, но игрок будет ` +
`вычеркнут из них. Действие необратимо.`,
)
)
return;
try {
await del.mutateAsync();
toast.show("Аккаунт удалён");
} catch (e) {
toast.show(e instanceof ApiError ? e.message : "Не удалось удалить");
}
}}
>
Удалить
</button>
<>
<button
className="btn small"
// Яркая (сплошная) красная кнопка. Стиль инлайном, а не классом в общем CSS,
// чтобы в прод/тест-стили не попало ничего, связанного с удалением.
style={{ background: "var(--danger)", borderColor: "var(--danger)", color: "#fff" }}
disabled={del.isPending}
onClick={() => setConfirmOpen(true)}
>
Удалить
</button>
<ConfirmDialog
open={confirmOpen}
danger
title={`Удалить аккаунт «${nickname}»?`}
message="Партии сохранятся, но игрок будет вычеркнут из них. Действие необратимо."
confirmLabel="Удалить"
onCancel={() => setConfirmOpen(false)}
onConfirm={async () => {
setConfirmOpen(false);
try {
await del.mutateAsync();
toast.show("Аккаунт удалён");
} catch (e) {
toast.show(e instanceof ApiError ? e.message : "Не удалось удалить");
}
}}
/>
</>
);
}
frontend/src/styles/global.css
+36
View File
@@ -71,6 +71,7 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.btn-danger-solid { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn-block { width: 100%; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@@ -91,6 +92,8 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
border: 1px solid var(--border);
font-size: 12px;
}
/* Бейдж незавершённой партии («идёт») */
.badge-live { color: var(--accent-2); }
.error-text { color: var(--danger); font-size: 13px; }
@@ -286,6 +289,39 @@ input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.notif-item-body { margin-top: 2px; }
.notif-item-time { margin-top: 4px; }
/* Подсказки ников под инпутом (приглашение игрока и т.п.) */
.suggest-wrap { position: relative; flex: 1; min-width: 0; }
.suggest-list {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
z-index: 50;
overflow: hidden;
}
.suggest-row {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 10px;
background: none;
border: none;
border-bottom: 1px solid var(--border);
color: var(--text);
font: inherit;
font-weight: 600;
text-align: left;
cursor: pointer;
}
.suggest-row:last-child { border-bottom: none; }
.suggest-row:hover, .suggest-row:active { background: var(--surface-2); }
.suggest-row .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Всплывашки сверху экрана в момент прихода */
.toast-top-wrap {
position: fixed;
frontend/src/styles/layout.css
+2
View File
@@ -106,6 +106,8 @@
.lb-rank.top { color: var(--gold); }
.lb-metrics { display: flex; gap: 12px; font-size: 13px; color: var(--text-muted); }
.lb-score { font-weight: 700; color: var(--accent-2); }
/* Рейтинг новичков (мало игр) — серебряный, не золотой. */
.lb-score.provisional { color: var(--silver); }
/* Таблица общей статистики (сортируемая, кликабельные строки) */
.st-row, .st-head {
frontend/src/styles/tokens.css
+1
View File
@@ -11,6 +11,7 @@
--success: #4caf7d;
--danger: #e0533d;
--gold: #f0c14b;
--silver: #c0c6cf;
/* Размеры */
--app-max-w: 480px;