Basic groundwork for replay viewer

nise-frontend/src/app/app.component.html

@@ -1,3 +1,31 @@
 <div class="header">
-  <app-replay-viewer></app-replay-viewer>
+  <div>
+    <a [routerLink]="['/']">
+      <img src="/assets/keisatsu-chan.png" class="header-image" alt="keisatsu-chan~!">
+    </a>
+  </div>
+  <div>
+    <h2>/nise.moe/</h2>
+    <ul style="font-size: 15px; line-height: 19px;">
+      <li><a [routerLink]="['/']">./home</a></li>
+      <li><a [routerLink]="['/sus']">./suspicious-scores</a></li>
+      <li><a [routerLink]="['/stolen']">./stolen-replays</a></li>
+      <li><a [routerLink]="['/search']">./advanced-search</a></li>
+    </ul>
+    <form (ngSubmit)="onSubmit()">
+      <input type="text" [(ngModel)]="term" [ngModelOptions]="{standalone: true}" id="nise-osu-username" required minlength="2" maxlength="50" placeholder="Search for users...">
+    </form>
+    <div style="margin-top: 6px">
+      <ng-container *ngIf="this.userService.isUserLoggedIn()">
+        hi, <span class="user-details" [title]="this.userService.currentUser?.username">{{this.userService.currentUser?.username}}</span> <a [href]="this.userService.getLogoutUrl()">Logout</a>
+      </ng-container>
+      <ng-container *ngIf="!this.userService.isUserLoggedIn()">
+        <a [href]="this.userService.getLoginUrl()">Login</a>
+      </ng-container>
+    </div>
+  </div>
+</div>
+<router-outlet></router-outlet>
+<div class="text-center version">
+  v20240225
 </div>

nise-frontend/src/app/app.component.ts

@@ -11,7 +11,8 @@ import {ReplayViewerComponent} from "../corelib/components/replay-viewer/replay-
   imports: [
     RouterLink,
     FormsModule,
-    NgIf, RouterOutlet, ReplayViewerComponent
+    NgIf,
+    RouterOutlet
   ],
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']

nise-frontend/src/app/view-score/view-score.component.html

@@ -12,6 +12,9 @@
     </div>
   </div>
 </ng-container>
+<div class="main term mb-2">
+  <app-replay-viewer></app-replay-viewer>
+</div>
 <ng-container *ngIf="this.replayData && !this.isLoading && !this.error">
   <div class="main term mb-2">
     <div class="fade-stuff">

nise-frontend/src/app/view-score/view-score.component.ts

@@ -11,6 +11,7 @@ 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 {ReplayViewerComponent} from "../../corelib/components/replay-viewer/replay-viewer.component";
 
 @Component({
   selector: 'app-view-score',
@@ -24,7 +25,8 @@ import {ChartComponent} from "../../corelib/components/chart/chart.component";
     NgOptimizedImage,
     RouterLink,
     OsuGradeComponent,
-    ChartComponent
+    ChartComponent,
+    ReplayViewerComponent
   ],
   templateUrl: './view-score.component.html',
   styleUrl: './view-score.component.css'

nise-frontend/src/corelib/components/replay-viewer/replay-viewer.component.ts

@@ -54,6 +54,24 @@ export class ReplayViewerComponent implements OnInit, AfterViewInit {
   @ViewChild('replayCanvas') replayCanvas!: ElementRef<HTMLCanvasElement>;
   private ctx!: CanvasRenderingContext2D;
 
+  // TODO: Calculate AudioLeadIn
+  // TODO: Calculate circle size (CS)
+  // TODO: Hard-Rock, DT, Easy
+
+  // TODO: Cursor trail and where keys are pressed
+  // TODO: Button for -100 ms, +100 ms, etc (precise seeking) (or keyboard shortcuts)
+
+  // TODO: Way to obtain replay+beatmap info from the backend
+
+  // TODO: UR bar
+  // Todo: Customizable speed
+  // TODO: Customizable zoom
+  // TODO: Fullscreen mode
+
+  // TODO: Hit/Miss, Combo, Accuracy
+
+  // TODO: Compare two replays for similarity (different cursor color)
+
   constructor(public replayService: ReplayService) { }
 
   ngOnInit() {