diff --git a/src/components/Screen.vue b/src/components/Screen.vue
index 95dcc6e..98e1ace 100644
--- a/src/components/Screen.vue
+++ b/src/components/Screen.vue
@@ -4,11 +4,14 @@
{{ wordCount }}
{{ typingSpeed }} words / minute
+
+ {{letter}}
+
{{ letter }}
-
+
@@ -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;
+}
+