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

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

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")
-		}else{
+		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)
 		}
-		gameDiv.style.backgroundImage = "url('" + bg + "')"
+	}
+	setBgImage(element, url){
+		element.style.backgroundImage = "url('" + url + "')"
 	}
 	
 	drawMeasures(){

public/src/views/game.html

@@ -1,4 +1,8 @@
 <div id="game">
+	<div id="songbg">
+		<div id="layer1"></div>
+		<div id="layer2"></div>
+	</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}}">