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

SongBg: Reduce background resolution on mobile

public/src/css/songbg.css

@@ -22,7 +22,8 @@
 }
 #song-stage{
 	height: calc(44 / 720 * 100vh);
-	background-position: center;
+	background-position: center bottom;
+	background-repeat-y: no-repeat;
 }
 .portrait #songbg{
 	height: 63.4%;

public/src/js/game.js

@@ -350,6 +350,8 @@ class Game{
 			this.mainMusicPlaying = false
 			this.view.pauseMove(0, true)
 			this.view.gameDiv.classList.add("game-paused")
+			this.view.lastMousemove = this.view.getMS()
+			this.view.cursorHidden = false
 		}else{
 			assets.sounds["cancel"].play()
 			this.paused = false
@@ -357,6 +359,7 @@ class Game{
 			this.startDate += currentDate - this.latestDate
 			this.sndTime = currentDate - snd.buffer.getTime() * 1000
 			this.view.gameDiv.classList.remove("game-paused")
+			this.view.pointer()
 		}
 	}
 	isPaused(){

public/src/js/loadsong.js

@@ -63,11 +63,31 @@ class loadSong{
 					let filenameAb = filename + (i === 0 ? "a" : "b")
 					let img = document.createElement("img")
 					promises.push(pageEvents.load(img).then(() => {
-						assets.image[filenameAb] = img
+						if(this.touchEnabled){
+							return new Promise((resolve, reject) => {
+								var canvas = document.createElement("canvas")
+								var w = Math.floor(img.width / 2)
+								var h = Math.floor(img.height / 2)
+								canvas.width = w
+								canvas.height = h
+								var ctx = canvas.getContext("2d")
+								ctx.drawImage(img, 0, 0, w, h)
+								canvas.toBlob(blob => {
+									let img2 = document.createElement("img")
+									pageEvents.load(img2).then(() => {
+										assets.image[filenameAb] = img2
+										resolve()
+									}, reject)
+									img2.src = URL.createObjectURL(blob)
+								})
+							})
+						}else{
+							assets.image[filenameAb] = img
+						}
 					}))
 					img.src = gameConfig.assets_baseurl + "img/" + filenameAb + ".png"
 				}
-				return Promise.all(promises).then(resolve, reject)
+				Promise.all(promises).then(resolve, reject)
 			}
 		})
 	}

public/src/js/view.js

@@ -1523,7 +1523,7 @@
 		}
 	}
 	onmousemove(event){
-		this.lastMousemove = this.controller.getElapsedTime()
+		this.lastMousemove = this.getMS()
 		this.cursorHidden = false
 		
 		if(!this.multiplayer && this.controller.game.paused){
@@ -1568,7 +1568,7 @@
 	mouseIdle(){
 		var lastMouse = pageEvents.getMouse()
 		if(lastMouse && !this.cursorHidden){
-			if(this.controller.getElapsedTime() >= this.lastMousemove + 2000){
+			if(this.getMS() >= this.lastMousemove + 2000){
 				this.cursor.style.top = lastMouse.clientY + "px"
 				this.cursor.style.left = lastMouse.clientX + "px"
 				this.cursor.style.pointerEvents = "auto"