add transitions
This commit is contained in:
parent
8779d8ae31
commit
d6f07a26e5
@ -5,17 +5,31 @@
|
||||
|
||||
<script>
|
||||
import { genApi } from '$lib/store/api.js';
|
||||
import { writable } from 'svelte/store';
|
||||
import { setContext } from 'svelte';
|
||||
import Beer from '$lib/components/Beer.svelte';
|
||||
import Router from 'svelte-spa-router';
|
||||
import Campaigns from '$lib/components/Campaigns.svelte';
|
||||
import Campaign from '$lib/components/Campaign.svelte';
|
||||
import Battle from '$lib/components/Battle.svelte';
|
||||
import { push } from 'svelte-spa-router';
|
||||
|
||||
const api = genApi();
|
||||
|
||||
setContext('api', api);
|
||||
|
||||
const transition = writable('');
|
||||
transition.goRight = (uri) => {
|
||||
transition.set('right');
|
||||
push(uri);
|
||||
};
|
||||
transition.goLeft = (uri) => {
|
||||
transition.set('left');
|
||||
push(uri);
|
||||
};
|
||||
|
||||
setContext('transition', transition);
|
||||
|
||||
const routes = {
|
||||
// Exact path
|
||||
'/': Campaigns,
|
||||
|
||||
@ -25,70 +25,79 @@
|
||||
</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><i>home</i></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><i>view_kanban</i></dt>
|
||||
<dd>{scenario}</dd>
|
||||
|
||||
{#if character}
|
||||
<dt><i>person</i></dt>
|
||||
<dd>{character}</dd>
|
||||
{/if}
|
||||
|
||||
{#if additionalCharacters}
|
||||
{#each additionalCharacters as c, i (c.selection)}
|
||||
<dt><i>person</i><i>star</i></dt>
|
||||
{#key params.battleId}
|
||||
<div in:fly={flyParams} class="body">
|
||||
<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><i>home</i></dt>
|
||||
<dd>
|
||||
<AdditionalCharacter
|
||||
on:change={changeCharacter(i)}
|
||||
selection={c.selection}
|
||||
choices={minusSelected(
|
||||
status === 'ongoing' && wave == 1
|
||||
? c.choices
|
||||
: [],
|
||||
)}
|
||||
/>
|
||||
{#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>
|
||||
{/each}
|
||||
{/if}
|
||||
<dt><i>view_kanban</i></dt>
|
||||
<dd>{scenario}</dd>
|
||||
|
||||
<dt>difficulty</dt>
|
||||
<dd>
|
||||
<div class="field ">
|
||||
<input
|
||||
type="number"
|
||||
step="0.5"
|
||||
value={difficulty}
|
||||
on:change={({ target: { value } }) =>
|
||||
event.setBattleDifficulty(params.battleId, value)}
|
||||
/>
|
||||
</div>
|
||||
{#if character}
|
||||
<dt><i>person</i></dt>
|
||||
<dd>{character}</dd>
|
||||
{/if}
|
||||
|
||||
<!--
|
||||
{#if additionalCharacters}
|
||||
{#each additionalCharacters as c, i (c.selection)}
|
||||
<dt><i>person</i><i>star</i></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 ">
|
||||
<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={{
|
||||
@ -108,27 +117,35 @@
|
||||
/>
|
||||
{difficulty}
|
||||
-->
|
||||
</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<div class="actions">
|
||||
{#if status === 'upcoming'}
|
||||
<button>Start battle</button>
|
||||
{:else if status === 'ongoing'}
|
||||
<button on:click={battleVerdict('won')}>Battle won</button>
|
||||
<button class="tertiary" on:click={battleVerdict('lost')}
|
||||
>Battle lost</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="actions">
|
||||
{#if status === 'upcoming'}
|
||||
<button>Start battle</button>
|
||||
{:else if status === 'ongoing'}
|
||||
<button on:click={battleVerdict('won')}
|
||||
>Battle won</button
|
||||
>
|
||||
<button
|
||||
class="tertiary"
|
||||
on:click={battleVerdict('lost')}>Battle lost</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/key}
|
||||
|
||||
<footer class="fixed">
|
||||
<nav>
|
||||
<a
|
||||
href={`#/campaign/${$activeCampaign?._id}` +
|
||||
(battle?.id == 1
|
||||
? ''
|
||||
: `/battle/${parseInt(battle?.id) - 1}`)}
|
||||
on:click={() =>
|
||||
transition.goLeft(
|
||||
`#/campaign/${$activeCampaign?._id}` +
|
||||
(battle?.id == 1
|
||||
? ''
|
||||
: `/battle/${parseInt(battle?.id) - 1}`),
|
||||
)}
|
||||
>
|
||||
<button class="circle transparent">
|
||||
<i>arrow_backward</i>
|
||||
@ -136,9 +153,12 @@
|
||||
</a>
|
||||
{#if battles?.length > battle?.id}
|
||||
<a
|
||||
href={`#/campaign/${$activeCampaign?._id}/battle/${
|
||||
battle?.id + 1
|
||||
}`}
|
||||
on:click={() =>
|
||||
transition.goRight(
|
||||
`/campaign/${$activeCampaign?._id}/battle/${
|
||||
battle?.id + 1
|
||||
}`,
|
||||
)}
|
||||
>
|
||||
<button class="circle transparent">
|
||||
<i>arrow_forward</i>
|
||||
@ -155,6 +175,8 @@
|
||||
import { getContext } from 'svelte';
|
||||
import AdditionalCharacter from './Battle/AdditionalCharacter.svelte';
|
||||
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let params;
|
||||
|
||||
export let api = getContext('api');
|
||||
@ -199,6 +221,16 @@
|
||||
const changeCity = ({ target: { value } }) => {
|
||||
event?.setCity(params.battleId, value);
|
||||
};
|
||||
|
||||
const transition = getContext('transition');
|
||||
let flyParams = { x: 200, duration: 0 };
|
||||
$: if ($transition) {
|
||||
flyParams.duration = 200;
|
||||
flyParams.x = $transition === 'right' ? 200 : -200;
|
||||
transition.set('');
|
||||
} else {
|
||||
flyParams.duration = 0;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -14,99 +14,107 @@
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{#if $activeCampaign}
|
||||
{#if status !== 'ongoing'}
|
||||
<h6>{status}</h6>{/if}
|
||||
{#key params.campaignId}
|
||||
<div in:fly={flyParams} class="body">
|
||||
{#if $activeCampaign}
|
||||
{#if status !== 'ongoing'}
|
||||
<h6>{status}</h6>{/if}
|
||||
|
||||
<div class="score">
|
||||
score {#if status !== 'ongoing'}so far{/if}: {score}
|
||||
<i>star</i>
|
||||
</div>
|
||||
<div class="score">
|
||||
score {#if status !== 'ongoing'}so far{/if}: {score}
|
||||
<i>star</i>
|
||||
</div>
|
||||
|
||||
<h6>Chapter 1</h6>
|
||||
<Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} />
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[1] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={1}
|
||||
chapterBattle={2}
|
||||
/>
|
||||
<div class="medium-divider" {campaignId} />
|
||||
<h6>Chapter 2</h6>
|
||||
<Battle
|
||||
{...battles[2] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={2}
|
||||
chapterBattle={1}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[3] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={2}
|
||||
chapterBattle={2}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<h6>Chapter 3</h6>
|
||||
<Battle
|
||||
{...battles[4] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={3}
|
||||
chapterBattle={1}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[4] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={3}
|
||||
chapterBattle={2}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<h6>Chapter 4</h6>
|
||||
<Battle
|
||||
{...battles[6] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={1}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[7] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={2}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[8] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={3}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[9] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={4}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[10] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={5}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[11] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={6}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
{/if}
|
||||
<h6>Chapter 1</h6>
|
||||
<Battle
|
||||
{...battles[0]}
|
||||
{campaignId}
|
||||
chapter={1}
|
||||
chapterBattle={1}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[1] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={1}
|
||||
chapterBattle={2}
|
||||
/>
|
||||
<div class="medium-divider" {campaignId} />
|
||||
<h6>Chapter 2</h6>
|
||||
<Battle
|
||||
{...battles[2] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={2}
|
||||
chapterBattle={1}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[3] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={2}
|
||||
chapterBattle={2}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<h6>Chapter 3</h6>
|
||||
<Battle
|
||||
{...battles[4] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={3}
|
||||
chapterBattle={1}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[4] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={3}
|
||||
chapterBattle={2}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<h6>Chapter 4</h6>
|
||||
<Battle
|
||||
{...battles[6] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={1}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[7] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={2}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[8] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={3}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[9] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={4}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[10] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={5}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
<Battle
|
||||
{...battles[11] ?? { id: 'notYet' }}
|
||||
{campaignId}
|
||||
chapter={4}
|
||||
chapterBattle={6}
|
||||
/>
|
||||
<div class="medium-divider" />
|
||||
{/if}
|
||||
</div>{/key}
|
||||
<footer class="fixed">
|
||||
<nav>
|
||||
<a href={`#/campaign/${$activeCampaign?._id}/battle/1`}>
|
||||
@ -121,6 +129,7 @@
|
||||
<script>
|
||||
import * as R from 'remeda';
|
||||
import Battle from './Campaign/Battle.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
import { getContext } from 'svelte';
|
||||
|
||||
@ -144,7 +153,7 @@
|
||||
R.groupBy(({ id }) => R.clamp(1 + parseInt(id / 2), { max: 4 })),
|
||||
);
|
||||
|
||||
$: console.log(byChapter);
|
||||
let flyParams = { x: 200, duration: 200 };
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user