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,4 +1,20 @@
-<h5><a href={`#/campaign/${params.campaignId}`}>{$activeCampaign?.name}</a></h5>
+<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'}
@@ -54,6 +70,33 @@
 		<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';
 	import Stars from '@ernane/svelte-star-rating';
@@ -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>
+	<nav>
-		<button on:click={newCampaign}>new campaign</button>
+		<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);