Merge branch 'sky12-app-bar'

.pre-commit-config.yaml

@@ -0,0 +1,14 @@
+#exclude: static/fontawesome|^build
+
+default_stages:
+    - merge-commit
+    - push
+
+repos:
+    - repo: local
+      hooks:
+          - id: lint
+            name: lint
+            entry: task lint:fix --
+            language: system
+            files: ''

Taskfile.yaml

@@ -4,6 +4,8 @@ version: '3'
 
 vars:
     GREETING: Hello, World!
+    FILES:
+        sh: git diff-ls --diff-filter=d main | perl -pe's/\n/ /'
 
 tasks:
     build: vite build
@@ -13,3 +15,14 @@ tasks:
         cmds:
             - echo "{{.GREETING}}"
         silent: true
+    lint:fix:
+        cmds:
+            - npx prettier --write {{.CLI_ARGS | default .FILES }}
+        #            - npx eslint --fix --quiet {{.CLI_ARGS | default .FILES }}
+    integrate:
+        cmds:
+            - git is-clean
+            - task: lint:fix
+            - task: test
+            - git co main
+            - git weld -

src/lib/components/Battle.svelte

@@ -1,30 +1,46 @@
-<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>
+<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}, 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>
+		<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={{
@@ -44,15 +60,42 @@
 			/>
 			{difficulty}
             -->
-	</dd>
-</dl>
+		</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}
+	{#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 $activeCampaign.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';
@@ -79,7 +122,7 @@
 	let chapter = 1 + parseInt(params.battleId / 2);
 	let chapterBattle = params.battleId % 2;
 
-	const battleVerdict = (verdict) =>
+	const battleVerdict = (verdict) => () =>
 		event.setBattleVerdict(params.battleId, verdict);
 
 	//	$: event.setBattleDifficulty(params.battleId, difficulty);
@@ -121,4 +164,8 @@
 	input {
 		width: 5em;
 	}
+	footer nav {
+		display: flex;
+		justify-content: space-between;
+	}
 </style>

src/lib/components/Campaign.svelte

@@ -1,35 +1,113 @@
-<article>
+<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}
+					{$activeCampaign.name}
+				{/if}
+			</h5>
+		</nav>
+	</header>
+
 	{#if $activeCampaign}
-		<h5>{$activeCampaign.name}</h5>
 		<h6>Chapter 1</h6>
 		<Battle {...battles[0]} {campaignId} chapter={1} chapterBattle={1} />
 		<div class="medium-divider" />
-		<Battle {...battles[1]} {campaignId} chapter={1} chapterBattle={2} />
+		<Battle
+			{...battles[1] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={1}
+			chapterBattle={2}
+		/>
 		<div class="medium-divider" {campaignId} />
 		<h6>Chapter 2</h6>
-		<Battle {...battles[2]} {campaignId} chapter={2} chapterBattle={1} />
+		<Battle
+			{...battles[2] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={2}
+			chapterBattle={1}
+		/>
 		<div class="medium-divider" />
-		<Battle {...battles[3]} {campaignId} chapter={2} chapterBattle={2} />
+		<Battle
+			{...battles[3] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={2}
+			chapterBattle={2}
+		/>
 		<div class="medium-divider" />
 		<h6>Chapter 3</h6>
-		<Battle {...battles[4]} {campaignId} chapter={3} chapterBattle={1} />
+		<Battle
+			{...battles[4] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={3}
+			chapterBattle={1}
+		/>
 		<div class="medium-divider" />
-		<Battle {...battles[5]} {campaignId} chapter={3} chapterBattle={2} />
+		<Battle
+			{...battles[4] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={3}
+			chapterBattle={2}
+		/>
 		<div class="medium-divider" />
 		<h6>Chapter 4</h6>
-		<Battle {...battles[6]} {campaignId} chapter={4} chapterBattle={1} />
+		<Battle
+			{...battles[6] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={4}
+			chapterBattle={1}
+		/>
 		<div class="medium-divider" />
-		<Battle {...battles[7]} {campaignId} chapter={4} chapterBattle={2} />
+		<Battle
+			{...battles[7] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={4}
+			chapterBattle={2}
+		/>
 		<div class="medium-divider" />
-		<Battle {...battles[8]} {campaignId} chapter={4} chapterBattle={3} />
+		<Battle
+			{...battles[8] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={4}
+			chapterBattle={3}
+		/>
 		<div class="medium-divider" />
-		<Battle {...battles[9]} {campaignId} chapter={4} chapterBattle={4} />
+		<Battle
+			{...battles[9] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={4}
+			chapterBattle={4}
+		/>
 		<div class="medium-divider" />
-		<Battle {...battles[10]} {campaignId} chapter={4} chapterBattle={5} />
+		<Battle
+			{...battles[10] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={4}
+			chapterBattle={5}
+		/>
 		<div class="medium-divider" />
-		<Battle {...battles[11]} {campaignId} chapter={4} chapterBattle={6} />
+		<Battle
+			{...battles[11] ?? { id: 'notYet' }}
+			{campaignId}
+			chapter={4}
+			chapterBattle={6}
+		/>
 		<div class="medium-divider" />
 	{/if}
+	<footer class="fixed">
+		<nav>
+			<a href={`#/campaign/${$activeCampaign._id}/battle/1`}>
+				<button class="circle transparent">
+					<i>arrow_forward</i>
+				</button>
+			</a>
+		</nav>
+	</footer>
 </article>
 
 <script>
@@ -48,8 +126,6 @@
 
 	$: battles = $activeCampaign?.battles ?? [];
 
-	$: while (battles.length <= 12) battles.push({ notYet: true });
-
 	const campaignId = params.campaignId;
 
 	$: byChapter = R.pipe(
@@ -61,4 +137,14 @@
 </script>
 
 <style>
+	article {
+		height: 100vh;
+	}
+	footer {
+		display: flex;
+		justify-content: end;
+	}
+	footer nav {
+		text-align: right;
+	}
 </style>

src/lib/components/Campaign/Battle.svelte

@@ -1,6 +1,6 @@
 <div class="row">
 	<p>
-		{#if notYet}
+		{#if id == 'notYet'}
 			???
 		{:else}
 			<a href={`#/campaign/${campaignId}/battle/${id}`}>
@@ -14,7 +14,6 @@
 	export let city = '';
 	export let status = '';
 	export let id = 0;
-	export let notYet = false;
 	export let campaignId;
 	export let chapter;
 	export let chapterBattle;

src/lib/components/Campaigns.svelte

@@ -1,10 +1,14 @@
-<article>
-	<header>
-		<h5>Campaigns</h5>
-		<button on:click={newCampaign}>new campaign</button>
-	</header>
+<header>
+	<nav>
+		<h5 class="max center-align">Campaigns</h5>
+		<button class="circle small" on:click={newCampaign}>
+			<i>add</i>
+		</button>
+	</nav>
+</header>
 
-	{#each $campaigns as campaign (campaign.id)}
+<article>
+	{#each $campaigns as campaign (campaign._id)}
 		<div class="row">
 			<i class="light-green-text">south_america</i>
 			<div class="max">
@@ -63,9 +67,9 @@
 		R.clamp(1 + parseInt(battles?.length / 2), { max: 4 });
 	const currentCity = ({ battles }) => R.last(battles).city;
 
-	async function deleteCampaign({ name, id }) {
+	async function deleteCampaign({ name, _id }) {
 		if (!window.confirm(`delete campaign ${name}?`)) return;
-		api.event.deleteCampaign(id);
+		api.event.deleteCampaign(_id);
 	}
 
 	const newCampaign = () => {
@@ -80,6 +84,9 @@
 </script>
 
 <style>
+	nav {
+		width: 100%;
+	}
 	header {
 		display: flex;
 	}

src/lib/store/api.js

@@ -4,14 +4,14 @@ import Dexie, { liveQuery } from 'dexie';
 import { writable, derived, get } from 'svelte/store';
 import { genNextBattle } from './genNextBattle.js';
 import u from '@yanick/updeep-remeda';
-import pouchMem from 'pouchdb-adapter-memory';
 
 const seedCampaign = {
 	battles: [],
 };
 
 export function genApi(options = {}) {
-	if (options.local) PouchDB.plugin(pouchMem);
+	//	if (options.local) MyPouch.plugin(pouchMem);
+	if (options.pouch) options.pouch(PouchDB);
 
 	const pouchdb = new PouchDB(
 		'Campaigns',

src/lib/store/api.test.js

@@ -2,6 +2,7 @@ import { test, expect } from 'vitest';
 import { get } from 'svelte/store';
 
 import { genApi } from './api.js';
+import adapter from 'pouchdb-adapter-memory';
 
 const waitUntil = (store, condition) => {
 	return new Promise((resolve) => {
@@ -10,7 +11,10 @@ const waitUntil = (store, condition) => {
 };
 
 test('create and add and remove campaigns', async () => {
-	const api = genApi({ local: true });
+	const api = genApi({
+		local: true,
+		pouch: (p) => p.plugin(adapter),
+	});
 
 	let result = waitUntil(api.campaigns, (r) => r.length === 2);
 

src/lib/store/chapters.js

@@ -1,40 +1,40 @@
 export default [
-    {
-        cities: ['Havana', 'Montreal', 'Mexico City', 'Rio de Janeiro'],
-        characters: [
-            'Clinton Harper',
-            'Jackson Moss',
-            'Lucia Ortego',
-            'Samantha Legrand',
-        ],
-        scenarios: [
-            'Evacuation',
-            'Reinforcements',
-            'Battle for the sky',
-            'Satellites',
-        ],
-    },
-    {
-        cities: ['Johannesburg', 'Moscow', 'Cairo', 'London', 'Paris'],
-        characters: [
-            'Jaroslav Ruzicka',
-            'Karima Almasi',
-            'Shanti Aumann',
-            'Pieter Bernstein',
-        ],
-        scenarios: [
-            'Command ship',
-            'Reactor leak',
-            'Dangerous research',
-            'Repairing the base',
-        ],
-    },
-    {
-        cities: ['Seoul', 'Beijing', 'Tokyo', 'Sydney', 'Singapore'],
-        characters: ['Wang Lin', "Iz'ox", 'Jang Chanwook', 'Archie Bell'],
-        scenarios: ['Storm', 'Contamination', 'Kamikaze', 'Saboteur'],
-    },
-    {
-        scenarios: ['The final battle'],
-    },
+	{
+		cities: ['Havana', 'Montreal', 'Mexico City', 'Rio de Janeiro'],
+		characters: [
+			'Clinton Harper',
+			'Jackson Moss',
+			'Lucia Ortego',
+			'Samantha Legrand',
+		],
+		scenarios: [
+			'Evacuation',
+			'Reinforcements',
+			'Battle for the sky',
+			'Satellites',
+		],
+	},
+	{
+		cities: ['Johannesburg', 'Moscow', 'Cairo', 'London', 'Paris'],
+		characters: [
+			'Jaroslav Ruzicka',
+			'Karima Almasi',
+			'Shanti Aumann',
+			'Pieter Bernstein',
+		],
+		scenarios: [
+			'Command ship',
+			'Reactor leak',
+			'Dangerous research',
+			'Repairing the base',
+		],
+	},
+	{
+		cities: ['Seoul', 'Beijing', 'Tokyo', 'Sydney', 'Singapore'],
+		characters: ['Wang Lin', "Iz'ox", 'Jang Chanwook', 'Archie Bell'],
+		scenarios: ['Storm', 'Contamination', 'Kamikaze', 'Saboteur'],
+	},
+	{
+		scenarios: ['The final battle'],
+	},
 ];

src/lib/store/genNextBattle.js

@@ -4,25 +4,25 @@ import chapters from './chapters.js';
 const pickOne = (choices) => choices[parseInt(Math.random() * choices.length)];
 
 export function genNextBattle(battles = []) {
-    let chapter = R.clamp(1 + parseInt(battles.length / 2), { min: 1, max: 4 });
+	let chapter = R.clamp(1 + parseInt(battles.length / 2), { min: 1, max: 4 });
 
-    if (chapter === 1) {
-        const scenario = pickOne(
-            chapters[chapter - 1].scenarios.filter(
-                (s) => !battles.map(R.prop('scenario')).includes(s),
-            ),
-        );
-        const character = pickOne(
-            chapters[chapter - 1].characters.filter(
-                (s) => !battles.map(R.prop('character')).includes(s),
-            ),
-        );
-        const city = pickOne(
-            chapters[chapter - 1].cities.filter(
-                (s) => !battles.map(R.prop('city')).includes(s),
-            ),
-        );
+	if (chapter === 1) {
+		const scenario = pickOne(
+			chapters[chapter - 1].scenarios.filter(
+				(s) => !battles.map(R.prop('scenario')).includes(s),
+			),
+		);
+		const character = pickOne(
+			chapters[chapter - 1].characters.filter(
+				(s) => !battles.map(R.prop('character')).includes(s),
+			),
+		);
+		const city = pickOne(
+			chapters[chapter - 1].cities.filter(
+				(s) => !battles.map(R.prop('city')).includes(s),
+			),
+		);
 
-        return { scenario, character, city, status: 'ongoing', wave: 1 };
-    }
+		return { scenario, character, city, status: 'ongoing', wave: 1 };
+	}
 }

src/main.js

@@ -2,7 +2,7 @@
 import App from './lib/components/App.svelte';
 
 const app = new App({
-    target: document.getElementById('app'),
+	target: document.getElementById('app'),
 });
 
 export default app;

src/routes/campaign/[campaignId]/+layout.js

@@ -1,4 +1,4 @@
 export function load({ params }) {
-    params.campaignId = parseInt(params?.campaignId);
-    return params;
+	params.campaignId = parseInt(params?.campaignId);
+	return params;
 }