From d5b0444388c4e197e7b4eee670d34732d88d371a Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Mon, 13 Feb 2023 14:57:50 +0100
Subject: [PATCH] change(player): move animation to css

---
 frontend/app/player/web/Screen/Cursor.ts      | 20 ++++----------
 .../app/player/web/Screen/cursor.module.css   | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/frontend/app/player/web/Screen/Cursor.ts b/frontend/app/player/web/Screen/Cursor.ts
index b6a475331..dc3637c1b 100644
--- a/frontend/app/player/web/Screen/Cursor.ts
+++ b/frontend/app/player/web/Screen/Cursor.ts
@@ -65,21 +65,11 @@ export default class Cursor {
     this.cursor.style.transition = 'top .125s linear, left .125s linear'
   }
 
-  shake(iteration = 1, upwards = true, original: { x: number, y: number } = this.coords) {
-    if (this.isMoving) {
-      return this.setDefaultStyle()
-    }
-    if (iteration < 10) {
-      this.cursor.style.transition = 'top .06s linear, left .06s linear'
-      this.cursor.style.width = 45 + 'px'
-      this.cursor.style.height = 75 + 'px'
-      const shift = upwards ? 90 : -90
-      this.move({ x: this.coords.x + shift, y: this.coords.y - shift })
-      setTimeout(() => this.shake(iteration + 1, !upwards, original), 60)
-    } else {
-      this.setDefaultStyle()
-      return this.move(original)
-    }
+  shake() {
+    this.cursor.classList.add(styles.shaking)
+    setTimeout(() => {
+      this.cursor.classList.remove(styles.shaking)
+    }, 500)
   }
 
   click() {
diff --git a/frontend/app/player/web/Screen/cursor.module.css b/frontend/app/player/web/Screen/cursor.module.css
index 67d452953..238a53ca1 100644
--- a/frontend/app/player/web/Screen/cursor.module.css
+++ b/frontend/app/player/web/Screen/cursor.module.css
@@ -108,3 +108,29 @@
 		transform: scale3d(1, 1, 1);
 	}
 }
+
+.cursor.shaking {
+    width: 45px;
+    height: 75px;
+    -webkit-animation: shaking 0.3s linear;
+    animation: shaking 0.3s linear;
+    animation-iteration-count: 2;
+}
+
+@keyframes shaking {
+    0% {
+        transform: translate(60px, -60px);
+    }
+    25% {
+        transform: translate(-60px, 60px);
+    }
+    50% {
+        transform: translate(60px, -60px);
+    }
+    75% {
+        transform: translate(-60px, 60px);
+    }
+    100% {
+        transform: translate(60px, -60px);
+    }
+}
\ No newline at end of file