Skip to content

Commit 234dec7

Browse files
MikiraSoraMikiraSora
committed
feat(maimai2): refactory festa page and implement festa rank
1 parent 0dfd415 commit 234dec7

File tree

5 files changed

+254
-10
lines changed

5 files changed

+254
-10
lines changed

‎src/app/sega/maimai2/maimai2-festa/maimai2-festa.component.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,4 +118,40 @@
118118
color: #fff; /* 白字 */
119119
font-size: 0.85rem;
120120
font-weight: bold;
121+
}
122+
.rank-row {
123+
display: grid;
124+
grid-template-columns: auto 1fr auto; /* 左右自适应，中间填充 */
125+
gap: 8px;
126+
padding: 4px 0;
127+
align-items: center;
128+
}
129+
130+
.rank {
131+
text-align: left;
132+
font-weight: bold;
133+
min-width: 2em;
134+
}
135+
136+
.circle-name {
137+
overflow: hidden;
138+
text-overflow: ellipsis;
139+
white-space: nowrap;
140+
}
141+
142+
.score {
143+
text-align: right;
144+
font-weight: bold;
145+
min-width: 4em;
146+
}
147+
148+
/* 排名前三颜色 */
149+
.gold {
150+
color: #FFD700; /* 金色 */
151+
}
152+
.silver {
153+
color: #C0C0C0; /* 银色 */
154+
}
155+
.bronze {
156+
color: #CD7F32; /* 铜色 */
121157
}

‎src/app/sega/maimai2/maimai2-festa/maimai2-festa.component.html‎

Lines changed: 151 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@ <h1 class="page-heading">{{ "Maimai2.FestaPage.Title" | translate }}</h1>
66

77
<div *ngIf="userCircleInfo?.joinedCircle">
88
<h3 class="page-heading" *ngIf="gameFestaInfo?.gameFesta">
9-
<span>当前进行的Festa活动</span>
9+
<span
10+
>当前进行的Festa活动 <small style="color: gray">*每天7点更新</small></span
11+
>
1012
<div class="card shadow mb-4 mt-4">
1113
<div
1214
class="card-header d-flex justify-content-between align-items-center"
@@ -47,7 +49,7 @@ <h5 class="mb-0">
4749
</p>
4850
<p>
4951
<strong>奖励边界:</strong>
50-
{{ gameFestaInfo.gameFesta.rewardBorder }}
52+
{{ gameFestaInfo.gameFesta.rewardBorder }} fp
5153
</p>
5254
</div>
5355
<div class="col-md-6">
@@ -103,11 +105,7 @@ <h5 class="mb-0">
103105
</p>
104106
</div>
105107

