Add animations and fix behaviour

public/src/js/canvascache.js

@@ -11,6 +11,7 @@ class CanvasCache{
 			this.map = new Map()
 			this.canvas = document.createElement("canvas")
 			this.ctx = this.canvas.getContext("2d")
+			document.body.appendChild(this.canvas)
 		}
 		this.scale = scale
 		this.x = 0

public/src/js/canvasdraw.js

@@ -268,6 +268,9 @@
 	easeOut(pos){
 		return Math.sin(Math.PI / 2 * pos)
 	}
+	easeOutBack(pos){
+		return Math.sin(Math.PI / 1.74 * pos) * 1.03
+	}
 	easeInOut(pos){
 		return (Math.cos(Math.PI * pos) - 1) / -2
 	}
@@ -572,7 +575,7 @@
 					}
 					if(symbol.ura){
 						ctx.font = (30 * mul) + "px Meiryo, sans-serif"
-						ctx.textBaseline = "center"
+						ctx.textBaseline = "middle"
 						ctx.beginPath()
 						ctx.arc(currentX, currentY + (17 * mul), (18 * mul), 0, Math.PI * 2)
 						if(action === "stroke"){
@@ -581,7 +584,7 @@
 						}else if(action === "fill"){
 							ctx.strokeStyle = config.fill
 							ctx.lineWidth = 2.5 * mul
-							ctx.fillText(symbol.text, currentX, currentY)
+							ctx.fillText(symbol.text, currentX, currentY + (17 * mul))
 						}
 						ctx.stroke()
 					}else{
@@ -788,7 +791,7 @@
 				}
 				if(symbol.ura){
 					ctx.font = (30 * mul) + "px Meiryo, sans-serif"
-					ctx.textBaseline = "center"
+					ctx.textBaseline = "middle"
 					ctx.beginPath()
 					ctx.arc(currentX, currentY + (17 * mul), (18 * mul), 0, Math.PI * 2)
 					if(action === "strokeText"){

public/src/js/debug.js

@@ -116,7 +116,9 @@ class Debug{
 				this.branchReset(null, true)
 			}
 			
-			var measures = this.controller.parsedSongData.measures
+			var measures = this.controller.parsedSongData.measures.filter((measure, i, array) => {
+				return i === 0 || Math.abs(measure.ms - array[i - 1].ms) > 0.01
+			})
 			this.measureNumSlider.setMinMax(0, measures.length - 1)
 			if(this.measureNum && measures.length > this.measureNum){
 				var measureMS = measures[this.measureNum].ms
@@ -197,7 +199,9 @@ class Debug{
 			var game = this.controller.game
 			var name = this.branchSelect.value
 			game.branch = name === "auto" ? false : name
-			game.branchSet = false
+			game.branchSet = name === "auto"
+			var selectedOption = this.branchSelect.selectedOptions[0]
+			this.branchSelect.style.background = selectedOption.style.background
 			if(this.restartCheckbox.checked && !noRestart){
 				this.restartSong()
 			}

public/src/js/game.js

@@ -28,8 +28,8 @@ class Game{
 		this.musicFadeOut = 0
 		this.fadeOutStarted = false
 		this.currentTimingPoint = 0
-		this.sectionNotes = []
-		this.sectionDrumroll = 0
+		this.branchNames = ["normal", "advanced", "master"]
+		this.resetSection()
 		
 		assets.songs.forEach(song => {
 			if(song.id == selectedSong.folder){
@@ -77,7 +77,7 @@ class Game{
 		var index = 0
 		for(var i = startIndex; i < circles.length; i++){
 			var circle = circles[i]
-			if((!circle.branch || circle.branch.active) && !circle.isPlayed){
+			if(circle && (!circle.branch || circle.branch.active) && !circle.isPlayed){
 				var type = circle.type
 				var drumrollNotes = type === "balloon" || type === "drumroll" || type === "daiDrumroll"
 				var endTime = circle.endTime + (drumrollNotes ? 0 : this.rules.bad)
@@ -100,6 +100,9 @@ class Game{
 				if(ms > endTime){
 					if(!this.controller.autoPlayEnabled){
 						if(drumrollNotes){
+							if(circle.section && circle.timesHit === 0){
+								this.resetSection()
+							}
 							circle.played(-1, false)
 							this.updateCurrentCircle()
 							if(this.controller.multiplayer === 1){
@@ -112,6 +115,9 @@ class Game{
 								p2.send("drumroll", value)
 							}
 						}else{
+							if(circle.section){
+								this.resetSection()
+							}
 							var currentScore = 0
 							circle.played(-1, type === "daiDon" || type === "daiKa")
 							this.sectionNotes.push(0)
@@ -137,47 +143,62 @@ class Game{
 		}
 		var branches = this.songData.branches
 		if(branches){
-			if(this.controller.multiplayer === 2 || this.branch){
-				var parent = this.controller.multiplayer === 2 ? p2 : this
-				var view = this.controller.view
-				if(view.branch !== parent.branch){
-					view.branchAnimate = {
-						ms: ms,
-						fromBranch: view.branch
+			var force = this.controller.multiplayer === 2 ? p2 : this
+			var measures = this.songData.measures
+			if(this.controller.multiplayer === 2 || force.branch){
+				if(!force.branchSet){
+					force.branchSet = true
+					if(branches.length){
+						this.setBranch(branches[0], force.branch)
 					}
-					view.branch = parent.branch
-				}
-				if(!parent.branchSet){
-					parent.branchSet = true
-					for(var i = 0; i < branches.length; i++){
-						this.setBranch(branches[i], parent.branch)
+					var view = this.controller.view
+					var currentMeasure = view.branch
+					for(var i = measures.length; i--;){
+						var measure = measures[i]
+						if(measure.nextBranch && measure.ms <= ms){
+							currentMeasure = measure.nextBranch.active
+						}
+					}
+					if(view.branch !== currentMeasure){
+						view.branchAnimate = {
+							ms: ms,
+							fromBranch: view.branch
+						}
+						view.branch = currentMeasure
 					}
 				}
-			}else{
-				var measures = this.songData.measures
-				for(var i = 0; i < measures.length; i++){
-					var measure = measures[i]
-					if(measure.ms > ms){
-						break
-					}else if(measure.nextBranch && !measure.gameChecked){
-						measure.gameChecked = true
-						var branch = measure.nextBranch
-						if(branch.type){
-							if(branch.type === "drumroll"){
-								var accuracy = this.sectionDrumroll
+			}
+			for(var i = 0; i < measures.length; i++){
+				var measure = measures[i]
+				if(measure.ms > ms){
+					break
+				}else if(measure.nextBranch && !measure.gameChecked){
+					measure.gameChecked = true
+					var branch = measure.nextBranch
+					if(branch.type){
+						var accuracy = 0
+						if(branch.type === "drumroll"){
+							if(force.branch){
+								var accuracy = Math.max(0, branch.requirement[force.branch])
 							}else{
-								var accuracy = this.sectionNotes.reduce((a, b) => a + b) / this.sectionNotes.length * 100
+								var accuracy = this.sectionDrumroll
 							}
-							if(accuracy >= branch.requirement[1]){
-								this.setBranch(branch, "master")
-							}else if(accuracy >= branch.requirement[0]){
-								this.setBranch(branch, "advanced")
+						}else if(this.sectionNotes.length !== 0){
+							if(force.branch){
+								var accuracy = Math.max(0, Math.min(100, branch.requirement[force.branch]))
 							}else{
-								this.setBranch(branch, "normal")
+								var accuracy = this.sectionNotes.reduce((a, b) => a + b) / this.sectionNotes.length * 100
 							}
-						}else if(this.controller.multiplayer === 1){
-							p2.send("branch", "normal")
 						}
+						if(accuracy >= branch.requirement.master){
+							this.setBranch(branch, "master")
+						}else if(accuracy >= branch.requirement.advanced){
+							this.setBranch(branch, "advanced")
+						}else{
+							this.setBranch(branch, "normal")
+						}
+					}else if(this.controller.multiplayer === 1){
+						p2.send("branch", "normal")
 					}
 				}
 			}
@@ -273,6 +294,9 @@ class Game{
 			this.updateCombo(score)
 			this.updateGlobalScore(score, typeDai && keyDai ? 2 : 1, circle.gogoTime)
 			this.updateCurrentCircle()
+			if(circle.section){
+				this.resetSection()
+			}
 			this.sectionNotes.push(score === 450 ? 1 : (score === 230 ? 0.5 : 0))
 			if(this.controller.multiplayer === 1){
 				var value = {
@@ -327,6 +351,9 @@ class Game{
 		var ms = this.elapsedTime
 		var dai = circle.type === "daiDrumroll"
 		var score = 100
+		if(circle.section && circle.timesHit === 0){
+			this.resetSection()
+		}
 		circle.hit(keysKa)
 		var keyTime = this.controller.getKeyTime()
 		if(circle.type === "drumroll"){
@@ -347,9 +374,7 @@ class Game{
 		circleAnim.animate(ms)
 		this.view.drumroll.push(circleAnim)
 		this.globalScore.drumroll++
-		if(this.controller.multiplayer !== 2){
-			this.sectionDrumroll++
-		}
+		this.sectionDrumroll++
 		this.globalScore.points += score * (dai ? 2 : 1)
 		this.view.setDarkBg(false)
 	}
@@ -473,10 +498,6 @@ class Game{
 		do{
 			var circle = circles[++this.currentCircle]
 		}while(circle && circle.branch && !circle.branch.active)
-		if(circle && circle.section){
-			this.sectionNotes = []
-			this.sectionDrumroll = 0
-		}
 	}
 	getCurrentCircle(){
 		return this.currentCircle
@@ -530,16 +551,59 @@ class Game{
 		}
 		this.globalScore.points += Math.floor(score * multiplier / 10) * 10
 	}
-	setBranch(branch, name){
-		var names = ["normal", "advanced", "master"]
-		for(var i in names){
-			if(names[i] in branch){
-				branch[names[i]].active = names[i] === name
+	setBranch(currentBranch, activeName){
+		var pastActive = currentBranch.active
+		var ms = currentBranch.ms
+		for(var i = 0; i < this.songData.branches.length; i++){
+			var branch = this.songData.branches[i]
+			if(branch.ms >= ms){
+				var relevantName = activeName
+				var req = branch.requirement
+				var noNormal = req.advanced <= 0
+				var noAdvanced = req.master <= 0 || req.advanced >= req.master || branch.type === "accuracy" && req.advanced > 100
+				var noMaster = branch.type === "accuracy" && req.master > 100
+				if(relevantName === "normal" && noNormal){
+					relevantName = noAdvanced ? "master" : "advanced"
+				}
+				if(relevantName === "advanced" && noAdvanced){
+					relevantName = noMaster ? "normal" : "master"
+				}
+				if(relevantName === "master" && noMaster){
+					relevantName = noAdvanced ? "normal" : "advanced"
+				}
+				for(var j in this.branchNames){
+					var name = this.branchNames[j]
+					if(name in branch){
+						branch[name].active = name === relevantName
+					}
+				}
+				if(branch === currentBranch){
+					activeName = relevantName
+				}
+				branch.active = relevantName
+			}
+		}
+		var circles = this.songData.circles
+		var circle = circles[this.currentCircle]
+		if(!circle || circle.branch === currentBranch[pastActive]){
+			var ms = this.elapsedTime
+			var closestCircle = circles.findIndex(circle => {
+				return (!circle.branch || circle.branch.active) && circle.endTime >= ms
+			})
+			if(closestCircle !== -1){
+				this.currentCircle = closestCircle
 			}
 		}
-		branch.active = name
+		this.HPGain = 100 / this.songData.circles.filter(circle => {
+			var type = circle.type
+			return (type === "don" || type === "ka" || type === "daiDon" || type === "daiKa") && (!circle.branch || circle.branch.active)
+		}).length
 		if(this.controller.multiplayer === 1){
-			p2.send("branch", name)
+			p2.send("branch", activeName)
 		}
 	}
+	resetSection(){
+		this.sectionNotes = []
+		this.sectionDrumroll = 0
+	}
 }

public/src/js/main.js

@@ -106,7 +106,9 @@ pageEvents.keyAdd(debugObj, "all", "down", event => {
 		}else if(debugObj.state === "minimised"){
 			debugObj.debug.restore()
 		}else{
-			debugObj.debug = new Debug()
+			try{
+				debugObj.debug = new Debug()
+			}catch(e){}
 		}
 	}
 	if(event.keyCode === 82 && debugObj.debug && debugObj.controller){

public/src/js/mekadon.js

@@ -8,6 +8,9 @@ class Mekadon{
 	play(circle){
 		var type = circle.type
 		if((type === "balloon" || type === "drumroll" || type === "daiDrumroll") && this.getMS() > circle.endTime){
+			if(circle.section && circle.timesHit === 0){
+				this.game.resetSection()
+			}
 			circle.played(-1, false)
 			this.game.updateCurrentCircle()
 		}
@@ -96,6 +99,9 @@ class Mekadon{
 			this.game.updateGlobalScore(score, keyDai ? 2 : 1, circle.gogoTime)
 			this.game.updateCurrentCircle()
 			circle.played(score, keyDai)
+			if(circle.section){
+				this.game.resetSection()
+			}
 			this.game.sectionNotes.push(score === 450 ? 1 : (score === 230 ? 0.5 : 0))
 		}
 		this.lastHit = ms

public/src/js/parsetja.js

@@ -137,7 +137,7 @@
 		var branchObj = {}
 		var currentBranch = false
 		var branchSettings = {}
-		var branchPushed = false
+		var branchFirstMeasure = false
 		var sectionBegin = true
 		
 		var currentMeasure = []
@@ -157,8 +157,10 @@
 				originalMS: ms,
 				speed: speed,
 				visible: barLine,
-				branch: currentBranch
+				branch: currentBranch,
+				branchFirst: branchFirstMeasure
 			})
+			branchFirstMeasure = false
 			if(currentMeasure.length){
 				for(var i = 0; i < currentMeasure.length; i++){
 					var note = currentMeasure[i]
@@ -222,14 +224,14 @@
 						gogo = false
 						break
 					case "bpmchange":
-						bpm = parseFloat(value)
+						bpm = parseFloat(value) || bpm
 						break
 					case "scroll":
-						scroll = parseFloat(value)
+						scroll = parseFloat(value) || scroll
 						break
 					case "measure":
 						var [numerator, denominator] = value.split("/")
-						measure = numerator / denominator * 4
+						measure = numerator / denominator * 4 || measure
 						break
 					case "delay":
 						ms += (parseFloat(value) || 0) * 1000
@@ -243,7 +245,7 @@
 					case "branchstart":
 						branch = true
 						currentBranch = false
-						branchPushed = false
+						branchFirstMeasure = true
 						branchSettings = {
 							ms: ms,
 							gogo: gogo,
@@ -255,26 +257,45 @@
 						if(!this.branches){
 							this.branches = []
 						}
+						var req = {
+							advanced: parseFloat(value[1]) || 0,
+							master: parseFloat(value[2]) || 0
+						}
+						if(req.advanced > 0){
+							var active = req.master > 0 ? "normal" : "master"
+						}else{
+							var active = req.master > 0 ? "advanced" : "master"
+						}
 						branchObj = {
 							ms: ms,
 							originalMS: ms,
-							type: value[0].toLowerCase() === "r" ? "drumroll" : "perfect",
-							requirement: [
-								parseFloat(value[1]),
-								parseFloat(value[2])
-							]
+							active: active,
+							type: value[0].trim().toLowerCase() === "r" ? "drumroll" : "accuracy",
+							requirement: req
+						}
+						this.branches.push(branchObj)
+						if(this.measures.length === 1 && branchObj.type === "drumroll"){
+							for(var i = circles.length; i--;){
+								var circle = circles[i]
+								if(circle.endTime && circle.type === "drumroll" || circle.type === "daiDrumroll" || circle.type === "balloon"){
+									this.measures.push({
+										ms: circle.endTime,
+										originalMS: circle.endTime,
+										speed: circle.bpm * circle.scroll / 60,
+										visible: false,
+										branch: circle.branch
+									})
+									break
+								}
+							}
+						}
+						if(this.measures.length !== 0){
+							this.measures[this.measures.length - 1].nextBranch = branchObj
 						}
 						break
 					case "branchend":
 						branch = false
 						currentBranch = false
-						if(this.measures.length !== 0){
-							this.measures[this.measures.length - 1].nextBranch = {
-								ms: ms,
-								originalMS: ms,
-								active: "normal"
-							}
-						}
 						break
 					case "section":
 						sectionBegin = true
@@ -283,37 +304,19 @@
 						}
 						break
 					case "n": case "e": case "m":
-						if(!branchPushed){
-							branchPushed = true
-							this.branches.push(branchObj)
-							if(this.measures.length === 1 && branchObj.type === "drumroll"){
-								for(var i = circles.length; i--;){
-									var circle = circles[i]
-									if(circle.endTime && circle.type === "drumroll" || circle.type === "daiDrumroll" || circle.type === "balloon"){
-										this.measures.push({
-											ms: circle.endTime,
-											originalMS: circle.endTime,
-											speed: circle.bpm * circle.scroll / 60,
-											visible: false,
-											branch: circle.branch
-										})
-										break
-									}
-								}
-							}
-							if(this.measures.length !== 0){
-								this.measures[this.measures.length - 1].nextBranch = branchObj
-							}
+						if(!branch){
+							break
 						}
 						ms = branchSettings.ms
 						gogo = branchSettings.gogo
 						bpm = branchSettings.bpm
 						scroll = branchSettings.scroll
 						sectionBegin = branchSettings.sectionBegin
+						branchFirstMeasure = true
 						var branchName = name === "m" ? "master" : (name === "e" ? "advanced" : "normal")
 						currentBranch = {
 							name: branchName,
-							active: branchName === "normal"
+							active: branchName === branchObj.active
 						}
 						branchObj[branchName] = currentBranch
 						break
@@ -432,6 +435,7 @@
 		
 		if(this.branches){
 			circles.sort((a, b) => a.ms > b.ms ? 1 : -1)
+			this.measures.sort((a, b) => a.ms > b.ms ? 1 : -1)
 			circles.forEach((circle, i) => circle.id = i + 1)
 		}
 		return circles

public/src/js/strings.js

@@ -54,6 +54,11 @@
 	this.good = "良"
 	this.ok = "可"
 	this.bad = "不可"
+	this.branch = {
+		"normal": "普通譜面",
+		"advanced": "玄人譜面",
+		"master": "達人譜面"
+	}
 	this.pauseOptions = [
 		"演奏をつづける",
 		"はじめからやりなおす",
@@ -136,7 +141,7 @@ function StringsEn(){
 	this.normal = "Normal"
 	this.hard = "Hard"
 	this.oni = "Extreme"
-	this.songBranch = "Forked Paths"
+	this.songBranch = "Diverge Notes"
 	this.sessionStart = "Begin an Online Session!"
 	this.sessionEnd = "End Online Session"
 	this.loading = "Loading..."
@@ -156,6 +161,11 @@ function StringsEn(){
 	this.good = "GOOD"
 	this.ok = "OK"
 	this.bad = "BAD"
+	this.branch = {
+		"normal": "Normal",
+		"advanced": "Professional",
+		"master": "Master"
+	}
 	this.pauseOptions = [
 		"Continue",
 		"Retry",
@@ -238,7 +248,7 @@ function StringsCn(){
 	this.normal = "普通"
 	this.hard = "困难"
 	this.oni = "魔王"
-	this.songBranch = "有分数分支"
+	this.songBranch = "有谱面分歧"
 	this.sessionStart = "开始在线会话!"
 	this.sessionEnd = "结束在线会话"
 	this.loading = "加载中..."
@@ -258,6 +268,11 @@ function StringsCn(){
 	this.good = "良"
 	this.ok = "可"
 	this.bad = "不可"
+	this.branch = {
+		"normal": "一般谱面",
+		"advanced": "进阶谱面",
+		"master": "达人谱面"
+	}
 	this.pauseOptions = [
 		"继续演奏",
 		"从头开始",
@@ -340,7 +355,7 @@ function StringsTw(){
 	this.normal = "普通"
 	this.hard = "困難"
 	this.oni = "魔王"
-	this.songBranch = "有分數分支"
+	this.songBranch = "有譜面分歧"
 	this.sessionStart = "開始多人模式!"
 	this.sessionEnd = "結束多人模式"
 	this.loading = "讀取中..."
@@ -360,6 +375,11 @@ function StringsTw(){
 	this.good = "良"
 	this.ok = "可"
 	this.bad = "不可"
+	this.branch = {
+		"normal": "一般譜面",
+		"advanced": "進階譜面",
+		"master": "達人譜面"
+	}
 	this.pauseOptions = [
 		"繼續演奏",
 		"從頭開始",
@@ -462,6 +482,11 @@ function StringsKo(){
 	this.good = "얼쑤"
 	this.ok = "좋다"
 	this.bad = "에구"
+	this.branch = {
+		"normal": "보통 악보",
+		"advanced": "현인 악보",
+		"master": "달인 악보"
+	}
 	this.pauseOptions = [
 		"연주 계속하기",
 		"처음부터 다시",

public/src/js/view.js

@@ -82,9 +82,24 @@
 				fromBranch: "normal"
 			}
 			this.branchMap = {
-				"normal": "rgba(0, 0, 0, 0)",
-				"advanced": "rgba(29, 129, 189, 0.4)",
-				"master": "rgba(230, 29, 189, 0.4)"
+				"normal": {
+					"bg": "rgba(0, 0, 0, 0)",
+					"text": "#d3d3d3",
+					"stroke": "#393939",
+					"shadow": "#000"
+				},
+				"advanced": {
+					"bg": "rgba(29, 129, 189, 0.4)",
+					"text": "#94d7e7",
+					"stroke": "#315973",
+					"shadow": "#082031"
+				},
+				"master": {
+					"bg": "rgba(230, 29, 189, 0.4)",
+					"text": "#f796ef",
+					"stroke": "#7e2e6e",
+					"shadow": "#3e0836"
+				}
 			}
 		}
 		
@@ -97,6 +112,7 @@
 		this.titleCache = new CanvasCache()
 		this.comboCache = new CanvasCache()
 		this.pauseCache = new CanvasCache()
+		this.branchCache = new CanvasCache()
 		
 		this.multiplayer = this.controller.multiplayer
 		
@@ -144,7 +160,8 @@
 		}
 		this.setDonBg()
 		
-		this.lastMousemove = this.controller.game.getAccurateTime()
+		this.startTime = this.controller.game.getAccurateTime()
+		this.lastMousemove = this.startTime
 		pageEvents.mouseAdd(this, this.onmousemove.bind(this))
 		
 		this.refresh()
@@ -174,6 +191,7 @@
 		}
 		var ratio = (ratioX < ratioY ? ratioX : ratioY)
 		
+		var resized = false
 		if(this.winW !== winW || this.winH !== winH){
 			this.winW = winW
 			this.winH = winH
@@ -193,6 +211,7 @@
 			}
 			this.fillComboCache()
 			this.setDonBgHeight()
+			resized = true
 		}else if(this.controller.game.paused && !document.hasFocus()){
 			return
 		}else if(this.multiplayer !== 2){
@@ -681,7 +700,7 @@
 		}
 		ctx.restore()
 		
-		// Bar pressed keys
+		// Branch background
 		var keyTime = this.controller.getKeyTime()
 		var sound = keyTime["don"] > keyTime["ka"] ? "don" : "ka"
 		var padding = this.slotPos.paddingLeft
@@ -689,12 +708,78 @@
 		var barY = this.slotPos.y - 65 * mul
 		var barH = 130 * mul
 		
+		if(this.branchAnimate && ms <= this.branchAnimate.ms + 300){
+			var alpha = Math.max(0, (ms - this.branchAnimate.ms) / 300)
+			ctx.globalAlpha = 1 - alpha
+			ctx.fillStyle = this.branchMap[this.branchAnimate.fromBranch].bg
+			ctx.fillRect(padding, barY, winW - padding, barH)
+			ctx.globalAlpha = alpha
+		}
+		if(this.branch){
+			ctx.fillStyle = this.branchMap[this.branch].bg
+			ctx.fillRect(padding, barY, winW - padding, barH)
+			ctx.globalAlpha = 1
+		}
+		
+		// Current branch text
+		if(this.branch){
+			if(resized){
+				this.fillBranchCache()
+			}
+			var textW = Math.floor(260 * mul)
+			var textH = Math.floor(barH)
+			var textX = winW - textW
+			var oldOffset = 0
+			var newOffset = 0
+			var elapsed = ms - this.startTime
+			if(elapsed < 250){
+				textX = winW
+			}else if(elapsed < 500){
+				textX += (1 - this.draw.easeOutBack((elapsed - 250) / 250)) * textW
+			}
+			if(this.branchAnimate && ms - this.branchAnimate.ms < 310 && ms >= this.branchAnimate.ms){
+				var fromBranch = this.branchAnimate.fromBranch
+				var elapsed = ms - this.branchAnimate.ms
+				var reverse = fromBranch === "master" || fromBranch === "advanced" && this.branch === "normal" ? -1 : 1
+				if(elapsed < 65){
+					oldOffset = elapsed / 65 * 12 * mul * reverse
+					ctx.globalAlpha = 1
+					var newAlpha = 0
+				}else if(elapsed < 215){
+					var animPoint = (elapsed - 65) / 150
+					oldOffset = (12 - animPoint * 48) * mul * reverse
+					newOffset = (36 - animPoint * 48) * mul * reverse
+					ctx.globalAlpha = this.draw.easeIn(1 - animPoint)
+					var newAlpha = this.draw.easeIn(animPoint)
+				}else{
+					newOffset = (1 - (elapsed - 215) / 95) * -12 * mul * reverse
+					ctx.globalAlpha = 0
+					var newAlpha = 1
+				}
+				this.branchCache.get({
+					ctx: ctx,
+					x: textX, y: barY + oldOffset,
+					w: textW, h: textH,
+					id: fromBranch
+				})
+				ctx.globalAlpha = newAlpha
+			}
+			this.branchCache.get({
+				ctx: ctx,
+				x: textX, y: barY + newOffset,
+				w: textW, h: textH,
+				id: this.branch
+			})
+			ctx.globalAlpha = 1
+		}
+		
+		// Go go time background
 		if(this.gogoTime || ms <= this.gogoTimeStarted + 100){
 			var grd = ctx.createLinearGradient(padding, 0, winW, 0)
-			grd.addColorStop(0, "#512a2c")
-			grd.addColorStop(0.46, "#6f2a2d")
-			grd.addColorStop(0.76, "#8a4763")
-			grd.addColorStop(1, "#2c2a2c")
+			grd.addColorStop(0, "rgba(255, 0, 0, 0.16)")
+			grd.addColorStop(0.45, "rgba(255, 0, 0, 0.28)")
+			grd.addColorStop(0.77, "rgba(255, 83, 157, 0.4)")
+			grd.addColorStop(1, "rgba(255, 83, 157, 0)")
 			ctx.fillStyle = grd
 			if(!this.touchEnabled){
 				var alpha = Math.min(100, ms - this.gogoTimeStarted) / 100
@@ -705,18 +790,8 @@
 			}
 			ctx.fillRect(padding, barY, winW - padding, barH)
 		}
-		if(this.branchAnimate && ms <= this.branchAnimate.ms + 300){
-			var alpha = Math.max(0, (ms - this.branchAnimate.ms) / 300)
-			ctx.globalAlpha = 1 - alpha
-			ctx.fillStyle = this.branchMap[this.branchAnimate.fromBranch]
-			ctx.fillRect(padding, barY, winW - padding, barH)
-			ctx.globalAlpha = alpha
-		}
-		if(this.branch){
-			ctx.fillStyle = this.branchMap[this.branch]
-			ctx.fillRect(padding, barY, winW - padding, barH)
-			ctx.globalAlpha = 1
-		}
+		
+		// Bar pressed keys
 		if(keyTime[sound] > ms - 130){
 			var gradients = {
 				"don": "255, 0, 0",
@@ -814,6 +889,7 @@
 			ctx.lineWidth = 7 * mul
 			ctx.textAlign = "center"
 			ctx.miterLimit = 1
+			ctx.strokeStyle = "#000"
 			ctx.strokeText(strings.combo, comboX, comboTextY)
 			ctx.miterLimit = 10
 			ctx.fillText(strings.combo, comboX, comboTextY)
@@ -1128,7 +1204,7 @@
 			var finishTime = measure.ms + this.posToMs(this.slotPos.x - this.slotPos.paddingLeft + 3, measure.speed)
 			if(measure.visible && (!measure.branch || measure.branch.active) && ms >= startingTime && ms <= finishTime){
 				var measureX = this.slotPos.x + this.msToPos(measure.ms - ms, measure.speed)
-				this.ctx.strokeStyle = "#bdbdbd"
+				this.ctx.strokeStyle = measure.branchFirst ? "#ff0" : "#bdbdbd"
 				this.ctx.lineWidth = 3
 				this.ctx.beginPath()
 				this.ctx.moveTo(measureX, measureY)
@@ -1137,9 +1213,9 @@
 			}
 			if(this.multiplayer !== 2 && ms >= measure.ms && measure.nextBranch && !measure.viewChecked && measure.gameChecked){
 				measure.viewChecked = true
-				this.branchAnimate = {
-					ms: ms,
-					fromBranch: this.branch
+				if(measure.nextBranch.active !== this.branch){
+					this.branchAnimate.ms = ms
+					this.branchAnimate.fromBranch = this.branch
 				}
 				this.branch = measure.nextBranch.active
 			}
@@ -1468,6 +1544,37 @@
 		})
 		this.globalAlpha = 1
 	}
+	fillBranchCache(){
+		var mul = this.slotPos.size / 106
+		var textW = Math.floor(260 * mul)
+		var barH = Math.floor(130 * mul)
+		var branchNames = this.controller.game.branchNames
+		var textX = textW - 33 * mul
+		var textY = 63 * mul
+		var fontSize = (strings.id === "en" ? 33 : (strings.id === "ko" ? 38 : 43)) * mul
+		this.branchCache.resize((textW + 1), (barH + 1) * 3, this.ratio)
+		for(var i in branchNames){
+			this.branchCache.set({
+				w: textW,
+				h: barH,
+				id: branchNames[i]
+			}, ctx => {
+				var currentMap = this.branchMap[branchNames[i]]
+				ctx.font = this.draw.bold(this.font) + fontSize + "px " + this.font
+				ctx.lineJoin = "round"
+				ctx.miterLimit = 1
+				ctx.textAlign = "right"
+				ctx.textBaseline = "middle"
+				ctx.lineWidth = 8 * mul
+				ctx.strokeStyle = currentMap.shadow
+				ctx.strokeText(strings.branch[branchNames[i]], textX, textY + 4 * mul)
+				ctx.strokeStyle = currentMap.stroke
+				ctx.strokeText(strings.branch[branchNames[i]], textX, textY)
+				ctx.fillStyle = currentMap.text
+				ctx.fillText(strings.branch[branchNames[i]], textX, textY)
+			})
+		}
+	}
 	toggleGogoTime(circle){
 		this.gogoTime = circle.gogoTime
 		this.gogoTimeStarted = circle.ms

public/src/views/debug.html

@@ -13,10 +13,10 @@
 		<div>Branch:</div>
 		<div class="branch-select select">
 			<span class="reset">x</span><select>
-				<option value="auto" selected>Auto</option>
-				<option value="normal">Normal</option>
-				<option value="advanced">Advanced</option>
-				<option value="master">Master</option>
+				<option value="auto" selected style="background:#fff">Auto</option>
+				<option value="normal" style="background:#ccc">Normal</option>
+				<option value="advanced" style="background:#bdf">Professional</option>
+				<option value="master" style="background:#ebf">Master</option>
 			</select>
 		</div>
 	</div>