feat: use symbol to represent space key

andy23512 · May 11, 2024 · a865e2a · a865e2a
1 parent 5a85057
commit a865e2a
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/app/pages/home-page/home-page.component.html b/src/app/pages/home-page/home-page.component.html
@@ -40,8 +40,8 @@ <h1 class="mb-0 text-4xl text-alnitak-500">Alnitak</h1>
     <span>An unofficial CharaChorder One Practice Tool</span>
   </header>
   <span
-    >Use <kbd>Space</kbd> key to enter the first lesson, or select a lesson from
-    the side menu.</span
+    >Use <kbd [innerHTML]="'space' | hotkeysShortcut"></kbd> key to enter the
+    first lesson, or select a lesson from the side menu.</span
   >
   <div>
     <a

diff --git a/src/app/pages/home-page/home-page.component.ts b/src/app/pages/home-page/home-page.component.ts
@@ -8,15 +8,22 @@ import {
 import { MatButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { Router, RouterLink } from '@angular/router';
-import { HotkeysService } from '@ngneat/hotkeys';
+import { HotkeysService, HotkeysShortcutPipe } from '@ngneat/hotkeys';
 import { SwitchComponent } from 'src/app/components/switch/switch.component';
 import { CharaChorderOneLayer } from 'src/app/models/device-layout.models';
 import { pickRandomItem } from 'src/app/utils/random.utils';
 
 @Component({
   selector: 'app-home-page',
   standalone: true,
-  imports: [CommonModule, MatButton, MatIcon, RouterLink, SwitchComponent],
+  imports: [
+    CommonModule,
+    MatButton,
+    MatIcon,
+    RouterLink,
+    SwitchComponent,
+    HotkeysShortcutPipe,
+  ],
   templateUrl: './home-page.component.html',
   styleUrl: './home-page.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/src/app/pages/lesson-page/lesson-page.component.html b/src/app/pages/lesson-page/lesson-page.component.html
@@ -38,7 +38,7 @@
       (click)="startLesson()"
     >
       <mat-icon class="scale-125 text-white">play_arrow</mat-icon> Start /
-      Resume <kbd>Space</kbd>
+      Resume <kbd [innerHTML]="'space' | hotkeysShortcut"></kbd>
     </div>
   </div>
   <a