118 lines
3.7 KiB
Svelte
118 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import katex from "katex";
|
|
import "katex/dist/katex.min.css";
|
|
import type {
|
|
EvaluateWordsProgress,
|
|
EvaluateWordsResult,
|
|
} from "../solver/types";
|
|
|
|
let {
|
|
data,
|
|
progress = null,
|
|
insert_guess = null,
|
|
solving = $bindable(true),
|
|
}: {
|
|
data: Promise<EvaluateWordsResult>;
|
|
progress: EvaluateWordsProgress | null;
|
|
insert_guess: ((word: string[]) => void) | null;
|
|
solving: boolean;
|
|
} = $props();
|
|
|
|
$effect(() => {
|
|
solving = true;
|
|
data.finally(() => {
|
|
solving = false;
|
|
});
|
|
});
|
|
|
|
function renderMath(txt: string | null) {
|
|
return (element: HTMLElement) => {
|
|
if (txt) {
|
|
katex.render(txt, element);
|
|
} else {
|
|
katex.render(element.innerText, element);
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
|
|
{#await data}
|
|
<div
|
|
class="flex items-center justify-center gap-2 text-gray-600 max-w-full"
|
|
>
|
|
Solving...
|
|
{#if progress}
|
|
<span class="text-sm">
|
|
{progress.i} / {progress.n}
|
|
</span>
|
|
{/if}
|
|
</div>
|
|
{:then d}
|
|
<div
|
|
class="select-none rounded-lg border border-gray-500 shadow-sm max-w-full"
|
|
>
|
|
<table class="w-full text-left text-sm text-gray-700">
|
|
<thead class="divide-y divide-x bg-gray-800 text-xs text-gray-600">
|
|
<tr>
|
|
<th class="px-4 py-3" title="Rank the solver assigned"></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)")}
|
|
></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-x divide-gray-500">
|
|
{#each d.stats as s, i}
|
|
<tr
|
|
class="transition-colors hover:bg-gray-50"
|
|
onclick={() => {
|
|
if (insert_guess) {
|
|
insert_guess([...s.word]);
|
|
}
|
|
}}
|
|
>
|
|
<td class="px-4 py-3 font-bold">#{i + 1}</td>
|
|
<td class="px-4 py-3 font-bold">{s.word}</td>
|
|
<td class="px-4 py-3">
|
|
{(s.solution_probability * 100).toFixed(2) + "%"}
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
{s.expected_information_gained.toFixed(2)} bits
|
|
</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-400 bg-gray-800 p-4 text-red-400">
|
|
{e}
|
|
</div>
|
|
{/await}
|
|
|
|
<style>
|
|
.math-header :global(.katex) {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.math-header :global(.katex .mord) {
|
|
margin: 0;
|
|
}
|
|
</style>
|