From 567f85f5f3552dbf79fb285341f7deef28c5be7a Mon Sep 17 00:00:00 2001
From: theo1 <theo@framasoft.org>
Date: Thu, 4 Feb 2021 19:40:44 +0100
Subject: [PATCH] adding .wrong css class to display errors

---
 src/components/Screen.vue | 36 +++++++++++++++++++++++++++++++-----
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/components/Screen.vue b/src/components/Screen.vue
index 32e81cc..196a13e 100644
--- a/src/components/Screen.vue
+++ b/src/components/Screen.vue
@@ -1,7 +1,7 @@
 <template>
   <div class='container'>
     <div id="prompt-screen">
-      <span v-for="(letter, index) in letters" :key="index" :class="[isActive(index) ? 'active' : '']">{{ letter }}</span>
+      <span v-for="(letter, index) in letters" :key="index" :class="getSpanClasses(index)">{{ letter }}</span>
     </div>
 
     <div id="user-input">
@@ -21,7 +21,8 @@ export default {
       letters: [],
       number: 50,
       userText: "",
-      activeIndex: 0
+      activeIndex: 0,
+      isWrong: false
     }
   },
   async mounted() {
@@ -44,16 +45,37 @@ export default {
     compareStrings(a, b) {
       let count = 0
       a.split("").forEach((aLetter, index) => {
-        if(b.split("")[index] != aLetter) { return count}
+        if(b.split("")[index] != aLetter) {
+          this.setWrong()
+          return count
+        }
         count ++
       })
       return count
+    },
+    getSpanClasses(index) {
+      let classes = ""
+      if(index === this.cursor) {
+        classes += "active"
+        if(this.isWrong) classes += " wrong"
+      }
+      return classes
+    },
+    setWrong() {
+      if(!this.isWrong) this.isWrong = true
+    },
+    setNotWrong() {
+      if(this.isWrong) this.isWrong = false
     }
   },
   computed: {
     cursor() {
-      return this.compareStrings(this.userText, this.letters.join(""))
-    }
+      let c = this.compareStrings(this.userText, this.letters.join(""))
+      if(c == this.userText.length) {
+        this.setNotWrong()
+      }
+      return c
+    },
   }
 }
 
@@ -86,4 +108,8 @@ span.active {
   width: 500px;
   font-size: 2em;
 }
+
+span.wrong {
+  background-color: red;
+}
 </style>