[chusan] Filter play records by fumen

Sanheiii · Sanheiii · commit 0fef65d33a20 · 2025-03-24T00:16:19.000+08:00
diff --git a/src/app/sega/chunithm/v2/v2-recent/v2-recent.component.css b/src/app/sega/chunithm/v2/v2-recent/v2-recent.component.css
@@ -212,3 +212,42 @@
     font-size: 0.8em;
   }
 }
+
+.filter-text {
+  font-size: 12px;
+}
+
+.difficulty-basic {
+  background: #00ab84;
+  border: 1px solid #145830;
+  color: white;
+}
+
+.difficulty-advanced {
+  background: #ff7e00;
+  border: 1px solid #995014;
+  color: white;
+}
+
+.difficulty-expert {
+  background: #f12929;
+  border: 1px solid #7B1F18;
+  color: white;
+}
+
+.difficulty-master {
+  background: #8e1be5;
+  border: 1px solid #381C47;
+  color: white;
+}
+
+.difficulty-ultima {
+  background: #424242;
+  border: 1px solid #ff2854;
+  color: white;
+}
+
+.difficulty-we {
+  background: #343636;
+  border: 1px solid var(--bs-secondary);
+}
diff --git a/src/app/sega/chunithm/v2/v2-recent/v2-recent.component.html b/src/app/sega/chunithm/v2/v2-recent/v2-recent.component.html
@@ -1,4 +1,4 @@
-<h1 class="page-heading">{{"ChuniV2.RecentPage.Title" | translate}}</h1>
+<h1 class="page-heading">{{ "ChuniV2.RecentPage.Title" | translate }}</h1>
 
 <ng-template #pagination>
   <pagination-template *ngIf="!loading" #p="paginationApi" class="user-select-none" id="server" maxSize="7"
@@ -20,11 +20,32 @@ <h1 class="page-heading">{{"ChuniV2.RecentPage.Title" | translate}}</h1>
   </pagination-template>
 </ng-template>
 
+<ng-container *ngIf="musicName">
+  <div class="d-flex align-items-center gap-2 mb-2">
+    <ng-container [ngSwitch]="level">
+      <span *ngSwitchCase="0" class="col-auto filter-text difficulty-basic badge rounded-pill">Basic</span>
+      <span *ngSwitchCase="1" class="col-auto filter-text difficulty-advanced badge rounded-pill">Advanced</span>
+      <span *ngSwitchCase="2" class="col-auto filter-text difficulty-expert badge rounded-pill">Expert</span>
+      <span *ngSwitchCase="3" class="col-auto filter-text difficulty-master badge rounded-pill">Master</span>
+      <span *ngSwitchCase="4" class="col-auto filter-text difficulty-ultima badge rounded-pill">Ultima</span>
+      <span *ngSwitchCase="5" class="col-auto filter-text difficulty-we badge rounded-pill">
+      <span class="color-we">World's End</span>
+    </span>
+    </ng-container>
+    <span>{{musicName}}</span>
+  </div>
+</ng-container>
+
+<div class="d-flex align-items-center gap-2 mb-3">
+  <span>{{'ChuniV2.RecentPage.TotalPlayLogNum' | translate: {num: totalElements} }}</span>
+  <a *ngIf="musicName" class="link-btn" [routerLink]="[]" [queryParams]="{}">{{ "ChuniV2.RecentPage.ResetFilter" | translate }}</a>
+</div>
+
 <ng-container *ngTemplateOutlet="pagination;"></ng-container>
 
 <div *ngIf="recent" class="d-flex flex-column gap-2 my-3 this-page">
   <div class="card"
-    *ngFor="let item of recent | async | paginate: { id: 'server', itemsPerPage: 10, currentPage: currentPage, totalItems: totalElements }">
+       *ngFor="let item of recent | async | paginate: { id: 'server', itemsPerPage: 10, currentPage: currentPage, totalItems: totalElements }">
     <div class="card-header p-0">
       <div class="position-relative">
         <div class="d-flex rounded-top g-0 flex-nowrap">
@@ -33,16 +54,16 @@ <h1 class="page-heading">{{"ChuniV2.RecentPage.Title" | translate}}</h1>
           </div>
           <div class="flex-grow-1 overflow-hidden">
             <div class="info-container">
