ui for chapter 2

src/lib/components/Battle.story.svelte

@@ -1,6 +1,6 @@
 <Beer />
 <Hst.Story>
-	<Battle {status} />
+	<Battle {status} params={{ battleId: 1 }} />
 
 	<svelte:fragment slot="controls">
 		<Hst.Select

src/lib/components/Battle.svelte

@@ -32,6 +32,21 @@
 		<dt>character</dt>
 		<dd>{character}</dd>
 
+		{#if additionalCharacters}
+			{#each additionalCharacters as c, i (c.selection)}
+				<dt>add. character</dt>
+				<dd>
+					<AdditionalCharacter
+						on:change={changeCharacter(i)}
+						selection={c.selection}
+						choices={minusSelected(
+							status === 'ongoing' && wave == 1 ? c.choices : [],
+						)}
+					/>
+				</dd>
+			{/each}
+		{/if}
+
 		<dt>difficulty</dt>
 		<dd>
 			<div class="field border">
@@ -102,11 +117,13 @@
 </article>
 
 <script>
+	import * as R from 'remeda';
 	import { getContext } from 'svelte';
+	import AdditionalCharacter from './Battle/AdditionalCharacter.svelte';
 
 	export let params;
 
-	const api = getContext('api');
+	export let api = getContext('api');
 	export let activeCampaign = api?.activeCampaign;
 	export let event = api?.event;
 
@@ -120,6 +137,13 @@
 	$: difficulty = battle?.difficulty ?? 0;
 	$: character = battle?.character;
 	$: city = battle?.city;
+	$: additionalCharacters = battle?.additionalCharacters;
+
+	$: console.log(additionalCharacters);
+
+	$: minusSelected =
+		additionalCharacters &&
+		R.difference(additionalCharacters.map(R.prop('selection')).flat());
 
 	let chapter = 1 + parseInt(params.battleId / 2);
 	$: chapterBattle =
@@ -131,6 +155,12 @@
 		event?.setBattleVerdict(params.battleId, verdict);
 
 	//	$: event.setBattleDifficulty(params.battleId, difficulty);
+
+	const changeCharacter =
+		(index) =>
+		({ target: { value } }) => {
+			event?.setCharacter(params.battleId, index, value);
+		};
 </script>
 
 <style>

src/lib/components/Battle/AdditionalCharacter.svelte

@@ -0,0 +1,16 @@
+{#if choices.length === 0}
+	{selection}
+{:else}
+	<select on:change>
+		<option>{selection}</option>
+		{#each choices as c (c)}
+			<option>{c}</option>
+		{/each}
+	</select>
+{/if}
+
+<script>
+	export let selection;
+	export let choices;
+	$: console.log(choices);
+</script>

src/lib/components/Battle/Chapter2.story.svelte

@@ -0,0 +1,50 @@
+<Beer />
+<Hst.Story>
+	<Battle {status} params={{ battleId: 3 }} {api} />
+
+	<svelte:fragment slot="controls">
+		<Hst.Select
+			bind:value={status}
+			title="status"
+			options={Object.fromEntries(statuses.map((s) => [s, s]))}
+		/>
+		<Hst.Number bind:value={wave} title="wave" />
+	</svelte:fragment>
+</Hst.Story>
+
+<script>
+	/** @type any */
+	export let Hst;
+	import { logEvent } from 'histoire/client';
+	import { readable } from 'svelte/store';
+	import Beer from '../Beer.svelte';
+	import Battle from '../Battle.svelte';
+
+	let status = 'upcoming';
+	let wave = '1';
+
+	const api = {
+		event: {
+			setCharacter: (...e) => logEvent('setCharacter', e),
+			setActiveCampaign: () => {},
+		},
+		activeCampaign: readable({
+			battles: [
+				null,
+				null,
+				{
+					wave,
+					status: 'ongoing',
+					scenario: 's',
+					city: 'c',
+					character: 'bob',
+					additionalCharacters: [
+						{ choices: ['one', 'two'], selection: 'one' },
+					],
+				},
+			],
+		}),
+	};
+
+	let statuses = ['upcoming', 'prep', 'ongoing', 'won', 'lost'];
+</script>

src/lib/store/api.js

@@ -1,6 +1,4 @@
 import PouchDB from 'pouchdb';
-import * as R from 'remeda';
-import Dexie, { liveQuery } from 'dexie';
 import { writable, derived, get } from 'svelte/store';
 import { genNextBattle } from './genNextBattle.js';
 import u from '@yanick/updeep-remeda';
@@ -97,10 +95,21 @@ export function genApi(options = {}) {
 	const deleteCampaign = (_id) =>
 		pouchdb.remove(get(campaigns).find(u.matches({ _id })));
 
+	const setCharacter = (battleId, characterId, value) => {
+		const campaign = u.updateIn(
+			get(activeCampaign),
+			['battles', battleId, 'additionalCharacters', 'selection'],
+			value,
+		);
+
+		pouchdb.put(campaign);
+	};
+
 	return {
 		campaigns,
 		activeCampaign,
 		event: {
+			setCharacter,
 			deleteCampaign,
 			addCampaign,
 			setActiveCampaign,

src/lib/store/genNextBattle.js

@@ -47,7 +47,7 @@ export function genChapter2Battle(battles) {
 	let choices = battles.slice(0, 2).map(R.prop('character'));
 	if (battles.length == 3)
 		choices = choices.filter(
-			(n) => n !== R.last(battles).additionalCharacter[0].selection,
+			(n) => n !== R.last(battles).additionalCharacters[0].selection,
 		);
 
 	return {

src/lib/store/genNextBattle.test.js

@@ -24,7 +24,7 @@ test('chapter 2, second battle', () => {
 		{ character: 'two' },
 		{
 			character: 'three',
-			additionalCharacter: [{ selection: 'two' }],
+			additionalCharacters: [{ selection: 'two' }],
 		},
 	]);