From 87bdf7a40744100523a572f593aa5aac516bfb43 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Fri, 23 Nov 2018 19:53:29 +0300 Subject: [PATCH] View: Add song backgrounds --- public/src/css/game.css | 5 +--- public/src/css/songbg.css | 56 +++++++++++++++++++++++++++++++++++++ public/src/js/controller.js | 4 +-- public/src/js/game.js | 2 ++ public/src/js/loadsong.js | 30 ++++++++++++++++---- public/src/js/view.js | 28 ++++++++++++------- public/src/views/game.html | 4 +++ templates/index.html | 1 + 8 files changed, 108 insertions(+), 22 deletions(-) create mode 100644 public/src/css/songbg.css diff --git a/public/src/css/game.css b/public/src/css/game.css index c5e24bf..8a7f201 100644 --- a/public/src/css/game.css +++ b/public/src/css/game.css @@ -3,11 +3,8 @@ height: 100%; position: absolute; overflow: hidden; - background-size: cover; - background-position: center; -} -#game.default-bg{ background-size: calc(100vh / 720 * 512); + background-position: center; } #canvas{ position: relative; diff --git a/public/src/css/songbg.css b/public/src/css/songbg.css new file mode 100644 index 0000000..b680d3d --- /dev/null +++ b/public/src/css/songbg.css @@ -0,0 +1,56 @@ +#songbg{ + position: absolute; + right: 0; + bottom: 0; + left: 0; + width: 100%; + max-width: calc(100vh / 9 * 32); + height: 50.1%; + background-color: #000; + background-size: cover; + background-position: center; +} +.portrait #songbg{ + height: 63.4%; +} +#songbg>*{ + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-size: cover; + background-position: center; +} +.game-paused *{ + animation-play-state: paused !important; +} +@keyframes songbg-strobe{ + 0%{opacity: 1} + 25%{opacity: 0} + 50%{opacity: 0.66} + 75%{opacity: 0} +} +@keyframes songbg-pulse{ + 0%{opacity: 1} + 50%{opacity: 0} +} +.songbg-1 #layer2, +.songbg-2 #layer2, +.songbg-3 #layer2{ + animation: 0.4s linear songbg-strobe infinite; + mix-blend-mode: difference; +} +.songbg-4 #layer2{ + animation: 0.4s linear songbg-pulse infinite; + mix-blend-mode: difference; +} +.songbg-5 #layer2{ + animation: 1s linear songbg-pulse infinite; + mix-blend-mode: color-dodge; +} +.touch-visible #layer2{ + display: none; + background-image: none; + animation: none; +} diff --git a/public/src/js/controller.js b/public/src/js/controller.js index b4fbeb4..69fbfd7 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -7,8 +7,6 @@ class Controller{ this.touchEnabled = touchEnabled this.snd = this.multiplayer ? "_p" + this.multiplayer : "" - var backgroundURL = gameConfig.songs_baseurl + this.selectedSong.folder + "/bg.png" - if(selectedSong.type === "tja"){ this.parsedSongData = new ParseTja(songData, selectedSong.difficulty, selectedSong.offset) }else{ @@ -23,7 +21,7 @@ class Controller{ }) this.game = new Game(this, this.selectedSong, this.parsedSongData) - this.view = new View(this, backgroundURL, this.selectedSong.title, this.selectedSong.difficulty) + this.view = new View(this) this.mekadon = new Mekadon(this, this.game) this.keyboard = new Keyboard(this) diff --git a/public/src/js/game.js b/public/src/js/game.js index 715a9ff..8b3ae85 100644 --- a/public/src/js/game.js +++ b/public/src/js/game.js @@ -349,12 +349,14 @@ class Game{ this.mainAsset.stop() this.mainMusicPlaying = false this.view.pauseMove(0, true) + this.view.gameDiv.classList.add("game-paused") }else{ assets.sounds["cancel"].play() this.paused = false var currentDate = +new Date this.startDate += currentDate - this.latestDate this.sndTime = currentDate - snd.buffer.getTime() * 1000 + this.view.gameDiv.classList.remove("game-paused") } } isPaused(){ diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js index b0619e3..b206050 100644 --- a/public/src/js/loadsong.js +++ b/public/src/js/loadsong.js @@ -7,17 +7,37 @@ class loadSong{ loader.changePage("loadsong") this.run() } + songBg(){ + return new Promise((resolve, reject) => { + var id = Math.floor(Math.random() * (5 - 1) + 1) + this.selectedSong.songBg = id + var filename = "bg_song_" + id + if(filename + "a" in assets.image && filename + "b" in assets.image){ + resolve() + }else{ + var promises = [] + for(var i = 0; i < 2; i++){ + let filenameAb = filename + (i === 0 ? "a" : "b") + let img = document.createElement("img") + promises.push(pageEvents.load(img).then(() => { + assets.image[filenameAb] = img + })) + img.src = gameConfig.assets_baseurl + "img/" + filenameAb + ".png" + } + return Promise.all(promises).then(resolve, reject) + } + }) + } run(){ var id = this.selectedSong.folder var promises = [] assets.sounds["start"].play() - promises.push(new Promise((resolve, reject) => { + promises.push(new Promise(resolve => { var img = document.createElement("img") - pageEvents.load(img).then(resolve, () => { - this.selectedSong.defaultBg = true - resolve() - }) + pageEvents.load(img).then(() => { + this.selectedSong.customBg = true + }, () => this.songBg(id)).then(resolve) img.id = "music-bg" img.src = gameConfig.songs_baseurl + id + "/bg.png" document.getElementById("assets").appendChild(img) diff --git a/public/src/js/view.js b/public/src/js/view.js index 705c68c..97a7e35 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -953,19 +953,27 @@ } setBackground(){ var gameDiv = document.getElementById("game") + var songBg = document.getElementById("songbg") var selectedSong = this.controller.selectedSong - if(selectedSong.defaultBg){ - if(selectedSong.category in this.categories){ - var catId = this.categories[selectedSong.category].sort - }else{ - var catId = this.categories.default.sort - } - var bg = assets.image["bg_genre_" + catId].src - gameDiv.classList.add("default-bg") + if(selectedSong.category in this.categories){ + var catId = this.categories[selectedSong.category].sort }else{ - var bg = gameConfig.songs_baseurl + selectedSong.folder + "/bg.png" + var catId = this.categories.default.sort } - gameDiv.style.backgroundImage = "url('" + bg + "')" + this.setBgImage(gameDiv, assets.image["bg_genre_" + catId].src) + + if(selectedSong.customBg){ + var bg = gameConfig.songs_baseurl + selectedSong.folder + "/bg.png" + this.setBgImage(songBg, bg) + }else{ + var id = selectedSong.songBg + songBg.classList.add("songbg-" + id) + this.setBgImage(document.getElementById("layer1"), assets.image["bg_song_" + id + "a"].src) + this.setBgImage(document.getElementById("layer2"), assets.image["bg_song_" + id + "b"].src) + } + } + setBgImage(element, url){ + element.style.backgroundImage = "url('" + url + "')" } drawMeasures(){ diff --git a/public/src/views/game.html b/public/src/views/game.html index c95aae5..affdbd3 100644 --- a/public/src/views/game.html +++ b/public/src/views/game.html @@ -1,4 +1,8 @@
+
+
+
+
diff --git a/templates/index.html b/templates/index.html index 58bad43..d704494 100644 --- a/templates/index.html +++ b/templates/index.html @@ -22,6 +22,7 @@ +