Add autoplay badge, change game timing to new Date with fallback

public/src/js/assets.js

@@ -38,7 +38,8 @@ var assets = {
 		"bg_genre_6.png",
 		"bg_genre_7.png",
 		"bg_score_p1.png",
-		"bg_score_p2.png"
+		"bg_score_p2.png",
+		"badge_auto.png"
 	],
 	"audioSfx": [
 		"don.wav",
@@ -66,8 +67,7 @@ var assets = {
 		"title.ogg",
 		"pause.wav",
 		"cancel.wav",
-		"results.ogg",
-		"diffsel.wav"
+		"results.ogg"
 	],
 	"audioSfxLR": [
 		"note_don.ogg",
@@ -101,6 +101,9 @@ var assets = {
 		"results_crown.ogg",
 		"results_countup.wav"
 	],
+	"audioSfxLoud": [
+		"diffsel.wav"
+	],
 	"audioMusic": [
 		"bgm_songsel.ogg",
 		"bgm_result.ogg",

public/src/js/game.js

@@ -25,7 +25,6 @@ class Game{
 		this.paused = false
 		this.started = false
 		this.mainMusicPlaying = false
-		this.elapsedTimeSincePause = 0
 		this.musicFadeOut = 0
 		this.fadeOutStarted = false
 		this.currentTimingPoint = 0
@@ -45,7 +44,7 @@ class Game{
 		var offsetTime = Math.max(0, this.timeForDistanceCircle - this.songData.circles[0].ms) |0
 		this.elapsedTime = -offsetTime
 		// The real start for the game will start when chrono will reach 0
-		this.startDate = snd.buffer.getTime() * 1000 + offsetTime
+		this.startDate = +(new Date) + offsetTime
 	}
 	update(){
 		// Main operations
@@ -317,14 +316,15 @@ class Game{
 		if(!this.paused){
 			assets.sounds["pause"].play()
 			this.paused = true
-			this.latestDate = snd.buffer.getTime() * 1000
+			this.latestDate = +new Date
 			this.mainAsset.stop()
 			this.mainMusicPlaying = false
 		}else{
 			assets.sounds["cancel"].play()
 			this.paused = false
-			var currentDate = snd.buffer.getTime() * 1000
-			this.elapsedTimeSincePause = this.elapsedTimeSincePause + currentDate - this.latestDate
+			var currentDate = +new Date
+			this.startDate += currentDate - this.latestDate
+			this.sndTime = currentDate - snd.buffer.getTime() * 1000
 		}
 	}
 	isPaused(){
@@ -334,20 +334,26 @@ class Game{
 		// Refreshed date
 		var ms = this.elapsedTime
 		if(ms >= 0 && !this.started){
-			this.startDate = snd.buffer.getTime() * 1000
-			this.elapsedTimeSincePause = 0
+			this.startDate = +new Date
 			this.elapsedTime = this.getAccurateTime()
 			this.started = true
+			this.sndTime = this.startDate - snd.buffer.getTime() * 1000
 		}else if(ms < 0 || ms >= 0 && this.started){
-			this.elapsedTime = this.getAccurateTime()
+			this.elapsedTime = this.getAccurateTime(ms >= 0)
 		}
 	}
 	getAccurateTime(){
 		if(this.isPaused()){
 			return this.elapsedTime
 		}else{
-			var currentDate = snd.buffer.getTime() * 1000
-			return currentDate - this.startDate - this.elapsedTimeSincePause
+			var currentDate = +new Date
+			var sndTime = currentDate - snd.buffer.getTime() * 1000
+			var lag = sndTime - this.sndTime
+			if(Math.abs(lag) >= 50){
+				this.startDate += lag
+				this.sndTime = sndTime
+			}
+			return currentDate - this.startDate
 		}
 	}
 	getCircles(){

public/src/js/loader.js

@@ -39,11 +39,13 @@ class Loader{
 		snd.previewGain = snd.buffer.createGain()
 		snd.sfxGainL = snd.buffer.createGain("left")
 		snd.sfxGainR = snd.buffer.createGain("right")
+		snd.sfxLoudGain = snd.buffer.createGain()
 		snd.buffer.setCrossfade(
 			[snd.musicGain, snd.previewGain],
 			[snd.sfxGain, snd.sfxGainL, snd.sfxGainR],
 			0.5
 		)
+		snd.sfxLoudGain.setVolume(1.2)
 		
 		assets.audioSfx.forEach(name => {
 			this.promises.push(this.loadSound(name, snd.sfxGain))
@@ -58,6 +60,9 @@ class Loader{
 				assets.sounds[id + "_p2"] = assets.sounds[id].copy(snd.sfxGainR)
 			}))
 		})
+		assets.audioSfxLoud.forEach(name => {
+			this.promises.push(this.loadSound(name, snd.sfxLoudGain))
+		})
 		
 		p2 = new P2Connection()
 		

public/src/js/scoresheet.js

@@ -270,6 +270,12 @@ class Scoresheet{
 						276, 150, imgScale * 176, imgScale * 120
 					)
 					
+					if(this.controller.autoPlayEnabled){
+						ctx.drawImage(assets.image["badge_auto"],
+							431, 311, 34, 34
+						)
+					}
+					
 					this.draw.roundedRect({
 						ctx: ctx,
 						x: 532,
@@ -439,7 +445,7 @@ class Scoresheet{
 						}
 						if(this.state.screen === "fadeIn" && elapsed >= 1200 && !this.state["fullcomboPlayed" + p]){
 							this.state["fullcomboPlayed" + p] = true
-							if(crownType === "gold" && !this.controller.autoPlayEnabled){
+							if(crownType === "gold"){
 								this.playSound("results_fullcombo" + (p === 1 ? "2" : ""), p)
 							}
 						}
@@ -473,7 +479,7 @@ class Scoresheet{
 				var lastTime = 0
 				for(var p = 0; p < players; p++){
 					var results = p === 0 ? this.results : p2.results
-					var currentTime = 3100 + results.points.length * 30 * this.frame + 1000
+					var currentTime = 3100 + results.points.length * 30 * this.frame
 					if(currentTime > lastTime){
 						lastTime = currentTime
 					}

public/src/js/view.js

@@ -619,6 +619,12 @@ class View{
 			this.diffX, this.diffY,
 			this.diffW, this.diffH
 		)
+		if(this.controller.autoPlayEnabled){
+			this.ctx.drawImage(assets.image["badge_auto"],
+				this.diffX + this.diffW * 0.71, this.diffY + this.diffH * 0.01,
+				this.diffH * 0.3, this.diffH * 0.3
+			)
+		}
 		this.ctx.drawImage(assets.image.taiko,
 			this.taikoX, this.taikoY,
 			this.taikoW, this.taikoH