chore: re-scaffold demo

geoffrich · Jan 1, 2024 · 3b51009 · 3b51009
1 parent 75b01fd
commit 3b51009
Show file tree

Hide file tree

Showing 8 changed files with 634 additions and 293 deletions.
diff --git a/demo/jsconfig.json b/demo/jsconfig.json
@@ -8,7 +8,8 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
+		"moduleResolution": "bundler"
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
 	//

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -11,17 +11,17 @@
 		"test": "playwright test"
 	},
 	"devDependencies": {
-		"@fontsource/fira-mono": "^5.0.8",
+		"@fontsource/fira-mono": "^4.5.10",
 		"@neoconfetti/svelte": "^1.0.0",
-		"@playwright/test": "^1.40.0",
-		"@sveltejs/adapter-auto": "^1.0.3",
-		"@sveltejs/kit": "^1.27.6",
-		"@types/cookie": "^0.5.4",
-		"svelte": "^3.59.2",
+		"@playwright/test": "^1.28.1",
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"svelte": "^4.2.7",
 		"svelte-adapter-azure-swa": "file:..",
 		"svelte-check": "^3.6.0",
-		"typescript": "^4.9.5",
-		"vite": "^4.5.0"
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
 	},
 	"type": "module"
 }
diff --git a/demo/src/app.d.ts b/demo/src/app.d.ts
@@ -1,12 +1,11 @@
-/// <reference types="svelte-adapter-azure-swa" />
-
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
 	namespace App {
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}
+		// interface PageState {}
 		// interface Platform {}
 	}
 }

diff --git a/demo/src/app.html b/demo/src/app.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/demo/src/routes/sverdle/+page.server.js b/demo/src/routes/sverdle/+page.server.js
@@ -1,7 +1,7 @@
 import { fail } from '@sveltejs/kit';
 import { Game } from './game';
 
-/** @type {import('./$types').PageServerLoad} */
+/** @satisfies {import('./$types').PageServerLoad} */
 export const load = ({ cookies }) => {
 	const game = new Game(cookies.get('sverdle'));
 
@@ -24,7 +24,7 @@ export const load = ({ cookies }) => {
 	};
 };
 
-/** @type {import('./$types').Actions} */
+/** @satisfies {import('./$types').Actions} */
 export const actions = {
 	/**
 	 * Modify game state in reaction to a keypress. If client-side JavaScript
@@ -44,7 +44,7 @@ export const actions = {
 			game.guesses[i] += key;
 		}
 
-		cookies.set('sverdle', game.toString());
+		cookies.set('sverdle', game.toString(), { path: '' });
 	},
 
 	/**
@@ -61,10 +61,10 @@ export const actions = {
 			return fail(400, { badGuess: true });
 		}
 
-		cookies.set('sverdle', game.toString());
+		cookies.set('sverdle', game.toString(), { path: '' });
 	},
 
 	restart: async ({ cookies }) => {
-		cookies.delete('sverdle');
+		cookies.delete('sverdle', { path: '' });
 	}
 };
diff --git a/demo/src/routes/sverdle/+page.svelte b/demo/src/routes/sverdle/+page.svelte
@@ -16,8 +16,11 @@
 	/** The index of the current guess */
 	$: i = won ? -1 : data.answers.length;
 
+	/** The current guess */
+	$: currentGuess = data.guesses[i] || '';
+
 	/** Whether the current guess can be submitted */
-	$: submittable = data.guesses[i]?.length === 5;
+	$: submittable = currentGuess.length === 5;
 
 	/**
 	 * A map of classnames for all letters that have been guessed,
@@ -60,14 +63,13 @@
 	 * @param {MouseEvent} event
 	 */
 	function update(event) {
-		const guess = data.guesses[i];
 		const key = /** @type {HTMLButtonElement} */ (event.target).getAttribute('data-key');
 
 		if (key === 'backspace') {
-			data.guesses[i] = guess.slice(0, -1);
+			currentGuess = currentGuess.slice(0, -1);
 			if (form?.badGuess) form.badGuess = false;
-		} else if (guess.length < 5) {
-			data.guesses[i] += key;
+		} else if (currentGuess.length < 5) {
+			currentGuess += key;
 		}
 	}
 
@@ -79,6 +81,8 @@
 	function keydown(event) {
 		if (event.metaKey) return;
 
+		if (event.key === 'Enter' && !submittable) return;
+
 		document
 			.querySelector(`[data-key="${event.key}" i]`)
 			?.dispatchEvent(new MouseEvent('click', { cancelable: true }));
@@ -107,14 +111,15 @@
 	<a class="how-to-play" href="/sverdle/how-to-play">How to play</a>
 
 	<div class="grid" class:playing={!won} class:bad-guess={form?.badGuess}>
-		{#each Array(6) as _, row}
+		{#each Array.from(Array(6).keys()) as row (row)}
 			{@const current = row === i}
 			<h2 class="visually-hidden">Row {row + 1}</h2>
 			<div class="row" class:current>
-				{#each Array(5) as _, column}
+				{#each Array.from(Array(5).keys()) as column (column)}
+					{@const guess = current ? currentGuess : data.guesses[row]}
 					{@const answer = data.answers[row]?.[column]}
-					{@const value = data.guesses[row]?.[column] ?? ''}
-					{@const selected = current && column === data.guesses[row].length}
+					{@const value = guess?.[column] ?? ''}
+					{@const selected = current && column === guess.length}
 					{@const exact = answer === 'x'}
 					{@const close = answer === 'c'}
 					{@const missing = answer === '_'}
@@ -167,7 +172,7 @@
 								on:click|preventDefault={update}
 								data-key={letter}
 								class={classnames[letter]}
-								disabled={data.guesses[i].length === 5}
+								disabled={submittable}
 								formaction="?/update"
 								name="key"
 								value={letter}

diff --git a/demo/vite.config.js b/demo/vite.config.js
@@ -1,8 +1,6 @@
 import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
 
-/** @type {import('vite').UserConfig} */
-const config = {
+export default defineConfig({
 	plugins: [sveltekit()]
-};
-
-export default config;
+});