lang

Henahax · Apr 13, 2024 · 63154af · 63154af
1 parent 20cf529
commit 63154af
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 93 deletions.
diff --git a/src/lib/Events.svelte b/src/lib/Events.svelte
@@ -3,10 +3,22 @@
 	import { eventStore } from '../routes/eventStore';
 	import lang from '../lang/lang.json';
 	const modalStore = getModalStore();
+
+	let selectEvent = 'Events';
+	let close = 'Unlock';
+
+	$: $eventStore, changeText();
+
+	function changeText() {
+		if (Object.keys($eventStore).length > 0) {
+			selectEvent = lang.selectEvent[$eventStore.lang];
+			close = lang.close[$eventStore.lang];
+		}
+	}
 </script>
 
 <div class="card p-4 flex flex-col gap-4">
-	<h2 class="h3">{lang.selectEvent[$eventStore.lang]}</h2>
+	<h2 class="h3">{selectEvent}</h2>
 	<nav class="list-nav">
 		<ul>
 			<li>
@@ -20,7 +32,7 @@
 	<div class="flex justify-center">
 		<button type="button" class="btn variant-ghost" on:click={modalStore.close}>
 			<i class="fa-solid fa-xmark"></i>
-			<span>{lang.close[$eventStore.lang]}</span>
+			<span>{close}</span>
 		</button>
 	</div>
 </div>
diff --git a/src/lib/Password.svelte b/src/lib/Password.svelte
@@ -1,19 +1,18 @@
 <script lang="ts">
-	import { focusTrap, getModalStore } from '@skeletonlabs/skeleton';
-	const modalStore = getModalStore();
-
+	import { getModalStore } from '@skeletonlabs/skeleton';
 	import { Html5Qrcode } from 'html5-qrcode';
 	import { onMount } from 'svelte';
 	import { onDestroy } from 'svelte';
 	import { eventStore } from '../routes/eventStore';
 	import lang from '../lang/lang.json';
 
+	const modalStore = getModalStore();
 	let password = '';
 	let scanning = false;
 	let html5Qrcode: any;
 
 	onMount(init);
