Merge pull request #18 from u0-ani-nya/main

background video support

public/src/css/game.css

@@ -30,6 +30,8 @@
 	overflow: hidden;
 }
 #touch-drum-img{
+    position: absolute;
+    z-index: 1;
 	width: 100%;
 	height: 100%;
 	background-position: top;

public/src/js/controller.js

@@ -83,9 +83,6 @@ class Controller{
 		
 		this.game = new Game(this, this.selectedSong, this.parsedSongData)
 		this.view = new View(this)
-		if (parseFloat(localStorage.getItem("baisoku") ?? "1", 10) !== 1) {
-			this.saveScore = false;
-		}
 		this.mekadon = new Mekadon(this, this.game)
 		this.keyboard = new GameInput(this)
 		if(!autoPlayEnabled && this.multiplayer !== 2){
@@ -123,6 +120,7 @@ class Controller{
 	}
 	startMainLoop(){
 		this.mainLoopRunning = true
+		window.gamestatus = 'start'
 		this.gameLoop()
 		this.viewLoop()
 		if(this.multiplayer !== 2){
@@ -137,6 +135,20 @@ class Controller{
 	}
 	stopMainLoop(){
 		this.mainLoopRunning = false
+		window.gamestatus = 'stop'
+		
+		if (window.videoElement) {
+        // 停止视频播放
+        window.videoElement.pause();
+        
+        // 移除视频元素
+        document.body.removeChild(window.videoElement);
+        
+        // 解除引用，允许垃圾回收
+        window.videoElement = null;
+    }
+		
+		
 		if(this.game.mainAsset){
 			this.game.mainAsset.stop()
 		}
@@ -266,7 +278,7 @@ class Controller{
 							var chartDiff = this.selectedSong.difficulty
 							chart = chart[chartDiff]
 						}
-						this.addPromise(promises, chart.read(this.selectedSong.type === "tja" ? "utf-8" : undefined).then(data => {
+						this.addPromise(promises, chart.read(this.selectedSong.type === "tja" ? "sjis" : undefined).then(data => {
 							this.songData = data.replace(/\0/g, "").split("\n")
 							return Promise.resolve()
 						}), chart.url)
@@ -276,6 +288,9 @@ class Controller{
 							songObj.lyricsData = result
 						}, () => Promise.resolve()), songObj.lyricsFile.url)
 					}
+					if(songObj && songObj.category_id === 9){
+					    LoadSong.insertBackgroundVideo(songObj.id)
+					}
 					Promise.all(promises).then(resolve)
 				}
 			}).then(() => {
@@ -325,6 +340,8 @@ class Controller{
 			this.syncWith.game.togglePause(forcePause, pauseMove, noSound)
 		}
 		this.game.togglePause(forcePause, pauseMove, noSound)
+		
+		
 	}
 	getKeys(){
 		return this.keyboard.getKeys()

public/src/js/loadsong.js

@@ -59,11 +59,12 @@ class LoadSong{
 			}
 		}
 		this.songObj = songObj
-		
 		song.songBg = this.randInt(1, 5)
 		song.songStage = this.randInt(1, 3)
 		song.donBg = this.randInt(1, 6)
-		
+		if(this.songObj && this.songObj.category_id === 9){
+			 LoadSong.insertBackgroundVideo(this.songObj.id)
+				}
 		if(song.songSkin && song.songSkin.name){
 			var imgLoad = []
 			for(var type in song.songSkin){
@@ -134,7 +135,7 @@ class LoadSong{
 			chart = chart[chartDiff]
 		}
 		if(chart){
-			this.addPromise(chart.read(song.type === "tja" ? "utf-8" : "").then(data => {
+			this.addPromise(chart.read(song.type === "tja" ? "sjis" : "").then(data => {
 				this.songData = data.replace(/\0/g, "").split("\n")
 			}), chart.url)
 		}else{
@@ -308,7 +309,7 @@ class LoadSong{
 						if(song.type === "tja" || !chart || !chart.separateDiff || !chart[chartDiff]){
 							this.startMultiplayer()
 						}else{
-							chart[chartDiff].read(song.type === "tja" ? "utf-8" : "").then(data => {
+							chart[chartDiff].read(song.type === "tja" ? "sjis" : "").then(data => {
 								this.song2Data = data.replace(/\0/g, "").split("\n")
 							}, () => {}).then(() => {
 								this.startMultiplayer()
@@ -368,10 +369,29 @@ class LoadSong{
 	clean(){
 		delete this.promises
 		delete this.songObj
+        delete this.videoElement
 		pageEvents.remove(p2, "message")
 		if(this.cancelButton){
 			pageEvents.remove(this.cancelButton, ["mousedown", "touchstart"])
 			delete this.cancelButton
 		}
 	}
+	
+	static insertBackgroundVideo(songId) {
+        const video = document.createElement("video");
+        video.src = `songs/${songId}/main.mp4`; 
+        video.autoplay = true;
+        video.muted = true;  // 可选：静音
+        video.style.objectFit = 'cover';
+        video.style.position = 'fixed';
+        video.style.top = "0";
+        video.style.left = "0";
+        video.style.zIndex = "0";  // 背景视频
+        video.style.width = "100vw";
+        video.style.height = "100vh";
+        document.body.appendChild(video);
+        window.videoElement = video;
+    }
+
+	
 }

public/src/js/view.js

@@ -1487,11 +1487,11 @@
 		var measureH = 130 * mul
 		
 		measures.forEach(measure => {
-			var timeForDistance = this.posToMs(distanceForCircle, measure.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10))
+			var timeForDistance = this.posToMs(distanceForCircle, measure.speed)
 			var startingTime = measure.ms - timeForDistance + this.controller.videoLatency
-			var finishTime = measure.ms + this.posToMs(this.slotPos.x - this.slotPos.paddingLeft + 3, measure.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10)) + this.controller.videoLatency
+			var finishTime = measure.ms + this.posToMs(this.slotPos.x - this.slotPos.paddingLeft + 3, measure.speed) + this.controller.videoLatency
 			if(measure.visible && (!measure.branch || measure.branch.active) && ms >= startingTime && ms <= finishTime){
-				var measureX = this.slotPos.x + this.msToPos(measure.ms - ms + this.controller.videoLatency, measure.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10))
+				var measureX = this.slotPos.x + this.msToPos(measure.ms - ms + this.controller.videoLatency, measure.speed)
 				this.ctx.strokeStyle = measure.branchFirst ? "#ff0" : "#bdbdbd"
 				this.ctx.lineWidth = 3
 				this.ctx.beginPath()
@@ -1537,7 +1537,7 @@
 		
 		for(var i = circles.length; i--;){
 			var circle = circles[i]
-			var speed = circle.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10)
+			var speed = circle.speed
 			
 			var timeForDistance = this.posToMs(distanceForCircle + this.slotPos.size / 2, speed)
 			var startingTime = circle.ms - timeForDistance + this.controller.videoLatency
@@ -1626,13 +1626,11 @@
 		var circleMs = circle.ms
 		var endTime = circle.endTime
 		var animated = circle.animating
-		var speed = circle.speed * parseFloat(localStorage.getItem("baisoku") ?? "1", 10)
+		var speed = circle.speed
 		var played = circle.isPlayed
 		var drumroll = 0
 		var endX = 0
 		
-		const doron = localStorage.getItem("doron") ?? "false";
-
 		if(!circlePos){
 			circlePos = {
 				x: this.slotPos.x + this.msToPos(circleMs - ms + this.controller.videoLatency, speed),
@@ -1678,7 +1676,6 @@
 				}else if(ms > endTime + this.controller.audioLatency){
 					circlePos.x = this.slotPos.x + this.msToPos(endTime - ms + this.controller.audioLatency, speed)
 				}
-				if (doron !== "true") {
 				ctx.drawImage(assets.image["balloon"],
 					circlePos.x + size - 4,
 					circlePos.y - h / 2 + 2,
@@ -1686,7 +1683,6 @@
 					h
 				)
 			}
-			}
 		}else if(type === "drumroll" || type === "daiDrumroll"){
 			fill = "#f3b500"
 			if(type == "drumroll"){
@@ -1699,7 +1695,6 @@
 			endX = this.msToPos(endTime - circleMs, speed)
 			drumroll = endX > 50 ? 2 : 1
 			
-			if (doron !== "true") {
 			ctx.fillStyle = fill
 			ctx.strokeStyle = "#000"
 			ctx.lineWidth = 3
@@ -1710,9 +1705,7 @@
 			ctx.fill()
 			ctx.stroke()
 		}
-		}
+		if(!fade || fade < 1){
-
-		if((!fade || fade < 1) && doron !== "true"){
 			// Main circle
 			ctx.fillStyle = fill
 			ctx.beginPath()
@@ -1885,30 +1878,34 @@
 		}
 	}
 	toggleGogoTime(circle) {
-		var startMS = circle.ms + this.controller.audioLatency
+    var startMS = circle.ms + this.controller.audioLatency;
-		this.gogoTime = circle.gogoTime
+    this.gogoTime = circle.gogoTime;
     if (circle.gogoTime || this.gogoTimeStarted !== -Infinity) {
-			this.gogoTimeStarted = startMS
+        this.gogoTimeStarted = startMS;
     }
 
     if (this.gogoTime) {
         this.assets.fireworks.forEach(fireworksAsset => {
-				fireworksAsset.setAnimation("normal")
+            fireworksAsset.zIndex = 10; 
-				fireworksAsset.setAnimationStart(startMS)
+            fireworksAsset.setAnimation("normal");
-				var length = fireworksAsset.getAnimationLength("normal")
+            fireworksAsset.setAnimationStart(startMS);
+            var length = fireworksAsset.getAnimationLength("normal");
             fireworksAsset.setAnimationEnd(length, () => {
-					fireworksAsset.setAnimation(false)
+                fireworksAsset.setAnimation(false);
-				})
+            });
-			})
+        });
-			this.assets.fire.setAnimation("normal")
+
-			var don = this.assets.don
+        this.assets.fireworks.sort((a, b) => a.zIndex - b.zIndex);
-			don.setAnimation("gogostart")
+
-			var length = don.getAnimationLength("gogo")
+        this.assets.fire.setAnimation("normal");
-			don.setUpdateSpeed(4 / length)
+        var don = this.assets.don;
-			var start = startMS - (startMS % this.beatInterval)
+        don.setAnimation("gogostart");
-			don.setAnimationStart(start)
+        var length = don.getAnimationLength("gogo");
-			var length = don.getAnimationLength("gogostart")
+        don.setUpdateSpeed(4 / length);
-			don.setAnimationEnd(length, don.normalAnimation)
+        var start = startMS - (startMS % this.beatInterval);
+        don.setAnimationStart(start);
+        var length = don.getAnimationLength("gogostart");
+        don.setAnimationEnd(length, don.normalAnimation);
     }
 }
 	drawGogoTime(){