Start work on multiple pages

web-frontend/src/routes/+layout.svelte

@@ -2,4 +2,31 @@
 	import '../app.css';
 </script>
 
+<header class="bg-white">
+    <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
+  <div class="flex items-center flex-shrink-0 text-white mr-6">
+    <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
+    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
+  </div>
+  <div class="block lg:hidden">
+    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
+      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
+    </button>
+  </div>
+  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
+    <div class="text-sm lg:flex-grow">
+      <a href="/" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
+        Home
+      </a>
+      <a href="/encode" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
+        Encode
+      </a>
+      <a href="/decode" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
+        Decode
+      </a>
+    </div>
+  </div>
+</nav>
+</header>
+
 <slot />

web-frontend/src/routes/+page.svelte

@@ -1,96 +1,4 @@
 <script>
-	import { WasmStatus } from '$lib/common.js';
-	import init, { address_from_lat_lon } from 'this_algorithm-wasm';
-	import { onMount, onDestroy } from 'svelte';
-	import { browser } from '$app/environment';
-
-	// let init = require(this_algorithm-wasm);
-
-	let mapElement;
-	let map;
-	let latlng = { lat: '', lng: '' };
-	let addr = '';
-	let wasmStatus = WasmStatus.NotLoaded;
-	let wasmError = undefined;
-
-	onMount(async () => {
-		await init()
-			.then(() => {
-				wasmStatus = WasmStatus.Loaded;
-			})
-			.catch((e) => {
-				console.error('Error loading wasm module', e);
-				wasmError = e;
-				wasmStatus = WasmStatus.Errored;
-			});
-
-		if (browser) {
-			const leaflet = await import('leaflet');
-
-			map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
-
-			leaflet
-				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-					attribution:
-						'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-				})
-				.addTo(map);
-
-			let popup = leaflet.popup();
-
-			map.on('click', (e) => {
-				try {
-					// TODO: Leaflet allows sending coordinates out of the standard range
-					latlng = e.latlng;
-					addr = address_from_lat_lon(latlng.lat, latlng.lng);
-					popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
-				} catch (err) {
-					console.error(err);
-					addr = '';
-					popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
-				}
-			});
-		}
-	});
-
-	onDestroy(async () => {
-		if (map) {
-			console.log('Unloading Leaflet map.');
-			map.remove();
-		}
-	});
 </script>
 
-<h2>Encoding</h2>
+<h2>Home</h2>
-
-{#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded}
-	<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
-
-	<main>
-		<div bind:this={mapElement} />
-	</main>
-{:else if wasmStatus == WasmStatus.Errored}
-	<div class="flex">
-		<div class="py-1">
-			<svg
-				class="fill-current h-6 w-6 text-teal-500 mr-4"
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				><path
-					d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
-				/></svg
-			>
-		</div>
-		<div>
-			<p class="font-bold">Could not start core module</p>
-			<p class="text-sm">Error: {wasmError}.</p>
-		</div>
-	</div>
-{/if}
-
-<style>
-	@import 'leaflet/dist/leaflet.css';
-	main div {
-		height: 800px;
-	}
-</style>

web-frontend/src/routes/decode/+page.svelte

@@ -0,0 +1,4 @@
+<script>
+</script>
+
+<h2>Decode</h2>

web-frontend/src/routes/encode/+page.svelte

@@ -0,0 +1,94 @@
+<script>
+	import { WasmStatus } from '$lib/common.js';
+	import init, { address_from_lat_lon } from 'this_algorithm-wasm';
+	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/environment';
+
+	let mapElement;
+	let map;
+	let latlng = { lat: '', lng: '' };
+	let addr = '';
+	let wasmStatus = WasmStatus.NotLoaded;
+	let wasmError = undefined;
+
+	onMount(async () => {
+		await init()
+			.then(() => {
+				wasmStatus = WasmStatus.Loaded;
+			})
+			.catch((e) => {
+				console.error('Error loading wasm module', e);
+				wasmError = e;
+				wasmStatus = WasmStatus.Errored;
+			});
+
+		if (browser) {
+			const leaflet = await import('leaflet');
+
+			map = leaflet.map(mapElement).setView([51.505, -0.09], 13);
+
+			leaflet
+				.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+					attribution:
+						'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+				})
+				.addTo(map);
+
+			let popup = leaflet.popup();
+
+			map.on('click', (e) => {
+				try {
+					// TODO: Leaflet allows sending coordinates out of the standard range
+					latlng = e.latlng;
+					addr = address_from_lat_lon(latlng.lat, latlng.lng);
+					popup.setLatLng(e.latlng).setContent(`${addr}`).openOn(map);
+				} catch (err) {
+					console.error(err);
+					addr = '';
+					popup.setLatLng(e.latlng).setContent(`You clicked at ${e.latlng}`).openOn(map);
+				}
+			});
+		}
+	});
+
+	onDestroy(async () => {
+		if (map) {
+			console.log('Unloading Leaflet map.');
+			map.remove();
+		}
+	});
+</script>
+
+<style>
+	@import 'leaflet/dist/leaflet.css';
+	main div {
+		height: 800px;
+	}
+</style>
+
+<h2>Encode</h2>
+
+{#if wasmStatus == WasmStatus.Loaded || wasmStatus == WasmStatus.NotLoaded}
+	<p>Current cursor: {addr} => ({latlng.lat}, {latlng.lng})</p>
+
+	<main>
+		<div bind:this={mapElement} />
+	</main>
+{:else if wasmStatus == WasmStatus.Errored}
+	<div class="flex">
+		<div class="py-1">
+			<svg
+				class="fill-current h-6 w-6 text-teal-500 mr-4"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				><path
+					d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
+				/></svg
+			>
+		</div>
+		<div>
+			<p class="font-bold">Could not start core module</p>
+			<p class="text-sm">Error: {wasmError}.</p>
+		</div>
+	</div>
+{/if}