diff --git a/web/src/components/WordleLine.svelte b/web/src/components/WordleLine.svelte index 12d4c87..414206c 100644 --- a/web/src/components/WordleLine.svelte +++ b/web/src/components/WordleLine.svelte @@ -37,8 +37,9 @@ if (event.key === "Backspace") { if (letters[cursor] === "" && cursor > 0) { - cursor--; - inputs[cursor].focus(); + const nc = cursor - 1; + inputs[nc].focus(); // Focusing / bluring resets cursor temporarily + cursor = nc; } if (active) { @@ -47,13 +48,15 @@ } if (event.key === "ArrowLeft") { - cursor = Math.max(0, cursor - 1); - inputs[cursor].focus(); + const nc = Math.max(0, cursor - 1); + inputs[nc].focus(); + cursor = nc; } if (event.key === "ArrowRight") { - cursor = Math.min(4, cursor + 1); - inputs[cursor].focus(); + const nc = Math.min(4, cursor + 1); + inputs[nc].focus(); + cursor = nc; } if (event.key === " ") { @@ -83,6 +86,9 @@ class:bg-green-600={colors[i] === Color.GREEN} class:bg-yellow-600={colors[i] === Color.YELLOW} class:bg-grey-600={colors[i] === Color.GREY} + onblur={() => { + cursor = -1; + }} onbeforeinput={(event) => { if (event.inputType === "insertText") { event.preventDefault(); @@ -90,12 +96,14 @@ if (/^[a-zA-Z]$/.test(key)) { letters[i] = key.toUpperCase(); - if (cursor < 4) { - cursor++; + let nc = cursor; + if (nc < 4) { + nc++; } else { - cursor = 0; + nc = 0; } - inputs[cursor].focus(); + inputs[nc].focus(); + cursor = nc; } } }}