chapter 4 groundwork

src/lib/components/Battle.svelte

@@ -21,16 +21,29 @@
 		-- {status}
 	</h6>
 	<dl>
-		{#if status === 'ongoing'}
+		{#if status === 'ongoing' && chapter !== 4}
 			<dt>wave</dt>
 			<dd>{wave === 2 ? 'second' : 'first'}</dd>
 		{/if}
 		<dt>city</dt>
-		<dd>{city}</dd>
+		<dd>
+			{#if typeof city === 'string'}
+				{city}
+			{:else}
+				<AdditionalCharacter
+					on:change={changeCity}
+					selection={city.selection}
+					choices={city.choices}
+				/>
+			{/if}
+		</dd>
 		<dt>scenario</dt>
 		<dd>{scenario}</dd>
+
+		{#if character}
 			<dt>character</dt>
 			<dd>{character}</dd>
+		{/if}
 
 		{#if additionalCharacters}
 			{#each additionalCharacters as c, i (c.selection)}
@@ -161,6 +174,10 @@
 		({ target: { value } }) => {
 			event?.setCharacter(params.battleId, index, value);
 		};
+
+	const changeCity = ({ target: { value } }) => {
+		event?.setCity(params.battleId, value);
+	};
 </script>
 
 <style>

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

@@ -0,0 +1,59 @@
+<Beer />
+<Hst.Story>
+	<Battle {status} params={{ battleId: 7 }} {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 choices = ['one', 'two', 'three', 'four'];
+	const api = {
+		event: {
+			setCharacter: (...e) => logEvent('setCharacter', e),
+			setActiveCampaign: () => {},
+		},
+		activeCampaign: readable({
+			battles: [
+				null,
+				null,
+				null,
+				null,
+				null,
+				null,
+				{
+					status: 'ongoing',
+					wave: 1,
+					scenario: 'The Last Battle',
+					city: {
+						choices: ['a', 'b'],
+						selection: 'a',
+					},
+					additionalCharacters: [
+						{ choices, selection: 'one' },
+						{ choices, selection: 'three' },
+						{ choices, selection: 'two' },
+					],
+				},
+			],
+		}),
+	};
+
+	let statuses = ['upcoming', 'prep', 'ongoing', 'won', 'lost'];
+</script>

src/lib/store/api.js

@@ -104,6 +104,15 @@ export function genApi(options = {}) {
 
 		pouchdb.put(campaign);
 	};
+	const setCity = (battleId, value) => {
+		const campaign = u.updateIn(
+			get(activeCampaign),
+			['battles', battleId, 'city', 'selection'],
+			value,
+		);
+
+		pouchdb.put(campaign);
+	};
 
 	return {
 		campaigns,

src/lib/store/genNextBattle.js

@@ -118,6 +118,7 @@ export function genChapter4Battle(battles) {
 	const characters = battles.slice(0, 6).map(R.prop('character'));
 
 	return {
+		wave: 1,
 		scenario,
 		city: { choices: cities, selection: R.first(cities) },
 		status: 'ongoing',