From efc12d5726b3e6f581de7bf4b42fccbc3cd06ec0 Mon Sep 17 00:00:00 2001
From: Brieuc Dubois <git@bhasher.com>
Date: Tue, 19 Mar 2024 14:21:21 +0100
Subject: [PATCH] frontend: typing test with errors
---
frontend/src/routes/tests/typing/+page.svelte | 18 ++++++++++++++----
1 file changed, 14 insertions(+), 4 deletions(-)
diff --git a/frontend/src/routes/tests/typing/+page.svelte b/frontend/src/routes/tests/typing/+page.svelte
index 1449544e..be367955 100644
--- a/frontend/src/routes/tests/typing/+page.svelte
+++ b/frontend/src/routes/tests/typing/+page.svelte
@@ -53,8 +53,17 @@
</div>
</div>
<div class="relative border-2 rounded text-xl select-none">
- <div class="text-gray-400 font-mono p-4">
- {text}
+ <div class="font-mono p-4">
+ <span class="text-inherit p-0 m-0 whitespace-pre-wrap"
+ ><!--
+ -->{#each text.slice(0, input.length) as char, i}<!--
+ --><span
+ class="text-gray-800 p-0 m-0"
+ class:text-red-500={char !== input[i]}>{input[i]}</span
+ ><!--
+ -->{/each}<!--
+ --></span
+ ><span class="text-gray-400 p-0 m-0">{text.slice(input.length)}</span>
</div>
<textarea
bind:value={input}
@@ -64,13 +73,14 @@
if (!inProgress && duration > 0) {
start();
}
- if (inProgress && text.toLowerCase().startsWith(input.toLowerCase())) {
+ if (inProgress) {
+ // && text.toLowerCase().startsWith(input.toLowerCase())) {
lastInput = input;
} else {
input = lastInput;
}
}}
- class="absolute top-0 resize-none font-mono p-4 w-full h-full bg-transparent select-none"
+ class="absolute top-0 resize-none font-mono p-4 w-full h-full bg-transparent select-none text-transparent"
/>
</div>
--
GitLab