Skip to content

Commit 87b5418

Browse files
SanheiiiSanheiii
committed
[chusan] Update styles for RatingPage
1 parent bd983ef commit 87b5418

File tree

4 files changed

+187
-82
lines changed

4 files changed

+187
-82
lines changed

‎src/app/sega/chunithm/v2/v2-rating/v2-rating.component.html‎

Lines changed: 99 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,72 @@
1-
<h1 class="page-heading">Rating</h1>
1+
<h1 class="page-heading">{{ "ChuniV2.RatingPage.Title" | translate }}</h1>
22

3-
<div class="card mb-3">
4-
<div class="card-body">
5-
<ng-container *ngIf="romVersion >= verseVersion">
6-
<div>Total Rating: <span class="{{(topTotal + newTotal) / 50 | toRating | ratingClass}}">{{(topTotal + newTotal) / 50 | toRating }}</span></div>
7-
<div>New: <span class="{{newTotal / 20 | toRating | ratingClass}}">{{newTotal / 20 | toRating }}</span></div>
8-
<div>Old: <span class="{{topTotal / 30 | toRating | ratingClass}}">{{topTotal / 30 | toRating }}</span></div>
9-
</ng-container>
10-
<ng-container *ngIf="romVersion < verseVersion">
11-
<div>Total Rating: <span class="{{(topTotal + recentTotal) / 40 | toRating | ratingClass}}">{{(topTotal + recentTotal) / 40 | toRating }}</span></div>
12-
<div>Best: <span class="{{topTotal / 30 | toRating | ratingClass}}">{{topTotal / 30 | toRating }}</span></div>
13-
<div>Recent: <span class="{{recentTotal / 10 | toRating | ratingClass}}">{{recentTotal / 10 | toRating }}</span></div>
3+
<ng-container *ngIf="playerRating">
4+
<div class="mb-3 d-flex align-items-center">
5+
<h2 class="mb-0">{{ "ChuniV2.RatingPage.Overview" | translate }}</h2>
6+
</div>
7+
<div class="mb-4">
8+
<div class="card user-select-none mb-2">
9+
<ul class="list-group list-group-flush my-1">
10+
<li class="list-group-item">
11+
<div>{{ "ChuniV2.RatingPage.PlayerRating" | translate }} {{"Common.Colon" | translate}} {{playerRating | toRating | number: '1.2-2'}}</div>
12+
</li>
13+
<li class="list-group-item">
14+
<div>{{ "ChuniV2.RatingPage.HighestRating" | translate }} {{"Common.Colon" | translate}} {{highestRating | toRating | number: '1.2-2'}}</div>
15+
</li>
16+
</ul>
17+
</div>
18+
<ng-container *ngIf="playerRating != calcRating">
19+
<div class="alert alert-warning" role="alert">
20+
{{ "ChuniV2.RatingPage.DataVersionWarning" | translate }}
21+
</div>
1422
</ng-container>
1523
</div>
16-
</div>
24+
</ng-container>
25+
26+
27+
<ng-template #itemPlaceholder>
28+
<div class="col-12 col-md-6 col-xxl-4">
29+
<div class="card rating-card">
30+
<div class="hstack">
31+
<img class="jacket rounded-start placeholder" alt="">
32+
<div class="card-body overflow-hidden user-select-none py-0 px-2">
33+
<div class="fw-bold m-0 mb-1 placeholder"><span class="placeholder">#0 Music Title</span></div>
34+
<div class="text-truncate mb-1"><span class="placeholder">1010000</span></div>
35+
<div class="text-truncate small rating-score">
36+
<span class="score-value placeholder">Master 10.0 ➛ 12.15</span>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
</ng-template>
43+
44+
<ng-container *ngIf="loadingRating">
45+
<div class="placeholder-wave">
46+
<div class="mb-3 d-flex align-items-center">
47+
<h2 class="mb-0"><span class="placeholder">Best</span></h2>
48+
</div>
49+
<div class="row mb-4 g-2">
50+
<ng-container *ngTemplateOutlet="itemPlaceholder"></ng-container>
51+
</div>
52+
</div>
53+
</ng-container>
54+
55+
<ng-container *ngIf="loadingRecent">
56+
<div class="placeholder-wave">
57+
<div class="mb-3 d-flex align-items-center">
58+
<h2 class="mb-0"><span class="placeholder">Recent</span></h2>
59+
</div>
60+
<div class="row mb-4 g-2">
61+
<ng-container *ngTemplateOutlet="itemPlaceholder"></ng-container>
62+
</div>
63+
</div>
64+
</ng-container>
1765

