ui/phase-14: rename planet end-to-end + order read-back
Wires the first end-to-end command through the full pipeline:
inspector rename action → local order draft → user.games.order
submit → optimistic overlay on map / inspector → server hydration
on cache miss via the new user.games.order.get message type.
Backend: GET /api/v1/user/games/{id}/orders forwards to engine
GET /api/v1/order. Gateway parses the engine PUT response into the
extended UserGamesOrderResponse FBS envelope and adds
executeUserGamesOrderGet for the read-back path. Frontend ports
ValidateTypeName to TS, lands the inline rename editor + Submit
button, and exposes a renderedReport context so consumers see the
overlay-applied snapshot.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
@@ -1,23 +1,29 @@
|
||||
<!--
|
||||
Phase 13 read-only planet inspector. Renders the documented field
|
||||
set for the planet kind in question:
|
||||
Planet inspector. Renders the documented field set for each planet
|
||||
kind (local / other / uninhabited / unidentified) and exposes a
|
||||
Rename action on owned (`local`) planets that opens an inline
|
||||
editor. The editor runs the same `validateEntityName` rules as the
|
||||
server-side validator (parity with `pkg/util/string.go`) and, on
|
||||
confirm, appends a `planetRename` command to the local order draft
|
||||
through the `OrderDraftStore` provided via context.
|
||||
|
||||
- `local` / `other` carry the full economy: name, owner (other only),
|
||||
coordinates, size, population, colonists, industry, both stockpiles,
|
||||
natural resources, current production, free production potential.
|
||||
- `uninhabited` keeps name, coordinates, size, both stockpiles, and
|
||||
natural resources — the engine does not project industry or
|
||||
population for unowned planets.
|
||||
- `unidentified` is reduced to coordinates plus a no-data hint.
|
||||
|
||||
The component is purely presentational: the parent supplies a
|
||||
`ReportPlanet` snapshot resolved from `GameStateStore`, no store
|
||||
lookups happen here. Phase 14 will extend the same component with a
|
||||
`Rename` action; the read-only layout stays the structural baseline.
|
||||
The read-only path stays unchanged for non-`local` planets. The
|
||||
inline editor lives directly inside this component per PLAN.md
|
||||
Phase 14 — a separate file would be over-abstraction for one input
|
||||
field with five buttons.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { getContext, tick } from "svelte";
|
||||
import type { ReportPlanet } from "../../api/game-state";
|
||||
import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
|
||||
import {
|
||||
ORDER_DRAFT_CONTEXT_KEY,
|
||||
OrderDraftStore,
|
||||
} from "../../sync/order-draft.svelte";
|
||||
import {
|
||||
validateEntityName,
|
||||
type EntityNameInvalidReason,
|
||||
} from "$lib/util/entity-name";
|
||||
|
||||
type Props = {
|
||||
planet: ReportPlanet;
|
||||
@@ -31,6 +37,34 @@ lookups happen here. Phase 14 will extend the same component with a
|
||||
unidentified: "game.inspector.planet.kind.unidentified",
|
||||
};
|
||||
|
||||
const invalidReasonKeyMap: Record<EntityNameInvalidReason, TranslationKey> = {
|
||||
empty: "game.inspector.planet.rename.invalid.empty",
|
||||
too_long: "game.inspector.planet.rename.invalid.too_long",
|
||||
starts_with_special:
|
||||
"game.inspector.planet.rename.invalid.starts_with_special",
|
||||
ends_with_special: "game.inspector.planet.rename.invalid.ends_with_special",
|
||||
consecutive_specials:
|
||||
"game.inspector.planet.rename.invalid.consecutive_specials",
|
||||
whitespace: "game.inspector.planet.rename.invalid.whitespace",
|
||||
disallowed_character:
|
||||
"game.inspector.planet.rename.invalid.disallowed_character",
|
||||
};
|
||||
|
||||
const draft = getContext<OrderDraftStore | undefined>(
|
||||
ORDER_DRAFT_CONTEXT_KEY,
|
||||
);
|
||||
|
||||
let renameOpen = $state(false);
|
||||
let renameInput = $state("");
|
||||
let inputEl: HTMLInputElement | null = $state(null);
|
||||
|
||||
const renameValidation = $derived(validateEntityName(renameInput));
|
||||
const renameInvalidMessage = $derived(
|
||||
renameValidation.ok
|
||||
? ""
|
||||
: i18n.t(invalidReasonKeyMap[renameValidation.reason]),
|
||||
);
|
||||
|
||||
const kindLabel = $derived(i18n.t(kindKeyMap[planet.kind]));
|
||||
const coordinates = $derived(
|
||||
`(${formatNumber(planet.x)}, ${formatNumber(planet.y)})`,
|
||||
@@ -47,6 +81,44 @@ lookups happen here. Phase 14 will extend the same component with a
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
async function openRename(): Promise<void> {
|
||||
renameInput = planet.name;
|
||||
renameOpen = true;
|
||||
await tick();
|
||||
inputEl?.focus();
|
||||
inputEl?.select();
|
||||
}
|
||||
|
||||
function cancelRename(): void {
|
||||
renameOpen = false;
|
||||
renameInput = "";
|
||||
}
|
||||
|
||||
async function confirmRename(): Promise<void> {
|
||||
const result = validateEntityName(renameInput);
|
||||
if (!result.ok || draft === undefined) return;
|
||||
await draft.add({
|
||||
kind: "planetRename",
|
||||
id: crypto.randomUUID(),
|
||||
planetNumber: planet.number,
|
||||
name: result.value,
|
||||
});
|
||||
renameOpen = false;
|
||||
renameInput = "";
|
||||
}
|
||||
|
||||
function onKeyDown(event: KeyboardEvent): void {
|
||||
if (event.key === "Escape") {
|
||||
event.preventDefault();
|
||||
cancelRename();
|
||||
return;
|
||||
}
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
void confirmRename();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section
|
||||
@@ -60,8 +132,65 @@ lookups happen here. Phase 14 will extend the same component with a
|
||||
{#if planet.kind !== "unidentified"}
|
||||
<h3 class="name" data-testid="inspector-planet-name">{planet.name}</h3>
|
||||
{/if}
|
||||
{#if planet.kind === "local" && !renameOpen}
|
||||
<button
|
||||
type="button"
|
||||
class="action"
|
||||
data-testid="inspector-planet-rename-action"
|
||||
onclick={openRename}
|
||||
>
|
||||
{i18n.t("game.inspector.planet.action.rename")}
|
||||
</button>
|
||||
{/if}
|
||||
</header>
|
||||
|
||||
{#if planet.kind === "local" && renameOpen}
|
||||
<div class="rename" data-testid="inspector-planet-rename">
|
||||
<label class="rename-label" for="planet-rename-input">
|
||||
{i18n.t("game.inspector.planet.rename.title")}
|
||||
</label>
|
||||
<input
|
||||
id="planet-rename-input"
|
||||
type="text"
|
||||
class="rename-input"
|
||||
data-testid="inspector-planet-rename-input"
|
||||
bind:value={renameInput}
|
||||
bind:this={inputEl}
|
||||
onkeydown={onKeyDown}
|
||||
aria-invalid={renameValidation.ok ? "false" : "true"}
|
||||
aria-describedby={renameValidation.ok ? undefined : "planet-rename-error"}
|
||||
/>
|
||||
{#if !renameValidation.ok}
|
||||
<p
|
||||
id="planet-rename-error"
|
||||
class="rename-error"
|
||||
data-testid="inspector-planet-rename-error"
|
||||
>
|
||||
{renameInvalidMessage}
|
||||
</p>
|
||||
{/if}
|
||||
<div class="rename-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="rename-cancel"
|
||||
data-testid="inspector-planet-rename-cancel"
|
||||
onclick={cancelRename}
|
||||
>
|
||||
{i18n.t("game.inspector.planet.rename.cancel")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="rename-confirm"
|
||||
data-testid="inspector-planet-rename-confirm"
|
||||
disabled={!renameValidation.ok || draft === undefined}
|
||||
onclick={() => void confirmRename()}
|
||||
>
|
||||
{i18n.t("game.inspector.planet.rename.confirm")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<dl class="fields">
|
||||
{#if planet.kind === "other" && planet.owner !== null}
|
||||
<div class="field" data-testid="inspector-planet-field-owner">
|
||||
@@ -194,4 +323,69 @@ lookups happen here. Phase 14 will extend the same component with a
|
||||
color: #888;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.action {
|
||||
align-self: flex-start;
|
||||
margin-top: 0.25rem;
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.2rem 0.55rem;
|
||||
background: transparent;
|
||||
color: #aab;
|
||||
border: 1px solid #2a3150;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.action:hover {
|
||||
color: #e8eaf6;
|
||||
border-color: #6d8cff;
|
||||
}
|
||||
.rename {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
.rename-label {
|
||||
font-size: 0.85rem;
|
||||
color: #aab;
|
||||
}
|
||||
.rename-input {
|
||||
font: inherit;
|
||||
padding: 0.3rem 0.5rem;
|
||||
background: #0a0e1a;
|
||||
color: #e8eaf6;
|
||||
border: 1px solid #2a3150;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.rename-input[aria-invalid="true"] {
|
||||
border-color: #d97a7a;
|
||||
}
|
||||
.rename-error {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: #d97a7a;
|
||||
}
|
||||
.rename-actions {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.rename-cancel,
|
||||
.rename-confirm {
|
||||
font: inherit;
|
||||
font-size: 0.85rem;
|
||||
padding: 0.25rem 0.65rem;
|
||||
background: transparent;
|
||||
color: #aab;
|
||||
border: 1px solid #2a3150;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rename-confirm:not(:disabled):hover,
|
||||
.rename-cancel:hover {
|
||||
color: #e8eaf6;
|
||||
border-color: #6d8cff;
|
||||
}
|
||||
.rename-confirm:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user