nanahira/taiko-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix browser compatibility

Browse Source
This commit is contained in:
LoveEevee 2019-01-01 07:45:13 +03:00
parent fc92c55370
commit f9bb8cabb0
2 changed files with 67 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -187,16 +187,23 @@
top: 0;
width: calc(292px * var(--scale));
height: calc(425px * var(--scale));
transform: translateY(calc(360px * var(--scale)));
}
#tetsuo-in,
#hana-in{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: calc(292px * var(--scale) * 2);
background-position-y: calc(-425px * var(--frame) * var(--scale));
transform: translateY(calc(360px * var(--scale)));
}
#tetsuo{
left: calc(173px * var(--scale));
}
#hana{
right: calc(178px * var(--scale));
}
#hana-in{
background-position-x: calc(-292px * var(--scale));
}
#mikoshi{
@ -205,9 +212,13 @@
left: calc(390px * var(--scale));
width: calc(553px * var(--scale));
height: calc(416px * var(--scale));
transform: translateY(calc(461px * var(--scale)));
}
#mikoshi-in{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
transform: translateY(calc(461px * var(--scale)));
}
#flowers1,
#flowers2{
@ -215,11 +226,15 @@
top: calc(218px * var(--scale));
width: calc(483px * var(--scale));
height: calc(159px * var(--scale));
transform: translateY(calc(243px * var(--scale))) scaleX(var(--flip));
}
#flowers1-in,
#flowers2-in{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: calc(483px * var(--scale));
background-position-y: calc(-159px * var(--frame) * var(--scale));
transform: translateY(calc(243px * var(--scale))) scaleX(var(--flip));
--frame: 0;
}
#flowers1{
left: 0;
@ -239,48 +254,71 @@
transition: 0.5s transform cubic-bezier(0.2, 0.6, 0.4, 1.2);
transform: translateY(var(--low));
}
@keyframes tetsuohana-dance1{
@keyframes tetsuohana-dance{
0%{transform: translateY(var(--low))}
50%{transform: translateY(0)}
}
@keyframes tetsuohana-dance2{
50%{transform: translateY(0)}
100%{transform: translateY(var(--low))}
100%{transform: translateY(0)}
}
@keyframes tetsuohana-failed1{
0%{transform: translateY(calc(10px * var(--scale)))}
50%{transform: translateY(0)}
100%{transform: translateY(0)}
}
@keyframes tetsuohana-failed2{
0%{transform: translateY(0)}
49%{transform: translateY(0)}
50%{transform: translateY(calc(5px * var(--scale)))}
100%{transform: translateY(calc(15px * var(--scale)))}
}
@keyframes tetsuohana-flowers{
0%{--frame: 0}
50%{--frame: 1}
100%{--frame: 2}
0%{background-position-y: 0}
50%{background-position-y: calc(-159px * var(--scale))}
100%{background-position-y: calc(-318px * var(--scale))}
}
@keyframes tetsuohana-mikoshi{
0%{transform: translateY(calc(425px * var(--scale)))}
100%{transform: translateY(0)}
}
#tetsuohana.dance #tetsuo,
#tetsuohana.dance #hana{
--frame: 1;
transform: translateY(var(--low));
animation: 0.5s ease-out tetsuohana-dance1 infinite, 0.5s ease-in tetsuohana-dance2 infinite;
animation: 0.5s ease-out tetsuohana-dance infinite forwards;
}
#tetsuohana.dance #tetsuo-in,
#tetsuohana.dance #hana-in{
transform: translateY(0);
animation: 0.5s ease-out tetsuohana-dance infinite forwards reverse;
}
#tetsuohana.dance #flowers1,
#tetsuohana.dance #flowers2{
transform: translateY(0) scaleX(var(--flip));
animation: 0.25s 0.4s tetsuohana-flowers both;
transition: 0.34s transform ease-out;
}
#tetsuohana.dance #flowers1-in,
#tetsuohana.dance #flowers2-in{
animation: 0.25s 0.4s step-end tetsuohana-flowers both;
}
#tetsuohana.dance #mikoshi-out{
animation: 0.4s 0.4s ease-out tetsuohana-mikoshi both;
}
#tetsuohana.dance #mikoshi{
transform: translateY(var(--low));
transition: 0.4s 0.4s transform ease-out;
animation: 0.5s 0.8s ease-out tetsuohana-dance1 infinite, 0.5s 0.8s ease-in tetsuohana-dance2 infinite;
animation: 0.5s 0.8s ease-out tetsuohana-dance infinite forwards;
}
#tetsuohana.dance #mikoshi-in{
transform: translateY(0);
animation: 0.5s 0.8s ease-out tetsuohana-dance infinite forwards reverse;
}
#tetsuohana.failed #tetsuo,
#tetsuohana.failed #hana{
--frame: 2;
top: calc(26px * var(--scale));
transform: translateY(calc(46px * var(--scale)));
animation: 1.25s ease-out tetsuohana-failed1 both infinite, 1.25s ease-in tetsuohana-failed2 both infinite;
animation: 1.25s ease-out tetsuohana-failed1 forwards infinite;
}
#tetsuohana.failed #tetsuo-in,
#tetsuohana.failed #hana-in{
transform: translateY(0);
animation: 1.25s ease-in tetsuohana-failed2 forwards infinite;
}

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

@ -129,10 +129,20 @@ class Scoresheet{
var id = ["flowers1", "flowers2", "mikoshi", "tetsuo", "hana"]
var bg = [flowersBg, flowersBg, mikoshiBg, tetsuoHanaBg, tetsuoHanaBg]
for(var i = 0; i < id.length; i++){
if(id[i] === "mikoshi"){
var divOut = document.createElement("div")
divOut.id = id[i] + "-out"
this.tetsuoHana.appendChild(divOut)
}else{
var divOut = this.tetsuoHana
}
var div = document.createElement("div")
div.id = id[i]
div.style.backgroundImage = bg[i]
this.tetsuoHana.appendChild(div)
var divIn = document.createElement("div")
divIn.id = id[i] + "-in"
divIn.style.backgroundImage = bg[i]
div.appendChild(divIn)
divOut.appendChild(div)
}
this.game.appendChild(this.tetsuoHana)
}