Migrate to supabase part 1

package.json

@@ -18,6 +18,7 @@
 		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/jssha": "^3.0.0",
 		"@types/phoenix": "^1.6.0",
 		"@typescript-eslint/eslint-plugin": "^5.60.0",
 		"@typescript-eslint/parser": "^5.60.0",
@@ -54,6 +55,7 @@
 		"hololive-nick-gen": "^1.0.1",
 		"jssha": "^3.3.0",
 		"phoenix": "^1.7.6",
-		"qr-scanner": "^1.4.2"
+		"qr-scanner": "^1.4.2",
+		"svelte-persisted-store": "^0.11.0"
 	}
 }

src/const.ts

@@ -1,133 +1,13 @@
 import { dev } from '$app/environment';
-import type { Stamp } from './custom';
-
-import asulNuiProfile from '$lib/assets/asulnui-profile.jpg';
-import cyclicProfilePic from '$lib/assets/cyclic-redundancy-profile.png';
-import erizuProfilePic from '$lib/assets/erizu-profile.jpg';
-import hasukeProfilePic from '$lib/assets/hasuke-profile.jpg';
-import hynoriProfile from '$lib/assets/hynori-profile.png';
-import ioeaProfile from '$lib/assets/ioea-profile.jpg';
-import juweiProfilePic from '$lib/assets/juwei-profile.jpg';
-import maruminProfile from '$lib/assets/marumin-profile.jpg';
-import moriProfilePic from '$lib/assets/morinohitos-profile.jpg';
-import saviProfilePic from '$lib/assets/savi-profile.jpg';
 
 /**
  * @file This file contains all the constants used in the application.
  */
 
