Updated render keypress visualization

nise-replay-viewer/osu-parsers/lib/browser.mjs

@@ -2585,6 +2585,7 @@ class ReplayDecoder {
     }
 
     let lastTime = 0;
+    let lastKeyPress = null;
     const replayFrames = [];
     const frames = data.split(",");
 
@@ -2603,7 +2604,22 @@ class ReplayDecoder {
         continue;
       }
 
-      const replayFrame = this.handleReplayFrame(frameData);
+      let currentKeyPress = Parsing.parseInt(frameData[3]);
+      if (currentKeyPress === lastKeyPress) {
+        currentKeyPress = 0; // Set to 0 if key press state hasn't changed
+      } else {
+        lastKeyPress = currentKeyPress; // Update lastKeyPress with new state
+      }
+
+      const replayFrame = new LegacyReplayFrame(
+          0.0,
+          Parsing.parseFloat(frameData[0]),
+          new Vector2(
+              Parsing.parseFloat(frameData[1], Parsing.MAX_COORDINATE_VALUE),
+              Parsing.parseFloat(frameData[2], Parsing.MAX_COORDINATE_VALUE)
+          ),
+          currentKeyPress
+      );
 
       lastTime += replayFrame.interval;
 
@@ -2621,17 +2637,7 @@ class ReplayDecoder {
 
     return replayFrames;
   }
-  static handleReplayFrame(frameData) {
+
-    return new LegacyReplayFrame(
-      0.0,
-      Parsing.parseFloat(frameData[0]),
-      new Vector2(
-        Parsing.parseFloat(frameData[1], Parsing.MAX_COORDINATE_VALUE),
-        Parsing.parseFloat(frameData[2], Parsing.MAX_COORDINATE_VALUE)
-      ),
-      Parsing.parseInt(frameData[3])
-    );
-  }
 }
 
 class SerializationReader {

nise-replay-viewer/src/osu/Drawer.ts

@@ -222,24 +222,6 @@ export class Drawer {
         continue;
       }
 
-      if(OsuRenderer.settings.showKeyPress) {
-
-        if(!OsuRenderer.settings.showFutureCursorPath && lastFrame.time > OsuRenderer.time) {
-          continue;
-        }
-
-        if (lastFrame.button.mouseLeft1 || lastFrame.button.mouseLeft2) {
-          Drawer.p.stroke("#BB6BD9");
-          Drawer.p.circle(lastFrame.position.x, lastFrame.position.y, 15);
-        }
-
-        if (lastFrame.button.mouseRight1 || lastFrame.button.mouseRight2) {
-          Drawer.p.stroke("#F2994A");
-          Drawer.p.circle(lastFrame.position.x, lastFrame.position.y, 15);
-        }
-
-      }
-
       if(OsuRenderer.settings.showCursorPath) {
         Drawer.p.stroke("white");
         Drawer.p.line(
@@ -249,6 +231,29 @@ export class Drawer {
             frame.position.y
         );
       }
+
+      if(OsuRenderer.settings.showKeyPress) {
+
+        if(!OsuRenderer.settings.showFutureCursorPath && lastFrame.time > OsuRenderer.time) {
+          continue;
+        }
+
+        let size = 4;
+        if (lastFrame.button.mouseLeft1 || lastFrame.button.mouseLeft2) {
+          Drawer.p.stroke("#BB6BD9");
+          // TODO: Draw an X instead
+          Drawer.p.line(lastFrame.position.x - size, lastFrame.position.y - size, lastFrame.position.x + size, lastFrame.position.y + size);
+          Drawer.p.line(lastFrame.position.x + size, lastFrame.position.y - size, lastFrame.position.x - size, lastFrame.position.y + size);
+        }
+
+        if (lastFrame.button.mouseRight1 || lastFrame.button.mouseRight2) {
+          Drawer.p.stroke("#F2994A");
+          // TODO: Draw an X instead
+          Drawer.p.line(lastFrame.position.x - size, lastFrame.position.y - size, lastFrame.position.x + size, lastFrame.position.y + size);
+          Drawer.p.line(lastFrame.position.x + size, lastFrame.position.y - size, lastFrame.position.x - size, lastFrame.position.y + size);
+        }
+
+      }
     }
 
     if (cursor.position)

nise-replay-viewer/src/osu/OsuRenderer.ts

@@ -352,6 +352,11 @@ export class OsuRenderer {
     if (hitObject instanceof Slider) {
       this.renderSlider(hitObject);
     }
+
+    if (hitObject instanceof Spinner) {
+      // TODO
+      // this.renderSpinner(hitObject);
+    }
   }
 
   private static calculateEffects(hitObject: StandardHitObject) {