From 6d770e7b2d580f51f528039f39ecc95f65cc7e77 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Sun, 2 Dec 2018 19:36:04 +0300 Subject: [PATCH] Add second player backgrounds, add fade on miss --- public/src/css/songbg.css | 8 ++++++++ public/src/js/loadsong.js | 3 +++ public/src/js/view.js | 34 ++++++++++++++++++++++++---------- 3 files changed, 35 insertions(+), 10 deletions(-) diff --git a/public/src/css/songbg.css b/public/src/css/songbg.css index 3020d68..4e79594 100644 --- a/public/src/css/songbg.css +++ b/public/src/css/songbg.css @@ -137,6 +137,14 @@ background-size: auto calc(var(--sh2) / var(--sh1) * 100%); --raised: calc((var(--sh2) - var(--sh1)) / var(--sh2) * var(--h) * -1); } +.donlayer3{ + background-color: #000; + opacity: 0; + transition: 0.15s opacity linear; +} +.donbg-dark .donlayer3{ + opacity: 0.5; +} .donbg-1 .donlayer2, .donbg-2 .donlayer2, .donbg-4 .donlayer2, diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js index 01854d6..546659a 100644 --- a/public/src/js/loadsong.js +++ b/public/src/js/loadsong.js @@ -102,6 +102,9 @@ class loadSong{ } if(this.selectedSong.donBg !== null){ filenames.push("bg_don_" + this.selectedSong.donBg) + if(this.multiplayer){ + filenames.push("bg_don2_" + this.selectedSong.donBg) + } } for(var i = 0; i < filenames.length; i++){ for(var letter = 0; letter < 2; letter++){ diff --git a/public/src/js/view.js b/public/src/js/view.js index 079f3f3..7ff24fd 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -10,6 +10,7 @@ this.portraitClass = false this.touchp2Class = false + this.darkDonBg = false this.pauseOptions = [ "演奏をつづける", @@ -1000,36 +1001,39 @@ var selectedSong = this.controller.selectedSong var songSkinName = selectedSong.songSkin.name var donLayers = [] + var filename = this.multiplayer === 2 ? "bg_don2_" : "bg_don_" this.donBg = document.createElement("div") this.donBg.classList.add("donbg") if(this.multiplayer === 2){ this.donBg.classList.add("donbg-bottom") } - for(var layer = 1; layer <= 2; layer++){ + for(var layer = 1; layer <= 3; layer++){ var donLayer = document.createElement("div") donLayer.classList.add("donlayer" + layer) this.donBg.appendChild(donLayer) - donLayers.push(donLayer) + if(layer !== 3){ + donLayers.push(donLayer) + } } songBg.parentNode.insertBefore(this.donBg, songBg) var asset1, asset2 if(!selectedSong.songSkin.don){ this.donBg.classList.add("donbg-" + selectedSong.donBg) - this.setLayers(donLayers, "bg_don_" + selectedSong.donBg, true) - asset1 = "bg_don_" + selectedSong.donBg + "a" - asset2 = "bg_don_" + selectedSong.donBg + "b" + this.setLayers(donLayers, filename + selectedSong.donBg, true) + asset1 = filename + selectedSong.donBg + "a" + asset2 = filename + selectedSong.donBg + "b" }else if(selectedSong.songSkin.don !== "none"){ var notStatic = selectedSong.songSkin.don !== "static" if(notStatic){ this.donBg.classList.add("donbg-" + selectedSong.songSkin.don) - asset1 = "bg_don_" + songSkinName + "_a" - asset2 = "bg_don_" + songSkinName + "_b" + asset1 = filename + songSkinName + "_a" + asset2 = filename + songSkinName + "_b" }else{ - asset1 = "bg_don_" + songSkinName - asset2 = "bg_don_" + songSkinName + asset1 = filename + songSkinName + asset2 = filename + songSkinName } - this.setLayers(donLayers, "bg_don_" + songSkinName + (notStatic ? "_" : ""), notStatic) + this.setLayers(donLayers, filename + songSkinName + (notStatic ? "_" : ""), notStatic) } var w1 = assets.image[asset1].width var w2 = assets.image[asset2].width @@ -1474,6 +1478,16 @@ explosion.setAnimation(false) }) } + var miss = score === 0 + }else{ + var miss = true + } + if(!miss && this.darkDonBg){ + this.darkDonBg = false + this.donBg.classList.remove("donbg-dark") + }else if(miss && !this.darkDonBg){ + this.darkDonBg = true + this.donBg.classList.add("donbg-dark") } } posToMs(pos, speed){