-// Stamp ralley partner stamp information.
-// Each hash is the SHA1 hash of the stamp UUID token.
-export const expectedStamps: Stamp[] = [
-	{
-		hash: '37d895725ad8aa8bba87a139710e909b46cb753e',
-		id: 1,
-		name: 'Hasuke はすけ 4C16',
-		description: `
-		Digital Artist & V-Tuber | 🇩🇪🇺🇸🇯🇵 |
-| Graphic Art | Illustration | Gamedev | 
-Certified Hololive Simp
-Modell & Banner by me.`,
-		externalURL: 'https://webapp.dokomi.de/explore/c/108511',
-		imageURL: hasukeProfilePic
-	},
-	{
-		id: 2,
-		name: 'Kagura Nana 3B18',
-		hash: '65f21aa01e5be625463340fdebf5eac8b636264f',
-		description: `
-		Natsume Eri, Eretto and Nana Kaguraaa
-		`,
-		externalURL: 'https://webapp.dokomi.de/explore/c/109092',
-		imageURL: ioeaProfile
-	},
-	{
-		id: 3,
-		name: 'marumin 3C21',
-		hash: '0cee71fe8e4834108709bbc3986517fc1bb82175',
-		description: `
-		♡ I'm Maru and I draw!! | DM for commission info || email: [email protected] || 🍃🌿🍀rambles 
-@marusleeps
- || https://marustore.storenvy.com
- `,
-		externalURL: 'https://webapp.dokomi.de/explore/c/107001',
-		imageURL: maruminProfile
-	},
-	{
-		id: 4,
-		name: 'hynori🌸 3G94',
-		hash: '78d2cb5917a477bdaa73e743e2e71760b72f30c7',
-		description: `
-		phi 🌟 she/her 🌟 game art student 🌟 OC, DnD, FFXIV, genshin 🌟 I love alphinaud leveilleur 🌟 comms CLOSED 🌟 email hynorin*gmail*com GER&ENG OK! 日本語まだまだです
-		`,
-		externalURL: 'https://webapp.dokomi.de/explore/c/107044',
-		imageURL: hynoriProfile
-	},
-	{
-		id: 5,
-		name: 'Mori @ 3M34',
-		hash: '76a12efd6c61d78ecf46c820c4210ef9eaceda34',
-		description: 'Artist into: Anime|VTubers|Games',
-		externalURL: 'https://webapp.dokomi.de/explore/c/108058',
-		imageURL: moriProfilePic
-	},
-	{
-		id: 6,
-		name: 'SAVI✿サビ M701',
-		hash: '26f34a24468d310ae469fcde15fef83ed9d3297d',
-		description: `
-		I'm a pink ball who simps for cute girls.. and draws…sometimes (2434) 💓Eng/Рус/日本語/Ger OK💓 business: savi.chan.commissions@gmail(.)com📩info in carrd`,
-		externalURL: 'https://webapp.dokomi.de/explore/c/107468',
-		imageURL: saviProfilePic
-	},
-
-	{
-		id: 7,
-		name: 'CYCLIC★REDUNDANCY 3J48',
-		hash: '547b3527f079fd616ccd420d242e06092efc2e1b',
-		description: `
-		Doujin 同人 Circle 🎨▪️Account manager 担当者：
-@Ninamo_lcr
-▪️Online stores 通販 ➡️ See pinned tweet 🛒📌▪️ES/EN/日本語👌`,
-		externalURL: 'https://webapp.dokomi.de/explore/c/107091',
-		imageURL: cyclicProfilePic
-	},
-	{
-		id: 8,
-		name: 'Erizu 3J19',
-		hash: '31db5fff1842de328bf801624d6c6a7a368849e2',
-		description: 'Freelance Illustrator | Live2d Artist/Rigger | Pixel Art Apprentice',
-		externalURL: 'https://webapp.dokomi.de/explore/c/108335',
-		imageURL: erizuProfilePic
-	},
-	{
-		id: 9,
-		name: 'juwei 🌷🌆 3L53',
-		hash: 'be94be5fe0c93e5c74a6b62f500b66954eca9ed2',
-		description: `
-		【artist and tea connoisseur】commissions: http://vgen.co/juwei • stream: http://twitch.tv/juwei_ • support: http://ko-fi.com/juwei • alt: 
-@jujujuwei
- ✨ h: 
-@pnkkr4mune`,
-		externalURL: 'https://webapp.dokomi.de/explore/c/107557',
-		imageURL: juweiProfilePic
-	},
-	{
-		id: 10,
-		name: 'Asulnui 3H03',
-		hash: '6fdfc8bfb68f0c3df42bf6d98064f2a7b058e4e5',
-		description: `
-		Robo doggo⚡🐾 Vtuber training arc. VArtist 🖊️ Art tag #Inuink 
-ESP/ENG/日本語 OK!
-`,
-		externalURL: 'https://webapp.dokomi.de/explore/c/107086',
-		imageURL: asulNuiProfile
-	}
-];
-
 export const socketServerURL = dev
 	? 'ws://localhost:4000/socket'
 	: 'wss://api.hololivefanbooth.com/socket';
+
 export const apiServerURL = dev
 	? 'http://localhost:4000/api/json'
 	: 'https://api.hololivefanbooth.com/api/json';

src/crypto.spec.ts

@@ -1,6 +1,6 @@
 // crypto.spec.ts
 import { test } from 'vitest';
