From e413b2d76ea293a64fe9ec498f6c207bb5ad8bff Mon Sep 17 00:00:00 2001
From: "nise.moe" <hey@nise.moe>
Date: Mon, 4 Mar 2024 15:26:11 +0100
Subject: [PATCH] Added replay-viewer support for replay pairs

---
 .../main/kotlin/com/nisemoe/nise/Models.kt    |   9 ++
 .../nise/controller/ScoreController.kt        |  14 +--
 .../com/nisemoe/nise/database/ScoreService.kt |  26 +++++-
 nise-replay-viewer/index.html                 |   2 +-
 nise-replay-viewer/public/cursor2.png         | Bin 0 -> 13243 bytes
 nise-replay-viewer/src/interface/App.tsx      |  33 ++++---
 .../src/interface/composites/Menu.tsx         |  11 ++-
 nise-replay-viewer/src/osu/Drawer.ts          |   4 +-
 nise-replay-viewer/src/osu/OsuRenderer.ts     |  85 ++++++++++++++++--
 nise-replay-viewer/src/utils.ts               |   6 --
 10 files changed, 154 insertions(+), 36 deletions(-)
 create mode 100644 nise-replay-viewer/public/cursor2.png

diff --git a/nise-backend/src/main/kotlin/com/nisemoe/nise/Models.kt b/nise-backend/src/main/kotlin/com/nisemoe/nise/Models.kt
index c0ecfe9..f7fff2a 100644
--- a/nise-backend/src/main/kotlin/com/nisemoe/nise/Models.kt
+++ b/nise-backend/src/main/kotlin/com/nisemoe/nise/Models.kt
@@ -102,6 +102,15 @@ data class ReplayViewerData(
     val judgements: List<CircleguardService.ScoreJudgement>
 )
 
