From 2f5b305271a1e9de9238571874d16c7a2e787cfd Mon Sep 17 00:00:00 2001 From: oliv37 Date: Sat, 2 Sep 2023 00:41:29 +0200 Subject: [PATCH 1/2] feat: improve sverdle reactivity --- .../default/src/routes/sverdle/+page.svelte | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte b/packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte index bbd8fb350981..68ab6400de82 100644 --- a/packages/create-svelte/templates/default/src/routes/sverdle/+page.svelte +++ b/packages/create-svelte/templates/default/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,16 +63,15 @@ * @param {MouseEvent} event */ function update(event: MouseEvent) { - const guess = data.guesses[i]; const key = /** @type {HTMLButtonElement} */ (event.target as HTMLButtonElement).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; } } @@ -81,6 +83,8 @@ function keydown(event: KeyboardEvent) { if (event.metaKey) return; + if (event.key === 'Enter' && !submittable) return; + document .querySelector(`[data-key="${event.key}" i]`) ?.dispatchEvent(new MouseEvent('click', { cancelable: true })); @@ -114,9 +118,10 @@
{#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 === '_'} @@ -169,7 +174,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} From 52bca1a71b8e7fce23961def072a6085fe32ff13 Mon Sep 17 00:00:00 2001 From: Ben McCann <322311+benmccann@users.noreply.github.com> Date: Thu, 21 Sep 2023 08:33:38 -0700 Subject: [PATCH 2/2] Create silver-crews-drop.md --- .changeset/silver-crews-drop.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/silver-crews-drop.md diff --git a/.changeset/silver-crews-drop.md b/.changeset/silver-crews-drop.md new file mode 100644 index 000000000000..b2016461e885 --- /dev/null +++ b/.changeset/silver-crews-drop.md @@ -0,0 +1,5 @@ +--- +"create-svelte": patch +--- + +feat: improve sverdle reactivity