Fix collected check, stamp page

src/lib/components/Stamp.svelte

@@ -2,10 +2,11 @@
 	import { fade } from 'svelte/transition';
 	import placeholderImg from '$lib/assets/watamesmug.jpg';
 
-	export let id: number;
+	export let hash: string;
+	export let index: number;
 	export let name: string;
 	export let collected = false;
-	export let navURL = `/partner/${id}`;
+	export let navURL = `/partner/${hash}`;
 
 	const PLACEHOLDER_STAMP_IMG = placeholderImg;
 
@@ -17,7 +18,7 @@
 <a href={navURL}>
 	<div
 		class="flex flex-col items-center"
-		in:fade|global={{ duration: fadeDuration, delay: 150 * id + 500 }}
+		in:fade|global={{ duration: fadeDuration, delay: 150 * index + 500 }}
 	>
 		<div
 			class="flex h-28 w-28 items-center justify-center rounded-full {collected

src/lib/components/StampSheet.svelte

@@ -7,9 +7,9 @@
 
 	import HolomemGacha from './HolomemGacha.svelte';
 	import RoundScanButton from './RoundScanButton.svelte';
-	import { collectedStamps } from '$lib/stores/stamps';
+	import { collectedStamps, getCollectedCount } from '$lib/stores/stamps';
 	import { get } from 'svelte/store';
-	import { tokenHash } from '../../crypto';
+	import { minStampCountRequired } from '../../const';
 
 	export let stamps: Tables<'stamps'>[] = [];
 
@@ -22,27 +22,26 @@
 	let isStampSheetTorn = true; // Can only be true if the quest was completed
 	let isQuestCompleted = false; // Can only be true if all stamps were collected
 
