125 lines
2.5 KiB
Svelte
125 lines
2.5 KiB
Svelte
<h5><a href={`#/campaign/${params.campaignId}`}>{$activeCampaign?.name}</a></h5>
|
|
<h6>Chapter {chapter}, battle {chapterBattle} -- {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}
|
|
|
|
<script>
|
|
import { getContext } from 'svelte';
|
|
import Stars from '@ernane/svelte-star-rating';
|
|
|
|
export let params;
|
|
|
|
const { activeCampaign, event } = getContext('api');
|
|
|
|
event.setActiveCampaign(params.campaignId);
|
|
|
|
$: battles = $activeCampaign?.battles;
|
|
$: battle = battles && battles[params.battleId - 1];
|
|
$: console.log($activeCampaign);
|
|
$: scenario = battle?.scenario;
|
|
$: status = battle?.status;
|
|
$: wave = battle?.wave;
|
|
$: difficulty = battle?.difficulty ?? 0;
|
|
$: character = battle?.character;
|
|
$: city = battle?.city;
|
|
|
|
$: console.log(battle);
|
|
|
|
let chapter = 1 + parseInt(params.battleId / 2);
|
|
let chapterBattle = params.battleId % 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;
|
|
}
|
|
</style>
|