add underline for word errors

Author: k11q

components/InputDisplay.vue

@@ -9,7 +9,7 @@
       >
       <div>
         <template v-for="(word, index) in props.allData" :key="index">
-          <span v-if="word.index >= props.startDisplayIndex && word.index <= props.startDisplayIndex+40">
+          <span v-if="word.index >= props.startDisplayIndex && word.index <= props.startDisplayIndex+40" :class="`${word.status === 'error' ? 'underline decoration-red-500 underline-offset-8' : ''}`">
             <span
               v-for="(char, charIndex) in word.characters"
               :key="charIndex"

pages/index.vue

@@ -431,7 +431,7 @@ function isSpace(e: KeyboardEvent) {
 
 function handleSpace() {
 	const metadata = currentMetadata.value;
-
+	metadata.currentWordMetadata.status = getWordStatus()
 	insertWord(metadata.currentWord);
 	pushWordLogs();
 	currentWordNum.value += 2;
@@ -851,6 +851,7 @@ function setShowResults() {
 
 function handleEndWord() {
 	const metadata = currentMetadata.value;
+	metadata.currentWordMetadata.status = getWordStatus()
 	if (metadata.currentWordMetadata.type === 'word') {
 		insertWord(metadata.currentWord);
 		pushWordLogs();
@@ -905,16 +906,6 @@ function pushWordLogs() {
 			1000
 		);
 	}
-	function getWordStatus(): WordLogStatus {
-		for (let i = 0; i < wordLength; i++) {
-			if (
-				currentMetadata.value.currentWordMetadata
-					.characters[i].status !== 'correct'
-			)
-				return 'error';
-		}
-		return 'correct';
-	}
 	function getWordWpm(): number {
 		return parseFloat(
 			(wordLength / 5 / (duration / 60)).toFixed(2)
@@ -936,6 +927,18 @@ function pushWordLogs() {
 	}
 }
 
+function getWordStatus(): WordLogStatus {
+		const wordLength = currentMetadata.value.currentWordLength
+		for (let i = 0; i < wordLength; i++) {
+			if (
+				currentMetadata.value.currentWordMetadata
+					.characters[i].status !== 'correct'
+			)
+				return 'error';
+		}
+		return 'correct';
+	}
+
 function insertWord(word: string) {
 	collectedWords.push(word);
 }

types/index.ts

@@ -62,7 +62,7 @@ type WordMetadata = {
 	index: number;
 	end_time?: string;
 	start_time?: string;
-	status?: CharLogStatus;
+	status?: WordLogStatus;
 	duration?: number;
 	wpm?: number;
 };