Better typeahead + romaji support

package.json

@@ -18,8 +18,10 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "ngx-typeahead": "^18.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
+    "wanakana": "^5.3.1",
     "zone.js": "~0.14.10"
   },
   "devDependencies": {

src/components/main/main.component.css

@@ -0,0 +1,7 @@
+form {
+  overflow: unset;
+}
+
+::ng-deep .ta-item {
+  background: var(--contrast);
+}

src/components/main/main.component.html

@@ -14,20 +14,17 @@
     <legend>Song information</legend>
     <label class="width">
       Title
-      <input type="search" list="songList" name="songTitle" formControlName="title">
-      <datalist id="songList">
-        @for (song of songs; track song.id) {
-          <option [value]="song.title">{{ song.title }}</option>
-        }
-      </datalist>
+      <input type="text" autocomplete="off" name="songTitle" formControlName="title" ngxTypeahead [taList]="songs"
+             taListItemLabel="label" [taListItemField]="['title', 'romajiTitle']" (taSelected)="onSelectedSong($event)"
+             [value]="selectedSong?.title">
     </label>
     @if (selectedSong) {
       <fieldset class="flex space-around">
         <legend>Difficulty</legend>
-        @for (chart of selectedSongCharts; track chart.difficulty){
+        @for (chart of selectedSongCharts; track chart.difficulty) {
           <label>
             <input type="radio" [value]="chart.difficulty" formControlName="difficulty">
-            {{chart.difficulty}} ({{chart.level}})
+            {{ chart.difficulty }} ({{ chart.level }})
           </label>
         }
       </fieldset>
@@ -104,7 +101,7 @@
   </fieldset>
 </form>
 
-@if(scores.length){
+@if (scores.length) {
   <h1>Summary</h1>
   <table>
     <thead>
@@ -118,21 +115,21 @@ <h1>Summary</h1>
     </tr>
     </thead>
     <tbody>
-      @for(score of scores; track $index){
+      @for (score of scores; track $index) {
         <tr>
-          <td>{{getSongTitle(score.identifier)}}</td>
-          <td>{{score.difficulty}} ({{getChartLevel(score.identifier, score.difficulty)}})</td>
-          <td>{{score.score}}</td>
-          <td>{{score.lamp}}</td>
-          <td>{{score.optional?.flare}}</td>
+          <td>{{ getSongTitle(score.identifier) }}</td>
+          <td>{{ score.difficulty }} ({{ getChartLevel(score.identifier, score.difficulty) }})</td>
+          <td>{{ score.score }}</td>
+          <td>{{ score.lamp }}</td>
+          <td>{{ score.optional?.flare }}</td>
           <td>
-            @if(!!score.judgements){
-              <span class="success">{{score.judgements.MARVELOUS}}</span> -
-              <span class="attention">{{score.judgements.PERFECT}}</span> -
-              <span class="severe">{{score.judgements.GREAT}}</span> -
-              <span class="accent">{{score.judgements.GOOD}}</span> -
-              <span class="default">{{score.judgements.OK}}</span> -
-              <span class="danger">{{score.judgements.MISS}}</span>
+            @if (!!score.judgements) {
+              <span class="success">{{ score.judgements.MARVELOUS }}</span> -
+              <span class="attention">{{ score.judgements.PERFECT }}</span> -
+              <span class="severe">{{ score.judgements.GREAT }}</span> -
+              <span class="accent">{{ score.judgements.GOOD }}</span> -
+              <span class="default">{{ score.judgements.OK }}</span> -
+              <span class="danger">{{ score.judgements.MISS }}</span>
             }
           </td>
         </tr>

src/components/main/main.component.ts

@@ -5,12 +5,15 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/
 import {Chart} from "../../model/Chart";
 import {Score, TachiImport} from "../../model/TachiImport";
 import {pairwise, startWith} from "rxjs";
+import {isRomaji, tokenize, toRomaji} from "wanakana";
+import {NgxTypeAheadComponent} from "ngx-typeahead";
 
 @Component({
   selector: 'app-main',
   standalone: true,
   imports: [
     ReactiveFormsModule,
+    NgxTypeAheadComponent,
   ],
   templateUrl: './main.component.html',
   styleUrl: './main.component.css',
@@ -45,9 +48,18 @@ export class MainComponent {
   });
 
   constructor(private route: ActivatedRoute) {
-    this.songs = this.route.snapshot.data['songs'].sort((a: Song, b: Song) => {
-      const titleA = a.title.toUpperCase(); // ignore upper and lowercase
-      const titleB = b.title.toUpperCase(); // ignore upper and lowercase
+    this.songs = this.route.snapshot.data['songs'].map((song: Song) => {
+      song.romajiTitle = tokenize(song.title).map((token: any) => toRomaji(token)).join(' ');
+      if(!isRomaji(song.title)){
+        song.label = song.title + " [" + song.romajiTitle + "]"
+      }
+      else{
+        song.label = song.title;
+      }
+      return song;
+    }).sort((a: Song, b: Song) => {
+      const titleA = a.romajiTitle.toUpperCase(); // ignore upper and lowercase
+      const titleB = b.romajiTitle.toUpperCase(); // ignore upper and lowercase
       if (titleA < titleB) {
         return -1;
       }
@@ -59,11 +71,6 @@ export class MainComponent {
       return 0;
     });
     this.charts = this.route.snapshot.data['charts'];
-    this.group.controls.title.valueChanges.subscribe((change) => {
-      if (change) {
-        this.onSelectedSong(change)
-      }
-    });
     this.playstyle.valueChanges.pipe(startWith("SP"), pairwise())
       .subscribe(([prev, next]: [any, any]) => {
         console.log(prev, next);
@@ -88,8 +95,8 @@ export class MainComponent {
     this.selectedSongCharts = undefined;
   }
 
-  onSelectedSong(selectedSongTitle: string) {
-    this.selectedSong = this.songs.filter(song => song.title === selectedSongTitle).pop();
+  onSelectedSong(selectedSong: Song) {
+    this.selectedSong = selectedSong;
     if(this.selectedSong) {
       this.selectedSongCharts = this.charts.filter(chart => chart.songID === this.selectedSong?.id && chart.playtype === this.playstyle.value).sort((a, b) => +a.level - +b.level);
     }

src/model/Song.ts

@@ -2,4 +2,6 @@ export interface Song {
   artist: string;
   id: string;
   title: string;
+  romajiTitle: string;
+  label: string;
 }

src/styles.css

@@ -1,2 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
 
+button .list-group-item {
+  background: var(--contrast) !important;
+}