106-
<div
107-
*ngIf="
108-
gameFestaInfo.gameFesta.festaPhaseState.toLowerCase() != 'voteteam'
109-
"
110-
>
108+
<div class="mt-2">
111109
<h6>队伍排名</h6>
112110
<div class="progress" style="height: 30px">
113111
<div class="festa-progress">
@@ -132,12 +130,156 @@ <h6>队伍排名</h6>
132130
class="list-group-item d-flex justify-content-between align-items-center"
133131
*ngFor="let side of gameFestaInfo.gameFestaData.festaSideDataList"
134132
>
135-
{{ formatRank(side.rankInPlace) }}
136-
{{ getSideName(gameFestaInfo.gameFesta, side.festaSideId) }}
133+
<span>
134+
{{ formatRank(side.rankInPlace) }}
135+
<span [style.color]="getFestaSideColor(side.festaSideId)">
136+
{{ getSideName(gameFestaInfo.gameFesta, side.festaSideId) }}
137+
</span></span
138+
>
137139
<span>{{ side.advantagePercent }}% </span>
138140
</li>
139141
</ul>
140142
</div>
143+
144+
<div class="card mt-4" *ngIf="userFestaInfo?.userFestaData">
145+
<div class="card-header">
146+
<span
147+
>玩家与Circle情况 -
148+
{{ userFestaInfo?.userFestaData?.circleName }}</span
149+
>
150+
</div>
151+
<div class="card-body" *ngIf="userFestaInfo">
152+
<div class="row">
153+
<div class="col-md-6">
154+
<p>
155+
<strong>placeId:</strong>
156+
{{ userFestaInfo?.userFestaData?.placeId }}
157+
</p>
158+
<p>
159+
<strong>所属队伍与队内排名:</strong>
160+
<span
161+
[style.color]="
162+
getFestaSideColor(userFestaInfo.userFestaData.festaSideId)
163+
"
164+
>
165+
{{
166+
getSideName(
167+
gameFestaInfo.gameFesta,
168+
userFestaInfo.userFestaData.festaSideId
169+
)
170+
}}
171+
{{
172+
formatRank(
173+
userFestaInfo.userFestaData.circleRankInFestaSide
174+
)
175+
}}</span
176+
>
177+
</p>
178+
<p>
179+
<strong>Circle总分数:</strong>
180+
{{ userFestaInfo.userFestaData.circleTotalFestaPoint }} fp
181+
</p>
182+
</div>
183+
<div class="col-md-6">
184+
<p>
185+
<strong>玩家分数:</strong>
186+
{{ userFestaInfo.userFestaData.currentTotalFestaPoint }}
187+
fp
188+
</p>
189+
<p>
190+
<strong>奖励还需分数:</strong>
191+
{{ userFestaInfo.userFestaData.receivedRewardBorder }}
192+
fp
193+
</p>
194+
<p>
195+
<strong>已领奖励:</strong>
196+
{{ userFestaInfo.userFestaData.participationRewardGet }}
197+
</p>
198+
</div>
199+
</div>
200+
</div>
201+
</div>
202+
203+
<div class="row mt-4">
204+
<div class="col-md-6">
205+
<div class="card" *ngIf="sameSideCircleRankInfoList?.length > 0">
206+
<div class="card-header"><span>同队排行</span></div>
207+
<div class="card-body">
208+
<div
209+
*ngFor="let item of sameSideCircleRankInfoList"
210+
class="rank-row"
211+
>
212+
<div
213+
class="rank"
214+
[ngClass]="{
215+
gold: item.rank === 0,
216+
silver: item.rank === 1,
217+
bronze: item.rank === 2
218+
}"
219+
>
220+
{{ formatRank(item.rank) }}
221+
</div>
222+
<span
223+
[style.color]="
224+
getFestaSideColor(item.circleFestaData.festaSideId)
225+
"
226+
>
227+
{{ item.circleFestaData.circleName }}
228+
</span>
229+
<span
230+
class="score"
231+
[ngClass]="{
232+
gold: item.rank === 0,
233+
silver: item.rank === 1,
234+
bronze: item.rank === 2
235+
}"
236+
>
237+
{{ item.circleFestaData.totalPoint }} fp</span
238+
>
239+
</div>
240+
</div>
241+
</div>
242+
</div>
243+
<div class="col-md-6">
244+
<div class="card" *ngIf="allSideCircleRankInfoList?.length > 0">
245+
<div class="card-header"><span>总排行</span></div>
246+
<div class="card-body">
247+
<div
248+
*ngFor="let item of allSideCircleRankInfoList"
249+
class="rank-row"
250+
>
251+
<div
252+
class="rank"
253+
[ngClass]="{
254+
gold: item.rank === 0,
255+
silver: item.rank === 1,
256+
bronze: item.rank === 2
257+
}"
258+
>
259+
{{ formatRank(item.rank) }}
260+
</div>
261+
<span
262+
[style.color]="
263+
getFestaSideColor(item.circleFestaData.festaSideId)
264+
"
265+
>
266+
{{ item.circleFestaData.circleName }}
267+
</span>
268+
<span
269+
class="score"
270+
[ngClass]="{
271+
gold: item.rank === 0,
272+
silver: item.rank === 1,
273+
bronze: item.rank === 2
274+
}"
275+
>
276+
{{ item.circleFestaData.totalPoint }} fp</span
277+
>
278+
</div>
279+
</div>
280+
</div>
281+
</div>
282+
</div>
141283
</div>
142284
</div>
143285
</h3>

‎src/app/sega/maimai2/maimai2-festa/maimai2-festa.component.ts‎

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ import { json } from 'stream/consumers';
2121
import { Maimai2GameFestaInfo } from '../model/Maimai2GameFestaInfo';
2222
import { Maimai2UserFestaInfo } from '../model/Maimai2UserFestaInfo';
2323
import { Maimai2GameFesta } from '../model/Maimai2GameFesta';
24+
import { Maimai2UserFestaData } from '../model/Maimai2UserFestaData';
25+
import { Maimai2CircleFestaRankInfo } from '../model/MaiMai2CircleFestaRankInfo';
2426

