Add new codes

package.json

@@ -44,6 +44,7 @@
     "bootstrap": "^5.3.0",
     "echarts": "^5.4.1",
     "echarts-wordcloud": "^2.0.0",
+    "howler": "^2.2.4",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "katex": "^0.16.0",
@@ -66,6 +67,7 @@
     "@angular/cli": "^16.1.4",
     "@angular/compiler-cli": "^16.1.4",
     "@types/echarts": "^4.9.16",
+    "@types/howler": "^2.2.11",
     "@types/jasmine": "^4.3.0",
     "@types/marked": "^4.0.8",
     "@types/node": "^18.14.0",

src/app/app.module.ts

@@ -15,7 +15,7 @@ import { NgxEchartsModule } from 'ngx-echarts';
 import * as echarts from 'echarts';
 import { NuMonacoEditorModule } from '@ng-util/monaco-editor';
 
-import { ODataService, QuizService, UIUtilityService, AuthGuardService, EnglishLearningService } from './services';
+import { ODataService, QuizService, UIUtilityService, AuthGuardService, EnglishLearningService, AudioService } from './services';
 import { environment } from 'src/environments/environment';
 import { NavItemFilterPipe } from './pipes';
 import { QuizFailureDailogComponent } from './pages/quiz-failure-dailog';
@@ -59,6 +59,7 @@ import { AuthConfigModule } from './auth/auth-config.module';
     UIUtilityService,
     QuizService,
     EnglishLearningService,
+    AudioService,
     AuthGuardService,
     {
       provide: TRANSLOCO_CONFIG,

src/app/pages/puzzle-game/typing-game/typing-game.component.html

@@ -1,3 +1,5 @@
-<div class="type-game">
-  <!-- <canvas id="type-game-canvas"></canvas> -->
+<div class="typing-container">
+  <span *ngFor="let echar of chararray">
+    {{echar.visible ? echar.letter : '_'}}
+  </span>
 </div>

src/app/pages/puzzle-game/typing-game/typing-game.component.scss

@@ -0,0 +1,7 @@
+.typing-container {
+    font-size: 72px;
+    display: flex;
+    justify-content: center;
+    height: 250px;
+    align-items: center;
+}

src/app/pages/puzzle-game/typing-game/typing-game.component.ts

@@ -8,27 +8,82 @@ import {
   Output,
   ViewChild,
 } from '@angular/core';
+import { AudioService } from 'src/app/services';
 
 export interface typingCompare {
   expected: string;
   inputted: string;
 }
 
+interface typingWord {
+  visible: boolean;
+  letter: string;
+}
+
 @Component({
   selector: 'khb-typing-game',
   templateUrl: './typing-game.component.html',
   styleUrls: ['./typing-game.component.scss'],
 })
 export class TypingGameComponent implements OnInit, AfterViewInit {
-  // @ViewChild('type-game-canvas', { static: true }) canvasTypeGame!: ElementRef;
+  srcstring = 'fighter';
+  private _arwords: typingWord[] = [];
+  private _keyidx = -1;
+
+  get chararray(): typingWord[] {
+    return this._arwords;
+  }
 
-  constructor() {
+  @HostListener('document:keyup', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    // if (event.key == 'Tab' && this.lastField == 'subject') {
+    //   var el: any = document.querySelectorAll('.ql-editor')
+
+    //   if (el && el.length == 1) {
+    //     el[0].focus();
+    //     this.lastField = 'body';
+    //   }
+    // }
+    console.log(event.key);
+    if (this._keyidx >= 0 && this._keyidx < this._arwords.length) {
+      if (event.key === 'Backspace') {
+        this._keyidx--;
+        if (this._keyidx >= 0) {
+          this._arwords[this._keyidx].visible = false;
+        } else {
+          this._keyidx = 0;
+        }
+      } else {
+        if (event.key === this._arwords[this._keyidx].letter) {
+          this._arwords[this._keyidx].visible = true;
+          this._keyidx++;
+        } else {
+          // Sending the error indicator.
+          this.audiosrv.playSound('beep.wav');
+        }
+      }
+    }
+  }
+
+  constructor(private audiosrv: AudioService) {
+    // Constructor
   }
 
   ngOnInit(): void {
+    // On Init.
+    const archars = this.srcstring.split('');
+    archars.forEach((val) => {
+      this._arwords.push({
+        visible: false,
+        letter: val,
+      });
+    });
   }
 
   ngAfterViewInit(): void {
+    // After view init.
+    if (this._arwords.length > 0) {
+      this._keyidx = 0;
+    }
   }
-
 }

src/app/services/audio-service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+
+import { AudioService } from './audio-service';
+
+describe('AudioService', () => {
+  let service: AudioService;
+
+  beforeEach(() => {
+    service = TestBed.inject(AudioService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/audio-service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { Howl, Howler } from 'howler';
+
+const TYPING_SOUND_URL = 'assets/typing/sounds/';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AudioService {
+    playSound(filename: string): void {
+        const path = TYPING_SOUND_URL + filename;
+        const sound = new Howl({
+            src: path,
+            format: ['wav'],
+        });
+        Howler.volume(1);
+        sound.play();
+    }
+}

src/app/services/index.ts

@@ -6,3 +6,4 @@ export * from './uiutility.service';
 export * from './auth-guard.service';
 export * from './auth.service';
 export * from './english-learning.service';
+export * from './audio-service';