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 @@
+