105 lines
3.0 KiB
TypeScript
105 lines
3.0 KiB
TypeScript
import {Component, OnInit, ViewChild} from '@angular/core';
|
|
import {ChartConfiguration} from 'chart.js';
|
|
import {BaseChartDirective, NgChartsModule} from 'ng2-charts';
|
|
import {HttpClient} from "@angular/common/http";
|
|
import {environment} from "../../environments/environment";
|
|
import {DecimalPipe, JsonPipe, NgForOf, NgIf, NgOptimizedImage} from "@angular/common";
|
|
import {ActivatedRoute, RouterLink} from "@angular/router";
|
|
import {catchError, throwError} from "rxjs";
|
|
import {DistributionEntry, ReplayData} from "../replays";
|
|
import {calculateAccuracy} from "../format";
|
|
import {Title} from "@angular/platform-browser";
|
|
import {OsuGradeComponent} from "../../corelib/components/osu-grade/osu-grade.component";
|
|
import {ChartComponent} from "../../corelib/components/chart/chart.component";
|
|
import {
|
|
ChartHitDistributionComponent
|
|
} from "../../corelib/components/chart-hit-distribution/chart-hit-distribution.component";
|
|
|
|
@Component({
|
|
selector: 'app-view-score',
|
|
standalone: true,
|
|
imports: [
|
|
NgChartsModule,
|
|
JsonPipe,
|
|
NgIf,
|
|
DecimalPipe,
|
|
NgForOf,
|
|
NgOptimizedImage,
|
|
RouterLink,
|
|
OsuGradeComponent,
|
|
ChartComponent,
|
|
ChartHitDistributionComponent
|
|
],
|
|
templateUrl: './view-score.component.html',
|
|
styleUrl: './view-score.component.css'
|
|
})
|
|
export class ViewScoreComponent implements OnInit {
|
|
|
|
@ViewChild(BaseChartDirective)
|
|
public chart!: BaseChartDirective;
|
|
|
|
isLoading = false;
|
|
error: string | null = null;
|
|
replayData: ReplayData | null = null;
|
|
replayId: number | null = null;
|
|
|
|
constructor(private http: HttpClient,
|
|
private activatedRoute: ActivatedRoute,
|
|
private title: Title
|
|
) {}
|
|
|
|
hasReplay(): boolean {
|
|
return !!this.replayData?.error_distribution && Object.keys(this.replayData.error_distribution).length > 0;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.activatedRoute.params.subscribe(params => {
|
|
this.replayId = params['replayId'];
|
|
if (this.replayId) {
|
|
this.loadScoreData();
|
|
}
|
|
});
|
|
}
|
|
|
|
buildCircleguardUrl(): string {
|
|
if(!this.replayData) {
|
|
return "";
|
|
}
|
|
|
|
let url = "circleguard://m=" + this.replayData.beatmap_id + "&u=" + this.replayData.user_id;
|
|
|
|
if (this.replayData.mods.length > 0) {
|
|
url += "&m1=" + this.replayData.mods.join('');
|
|
}
|
|
|
|
return url;
|
|
}
|
|
|
|
private loadScoreData(): void {
|
|
this.isLoading = true;
|
|
this.http.get<ReplayData>(`${environment.apiUrl}/score/${this.replayId}`).pipe(
|
|
catchError(error => {
|
|
this.isLoading = false;
|
|
return throwError(() => new Error('An error occurred with the request: ' + error.message));
|
|
})
|
|
).subscribe({
|
|
next: (response) => {
|
|
this.isLoading = false;
|
|
this.replayData = response;
|
|
|
|
this.title.setTitle(
|
|
`${this.replayData.username} on ${this.replayData.beatmap_title} (${this.replayData.beatmap_version})`
|
|
)
|
|
},
|
|
error: (error) => {
|
|
this.error = error;
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
protected readonly Object = Object;
|
|
protected readonly calculateAccuracy = calculateAccuracy;
|
|
|
|
}
|