yanick/under-falling-skies
1
0
Fork 0
Code Issues 8 Pull Requests Projects Releases Wiki Activity

add transitions

Browse Source
This commit is contained in:
Yanick Champoux 2023-01-16 11:29:05 -05:00
parent 8779d8ae31
commit d6f07a26e5
3 changed files with 225 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/lib/components/App.svelte
View File

@ -5,17 +5,31 @@
<script> <script>
import { genApi } from '$lib/store/api.js'; import { genApi } from '$lib/store/api.js';
import { writable } from 'svelte/store';
import { setContext } from 'svelte'; import { setContext } from 'svelte';
import Beer from '$lib/components/Beer.svelte'; import Beer from '$lib/components/Beer.svelte';
import Router from 'svelte-spa-router'; import Router from 'svelte-spa-router';
import Campaigns from '$lib/components/Campaigns.svelte'; import Campaigns from '$lib/components/Campaigns.svelte';
import Campaign from '$lib/components/Campaign.svelte'; import Campaign from '$lib/components/Campaign.svelte';
import Battle from '$lib/components/Battle.svelte'; import Battle from '$lib/components/Battle.svelte';
import { push } from 'svelte-spa-router';
const api = genApi(); const api = genApi();
setContext('api', api); 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 = { const routes = {
// Exact path // Exact path
'/': Campaigns, '/': Campaigns,

188
src/lib/components/Battle.svelte
View File

@ -25,70 +25,79 @@
</h5> </h5>
</nav> </nav>
</header> </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} {#key params.battleId}
<dt><i>person</i></dt> <div in:fly={flyParams} class="body">
<dd>{character}</dd> <h6>
{/if} <span
>Chapter {chapter},
{#if additionalCharacters} <span class="battleNbr">battle {chapterBattle}</span
{#each additionalCharacters as c, i (c.selection)} ></span
<dt><i>person</i><i>star</i></dt> >
<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> <dd>
<AdditionalCharacter {#if typeof city === 'string'}
on:change={changeCharacter(i)} {city}
selection={c.selection} {:else}
choices={minusSelected( <AdditionalCharacter
status === 'ongoing' && wave == 1 on:change={changeCity}
? c.choices selection={city.selection}
: [], choices={status !== 'ongoing'
)} ? []
/> : city.choices.filter(
(c) => c !== city.selection,
)}
/>
{/if}
</dd> </dd>
{/each} <dt><i>view_kanban</i></dt>
{/if} <dd>{scenario}</dd>
<dt>difficulty</dt> {#if character}
<dd> <dt><i>person</i></dt>
<div class="field "> <dd>{character}</dd>
<input {/if}
type="number"
step="0.5"
value={difficulty}
on:change={({ target: { value } }) =>
event.setBattleDifficulty(params.battleId, value)}
/>
</div>
<!-- {#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 <Stars
on:change={(e) => (difficulty = e.target.value)} on:change={(e) => (difficulty = e.target.value)}
config={{ config={{
@ -108,27 +117,35 @@
/> />
{difficulty} {difficulty}
--> -->
</dd> </dd>
</dl> </dl>
<div class="actions"> <div class="actions">
{#if status === 'upcoming'} {#if status === 'upcoming'}
<button>Start battle</button> <button>Start battle</button>
{:else if status === 'ongoing'} {:else if status === 'ongoing'}
<button on:click={battleVerdict('won')}>Battle won</button> <button on:click={battleVerdict('won')}
<button class="tertiary" on:click={battleVerdict('lost')} >Battle won</button
>Battle lost</button >
> <button
{/if} class="tertiary"
</div> on:click={battleVerdict('lost')}>Battle lost</button
>
{/if}
</div>
</div>
{/key}
<footer class="fixed"> <footer class="fixed">
<nav> <nav>
<a <a
href={`#/campaign/${$activeCampaign?._id}` + on:click={() =>
(battle?.id == 1 transition.goLeft(
? '' `#/campaign/${$activeCampaign?._id}` +
: `/battle/${parseInt(battle?.id) - 1}`)} (battle?.id == 1
? ''
: `/battle/${parseInt(battle?.id) - 1}`),
)}
> >
<button class="circle transparent"> <button class="circle transparent">
<i>arrow_backward</i> <i>arrow_backward</i>
@ -136,9 +153,12 @@
</a> </a>
{#if battles?.length > battle?.id} {#if battles?.length > battle?.id}
<a <a
href={`#/campaign/${$activeCampaign?._id}/battle/${ on:click={() =>
battle?.id + 1 transition.goRight(
}`} `/campaign/${$activeCampaign?._id}/battle/${
battle?.id + 1
}`,
)}
> >
<button class="circle transparent"> <button class="circle transparent">
<i>arrow_forward</i> <i>arrow_forward</i>
@ -155,6 +175,8 @@
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import AdditionalCharacter from './Battle/AdditionalCharacter.svelte'; import AdditionalCharacter from './Battle/AdditionalCharacter.svelte';
import { fly } from 'svelte/transition';
export let params; export let params;
export let api = getContext('api'); export let api = getContext('api');
@ -199,6 +221,16 @@
const changeCity = ({ target: { value } }) => { const changeCity = ({ target: { value } }) => {
event?.setCity(params.battleId, 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> </script>
<style> <style>

193
src/lib/components/Campaign.svelte
View File

@ -14,99 +14,107 @@
</nav> </nav>
</header> </header>
{#if $activeCampaign} {#key params.campaignId}
{#if status !== 'ongoing'} <div in:fly={flyParams} class="body">
<h6>{status}</h6>{/if} {#if $activeCampaign}
{#if status !== 'ongoing'}
<h6>{status}</h6>{/if}
<div class="score"> <div class="score">
score {#if status !== 'ongoing'}so far{/if}: {score} score {#if status !== 'ongoing'}so far{/if}: {score}
<i>star</i> <i>star</i>
</div> </div>
<h6>Chapter 1</h6> <h6>Chapter 1</h6>
<Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} /> <Battle
<div class="medium-divider" /> {...battles[0]}
<Battle {campaignId}
{...battles[1] ?? { id: 'notYet' }} chapter={1}
{campaignId} chapterBattle={1}
chapter={1} />
chapterBattle={2} <div class="medium-divider" />
/> <Battle
<div class="medium-divider" {campaignId} /> {...battles[1] ?? { id: 'notYet' }}
<h6>Chapter 2</h6> {campaignId}
<Battle chapter={1}
{...battles[2] ?? { id: 'notYet' }} chapterBattle={2}
{campaignId} />
chapter={2} <div class="medium-divider" {campaignId} />
chapterBattle={1} <h6>Chapter 2</h6>
/> <Battle
<div class="medium-divider" /> {...battles[2] ?? { id: 'notYet' }}
<Battle {campaignId}
{...battles[3] ?? { id: 'notYet' }} chapter={2}
{campaignId} chapterBattle={1}
chapter={2} />
chapterBattle={2} <div class="medium-divider" />
/> <Battle
<div class="medium-divider" /> {...battles[3] ?? { id: 'notYet' }}
<h6>Chapter 3</h6> {campaignId}
<Battle chapter={2}
{...battles[4] ?? { id: 'notYet' }} chapterBattle={2}
{campaignId} />
chapter={3} <div class="medium-divider" />
chapterBattle={1} <h6>Chapter 3</h6>
/> <Battle
<div class="medium-divider" /> {...battles[4] ?? { id: 'notYet' }}
<Battle {campaignId}
{...battles[4] ?? { id: 'notYet' }} chapter={3}
{campaignId} chapterBattle={1}
chapter={3} />
chapterBattle={2} <div class="medium-divider" />
/> <Battle
<div class="medium-divider" /> {...battles[4] ?? { id: 'notYet' }}
<h6>Chapter 4</h6> {campaignId}
<Battle chapter={3}
{...battles[6] ?? { id: 'notYet' }} chapterBattle={2}
{campaignId} />
chapter={4} <div class="medium-divider" />
chapterBattle={1} <h6>Chapter 4</h6>
/> <Battle
<div class="medium-divider" /> {...battles[6] ?? { id: 'notYet' }}
<Battle {campaignId}
{...battles[7] ?? { id: 'notYet' }} chapter={4}
{campaignId} chapterBattle={1}
chapter={4} />
chapterBattle={2} <div class="medium-divider" />
/> <Battle
<div class="medium-divider" /> {...battles[7] ?? { id: 'notYet' }}
<Battle {campaignId}
{...battles[8] ?? { id: 'notYet' }} chapter={4}
{campaignId} chapterBattle={2}
chapter={4} />
chapterBattle={3} <div class="medium-divider" />
/> <Battle
<div class="medium-divider" /> {...battles[8] ?? { id: 'notYet' }}
<Battle {campaignId}
{...battles[9] ?? { id: 'notYet' }} chapter={4}
{campaignId} chapterBattle={3}
chapter={4} />
chapterBattle={4} <div class="medium-divider" />
/> <Battle
<div class="medium-divider" /> {...battles[9] ?? { id: 'notYet' }}
<Battle {campaignId}
{...battles[10] ?? { id: 'notYet' }} chapter={4}
{campaignId} chapterBattle={4}
chapter={4} />
chapterBattle={5} <div class="medium-divider" />
/> <Battle
<div class="medium-divider" /> {...battles[10] ?? { id: 'notYet' }}
<Battle {campaignId}
{...battles[11] ?? { id: 'notYet' }} chapter={4}
{campaignId} chapterBattle={5}
chapter={4} />
chapterBattle={6} <div class="medium-divider" />
/> <Battle
<div class="medium-divider" /> {...battles[11] ?? { id: 'notYet' }}
{/if} {campaignId}
chapter={4}
chapterBattle={6}
/>
<div class="medium-divider" />
{/if}
</div>{/key}
<footer class="fixed"> <footer class="fixed">
<nav> <nav>
<a href={`#/campaign/${$activeCampaign?._id}/battle/1`}> <a href={`#/campaign/${$activeCampaign?._id}/battle/1`}>
@ -121,6 +129,7 @@
<script> <script>
import * as R from 'remeda'; import * as R from 'remeda';
import Battle from './Campaign/Battle.svelte'; import Battle from './Campaign/Battle.svelte';
import { fly } from 'svelte/transition';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
@ -144,7 +153,7 @@
R.groupBy(({ id }) => R.clamp(1 + parseInt(id / 2), { max: 4 })), R.groupBy(({ id }) => R.clamp(1 + parseInt(id / 2), { max: 4 })),
); );
$: console.log(byChapter); let flyParams = { x: 200, duration: 200 };
</script> </script>
<style> <style>