adding a zoom view

src/components/Screen.vue

@@ -4,11 +4,14 @@
     <p id="typing-speed" v-if="timerRunning">{{ wordCount }}</p>
     <p v-else>{{ typingSpeed }} words / minute</p>
     <div id="prompt-screen">
+      <div id='prompt-zoom'>
+        <span v-for="(letter, index) in zoomLetters" :key="index">{{letter}}</span>
+      </div>
       <span v-for="(letter, index) in letters" :key="index" :class="getSpanClasses(index)">{{ letter }}</span>
     </div>
 
     <div id="user-input">
-      <input type="textarea" v-model='userText'>
+      <input type="textarea" v-model='userText' autofocus>
     </div>
   </div>
 </template>
@@ -22,7 +25,7 @@ export default {
     return {
       words: [],
       letters: [],
-      number: 50,
+      number: 2,
       userText: "",
       activeIndex: 0,
       isWrong: false,
@@ -100,6 +103,24 @@ export default {
       // Count number of spaces in correct text up to now.
       let correct = this.letters.join("").substring(0, this.cursor)
       return ((correct.match(/ /g) || []).length);
+    },
+    zoomLetters: function() {
+      let start = this.cursor - 5 < 0 ? 0 : this.cursor - 5
+      let end = this.cursor + 5 > this.letters.length ? this.letters.length : this.cursor + 5
+      let slice = this.letters.slice(start, end)
+      // Fix glitch as start : add padding to the buffer so the 6th element is the active letter
+      if(this.cursor < 5) {
+        while(slice.length < 10) {
+          slice.unshift(' ')
+        }
+      }
+      // Same at end of text
+      if(this.cursor >= (this.letters.length - 5)){
+        while(slice.length < 10) {
+          slice.push(' ')
+        }
+      }
+      return slice
     }
   },
   watch: {
@@ -128,7 +149,7 @@ export default {
 
 #prompt-screen {
   display: block;
-  font-size: 2em;
+  font-size: 1em;
   width: 50%;
   font-family: Arial, Helvetica, sans-serif;
   margin: auto;
@@ -150,10 +171,40 @@ span.wrong {
 #user-input > input {
   width: 500px;
   font-size: 2em;
+  border: solid blue 1px;
+  border-radius: 5px;
 }
 
 #timer {
   font-size: 2em;
   font-weight: bold;
 }
+
+#prompt-zoom {
+  font-size: 2em;
+  border: solid black 1px;
+  border-radius: 5px;
+  width: 30%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 50px;
+}
+
+#prompt-zoom > span:nth-child(1){
+  color: #666666;
+}
+
+#prompt-zoom > span:nth-child(2){
+  color: #404040;
+}
+
+/* 6th child is active */
+#prompt-zoom > span:nth-child(6){
+  background-color: yellow;
+}
+
+#prompt-zoom > span:last-of-type{
+  color: #666666;
+}
+
 </style>