diff --git a/web/src/App.svelte b/web/src/App.svelte index e1bc952..d2dc7b5 100644 --- a/web/src/App.svelte +++ b/web/src/App.svelte @@ -15,7 +15,7 @@ } from "./solver/types.ts"; import SolverOutput from "./components/SolverOutput.svelte"; import { FolderGit2 } from "@lucide/svelte"; - import { tick } from "svelte"; + import { tick, onMount } from "svelte"; let guesses = $state([ { @@ -45,6 +45,19 @@ let w_lines: WordleLine[] = $state([]); let cursor = $state(0); + let is_desktop = $state(false); + + onMount(() => { + const update = () => { + is_desktop = window.innerWidth >= 768; + }; + + update(); + window.addEventListener("resize", update); + + return () => window.removeEventListener("resize", update); + }); + async function toggleSolver() { if (solving) { await stopSolver(); @@ -136,92 +149,111 @@
- - - -
-

Wordle Solver

- -

- Use Wordle-Answers: - { - if (e.currentTarget) { - e.currentTarget.blur(); - } - }} - onchange={reset} - /> -

- -

- {#await solution_space} - loading - {:then s} - Solution-space: {s.size}, Uncertainty: {s.uncertainty.toFixed( - 2, - )}bits - {:catch e} - {e} - {/await} -

- -
- {#each guesses as g, i (g)} - - {/each} -
- -

- Type letters · ← → navigate · Space cycle color · Backspace delete · - Enter apply · Shift+Enter solve · Escape abort solver · Ctrl+Esc - reset -

- + +
+ {#if best_words} + { + guesses[guesses.length - 1].letters = g; + }} + bind:solving + /> + {/if}
- {#if best_words} - { - guesses[guesses.length - 1].letters = g; - }} - bind:solving - /> - {/if} + + diff --git a/web/src/components/WordleLine.svelte b/web/src/components/WordleLine.svelte index fdb76a2..12d4c87 100644 --- a/web/src/components/WordleLine.svelte +++ b/web/src/components/WordleLine.svelte @@ -38,6 +38,7 @@ if (event.key === "Backspace") { if (letters[cursor] === "" && cursor > 0) { cursor--; + inputs[cursor].focus(); } if (active) { @@ -69,7 +70,7 @@ disabled={!active} tabindex="-1" class=" - flex h-16 w-16 items-center justify-center + flex aspect-square max-w-16 w-1/6 items-center justify-center rounded-lg border-2 text-3xl font-bold transition-all text-center caret-transparent @@ -111,7 +112,7 @@ /> {/each} {#if info_gained === null}