diff --git a/frontend/src/lib/components/tests/typingbox.svelte b/frontend/src/lib/components/tests/typingbox.svelte index e9ed210f533ae47e8b871b29ec4f2268a4e5f8fb..fd6b5d5560dfd2b04b4a3cacfeed0360584a6918 100644 --- a/frontend/src/lib/components/tests/typingbox.svelte +++ b/frontend/src/lib/components/tests/typingbox.svelte @@ -15,12 +15,14 @@ keyCode: number; keyValue: string; }[]; - let duration = initialDuration >= 0 ? initialDuration : 0; export let inProgress = false; + export let onFinish: Function; + let duration = initialDuration >= 0 ? initialDuration : 0; let lastInput = ''; let input = ''; let textArea: HTMLTextAreaElement; let startTime = new Date().getTime(); + let isDone = false; onMount(async () => { textArea.focus(); @@ -34,6 +36,8 @@ if ((duration <= 0 && initialDuration > 0) || !inProgress) { clearInterval(interval); inProgress = false; + isDone = true; + onFinish(); } }, 1000); } @@ -70,7 +74,11 @@ </button> {/each} </ul> - <div class="relative border-2 rounded-b-lg text-xl select-none"> + <div + class="relative border-2 rounded-b-lg text-xl select-none" + class:border-green-500={isDone} + class:bg-green-100={isDone} + > <div class="font-mono p-4 break-words"> <span class="text-inherit p-0 m-0 whitespace-pre-wrap break-words" ><!-- @@ -93,11 +101,7 @@ bind:value={input} bind:this={textArea} spellcheck="false" - disabled={!inProgress && - duration <= 0 && - initialDuration >= 0 && - duration >= 0 && - initialDuration < 0} + disabled={isDone} on:keyup={(e) => { if (inProgress) { data[data.length - 1].uptime = new Date().getTime() - startTime; diff --git a/frontend/src/lib/components/tests/typingtest.svelte b/frontend/src/lib/components/tests/typingtest.svelte index 6dd810fc6a72eea570b6c44c0875ecac72c2e37e..4c802341a54502dd4fddde12bc8aaebd926999ad 100644 --- a/frontend/src/lib/components/tests/typingtest.svelte +++ b/frontend/src/lib/components/tests/typingtest.svelte @@ -57,6 +57,12 @@ text={exercices[i].text} bind:data bind:inProgress + onFinish={() => { + inProgress = false; + setTimeout(() => { + currentExercice++; + }, 3000); + }} /> {/if} {/each}