[player] Refactor MathKeyboardComponent

- Rename NumbersKeyboardComponent to MathKeyboardComponent
- Decrease the number of input properties
- Split source code into private methods

projects/player/src/app/app.module.ts

@@ -21,7 +21,7 @@ import { IntersectionDetectionDirective } from './directives/intersection-detect
 import { KeyboardComponent } from './components/keyboard/keyboard.component';
 import { KeyComponent } from './components/key/key.component';
 import { FrenchKeyboardComponent } from './components/french-keyboard/french-keyboard.component';
-import { NumbersKeyboardComponent } from './components/numbers-keyboard/numbers-keyboard.component';
+import { MathKeyboardComponent } from './components/math-keyboard/math-keyboard.component';
 
 @NgModule({
   declarations: [
@@ -39,7 +39,7 @@ import { NumbersKeyboardComponent } from './components/numbers-keyboard/numbers-
     KeyboardComponent,
     KeyComponent,
     FrenchKeyboardComponent,
-    NumbersKeyboardComponent
+    MathKeyboardComponent
   ],
   imports: [
     BrowserModule,

projects/player/src/app/components/keyboard/keyboard.component.html

@@ -6,18 +6,21 @@
   <div class="keyboard-inner-container"
        (mousedown)="onMouseDown($event, true)">
     <app-french-keyboard *ngIf="preset === 'french'"></app-french-keyboard>
-    <app-numbers-keyboard *ngIf="preset === 'numbers'"
-                          [inputComponent]="inputComponent"
-                          [useComparisonOperators]="false"
-                          [showNumbersWithOperators]="false"></app-numbers-keyboard>
-    <app-numbers-keyboard *ngIf="preset === 'numbersAndOperators'"
-                          [inputComponent]="inputComponent"
-                          [useComparisonOperators]="false"
-                          [showNumbersWithOperators]="true"></app-numbers-keyboard>
-    <app-numbers-keyboard *ngIf="preset === 'comparisonOperators'"
-                          [inputComponent]="inputComponent"
-                          [useComparisonOperators]="true"
-                          [showNumbersWithOperators]="false"></app-numbers-keyboard>
+    <app-math-keyboard
+        *ngIf="preset === 'numbers'"
+        [inputComponent]="inputComponent"
+        [preset]="preset">
+    </app-math-keyboard>
+    <app-math-keyboard
+        *ngIf="preset === 'numbersAndOperators'"
+        [inputComponent]="inputComponent"
+        [preset]="preset">
+    </app-math-keyboard>
+    <app-math-keyboard
+        *ngIf="preset === 'comparisonOperators'"
+        [inputComponent]="inputComponent"
+        [preset]="preset">
+    </app-math-keyboard>
   </div>
 </div>
 

projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.html → projects/player/src/app/components/math-keyboard/math-keyboard.component.html

-<ng-container *ngTemplateOutlet="useComparisonOperators ? comparisonOperatorsTemplate : numbersTemplate"></ng-container>
+<ng-container *ngTemplateOutlet="preset === 'comparisonOperators' ?
+  comparisonOperatorsTemplate :
+  numbersTemplate">
+</ng-container>
 
 <ng-template #comparisonOperatorsTemplate>
   <div *ngFor="let row of comparisonOperators">
@@ -31,7 +34,7 @@
   </div>
 </ng-template>
 
-<div *ngIf="showNumbersWithOperators" class="grid-layout">
+<div *ngIf="preset === 'numbersAndOperators'" class="grid-layout">
   <ng-container *ngFor="let row of operators; let rowIndex = index ">
     <ng-container *ngFor="let key of row; let columnIndex = index">
       <app-key *ngIf="key !== '='"

projects/player/src/app/components/numbers-keyboard/numbers-keyboard.component.ts → projects/player/src/app/components/math-keyboard/math-keyboard.component.ts

@@ -2,13 +2,12 @@ import { AfterViewInit, Component, Input } from '@angular/core';
 import { KeyboardService } from '../../services/keyboard.service';
 
 @Component({
-  selector: 'app-numbers-keyboard',
-  templateUrl: './numbers-keyboard.component.html',
-  styleUrls: ['./numbers-keyboard.component.css']
+  selector: 'app-math-keyboard',
+  templateUrl: './math-keyboard.component.html',
+  styleUrls: ['./math-keyboard.component.css']
 })
-export class NumbersKeyboardComponent implements AfterViewInit {
-  @Input() useComparisonOperators!: boolean;
-  @Input() showNumbersWithOperators!: boolean;
+export class MathKeyboardComponent implements AfterViewInit {
+  @Input() preset!: 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' | 'none';
   @Input() inputComponent!: HTMLTextAreaElement | HTMLInputElement;
   allowedKeys!: string[];
 
@@ -33,25 +32,19 @@ export class NumbersKeyboardComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    if (this.useComparisonOperators) {
-      this.allowedKeys = this.comparisonOperators
-        .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue));
+    if (this.preset === 'comparisonOperators') {
+      this.allowedKeys = this.getAllowedKeys(this.comparisonOperators);
     } else {
-      this.allowedKeys = this.showNumbersWithOperators ?
-        this.operators
-          .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue)).concat(
-            this.numbers
-              .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue))
-          ) :
-        this.numbers
-          .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue));
-      if (this.inputComponent) {
-        this.inputComponent.addEventListener('keydown', this.restrict.bind(this));
-      }
+      this.allowedKeys = this.preset === 'numbersAndOperators' ?
+        this.getAllowedKeys(this.operators).concat(this.getAllowedKeys(this.numbers)) :
+        this.getAllowedKeys(this.numbers);
+    }
+    if (this.inputComponent) {
+      this.inputComponent.addEventListener('keydown', this.restrict.bind(this));
     }
   }
 
-  restrict(event: Event): void {
+  private restrict(event: Event): void {
     const keyboardEvent: KeyboardEvent = event as KeyboardEvent;
     if (!keyboardEvent ||
       (!this.allowedKeys.includes(keyboardEvent.key) && keyboardEvent.key !== 'Backspace')) {
@@ -59,4 +52,7 @@ export class NumbersKeyboardComponent implements AfterViewInit {
       event.stopPropagation();
     }
   }
+
+  private getAllowedKeys = (keys: string[][]): string[] => keys
+    .reduce((accumulator: string[], currentValue: string[]): string[] => accumulator.concat(currentValue));
 }