jonas/wordle-solver-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add solver output

Browse Source
This commit is contained in:
jonas
2026-08-21 15:49:24 +02:00
parent 8d501d42a3
commit 7667ff24cd
9 changed files with 238 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.svelte
+27 -7
View File
@@ -1,8 +1,18 @@
<script lang="ts">
import { Color } from "wordle-solver";
import WordleLine from "./components/WordleLine.svelte";
import { solver_guess, solver_solution_space } from "./solver/solver.ts";
import type { GuessResult, SolutionSpaceResult } from "./solver/types.ts";
import {
solver_evaluate_words,
solver_guess,
solver_solution_space,
} from "./solver/solver.ts";
import type {
GuessResult,
SolutionSpaceResult,
EvaluateWordsResult,
EvaluateWordsProgress,
} from "./solver/types.ts";
import SolverOutput from "./components/SolverOutput.svelte";
let guesses = $state([
{
@@ -26,10 +36,17 @@
solution_space = solver_solution_space();
}, 300);
let best_words: Promise<EvaluateWordsResult> | null = $state(null);
let best_words_progress: EvaluateWordsProgress | null = $state(null);
let cursor = $state(0);
function handleKey(event: KeyboardEvent) {
if (event.key === "Enter") {
if (event.key === "Enter" && event.shiftKey) {
best_words = solver_evaluate_words(5, (p) => {
best_words_progress = p;
});
} else if (event.key === "Enter") {
const guess = guesses[guesses.length - 1];
if (guess.letters.join("").length != 5) {
@@ -62,7 +79,7 @@
<svelte:window onkeydown={handleKey} />
<div
class="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center"
class="min-h-screen bg-zinc-950 text-zinc-100 flex items-center justify-center gap-8"
>
<div class="text-center">
<h1 class="mb-6 text-3xl font-bold">Wordle Solver</h1>
@@ -77,7 +94,7 @@
{/await}
</p>
<div class="mt-4 flex flex-col gap-2">
<div class="ml-16 mt-4 flex flex-col gap-2">
{#each guesses as g, i (g)}
<WordleLine
active={i === guesses.length - 1}
@@ -89,9 +106,12 @@
{/each}
</div>
<p class="mt-4 text-sm text-zinc-500">
<p class="mt-4 text-sm text-zinc-500 mx-auto w-1/2">
Type letters · ← → navigate · Space cycle color · Backspace delete ·
Enter apply
Enter apply · Shift+Enter solve
</p>
</div>
{#if best_words}
<SolverOutput data={best_words} progress={best_words_progress} />
{/if}
</div>
web/src/components/SolverOutput.svelte
+57
View File
@@ -1,2 +1,59 @@
<script lang="ts">
import type {
EvaluateWordsProgress,
EvaluateWordsResult,
} from "../solver/types";
let {
data,
progress = null,
}: {
data: Promise<EvaluateWordsResult>;
progress: EvaluateWordsProgress | null;
} = $props();
</script>
{#await data}
<div class="flex items-center justify-center gap-2 p-6 text-gray-600">
Solving...
{#if progress}
<span class="text-sm">
{progress.i} / {progress.n}
</span>
{/if}
</div>
{:then d}
<div class="overflow-x-auto rounded-lg border border-gray-500 shadow-sm">
<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>
</tr>
</thead>
<tbody class="divide-y divide-gray-500">
{#each d.stats as s}
<tr class="transition-colors hover:bg-gray-50">
<td class="px-4 py-3 font-bold">{s.word}</td>
<td class="px-4 py-3"
>{s.solution_probability.toFixed(3)}</td
>
<td class="px-4 py-3"
>{s.expected_information_gained.toFixed(3)}</td
>
<td class="px-4 py-3"
>{s.expected_score_after_guess.toFixed(3)}</td
>
</tr>
{/each}
</tbody>
</table>
</div>
{:catch e}
<div class="rounded-lg border border-red-200 bg-red-50 p-4 text-red-700">
{e}
</div>
{/await}
web/src/solver/solver.ts
+36 -2
View File
@@ -1,6 +1,6 @@
import type { Color } from "wordle-solver";
import SolverWorker from "./worker?worker";
import type { GuessResult, SolutionSpaceResult, SolverRequest, SolverResponse } from "./types";
import type { GuessResult, SolutionSpaceResult, EvaluateWordsResult, SolverRequest, SolverResponse, EvaluateWordsProgress } from "./types";
let solver_worker = new SolverWorker();
@@ -11,6 +11,8 @@ const pending = new Map<number, {
reject: (error: unknown) => void;
}>();
const progresses = new Map<number, (p: EvaluateWordsProgress) => void>();
export function solver_guess(word: string[], colors: Color[]): Promise<GuessResult> {
const id = msg_id++;
@@ -29,7 +31,7 @@ export function solver_guess(word: string[], colors: Color[]): Promise<GuessResu
export function solver_solution_space(): Promise<SolutionSpaceResult> {
const id = msg_id++;
return new Promise((resolve, reject) => {
pending.set(id, { resolve, reject });
@@ -43,9 +45,40 @@ export function solver_solution_space(): Promise<SolutionSpaceResult> {
});
}
export function solver_evaluate_words(n: number, progress: ((p: EvaluateWordsProgress) => void) | null): Promise<EvaluateWordsResult> {
const id = msg_id++;
if (progress) {
progresses.set(id, progress);
}
return new Promise((resolve, reject) => {
pending.set(id, { resolve, reject });
const r: SolverRequest = {
type: "evaluate_words",
id: id,
input: { n },
};
solver_worker.postMessage(JSON.parse(JSON.stringify(r)));
});
}
solver_worker.onmessage = (event: MessageEvent<SolverResponse>) => {
let res = event.data;
if (res.type == "evaluate_words_progress") {
let progress = progresses.get(res.id);
if (progress) {
progress(res.result);
}
return;
}
const pendingRequest = pending.get(res.id);
if (!pendingRequest) {
@@ -53,6 +86,7 @@ solver_worker.onmessage = (event: MessageEvent<SolverResponse>) => {
}
pending.delete(res.id);
progresses.delete(res.id);
if (res.error) {
pendingRequest.reject(res.error);
web/src/solver/types.ts
+12
View File
@@ -30,6 +30,11 @@ export type SolverResponse =
error: string | null,
result: EvaluateWordsResult | null
}
| {
type: "evaluate_words_progress",
id: number,
result: EvaluateWordsProgress
}
| {
type: "solution_space",
id: number,
@@ -47,8 +52,15 @@ export type GuessResult = {
export type EvaluateWords = {
n: number,
};
export type EvaluateWordsProgress = {
i: number,
n: number
};
export type WordStats = {
word: string,
solution_probability: number,
expected_information_gained: number,
expected_score_after_guess: number
};
export type EvaluateWordsResult = {
stats: WordStats[]
web/src/solver/worker.ts
+38 -15
View File
@@ -1,5 +1,5 @@
import { Solver } from "wordle-solver";
import type { SolverRequest, SolverResponse } from "./types";
import { Solver, } from "wordle-solver";
import type { EvaluateWordsProgress, SolverRequest, SolverResponse, WordStats } from "./types";
let solver = Solver.new();
@@ -19,9 +19,7 @@ self.onmessage = (event: MessageEvent<SolverRequest>) => {
result: { info_gained: infos[infos.length - 1] }
};
self.setTimeout(() => {
self.postMessage(JSON.parse(JSON.stringify(response)));
}, 1000);
self.postMessage(JSON.parse(JSON.stringify(response)));
} catch (e) {
const response: SolverResponse = {
type: "guess",
@@ -30,23 +28,48 @@ self.onmessage = (event: MessageEvent<SolverRequest>) => {
result: null,
};
self.setTimeout(() => {
self.postMessage(JSON.parse(JSON.stringify(response)));
}, 1000);
self.postMessage(JSON.parse(JSON.stringify(response)));
}
break;
};
case "evaluate_words": {
const response: SolverResponse = {
type: "evaluate_words",
id: request.id,
error: "not implemented",
result: null,
};
try {
let stats = solver.evaluate_words(request.input.n, (i: number, n: number) => {
let p: SolverResponse = {
type: "evaluate_words_progress",
id: request.id,
result: { i, n }
};
self.postMessage(JSON.parse(JSON.stringify(p)));
}).map((ws): WordStats => {
return {
word: ws.word,
solution_probability: ws.solution_probability,
expected_information_gained: ws.expected_information_gained,
expected_score_after_guess: ws.expected_score_after_guess
};
});
const response: SolverResponse = {
type: "evaluate_words",
id: request.id,
error: null,
result: { stats },
};
self.postMessage(JSON.parse(JSON.stringify(response)));
} catch (e) {
const response: SolverResponse = {
type: "evaluate_words",
id: request.id,
error: e,
result: null,
};
self.postMessage(JSON.parse(JSON.stringify(response)));
}
self.postMessage(JSON.parse(JSON.stringify(response)));
break;
};
case "solution_space": {