-              <div class="ps-2 py-1 user-select-none difficulty-{{item.level}}" >
-                <div class="track"><span [class.color-we]="item.level==5">Track.{{item.track}}</span></div>
-                <div class="difficulty"><span [class.color-we]="item.level==5">{{difficulty[item.level]}}</span></div>
+              <div class="ps-2 py-1 user-select-none difficulty-{{item.level}}">
+                <div class="track"><span [class.color-we]="item.level==5">Track.{{ item.track }}</span></div>
+                <div class="difficulty"><span [class.color-we]="item.level==5">{{ difficulty[item.level] }}</span></div>
                 <!--            <div>{{item.songInfo.levels[item.level] | toLevelString}}</div>-->
               </div>
               <div class="info-second">
                 <div class="w-100">
-                  <div class="title ps-2">{{item.songInfo?.name ?? 'musicId:' + item.musicId }}</div>
+                  <div class="title ps-2">{{ item.songInfo?.name ?? 'musicId:' + item.musicId }}</div>
                   <hr class="w-100 my-1">
-                  <div class="artist ps-2">{{item.songInfo?.artistName??'Unknown Artist' }}</div>
+                  <div class="artist ps-2">{{ item.songInfo?.artistName ?? 'Unknown Artist' }}</div>
                 </div>
               </div>
             </div>
@@ -99,16 +120,20 @@ <h1 class="page-heading">{{"ChuniV2.RecentPage.Title" | translate}}</h1>
               <div class="h-100 d-flex align-items-center">
                 <div>
                   <div>
-                    <div class="new-record-badge rounded-pill badge" [class.new-record]="item.isNewRecord">NEW RECORD</div>
+                    <div class="new-record-badge rounded-pill badge" [class.new-record]="item.isNewRecord">NEW RECORD
+                    </div>
                     <div class="score-label">Score</div>
                     <div class="score">{{ item.score }}</div>
                   </div>
                   <div *ngIf="item.songInfo?.levels[item.level]">
                     <div class="score-label">Rating</div>
-                    <div class="rating">{{ ((item.score | toTechRating: (item.songInfo.levels[item.level].level * 100 + item.songInfo.levels[item.level].levelDecimal)) / 100).toFixed(2).toString() }}</div>
+                    <div
+                      class="rating">{{ ((item.score | toTechRating: (item.songInfo.levels[item.level].level * 100 + item.songInfo.levels[item.level].levelDecimal)) / 100).toFixed(2).toString() }}
+                    </div>
                   </div>
                   <div>
-                    <img class="honor" [class.grayscale]="!item.isFullCombo" src="{{host}}assets/chuni/gameUi/CHU_UI_Result_{{getFcLevel(item)}}.webp">
+                    <img class="honor" [class.grayscale]="!item.isFullCombo"
+                         src="{{host}}assets/chuni/gameUi/CHU_UI_Result_{{getFcLevel(item)}}.webp">
                   </div>
                 </div>
               </div>
@@ -118,23 +143,26 @@ <h1 class="page-heading">{{"ChuniV2.RecentPage.Title" | translate}}</h1>
                 <div class="d-flex flex-nowrap align-items-start">
                   <ng-container *ngFor="let char of (item.rank | toRank).split('')">
                     <ng-container [ngSwitch]="char">
-                      <img *ngSwitchCase="'+'" class="result-plus" src="{{host}}assets/chuni/gameUi/CHU_UI_Result_Plus.webp">
-                      <img *ngSwitchDefault class="result-char" src="{{host}}assets/chuni/gameUi/CHU_UI_Result_{{char}}.webp">
+                      <img *ngSwitchCase="'+'" class="result-plus"
+                           src="{{host}}assets/chuni/gameUi/CHU_UI_Result_Plus.webp">
+                      <img *ngSwitchDefault class="result-char"
+                           src="{{host}}assets/chuni/gameUi/CHU_UI_Result_{{char}}.webp">
                     </ng-container>
                   </ng-container>
                 </div>
               </div>
             </div>
           </div>
-          </div>
         </div>
+      </div>
     </div>
     <div class="card-footer fw-bold">
       <div *ngIf="item.songInfo" class="float-start">
-        <a type="button" class="text-primary" (click)="showDetail(item.songInfo)">{{"ChuniV2.RecentPage.Ranking" | translate}}</a>
+        <a type="button" class="text-primary"
+           (click)="showDetail(item.songInfo)">{{ "ChuniV2.RecentPage.Details" | translate }}</a>
       </div>
       <div class="float-end">
-        {{item.userPlayDate.toLocaleString()}}
+        {{ item.userPlayDate.toLocaleString() }}
       </div>
     </div>
   </div>
diff --git a/src/app/sega/chunithm/v2/v2-recent/v2-recent.component.ts b/src/app/sega/chunithm/v2/v2-recent/v2-recent.component.ts
@@ -8,11 +8,12 @@ import {NgxIndexedDBService} from 'ngx-indexed-db';
 import {ChusanMusic, Difficulty} from '../model/ChusanMusic';
 import {environment} from '../../../../../environments/environment';
 import {map, tap} from 'rxjs/operators';
