From 76b511992dc086d3e855f09ce505e0ba15e09371 Mon Sep 17 00:00:00 2001
From: Daniils Petrovs <daniils@platogo.com>
Date: Sun, 23 Jun 2024 11:57:23 +0200
Subject: [PATCH] Fix collected check, stamp page

---
 src/lib/components/Stamp.svelte               |  7 ++++---
 src/lib/components/StampSheet.svelte          | 18 +++++++++---------
 src/lib/stores/stamps.ts                      |  4 ++++
 src/routes/+layout.ts                         | 12 +++++++++---
 src/routes/+page.ts                           |  5 ++++-
 .../partner/{[id] => [hash]}/+page.svelte     |  3 +--
 src/routes/partner/[hash]/+page.ts            | 16 ++++++++++++++++
 src/routes/partner/[id]/+page.ts              | 16 ----------------
 src/routes/scanner/+page.svelte               | 19 ++++---------------
 9 files changed, 51 insertions(+), 49 deletions(-)
 rename src/routes/partner/{[id] => [hash]}/+page.svelte (86%)
 create mode 100644 src/routes/partner/[hash]/+page.ts
 delete mode 100644 src/routes/partner/[id]/+page.ts

diff --git a/src/lib/components/Stamp.svelte b/src/lib/components/Stamp.svelte
index 1737d14..4ba8188 100644
--- a/src/lib/components/Stamp.svelte
+++ b/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
diff --git a/src/lib/components/StampSheet.svelte b/src/lib/components/StampSheet.svelte
index 9b7ce75..9656dfe 100644
--- a/src/lib/components/StampSheet.svelte
+++ b/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,19 +22,18 @@
 	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 () {
@@ -42,7 +41,7 @@
 			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}
diff --git a/src/lib/stores/stamps.ts b/src/lib/stores/stamps.ts
index f8bf68f..5daf658 100644
--- a/src/lib/stores/stamps.ts
+++ b/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;
+}
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index d213a72..b951810 100644
--- a/src/routes/+layout.ts
+++ b/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,6 +14,7 @@ export const load = (async () => {
 // Startup tasks
 async function startupTasks() {
 	console.log('Running startup tasks...');
+	get(collectedStamps);
 	await updateExpectedStamps();
 }
 
@@ -20,11 +22,15 @@ async function startupTasks() {
 // 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 || {});
 }
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index e232f41..fa08418 100644
--- a/src/routes/+page.ts
+++ b/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;
diff --git a/src/routes/partner/[id]/+page.svelte b/src/routes/partner/[hash]/+page.svelte
similarity index 86%
rename from src/routes/partner/[id]/+page.svelte
rename to src/routes/partner/[hash]/+page.svelte
index 1257f0b..86a582f 100644
--- a/src/routes/partner/[id]/+page.svelte
+++ b/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
diff --git a/src/routes/partner/[hash]/+page.ts b/src/routes/partner/[hash]/+page.ts
new file mode 100644
index 0000000..6ca2d29
--- /dev/null
+++ b/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;
diff --git a/src/routes/partner/[id]/+page.ts b/src/routes/partner/[id]/+page.ts
deleted file mode 100644
index 7a0299d..0000000
--- a/src/routes/partner/[id]/+page.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { error } from '@sveltejs/kit';
-import type { PageLoad } from './$types';
-
-export const load = (async ({ params }) => {
-	const { id } = params;
-
-	// const partner = expectedStamps.find((stamp) => stamp.id === Number(id)) as object | undefined;
-
-	// if (!partner) {
-	// 	return error(404, 'Not found');
-	// }
-
-	// return { partner };
-
-	return error(404, 'Not impleneted yet');
-}) satisfies PageLoad;
diff --git a/src/routes/scanner/+page.svelte b/src/routes/scanner/+page.svelte
index f7b7123..df53376 100644
--- a/src/routes/scanner/+page.svelte
+++ b/src/routes/scanner/+page.svelte
@@ -9,7 +9,7 @@
 	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';
 
@@ -17,11 +17,6 @@
 
 	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(() => {