View: Add song backgrounds

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)
 		

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(){

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)

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(){