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

<article class="scroll">
	<header class="fixed">
		<nav>
			<a href="#/">
				<button class="circle transparent">
					<i>menu</i>
				</button></a
			>
			<h5 class="max center-align">
				{#if $activeCampaign}
					<a href={`#/campaign/${$activeCampaign._id}`}>
						{$activeCampaign.name}
					</a>
				{/if}
			</h5>
		</nav>
	</header>
	<h6>
		Chapter {chapter},
		<span class="battleNbr">battle {chapterBattle}</span>
		-- {status}
	</h6>
	<dl>
		{#if status === 'ongoing'}
			<dt>wave</dt>
			<dd>{wave === 2 ? 'second' : 'first'}</dd>
		{/if}
		<dt>city</dt>
		<dd>{city}</dd>
		<dt>scenario</dt>
		<dd>{scenario}</dd>
		<dt>character</dt>
		<dd>{character}</dd>

		<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 { getContext } from 'svelte';
	import Stars from '@ernane/svelte-star-rating';

	export let params;

	const 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;

	let chapter = 1 + parseInt(params.battleId / 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);
</script>

<style>
	article {
		width: 500px;
	}
	header {
		display: flex;
		align-items: baseline;
	}
	h5 {
		flex: 1;
	}
	h6 {
		font-style: italic;
		font-size: 1.25rem;
	}
	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;
	}
</style>