From 6c182d2c4728f6c5accd676e3a20eee2b4ca79ea Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 1 Jan 2019 18:00:00 +0300
Subject: [PATCH] Scoresheet: Fix animation speed on window resize

---
 public/src/css/songbg.css   | 25 +++++++++++++++++++++++--
 public/src/js/scoresheet.js | 17 ++++++++++++++---
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/public/src/css/songbg.css b/public/src/css/songbg.css
index f338b68..86b4987 100644
--- a/public/src/css/songbg.css
+++ b/public/src/css/songbg.css
@@ -246,6 +246,7 @@
 }
 #tetsuohana.fadein,
 #tetsuohana.dance,
+#tetsuohana.dance2,
 #tetsuohana.failed{
 	height: calc(461px * var(--scale));
 }
@@ -280,13 +281,17 @@
 	100%{transform: translateY(0)}
 }
 #tetsuohana.dance #tetsuo,
-#tetsuohana.dance #hana{
+#tetsuohana.dance #hana,
+#tetsuohana.dance2 #tetsuo,
+#tetsuohana.dance2 #hana{
 	--frame: 1;
 	transform: translateY(var(--low));
 	animation: 0.5s ease-out tetsuohana-dance infinite forwards;
 }
 #tetsuohana.dance #tetsuo-in,
-#tetsuohana.dance #hana-in{
+#tetsuohana.dance #hana-in,
+#tetsuohana.dance2 #tetsuo-in,
+#tetsuohana.dance2 #hana-in{
 	transform: translateY(0);
 	animation: 0.5s ease-out tetsuohana-dance infinite forwards reverse;
 }
@@ -295,10 +300,18 @@
 	transform: translateY(0) scaleX(var(--flip));
 	transition: 0.34s transform ease-out;
 }
+#tetsuohana.dance2 #flowers1,
+#tetsuohana.dance2 #flowers2{
+	transform: translateY(0) scaleX(var(--flip));
+}
 #tetsuohana.dance #flowers1-in,
 #tetsuohana.dance #flowers2-in{
 	animation: 0.25s 0.4s step-end tetsuohana-flowers both;
 }
+#tetsuohana.dance2 #flowers1-in,
+#tetsuohana.dance2 #flowers2-in{
+	background-position-y: calc(-318px * var(--scale));
+}
 #tetsuohana.dance #mikoshi-out{
 	animation: 0.4s 0.4s ease-out tetsuohana-mikoshi both;
 }
@@ -310,6 +323,14 @@
 	transform: translateY(0);
 	animation: 0.5s 0.8s ease-out tetsuohana-dance infinite forwards reverse;
 }
+#tetsuohana.dance2 #mikoshi{
+	transform: translateY(var(--low));
+	animation: 0.5s -0.2s ease-out tetsuohana-dance infinite forwards;
+}
+#tetsuohana.dance2 #mikoshi-in{
+	transform: translateY(0);
+	animation: 0.5s -0.2s ease-out tetsuohana-dance infinite forwards reverse;
+}
 #tetsuohana.failed #tetsuo,
 #tetsuohana.failed #hana{
 	--frame: 2;
diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js
index 4fdd589..e7e9303 100644
--- a/public/src/js/scoresheet.js
+++ b/public/src/js/scoresheet.js
@@ -191,6 +191,17 @@ class Scoresheet{
 				
 				if(!this.multiplayer){
 					this.tetsuoHana.style.setProperty("--scale", ratio / this.pixelRatio)
+					if(this.tetsuoHanaClass === "dance"){
+						this.tetsuoHana.classList.remove("dance", "dance2")
+						setTimeout(()=>{
+							this.tetsuoHana.classList.add("dance2")
+						},50)
+					}else if(this.tetsuoHanaClass === "failed"){
+						this.tetsuoHana.classList.remove("failed")
+						setTimeout(()=>{
+							this.tetsuoHana.classList.add("failed")
+						},50)
+					}
 				}
 			}else if(!document.hasFocus() && this.state.screen === "scoresShown"){
 				return
@@ -514,12 +525,12 @@ class Scoresheet{
 					this.tetsuoHanaClass = "fadein"
 				}
 			}else if(elapsed >= 3100 + failedOffset){
-				if(this.tetsuoHanaClass !== "dance"){
+				if(this.tetsuoHanaClass !== "dance" && this.tetsuoHanaClass !== "failed"){
 					if(this.tetsuoHanaClass){
 						this.tetsuoHana.classList.remove(this.tetsuoHanaClass)
 					}
-					this.tetsuoHana.classList.add(gaugePercent >= gaugeClear ? "dance" : "failed")
-					this.tetsuoHanaClass = "dance"
+					this.tetsuoHanaClass = gaugePercent >= gaugeClear ? "dance" : "failed"
+					this.tetsuoHana.classList.add(this.tetsuoHanaClass)
 				}
 			}
 		}