Implement the 003-remove-combatant feature that adds the possibility to remove a combatant from an encounter

apps/web/src/App.tsx

@@ -9,11 +9,14 @@ function formatEvent(e: ReturnType<typeof useEncounter>["events"][number]) {
 			return `Round advanced to ${e.newRoundNumber}`;
 		case "CombatantAdded":
 			return `Added combatant: ${e.name}`;
+		case "CombatantRemoved":
+			return `Removed combatant: ${e.name}`;
 	}
 }
 
 export function App() {
-	const { encounter, events, advanceTurn, addCombatant } = useEncounter();
+	const { encounter, events, advanceTurn, addCombatant, removeCombatant } =
+		useEncounter();
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
 	const [nameInput, setNameInput] = useState("");
 
@@ -37,7 +40,10 @@ export function App() {
 			<ul>
 				{encounter.combatants.map((c, i) => (
 					<li key={c.id}>
-						{i === encounter.activeIndex ? `▶ ${c.name}` : c.name}
+						{i === encounter.activeIndex ? `▶ ${c.name}` : c.name}{" "}
+						<button type="button" onClick={() => removeCombatant(c.id)}>
+							Remove
+						</button>
 					</li>
 				))}
 			</ul>