-	onDestroy(close);
+	onDestroy(closeThing);
 
 	function init() {
 		html5Qrcode = new Html5Qrcode('reader');
@@ -44,7 +43,7 @@
 
 	function onScanFailure(error) {}
 
-	function close() {
+	function closeThing() {
 		if (scanning) {
 			stop();
 		}
@@ -62,7 +61,7 @@
 		toastStore.trigger(toastError);
 	}
 
-	function unlock() {
+	function unlockThing() {
 		let count = passwordExists();
 		if (count === 0) {
 			error();
@@ -100,33 +99,46 @@
 		timeout: 2500,
 		background: 'variant-filled-error'
 	};
+
+	let unlockTask = 'Unlock Task';
+	let enterPasswordScanQR = 'Enter password or scan QR-Code';
+	let unlock = 'Unlock';
+	let close = 'Close';
+
+	$: $eventStore, changeText();
+
+	function changeText() {
+		if (Object.keys($eventStore).length > 0) {
+			unlockTask = lang.unlockTask[$eventStore.lang];
+			enterPasswordScanQR = lang.enterPasswordScanQR[$eventStore.lang];
+			unlock = lang.unlock[$eventStore.lang];
+			close = lang.close[$eventStore.lang];
+		}
+	}
 </script>
 
 <form class="card p-4 flex flex-col gap-8">
-	<h2 class="h3">{lang.unlockTask[$eventStore.lang]}</h2>
+	<h2 class="h3">{unlockTask}</h2>
 	<reader id="reader" class={scanning ? '' : 'hidden'} />
+
 	<label class="label">
-		<span>{lang.enterPasswordScanQR[$eventStore.lang]}</span>
-		<div class="input-group grid-cols-[1fr_auto_1fr]">
-			<input type="submit" class="hidden" on:click={unlock} />
-			<button on:click={start}>
+		<span>{enterPasswordScanQR}</span>
+		<div class="input-group grid-cols-[auto_1fr_auto]">
+			<input type="submit" class="hidden" on:click={unlockThing} />
+			<button class="variant-filled-primary" on:click={start}>
 				<i class="fa-solid fa-qrcode"></i>
 			</button>
-			<input
-				type="text"
-				placeholder={lang.enterPassword[$eventStore.lang]}
-				bind:value={password}
-				on:submit={unlock}
-			/>
-			<button class="variant-filled-primary" on:click={unlock}>
-				<i class="fa-solid fa-check"></i>
-			</button>
+			<input type="text" placeholder={unlock} bind:value={password} on:submit={unlockThing} />
 		</div>
 	</label>
-	<div class="flex justify-end">
+	<div class="flex justify-between">
+		<button type="button" class="btn variant-filled-primary" on:click={unlockThing}>
+			<i class="fa-solid fa-check"></i>
+			<span>{unlock}</span>
+		</button>
 		<button type="button" class="btn variant-ghost" on:click={modalStore.close}>
 			<i class="fa-solid fa-xmark"></i>
-			<span>{lang.close[$eventStore.lang]}</span>
+			<span>{close}</span>
 		</button>
 	</div>
 </form>
diff --git a/src/lib/dictionary.ts b/src/lib/dictionary.ts
@@ -0,0 +1,49 @@
+	export enum language {
+		en = 0,
+		de = 1
+	}
+
+	export function getString(word: string, lang: language = language.en) {
+		let test = dictionary[word][0];
+		console.log(dictionary[word][0])
+		return test;
+	}
+
+	let dictionary = {
+		events: {
+			en: 'Events',
+			de: 'Events'
+		},
+		unlock: {
+			en: 'Unlock',
+			de: 'Freischalten'
+		},
+		selectEvent: {
+			en: 'Select event',
+			de: 'Event freischalten'
+		},
+		unlockTask: {
+			en: 'Unlock task',
+			de: 'Aufgabe entsperren'
+		},
+		enterPasswordScanQR: {
+			en: 'Enter password or scan QR code',
+			de: 'Passwort eingeben oder QR-Code scannen'
+		},
+		enterPassword: {
+			en: 'Enter password...',
+			de: 'Passwort eingeben...'
+		},
+		submit: {
+			en: 'Submit',
+			de: 'Senden'
+		},
+		close: {
+			en: 'Close',
+			de: 'Schließen'
+		},
+		questLog: {
+			en: 'Quest Log',
+			de: 'Quest-Log'
+		}
+	};
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -36,6 +36,20 @@
 	function openPassword() {
 		modalStore.trigger(modalPasswordSettings);
 	}
+
+	let textTreasureHunt = 'Treasure Hunt';
+	let textEvents = 'Events';
+	let textUnlock = 'Unlock';
+
+	$: $eventStore, changeText();
+
+	function changeText() {
+		if (Object.keys($eventStore).length > 0) {
+			textTreasureHunt = $eventStore.name;
+			textEvents = lang.events[$eventStore.lang];
+			textUnlock = lang.unlock[$eventStore.lang];
+		}
+	}
 </script>
 
 <Toast />
@@ -45,18 +59,16 @@
 		<AppBar>
 			<svelte:fragment slot="lead">
 				<button type="button" class="btn variant-ghost" on:click={openTasks}>
-					<i class="fa-solid fa-bars"></i><span class="hidden sm:block"
-						>{lang.events[$eventStore.lang]}</span
-					>
+					<i class="fa-solid fa-bars"></i><span class="hidden sm:block">{textEvents}</span>
 				</button>
 			</svelte:fragment>
 
-			<h1 class="h4 text-center"><strong>{$eventStore.name}</strong></h1>
+			<h1 class="h4 text-center"><strong>{textTreasureHunt}</strong></h1>
 
 			<svelte:fragment slot="trail">
 				<button type="button" class="btn variant-ghost-primary" on:click={openPassword}>
 					<i class="fa-solid fa-key"></i>
-					<span class="hidden sm:block">{lang.unlock[$eventStore.lang]}</span>
+					<span class="hidden sm:block">{textUnlock}</span>
 				</button>
 			</svelte:fragment>
 		</AppBar>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,2 +1,9 @@
+<script lang="ts">
+	import { getString, language } from '../lib/dictionary.ts';
+
+	let test = getString('close', language.de);
+</script>
+
 <h2 class="h2">Info</h2>
 <p>verify your path</p>
+<div>{test}</div>
diff --git a/src/service-worker/index.ts b/src/service-worker/index.ts