Fixed chrome mobile bug and styles, enabled Delete key, fixed a bug r…

…elated to replaying the test

package.json

@@ -28,7 +28,7 @@
     "@angular/platform-browser-dynamic": "~11.0.1",
     "@angular/router": "~11.0.1",
     "ngx-countdown": "^11.0.0",
-    "ngx-span-of-strings": "0.0.2",
+    "ngx-span-of-strings": "0.0.3",
     "rxjs": "~6.6.0",
     "sweetalert2": "^10.10.1",
     "tslib": "^2.0.0",

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ const routes: Routes = [
     redirectTo: '/home',
     pathMatch: 'full',
   },
+  { path: '**', redirectTo: '' },
 ];
 
 @NgModule({

src/app/pages/home/home.component.scss

@@ -6,8 +6,9 @@
 }
 
 .typing-form {
-  min-width: 700px;
+  min-width: min(700px, 100vw);
   width: 100%;
+  margin: 5px;
 }
 
 .typing-full-width {
@@ -27,4 +28,10 @@
 
 .count-down {
   font-size: 48px;
+}
+
+@media only screen and (max-width: 600px) {
+  .container {
+    margin: 5px;
+  }
 }

src/app/pages/home/home.component.ts

@@ -34,7 +34,7 @@ export class HomeComponent implements OnInit {
   showStartButton = true;
   currentWordIndex = 0;
   currentTypingWord = '';
-  spaceKeyEntered = true;
+  spaceKeyEntered = false;
   typedText = new FormControl('');
   paragraphElements: any = [];
 
@@ -70,37 +70,41 @@ export class HomeComponent implements OnInit {
     this.showStartButton = false;
   }
   calculateScore(): number {
-    const inputText = this.typedText.value;
+    const inputText = this.typedText.value.trim();
     let score = 0;
     inputText.split(' ').forEach((word: string, index: number) => {
       const expectedWord = this.stringArr[index].trim();
       const didWordsMatch = expectedWord === word;
       // Uncomment for logging purpose
-      // console.log(
-      //   `expectedWord: ${expectedWord} realWord: ${word} didWordsMatch: ${didWordsMatch}`
-      // );
+      console.log(
+        `expectedWord: ${expectedWord} realWord: ${word} didWordsMatch: ${didWordsMatch}`
+      );
       if (didWordsMatch) {
         score += 10;
       } else {
-        score -= 10;
+        score -= 5;
       }
     });
     return score;
   }
   onInputKeyDown(ev: KeyboardEvent): void {
-    const isSpaceKey = ev.code === 'Space';
-    const isDeleteKey = ev.code === 'Backspace';
-    if (isDeleteKey) {
-      // Don't allow backspace key
+    const isSpaceKey = ev.which === 32;
+
+    if (this.spaceKeyEntered && isSpaceKey) {
+      // Do not allow the next space key
       ev.preventDefault();
       ev.stopPropagation();
     } else if (isSpaceKey) {
       // if Space key then highlight the next word
-      this.currentWordIndex += 1;
+      this.spaceKeyEntered = true;
+      this.currentWordIndex = this.typedText.value.split(' ').length - 1;
       this.paragraphElements[this.currentWordIndex].scrollIntoView({
         behaviour: 'smooth',
         block: 'center',
       });
+    } else {
+      this.currentWordIndex = this.typedText.value.split(' ').length - 1;
+      this.spaceKeyEntered = false;
     }
     // if there are fewer than 50 new words then repeat the words again.
     if (this.paragraphElements.length - this.currentWordIndex < 50) {
@@ -110,7 +114,7 @@ export class HomeComponent implements OnInit {
   resetTest(): void {
     this.showStartButton = true;
     this.typedText.enable();
-    this.typedText.reset();
+    this.typedText.reset('');
     this.score = 0;
     this.currentWordIndex = 0;
     this.stringArr = [];