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>