+data class ReplayPairViewerData(
+    val beatmap: String,
+    val replay1: String,
+    val replay2: String,
+    val mods: Int,
+    val judgements1: List<CircleguardService.ScoreJudgement>,
+    val judgements2: List<CircleguardService.ScoreJudgement>
+)
+
 data class ReplayData(
     val replay_id: Long,
     val user_id: Int,
diff --git a/nise-backend/src/main/kotlin/com/nisemoe/nise/controller/ScoreController.kt b/nise-backend/src/main/kotlin/com/nisemoe/nise/controller/ScoreController.kt
index 3fd5581..fd04344 100644
--- a/nise-backend/src/main/kotlin/com/nisemoe/nise/controller/ScoreController.kt
+++ b/nise-backend/src/main/kotlin/com/nisemoe/nise/controller/ScoreController.kt
@@ -1,12 +1,8 @@
 package com.nisemoe.nise.controller
 
-import com.nisemoe.nise.Format
-import com.nisemoe.nise.ReplayData
-import com.nisemoe.nise.ReplayPair
-import com.nisemoe.nise.ReplayViewerData
+import com.nisemoe.nise.*
 import com.nisemoe.nise.database.ScoreService
 import org.springframework.http.ResponseEntity
-import org.springframework.web.bind.annotation.CrossOrigin
 import org.springframework.web.bind.annotation.GetMapping
 import org.springframework.web.bind.annotation.PathVariable
 import org.springframework.web.bind.annotation.RestController
@@ -32,6 +28,14 @@ class ScoreController(
         return ResponseEntity.ok(replayData)
     }
 
+    @GetMapping("pair/{replay1Id}/{replay2Id}/replay")
+    fun getPairReplays(@PathVariable replay1Id: Long, @PathVariable replay2Id: Long): ResponseEntity<ReplayPairViewerData> {
+        val replayPairViewerData = this.scoreService.getReplayPairViewerData(replay1Id, replay2Id)
+            ?: return ResponseEntity.notFound().build()
+
+        return ResponseEntity.ok(replayPairViewerData)
+    }
+
     @GetMapping("pair/{replay1Id}/{replay2Id}")
     fun getPairDetails(@PathVariable replay1Id: Long, @PathVariable replay2Id: Long): ResponseEntity<ReplayPair> {
         val replay1Data = this.scoreService.getReplayData(replay1Id)
diff --git a/nise-backend/src/main/kotlin/com/nisemoe/nise/database/ScoreService.kt b/nise-backend/src/main/kotlin/com/nisemoe/nise/database/ScoreService.kt
index 1d50cb2..3ea2b3e 100644
--- a/nise-backend/src/main/kotlin/com/nisemoe/nise/database/ScoreService.kt
+++ b/nise-backend/src/main/kotlin/com/nisemoe/nise/database/ScoreService.kt
@@ -1,5 +1,6 @@
 package com.nisemoe.nise.database
 
+import com.nisemoe.generated.enums.JudgementType
 import com.nisemoe.generated.tables.records.ScoresJudgementsRecord
 import com.nisemoe.generated.tables.records.ScoresRecord
 import com.nisemoe.generated.tables.references.*
@@ -48,6 +49,20 @@ class ScoreService(
             .mapNotNull { (scoreType, title) -> db.get(scoreType)?.let { ReplayDataChart(title, it.filterNotNull()) } }
     }
 
+    fun getReplayPairViewerData(replay1Id: Long, replay2Id: Long): ReplayPairViewerData? {
+        val replay1 = getReplayViewerData(replay1Id) ?: return null
+        val replay2 = getReplayViewerData(replay2Id) ?: return null
+
+        return ReplayPairViewerData(
+            beatmap = replay1.beatmap,
+            replay1 = replay1.replay,
+            replay2 = replay2.replay,
+            mods = replay1.mods,
+            judgements1 = replay1.judgements,
+            judgements2 = replay2.judgements
+        )
+    }
+
     fun getReplayViewerData(replayId: Long): ReplayViewerData? {
         val beatmapId = dslContext.select(SCORES.BEATMAP_ID)
             .from(SCORES)
@@ -463,6 +478,15 @@ class ScoreService(
         replayData.comparable_error_skewness = otherScores.get("avg_error_skewness", Double::class.java)
     }
 
+    fun mapLegacyJudgement(judgementType: JudgementType): CircleguardService.JudgementType {
+        return when(judgementType) {
+            JudgementType.Miss -> CircleguardService.JudgementType.MISS
+            JudgementType.`300` -> CircleguardService.JudgementType.THREE_HUNDRED
+            JudgementType.`100` -> CircleguardService.JudgementType.ONE_HUNDRED
+            JudgementType.`50` -> CircleguardService.JudgementType.FIFTY
+        }
+    }
+
     fun getJudgements(replayId: Long): List<CircleguardService.ScoreJudgement> {
         val judgementsRecord = dslContext.select(SCORES.JUDGEMENTS)
             .from(SCORES)
@@ -486,7 +510,7 @@ class ScoreService(
                     distance_center = it.distanceCenter!!,
                     distance_edge = it.distanceEdge!!,
                     time = it.time!!,
-                    type = CircleguardService.JudgementType.valueOf(it.type!!.literal),
+                    type = mapLegacyJudgement(it.type!!)
                 )
             }
         }
diff --git a/nise-replay-viewer/index.html b/nise-replay-viewer/index.html
index 6ec771e..5ba5ebe 100644
--- a/nise-replay-viewer/index.html
+++ b/nise-replay-viewer/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>/replay/</title>
+  <title>/replay/ - nise.moe</title>
   <link rel="icon" type="image/x-icon" href="https://nise.moe/assets/favicon.ico">
   <!-- Embed data -->
   <meta property="og:title" content="/nise.moe/ - osu!cheaters finder">
diff --git a/nise-replay-viewer/public/cursor2.png b/nise-replay-viewer/public/cursor2.png
new file mode 100644
index 0000000000000000000000000000000000000000..8f789fe3925a86cf883fab036dec185e4e7c89ba
GIT binary patch
literal 13243
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

literal 0
HcmV?d00001

diff --git a/nise-replay-viewer/src/interface/App.tsx b/nise-replay-viewer/src/interface/App.tsx
index 6808e93..bf96af4 100644
--- a/nise-replay-viewer/src/interface/App.tsx
+++ b/nise-replay-viewer/src/interface/App.tsx
@@ -2,28 +2,35 @@ import {AboutDialog} from "./composites/about-dialog";
 import {Navbar} from "./composites/Menu";
 import {SongSlider} from "./composites/song-slider";
 import {Helper} from "./composites/helper";
-import {useEffect, useState} from "react";
+import {useEffect} from "react";
 import {OsuRenderer} from "@/osu/OsuRenderer";
 import {Stats} from "@/interface/composites/stats";
 
 export function App() {
 
-    const [replayId, setReplayId] = useState<number>(0);
+    const loadReplay = async (replayId: number) => {
+        await OsuRenderer.loadReplayFromUrl(replayId);
+    };
+
+    const loadReplayPair = async (replayId1: number, replayId2: number) => {
+        await OsuRenderer.loadReplayPairFromUrl(replayId1, replayId2);
+    }
 
     useEffect(() => {
-        let pathReplayId = Number.parseInt(location.pathname.slice(1, location.pathname.length));
+        // This pattern matches one or more digits followed by an optional slash and any characters (non-greedy)
+        const pathRegex = /^\/(\d+)(?:\/(\d+))?/;
+        const match = location.pathname.match(pathRegex);
 
-        const loadReplay = async () => {
-            if(document.location.hostname === "localhost") {
-                await OsuRenderer.loadReplayFromUrl(`http://localhost:8080/score/${pathReplayId}/replay`, pathReplayId);
-                return;
+        if (match) {
+            // match[1] will contain the first ID, match[2] (if present) will contain the second ID
+            const pathReplayId1 = Number.parseInt(match[1]);
+            const pathReplayId2 = match[2] ? Number.parseInt(match[2]) : null;
+
+            if(pathReplayId2 != null) {
+                loadReplayPair(pathReplayId1, pathReplayId2);
+            } else {
+                loadReplay(pathReplayId1);
             }
-            await OsuRenderer.loadReplayFromUrl(`https://nise.moe/api/score/${pathReplayId}/replay`, pathReplayId);
-        };
-
-        if(replayId !== pathReplayId) {
-            setReplayId(pathReplayId);
-            loadReplay();
         }
     }, [location.pathname]);
 
diff --git a/nise-replay-viewer/src/interface/composites/Menu.tsx b/nise-replay-viewer/src/interface/composites/Menu.tsx
index 2167058..17c5c8b 100644
--- a/nise-replay-viewer/src/interface/composites/Menu.tsx
+++ b/nise-replay-viewer/src/interface/composites/Menu.tsx
@@ -23,11 +23,16 @@ export function Navbar() {
 
           {OsuRenderer.beatmap && (
               <>
-                {" "}
+                {OsuRenderer.replay2 == null && (
                 <a href={"https://nise.moe/s/" + OsuRenderer.replay.info.id} target="_blank"
                    className="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent hover:bg-accent">
                   View on nise.moe
-                </a>
+                </a>)}
+                {OsuRenderer.replay2 && (
+                    <a href={"https://nise.moe/p/" + OsuRenderer.replay.info.id + "/" + OsuRenderer.replay2.info.id} target="_blank"
+                          className="flex items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-accent hover:bg-accent">
+                         View on nise.moe
+                    </a>)}
               </>
           )}
         </div>
@@ -37,7 +42,7 @@ export function Navbar() {
               {mods?.map((mod) => {
                 return (
                     <img
-                        src={`./mod_${mod.acronym.toLowerCase()}.png`}
+                        src={`/mod_${mod.acronym.toLowerCase()}.png`}
                         className="h-5"
                     ></img>
                 );
diff --git a/nise-replay-viewer/src/osu/Drawer.ts b/nise-replay-viewer/src/osu/Drawer.ts
index 3ca9f91..b93bb98 100644
--- a/nise-replay-viewer/src/osu/Drawer.ts
+++ b/nise-replay-viewer/src/osu/Drawer.ts
@@ -10,6 +10,7 @@ export class Drawer {
 
   static images = {
     cursor: undefined as any as p5.Image,
+    cursor2: undefined as any as p5.Image,
     cursortrail: undefined as any as p5.Image,
     hitcircle: undefined as any as p5.Image,
     hitcircleoverlay: undefined as any as p5.Image,
@@ -183,6 +184,7 @@ export class Drawer {
 
 
   static drawCursorPath(
+    cursorImage: p5.Image,
     path: {
       position: Vector2;
       time: number;
@@ -251,7 +253,7 @@ export class Drawer {
 
     if (cursor.position)
       Drawer.p.image(
-        this.images.cursor,
+        cursorImage,
         cursor.position.x,
         cursor.position.y,
         55,
diff --git a/nise-replay-viewer/src/osu/OsuRenderer.ts b/nise-replay-viewer/src/osu/OsuRenderer.ts
index 0f9a7ca..93de7d7 100644
--- a/nise-replay-viewer/src/osu/OsuRenderer.ts
+++ b/nise-replay-viewer/src/osu/OsuRenderer.ts
@@ -1,4 +1,4 @@
-import {HitResult, LegacyReplayFrame, Score, Vector2} from "osu-classes";
+import {HitResult, LegacyReplayFrame, Replay, Score, Vector2} from "osu-classes";
 import {BeatmapDecoder, BeatmapEncoder} from "osu-parsers";
 import {
   Circle,
@@ -15,6 +15,7 @@ import {Vec2} from "@osujs/math";
 import {clamp, getBeatmap, getReplay} from "@/utils";
 import EventEmitter from "eventemitter3";
 import {toast} from "sonner";
+import p5 from "p5";
 
 export enum OsuRendererEvents {
   UPDATE = "UPDATE",
@@ -56,6 +57,8 @@ export class OsuRenderer {
   static event = new OsuRendererBridge();
 
   static judgements: Judgements[] = [];
+  static judgements2: Judgements[] = [];
+
   static speedMultiplier = 1;
   static settings: OsuRendererSettings = {
     showCursorPath: true,
@@ -73,7 +76,10 @@ export class OsuRenderer {
 
   static beatmap: StandardBeatmap;
   static og_beatmap: StandardBeatmap;
+
   static replay: Score;
+  static replay2: Score | undefined;
+
   static og_replay_mods: StandardModCombination;
   static forceHR: boolean | undefined = undefined;
 
@@ -137,7 +143,11 @@ export class OsuRenderer {
 
     this.lastRender = Date.now();
 
-    this.renderPath();
+    this.renderPath(this.replay.replay!, Drawer.images.cursor);
+    if(this.replay2) {
+        this.renderPath(this.replay2.replay!, Drawer.images.cursor2);
+    }
+
     Drawer.drawField();
   }
 
@@ -216,9 +226,56 @@ export class OsuRenderer {
     });
   }
 
-  static async loadReplayFromUrl(url: string, replayId: number) {
+  static getApiUrl(): string {
+    return document.location.hostname === "localhost"
+      ? `http://localhost:8080`
+      : `https://nise.moe/api`;
+  }
+
+  static async loadReplayPairFromUrl(replayId1: number, replayId2: number) {
     OsuRenderer.purge();
 
+    const apiUrl = `${this.getApiUrl()}/pair/${replayId1}/${replayId2}/replay`;
+
+    const response = await fetch(apiUrl, {
+      headers: {
+        'X-NISE-REPLAY': '20240303'
+      }
+    });
+
+    let data;
+
+    if (!response.ok) {
+      toast.error("Failed to load replay :(");
+      return Promise.reject();
+    } else {
+      data = await response.json();
+    }
+
+    const { beatmap, replay1, replay2, mods, judgements1, judgements2 } = data;
+
+    // Load replays
+    const i_replay1 = await getReplay(replay1);
+    i_replay1.info.id = replayId1;
+    i_replay1.info.rawMods = mods;
+    i_replay1.info.mods = new StandardModCombination(mods);
+
+    const i_replay2 = await getReplay(replay2);
+    i_replay2.info.id = replayId2;
+    i_replay2.info.rawMods = mods;
+    i_replay2.info.mods = new StandardModCombination(mods);
+
+    const i_beatmap = await getBeatmap(beatmap, i_replay1);
+
+    OsuRenderer.setPairOptions(i_beatmap, i_replay1, i_replay2, judgements1, judgements2);
+    this.event.emit(OsuRendererEvents.LOAD);
+  }
+
+  static async loadReplayFromUrl(replayId: number) {
+    OsuRenderer.purge();
+
+    const url = `${this.getApiUrl()}/score/${replayId}/replay`;
+
     const response = await fetch(url, {
       headers: {
         'X-NISE-REPLAY': '20240303'
@@ -247,6 +304,22 @@ export class OsuRenderer {
     this.event.emit(OsuRendererEvents.LOAD);
   }
 
+  static setPairOptions(beatmap: StandardBeatmap, replay1: Score, replay2: Score, judgements1: Judgements[], judgements2: Judgements[]) {
+    this.judgements = judgements1;
+    this.judgements2 = judgements2;
+    this.forceHR = undefined;
+    this.replay = replay1;
+    this.replay2 = replay2;
+    this.beatmap = beatmap;
+    this.og_beatmap = beatmap.clone();
+    this.og_replay_mods = replay1.info.mods?.clone() as StandardModCombination;
+    this.setMetadata({
+      AR: this.beatmap.difficulty.approachRate,
+      CS: this.beatmap.difficulty.circleSize,
+      OD: this.beatmap.difficulty.overallDifficulty,
+    });
+  }
+
   static setOptions(beatmap: StandardBeatmap, replay: Score, judgements: Judgements[] ) {
     this.judgements = judgements;
     this.forceHR = undefined;
@@ -457,8 +530,8 @@ export class OsuRenderer {
     return arScale;
   }
 
-  private static renderPath() {
-    const frames = this.replay.replay!.frames as LegacyReplayFrame[];
+  private static renderPath(replay: Replay, cursorImage: p5.Image) {
+    const frames = replay.frames as LegacyReplayFrame[];
     const renderFrames: {
       position: Vector2;
       time: number;
@@ -505,7 +578,7 @@ export class OsuRenderer {
       });
     }
 
-    Drawer.drawCursorPath(renderFrames, cursorPushed);
+    Drawer.drawCursorPath(cursorImage, renderFrames, cursorPushed);
 
     return cursorPushed;
   }
diff --git a/nise-replay-viewer/src/utils.ts b/nise-replay-viewer/src/utils.ts
index 022fc17..21ef2a8 100644
--- a/nise-replay-viewer/src/utils.ts
+++ b/nise-replay-viewer/src/utils.ts
@@ -73,12 +73,6 @@ export const state = create<{
   speed: 1
 }));
 
-state.subscribe((newState) => {
-  if (newState.beatmap) {
-    document.title = `Viewing replay #${newState.replay?.info.id}`
-  }
-})
-
 export let p: p5;
 
 export function setEnv(_p: p5) {