-	function isAllStampsCollected() {
-		// TODO: Support minimum collected stamps required
-		return stamps.every(isStampCollected);
+	function isMinStampAmountCollected() {
+		return getCollectedCount() >= minStampCountRequired;
 	}
 
 	const delay = 500; // synchronized fade in delay
 	const minTouchTime = 1000; // minimum touch time in milliseconds, how long the stub of the stamp sheet should be touched
 
 	onMount(() => {
+		// We check if the stamp hash is in the collected stamps
 		isStampCollected = function (stamp: Tables<'stamps'>): boolean {
 			const collectedStampsObj = get(collectedStamps) as { [key: string]: boolean };
-			const stampHash = tokenHash(stamp.id);
-			return collectedStampsObj?.[stampHash];
+			return collectedStampsObj?.[stamp.hash || ''];
 		};
 
 		tearStampSheet = function () {
 			localStorage.setItem('isStampSheetTorn', 'yes');
 			isStampSheetTorn = true;
 		};
 
-		if (isAllStampsCollected()) {
+		if (isMinStampAmountCollected()) {
 			console.log('All stamps collected!');
 			isQuestCompleted = true;
 		}
@@ -127,7 +126,8 @@
 				<StampComponent
 					name={stamp.name}
 					collected={isStampCollected(stamp)}
-					id={i}
+					index={i}
+					hash={stamp.hash || ''}
 					img={stamp.image_url || undefined}
 				/>
 			{/each}

src/lib/stores/stamps.ts

@@ -15,3 +15,7 @@ export function saveStamp(token: string) {
 	newCollectedStamps[hash] = token;
 	collectedStamps.set(newCollectedStamps);
 }
+
+export function getCollectedCount() {
+	return Object.keys(get(collectedStamps)).length;
+}

src/routes/+layout.ts

@@ -2,7 +2,8 @@ export const csr = true;
 
 import type { LayoutLoad } from './$types';
 
-import { expectedStamps } from '$lib/stores/stamps';
+import { collectedStamps, expectedStamps } from '$lib/stores/stamps';
+import { get } from 'svelte/store';
 import { supabase } from '../supabase-client';
 
 export const load = (async () => {
@@ -13,18 +14,23 @@ export const load = (async () => {
 // Startup tasks
 async function startupTasks() {
 	console.log('Running startup tasks...');
+	get(collectedStamps);
 	await updateExpectedStamps();
 }
 
 // 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 { data } = await supabase.from('stamps').select('*');
+	// TODO: Handle errors
+	const { data } = await supabase
+		.from('stamps')
+		.select('booth_id, name, description, image_url, external_url, hash, nsfw');
+
 	const stampsData = data?.reduce((acc, stamp) => {
 		const { hash, ...rest } = stamp;
 		acc[hash] = rest;
 		return acc;
 	}, {});
-	expectedStamps.set(stampsData);
+	expectedStamps.set(stampsData || {});
 }

src/routes/+page.ts

@@ -5,7 +5,10 @@ import type { PageLoad } from './$types';
 export const ssr = false;
 
 export const load = (async () => {
-	const stamps = Object.values(get(expectedStamps));
+	const stamps = Object.entries(get(expectedStamps)).map(([key, value]) => ({
+		...value,
+		hash: key
+	}));
 
 	return { stamps };
 }) satisfies PageLoad;

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

@@ -5,13 +5,12 @@
 
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { ArrowTopRightOnSquare, ChevronLeft } from '@steeze-ui/heroicons';
-	import type { Tables } from '$lib/database.types';
 
 	export let data: PageData;
 
 	const delay = 500;
 
-	const { name, external_url, image_url, description } = data.partner as unknown as Tables<'stamps'>;
+	const { name, description, image_url, external_url } = data.stamp;
 </script>
 
 <a

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

@@ -0,0 +1,16 @@
+import { expectedStamps } from '$lib/stores/stamps';
+import { error } from '@sveltejs/kit';
+import { get } from 'svelte/store';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+	const { hash } = params;
+
+	const stamp = get(expectedStamps)[hash];
+
+	if (!stamp) {
+		return error(404, 'Not found');
+	}
+
+	return { stamp };
+}) satisfies PageLoad;

src/routes/scanner/+page.svelte

@@ -9,19 +9,14 @@
 	import { Icon } from '@steeze-ui/svelte-icon';
 	import { Ticket, QrCode, StopCircle } from '@steeze-ui/heroicons';
 	import { fade } from 'svelte/transition';
-	import { getExpectedStampHashes, saveStamp } from '$lib/stores/stamps';
+	import { getCollectedCount, getExpectedStampHashes, saveStamp } from '$lib/stores/stamps';
 	import { setToast } from '$lib/stores/toasts';
 	import { minStampCountRequired } from '../../const';
 
 	let state: ScannerState = 'STOPPED';
 
 	let videoElem: HTMLVideoElement;
 	let qrScanner: QrScanner;
-	let token = '';
-
-	let collectedStampCount = function () {
-		return 0;
-	};
 
 	function transitionState() {
 		if (state === SCANNER_STATE.SCANNING) {
@@ -41,9 +36,10 @@
 
 	// Handle scan result
 	function onResult(result: QrScanner.ScanResult) {
+		let token = '';
 		try {
 			token = parseTokenFromScan(result.data);
-			console.log('Scanned token:', token)
+			console.log('Scanned token:', token);
 		} catch (e) {
 			setToast({
 				type: TOAST_TYPE.ERROR,
@@ -59,14 +55,12 @@
 			// Scan success
 			saveStamp(token);
 
-			let collectedStamps = collectedStampCount();
-
 			setToast({
 				type: TOAST_TYPE.SUCCESS,
 				message: 'Stamp Saved!'
 			});
 
-			if (collectedStamps == minStampCountRequired) {
+			if (getCollectedCount() >= minStampCountRequired) {
 				setTimeout(() => {
 					setToast({
 						type: TOAST_TYPE.SUCCESS,
@@ -102,11 +96,6 @@
 		videoElem.setAttribute('playsinline', 'true');
 		videoElem.setAttribute('autoplay', 'true');
 		videoElem.setAttribute('muted', 'true');
-
-		// TODO: Implement collectedStampCount
-		// collectedStampCount = () => {
-		// 	return Object.keys(localStorage).filter((key) => expectedHashes.includes(key)).length;
-		// };
 	});
 
 	onDestroy(() => {