-import {Observable} from 'rxjs';
+import {lastValueFrom, Observable} from 'rxjs';
 import {NgbOffcanvas} from '@ng-bootstrap/ng-bootstrap';
 import {V2SongScoreRankingComponent} from '../v2-song-score-ranking/v2-song-score-ranking.component';
-import { UserService } from 'src/app/user.service';
+import {UserService} from 'src/app/user.service';
 import {ActivatedRoute, Router} from '@angular/router';
+import {load} from '@angular-devkit/build-angular/src/utils/server-rendering/esm-in-memory-file-loader';
 
 @Component({
   selector: 'app-v2-recent',
@@ -25,6 +26,9 @@ export class V2RecentComponent implements OnInit {
   enableImages = environment.enableImages;
   loading: boolean;
   aimeId: string;
+  id: number;
+  musicName: string;
+  level: number;
 
   recent: Observable<V2PlayLog[]>;
   difficulty = Difficulty;
@@ -48,15 +52,36 @@ export class V2RecentComponent implements OnInit {
     this.loading = true;
     this.route.queryParams.subscribe((data) => {
       if (data.page) {
-        this.currentPage = data.page;
+        this.currentPage = Number(data.page);
+      } else {
+        this.currentPage = 1;
+      }
+      if (data.id && data.level) {
+        this.id = Number(data.id);
+        this.getMusicName(this.id);
+        this.level = Number(data.level);
+        if (this.level > 5){
+          this.router.navigate(['chuni/v2/recent'], {queryParams: {}});
+        }
+      } else {
+        this.id = null;
+        this.musicName = null;
+        this.level = null;
       }
       this.load(this.currentPage);
     });
   }
 
   load(page: number) {
     const param = new HttpParams().set('aimeId', this.aimeId).set('page', String(page - 1));
-    this.recent = this.api.get('api/game/chuni/v2/recent', param).pipe(
+
+    let api;
+    if (this.id && this.level) {
+      api = `api/game/chuni/v2/song/${this.id}/${this.level}`;
+    } else {
+      api = 'api/game/chuni/v2/recent';
+    }
+    this.recent = this.api.get(api, param).pipe(
       tap(
         data => {
           this.totalElements = data.totalElements;
@@ -88,21 +113,34 @@ export class V2RecentComponent implements OnInit {
   }
 
   pageChanged(page: number) {
-    this.router.navigate(['chuni/v2/recent'], {queryParams: {page}});
+    this.router.navigate(['chuni/v2/recent'], {queryParams: {page, id: this.id, level: this.level}});
   }
 
-  getFcLevel(item: V2PlayLog){
-    if (item.score === 1010000){
+  getFcLevel(item: V2PlayLog) {
+    if (item.score === 1010000) {
       return 'AJC';
-    }
-    else if (item.isAllJustice){
+    } else if (item.isAllJustice) {
       return 'AJ';
-    }
-    else if (item.isFullCombo){
+    } else if (item.isFullCombo) {
       return 'FC';
-    }
-    else{
+    } else {
       return 'FC_Base';
     }
   }
+
+  getMusicName(id: number) {
+    this.dbService.getByID<ChusanMusic>('chusanMusic', id).subscribe({
+      next: (data) => {
+        if (data) {
+          this.musicName = data.name;
+        }
+        else {
+          this.musicName = `ID: ${id}`;
+        }
+      },
+      error: error => {
+        this.musicName = `ID: ${id}`;
+      }
+    });
+  }
 }
diff --git a/src/app/sega/chunithm/v2/v2-song-score-ranking/v2-song-score-ranking.component.html b/src/app/sega/chunithm/v2/v2-song-score-ranking/v2-song-score-ranking.component.html
@@ -15,7 +15,7 @@ <h5 class="card-title mb-1 fw-bold">「{{music.name}}」</h5>
       </div>
       <section *ngIf="songData">
         <ng-template #difficultyDetail let-difficulty>
-          <div class="card my-2">
+          <div class="card my-2" [class.card-btn]="songData[difficulty]" (click)="showPlayLog(music.musicId, difficulty)">
             <ng-container [ngSwitch]="difficulty">
               <div *ngSwitchCase="0" class="card-header py-1 px-2 text-truncate">
                 <div class="hstack">
diff --git a/src/app/sega/chunithm/v2/v2-song-score-ranking/v2-song-score-ranking.component.ts b/src/app/sega/chunithm/v2/v2-song-score-ranking/v2-song-score-ranking.component.ts
@@ -7,6 +7,7 @@ import {MessageService} from '../../../../message.service';
 import {NgbOffcanvas} from '@ng-bootstrap/ng-bootstrap';
 import {HttpParams} from '@angular/common/http';
 import { UserService } from 'src/app/user.service';
+import {Router} from '@angular/router';
 
 interface ISongData {
   musicId: number;
@@ -54,6 +55,7 @@ export class V2SongScoreRankingComponent {
 
   constructor(
     private api: ApiService,
+    private router: Router,
     private userService: UserService,
     public messageService: MessageService,
     public offcanvasService: NgbOffcanvas,
@@ -75,12 +77,12 @@ export class V2SongScoreRankingComponent {
       }
     );
     const param = new HttpParams().set('musicId', musicId).set('level', 3);
-    this.api.get("api/game/chuni/v2/musicScoreRanking", param).subscribe((res) => {
+    this.api.get('api/game/chuni/v2/musicScoreRanking', param).subscribe((res) => {
       if (res.length > 0) {
         this.ranking = res;
       } else {
-        const param = new HttpParams().set("musicId", musicId).set("level", 5);
-        this.api.get("api/game/chuni/v2/musicScoreRanking", param).subscribe((res) => {
+        const param = new HttpParams().set('musicId', musicId).set('level', 5);
+        this.api.get('api/game/chuni/v2/musicScoreRanking', param).subscribe((res) => {
             this.ranking = res;
           });
       }
@@ -102,4 +104,10 @@ export class V2SongScoreRankingComponent {
     return `${level.level}.${level.levelDecimal.toString().charAt(0)}` ?? '0';
   }
 
+  showPlayLog(id: number, level: any) {
+    if (this.songData[level]){
+      this.offcanvasService.dismiss();
+      this.router.navigate(['chuni/v2/recent'], {queryParams: {id, level}});
+    }
+  }
 }
diff --git a/src/app/sega/chunithm/v2/v2-songlist/v2-songlist.component.html b/src/app/sega/chunithm/v2/v2-songlist/v2-songlist.component.html
@@ -32,7 +32,7 @@ <h1 class="page-heading">{{ "ChuniV2.MusicListPage.Title" | translate }}</h1>
     </div>
   </div>
   <div class="row mb-2 g-1">
-    <div class="col-12 col-sm-auto pt-1 me-3">分类</div>
+    <div class="col-12 col-sm-auto pt-1 me-3">{{'ChuniV2.MusicListPage.Genre' | translate}}</div>
     <div class="col-12 col-sm">
       <div class="row justify-content-start align-items-center g-1">
         <div *ngFor="let genre of genres; let i = index" class="col-auto">
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -402,7 +402,7 @@
       "Unacquired": "Unacquired",
       "Version": "Version",
       "SearchPlaceholder": "ID，Name，Illustrator，WorkName",
-      "TotalCharaNum": "Total {{num}} characters",
+      "TotalCharaNum": "Total {{num}} Characters",
       "ShowFilter": "Show Filter",
       "HideFilter": "Hide Filter",
       "ResetFilter": "Reset Filter",
@@ -448,6 +448,7 @@
     "MusicListPage": {
       "Title": "Music List",
       "ReleaseVersion": "Release Version",
+      "Genre": "Genre",
       "TotalSongNum": "Total {{num}} Songs",
       "ShowFilter": "Show Filter",
       "HideFilter": "Hide Filter",
@@ -489,7 +490,9 @@
     },
     "RecentPage": {
       "Title": "Play Record",
-      "Ranking": "Ranking"
+      "Details": "Details",
+      "TotalPlayLogNum": "Total {{num}} Play Records",
+      "ResetFilter": "Reset Filter"
     },
     "SettingsPage": {
       "Title": "Settings",
diff --git a/src/assets/i18n/zh.json b/src/assets/i18n/zh.json
@@ -448,6 +448,7 @@
     "MusicListPage": {
       "Title": "乐曲列表",
       "ReleaseVersion": "发布版本",
+      "Genre": "分类",
       "TotalSongNum": "共 {{num}} 首乐曲",
       "ShowFilter": "显示过滤",
       "HideFilter": "隐藏过滤",
@@ -489,7 +490,9 @@
     },
     "RecentPage": {
       "Title": "游玩记录",
-      "Ranking": "排名"
+      "Details": "详情",
+      "TotalPlayLogNum": "共 {{num}} 条游玩记录",
+      "ResetFilter": "重置过滤"
     },
     "SettingsPage": {
       "Title": "设定",
