add local storage keep track of played games

frontend/package-lock.json

@@ -8,7 +8,8 @@
 			"name": "wordalle",
 			"version": "0.0.1",
 			"dependencies": {
-				"dom-to-image": "^2.6.0"
+				"dom-to-image": "^2.6.0",
+				"nanoid": "^4.0.0"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-static": "^1.0.0-next.34",
@@ -2019,15 +2020,14 @@
 			"dev": true
 		},
 		"node_modules/nanoid": {
-			"version": "3.3.4",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-			"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-			"dev": true,
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+			"integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg==",
 			"bin": {
-				"nanoid": "bin/nanoid.cjs"
+				"nanoid": "bin/nanoid.js"
 			},
 			"engines": {
-				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+				"node": "^14 || ^16 || >=18"
 			}
 		},
 		"node_modules/natural-compare": {
@@ -2294,6 +2294,18 @@
 			"integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
 			"dev": true
 		},
+		"node_modules/postcss/node_modules/nanoid": {
+			"version": "3.3.4",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+			"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+			"dev": true,
+			"bin": {
+				"nanoid": "bin/nanoid.cjs"
+			},
+			"engines": {
+				"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+			}
+		},
 		"node_modules/prelude-ls": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4376,10 +4388,9 @@
 			"dev": true
 		},
 		"nanoid": {
-			"version": "3.3.4",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-			"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-			"dev": true
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-4.0.0.tgz",
+			"integrity": "sha512-IgBP8piMxe/gf73RTQx7hmnhwz0aaEXYakvqZyE302IXW3HyVNhdNGC+O2MwMAVhLEnvXlvKtGbtJf6wvHihCg=="
 		},
 		"natural-compare": {
 			"version": "1.4.0",
@@ -4494,6 +4505,14 @@
 				"nanoid": "^3.3.4",
 				"picocolors": "^1.0.0",
 				"source-map-js": "^1.0.2"
+			},
+			"dependencies": {
+				"nanoid": {
+					"version": "3.3.4",
+					"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+					"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+					"dev": true
+				}
 			}
 		},
 		"postcss-import": {

frontend/package.json

@@ -35,6 +35,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"dom-to-image": "^2.6.0"
+		"dom-to-image": "^2.6.0",
+		"nanoid": "^4.0.0"
 	}
 }

frontend/src/lib/Result.svelte

