yuuki/taiko-web
1
0
Fork 0
mirror of https://github.com/yuukiwww/taiko-web.git synced 2024-09-30 21:29:31 +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.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;

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

@ -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)
}
}
}