From 87bdf7a40744100523a572f593aa5aac516bfb43 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Fri, 23 Nov 2018 19:53:29 +0300 Subject: [PATCH 1/4] 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 @@ + From 96b8e9f3a224aac4ca15ba2ed2777d7d209e4a12 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Fri, 23 Nov 2018 21:52:24 +0300 Subject: [PATCH 2/4] Add random stage --- public/src/css/songbg.css | 25 ++++++++++++--------- public/src/js/assets.js | 3 +++ public/src/js/loadsong.js | 46 +++++++++++++++++++++----------------- public/src/js/view.js | 4 ++++ public/src/views/game.html | 1 + 5 files changed, 48 insertions(+), 31 deletions(-) diff --git a/public/src/css/songbg.css b/public/src/css/songbg.css index b680d3d..71be6af 100644 --- a/public/src/css/songbg.css +++ b/public/src/css/songbg.css @@ -1,27 +1,32 @@ -#songbg{ +#songbg, +#songbg>*, +#song-stage{ position: absolute; right: 0; bottom: 0; left: 0; width: 100%; +} +#songbg{ max-width: calc(100vh / 9 * 32); height: 50.1%; background-color: #000; +} +#songbg>*{ + top: 0; +} +#songbg, +#songbg>*{ background-size: cover; background-position: center; } +#song-stage{ + height: calc(44 / 720 * 100vh); + 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; } diff --git a/public/src/js/assets.js b/public/src/js/assets.js index be6c88f..e43aad9 100644 --- a/public/src/js/assets.js +++ b/public/src/js/assets.js @@ -34,6 +34,9 @@ var assets = { "bg_score_p2.png", "bg_settings.png", "bg_pause.png", + "bg_stage_1.png", + "bg_stage_2.png", + "bg_stage_3.png", "badge_auto.png", "touch_drum.png", "touch_pause.png", diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js index b206050..7ae5515 100644 --- a/public/src/js/loadsong.js +++ b/public/src/js/loadsong.js @@ -7,32 +7,14 @@ 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() + this.selectedSong.songBg = this.randInt(1, 5) + this.selectedSong.songStage = this.randInt(1, 3) + promises.push(new Promise(resolve => { var img = document.createElement("img") pageEvents.load(img).then(() => { @@ -70,6 +52,28 @@ class loadSong{ alert("An error occurred, please refresh") }) } + songBg(){ + return new Promise((resolve, reject) => { + var filename = "bg_song_" + this.selectedSong.songBg + 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) + } + }) + } + randInt(min, max){ + return Math.floor(Math.random() * (max - min + 1)) + min + } getSongPath(selectedSong){ var directory = gameConfig.songs_baseurl + selectedSong.folder + "/" if(selectedSong.type === "tja"){ diff --git a/public/src/js/view.js b/public/src/js/view.js index 97a7e35..9f36b6f 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -954,6 +954,8 @@ setBackground(){ var gameDiv = document.getElementById("game") var songBg = document.getElementById("songbg") + var songStage = document.getElementById("song-stage") + var selectedSong = this.controller.selectedSong if(selectedSong.category in this.categories){ var catId = this.categories[selectedSong.category].sort @@ -971,6 +973,8 @@ this.setBgImage(document.getElementById("layer1"), assets.image["bg_song_" + id + "a"].src) this.setBgImage(document.getElementById("layer2"), assets.image["bg_song_" + id + "b"].src) } + + songStage.classList.add("song-stage-" + selectedSong.songStage) } setBgImage(element, url){ element.style.backgroundImage = "url('" + url + "')" diff --git a/public/src/views/game.html b/public/src/views/game.html index affdbd3..b9ba0ae 100644 --- a/public/src/views/game.html +++ b/public/src/views/game.html @@ -3,6 +3,7 @@
+
From f523700dc4cb9b87db362827945a99402845d63b Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Fri, 23 Nov 2018 22:15:10 +0300 Subject: [PATCH 3/4] Wait for backgrounds to render before starting --- public/src/js/controller.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/public/src/js/controller.js b/public/src/js/controller.js index 69fbfd7..e7a8946 100644 --- a/public/src/js/controller.js +++ b/public/src/js/controller.js @@ -36,13 +36,15 @@ class Controller{ syncWith.game.startDate = this.game.startDate this.syncWith = syncWith } - this.startMainLoop() - if(!this.multiplayer){ - debugObj.controller = this - if(debugObj.debug){ - debugObj.debug.updateStatus() + requestAnimationFrame(() => { + this.startMainLoop() + if(!this.multiplayer){ + debugObj.controller = this + if(debugObj.debug){ + debugObj.debug.updateStatus() + } } - } + }) } startMainLoop(){ this.mainLoopStarted = false From edd76b55a46185f4c64c5bd7984661c67eb8e150 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Fri, 23 Nov 2018 22:44:14 +0300 Subject: [PATCH 4/4] Fix backgrounds in multiplayer --- public/src/css/songbg.css | 12 ++++++++++++ public/src/js/view.js | 11 +++++++---- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/public/src/css/songbg.css b/public/src/css/songbg.css index 71be6af..7819f97 100644 --- a/public/src/css/songbg.css +++ b/public/src/css/songbg.css @@ -26,6 +26,18 @@ } .portrait #songbg{ height: 63.4%; + max-height: calc(50% + 24vw); +} +.touchp2 #songbg{ + height: calc(50% - 5.5vw); +} +.multiplayer.portrait #songbg{ + height: calc(50% - 37vw); + min-height: calc(29% + 1px); +} +.multiplayer:not(.touchp2):not(.portrait) #songbg, +.multiplayer:not(.touchp2):not(.portrait) #song-stage{ + display: none; } .game-paused *{ animation-play-state: paused !important; diff --git a/public/src/js/view.js b/public/src/js/view.js index 9f36b6f..ad4b69f 100644 --- a/public/src/js/view.js +++ b/public/src/js/view.js @@ -113,12 +113,16 @@ } } } - if(!this.multiplayer){ + if(this.multiplayer){ + this.gameDiv.classList.add("multiplayer") + }else{ pageEvents.add(this.canvas, "mousedown", this.onmousedown.bind(this)) } } run(){ - this.setBackground() + if(this.multiplayer !== 2){ + this.setBackground() + } this.lastMousemove = this.controller.getElapsedTime() pageEvents.mouseAdd(this, this.onmousemove.bind(this)) @@ -952,7 +956,6 @@ } } setBackground(){ - var gameDiv = document.getElementById("game") var songBg = document.getElementById("songbg") var songStage = document.getElementById("song-stage") @@ -962,7 +965,7 @@ }else{ var catId = this.categories.default.sort } - this.setBgImage(gameDiv, assets.image["bg_genre_" + catId].src) + this.setBgImage(this.gameDiv, assets.image["bg_genre_" + catId].src) if(selectedSong.customBg){ var bg = gameConfig.songs_baseurl + selectedSong.folder + "/bg.png"