Refactoring, improve debug page

src/lib/components/Navigation.svelte

@@ -6,7 +6,6 @@
 		QuestionMarkCircle,
 		UserCircle,
 		BugAnt,
-		Trophy
 	} from '@steeze-ui/heroicons';
 	import { onMount } from 'svelte';
 
@@ -46,7 +45,7 @@
 					class="btn-ghost btn bg-gradient-to-br from-primary to-secondary bg-clip-text font-geologica text-xl normal-case text-transparent"
 					href="/"
 				>
-					HoloQuest
+					holoquest
 				</a>
 			</div>
 			<div class="absolute right-1 flex">

src/routes/+layout.ts

@@ -2,11 +2,11 @@ export const csr = true;
 
 import type { LayoutLoad } from './$types';
 
-import { collectedStamps, expectedStamps } from '$lib/stores/stamps';
+import { collectedStamps } from '$lib/stores/stamps';
 import { setToast } from '$lib/stores/toasts';
 import { get } from 'svelte/store';
 import { TOAST_TYPE } from '../custom';
-import { fetchStamps } from '../supabase-client';
+import { updateExpectedStamps } from '../stamps';
 
 export const load = (async () => {
 	await startupTasks();
@@ -25,17 +25,3 @@ async function startupTasks() {
 	}
 	setToast({ message: 'Updated stamp data', type: TOAST_TYPE.SUCCESS });
 }
-
-// Fetched expected stamp data from supabase and creates object in store
-// With hash as key and rest of stamp data as value
-async function updateExpectedStamps() {
-	console.log('Fetching stamp data...');
-	const stamps = await fetchStamps();
-
-	const stampsData = stamps?.reduce((acc, stamp) => {
-		const { hash, ...rest } = stamp;
-		acc[hash] = rest;
-		return acc;
-	}, {});
-	expectedStamps.set(stampsData || {});
-}

src/routes/debug/+page.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import QrScanner from 'qr-scanner';
-	import { userToken, nickname } from '$lib/stores/userinfo';
+	import { nickname } from '$lib/stores/userinfo';
+	import { updateExpectedStamps } from '../../stamps';
+	import { setToast } from '$lib/stores/toasts';
+	import { TOAST_TYPE } from '../../custom';
+	import { collectedStamps } from '$lib/stores/stamps';
 	let availableCameras = [] as ArrayLike<QrScanner.Camera>;
 	let sheetTorn = false;
 
@@ -30,12 +34,25 @@
 
 	<p class="text-xl font-bold">User info</p>
 	<p>Nickname: <span class="font-mono">{$nickname}</span></p>
-	<p>Device ID: <span class="font-mono">{$userToken}</span></p>
 
 	<p class="text-xl font-bold">Stamps</p>
 	<p>Stamp sheet status: {sheetTorn ? 'torn' : 'untorn'}</p>
 	<button
 		on:click={() => localStorage.setItem('isStampSheetTorn', 'no')}
-		class="btn-primary btn mx-auto w-8/12 gap-2 rounded-full">Untear sheet</button
+		class="btn-primary btn mx-auto w-8/12 gap-2 rounded-full text-base-100">Untear sheet</button
+	>
+	<button
+		class="btn-primary btn w-8/12 gap-2 rounded-full text-base-100"
+		on:click={async () => {
+			await updateExpectedStamps();
+			setToast({ message: 'Stamp data refetched', type: TOAST_TYPE.SUCCESS });
+		}}>Refetch stamp data</button
+	>
+	<button
+		class="btn-error btn mx-auto w-8/12 gap-2 rounded-full"
+		on:click={() => {
+			collectedStamps.reset();
+			setToast({ message: 'Collected stamps reset', type: TOAST_TYPE.SUCCESS });
+		}}>Reset collected stamps</button
 	>
 </div>

src/routes/partner/[hash]/+page.svelte

@@ -6,30 +6,44 @@
 
 	export let data: PageData;
 
-	const { name, description, image_url, external_url } = data.stamp;
+	const { name, description, image_url, external_url, booth_id } = data.stamp;
 </script>
 
-<a
-	href="/"
-	class="btn-ghost btn mb-4 w-fit justify-start gap-2 rounded-full"
+<a href="/" id="back-button" class="btn-ghost btn mb-4 w-fit justify-start gap-2 rounded-full"
 	><Icon src={ChevronLeft} theme="solid" class="color-gray-900" size="20px" /> Back</a
 >
 
-<div class="mx-4 space-y-6">
-	<img src={image_url} class="mask mask-squircle w-6/12" alt={name + ' promo image.'} />
-
-	<h1 class="break-all font-geologica text-4xl font-bold text-primary">{name}</h1>
-
-	<p class="font-geologica">
-		{description}
-	</p>
-
-	<a href={external_url} class="btn-secondary btn max-w-screen-lg gap-2 rounded-full text-white"
-		>Open in DoKomi app <Icon
-			src={ArrowTopRightOnSquare}
-			theme="solid"
-			class="color-gray-900"
-			size="20px"
-		/></a
-	>
+<div
+	class="mx-4 flex flex-col items-center justify-center space-y-4 align-middle font-geologica"
+	id="stamp-info"
+>
+	<div class="avatar">
+		<div
+			class="mx-auto w-6/12 rounded-full ring-4 ring-secondary ring-offset-2 ring-offset-base-100"
+		>
+			<img src={image_url} alt={name + 'promo image.'} />
+		</div>
+	</div>
+
+	<h1 class="break-all text-4xl font-bold text-primary tracking-tighter" id="stamp-name">{name}</h1>
+	<h2 id="booth-id" class="text-2xl text-secondary tracking-wide">{booth_id ?? 'ask for booth number'}</h2>
+
+	{#if description}
+		<p class="">
+			{description}
+		</p>
+	{/if}
+
+	{#if external_url}
+		<a
+			href={external_url}
+			class="btn-secondary btn max-w-screen-lg gap-2 rounded-full text-white shadow-lg"
+			>Open in DoKomi app <Icon
+				src={ArrowTopRightOnSquare}
+				theme="solid"
+				class="color-gray-900"
+				size="20px"
+			/></a
+		>
+	{/if}
 </div>

src/stamps.ts

@@ -0,0 +1,20 @@
+import { expectedStamps } from '$lib/stores/stamps';
+import { fetchStamps } from './supabase-client';
+
+/**
+ * Updates the expected stamps in the store by fetching stamp data from Supabase.
+ * The fetched stamp data is transformed into an object with the hash as the key and the rest of the stamp data as the value.
+ * The updated stamps data is then set in the expectedStamps store.
+ */
+
+export async function updateExpectedStamps(): Promise<void> {
+	console.log('Fetching stamp data...');
+	const stamps = await fetchStamps();
+
+	const stampsData = stamps?.reduce((acc, stamp) => {
+		const { hash, ...rest } = stamp;
+		acc[hash] = rest;
+		return acc;
+	}, {});
+	expectedStamps.set(stampsData || {});
+}