enable badges on count

frontend/src/lib/Result.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import { colors, cheersMessages } from '$lib/utils';
+	import { colors, cheersMessages, badgesComponents } from '$lib/utils';
 	import type { Board } from '../types';
-	import { fade } from 'svelte/transition';
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { fade, scale } from 'svelte/transition';
+	import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+	import type { SvelteComponent } from 'svelte';
 
 	const dispatch = createEventDispatcher();
 
 	export let board: Board;
 	export let currentRowIndex: number;
 	export let imagePaths: string[];
-
+	export let totalStreaks: number;
 	const message = cheersMessages[currentRowIndex];
 	import domtoimage from 'dom-to-image';
 	const imageBaseUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/' : '';
@@ -17,6 +18,7 @@
 	let modalEl: HTMLDivElement;
 	let elToShare: HTMLDivElement;
 	let disableDownload: boolean = false;
+
 	async function saveFile(node: HTMLDivElement) {
 		disableDownload = true;
 		try {
@@ -46,9 +48,19 @@
 			saveFile(elToShare);
 		}
 	};
-	onMount(() => {
-		window.addEventListener('keyup', onKeyup);
-		return () => window.removeEventListener('keyup', onKeyup);
+
+	let badgeComponent: SvelteComponent;
+
+	onMount(async () => {
+		if (totalStreaks in badgesComponents) {
+			const compName = badgesComponents[totalStreaks];
+			badgeComponent = (await import(`./badges/${compName}.svelte`)).default;
+		}
+		window.addEventListener('keyup', onKeyup, true);
+	});
+
+	onDestroy(() => {
+		window.removeEventListener('keyup', onKeyup, true);
 	});
 	const s = 10;
 	const p = 1;
@@ -65,7 +77,15 @@
 					<span class="font-light">hf.co/wordalle</span>
 				</header>
 				<h2 class="text-center uppercase tracking-widest font-extrabold">{message}</h2>
-				<div class="grid grid-cols-3 gap-2 p-3">
+				<div class="grid grid-cols-3 gap-2 p-3 relative">
+					{#if totalStreaks in badgesComponents}
+						<div
+							transition:scale={{ duration: 500 }}
+							class="absolute left-0 right-0 top-0 bottom-0 flex place-content-center place-items-center"
+						>
+							<svelte:component this={badgeComponent} classNames="w-full max-w-[180px]" />
+						</div>
+					{/if}
 					{#each imagePaths as image}
 						<div>
 							<img src={imageBaseUrl + image} alt="" class="aspect-square	w-full h-full" />

frontend/src/lib/utils.ts

@@ -1,6 +1,6 @@
 // original code inspired by Evan You https://github.com/yyx990803/vue-wordle/
 import { LetterState } from '../types';
-import type { Board } from '../types';
+import type { Board, BadgeComponent } from '../types';
 
 export function clearTile(board: Board, currentRowIndex: number) {
 	const newBoard = [...board];
@@ -36,7 +36,7 @@ export const colors = {
 	[LetterState.INITIAL]: '#5d5d5d'
 };
 
-export const badges = {
+export const badgesComponents: BadgeComponent = {
 	2: 'two',
 	5: 'five',
 	10: 'ten',

frontend/src/routes/index.svelte

@@ -8,7 +8,8 @@
 	import Result from '$lib/Result.svelte';
 	import Message from '$lib/Message.svelte';
 
-	import { onMount, setContext } from 'svelte';
+	import { onMount, onDestroy } from 'svelte';
+	import { browser } from '$app/env';
 
 	const totalTime = 1000;
 	const apiUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/data' : 'data';
@@ -20,9 +21,13 @@
 	onMount(async () => {
 		promptsData = await fetch(apiUrl).then((d) => d.json());
 		restartBoard();
+		window.addEventListener('keyup', onKeyup, true);
+	});
 
-		window.addEventListener('keyup', onKeyup);
-		return () => window.removeEventListener('keyup', onKeyup);
+	onDestroy(() => {
+		if (browser) {
+			window.removeEventListener('keyup', onKeyup, true);
+		}
 	});
 
 	// Get word of the day
@@ -132,6 +137,8 @@
 			allowInput = false;
 			if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) {
 				// yay!
+				completedPrompts = [...completedPrompts, { prompt: answer, idx: currPromptIndex }];
+				console.log(completedPrompts);
 				setTimeout(() => {
 					gameState = GameState.SUCESS;
 				}, totalTime);
@@ -176,10 +183,16 @@
 {#if board !== undefined}
 	<div class="max-w-screen-lg mx-auto px-1 relative z-0 mt-3">
 		{#if message}
-			<Message {message} {gameState} on:restart={restartBoard}/>
+			<Message {message} {gameState} on:restart={restartBoard} />
 		{/if}
 		{#if gameState === GameState.SUCESS}
-			<Result {board} {currentRowIndex} {imagePaths} on:restart={restartBoard} />
+			<Result
+				{board}
+				{currentRowIndex}
+				{imagePaths}
+				totalStreaks={completedPrompts.length}
+				on:restart={restartBoard}
+			/>
 		{/if}
 		<!-- <div class="message" transition:fade>
 			{message}

frontend/src/types.ts

@@ -20,7 +20,9 @@ export type Board = Tile[][];
 export interface PromptsData {
 	[key: string]: string[];
 }
-
+export interface BadgeComponent {
+	[key: number]: string;
+}
 export interface SuccessPrompt {
 	prompt: string;
 	idx: number;