92 lines
2.1 KiB
TypeScript
92 lines
2.1 KiB
TypeScript
|
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
||
|
|
import {getEvents} from "./decode-replay";
|
||
|
|
import {DecimalPipe, JsonPipe} from "@angular/common";
|
||
|
|
import {beatmapData, replayData} from "./sample-replay";
|
||
|
|
import {ReplayService} from "./replay-service";
|
||
|
|
import {FormsModule} from "@angular/forms";
|
||
|
|
import {parseHitObjects} from "./decode-beatmap";
|
||
|
|
import {processReplay} from "./process-replay";
|
||
|
|
|
||
|
|
export enum KeyPress {
|
||
|
|
M1 = 1,
|
||
|
|
M2 = 2,
|
||
|
|
K1 = 5,
|
||
|
|
K2 = 10,
|
||
|
|
Smoke = 16,
|
||
|
|
}
|
||
|
|
|
||
|
|
export interface ReplayEvent {
|
||
|
|
/**
|
||
|
|
* Time in milliseconds since the previous action
|
||
|
|
*/
|
||
|
|
timeDelta: number;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* x-coordinate of the cursor from 0 - 512
|
||
|
|
*/
|
||
|
|
x: number;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* y-coordinate of the cursor from 0 - 384
|
||
|
|
*/
|
||
|
|
y: number;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Key being pressed.
|
||
|
|
*/
|
||
|
|
key: KeyPress;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'app-replay-viewer',
|
||
|
|
standalone: true,
|
||
|
|
imports: [
|
||
|
|
JsonPipe,
|
||
|
|
FormsModule,
|
||
|
|
DecimalPipe
|
||
|
|
],
|
||
|
|
templateUrl: './replay-viewer.component.html',
|
||
|
|
styleUrl: './replay-viewer.component.css'
|
||
|
|
})
|
||
|
|
export class ReplayViewerComponent implements OnInit, AfterViewInit {
|
||
|
|
|
||
|
|
@ViewChild('replayCanvas') replayCanvas!: ElementRef<HTMLCanvasElement>;
|
||
|
|
private ctx!: CanvasRenderingContext2D;
|
||
|
|
|
||
|
|
constructor(public replayService: ReplayService) { }
|
||
|
|
|
||
|
|
ngOnInit() {
|
||
|
|
// Assume getEvents() method returns a promise of ReplayEvent[]
|
||
|
|
getEvents(replayData).then(events => {
|
||
|
|
this.replayService.setEvents(processReplay(events));
|
||
|
|
this.replayService.setHitObjects(parseHitObjects(beatmapData))
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
ngAfterViewInit() {
|
||
|
|
this.ctx = this.replayCanvas.nativeElement.getContext('2d')!;
|
||
|
|
|
||
|
|
this.replayService.setCanvasElement(this.replayCanvas);
|
||
|
|
this.replayService.setCanvasContext(this.ctx);
|
||
|
|
|
||
|
|
this.replayService.start(); // Start the animation loop
|
||
|
|
}
|
||
|
|
|
||
|
|
togglePlayPause() {
|
||
|
|
if (this.replayService.getIsPlaying()) {
|
||
|
|
this.replayService.pause();
|
||
|
|
} else {
|
||
|
|
this.replayService.start();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
seek(time: number) {
|
||
|
|
this.replayService.seek(time);
|
||
|
|
if (!this.replayService.getIsPlaying()) {
|
||
|
|
// Redraw the canvas for the new current time without resuming playback
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|