Add random stage

public/src/css/songbg.css

-#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;
-	background-size: cover;
-	background-position: center;
-}
-.portrait #songbg{
-	height: 63.4%;
 }
 #songbg>*{
-	position: absolute;
 	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
+}
+#songbg,
+#songbg>*{
 	background-size: cover;
 	background-position: center;
 }
+#song-stage{
+	height: calc(44 / 720 * 100vh);
+	background-position: center;
+}
+.portrait #songbg{
+	height: 63.4%;
+}
 .game-paused *{
 	animation-play-state: paused !important;
 }

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

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 + "')"

public/src/views/game.html

@@ -3,6 +3,7 @@
 		<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>