yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-10-01 05:39:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

Scoresheet: Fix animation speed on window resize

Browse Source
This commit is contained in:
LoveEevee 2019-01-01 18:00:00 +03:00
parent 38ae93f9fb
commit 6c182d2c47
2 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/src/css/songbg.css
View File

@ -246,6 +246,7 @@
} }
#tetsuohana.fadein, #tetsuohana.fadein,
#tetsuohana.dance, #tetsuohana.dance,
#tetsuohana.dance2,
#tetsuohana.failed{ #tetsuohana.failed{
height: calc(461px * var(--scale)); height: calc(461px * var(--scale));
} }
@ -280,13 +281,17 @@
100%{transform: translateY(0)} 100%{transform: translateY(0)}
} }
#tetsuohana.dance #tetsuo, #tetsuohana.dance #tetsuo,
#tetsuohana.dance #hana{ #tetsuohana.dance #hana,
#tetsuohana.dance2 #tetsuo,
#tetsuohana.dance2 #hana{
--frame: 1; --frame: 1;
transform: translateY(var(--low)); transform: translateY(var(--low));
animation: 0.5s ease-out tetsuohana-dance infinite forwards; animation: 0.5s ease-out tetsuohana-dance infinite forwards;
} }
#tetsuohana.dance #tetsuo-in, #tetsuohana.dance #tetsuo-in,
#tetsuohana.dance #hana-in{ #tetsuohana.dance #hana-in,
#tetsuohana.dance2 #tetsuo-in,
#tetsuohana.dance2 #hana-in{
transform: translateY(0); transform: translateY(0);
animation: 0.5s ease-out tetsuohana-dance infinite forwards reverse; animation: 0.5s ease-out tetsuohana-dance infinite forwards reverse;
} }
@ -295,10 +300,18 @@
transform: translateY(0) scaleX(var(--flip)); transform: translateY(0) scaleX(var(--flip));
transition: 0.34s transform ease-out; transition: 0.34s transform ease-out;
} }
#tetsuohana.dance2 #flowers1,
#tetsuohana.dance2 #flowers2{
transform: translateY(0) scaleX(var(--flip));
}
#tetsuohana.dance #flowers1-in, #tetsuohana.dance #flowers1-in,
#tetsuohana.dance #flowers2-in{ #tetsuohana.dance #flowers2-in{
animation: 0.25s 0.4s step-end tetsuohana-flowers both; 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{ #tetsuohana.dance #mikoshi-out{
animation: 0.4s 0.4s ease-out tetsuohana-mikoshi both; animation: 0.4s 0.4s ease-out tetsuohana-mikoshi both;
} }
@ -310,6 +323,14 @@
transform: translateY(0); transform: translateY(0);
animation: 0.5s 0.8s ease-out tetsuohana-dance infinite forwards reverse; 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 #tetsuo,
#tetsuohana.failed #hana{ #tetsuohana.failed #hana{
--frame: 2; --frame: 2;

17
public/src/js/scoresheet.js
View File

@ -191,6 +191,17 @@ class Scoresheet{
if(!this.multiplayer){ if(!this.multiplayer){
this.tetsuoHana.style.setProperty("--scale", ratio / this.pixelRatio) 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"){ }else if(!document.hasFocus() && this.state.screen === "scoresShown"){
return return
@ -514,12 +525,12 @@ class Scoresheet{
this.tetsuoHanaClass = "fadein" this.tetsuoHanaClass = "fadein"
} }
}else if(elapsed >= 3100 + failedOffset){ }else if(elapsed >= 3100 + failedOffset){
if(this.tetsuoHanaClass !== "dance"){ if(this.tetsuoHanaClass !== "dance" && this.tetsuoHanaClass !== "failed"){
if(this.tetsuoHanaClass){ if(this.tetsuoHanaClass){
this.tetsuoHana.classList.remove(this.tetsuoHanaClass) this.tetsuoHana.classList.remove(this.tetsuoHanaClass)
} }
this.tetsuoHana.classList.add(gaugePercent >= gaugeClear ? "dance" : "failed") this.tetsuoHanaClass = gaugePercent >= gaugeClear ? "dance" : "failed"
this.tetsuoHanaClass = "dance" this.tetsuoHana.classList.add(this.tetsuoHanaClass)
} }
} }
} }