ui/phase-27: battle viewer (radial scene, playback, map markers)
Engine wire change: Report.battle switched from []uuid.UUID to
[]BattleSummary{id, planet, shots} so the map can place battle
markers without N extra fetches. FBS schema + generated Go/TS
regenerated; transcoder + report controller updated; openapi
adds the BattleSummary schema with a freeze test.
Backend gateway forwards engine GET /api/v1/battle/:turn/:uuid as
/api/v1/user/games/{game_id}/battles/{turn}/{battle_id} (handler
plus engineclient.FetchBattle, contract test stub, openapi spec).
UI:
- BattleViewer (lib/battle-player/) is a logically isolated SVG
radial scene that consumes a BattleReport prop. Planet at the
centre, races on the outer ring at equal angular spacing, race
clusters by (race, className) with <class>:<numLeft> labels;
observer groups (inBattle: false) are not drawn; eliminated
races drop out and survivors re-distribute on the next frame.
- Shot line per frame: red on destroyed, green otherwise; erased
on the next frame. Playback controls: play/pause + step ± +
rewind + 1x/2x/4x speed (400/200/100 ms per frame).
- Page wrapper (lib/active-view/battle.svelte) loads BattleReport
via api/battle-fetch.ts; synthetic-gameId prefix routes to a
fixture loader, otherwise REST through the gateway. Always-
visible <ol> text protocol satisfies the accessibility ask.
- section-battles.svelte links every battle UUID into the viewer.
- map/battle-markers.ts: yellow X cross of 2 LinePrim through the
corners of the planet's circumscribed square (stroke width
clamps from 1 px at 1 shot to 5 px at 100+ shots); bombing
marker is a stroke-only ring (yellow when damaged, red when
wiped). Wired into state-binding.ts; click handler dispatches
battle clicks to the viewer and bombing clicks to the matching
Reports row.
- i18n keys for the viewer in en + ru.
Docs: ui/docs/battle-viewer-ux.md, FUNCTIONAL.md §6.5 + ru
mirror, ui/PLAN.md Phase 27 decisions + deferred TODOs (push
event, richer class visuals, animated re-distribution).
Tests: Vitest unit (radial layout + timeline frame builder +
marker stroke formula + marker primitives), Playwright e2e for
the viewer (Reports link → viewer, playback step, not-found),
backend engineclient FetchBattle (200 / 404 / bad input), engine
openapi freezes (BattleReport, BattleReportGroup,
BattleActionReport, BattleSummary, Report.battle items).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
@@ -1,30 +1,134 @@
|
||||
<!--
|
||||
Phase 10 stub for the battle-log active view. Phase 27 wires the real
|
||||
battle viewer.
|
||||
Phase 27 — active-view wrapper around the BattleViewer. Loads the
|
||||
BattleReport for the supplied `gameId`/`turn`/`battleId` and either
|
||||
shows the radial playback (BattleViewer), a loading skeleton, or a
|
||||
not-found state. The viewer itself is a logically isolated
|
||||
component that takes a `BattleReport` prop — this wrapper owns
|
||||
loading and routing concerns.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
|
||||
import {
|
||||
BattleFetchError,
|
||||
fetchBattle,
|
||||
type BattleReport,
|
||||
} from "../../api/battle-fetch";
|
||||
import { i18n } from "$lib/i18n/index.svelte";
|
||||
|
||||
type Props = { battleId: string };
|
||||
let { battleId }: Props = $props();
|
||||
import BattleViewer from "../battle-player/battle-viewer.svelte";
|
||||
|
||||
let {
|
||||
gameId,
|
||||
turn,
|
||||
battleId,
|
||||
}: {
|
||||
gameId: string;
|
||||
turn: number;
|
||||
battleId: string;
|
||||
} = $props();
|
||||
|
||||
let state = $state<
|
||||
| { kind: "loading" }
|
||||
| { kind: "ready"; report: BattleReport }
|
||||
| { kind: "not_found" }
|
||||
| { kind: "error"; message: string }
|
||||
>({ kind: "loading" });
|
||||
|
||||
$effect(() => {
|
||||
if (!battleId) {
|
||||
state = { kind: "not_found" };
|
||||
return;
|
||||
}
|
||||
state = { kind: "loading" };
|
||||
fetchBattle(gameId, turn, battleId)
|
||||
.then((report) => {
|
||||
state = { kind: "ready", report };
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (err instanceof BattleFetchError && err.status === 404) {
|
||||
state = { kind: "not_found" };
|
||||
} else {
|
||||
state = {
|
||||
kind: "error",
|
||||
message: err instanceof Error ? err.message : String(err),
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function backToReport() {
|
||||
goto(`/games/${gameId}/report`);
|
||||
}
|
||||
function backToMap() {
|
||||
goto(`/games/${gameId}/map`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="active-view" data-testid="active-view-battle" data-battle-id={battleId}>
|
||||
<h2>{i18n.t("game.view.battle")}</h2>
|
||||
<p>{i18n.t("game.shell.coming_soon")}</p>
|
||||
<nav class="back-row">
|
||||
<button
|
||||
type="button"
|
||||
class="back-btn"
|
||||
onclick={backToMap}
|
||||
data-testid="battle-back-to-map"
|
||||
>{i18n.t("game.battle.back_to_map")}</button>
|
||||
<button
|
||||
type="button"
|
||||
class="back-btn"
|
||||
onclick={backToReport}
|
||||
data-testid="battle-back-to-report"
|
||||
>{i18n.t("game.battle.back_to_report")}</button>
|
||||
</nav>
|
||||
|
||||
{#if state.kind === "loading"}
|
||||
<p class="status" data-testid="battle-loading">
|
||||
{i18n.t("game.battle.loading")}
|
||||
</p>
|
||||
{:else if state.kind === "ready"}
|
||||
<BattleViewer report={state.report} />
|
||||
{:else if state.kind === "not_found"}
|
||||
<p class="status" data-testid="battle-not-found">
|
||||
{i18n.t("game.battle.not_found")}
|
||||
</p>
|
||||
{:else}
|
||||
<p class="status error" data-testid="battle-error">{state.message}</p>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.active-view {
|
||||
padding: 1.5rem;
|
||||
padding: 1rem;
|
||||
font-family: system-ui, sans-serif;
|
||||
color: #d6dcf2;
|
||||
}
|
||||
.active-view h2 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
.back-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
max-width: 880px;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
.active-view p {
|
||||
margin: 0;
|
||||
color: #555;
|
||||
.back-btn {
|
||||
appearance: none;
|
||||
background: #1f2748;
|
||||
color: #d6dcf2;
|
||||
border: 1px solid #2c3568;
|
||||
padding: 0.35rem 0.7rem;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.back-btn:hover {
|
||||
background: #2a3463;
|
||||
}
|
||||
.status {
|
||||
margin: 2rem auto;
|
||||
max-width: 880px;
|
||||
color: #93a0d0;
|
||||
font-size: 0.95rem;
|
||||
text-align: center;
|
||||
}
|
||||
.status.error {
|
||||
color: #e08585;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -21,6 +21,8 @@ preference the store already manages.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { getContext, onDestroy, onMount, untrack } from "svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import { page } from "$app/state";
|
||||
import { i18n } from "$lib/i18n/index.svelte";
|
||||
import {
|
||||
createRenderer,
|
||||
@@ -402,13 +404,40 @@ preference the store already manages.
|
||||
if (selection === undefined) return;
|
||||
const hit = handle.hitAt(cursorPx);
|
||||
if (hit === null) return;
|
||||
if (hit.primitive.kind !== "point") return;
|
||||
const target = hitLookup.get(hit.primitive.id);
|
||||
if (target === undefined) return;
|
||||
if (target.kind === "planet") {
|
||||
selection.selectPlanet(target.number);
|
||||
} else {
|
||||
selection.selectShipGroup(target.ref);
|
||||
switch (target.kind) {
|
||||
case "planet":
|
||||
if (hit.primitive.kind !== "point") return;
|
||||
selection.selectPlanet(target.number);
|
||||
break;
|
||||
case "shipGroup":
|
||||
if (hit.primitive.kind !== "point") return;
|
||||
selection.selectShipGroup(target.ref);
|
||||
break;
|
||||
case "battle": {
|
||||
const gameId = page.params.id ?? "";
|
||||
const turn = store?.report?.turn ?? 0;
|
||||
void goto(
|
||||
`/games/${gameId}/battle/${target.battleId}?turn=${turn}`,
|
||||
);
|
||||
break;
|
||||
}
|
||||
case "bombing": {
|
||||
const gameId = page.params.id ?? "";
|
||||
void goto(
|
||||
`/games/${gameId}/report#report-bombings`,
|
||||
).then(() => {
|
||||
if (typeof document === "undefined") return;
|
||||
const row = document.querySelector(
|
||||
`[data-testid="report-bombing-row"][data-planet="${target.planet}"]`,
|
||||
);
|
||||
if (row && row.scrollIntoView) {
|
||||
row.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<!--
|
||||
Phase 23 Report View — battles section. The wire only carries
|
||||
battle UUIDs (the full battle report is fetched lazily by Phase 27),
|
||||
so each row is a monospace, non-interactive `<span>` of the battle
|
||||
identifier. Phase 27 will turn each row into a link to
|
||||
`/games/<id>/battle/<uuid>`; until then dead links are worse than
|
||||
plain text.
|
||||
Phase 27 Report View — battles section. Each row is a link into the
|
||||
Battle Viewer at `/games/<id>/battle/<uuid>?turn=<turn>` where
|
||||
`turn` follows the current report's turn so history-mode views land
|
||||
on the right battle. Phase 23 rendered the same rows as inactive
|
||||
monospace `<span>`; the rewire here is the one-liner the Phase 23
|
||||
decision log called out.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { getContext } from "svelte";
|
||||
import { page } from "$app/state";
|
||||
|
||||
import { i18n } from "$lib/i18n/index.svelte";
|
||||
import {
|
||||
@@ -19,7 +20,9 @@ plain text.
|
||||
RENDERED_REPORT_CONTEXT_KEY,
|
||||
);
|
||||
const report = $derived(rendered?.report ?? null);
|
||||
const ids = $derived(report?.battleIds ?? []);
|
||||
const battles = $derived(report?.battles ?? []);
|
||||
const gameId = $derived(page.params.id ?? "");
|
||||
const turn = $derived(report?.turn ?? 0);
|
||||
</script>
|
||||
|
||||
<section
|
||||
@@ -31,22 +34,23 @@ plain text.
|
||||
|
||||
{#if report === null}
|
||||
<p class="status">{i18n.t("game.report.loading")}</p>
|
||||
{:else if ids.length === 0}
|
||||
{:else if battles.length === 0}
|
||||
<p class="status" data-testid="battles-empty">
|
||||
{i18n.t("game.report.section.battles.empty")}
|
||||
</p>
|
||||
{:else}
|
||||
<ul class="ids" data-testid="battles-list">
|
||||
{#each ids as id (id)}
|
||||
{#each battles as b (b.id)}
|
||||
<li>
|
||||
<span class="label">
|
||||
{i18n.t("game.report.section.battles.id_label")}
|
||||
</span>
|
||||
<span
|
||||
<a
|
||||
class="uuid"
|
||||
href={`/games/${gameId}/battle/${b.id}?turn=${turn}`}
|
||||
data-testid="report-battle-row"
|
||||
data-id={id}
|
||||
>{id}</span>
|
||||
data-id={b.id}
|
||||
>{b.id}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
@@ -87,5 +91,10 @@ plain text.
|
||||
.uuid {
|
||||
color: #cfd7ff;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.uuid:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user