Adding keyboard based input

IHTSDO · Feb 8, 2024 · 9170568 · 9170568
1 parent 1d5a663
commit 9170568
Show file tree

Hide file tree

Showing 10 changed files with 121 additions and 16 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -26,6 +26,6 @@
 <style>html,body{height:100%}body{margin:0;font-family:Roboto,Helvetica Neue,sans-serif}</style><link rel="stylesheet" href="styles.25b54d3c54f3517b.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.25b54d3c54f3517b.css"></noscript></head>
 <body class="mat-typography">
   <app-root></app-root>
-<script src="runtime.c2d2548033d65b02.js" type="module"></script><script src="polyfills.75186c7b7fc1d123.js" type="module"></script><script src="scripts.a1e2309b4257c7b3.js" defer></script><script src="main.a30ac8457d89a87f.js" type="module"></script>
+<script src="runtime.c2d2548033d65b02.js" type="module"></script><script src="polyfills.75186c7b7fc1d123.js" type="module"></script><script src="scripts.a1e2309b4257c7b3.js" defer></script><script src="main.4bdcf6bb37ae3747.js" type="module"></script>
 
 </body></html>
diff --git a/docs/main.a30ac8457d89a87f.js → docs/main.4bdcf6bb37ae3747.js b/docs/main.a30ac8457d89a87f.js → docs/main.4bdcf6bb37ae3747.js
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -57,6 +57,7 @@ import { ConfirmationDialogComponent } from './questionnaires/confirmation-dialo
 import { IntegerBindingComponent } from './bindings/integer-binding/integer-binding.component';
 import { DecimalBindingComponent } from './bindings/decimal-binding/decimal-binding.component';
 import { SnoguessMainComponent } from './game/snoguess-main/snoguess-main.component';
