add easter egg and settings menu

package-lock.json

@@ -29,6 +29,7 @@
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
 				"svelte-heros-v2": "^0.9.3",
+				"svelte-local-storage-store": "^0.6.0",
 				"svelte-multicssclass": "^2.1.1",
 				"tailwindcss": "^3.3.3",
 				"tslib": "^2.4.1",
@@ -4871,6 +4872,18 @@
 				"svelte": "^3.19.0 || ^4.0.0-next.0"
 			}
 		},
+		"node_modules/svelte-local-storage-store": {
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/svelte-local-storage-store/-/svelte-local-storage-store-0.6.0.tgz",
+			"integrity": "sha512-UbCY/yT/YUadU5IX/gZkoRQnA+ebFZHKKQjlJvfWHnBj3CPe9sNn8ndxYz/xy4LUzGjuBLq8+wH5RYK54ba3wA==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.14"
+			},
+			"peerDependencies": {
+				"svelte": "^3.48.0 || ^4.0.0"
+			}
+		},
 		"node_modules/svelte-multicssclass": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/svelte-multicssclass/-/svelte-multicssclass-2.1.1.tgz",

package.json

@@ -28,6 +28,7 @@
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"svelte-heros-v2": "^0.9.3",
+		"svelte-local-storage-store": "^0.6.0",
 		"svelte-multicssclass": "^2.1.1",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.4.1",

src/lib/stores.ts

@@ -1,5 +1,4 @@
-import { type Writable, writable } from 'svelte/store';
+import { persisted } from 'svelte-local-storage-store';
+import type { Writable } from 'svelte/store';
 
-export const registered: Writable<{
-	username: string;
-} | null> = writable(null);
+export const playAudio: Writable<boolean> = persisted('playAudio', false);

src/routes/+layout.svelte

@@ -2,6 +2,8 @@
 	import '../app.css';
 	import { env } from '$env/dynamic/public';
 	import { goto } from '$app/navigation';
+	import Settings from './Settings.svelte';
+	import { playAudio } from '$lib/stores';
 
 	let navPaths = [
 		{
@@ -56,9 +58,20 @@
 
 	let isTouch = false;
 	let nav: HTMLDivElement;
+	let settings: HTMLDialogElement;
 </script>
 
 <svelte:body
+	on:keyup={(e) => {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			if (settings.open) {
+				settings.close();
+			} else {
+				settings.show();
+			}
+		}
+	}}
 	on:touchend={(e) => {
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
@@ -83,9 +96,12 @@
 					let activePath = navPaths.find((path) => path.active);
 					if (activePath !== undefined) {
 						goto(activePath.href);
-					} else {
-						showMenuPermanent = !showMenuPermanent;
+					} else if ($playAudio) {
+						new Audio(
+							`${env.PUBLIC_BASE_PATH}/aud/chest-${showMenuPermanent ? 'close' : 'open'}.mp3`
+						).play();
 					}
+					showMenuPermanent = !showMenuPermanent;
 				}
 			}}
 			on:touchend={() => {
@@ -147,3 +163,13 @@
 		</div>
 	</div>
 </nav>
+
+<dialog class="modal" bind:this={settings}>
+	<form method="dialog" class="modal-box" style="overflow: unset">
+		<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+		<Settings />
+	</form>
+	<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
+		<button>close</button>
+	</form>
+</dialog>

src/routes/Settings.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { playAudio } from '$lib/stores';
+	import { get } from 'svelte/store';
+	import { IconOutline } from 'svelte-heros-v2';
+
+	let settings = [
+		{
+			name: 'Sound abspielen',
+			description:
+				'Manche Elemente können Sounds abspielen. Aktiviere diese Option und finde raus welche',
+			store: playAudio
+		}
+	];
+</script>
+
+<div>
+	<h2 class="text-2xl">Einstellungen</h2>
+	<div>
+		<div class="divider" />
+		<div class="grid grid-cols-2">
+			{#each settings as setting}
+				<div class="flex">
+					<p>{setting.name}</p>
+					<span class="tooltip ml-[0.2rem] -mt-[1px]" data-tip={setting.description}>
+						<IconOutline name="question-mark-circle-outline" width="16" height="16" />
+					</span>
+				</div>
+				<input
+					type="checkbox"
+					class="toggle justify-self-end mr-6"
+					checked={get(setting.store)}
+					on:change={(e) => {
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore
+						setting.store.set(e.target.checked);
+					}}
+				/>
+			{/each}
+		</div>
+		<div class="divider" />
+	</div>
+</div>