159 lines
4.7 KiB
Svelte
159 lines
4.7 KiB
Svelte
<script lang="ts">
|
|
import { Color } from "wordle-solver";
|
|
import type { GuessResult } from "../solver/types";
|
|
|
|
let {
|
|
active = false,
|
|
cursor = $bindable(0),
|
|
letters = $bindable(["", "", "", "", ""]),
|
|
colors = $bindable([
|
|
Color.GREY,
|
|
Color.GREY,
|
|
Color.GREY,
|
|
Color.GREY,
|
|
Color.GREY,
|
|
]),
|
|
info_gained = null,
|
|
on_guess_pressed = null,
|
|
}: {
|
|
active: boolean;
|
|
cursor: number;
|
|
letters: string[];
|
|
colors: Color[];
|
|
info_gained: Promise<GuessResult> | null;
|
|
on_guess_pressed: (() => void) | null;
|
|
} = $props();
|
|
|
|
let invalid: boolean = $state(false);
|
|
let inputs: HTMLInputElement[] = $state([]);
|
|
let info_gained_wrapped: Promise<GuessResult> | null = $state(null);
|
|
|
|
$effect(() => {
|
|
if (info_gained) {
|
|
info_gained_wrapped = info_gained.catch((e) => {
|
|
invalid = true;
|
|
throw e;
|
|
});
|
|
} else {
|
|
info_gained_wrapped = null;
|
|
}
|
|
});
|
|
|
|
export function focus() {
|
|
inputs[cursor].focus();
|
|
}
|
|
|
|
function handleKey(event: KeyboardEvent) {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
|
|
if (event.key === "Backspace") {
|
|
if (letters[cursor] === "" && cursor > 0) {
|
|
const nc = cursor - 1;
|
|
inputs[nc].focus(); // Focusing / bluring resets cursor temporarily
|
|
cursor = nc;
|
|
}
|
|
|
|
if (active) {
|
|
letters[cursor] = "";
|
|
}
|
|
}
|
|
|
|
if (event.key === "ArrowLeft") {
|
|
const nc = Math.max(0, cursor - 1);
|
|
inputs[nc].focus();
|
|
cursor = nc;
|
|
}
|
|
|
|
if (event.key === "ArrowRight") {
|
|
const nc = Math.min(4, cursor + 1);
|
|
inputs[nc].focus();
|
|
cursor = nc;
|
|
}
|
|
|
|
if (event.key === " ") {
|
|
colors[cursor] = (colors[cursor] + 1) % 3;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:window onkeydown={handleKey} />
|
|
|
|
<div class="flex justify-center gap-2">
|
|
{#each letters as _, i}
|
|
<input
|
|
disabled={!active}
|
|
tabindex="-1"
|
|
class="
|
|
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
|
|
focus:outline-none
|
|
"
|
|
bind:this={inputs[i]}
|
|
bind:value={letters[i]}
|
|
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}
|
|
class:opacity-20={invalid}
|
|
onblur={() => {
|
|
cursor = -1;
|
|
}}
|
|
onbeforeinput={(event) => {
|
|
if (event.inputType === "insertText") {
|
|
event.preventDefault();
|
|
let key = event.data ?? "";
|
|
|
|
if (/^[a-zA-Z]$/.test(key)) {
|
|
letters[i] = key.toUpperCase();
|
|
let nc = cursor;
|
|
if (nc < 4) {
|
|
nc++;
|
|
} else {
|
|
nc = 0;
|
|
}
|
|
inputs[nc].focus();
|
|
cursor = nc;
|
|
}
|
|
}
|
|
}}
|
|
onclick={() => {
|
|
if (!active) {
|
|
return;
|
|
}
|
|
if (cursor === i) {
|
|
colors[cursor] = (colors[cursor] + 1) % 3;
|
|
} else {
|
|
cursor = i;
|
|
}
|
|
}}
|
|
/>
|
|
{/each}
|
|
<span
|
|
class="max-w-14 w-1/6 text-sm text-zinc-500 self-center flex items-center justify-center"
|
|
onclick={info_gained === null ? on_guess_pressed : null}
|
|
>
|
|
{#if info_gained_wrapped === null}
|
|
↵
|
|
{:else}
|
|
{#await info_gained_wrapped}
|
|
<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>
|