Fallback to wav if ogg is not supported, fix circles animation

public/src/js/assets.js

@@ -112,6 +112,7 @@ var assets = {
 		"bgm_result.ogg",
 		"bgm_setsume.ogg"
 	],
+	"audioOgg": "note_ka.ogg",
 	"fonts": [
 		"Kozuka",
 		"TnT"

public/src/js/circle.js

@@ -31,11 +31,9 @@ class Circle{
 	getLastFrame(){
 		return this.lastFrame
 	}
-	incFrame(){
+	animate(ms){
-		this.lastFrame += 20
-	}
-	animate(){
 		this.animating = true
+		this.animT = ms
 	}
 	isAnimated(){
 		return this.animating
@@ -43,9 +41,6 @@ class Circle{
 	getAnimT(){
 		return this.animT
 	}
-	incAnimT(){
-		this.animT += 0.05
-	}
 	getPlayed(){
 		return this.isPlayed
 	}

public/src/js/game.js

@@ -241,6 +241,7 @@ class Game{
 		this.globalScore.points += score
 	}
 	checkDrumroll(circle){
+		var ms = this.elapsedTime
 		var dai = circle.getType() === "daiDrumroll"
 		var score = 100
 		circle.hit()
@@ -252,14 +253,14 @@ class Game{
 		}
 		var circleAnim = new Circle({
 			id: 0,
-			start: this.elapsedTime,
+			start: ms,
 			type: sound,
 			txt: "",
 			speed: circle.speed,
 			gogoTime: circle.gogoTime
 		})
 		circleAnim.played(score, dai)
-		circleAnim.animate()
+		circleAnim.animate(ms)
 		this.controller.view.drumroll.push(circleAnim)
 		this.globalScore.drumroll++
 		this.globalScore.points += score * (dai ? 2 : 1)

public/src/js/loader.js

@@ -12,28 +12,6 @@ class Loader{
 		this.loaderPercentage = document.querySelector("#loader .percentage")
 		this.loaderProgress = document.querySelector("#loader .progress")
 			
-		assets.fonts.forEach(name => {
-			var font = document.createElement("h1")
-			font.style.fontFamily = name
-			font.appendChild(document.createTextNode("I am a font"))
-			this.assetsDiv.appendChild(font)
-			this.promises.push(new Promise((resolve, reject) => {
-				FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000})
-			}))
-		})
-		var fontDetectDiv = document.getElementById("fontdetectHelper")
-		fontDetectDiv.parentNode.removeChild(fontDetectDiv)
-		
-		assets.img.forEach(name => {
-			var id = this.getFilename(name)
-			var image = document.createElement("img")
-			this.promises.push(pageEvents.load(image))
-			image.id = name
-			image.src = "/assets/img/" + name
-			this.assetsDiv.appendChild(image)
-			assets.image[id] = image
-		})
-		
 		snd.buffer = new SoundBuffer()
 		snd.musicGain = snd.buffer.createGain()
 		snd.sfxGain = snd.buffer.createGain()
@@ -48,46 +26,79 @@ class Loader{
 		)
 		snd.sfxLoudGain.setVolume(1.2)
 		
-		assets.audioSfx.forEach(name => {
+		snd.buffer.load("/assets/audio/" + assets.audioOgg).then(() => {
-			this.promises.push(this.loadSound(name, snd.sfxGain))
+			this.oggNotSupported = false
-		})
+		}, () => {
-		assets.audioMusic.forEach(name => {
+			this.oggNotSupported = true
-			this.promises.push(this.loadSound(name, snd.musicGain))
+		}).then(() => {
-		})
+			
-		assets.audioSfxLR.forEach(name => {
+			assets.fonts.forEach(name => {
-			this.promises.push(this.loadSound(name, snd.sfxGain).then(sound => {
+				var font = document.createElement("h1")
+				font.style.fontFamily = name
+				font.appendChild(document.createTextNode("I am a font"))
+				this.assetsDiv.appendChild(font)
+				this.promises.push(new Promise((resolve, reject) => {
+					FontDetect.onFontLoaded(name, resolve, reject, {msTimeout: 90000})
+				}))
+			})
+			var fontDetectDiv = document.getElementById("fontdetectHelper")
+			fontDetectDiv.parentNode.removeChild(fontDetectDiv)
+			
+			assets.img.forEach(name => {
 				var id = this.getFilename(name)
-				assets.sounds[id + "_p1"] = assets.sounds[id].copy(snd.sfxGainL)
+				var image = document.createElement("img")
-				assets.sounds[id + "_p2"] = assets.sounds[id].copy(snd.sfxGainR)
+				this.promises.push(pageEvents.load(image))
+				image.id = name
+				image.src = "/assets/img/" + name
+				this.assetsDiv.appendChild(image)
+				assets.image[id] = image
+			})
+			
+			assets.audioSfx.forEach(name => {
+				this.promises.push(this.loadSound(name, snd.sfxGain))
+			})
+			assets.audioMusic.forEach(name => {
+				this.promises.push(this.loadSound(name, snd.musicGain))
+			})
+			assets.audioSfxLR.forEach(name => {
+				this.promises.push(this.loadSound(name, snd.sfxGain).then(sound => {
+					var id = this.getFilename(name)
+					assets.sounds[id + "_p1"] = assets.sounds[id].copy(snd.sfxGainL)
+					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()
+			
+			this.promises.push(this.ajax("/api/songs").then(songs => {
+				assets.songs = JSON.parse(songs)
 			}))
+			
+			assets.views.forEach(name => {
+				var id = this.getFilename(name)
+				this.promises.push(this.ajax("src/views/" + name).then(page => {
+					assets.pages[id] = page
+				}))
+			})
+			
+			this.promises.forEach(promise => {
+				promise.then(this.assetLoaded.bind(this))
+			})
+			
+			Promise.all(this.promises).then(() => {
+				this.clean()
+				this.callback()
+			}, this.errorMsg.bind(this))
+			
 		})
-		assets.audioSfxLoud.forEach(name => {
-			this.promises.push(this.loadSound(name, snd.sfxLoudGain))
-		})
-		
-		p2 = new P2Connection()
-		
-		this.promises.push(this.ajax("/api/songs").then(songs => {
-			assets.songs = JSON.parse(songs)
-		}))
-		
-		assets.views.forEach(name => {
-			var id = this.getFilename(name)
-			this.promises.push(this.ajax("src/views/" + name).then(page => {
-				assets.pages[id] = page
-			}))
-		})
-		
-		this.promises.forEach(promise => {
-			promise.then(this.assetLoaded.bind(this))
-		})
-		
-		Promise.all(this.promises).then(() => {
-			this.clean()
-			this.callback()
-		}, this.errorMsg.bind(this))
 	}
 	loadSound(name, gain){
+		if(this.oggNotSupported && name.endsWith(".ogg")){
+			name = name.slice(0, -4) + ".wav"
+		}
 		var id = this.getFilename(name)
 		return gain.load("/assets/audio/" + name).then(sound => {
 			assets.sounds[id] = sound

public/src/js/view.js

@@ -498,7 +498,7 @@ class View{
 				}
 			}else if(!circle.isAnimated()){
 				// Start animation to HP bar
-				circle.animate()
+				circle.animate(ms)
 			}
 			if(ms >= circle.ms && !circle.gogoChecked){
 				if(this.gogoTime != circle.gogoTime){
@@ -507,10 +507,12 @@ class View{
 				circle.gogoChecked = true
 			}
 			if(circle.isAnimated()){
-				var animationDuration = 470
+				var animT = circle.getAnimT()
-				if(ms <= finishTime + animationDuration){
+				var animationDuration = 400
-					var curveDistance = this.HPBarX + this.HPBarW - this.slotX
+				if(ms <= animT + animationDuration){
-					var bezierPoint = this.calcBezierPoint(circle.getAnimT(), [{
+					var curveDistance = this.HPBarX + this.HPBarW - this.slotX - this.HPBarColH / 2
+					var animPoint = (ms - animT) / animationDuration
+					var bezierPoint = this.calcBezierPoint(this.easeOut(animPoint), [{
 						x: this.slotX + this.circleSize * 0.4,
 						y: this.circleY - this.circleSize * 0.8
 					}, {
@@ -521,13 +523,9 @@ class View{
 						y: 0
 					}, {
 						x: this.slotX + curveDistance,
-						y: this.HPbarColY
+						y: this.HPbarColY + this.HPBarColH / 2
 					}])
 					this.drawCircle(circle, {x: bezierPoint.x, y: bezierPoint.y})
-					
-					// Update animation frame
-					circle.incAnimT()
-					circle.incFrame()
 				}
 				else{
 					circle.endAnimation()
@@ -548,6 +546,9 @@ class View{
 		}
 		return data[0]
 	}
+	easeOut(pos){
+		return Math.sin(Math.PI / 2 * pos)
+	}
 	drawCircle(circle, circlePos){
 		var z = this.canvas.scale
 		var fill, size, faceID