under-falling-skies/src/lib/components/Battle.svelte

<article class="scroll">
	<header class="fixed fill">
		<nav>
			<a href="#/">
				<button class="circle transparent">
					<i>menu</i>
				</button></a
			>
			<h5 class="max right-align">
				{#if $activeCampaign}
					<a href={`#/campaign/${$activeCampaign._id}`}>
						{$activeCampaign.name}
					</a>
				{/if}
			</h5>
		</nav>
	</header>
	<h6>
		<span
			>Chapter {chapter},
			<span class="battleNbr">battle {chapterBattle}</span></span
		>
		<span class="status">{status}</span>
	</h6>
	<dl>
		{#if status === 'ongoing' && chapter !== 4}
			<dt>wave</dt>
			<dd>{wave === 2 ? 'second' : 'first'}</dd>
		{/if}
		<dt>city</dt>
		<dd>
			{#if typeof city === 'string'}
				{city}
			{:else}
				<AdditionalCharacter
					on:change={changeCity}
					selection={city.selection}
					choices={status !== 'ongoing'
						? []
						: city.choices.filter((c) => c !== city.selection)}
				/>
			{/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)}
				<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">
				<input
					type="number"
					step="0.5"
					value={difficulty}
					on:change={({ target: { value } }) =>
						event.setBattleDifficulty(params.battleId, value)}
				/>
			</div>

			<!--
			<Stars
				on:change={(e) => (difficulty = e.target.value)}
				config={{
					readOnly: false, //status !== 'preparation',
					countStars: 5,
					score: difficulty,
					showScore: false,
					starConfig: {
						size: 15,
						fillColor: '#F9ED4F',
						strokeColor: '#BB8511',
						unfilledColor: '#FFF',
						strokeUnfilledColor: '#000',
					},
					range: { min: 0, max: 5, step: 0.5 },
				}}
			/>
			{difficulty}
            -->
		</dd>
	</dl>

	{#if status === 'upcoming'}
		<button>Start battle</button>
	{:else if status === 'ongoing'}
		<button on:click={battleVerdict('won')}>Battle won</button>
		<button on:click={battleVerdict('lost')}>Battle lost</button>
	{/if}

	<footer class="fixed">
		<nav>
			<a
				href={`#/campaign/${$activeCampaign?._id}` +
					(battle?.id == 1
						? ''
						: `/battle/${parseInt(battle?.id) - 1}`)}
			>
				<button class="circle transparent">
					<i>arrow_backward</i>
				</button>
			</a>
			{#if battles?.length > battle?.id}
				<a
					href={`#/campaign/${$activeCampaign?._id}/battle/${
						battle?.id + 1
					}`}
				>
					<button class="circle transparent">
						<i>arrow_forward</i>
					</button>
				</a>
			{/if}
		</nav>
	</footer>
</article>

<script>
	import * as R from 'remeda';
	import { getContext } from 'svelte';
	import AdditionalCharacter from './Battle/AdditionalCharacter.svelte';

	export let params;

	export let api = getContext('api');
	export let activeCampaign = api?.activeCampaign;
	export let event = api?.event;

	event?.setActiveCampaign(params.campaignId);

	$: battles = $activeCampaign?.battles ?? [];
	$: battle = battles && battles[params.battleId - 1];
	$: scenario = battle?.scenario;
	$: status = battle?.status;
	$: wave = battle?.wave;
	$: 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());

	$: chapter = 1 + parseInt((params.battleId - 1) / 2);
	$: chapterBattle =
		params.battleId >= 7
			? params.battleId - 6
			: 1 + ((params.battleId - 1) % 2);

	const battleVerdict = (verdict) => () =>
		event?.setBattleVerdict(params.battleId, verdict);

	//	$: event.setBattleDifficulty(params.battleId, difficulty);

	const changeCharacter =
		(index) =>
		({ target: { value } }) => {
			event?.setCharacter(params?.battleId, index, value);
		};

	const changeCity = ({ target: { value } }) => {
		event?.setCity(params.battleId, value);
	};
</script>

<style>
	article {
		height: 100vh;
	}
	h5 {
		flex: 1;
	}
	h6 {
		display: flex;
		margin-bottom: 1em;
	}
	h6 .status {
		flex: 1;
		text-align: right;
		padding-right: 1em;
	}
	dl {
		width: 100%;
		display: grid;
		grid-template-columns: 8em auto;
		grid-row-gap: 0.75em;
		font-size: 1.25rem;
	}
	dt {
		text-align: right;
		padding-right: 2em;
	}
	dd {
		display: flex;
	}
	article :global(.stars-container) {
		justify-content: left !important;
		margin-right: 1em;
	}
	input {
		width: 5em;
	}
	footer nav {
		display: flex;
		justify-content: space-between;
	}
	nav h5 {
		padding-right: 1em;
	}
	header nav {
		max-width: 100%;
	}
</style>