18-
<ng-container *ngIf="newRating">
66+
<ng-container *ngIf="!loadingRating && newRating">
1967
<div class="mb-3 d-flex align-items-center">
20-
<h2 class="mb-0">New</h2>
68+
<h2 class="mb-0">{{ "ChuniV2.RatingPage.New" | translate }}</h2>
69+
<span class="badge bg-primary rounded-pill ms-2">{{ newTotal / 20 | toRating }}</span>
2170
</div>
2271

2372
<div class="row mb-4 g-2">
@@ -27,20 +76,24 @@ <h2 class="mb-0">New</h2>
2776
</div>
2877
</ng-container>
2978

30-
<div class="mb-3 d-flex align-items-center">
31-
<h2 class="mb-0">Best</h2>
32-
</div>
79+
<ng-container *ngIf="!loadingRating && topRating">
80+
<div class="mb-3 d-flex align-items-center">
81+
<h2 class="mb-0">{{ "ChuniV2.RatingPage.Best" | translate }}</h2>
82+
<span class="badge bg-primary rounded-pill ms-2">{{ topTotal / 30 | toRating }}</span>
83+
</div>
3384

34-
<div class="row mb-4 g-2">
35-
<ng-container *ngFor="let item of topRating; index as i">
36-
<ng-container *ngTemplateOutlet="record; context: {item: item, index: i}"></ng-container>
37-
</ng-container>
38-
</div>
85+
<div class="row mb-4 g-2">
86+
<ng-container *ngFor="let item of topRating; index as i">
87+
<ng-container *ngTemplateOutlet="record; context: {item: item, index: i}"></ng-container>
88+
</ng-container>
89+
</div>
90+
</ng-container>
3991

40-
<ng-template *ngIf="recentRating">
4192

93+
<ng-template *ngIf="!loadingRecent && recentRating">
4294
<div class="mb-3 d-flex align-items-center">
43-
<h2 class="mb-0">Recent</h2>
95+
<h2 class="mb-0">{{ "ChuniV2.RatingPage.Recent" | translate }}</h2>
96+
<span class="badge bg-primary rounded-pill ms-2">{{ recentTotal / 10 | toRating }}</span>
4497
</div>
4598

4699
<div class="row mb-4 g-2">
@@ -53,44 +106,44 @@ <h2 class="mb-0">Recent</h2>
53106

54107
<ng-template #record let-index="index" let-item="item">
55108
<div class="col-12 col-md-6 col-xxl-4">
56-
<div class="card rating-card">
109+
<div class="card rating-card card-btn" (click)="showDetail(item.musicId)">
57110
<div class="hstack">
58111
<img class="jacket rounded-start"
59112
src="{{host}}assets/chuni/jacket/CHU_UI_Jacket_{{item.musicId|formatNumber:4}}.webp" alt=""
60113
>
61114
<div *ngIf="item.musicId != 0" class="card-body overflow-hidden py-0 px-2">
62-
<div class="text-truncate fw-bold m-0"><span>#{{index + 1}}</span> {{item.musicName}}</div>
63-
<div class="text-truncate">{{item.score}}</div>
115+
<div class="text-truncate fw-bold m-0"><span>#{{ index + 1 }}</span> {{ item.musicName }}</div>
116+
<div class="text-truncate">{{ item.score }}</div>
64117
<div class="text-truncate small rating-score">
65118
<ng-container [ngSwitch]="item.level">
66119
<span *ngSwitchCase="0" class="difficulty-basic badge rounded-pill">
67-
Basic {{(item.ratingBase|toRating)??'None'}}
120+
Basic {{ (item.ratingBase|toRating) ?? 'None' }}
68121
</span>
69-
<span *ngSwitchCase="1" class="difficulty-advanced badge rounded-pill">
70-
Advanced {{(item.ratingBase|toRating)??'None'}}
122+
<span *ngSwitchCase="1" class="difficulty-advanced badge rounded-pill">
123+
Advanced {{ (item.ratingBase|toRating) ?? 'None' }}
71124
</span>
72-
<span *ngSwitchCase="2" class="difficulty-expert badge rounded-pill">
73-
Expert {{(item.ratingBase|toRating)??'None'}}
125+
<span *ngSwitchCase="2" class="difficulty-expert badge rounded-pill">
126+
Expert {{ (item.ratingBase|toRating) ?? 'None' }}
74127
</span>
75-
<span *ngSwitchCase="3" class="difficulty-master badge rounded-pill">
76-
Master {{(item.ratingBase|toRating)??'None'}}
128+
<span *ngSwitchCase="3" class="difficulty-master badge rounded-pill">
129+
Master {{ (item.ratingBase|toRating) ?? 'None' }}
77130
</span>
78-
<span *ngSwitchCase="4" class="difficulty-ultima badge rounded-pill text-danger border border-danger">
79-
Ultima {{(item.ratingBase|toRating)??'None'}}
131+
<span *ngSwitchCase="4" class="difficulty-ultima badge rounded-pill text-danger border border-danger">
132+
Ultima {{ (item.ratingBase|toRating) ?? 'None' }}
80133
</span>
81134
</ng-container>
82135
<b>➛</b>
83136
<ng-container [ngSwitch]="item.level">
84137
<span *ngSwitchCase="0"
85-
class="score-value">{{item.rating|toRating}}</span>
86-
<span *ngSwitchCase="1"
87-
class="score-value">{{item.rating|toRating}}</span>
88-
<span *ngSwitchCase="2"
89-
class="score-value">{{item.rating|toRating}}</span>
90-
<span *ngSwitchCase="3"
91-
class="score-value">{{item.rating|toRating}}</span>
92-
<span *ngSwitchCase="4"
93-
class="score-value">{{item.rating|toRating}}</span>
138+
class="score-value">{{ item.rating|toRating }}</span>
139+
<span *ngSwitchCase="1"
140+
class="score-value">{{ item.rating|toRating }}</span>
141+
<span *ngSwitchCase="2"
142+
class="score-value">{{ item.rating|toRating }}</span>
143+
<span *ngSwitchCase="3"
144+
class="score-value">{{ item.rating|toRating }}</span>
145+
<span *ngSwitchCase="4"
146+
class="score-value">{{ item.rating|toRating }}</span>
94147
</ng-container>
95148
</div>
96149
</div>

