Implement the 010-ui-baseline feature that establishes a modern UI using Tailwind CSS v4 and shadcn/ui-style components for the encounter screen
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
@@ -1,175 +1,10 @@
|
||||
import type { CombatantId } from "@initiative/domain";
|
||||
import { type FormEvent, useCallback, useRef, useState } from "react";
|
||||
import { ActionBar } from "./components/action-bar";
|
||||
import { CombatantRow } from "./components/combatant-row";
|
||||
import { useEncounter } from "./hooks/use-encounter";
|
||||
|
||||
function formatEvent(e: ReturnType<typeof useEncounter>["events"][number]) {
|
||||
switch (e.type) {
|
||||
case "TurnAdvanced":
|
||||
return `Turn: ${e.previousCombatantId} → ${e.newCombatantId} (round ${e.roundNumber})`;
|
||||
case "RoundAdvanced":
|
||||
return `Round advanced to ${e.newRoundNumber}`;
|
||||
case "CombatantAdded":
|
||||
return `Added combatant: ${e.name}`;
|
||||
case "CombatantRemoved":
|
||||
return `Removed combatant: ${e.name}`;
|
||||
case "CombatantUpdated":
|
||||
return `Renamed combatant: ${e.oldName} → ${e.newName}`;
|
||||
case "InitiativeSet":
|
||||
return `Initiative: ${e.combatantId} ${e.previousValue ?? "unset"} → ${e.newValue ?? "unset"}`;
|
||||
case "MaxHpSet":
|
||||
return `Max HP: ${e.combatantId} ${e.previousMaxHp ?? "unset"} → ${e.newMaxHp ?? "unset"}`;
|
||||
case "CurrentHpAdjusted":
|
||||
return `HP: ${e.combatantId} ${e.previousHp} → ${e.newHp} (${e.delta > 0 ? "+" : ""}${e.delta})`;
|
||||
}
|
||||
}
|
||||
|
||||
function EditableName({
|
||||
name,
|
||||
combatantId,
|
||||
isActive,
|
||||
onRename,
|
||||
}: {
|
||||
name: string;
|
||||
combatantId: CombatantId;
|
||||
isActive: boolean;
|
||||
onRename: (id: CombatantId, newName: string) => void;
|
||||
}) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState(name);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const commit = useCallback(() => {
|
||||
const trimmed = draft.trim();
|
||||
if (trimmed !== "" && trimmed !== name) {
|
||||
onRename(combatantId, trimmed);
|
||||
}
|
||||
setEditing(false);
|
||||
}, [draft, name, combatantId, onRename]);
|
||||
|
||||
const startEditing = useCallback(() => {
|
||||
setDraft(name);
|
||||
setEditing(true);
|
||||
requestAnimationFrame(() => inputRef.current?.select());
|
||||
}, [name]);
|
||||
|
||||
if (editing) {
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
value={draft}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={commit}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") commit();
|
||||
if (e.key === "Escape") setEditing(false);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button type="button" onClick={startEditing}>
|
||||
{isActive ? `▶ ${name}` : name}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function MaxHpInput({
|
||||
maxHp,
|
||||
onCommit,
|
||||
}: {
|
||||
maxHp: number | undefined;
|
||||
onCommit: (value: number | undefined) => void;
|
||||
}) {
|
||||
const [draft, setDraft] = useState(maxHp?.toString() ?? "");
|
||||
const prev = useRef(maxHp);
|
||||
|
||||
// Sync draft when domain value changes externally (e.g. from another source)
|
||||
if (maxHp !== prev.current) {
|
||||
prev.current = maxHp;
|
||||
setDraft(maxHp?.toString() ?? "");
|
||||
}
|
||||
|
||||
const commit = useCallback(() => {
|
||||
if (draft === "") {
|
||||
onCommit(undefined);
|
||||
return;
|
||||
}
|
||||
const n = Number.parseInt(draft, 10);
|
||||
if (!Number.isNaN(n) && n >= 1) {
|
||||
onCommit(n);
|
||||
} else {
|
||||
// Revert invalid input
|
||||
setDraft(maxHp?.toString() ?? "");
|
||||
}
|
||||
}, [draft, maxHp, onCommit]);
|
||||
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={draft}
|
||||
placeholder="Max HP"
|
||||
style={{ width: "5em" }}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={commit}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") commit();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function CurrentHpInput({
|
||||
currentHp,
|
||||
maxHp,
|
||||
onCommit,
|
||||
}: {
|
||||
currentHp: number | undefined;
|
||||
maxHp: number | undefined;
|
||||
onCommit: (value: number) => void;
|
||||
}) {
|
||||
const [draft, setDraft] = useState(currentHp?.toString() ?? "");
|
||||
const prev = useRef(currentHp);
|
||||
|
||||
if (currentHp !== prev.current) {
|
||||
prev.current = currentHp;
|
||||
setDraft(currentHp?.toString() ?? "");
|
||||
}
|
||||
|
||||
const commit = useCallback(() => {
|
||||
if (draft === "" || currentHp === undefined) return;
|
||||
const n = Number.parseInt(draft, 10);
|
||||
if (!Number.isNaN(n)) {
|
||||
onCommit(n);
|
||||
} else {
|
||||
setDraft(currentHp.toString());
|
||||
}
|
||||
}, [draft, currentHp, onCommit]);
|
||||
|
||||
return (
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={maxHp}
|
||||
value={draft}
|
||||
placeholder="HP"
|
||||
disabled={maxHp === undefined}
|
||||
style={{ width: "4em" }}
|
||||
onChange={(e) => setDraft(e.target.value)}
|
||||
onBlur={commit}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") commit();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function App() {
|
||||
const {
|
||||
encounter,
|
||||
events,
|
||||
advanceTurn,
|
||||
addCombatant,
|
||||
removeCombatant,
|
||||
@@ -179,103 +14,45 @@ export function App() {
|
||||
adjustHp,
|
||||
} = useEncounter();
|
||||
const activeCombatant = encounter.combatants[encounter.activeIndex];
|
||||
const [nameInput, setNameInput] = useState("");
|
||||
|
||||
const handleAdd = (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (nameInput.trim() === "") return;
|
||||
addCombatant(nameInput);
|
||||
setNameInput("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Initiative Tracker</h1>
|
||||
<div className="mx-auto flex min-h-screen max-w-2xl flex-col gap-6 px-4 py-8">
|
||||
{/* Header */}
|
||||
<header className="space-y-1">
|
||||
<h1 className="text-2xl font-bold tracking-tight">
|
||||
Initiative Tracker
|
||||
</h1>
|
||||
{activeCombatant && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Round {encounter.roundNumber} — Current: {activeCombatant.name}
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
|
||||
{activeCombatant && (
|
||||
<p>
|
||||
Round {encounter.roundNumber} — Current: {activeCombatant.name}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<ul>
|
||||
{encounter.combatants.map((c, i) => (
|
||||
<li key={c.id}>
|
||||
<EditableName
|
||||
name={c.name}
|
||||
combatantId={c.id}
|
||||
{/* Combatant List */}
|
||||
<div className="flex flex-1 flex-col gap-1 overflow-y-auto">
|
||||
{encounter.combatants.length === 0 ? (
|
||||
<p className="py-12 text-center text-sm text-muted-foreground">
|
||||
No combatants yet — add one to get started
|
||||
</p>
|
||||
) : (
|
||||
encounter.combatants.map((c, i) => (
|
||||
<CombatantRow
|
||||
key={c.id}
|
||||
combatant={c}
|
||||
isActive={i === encounter.activeIndex}
|
||||
onRename={editCombatant}
|
||||
/>{" "}
|
||||
<input
|
||||
type="number"
|
||||
value={c.initiative ?? ""}
|
||||
placeholder="Init"
|
||||
style={{ width: "4em" }}
|
||||
onChange={(e) => {
|
||||
const raw = e.target.value;
|
||||
if (raw === "") {
|
||||
setInitiative(c.id, undefined);
|
||||
} else {
|
||||
const n = Number.parseInt(raw, 10);
|
||||
if (!Number.isNaN(n)) {
|
||||
setInitiative(c.id, n);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>{" "}
|
||||
{c.maxHp !== undefined && c.currentHp !== undefined && (
|
||||
<button type="button" onClick={() => adjustHp(c.id, -1)}>
|
||||
-
|
||||
</button>
|
||||
)}
|
||||
<CurrentHpInput
|
||||
currentHp={c.currentHp}
|
||||
maxHp={c.maxHp}
|
||||
onCommit={(value) => {
|
||||
if (c.currentHp === undefined) return;
|
||||
const delta = value - c.currentHp;
|
||||
if (delta !== 0) adjustHp(c.id, delta);
|
||||
}}
|
||||
onSetInitiative={setInitiative}
|
||||
onRemove={removeCombatant}
|
||||
onSetHp={setHp}
|
||||
onAdjustHp={adjustHp}
|
||||
/>
|
||||
{c.maxHp !== undefined && <span>/</span>}
|
||||
{c.maxHp !== undefined && c.currentHp !== undefined && (
|
||||
<button type="button" onClick={() => adjustHp(c.id, 1)}>
|
||||
+
|
||||
</button>
|
||||
)}{" "}
|
||||
<MaxHpInput maxHp={c.maxHp} onCommit={(v) => setHp(c.id, v)} />{" "}
|
||||
<button type="button" onClick={() => removeCombatant(c.id)}>
|
||||
Remove
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleAdd}>
|
||||
<input
|
||||
type="text"
|
||||
value={nameInput}
|
||||
onChange={(e) => setNameInput(e.target.value)}
|
||||
placeholder="Combatant name"
|
||||
/>
|
||||
<button type="submit">Add Combatant</button>
|
||||
</form>
|
||||
|
||||
<button type="button" onClick={advanceTurn}>
|
||||
Next Turn
|
||||
</button>
|
||||
|
||||
{events.length > 0 && (
|
||||
<div>
|
||||
<h2>Events</h2>
|
||||
<ul>
|
||||
{events.map((e, i) => (
|
||||
<li key={`${e.type}-${i}`}>{formatEvent(e)}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
{/* Action Bar */}
|
||||
<ActionBar onAddCombatant={addCombatant} onAdvanceTurn={advanceTurn} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user