Merge pull request #36 from LoveEevee/default-bg

Add default backgrounds

public/src/css/game.css

@@ -4,6 +4,9 @@
 	overflow: hidden;
 	background-size: cover;
 }
+#game.default-bg{
+	background-size: contain;
+}
 #canvas{
 	position: relative;
 	z-index: 1;

public/src/css/main.css

@@ -193,16 +193,17 @@ kbd{
 		background-position: 0 0;
 	}
 	to{
-		background-position: -30vmin 0;
+		background-position: calc(-100vh / 720 * 512) 0;
 	}
 }
 #song-select{
 	width: 100%;
 	height: 100%;
-	background: url("/assets/img/bg-pattern-1.png");
+	background-image: url("/assets/img/bg_genre_0.png");
-	background-size: 30vmin;
+	background-size: contain;
-	animation: bgscroll 8s infinite linear;
+	animation: bgscroll 16s infinite linear;
 	white-space: nowrap;
+	transition: background-image 0.5s;
 }
 #song-sel-canvas{
 	position: absolute;

public/src/js/assets.js

@@ -33,7 +33,15 @@ var assets = {
 		"don_anim_gogostart.png",
 		"don_anim_clear.png",
 		"fire_anim.png",
-		"fireworks_anim.png"
+		"fireworks_anim.png",
+		"bg_genre_0.png",
+		"bg_genre_1.png",
+		"bg_genre_2.png",
+		"bg_genre_3.png",
+		"bg_genre_4.png",
+		"bg_genre_5.png",
+		"bg_genre_6.png",
+		"bg_genre_7.png"
 	],
 	"audioSfx": [
 		"start.wav",

public/src/js/loadsong.js

@@ -11,11 +11,16 @@ class loadSong{
 		var promises = []
 		assets.sounds["start"].play()
 		
-		var img = document.createElement("img")
+		promises.push(new Promise((resolve, reject) => {
-		promises.push(pageEvents.load(img))
+			var img = document.createElement("img")
-		img.id = "music-bg"
+			pageEvents.load(img).then(resolve, () => {
-		img.src = "/songs/" + id + "/bg.png"
+				this.selectedSong.defaultBg = true
-		document.getElementById("assets").appendChild(img)
+				resolve()
+			})
+			img.id = "music-bg"
+			img.src = "/songs/" + id + "/bg.png"
+			document.getElementById("assets").appendChild(img)
+		}))
 		
 		promises.push(new Promise((resolve, reject) => {
 			var songObj

public/src/js/songselect.js

@@ -16,11 +16,13 @@ class SongSelect{
 				outline: "#ad7723"
 			},
 			"random": {
+				sort: 7,
 				background: "#fa91ff",
 				border: ["#ffdfff", "#b068b2"],
 				outline: "#b221bb"
 			},
 			"tutorial": {
+				sort: 7,
 				background: "#9afbe1",
 				border: ["#d6ffff", "#6bae9c"],
 				outline: "#31ae94"
@@ -37,7 +39,7 @@ class SongSelect{
 				border: ["#ffdb8c", "#e75500"],
 				outline: "#9c4100"
 			},
-			"ボーカロイド": {
+			"ボーカロイド™曲": {
 				sort: 2,
 				background: "#def2ef",
 				border: ["#f7fbff", "#79919f"],
@@ -104,12 +106,14 @@ class SongSelect{
 		this.songs.push({
 			title: "ランダムに曲をえらぶ",
 			skin: this.songSkin.random,
-			action: "random"
+			action: "random",
+			category: "ランダム"
 		})
 		this.songs.push({
 			title: "あそびかた説明",
 			skin: this.songSkin.tutorial,
-			action: "tutorial"
+			action: "tutorial",
+			category: "ランダム"
 		})
 		this.songs.push({
 			title: "もどる",
@@ -179,7 +183,7 @@ class SongSelect{
 		this.selectedDiff = 0
 		assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506)
 		
-		if(fromTutorial || !"selectedSong" in localStorage){
+		if(fromTutorial || !("selectedSong" in localStorage)){
 			this.selectedSong = this.songs.findIndex(song => song.action === "tutorial")
 			this.playBgm(true)
 		}else{
@@ -194,6 +198,11 @@ class SongSelect{
 			this.selectedDiff = Math.min(Math.max(0, localStorage["selectedDiff"] |0), 4)
 		}
 		
+		this.songSelect = document.getElementById("song-select")
+		var cat = this.songs[this.selectedSong].category
+		var sort = cat in this.songSkin ? this.songSkin[cat].sort : 7
+		this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
+		
 		this.previewId = 0
 		this.state = {
 			screen: fromTutorial ? "song" : "title",
@@ -222,6 +231,7 @@ class SongSelect{
 		})
 		
 		this.startP2()
+		
 		this.redrawRunning = true
 		this.redrawBind = this.redraw.bind(this)
 		this.redraw()
@@ -455,7 +465,8 @@ class SongSelect{
 		new loadSong({
 			"title": selectedSong.title,
 			"folder": selectedSong.id,
-			"difficulty": this.difficultyId[difficulty]
+			"difficulty": this.difficultyId[difficulty],
+			"category": selectedSong.category
 		}, shift, ctrl)
 	}
 	toTitleScreen(){
@@ -606,6 +617,12 @@ class SongSelect{
 				this.selectedSong = this.mod(this.songs.length, this.selectedSong + this.state.move)
 				this.state.move = 0
 				this.state.locked = 2
+				
+				if(this.songs[this.selectedSong].action !== "back"){
+					var cat = this.songs[this.selectedSong].category
+					var sort = cat in this.songSkin ? this.songSkin[cat].sort : 7
+					this.songSelect.style.backgroundImage = "url('" + assets.image["bg_genre_" + sort].src + "')"
+				}
 			}
 			if(this.state.moveMS && ms < this.state.moveMS + changeSpeed){
 				xOffset = Math.min(scroll, Math.max(0, elapsed - resize - scrollDelay)) / scroll * (this.songAsset.width + this.songAsset.marginLeft)
@@ -1285,6 +1302,8 @@ class SongSelect{
 		for(let symbol of string){
 			if(symbol === "-"){
 				drawn.push({text: symbol, x: -4, y: 0, w: 28, scale: [0.8, 1]})
+			}else if(symbol === "™"){
+				drawn.push({text: symbol, x: -2, y: 0, w: 20, scale: [0.6, 0.5]})
 			}else if(r.latin.test(symbol)){
 				// Latin script
 				drawn.push({text: symbol, x: 0, y: 0, w: 32})
@@ -1353,6 +1372,7 @@ class SongSelect{
 					ctx.scale(symbol.scale[0], symbol.scale[1])
 					currentX = 0
 					currentY = 0
+					ctx.lineWidth /= symbol.scale[0]
 				}
 				ctx[action](symbol.text, currentX, currentY)
 				if(saved){

public/src/js/view.js

@@ -65,7 +65,26 @@ class View{
 		this.refresh()
 	}
 	setBackground(){
-		document.getElementById("game").style.backgroundImage = "url('" + this.bg + "')"
+		var gameDiv = document.getElementById("game")
+		var selectedSong = this.controller.selectedSong
+		if(selectedSong.defaultBg){
+			var categories = {
+				"J-POP": 0,
+				"アニメ": 1,
+				"ボーカロイド™曲": 2,
+				"バラエティ": 3,
+				"クラシック": 4,
+				"ゲームミュージック": 5,
+				"ナムコオリジナル": 6
+			}
+			var catId = 7
+			if(selectedSong.category in categories){
+				catId = categories[selectedSong.category]
+			}
+			this.bg = assets.image["bg_genre_" + catId].src
+			gameDiv.classList.add("default-bg")
+		}
+		gameDiv.style.backgroundImage = "url('" + this.bg + "')"
 	}
 	positionning(){
 		var docW = document.body.offsetWidth