{
+ const target = game.versions.find((v) => v.id === entry.versionId);
+ if (target) play(target, entry.code);
+ }} />
{canEdit && }
@@ -238,7 +246,7 @@ const KIND: Record = { original: "", translation: "Пе
function VersionRow(props: {
v: Version; depth: number; current: boolean; isMain: boolean; canManage: boolean; canFork: boolean;
canTranslate: boolean; canPublish: boolean;
- onPlay: () => void; onFork: () => void; onRetry: () => void; onDelete: () => void;
+ onPlay: () => void; onPlayLang: (code: string) => void; onFork: () => void; onRetry: () => void; onDelete: () => void;
onTranslate: () => void; onPublish: () => void; onMakeMain: () => void;
}) {
const { v } = props;
@@ -264,19 +272,10 @@ function VersionRow(props: {
{v.owner?.username ?? "—"} · {new Date(v.created_at).toLocaleDateString()} · {formatSize(v.size_bytes)}
{v.progress && ` · ${v.progress}`}
- {v.status === "ready" && v.languages?.length > 0 && (
-
-
- {v.languages.map((l) => (
-
- {l.name} {Math.round(l.progress * 100)}%
-
- ))}
-
- )}
{v.status === "ready" &&
}
+ {v.status === "ready" &&
props.onPlayLang(e.code)} />}
{v.status === "ready" && props.canFork && }
{v.status === "ready" && v.kind === "mod" && Редактор мода}
{v.status === "ready" && props.canTranslate && v.kind === "translation" && v.visibility === "draft" && props.canManage ? (
diff --git a/frontend/src/pages/languages.ts b/frontend/src/pages/languages.ts
new file mode 100644
index 0000000..9df93e3
--- /dev/null
+++ b/frontend/src/pages/languages.ts
@@ -0,0 +1,43 @@
+// Languages a game can be played in: per version, and for the whole game (all published versions).
+
+import type { Version } from "../api";
+
+export interface LangEntry {
+ code: string;
+ name: string;
+ /** 0..1 share of the text that is translated; 1 for the original language */
+ progress: number;
+ source: boolean;
+ /** the version that plays in this language */
+ versionId: number;
+}
+
+/** The original language first, then translations. */
+export function versionLanguages(v: Version): LangEntry[] {
+ const out: LangEntry[] = [];
+ if (v.source_lang && v.source_lang !== "und") {
+ out.push({ code: v.source_lang, name: v.source_name ?? v.source_lang, progress: 1, source: true, versionId: v.id });
+ }
+ for (const l of v.languages ?? []) {
+ if (!out.some((e) => e.code === l.code)) {
+ out.push({ code: l.code, name: l.name, progress: l.progress, source: false, versionId: v.id });
+ }
+ }
+ return out;
+}
+
+/** Languages of every published, ready version; each language points at the version that has it best. */
+export function aggregateLanguages(versions: Version[], preferred?: number | null): LangEntry[] {
+ const best = new Map();
+ for (const v of versions) {
+ if (v.status !== "ready" || v.visibility !== "published") continue;
+ for (const entry of versionLanguages(v)) {
+ const known = best.get(entry.code);
+ const better = !known || entry.progress > known.progress
+ || (entry.progress === known.progress && entry.versionId === preferred && known.versionId !== preferred);
+ if (better) best.set(entry.code, entry);
+ }
+ }
+ return [...best.values()].sort((a, b) =>
+ Number(b.source) - Number(a.source) || b.progress - a.progress || a.name.localeCompare(b.name));
+}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 751e138..96ddb21 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -838,3 +838,17 @@ input[type="file"] { padding: 0.4rem; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
+
+/* language dropdown (version row and game header) */
+.lang-menu { position: relative; display: inline-block; }
+.lang-menu .count { margin-left: 2px; opacity: 0.7; }
+.lang-menu-list {
+ position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 220px; margin: 0; padding: 6px;
+ list-style: none; background: var(--surface, #1b1f2b); border: 1px solid var(--border, #2b3040);
+ border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+}
+.lang-menu-item {
+ display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 10px;
+ border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left;
+}
+.lang-menu-item:hover, .lang-menu-item:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
diff --git a/frontend/src/ui/LanguageMenu.tsx b/frontend/src/ui/LanguageMenu.tsx
new file mode 100644
index 0000000..bd60940
--- /dev/null
+++ b/frontend/src/ui/LanguageMenu.tsx
@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from "react";
+import type { LangEntry } from "../pages/languages";
+import { Icon } from "./Icon";
+
+/** A button that opens the list of languages a game or version can be played in. */
+export function LanguageMenu({ entries, onPick, title = "Языки" }: {
+ entries: LangEntry[]; onPick: (entry: LangEntry) => void; title?: string;
+}) {
+ const [open, setOpen] = useState(false);
+ const box = useRef(null);
+
+ useEffect(() => {
+ if (!open) return;
+ const close = (ev: Event) => {
+ if (ev instanceof KeyboardEvent ? ev.key === "Escape" : !box.current?.contains(ev.target as Node)) setOpen(false);
+ };
+ document.addEventListener("mousedown", close);
+ document.addEventListener("keydown", close);
+ return () => {
+ document.removeEventListener("mousedown", close);
+ document.removeEventListener("keydown", close);
+ };
+ }, [open]);
+
+ if (!entries.length) return null;
+ return (
+
+
+ {open && (
+
+ {entries.map((e) => (
+ -
+
+
+ ))}
+
+ )}
+