Merge pull request #79 from LoveEevee/view-add-song-bg

View: Add song backgrounds

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;

public/src/css/songbg.css

+#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;
+}

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",

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

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

@@ -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"){

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 catId = this.categories.default.sort
+		}
+		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)
 		}
-		gameDiv.style.backgroundImage = "url('" + bg + "')"
+		
+		songStage.classList.add("song-stage-" + selectedSong.songStage)
+	}
+	setBgImage(element, url){
+		element.style.backgroundImage = "url('" + url + "')"
 	}
 	
 	drawMeasures(){

public/src/views/game.html

 <div id="game">
+	<div id="songbg">
+		<div id="layer1"></div>
+		<div id="layer2"></div>
+	</div>
+	<div id="song-stage"></div>
 	<div id="touch-drum">
 		<div id="touch-drum-img"></div>
 	</div>

templates/index.html

@@ -22,6 +22,7 @@
 	<link rel="stylesheet" href="/src/css/loadsong.css?{{version.commit_short}}">
 	<link rel="stylesheet" href="/src/css/game.css?{{version.commit_short}}">
 	<link rel="stylesheet" href="/src/css/debug.css?{{version.commit_short}}">
+	<link rel="stylesheet" href="/src/css/songbg.css?{{version.commit_short}}">
 	<link rel="stylesheet" href="{{config.assets_baseurl}}fonts/fonts.css?{{version.commit_short}}">
 	<link rel="stylesheet" href="{{config.assets_baseurl}}img/img.css?{{version.commit_short}}">