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..7819f97 --- /dev/null +++ b/public/src/css/songbg.css @@ -0,0 +1,73 @@ +#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%; + 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; +} +@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/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/controller.js b/public/src/js/controller.js index b4fbeb4..e7a8946 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) @@ -38,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 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..7ae5515 100644 --- a/public/src/js/loadsong.js +++ b/public/src/js/loadsong.js @@ -12,12 +12,14 @@ class loadSong{ var promises = [] assets.sounds["start"].play() - promises.push(new Promise((resolve, reject) => { + 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(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) @@ -50,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 705c68c..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,20 +956,31 @@ } } setBackground(){ - var gameDiv = document.getElementById("game") + var songBg = document.getElementById("songbg") + var songStage = document.getElementById("song-stage") + 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(this.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) + } + + songStage.classList.add("song-stage-" + selectedSong.songStage) + } + 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..b9ba0ae 100644 --- a/public/src/views/game.html +++ b/public/src/views/game.html @@ -1,4 +1,9 @@
+
+
+
+
+
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 @@ +