@@ -44,7 +44,7 @@
 		}
 	}
 	const onKeyup = (e: KeyboardEvent) => {
-		if (e.key === 'Escape') {
+		if (e.key === 'Escape' || e.key === 'Enter') {
 			dispatch('restart');
 		} else if (e.key === ' ') {
 			saveFile(elToShare);
@@ -58,7 +58,9 @@
 			const compName = badgesComponents[totalStreaks];
 			badgeComponent = (await import(`./badges/${compName}.svelte`)).default;
 		}
-		window.addEventListener('keyup', onKeyup, true);
+		setTimeout(() => {
+			window.addEventListener('keyup', onKeyup, true);
+		}, 1000);
 	});
 
 	onDestroy(() => {

frontend/src/lib/store.ts

@@ -0,0 +1,26 @@
+import { browser } from '$app/env';
+import { writable } from 'svelte/store';
+import type { User, SuccessPrompt } from '../types';
+import { nanoid } from 'nanoid';
+
+const initialUser: User = nanoid();
+const intialCompletedPrompts: SuccessPrompt[] = [];
+
+export const currentUser = writable<User>(
+	browser ? JSON.parse(localStorage['user'] || JSON.stringify(initialUser)) : initialUser
+);
+currentUser.subscribe((value) => {
+	if (browser) {
+		return (localStorage['user'] = JSON.stringify(value));
+	}
+});
+export const completedPromptsStore = writable<SuccessPrompt[]>(
+	browser
+		? JSON.parse(localStorage['completedPrompts'] || JSON.stringify(intialCompletedPrompts))
+		: intialCompletedPrompts
+);
+completedPromptsStore.subscribe((value) => {
+	if (browser) {
+		return (localStorage['completedPrompts'] = JSON.stringify(value));
+	}
+});

frontend/src/routes/index.svelte

@@ -7,6 +7,7 @@
 	import Keyboard from '$lib/Keyboard.svelte';
 	import Result from '$lib/Result.svelte';
 	import Message from '$lib/Message.svelte';
+	import { currentUser, completedPromptsStore } from '$lib/store';
 
 	import { onMount, onDestroy } from 'svelte';
 	import { browser, dev } from '$app/env';
@@ -21,11 +22,21 @@
 	onMount(async () => {
 		onResize();
 		promptsData = await fetch(apiUrl + 'data').then((d) => d.json());
+
+		completedPrompts = $completedPromptsStore;
+		if (completedPrompts.length >= Object.keys(promptsData).length) {
+			gameState = GameState.COMPLETED;
+		}
+
+		console.log('Current User Data:', $currentUser);
+		console.log('Completed Prompts:', $completedPromptsStore);
+
 		restartBoard();
 		window.addEventListener('keyup', onKeyup, true);
 		window.addEventListener('resize', onResize);
 		window.focus();
 		document.body.addEventListener('click', () => window.focus(), false);
+		// update completed prompts with local storage data
 	});
 
 	function onResize() {
@@ -53,13 +64,12 @@
 	// Feedback state: message and shake
 	let message = '';
 	let shakeRowIndex = -1;
-	let gameState: GameState = GameState.PLAYING;
+	let gameState: GameState = GameState.LOADING;
 	// Handle keyboard input.
 	let allowInput = true;
 
 	function restartBoard() {
 		//reset all states
-		gameState = GameState.PLAYING;
 		shakeRowIndex = -1;
 		message = '';
 		currentRowIndex = 0;
@@ -67,6 +77,16 @@
 		allowInput = true;
 
 		const prompts: string[] = Object.keys(promptsData);
+
+		if (completedPrompts.length >= prompts.length || gameState === GameState.COMPLETED) {
+			showMessage("You've completed all prompts. Please come back later for more!", -1);
+			gameState = GameState.COMPLETED;
+			allowInput = false;
+			completedPrompts = [];
+		} else {
+			gameState = GameState.PLAYING;
+		}
+
 		const idsToRemove = completedPrompts.map((e) => e.idx);
 		const promptsFiltered = prompts.filter((_, i) => !idsToRemove.includes(i));
 		const radomPromptId = ~~(Math.random() * promptsFiltered.length);
@@ -77,6 +97,7 @@
 		imagePaths = promptsData[randomPrompt].slice(0, 6);
 		const clue = [...answer].map((a) => (Math.random() > 0.5 ? '*' : a)).join('');
 		console.log('%cCLUE: ', 'color: red;font-weight:bold', clue);
+		// console.log(answer);
 		cols = answer.length;
 		timePerTile = totalTime / cols;
 
@@ -154,6 +175,8 @@
 			if (currentRow.every((tile) => tile.state === LetterState.CORRECT)) {
 				// yay!
 				completedPrompts = [...completedPrompts, { prompt: answer, idx: currPromptIndex }];
+				$completedPromptsStore = completedPrompts;
+
 				setTimeout(() => {
 					gameState = GameState.SUCESS;
 				}, totalTime);

frontend/src/types.ts

@@ -6,9 +6,11 @@ export const enum LetterState {
 }
 
 export const enum GameState {
+	LOADING,
 	PLAYING,
 	SUCESS,
-	FAIL
+	FAIL,
+	COMPLETED
 }
 export interface Tile {
 	letter: string;
@@ -27,3 +29,5 @@ export interface SuccessPrompt {
 	prompt: string;
 	idx: number;
 }
+
+export type User = string;