tweak mouse cursor

konekowo · Jun 28, 2024 · 6ccce6c · 6ccce6c
1 parent 37d4226
commit 6ccce6c
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 55 deletions.
diff --git a/src/CustomAnimation/Animation.ts b/src/CustomAnimation/Animation.ts
@@ -0,0 +1,46 @@
+export abstract class Animation {
+
+    private startTime: number;
+    private duration: number;
+    private elapsedMS: number = 0;
+    private reverse = false;
+    private doReverse;
+    public constructor(durationMS: number, doReverse:boolean, startTime?: number) {
+        if (!startTime) {
+            this.startTime = Date.now();
+        }
+        else {
+            this.startTime = startTime;
+        }
+        this.doReverse = doReverse;
+        this.duration = this.doReverse? durationMS/2 : durationMS;
+    }
+
+    public update() {
+        this.elapsedMS = Date.now() - this.startTime;
+        if (this.elapsedMS > this.duration) {
+            this.reset();
+            this.update();
+        }
+    }
+
+    public getValue() {
+        if (!this.reverse){
+            return this.func(this.elapsedMS/this.duration);
+        }
+        else {
+            return this.func(1 - (this.elapsedMS/this.duration));
+        }
+
+    }
+
+    private reset() {
+        this.startTime = Date.now();
+        this.elapsedMS = 0;
+        if (this.doReverse){
+            this.reverse = !this.reverse;
+        }
+    }
+
+    protected abstract func(x: number): number;
+}
diff --git a/src/CustomAnimation/impl/EaseOutElasticQuarter.ts b/src/CustomAnimation/impl/EaseOutElasticQuarter.ts
@@ -0,0 +1,8 @@
+import {Animation} from "../Animation";
+
+export class EaseOutElasticQuarter extends Animation {
+    private static readonly elastic_offset_quarter = Math.pow(2, -10) * Math.sin((.25 - (.3/4)) * (2 * Math.PI / .3));
+    protected func(x: number): number {
+        return Math.pow(2, -10 * x) * Math.sin((.25 * x - (.3/4)) * (2 * Math.PI / .3)) + 1 - EaseOutElasticQuarter.elastic_offset_quarter * x;
+    }
+}
diff --git a/src/CustomAnimation/impl/EaseOutSine.ts b/src/CustomAnimation/impl/EaseOutSine.ts
@@ -0,0 +1,7 @@
+import {Animation} from "../Animation";
+
+export class EaseOutSine extends Animation {
+    protected func(x: number): number {
+        return Math.sin((x * Math.PI) / 2);
+    }
+}
diff --git a/src/Elements/MainMenu/OsuCircle/OsuCircle.ts b/src/Elements/MainMenu/OsuCircle/OsuCircle.ts
@@ -20,6 +20,7 @@ export class OsuCircle extends PIXI.Container {
     private isBeingHovered = false;
     private readonly defaultVisualizerAlpha = 0.5;
     private timeElapsedSinceLastBeat = 0;
+    private visualizerAnimationDummy = new PIXI.Container();
 
     public constructor() {
         super();
@@ -158,12 +159,12 @@ export class OsuCircle extends PIXI.Container {
             () => {
                 ease.add(this.triangles.flash, {alpha: 0}, {duration: beatLength})
             });
-        let dummy = new PIXI.Container();
-        let visualizerEase = ease.add(dummy, {alpha: this.defaultVisualizerAlpha * 1.8 * amplitudeAdjust},
-            {duration: 60, ease: "linear"}).on("each", () => {this.visualizer.alphaMultiplier = dummy.alpha});
+
+        let visualizerEase = ease.add(this.visualizerAnimationDummy, {alpha: this.defaultVisualizerAlpha * 1.8 * amplitudeAdjust},
+            {duration: 60, ease: "linear"}).on("each", () => {this.visualizer.alphaMultiplier = this.visualizerAnimationDummy.alpha});
         visualizerEase.once("complete", () => {
-           ease.add(dummy, {alpha: this.defaultVisualizerAlpha}, {duration: beatLength, ease: "linear"}).on("each", () => {
-               this.visualizer.alphaMultiplier = dummy.alpha
+           ease.add(this.visualizerAnimationDummy, {alpha: this.defaultVisualizerAlpha}, {duration: beatLength, ease: "linear"}).on("each", () => {
+               this.visualizer.alphaMultiplier = this.visualizerAnimationDummy.alpha;
            });
         });
     }

diff --git a/src/Elements/MainMenu/OsuCircle/Triangles.ts b/src/Elements/MainMenu/OsuCircle/Triangles.ts
@@ -92,52 +92,3 @@ export interface Triangle {
     y: number;
     velocity: number;
 }
-
-export class EaseOutSine {
-
-    private startTime: number;
-    private duration: number;
-    private elapsedMS: number = 0;
-    private reverse = false;
-    private doReverse;
-    public constructor(durationMS: number, doReverse:boolean, startTime?: number) {
-        if (!startTime) {
-            this.startTime = Date.now();
-        }
-        else {
-            this.startTime = startTime;
-        }
-        this.doReverse = doReverse;
-        this.duration = this.doReverse? durationMS/2 : durationMS;
-    }
-
-    public update() {
-        this.elapsedMS = Date.now() - this.startTime;
-        if (this.elapsedMS > this.duration) {
-            this.reset();
-            this.update();
-        }
-    }
-
-    public getValue() {
-        if (!this.reverse){
-            return this.func(this.elapsedMS/this.duration);
-        }
-        else {
-            return this.func(1 - (this.elapsedMS/this.duration));
-        }
-
-    }
-
-    private reset() {
-        this.startTime = Date.now();
-        this.elapsedMS = 0;
-        if (this.doReverse){
-            this.reverse = !this.reverse;
-        }
-    }
-
-    public func(x: number): number {
-        return Math.sin((x * Math.PI) / 2);
-    }
-}
diff --git a/src/Elements/MenuCursor/MenuCursor.ts b/src/Elements/MenuCursor/MenuCursor.ts
@@ -16,6 +16,7 @@ export class MenuCursor extends PIXI.Container {
     private mouseUpAdditiveAnim: Easing | undefined;
     private mouseRotationAnim: Easing | undefined;
     private dragRotationState: DragRotationState = DragRotationState.NotDragging;
+    private lastDragRotationState: DragRotationState = DragRotationState.NotDragging;
     private mouseHideContainer = new PIXI.Container();
 
     private hideScaleAnim: Easing | undefined;
@@ -141,8 +142,11 @@ export class MenuCursor extends PIXI.Container {
         if (this.dragRotationState != DragRotationState.NotDragging && this.visible){
             let distance = Math.sqrt((((Math.abs(this.posMouseDown.x - Main.mousePos.x))^2) +
                 ((Math.abs(this.posMouseDown.y - Main.mousePos.y))^2)));
-            if (this.dragRotationState == DragRotationState.DragStarted && distance > 12){
+            if (this.dragRotationState == DragRotationState.DragStarted && distance > 15){
                 this.dragRotationState = DragRotationState.Rotating;
+                if (this.lastDragRotationState != this.dragRotationState) {
+                    this.posMouseDown = {x: Main.mousePos.x, y: Main.mousePos.y};
+                }
             }
 
             if (this.dragRotationState == DragRotationState.Rotating && distance > 0){
@@ -161,6 +165,7 @@ export class MenuCursor extends PIXI.Container {
                 this.mouseRotationAnim = ease.add(this.animRotationContainer, {angle: degrees}, {duration: 120, ease: "easeOutQuint"});
             }
         }
+        this.lastDragRotationState = this.dragRotationState;
 
     }