+import { KeyboardComponent } from './game/keyboard/keyboard.component';
 
 @NgModule({
   declarations: [
@@ -84,7 +85,8 @@ import { SnoguessMainComponent } from './game/snoguess-main/snoguess-main.compon
     ConfirmationDialogComponent,
     IntegerBindingComponent,
     DecimalBindingComponent,
-    SnoguessMainComponent
+    SnoguessMainComponent,
+    KeyboardComponent
   ],
   imports: [
     HttpClientModule,

diff --git a/src/app/game/keyboard/keyboard.component.css b/src/app/game/keyboard/keyboard.component.css
@@ -0,0 +1,31 @@
+.keyboard-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .keyboard-row {
+    display: flex;
+    justify-content: center;
+    margin: 5px;
+  }
+
+  button {
+    margin: 2px;
+    padding: 10px 15px; /* Adjust padding to ensure keys are comfortably sized */
+    border-radius: 8px; /* This adds rounded corners to your buttons */
+    border: 1px solid #000; /* Optional: Adds a border around the buttons */
+    transition: background-color 0.3s ease; /* Optional: Adds a smooth transition for color changes */
+  }
+
+  button.guessed-correct {
+    background-color: green;
+    color: white;
+  }
+
+  button.guessed-wrong {
+    background-color: red;
+    color: white;
+  }
+
+
diff --git a/src/app/game/keyboard/keyboard.component.html b/src/app/game/keyboard/keyboard.component.html
@@ -0,0 +1,12 @@
+<div class="keyboard-container">
+    <div *ngFor="let row of keyboardLayout" class="keyboard-row">
+      <button mat-button *ngFor="let key of row"
+              [class.guessed-correct]="guessedLetters[key] === 'correct'"
+              [class.guessed-wrong]="guessedLetters[key] === 'wrong'"
+              (click)="guessLetter(key)"
+              [disabled]="isLetterGuessed(key)">
+        {{ key }}
+      </button>
+    </div>
+  </div>
+
diff --git a/src/app/game/keyboard/keyboard.component.ts b/src/app/game/keyboard/keyboard.component.ts
@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+
+@Component({
+  selector: 'app-keyboard',
+  templateUrl: './keyboard.component.html',
+  styleUrls: ['./keyboard.component.css']
+})
+export class KeyboardComponent {
+  keyboardLayout = [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+    ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
+    ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
+    ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
+  ];
+
+  guessedLetters: { [key: string]: 'correct' | 'wrong' } = {};
+
+  @Output() letterGuessed = new EventEmitter<string>();
+
+  addGuessedLetter(letter: string, reslt: boolean) {
+    this.guessedLetters[letter] = reslt ? 'correct' : 'wrong';
+  }
+
+  guessLetter(letter: string) {
+    this.letterGuessed.emit(letter);
+  }
+
+  isLetterGuessed(letter: string): boolean {
+    return letter in this.guessedLetters;
+  }
+
+  markLetterAsGuessed(letter: string, status: 'correct' | 'wrong') {
+    this.guessedLetters[letter] = status;
+  }
+
+  reset() {
+    this.guessedLetters = {};
+  }
+}
diff --git a/src/app/game/service/snoguess.service.ts b/src/app/game/service/snoguess.service.ts
@@ -48,7 +48,7 @@ export class SnoguessService {
 
   randomLimit: number = 4000;
 
-  @Output() guessResult: EventEmitter<boolean> = new EventEmitter();
+  @Output() guessResult: EventEmitter<any> = new EventEmitter();
   @Output() termResult: EventEmitter<boolean> = new EventEmitter();
 
   constructor(private terminologyService: TerminologyService) {
@@ -58,9 +58,6 @@ export class SnoguessService {
 
   async getRandomConcept(reset?: boolean) {
     // Do nothing if game state is not playing
-    if (this.game.value.state != 'playing') {
-      return;
-    }
     this.game.next({ ...this.game.value, state: 'loading', score: reset ? 0 : this.game.value.score });
     const randomIndex = Math.floor(Math.random() * this.randomLimit) + 1;
     const response = await lastValueFrom(
@@ -243,14 +240,15 @@ export class SnoguessService {
     });
 
     if (!found) {
-      this.guessResult.emit(false); // Emit false for incorrect guesses
+      this.guessResult.emit({ letter: letter, result: false }); // Emit false for incorrect guesses
       newState.hitPoints -= 1;
       // Check if the game is lost
       if (newState.hitPoints <= 0) {
         newState.hitPoints = 0; // Ensure hit points don't go negative
         newState.state = 'gameOver'; // Update the state to 'gameOver'
       }
     } else {
+      this.guessResult.emit({ letter: letter, result: true });
       // Check if the term was guessed by verifying if there are no more '_' characters before the semantic tag
       const isTermGessed = newState.displayTerm.slice(0, semanticTagIndex).indexOf('_') === -1;
       if (isTermGessed && newState.state === 'playing') {

diff --git a/src/app/game/snoguess-main/snoguess-main.component.css b/src/app/game/snoguess-main/snoguess-main.component.css
@@ -22,6 +22,7 @@
   .hit-points {
     font-weight: bold;
     color: #d9534f; /* Red color to indicate the importance of hit points */
+    text-align: center;
   }
 
   /* Input and button styling */
@@ -36,8 +37,9 @@
 
   .guess-field {
     display: flex; 
-    align-items: flex-start;
+    align-items: center;
     vertical-align: middle;
+    justify-content: center;
     gap: 10px;
   }
 
@@ -265,4 +267,10 @@
     color: #666; /* Lighter text for hints */
     font-size: 1.2rem; /* Adjust font size as needed */
   }
-
+
+  .guess-message {
+    text-align: center;
+    margin-top: 1rem;
+    font-size: 1.2rem;
+  }
+
diff --git a/src/app/game/snoguess-main/snoguess-main.component.html b/src/app/game/snoguess-main/snoguess-main.component.html
@@ -26,7 +26,7 @@ <h2>Guess the SNOMED Term</h2>
 
 
   <div>
-    <div class="guess-field">
+    <!-- <div class="guess-field">
       <mat-form-field appearance="fill" [@shake]="shakeState">
         <mat-label>Guess a letter</mat-label>
         <input matInput #letterInput maxlength="1" (input)="letterInput.value = letterInput.value.slice(0, 1)" 
@@ -36,8 +36,13 @@ <h2>Guess the SNOMED Term</h2>
       <button mat-flat-button color="accent" 
         (click)="letterInput.value ? guessLetter(letterInput.value) : null; letterInput.value=''" 
         [disabled]="gameState.state !== 'playing' || !letterInput.value">Guess</button>
-    </div>
-
+    </div> -->
+
+    <p class="guess-message">Click the keys to guess the letters of the term!</p>
+    <div [@shake]="shakeState">
+      <app-keyboard #keyboard (letterGuessed)="guessLetter($event)"></app-keyboard>
+    </div>  
+
       <!-- <div class="guess-field">
         <mat-form-field appearance="fill">
           <mat-label>Guess the full term</mat-label>

diff --git a/src/app/game/snoguess-main/snoguess-main.component.ts b/src/app/game/snoguess-main/snoguess-main.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit } from "@angular/core";
+import { Component, OnInit, ViewChild } from "@angular/core";
 import { Observable } from "rxjs";
 import { Game, SnoguessService } from "../service/snoguess.service";
 import { trigger, state, style, transition, animate, keyframes } from "@angular/animations";
+import { KeyboardComponent } from "../keyboard/keyboard.component";
 
 @Component({
   selector: 'app-snoguess-main',
@@ -43,6 +44,10 @@ import { trigger, state, style, transition, animate, keyframes } from "@angular/
 })
 
 export class SnoguessMainComponent implements OnInit {
+
+  // add viewchild for #keyboard
+  @ViewChild('keyboard') keyboard!: KeyboardComponent;
+
   game!: Observable<Game>;
   shakeState = 'normal';
   termGuessed = false;
@@ -54,16 +59,20 @@ export class SnoguessMainComponent implements OnInit {
     this.game = this.snoguessMainService.getGameState();
     this.goals = this.snoguessMainService.goals;
     this.initialize();
-    this.snoguessMainService.guessResult.subscribe((isCorrect: boolean) => {
-      if (!isCorrect) {
+    this.snoguessMainService.guessResult.subscribe((guess: any) => {
+      if (guess.result === false) {
+        this.keyboard.addGuessedLetter(guess.letter, false);
         this.shakeState = 'shake';
         // Ensure we only shake once per guess
         setTimeout(() => this.shakeState = 'normal', 200);
+      } else {
+        this.keyboard.addGuessedLetter(guess.letter, true);
       }
     });
 
     this.snoguessMainService.termResult.subscribe((result: boolean) => {
       if (result) {
+        this.keyboard.reset();
         this.termGuessed = true;
         setTimeout(() => {
           this.termGuessed = false;
@@ -73,6 +82,7 @@ export class SnoguessMainComponent implements OnInit {
   }
 
   initialize(): void {
+    if (this.keyboard) this.keyboard.reset();
     this.snoguessMainService.getRandomConcept(true);
   }