-import { calculateTokenChecksum, sha1 } from './crypto'; // adjust the path if necessary
+import { calculateTokenChecksum, sha1, sha256 } from './crypto'; // adjust the path if necessary
 
 test('sha1 hashes correctly', () => {
 	const input = 'Hello, world!';
@@ -12,6 +12,16 @@ test('sha1 hashes correctly', () => {
 	}
 });
 
+test('sha256 hashes correctly', () => {
+	const input = 'Hololive saiko!';
+	const output = sha256(input);
+	const expected = '1116a12cc9951753485ffc7290094cdd649b67b4f5df7bfd514024b58fad661e'; // SHA-256 hash of 'Hololive saiko!'
+
+	if (output !== expected) {
+		throw new Error(`Expected ${expected}, but got ${output}`);
+	}
+});
+
 test('calculateTokenChecksum hashes correctly', () => {
 	const tokens = ['token1', 'token2', 'token3'];
 	const output = calculateTokenChecksum(tokens);

src/crypto.ts

@@ -1,9 +1,9 @@
 import jsSHA from 'jssha';
 
 /**
- *
- * @param input a string to be hashed
- * @returns a SHA-1 hash of the input
+ * Calculates the SHA-1 hash of a given input string.
+ * @param input - The string to be hashed.
+ * @returns The SHA-1 hash of the input string.
  */
 export function sha1(input: string): string {
 	const shaObj = new jsSHA('SHA-1', 'TEXT');
@@ -12,9 +12,20 @@ export function sha1(input: string): string {
 }
 
 /**
- * Calculates the checksum of a string of tokens by concatenating them and hashing the result using sha-256.
- * @param tokens an array of tokens to be hashed
- * @returns a sha-256 hash of the concatenated tokens
+ * Calculates the SHA-256 hash of a given input string.
+ * @param input - The string to be hashed.
+ * @returns The SHA-256 hash of the input string.
+ */
+export function sha256(input: string): string {
+	const shaObj = new jsSHA('SHA-256', 'TEXT');
+	shaObj.update(input);
+	return shaObj.getHash('HEX');
+}
+
+/**
+ * Calculates the checksum of an array of tokens by concatenating them and hashing the result using SHA-256.
+ * @param tokens - An array of tokens to be hashed.
+ * @returns The SHA-256 hash of the concatenated tokens.
  */
 export function calculateTokenChecksum(tokens: string[]): string {
 	const shaObj = new jsSHA('SHA-256', 'TEXT');

src/custom.ts

@@ -1,12 +1,3 @@
-export type Stamp = {
-	id: number;
-	name: string;
-	hash: string;
-	description: string;
-	externalURL?: string;
-	imageURL?: string;
-};
-
 export const TOAST_TYPE = {
 	SUCCESS: 'SUCCESS',
 	ERROR: 'ERROR'

src/lib/components/StampSheet.svelte

@@ -2,15 +2,17 @@
 	import { fade, fly } from 'svelte/transition';
 	import { cubicOut } from 'svelte/easing';
 	import StampComponent from '$lib/components/Stamp.svelte';
-	import type { Stamp } from '../../custom';
+	import type {Tables} from '$lib/database.types';
 	import { onMount } from 'svelte';
-	import { expectedStamps } from '../../const';
+
 	import HolomemGacha from './HolomemGacha.svelte';
 	import RoundScanButton from './RoundScanButton.svelte';
+	import { collectedStamps } from '$lib/stores/stamps';
+	import { get } from 'svelte/store';
 
-	export let stamps: Stamp[] = [];
+	export let stamps: Tables<'stamps'>[] = [];
 
-	let isStampCollected = function (_stamp: Stamp) {
+	let isStampCollected = function (_stamp: Tables<'stamps'>) {
 		return false;
 	};
 
@@ -20,15 +22,16 @@
 	let isQuestCompleted = false; // Can only be true if all stamps were collected
 
 	function isAllStampsCollected() {
-		return expectedStamps.every(isStampCollected);
+		return stamps.every(isStampCollected);
 	}
 
 	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(() => {
-		isStampCollected = function (stamp: Stamp) {
-			return localStorage.getItem(stamp.hash) !== null;
+		isStampCollected = function (stamp: Tables<'stamps'>) {
+			// return localStorage.getItem(stamp.hash) !== null;
+			return get(collectedStamps)[stamp.hash];
 		};
 
 		tearStampSheet = function () {
@@ -121,7 +124,7 @@
 					name={stamp.name}
 					collected={isStampCollected(stamp)}
 					id={stamp.id}
-					img={stamp.imageURL}
+					img={stamp.image_url || undefined}
 				/>
 			{/each}
 		</div>