‎src/app/sega/chunithm/v2/v2-rating/v2-rating.component.ts‎

Lines changed: 68 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ import {AuthenticationService} from '../../../../auth/authentication.service';
66
import {environment} from '../../../../../environments/environment';
77
import { UserService } from 'src/app/user.service';
88
import {lastValueFrom} from 'rxjs';
9+
import {ChusanMusic} from '../model/ChusanMusic';
10+
import {V2SongScoreRankingComponent} from '../v2-song-score-ranking/v2-song-score-ranking.component';
11+
import {NgbOffcanvas} from '@ng-bootstrap/ng-bootstrap';
12+
import {NgxIndexedDBService} from 'ngx-indexed-db';
913

1014
@Component({
1115
selector: 'app-v2-rating',
@@ -18,7 +22,12 @@ export class V2RatingComponent implements OnInit {
1822
enableImages = environment.enableImages;
1923

2024
romVersion: Version;
25+
playerRating: number;
26+
highestRating: number;
27+
calcRating: number;
2128
verseVersion = new Version('2.30.00');
29+
loadingRating = true;
30+
loadingRecent = true;
2231
topRating: RatingItem[] = [];
2332
newRating: RatingItem[] = [];
2433
recentRating: RatingItem[] = [];
@@ -29,7 +38,9 @@ export class V2RatingComponent implements OnInit {
2938
constructor(
3039
private api: ApiService,
3140
private userService: UserService,
32-
private messageService: MessageService
41+
private messageService: MessageService,
42+
private offcanvasService: NgbOffcanvas,
43+
private dbService: NgxIndexedDBService,
3344
) {
3445
}
3546

@@ -39,49 +50,70 @@ export class V2RatingComponent implements OnInit {
3950
const profile = await lastValueFrom(this.api.get('api/game/chuni/v2/profile', param));
4051
if (!profile) { return; }
4152
this.romVersion = new Version(profile.lastRomVersion);
53+
this.playerRating = profile.playerRating;
54+
this.highestRating = profile.highestRating;
4255
if (this.romVersion >= new Version('2.30.00')){
4356
// b50
44-
this.api.get('api/game/chuni/v2/verse-rating', param).subscribe(
45-
data => {
46-
this.topRating = data.old;
47-
if (this.topRating.length === 0) {
48-
this.messageService.notice('No Data');
49-
}
50-
this.newRating = data.new;
51-
if (this.newRating.length === 0) {
52-
this.messageService.notice('No Data');
53-
}
54-
this.topRating.forEach(item => this.topTotal += item.rating);
55-
this.newRating.forEach(item => this.newTotal += item.rating);
56-
},
57-
error => this.messageService.notice(error)
58-
);
57+
const data = await lastValueFrom(this.api.get('api/game/chuni/v2/verse-rating', param));
58+
if (data) {
59+
this.topRating = data.old;
60+
if (this.topRating.length === 0) {
61+
this.messageService.notice('No Data');
62+
}
63+
this.newRating = data.new;
64+
if (this.newRating.length === 0) {
65+
this.messageService.notice('No Data');
66+
}
67+
68+
this.topRating.forEach(item => this.topTotal += item.rating);
69+
this.newRating.forEach(item => this.newTotal += item.rating);
70+
this.calcRating = (this.topTotal + this.newTotal) / 50;
71+
}
72+
this.loadingRating = false;
73+
this.loadingRecent = false;
5974
}
6075
else{
6176
// b30
62-
this.api.get('api/game/chuni/v2/rating', param).subscribe(
63-
data => {
64-
this.topRating = data;
65-
if (this.topRating.length === 0) {
66-
this.messageService.notice('No Data');
67-
}
68-
this.topRating.forEach(item => this.topTotal += item.rating);
69-
},
70-
error => this.messageService.notice(error)
71-
);
72-
this.api.get('api/game/chuni/v2/rating/recent', param).subscribe(
73-
data => {
74-
this.recentRating = data;
75-
if (this.recentRating.length === 0) {
76-
this.messageService.notice('No Data');
77-
}
78-
this.recentRating.forEach(item => this.recentTotal += item.rating);
79-
},
80-
error => this.messageService.notice(error)
81-
);
77+
const best = await lastValueFrom(this.api.get('api/game/chuni/v2/rating', param));
78+
if (best) {
79+
this.topRating = best;
80+
if (this.topRating.length === 0) {
81+
this.messageService.notice('No Data');
82+
}
83+
this.topRating.forEach(item => this.topTotal += item.rating);
84+
}
85+
this.loadingRating = false;
86+
87+
const recent = await lastValueFrom(this.api.get('api/game/chuni/v2/rating/recent', param));
88+
if (recent) {
89+
this.recentRating = recent;
90+
if (this.recentRating.length === 0) {
91+
this.messageService.notice('No Data');
92+
}
93+
this.recentRating.forEach(item => this.recentTotal += item.rating);
94+
}
95+
this.loadingRecent = false;
96+
97+
if (best && recent){
98+
this.calcRating = (this.topTotal + this.recentTotal) / 40;
99+
}
82100
}
83101
}
84102

103+
showDetail(musicId: number) {
104+
this.dbService.getByID<ChusanMusic>('chusanMusic', musicId).subscribe({
105+
next: (music: ChusanMusic) => {
106+
const offcanvasRef = this.offcanvasService.open(V2SongScoreRankingComponent, {
107+
position: 'end',
108+
scroll: false,
109+
});
110+
offcanvasRef.componentInstance.music = music;
111+
},
112+
error: (err: Error) => {
113+
this.messageService.notice(err.message, 'danger');
114+
}
115+
});
116+
}
85117
}
86118

87119
export interface RatingItem {

‎src/assets/i18n/en.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,16 @@
477477
"Rating": "Rating",
478478
"Activity": "Activity"
479479
},
480+
"RatingPage": {
481+
"Title": "Rating",
482+
"Overview": "Overview",
483+
"PlayerRating": "Your Rating",
484+
"HighestRating": "Highest",
485+
"New": "New",
486+
"Best": "Best",
487+
"Recent": "Recent",
488+
"DataVersionWarning": "Due to a mismatch between the game and server data versions, the fumen constants or rating calculations may be incorrect."
489+
},
480490
"RecentPage": {
481491
"Title": "Play Record",
482492
"Ranking": "Ranking"

‎src/assets/i18n/zh.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -477,6 +477,16 @@
477477
"Rating": "评级",
478478
"Activity": "活跃度"
479479
},
480+
"RatingPage": {
481+
"Title": "评级",
482+
"Overview": "概览",
483+
"PlayerRating": "你的评级",
484+
"HighestRating": "历史最高",
485+
"New": "当前版本",
486+
"Best": "最佳成绩",
487+
"Recent": "最近高分",
488+
"DataVersionWarning": "由于游戏与服务器数据版本不一致，谱面定数或评级计算可能有误"
489+
},
480490
"RecentPage": {
481491
"Title": "游玩记录",
482492
"Ranking": "排名"

0 commit comments

Comments
 (0)