diff --git a/public/src/css/songbg.css b/public/src/css/songbg.css index dc96315..f338b68 100644 --- a/public/src/css/songbg.css +++ b/public/src/css/songbg.css @@ -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; } diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index fe7fc4c..ea7f033 100644 --- a/public/src/js/scoresheet.js +++ b/public/src/js/scoresheet.js @@ -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) }