Implement the 002-add-combatant feature that adds the possibility to add new combatants to an encounter

apps/web/src/App.tsx

@@ -1,16 +1,38 @@
+import { type FormEvent, useState } from "react";
 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}`;
+	}
+}
+
 export function App() {
-	const { encounter, events, advanceTurn } = useEncounter();
+	const { encounter, events, advanceTurn, addCombatant } = 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>
 
-			<p>
-				Round {encounter.roundNumber} — Current: {activeCombatant.name}
-			</p>
+			{activeCombatant && (
+				<p>
+					Round {encounter.roundNumber} — Current: {activeCombatant.name}
+				</p>
+			)}
 
 			<ul>
 				{encounter.combatants.map((c, i) => (
@@ -20,6 +42,16 @@ export function App() {
 				))}
 			</ul>
 
+			<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>
@@ -29,11 +61,7 @@ export function App() {
 					<h2>Events</h2>
 					<ul>
 						{events.map((e, i) => (
-							<li key={`${e.type}-${i}`}>
-								{e.type === "TurnAdvanced"
-									? `Turn: ${e.previousCombatantId} → ${e.newCombatantId} (round ${e.roundNumber})`
-									: `Round advanced to ${e.newRoundNumber}`}
-							</li>
+							<li key={`${e.type}-${i}`}>{formatEvent(e)}</li>
 						))}
 					</ul>
 				</div>

apps/web/src/hooks/use-encounter.ts

@@ -1,5 +1,8 @@
 import type { EncounterStore } from "@initiative/application";
-import { advanceTurnUseCase } from "@initiative/application";
+import {
+	addCombatantUseCase,
+	advanceTurnUseCase,
+} from "@initiative/application";
 import type { DomainEvent, Encounter } from "@initiative/domain";
 import {
 	combatantId,
@@ -28,20 +31,38 @@ export function useEncounter() {
 	const encounterRef = useRef(encounter);
 	encounterRef.current = encounter;
 
-	const advanceTurn = useCallback(() => {
-		const store: EncounterStore = {
+	const makeStore = useCallback((): EncounterStore => {
+		return {
 			get: () => encounterRef.current,
 			save: (e) => setEncounter(e),
 		};
+	}, []);
 
-		const result = advanceTurnUseCase(store);
+	const advanceTurn = useCallback(() => {
+		const result = advanceTurnUseCase(makeStore());
 
 		if (isDomainError(result)) {
 			return;
 		}
 
 		setEvents((prev) => [...prev, ...result]);
-	}, []);
+	}, [makeStore]);
 
-	return { encounter, events, advanceTurn } as const;
+	const nextId = useRef(0);
+
+	const addCombatant = useCallback(
+		(name: string) => {
+			const id = combatantId(`c-${++nextId.current}`);
+			const result = addCombatantUseCase(makeStore(), id, name);
+
+			if (isDomainError(result)) {
+				return;
+			}
+
+			setEvents((prev) => [...prev, ...result]);
+		},
+		[makeStore],
+	);
+
+	return { encounter, events, advanceTurn, addCombatant } as const;
 }