2527
@Component({
2628
selector: 'app-maimai2-festa',
@@ -47,6 +49,9 @@ export class Maimai2FestaComponent implements OnInit {
4749
userResultFestaInfo: Maimai2UserFestaInfo = null;
4850
userCircleInfo: Maimai2UserCircleInfo = null;
4951

52+
sameSideCircleRankInfoList: Maimai2CircleFestaRankInfo[] = null;
53+
allSideCircleRankInfoList: Maimai2CircleFestaRankInfo[] = null;
54+
5055
ngOnInit() {
5156
this.aimeId = String(this.userService.currentUser.defaultCard.extId);
5257
this.load();
@@ -73,6 +78,52 @@ export class Maimai2FestaComponent implements OnInit {
7378
);
7479
}
7580

81+
loadSameSideCircleRankInfo(userFestaData: Maimai2UserFestaData) {
82+
const param = new HttpParams()
83+
.set('aimeId', this.aimeId)
84+
.set('openEventId', userFestaData.eventId)
85+
.set('filterFestaSideId', userFestaData.festaSideId)
86+
.set('placeId', userFestaData.placeId)
87+
.set('page', 0)
88+
.set('size', 10);
89+
90+
this.api.get('api/game/maimai2/rankFestaCircles', param).pipe().subscribe(
91+
(data: Page<Maimai2CircleFestaRankInfo>) => {
92+
this.sameSideCircleRankInfoList = data.content;
93+
console.log(`loadSameSideCircleRankInfo() loaded successfully`);
94+
}
95+
,
96+
(error: string) => {
97+
this.messageService.notice(error);
98+
console.error(`loadSameSideCircleRankInfo() failed, error = ${error}`);
99+
return of({ data: [], error: true });
100+
}
101+
);
102+
}
103+
104+
loadAllSideCircleRankInfo(userFestaData: Maimai2UserFestaData) {
105+
const param = new HttpParams()
106+
.set('aimeId', this.aimeId)
107+
.set('openEventId', userFestaData.eventId)
108+
.set('filterFestaSideId', -1)
109+
.set('placeId', userFestaData.placeId)
110+
.set('page', 0)
111+
.set('size', 10);
112+
113+
this.api.get('api/game/maimai2/rankFestaCircles', param).pipe().subscribe(
114+
(data: Page<Maimai2CircleFestaRankInfo>) => {
115+
this.allSideCircleRankInfoList = data.content;
116+
console.log(`loadSameSideCircleRankInfo() loaded successfully`);
117+
}
118+
,
119+
(error: string) => {
120+
this.messageService.notice(error);
121+
console.error(`loadSameSideCircleRankInfo() failed, error = ${error}`);
122+
return of({ data: [], error: true });
123+
}
124+
);
125+
}
126+
76127
getEventStartTimeString(openEventId: string) {
77128
let year = parseInt(openEventId.substring(0, 2), 10);
78129
let month = parseInt(openEventId.substring(2, 4), 10) - 1;
@@ -89,8 +140,13 @@ export class Maimai2FestaComponent implements OnInit {
89140
this.gameFestaInfo = data.data;
90141
console.log(`loadGameFestaInfo() loaded successfully`);
91142

92-
if (this.gameFestaInfo.gameFesta)
143+
if (this.gameFestaInfo.gameFesta) {
93144
this.userFestaInfo = await this.loadUserFestaInfo(this.gameFestaInfo.gameFesta);
145+
if (this.userFestaInfo.userFestaData) {
146+
this.loadSameSideCircleRankInfo(this.userFestaInfo.userFestaData);
147+
this.loadAllSideCircleRankInfo(this.userFestaInfo.userFestaData);
148+
}
149+
}
94150
if (this.gameFestaInfo.gameRsultFesta)
95151
this.userResultFestaInfo = await this.loadUserFestaInfo(this.gameFestaInfo.gameRsultFesta);
96152
}

‎src/app/sega/maimai2/model/Maimai2CircleFestaData.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,8 @@ export interface Maimai2CircleFestaData {
44
circleId: number;
55
eventId: number;
66
festaSideId: number;
7+
8+
placeId: number;
9+
totalPoint: number;
10+
circleName: string;
711
}

‎src/app/sega/maimai2/model/Maimai2CircleFestaRankInfo.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { Maimai2CircleFestaData } from "./Maimai2CircleFestaData";
2+
3+
export interface Maimai2CircleFestaRankInfo {
4+
circleFestaData: Maimai2CircleFestaData;
5+
rank: number;
6+
}

0 commit comments

Comments
 (0)