105 lines
2.8 KiB
Svelte
105 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { Color } from "wordle-solver";
|
|
|
|
let {
|
|
active = false,
|
|
cursor = $bindable(0),
|
|
letters = $bindable(["", "", "", "", ""]),
|
|
colors = $bindable([
|
|
Color.GREY,
|
|
Color.GREY,
|
|
Color.GREY,
|
|
Color.GREY,
|
|
Color.GREY,
|
|
]),
|
|
info_gained = null,
|
|
} = $props();
|
|
|
|
function handleKey(event: KeyboardEvent) {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
if (/^[a-zA-Z]$/.test(event.key)) {
|
|
letters[cursor] = event.key.toUpperCase();
|
|
|
|
if (cursor < 4) {
|
|
cursor++;
|
|
} else {
|
|
cursor = 0;
|
|
}
|
|
}
|
|
|
|
if (event.key === "Backspace") {
|
|
if (letters[cursor] === "" && cursor > 0) {
|
|
cursor--;
|
|
}
|
|
|
|
if (active) {
|
|
letters[cursor] = "";
|
|
}
|
|
}
|
|
|
|
if (event.key === "ArrowLeft") {
|
|
cursor = Math.max(0, cursor - 1);
|
|
}
|
|
|
|
if (event.key === "ArrowRight") {
|
|
cursor = Math.min(4, cursor + 1);
|
|
}
|
|
|
|
if (event.key === " ") {
|
|
colors[cursor] = (colors[cursor] + 1) % 3;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onkeydown={handleKey} />
|
|
|
|
<div class="flex justify-center gap-2">
|
|
{#each letters as letter, i}
|
|
<div
|
|
class="
|
|
flex h-16 w-16 items-center justify-center
|
|
rounded-lg border-2
|
|
text-3xl font-bold
|
|
transition-all
|
|
"
|
|
class:border-blue-500={i === cursor && active}
|
|
class:border-zinc-700={i !== cursor || !active}
|
|
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>
|
|
{/each}
|
|
<span
|
|
class="w-16 text-sm text-zinc-500 self-center flex items-center justify-center"
|
|
>
|
|
{#if info_gained === null}
|
|
↵
|
|
{:else}
|
|
{#await info_gained}
|
|
<div
|
|
class="size-3 animate-spin rounded-full border-2 border-gray-300 border-t-gray-700"
|
|
></div>
|
|
{:then i}
|
|
{i.info_gained.toFixed(2)} bits
|
|
{:catch e}
|
|
<span
|
|
title={e}
|
|
class="lex size-4 items-center justify-center rounded-full border border-red-500 text-[10px] font-bold text-red-500"
|
|
>!</span
|
|
>
|
|
{/await}
|
|
{/if}
|
|
</span>
|
|
</div>
|