feat(web): solver output enhancing
- math render header - tooltips - copy word to input - cancel solver
This commit is contained in:
@@ -27,6 +27,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"esbuild": "^0.28.2",
|
||||
"katex": "^0.18.4",
|
||||
"rollup": "^4.62.4",
|
||||
"svelte": "^5.56.9",
|
||||
"wordle-solver": "link:./pkg"
|
||||
|
||||
+28
-7
@@ -41,7 +41,9 @@
|
||||
|
||||
let cursor = $state(0);
|
||||
|
||||
function reset() {
|
||||
async function reset() {
|
||||
await solver_reset(use_default_wordle_answers);
|
||||
|
||||
guesses = [
|
||||
{
|
||||
letters: ["", "", "", "", ""],
|
||||
@@ -59,11 +61,22 @@
|
||||
solution_space = solver_solution_space();
|
||||
}
|
||||
|
||||
async function stopSolver() {
|
||||
await solver_reset(use_default_wordle_answers);
|
||||
for (const g of guesses.slice(0, -1)) {
|
||||
try {
|
||||
await solver_guess(g.letters, g.colors);
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
|
||||
function handleKey(event: KeyboardEvent) {
|
||||
if (event.key === "Enter" && event.shiftKey) {
|
||||
best_words = solver_evaluate_words(5, (p) => {
|
||||
best_words_progress = p;
|
||||
});
|
||||
} else if (event.key === "Escape") {
|
||||
stopSolver();
|
||||
} else if (event.key === "Enter") {
|
||||
const guess = guesses[guesses.length - 1];
|
||||
|
||||
@@ -107,11 +120,12 @@
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={use_default_wordle_answers}
|
||||
onchange={() => {
|
||||
solver_reset(use_default_wordle_answers).then(() => {
|
||||
reset();
|
||||
});
|
||||
onfocus={(e) => {
|
||||
if (e.currentTarget) {
|
||||
e.currentTarget.blur();
|
||||
}
|
||||
}}
|
||||
onchange={reset}
|
||||
/>
|
||||
</p>
|
||||
|
||||
@@ -141,10 +155,17 @@
|
||||
|
||||
<p class="mt-4 text-sm text-zinc-500 mx-auto w-1/2">
|
||||
Type letters · ← → navigate · Space cycle color · Backspace delete ·
|
||||
Enter apply · Shift+Enter solve
|
||||
Enter apply · Shift+Enter solve · Escape reset
|
||||
</p>
|
||||
</div>
|
||||
{#if best_words}
|
||||
<SolverOutput data={best_words} progress={best_words_progress} />
|
||||
<SolverOutput
|
||||
data={best_words}
|
||||
progress={best_words_progress}
|
||||
insert_guess={(g) => {
|
||||
console.log("CB");
|
||||
guesses[guesses.length - 1].letters = g;
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
<script lang="ts">
|
||||
import katex from "katex";
|
||||
import "katex/dist/katex.min.css";
|
||||
import type {
|
||||
EvaluateWordsProgress,
|
||||
EvaluateWordsResult,
|
||||
@@ -7,10 +9,22 @@
|
||||
let {
|
||||
data,
|
||||
progress = null,
|
||||
insert_guess = null,
|
||||
}: {
|
||||
data: Promise<EvaluateWordsResult>;
|
||||
progress: EvaluateWordsProgress | null;
|
||||
insert_guess: (word: string[]) => void | null;
|
||||
} = $props();
|
||||
|
||||
function renderMath(txt: string | null) {
|
||||
return (element: HTMLElement) => {
|
||||
if (txt) {
|
||||
katex.render(txt, element);
|
||||
} else {
|
||||
katex.render(element.innerText, element);
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await data}
|
||||
@@ -27,16 +41,35 @@
|
||||
<table class="w-full text-left text-sm text-gray-700">
|
||||
<thead class="bg-gray-800 text-xs uppercase text-gray-600">
|
||||
<tr>
|
||||
<th class="px-4 py-3">Word</th>
|
||||
<th class="px-4 py-3">p[solution]</th>
|
||||
<th class="px-4 py-3">E[Inf.]</th>
|
||||
<th class="px-4 py-3">E[Score]</th>
|
||||
<th class="px-4 py-3" title="The best words">Word</th>
|
||||
<th
|
||||
class="px-4 py-3 math-header"
|
||||
title="The probability that this word is the solution."
|
||||
{@attach renderMath("p(x=\\text{word})")}
|
||||
></th>
|
||||
<th
|
||||
title="The expected information to gain when guessing this word."
|
||||
class="px-4 py-3 math-header"
|
||||
{@attach renderMath("E[\\text{Inf.}]")}
|
||||
></th>
|
||||
<th
|
||||
title="The expected number of guesses for this wordle when guessing this word."
|
||||
class="px-4 py-3 math-header"
|
||||
{@attach renderMath("E[\\text{Score}]")}
|
||||
></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y divide-gray-500">
|
||||
{#each d.stats as s}
|
||||
<tr class="transition-colors hover:bg-gray-50">
|
||||
<tr
|
||||
class="transition-colors hover:bg-gray-50"
|
||||
onclick={() => {
|
||||
if (insert_guess) {
|
||||
insert_guess([...s.word]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<td class="px-4 py-3 font-bold">{s.word}</td>
|
||||
<td class="px-4 py-3"
|
||||
>{s.solution_probability.toFixed(3)}</td
|
||||
@@ -57,3 +90,13 @@
|
||||
{e}
|
||||
</div>
|
||||
{/await}
|
||||
|
||||
<style>
|
||||
.math-header :global(.katex) {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.math-header :global(.katex .mord) {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -69,6 +69,13 @@
|
||||
class:bg-green-600={colors[i] === Color.GREEN}
|
||||
class:bg-yellow-600={colors[i] === Color.YELLOW}
|
||||
class:bg-grey-600={colors[i] === Color.GREY}
|
||||
onclick={() => {
|
||||
if (cursor === i) {
|
||||
colors[cursor] = (colors[cursor] + 1) % 3;
|
||||
} else {
|
||||
cursor = i;
|
||||
}
|
||||
}}
|
||||
>
|
||||
{letter}
|
||||
</div>
|
||||
|
||||
@@ -767,6 +767,11 @@ color-name@1.1.3:
|
||||
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
|
||||
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
|
||||
|
||||
commander@^8.3.0:
|
||||
version "8.3.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
|
||||
integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
|
||||
|
||||
concat-map@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
|
||||
@@ -1385,6 +1390,13 @@ json-parse-better-errors@^1.0.1:
|
||||
resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
|
||||
integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
|
||||
|
||||
katex@^0.18.4:
|
||||
version "0.18.4"
|
||||
resolved "https://registry.yarnpkg.com/katex/-/katex-0.18.4.tgz#aa09d0bfbcbab71a9a0f9d420def6c0d0a227a94"
|
||||
integrity sha512-IMPntbRLOU+eu88XDiFKqQ8Akhr9Tv7jDMXqPhjG9SI1JMA4DIgXk4x9k4skJz2NZJXBRbC+2pYBLj9olqcZow==
|
||||
dependencies:
|
||||
commander "^8.3.0"
|
||||
|
||||
lightningcss-android-arm64@1.32.0:
|
||||
version "1.32.0"
|
||||
resolved "https://registry.yarnpkg.com/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz#f033885116dfefd9c6f54787523e3514b61e1968"
|
||||
|
||||
Reference in New Issue
Block a user