From 2af924a9854ee5b043d55726edec98013fbb700d Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Fri, 13 Mar 2020 05:34:54 +0300
Subject: [PATCH 01/41] Add everything for accounts

---
 public/src/css/view.css            |  77 +++++
 public/src/js/account.js           | 482 +++++++++++++++++++++++++++++
 public/src/js/assets.js            |   8 +-
 public/src/js/canvasdraw.js        | 102 +++++-
 public/src/js/game.js              |   4 +-
 public/src/js/importsongs.js       |  49 +--
 public/src/js/lib/js.cookie.min.js |   2 +
 public/src/js/loader.js            | 134 ++++----
 public/src/js/loadsong.js          |   3 +-
 public/src/js/main.js              |   1 +
 public/src/js/p2.js                |   5 +
 public/src/js/pageevents.js        |   3 +
 public/src/js/scoresheet.js        |  28 ++
 public/src/js/scorestorage.js      |  78 ++++-
 public/src/js/session.js           |   5 +-
 public/src/js/songselect.js        | 208 ++++++++++---
 public/src/js/strings.js           | 109 +++++++
 public/src/js/view.js              |  55 ++++
 public/src/views/account.html      |  33 ++
 public/src/views/login.html        |  24 ++
 server.py                          |  27 +-
 21 files changed, 1291 insertions(+), 146 deletions(-)
 create mode 100644 public/src/js/account.js
 create mode 100644 public/src/js/lib/js.cookie.min.js
 create mode 100644 public/src/views/account.html
 create mode 100644 public/src/views/login.html

diff --git a/public/src/css/view.css b/public/src/css/view.css
index 76ed3f4..c1f254e 100644
--- a/public/src/css/view.css
+++ b/public/src/css/view.css
@@ -291,3 +291,80 @@ kbd{
 .left-buttons .taibtn{
 	z-index: 1;
 }
+.accountpass-form,
+.accountdel-form,
+.login-form{
+	text-align: center;
+	width: 80%;
+	margin: auto;
+}
+.accountpass-form .accountpass-div,
+.accountdel-form .accountdel-div,
+.login-form .password2-div{
+	display: none;
+}
+.account-view .displayname,
+.accountpass-form input[type=password],
+.accountdel-form input[type=password],
+.login-form input[type=text],
+.login-form input[type=password]{
+	width: 100%;
+	font-size: 1.4em;
+	margin: 0.1em 0;
+	padding: 0.3em;
+	box-sizing: border-box;
+}
+.accountpass-form input[type=password]{
+	width: calc(100% / 3);
+}
+.accountpass-form input[type=password]::placeholder{
+	font-size: 0.8em;
+}
+.login-form input[type=checkbox]{
+	transform: scale(1.4);
+}
+.account-view .displayname-hint,
+.login-form .username-hint,
+.login-form .password-hint,
+.login-form .remember-label{
+	display: block;
+	font-size: 1.1em;
+	padding: 0.5em;
+}
+.login-form .remember-label{
+	padding: 0.85em;
+}
+.account-view .save-btn{
+	float: right;
+	padding: 0.4em 1.5em;
+	font-weight: bold;
+	border-color: #000;
+	color: #000;
+	z-index: 1;
+}
+.account-view .view-end-button{
+	margin-right: 0.4em;
+	font-weight: normal;
+	border-color: #dacdb2;
+	color: #555;
+}
+.account-view .save-btn:hover,
+.account-view .save-btn.selected,
+.account-view .view-end-button:hover,
+.account-view .view-end-button.selected{
+	color: #fff;
+	border-color: #fff;
+}
+.account-view .displayname-div{
+	width: 80%;
+	margin: 0 auto;
+}
+.accountpass-form .accountpass-btn,
+.accountdel-form .accountdel-btn,
+.login-form .login-btn{
+	z-index: 1;
+}
+.accountpass-form,
+.accountdel-form{
+	margin: 0.3em auto;
+}
diff --git a/public/src/js/account.js b/public/src/js/account.js
new file mode 100644
index 0000000..35ea69d
--- /dev/null
+++ b/public/src/js/account.js
@@ -0,0 +1,482 @@
+class Account{
+	constructor(touchEnabled){
+		this.touchEnabled = touchEnabled
+		cancelTouch = false
+		this.locked = false
+		
+		if(account.loggedIn){
+			this.accountForm()
+		}else{
+			this.loginForm()
+		}
+		this.selected = this.items.length - 1
+		
+		this.keyboard = new Keyboard({
+			confirm: ["enter", "space", "don_l", "don_r"],
+			previous: ["left", "up", "ka_l"],
+			next: ["right", "down", "ka_r"],
+			back: ["escape"]
+		}, this.keyPressed.bind(this))
+		this.gamepad = new Gamepad({
+			"confirm": ["b", "ls", "rs"],
+			"previous": ["u", "l", "lb", "lt", "lsu", "lsl"],
+			"next": ["d", "r", "rb", "rt", "lsd", "lsr"],
+			"back": ["start", "a"]
+		}, this.keyPressed.bind(this))
+		
+		pageEvents.send("account", account.loggedIn)
+	}
+	accountForm(){
+		loader.changePage("account", true)
+		this.mode = "account"
+		
+		this.setAltText(this.getElement("view-title"), account.username)
+		this.items = []
+		this.inputForms = []
+		this.shownDiv = ""
+		
+		this.getElement("displayname-hint").innerText = strings.account.displayName
+		this.displayname = this.getElement("displayname")
+		this.displayname.placeholder = strings.account.displayName
+		this.displayname.value = account.displayName
+		this.inputForms.push(this.displayname)
+		
+		this.accountPassButton = this.getElement("accountpass-btn")
+		this.setAltText(this.accountPassButton, strings.account.changePassword)
+		pageEvents.add(this.accountPassButton, ["click", "touchstart"], event => {
+			this.showDiv(event, "pass")
+		})
+		this.accountPass = this.getElement("accountpass-form")
+		for(var i = 0; i < this.accountPass.length; i++){
+			this.accountPass[i].placeholder = strings.account.currentNewRepeat[i]
+			this.inputForms.push(this.accountPass[i])
+		}
+		this.accountPassDiv = this.getElement("accountpass-div")
+		
+		this.accountDelButton = this.getElement("accountdel-btn")
+		this.setAltText(this.accountDelButton, strings.account.deleteAccount)
+		pageEvents.add(this.accountDelButton, ["click", "touchstart"], event => {
+			this.showDiv(event, "del")
+		})
+		this.accountDel = this.getElement("accountdel-form")
+		this.accountDel.password.placeholder = strings.account.verifyPassword
+		this.inputForms.push(this.accountDel.password)
+		this.accountDelDiv = this.getElement("accountdel-div")
+		
+		this.logoutButton = this.getElement("logout-btn")
+		this.setAltText(this.logoutButton, strings.account.logout)
+		pageEvents.add(this.logoutButton, ["mousedown", "touchstart"], this.onLogout.bind(this))
+		this.items.push(this.logoutButton)
+		
+		this.endButton = this.getElement("view-end-button")
+		this.setAltText(this.endButton, strings.account.cancel)
+		pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
+		this.items.push(this.endButton)
+		
+		this.saveButton = this.getElement("save-btn")
+		this.setAltText(this.saveButton, strings.account.save)
+		pageEvents.add(this.saveButton, ["mousedown", "touchstart"], this.onSave.bind(this))
+		this.items.push(this.saveButton)
+		
+		for(var i = 0; i < this.inputForms.length; i++){
+			pageEvents.add(this.inputForms[i], ["keydown", "keyup", "keypress"], this.onFormPress.bind(this))
+		}
+	}
+	showDiv(event, div){
+		if(event){
+			if(event.type === "touchstart"){
+				event.preventDefault()
+			}else if(event.which !== 1){
+				return
+			}
+		}
+		if(this.locked){
+			return
+		}
+		var otherDiv = this.shownDiv && this.shownDiv !== div
+		var display = this.shownDiv === div ? "" : "block"
+		this.shownDiv = display ? div : ""
+		switch(div){
+			case "pass":
+				if(otherDiv){
+					this.accountDelDiv.style.display = ""
+				}
+				this.accountPassDiv.style.display = display
+				break
+			case "del":
+				if(otherDiv){
+					this.accountPassDiv.style.display = ""
+				}
+				this.accountDelDiv.style.display = display
+				break
+		}
+	}
+	loginForm(register, fromSwitch){
+		loader.changePage("login", true)
+		this.mode = register ? "register" : "login"
+		
+		this.setAltText(this.getElement("view-title"), strings.account[this.mode])
+		this.items = []
+		this.form = this.getElement("login-form")
+		this.getElement("username-hint").innerText = strings.account.username
+		this.form.username.placeholder = strings.account.enterUsername
+		this.getElement("password-hint").innerText = strings.account.password
+		this.form.password.placeholder = strings.account.enterPassword
+		this.password2 = this.getElement("password2-div")
+		this.remember = this.getElement("remember-div")
+		this.getElement("remember-label").appendChild(document.createTextNode(strings.account.remember))
+		this.loginButton = this.getElement("login-btn")
+		this.registerButton = this.getElement("register-btn")
+		
+		if(register){
+			var pass2 = document.createElement("input")
+			pass2.type = "password"
+			pass2.name = "password2"
+			pass2.required = true
+			pass2.placeholder = strings.account.repeatPassword
+			this.password2.appendChild(pass2)
+			this.password2.style.display = "block"
+			this.remember.style.display = "none"
+			this.setAltText(this.loginButton, strings.account.registerAccount)
+			this.setAltText(this.registerButton, strings.account.login)
+		}else{
+			this.setAltText(this.loginButton, strings.account.login)
+			this.setAltText(this.registerButton, strings.account.register)
+		}
+		
+		pageEvents.add(this.form, "submit", this.onLogin.bind(this))
+		pageEvents.add(this.loginButton, ["mousedown", "touchstart"], this.onLogin.bind(this))
+		
+		pageEvents.add(this.registerButton, ["mousedown", "touchstart"], this.onSwitchMode.bind(this))
+		this.items.push(this.registerButton)
+		if(!register){
+			this.items.push(this.loginButton)
+		}
+		
+		for(var i = 0; i < this.form.length; i++){
+			pageEvents.add(this.form[i], ["keydown", "keyup", "keypress"], this.onFormPress.bind(this))
+		}
+		
+		this.endButton = this.getElement("view-end-button")
+		this.setAltText(this.endButton, strings.account.back)
+		pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
+		this.items.push(this.endButton)
+		if(fromSwitch){
+			this.selected = 0
+			this.endButton.classList.remove("selected")
+			this.registerButton.classList.add("selected")
+		}
+	}
+	getElement(name){
+		return loader.screen.getElementsByClassName(name)[0]
+	}
+	setAltText(element, text){
+		element.innerText = text
+		element.setAttribute("alt", text)
+	}
+	keyPressed(pressed, name){
+		if(!pressed || this.locked){
+			return
+		}
+		var selected = this.items[this.selected]
+		if(name === "confirm"){
+			if(selected === this.endButton){
+				this.onEnd()
+			}else if(selected === this.registerButton){
+				this.onSwitchMode()
+			}else if(selected === this.loginButton){
+				this.onLogin()
+			}
+		}else if(name === "previous" || name === "next"){
+			selected.classList.remove("selected")
+			this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1))
+			this.items[this.selected].classList.add("selected")
+			assets.sounds["se_ka"].play()
+		}else if(name === "back"){
+			this.onEnd()
+		}
+	}
+	mod(length, index){
+		return ((index % length) + length) % length
+	}
+	onFormPress(event){
+		event.stopPropagation()
+		if(event.type === "keypress" && event.keyCode === 13){
+			if(this.mode === "account"){
+				this.onSave()
+			}else{
+				this.onLogin()
+			}
+		}
+	}
+	onSwitchMode(event){
+		if(event){
+			if(event.type === "touchstart"){
+				event.preventDefault()
+			}else if(event.which !== 1){
+				return
+			}
+		}
+		if(this.locked){
+			return
+		}
+		this.clean(true)
+		this.loginForm(this.mode === "login", true)
+	}
+	onLogin(event){
+		if(event){
+			if(event.type === "touchstart"){
+				event.preventDefault()
+			}else if(event.which !== 1){
+				return
+			}
+		}
+		if(this.locked){
+			return
+		}
+		var obj = {
+			username: this.form.username.value,
+			password: this.form.password.value
+		}
+		if(!obj.username || !obj.password){
+			alert(strings.account.cannotBeEmpty.replace("%s", strings.account[!obj.username ? "username" : "password"]))
+			return
+		}
+		if(this.mode === "login"){
+			obj.remember = this.form.remember.checked
+		}else{
+			if(obj.password !== this.form.password2.value){
+				alert(strings.account.passwordsDoNotMatch)
+				return
+			}
+		}
+		this.request(this.mode, obj).then(response => {
+			account.loggedIn = true
+			account.username = response.username
+			account.displayName = response.display_name
+			var loadScores = scores => {
+				scoreStorage.load(scores)
+				this.onEnd(false, true)
+				pageEvents.send("login", account.username)
+			}
+			if(this.mode === "login"){
+				this.request("scores/get").then(response => {
+					loadScores(response.scores)
+				}, () => {
+					loadScores({})
+				})
+			}else{
+				scoreStorage.save().catch(() => {}).finally(() => {
+					this.onEnd(false, true)
+					pageEvents.send("login", account.username)
+				})
+			}
+		}, response => {
+			if(response && response.status === "error" && response.message){
+				alert(response.message)
+			}else{
+				alert(strings.account.error)
+			}
+		})
+	}
+	onLogout(){
+		if(event){
+			if(event.type === "touchstart"){
+				event.preventDefault()
+			}else if(event.which !== 1){
+				return
+			}
+		}
+		if(this.locked){
+			return
+		}
+		account.loggedIn = false
+		delete account.username
+		delete account.displayName
+		var loadScores = scores => {
+			Cookies.remove("token")
+			scoreStorage.load()
+			this.onEnd(false, true)
+			pageEvents.send("logout")
+		}
+		this.request("logout").then(response => {
+			loadScores()
+		}, () => {
+			loadScores()
+		})
+	}
+	onSave(event){
+		if(event){
+			if(event.type === "touchstart"){
+				event.preventDefault()
+			}else if(event.which !== 1){
+				return
+			}
+		}
+		if(this.locked){
+			return
+		}
+		var promises = []
+		var noNameChange = false
+		if(this.shownDiv === "pass"){
+			var passwords = []
+			for(var i = 0; i < this.accountPass.length; i++){
+				passwords.push(this.accountPass[i].value)
+			}
+			if(passwords[1] === passwords[2]){
+				promises.push(this.request("account/password", {
+					current_password: passwords[0],
+					new_password: passwords[1]
+				}))
+			}else{
+				alert(strings.account.passwordsDoNotMatch)
+				return
+			}
+		}
+		if(this.shownDiv === "del" && this.accountDel.password.value){
+			noNameChange = true
+			promises.push(this.request("account/remove", {
+				password: this.accountDel.password.value
+			}).then(() => {
+				account.loggedIn = false
+				delete account.username
+				delete account.displayName
+				Cookies.remove("token")
+				scoreStorage.load()
+				pageEvents.send("logout")
+				return Promise.resolve
+			}))
+		}
+		var newName = this.displayname.value.trim()
+		if(!noNameChange && newName !== account.displayName){
+			promises.push(this.request("account/display_name", {
+				display_name: newName
+			}))
+		}
+		var error = false
+		var errorFunc = response => {
+			if(error){
+				return
+			}
+			if(response && response.message){
+				alert(response.message)
+			}else{
+				alert(strings.account.error)
+			}
+		}
+		Promise.all(promises).then(() => {
+			this.onEnd(false, true)
+		}, errorFunc).catch(errorFunc)
+	}
+	onEnd(event, noSound){
+		var touched = false
+		if(event){
+			if(event.type === "touchstart"){
+				event.preventDefault()
+				touched = true
+			}else if(event.which !== 1){
+				return
+			}
+		}
+		if(this.locked){
+			return
+		}
+		this.clean()
+		assets.sounds["se_don"].play()
+		setTimeout(() => {
+			new SongSelect(false, false, touched)
+		}, 500)
+	}
+	request(url, obj){
+		this.lock(true)
+		return new Promise((resolve, reject) => {
+			var request = new XMLHttpRequest()
+			request.open(obj ? "POST" : "GET", "api/" + url)
+			pageEvents.load(request).then(() => {
+				this.lock(false)
+				if(request.status !== 200){
+					reject()
+					return
+				}
+				try{
+					var json = JSON.parse(request.response)
+				}catch(e){
+					reject()
+					return
+				}
+				if(json.status === "ok"){
+					resolve(json)
+				}else{
+					reject(json)
+				}
+			}, () => {
+				this.lock(false)
+				reject()
+			})
+			if(obj){
+				request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
+				request.send(JSON.stringify(obj))
+			}else{
+				request.send()
+			}
+		})
+	}
+	lock(isLocked){
+		this.locked = isLocked
+		if(this.mode === "login" || this.mode === "register"){
+			for(var i = 0; i < this.form.length; i++){
+				this.form[i].disabled = isLocked
+			}
+		}else if(this.mode === "account"){
+			for(var i = 0; i < this.inputForms.length; i++){
+				this.inputForms[i].disabled = isLocked
+			}
+		}
+	}
+	clean(eventsOnly){
+		if(!eventsOnly){
+			cancelTouch = true
+			this.keyboard.clean()
+			this.gamepad.clean()
+		}
+		if(this.mode === "account"){
+			pageEvents.remove(this.accounPassButton, ["click", "touchstart"])
+			pageEvents.remove(this.accountDelButton, ["click", "touchstart"])
+			pageEvents.remove(this.logoutButton, ["mousedown", "touchstart"])
+			pageEvents.remove(this.saveButton, ["mousedown", "touchstart"])
+			for(var i = 0; i < this.inputForms.length; i++){
+				pageEvents.remove(this.inputForms[i], ["keydown", "keyup", "keypress"])
+			}
+			this.accountPass.reset()
+			this.accountDel.reset()
+			delete this.displayname
+			delete this.accountPassButton
+			delete this.accountPass
+			delete this.accountPassDiv
+			delete this.accountDelButton
+			delete this.accountDel
+			delete this.accountDelDiv
+			delete this.logoutButton
+			delete this.saveButton
+			delete this.inputForms
+		}else if(this.mode === "login" || this.mode === "register"){
+			if(!eventsOnly){
+				this.form.reset()
+			}
+			pageEvents.remove(this.form, "submit")
+			pageEvents.remove(this.loginButton, ["mousedown", "touchstart"])
+			pageEvents.remove(this.registerButton, ["mousedown", "touchstart"])
+			for(var i = 0; i < this.form.length; i++){
+				pageEvents.remove(this.registerButton, ["keydown", "keyup", "keypress"])
+			}
+			delete this.form
+			delete this.password2
+			delete this.remember
+			delete this.loginButton
+			delete this.registerButton
+		}
+		pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
+		delete this.endButton
+		delete this.items
+	}
+}
diff --git a/public/src/js/assets.js b/public/src/js/assets.js
index 31e4d8d..f7e3ee7 100644
--- a/public/src/js/assets.js
+++ b/public/src/js/assets.js
@@ -1,6 +1,7 @@
 var assets = {
 	"js": [
 		"lib/md5.min.js",
+		"lib/js.cookie.min.js",
 		"loadsong.js",
 		"parseosu.js",
 		"titlescreen.js",
@@ -31,7 +32,8 @@ var assets = {
 		"importsongs.js",
 		"logo.js",
 		"settings.js",
-		"scorestorage.js"
+		"scorestorage.js",
+		"account.js"
 	],
 	"css": [
 		"main.css",
@@ -137,7 +139,9 @@ var assets = {
 		"about.html",
 		"debug.html",
 		"session.html",
-		"settings.html"
+		"settings.html",
+		"account.html",
+		"login.html"
 	],
 	
 	"songs": [],
diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js
index ca984ad..6da8266 100644
--- a/public/src/js/canvasdraw.js
+++ b/public/src/js/canvasdraw.js
@@ -706,12 +706,12 @@
 				})
 			}else if(r.smallHiragana.test(symbol)){
 				// Small hiragana, small katakana
-				drawn.push({text: symbol, x: 0, y: 0, w: 30})
+				drawn.push({text: symbol, kana: true, x: 0, y: 0, w: 30})
 			}else if(r.hiragana.test(symbol)){
 				// Hiragana, katakana
-				drawn.push({text: symbol, x: 0, y: 0, w: 35})
+				drawn.push({text: symbol, kana: true, x: 0, y: 0, w: 35})
 			}else{
-				drawn.push({text: symbol, x: 0, y: 0, w: 39})
+				drawn.push({text: symbol, kana: true, x: 0, y: 0, w: 39})
 			}
 		}
 		
@@ -720,6 +720,9 @@
 			if(config.letterSpacing){
 				symbol.w += config.letterSpacing
 			}
+			if(config.kanaSpacing && symbol.kana){
+				symbol.w += config.kanaSpacing
+			}
 			drawnWidth += symbol.w * mul
 		}
 		
@@ -1549,6 +1552,99 @@
 		ctx.restore()
 	}
 	
+	nameplate(config){
+		var ctx = config.ctx
+		var w = 264
+		var h = 57
+		var r = h / 2
+		var pi = Math.PI
+		
+		ctx.save()
+		
+		ctx.translate(config.x, config.y)
+		if(config.scale){
+			ctx.scale(config.scale, config.scale)
+		}
+		
+		ctx.fillStyle="rgba(0, 0, 0, 0.25)"
+		ctx.beginPath()
+		ctx.arc(r + 4, r + 5, r, pi / 2, pi / -2)
+		ctx.arc(w - r + 4, r + 5, r, pi / -2, pi / 2)
+		ctx.fill()
+		ctx.beginPath()
+		ctx.moveTo(r, 0)
+		this.roundedCorner(ctx, w, 0, r, 1)
+		ctx.lineTo(r, r)
+		ctx.fillStyle = config.blue ? "#67cecb" : "#ff421d"
+		ctx.fill()
+		ctx.beginPath()
+		ctx.moveTo(r, r)
+		this.roundedCorner(ctx, w, h, r, 2)
+		ctx.lineTo(r, h)
+		ctx.fillStyle = "rgba(255, 255, 255, 0.8)"
+		ctx.fill()
+		ctx.strokeStyle = "#000"
+		ctx.lineWidth = 4
+		ctx.beginPath()
+		ctx.moveTo(r, 0)
+		ctx.arc(w - r, r, r, pi / -2, pi / 2)
+		ctx.lineTo(r, h)
+		ctx.stroke()
+		ctx.beginPath()
+		ctx.moveTo(r, r - 1)
+		ctx.lineTo(w, r - 1)
+		ctx.lineWidth = 2
+		ctx.stroke()
+		ctx.beginPath()
+		ctx.arc(r, r, r, 0, pi * 2)
+		ctx.fillStyle = config.blue ? "#67cecb" : "#ff421d"
+		ctx.fill()
+		ctx.lineWidth = 4
+		ctx.stroke()
+		ctx.font = this.bold(config.font) + "28px " + config.font
+		ctx.textAlign = "center"
+		ctx.textBaseline = "middle"
+		ctx.lineWidth = 5
+		ctx.miterLimit = 1
+		ctx.strokeStyle = "#fff"
+		ctx.fillStyle = "#000"
+		var text = config.blue ? "2P" : "1P"
+		ctx.strokeText(text, r + 2, r + 1)
+		ctx.fillText(text, r + 2, r + 1)
+		if(config.rank){
+			this.layeredText({
+				ctx: ctx,
+				text: config.rank,
+				fontSize: 20,
+				fontFamily: config.font,
+				x: w / 2 + r * 0.7,
+				y: r * 0.5,
+				width: 180,
+				align: "center",
+				baseline: "middle"
+			}, [
+				{fill: "#000"}
+			])
+		}
+		this.layeredText({
+			ctx: ctx,
+			text: config.name || "",
+			fontSize: 21,
+			fontFamily: config.font,
+			x: w / 2 + r * 0.7,
+			y: r * 1.5 - 0.5,
+			width: 180,
+			kanaSpacing: 10,
+			align: "center",
+			baseline: "middle"
+		}, [
+			{outline: "#000", letterBorder: 6},
+			{fill: "#fff"}
+		])
+		
+		ctx.restore()
+	}
+	
 	alpha(amount, ctx, callback, winW, winH){
 		if(amount >= 1){
 			return callback(ctx)
diff --git a/public/src/js/game.js b/public/src/js/game.js
index 8fcdd99..da9534e 100644
--- a/public/src/js/game.js
+++ b/public/src/js/game.js
@@ -505,7 +505,9 @@ class Game{
 			var musicDuration = duration * 1000 - this.controller.offset
 			if(this.musicFadeOut === 0){
 				if(this.controller.multiplayer === 1){
-					p2.send("gameresults", this.getGlobalScore())
+					var obj = this.getGlobalScore()
+					obj.name = account.loggedIn ? account.displayName : strings.defaultName
+					p2.send("gameresults", obj)
 				}
 				this.musicFadeOut++
 			}else if(this.musicFadeOut === 1 && ms >= started + 1600){
diff --git a/public/src/js/importsongs.js b/public/src/js/importsongs.js
index 20a431a..992e96d 100644
--- a/public/src/js/importsongs.js
+++ b/public/src/js/importsongs.js
@@ -202,12 +202,16 @@
 			var tja = new ParseTja(data, "oni", 0, 0, true)
 			var songObj = {
 				id: index + 1,
+				order: index + 1,
 				type: "tja",
 				chart: file,
-				stars: [],
+				stars: {},
 				music: "muted"
 			}
+			var coursesAdded = false
 			var titleLang = {}
+			var titleLangAdded = false
+			var subtitleLangAdded = false
 			var subtitleLang = {}
 			var dir = file.webkitRelativePath.toLowerCase()
 			dir = dir.slice(0, dir.lastIndexOf("/") + 1)
@@ -221,7 +225,11 @@
 				}
 				songObj.subtitle = subtitle
 				songObj.preview = meta.demostart || 0
-				songObj.stars[this.courseTypes[diff]] = (meta.level || "0") + (meta.branch ? " B" : "")
+				songObj.courses[diff] = {
+					stars: meta.level || 0,
+					branch: !!meta.branch
+				}
+				coursesAdded = true
 				if(meta.wave){
 					songObj.music = this.otherFiles[dir + meta.wave.toLowerCase()] || songObj.music
 				}
@@ -264,32 +272,27 @@
 					}
 					if(meta["title" + id]){
 						titleLang[id] = meta["title" + id]
+						titleLangAdded = true
 					}else if(songTitle in this.songTitle && this.songTitle[songTitle][id]){
 						titleLang[id] = this.songTitle[songTitle][id] + ura
+						titleLangAdded = true
 					}
 					if(meta["subtitle" + id]){
 						subtitleLang[id] = meta["subtitle" + id]
+						subtitleLangAdded = true
 					}
 				}
 			}
-			var titleLangArray = []
-			for(var id in titleLang){
-				titleLangArray.push(id + " " + titleLang[id])
+			if(titleLangAdded){
+				songObj.title_lang = titleLang
 			}
-			if(titleLangArray.length !== 0){
-				songObj.title_lang = titleLangArray.join("\n")
-			}
-			var subtitleLangArray = []
-			for(var id in subtitleLang){
-				subtitleLangArray.push(id + " " + subtitleLang[id])
-			}
-			if(subtitleLangArray.length !== 0){
-				songObj.subtitle_lang = subtitleLangArray.join("\n")
+			if(subtitleLangAdded){
+				songObj.subtitle_lang = subtitleLang
 			}
 			if(!songObj.category){
 				songObj.category = category || this.getCategory(file, [songTitle || songObj.title, file.name.slice(0, file.name.lastIndexOf("."))])
 			}
-			if(songObj.stars.length !== 0){
+			if(coursesAdded){
 				this.songs[index] = songObj
 			}
 			var hash = md5.base64(event.target.result).slice(0, -2)
@@ -316,12 +319,20 @@
 			dir = dir.slice(0, dir.lastIndexOf("/") + 1)
 			var songObj = {
 				id: index + 1,
+				order: index + 1,
 				type: "osu",
 				chart: file,
 				subtitle: osu.metadata.ArtistUnicode || osu.metadata.Artist,
-				subtitle_lang: osu.metadata.Artist || osu.metadata.ArtistUnicode,
+				subtitle_lang: {
+					en: osu.metadata.Artist || osu.metadata.ArtistUnicode
+				},
 				preview: osu.generalInfo.PreviewTime / 1000,
-				stars: [null, null, null, parseInt(osu.difficulty.overallDifficulty) || 1],
+				courses: {
+					oni:{
+						stars: parseInt(osu.difficulty.overallDifficulty) || 0,
+						branch: false
+					}
+				},
 				music: this.otherFiles[dir + osu.generalInfo.AudioFilename.toLowerCase()] || "muted"
 			}
 			var filename = file.name.slice(0, file.name.lastIndexOf("."))
@@ -333,7 +344,9 @@
 					suffix = " " + matches[0]
 				}
 				songObj.title = title + suffix
-				songObj.title_lang = (osu.metadata.Title || osu.metadata.TitleUnicode) + suffix
+				songObj.title_lang = {
+					en: (osu.metadata.Title || osu.metadata.TitleUnicode) + suffix
+				}
 			}else{
 				songObj.title = filename
 			}
diff --git a/public/src/js/lib/js.cookie.min.js b/public/src/js/lib/js.cookie.min.js
new file mode 100644
index 0000000..a0e6820
--- /dev/null
+++ b/public/src/js/lib/js.cookie.min.js
@@ -0,0 +1,2 @@
+/*! js-cookie v3.0.0-rc.0 | MIT */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var r=e.Cookies,n=e.Cookies=t();n.noConflict=function(){return e.Cookies=r,n}}())}(this,function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)e[n]=r[n]}return e}var t={read:function(e){return e.replace(/%3B/g,";")},write:function(e){return e.replace(/;/g,"%3B")}};return function r(n,i){function o(r,o,u){if("undefined"!=typeof document){"number"==typeof(u=e({},i,u)).expires&&(u.expires=new Date(Date.now()+864e5*u.expires)),u.expires&&(u.expires=u.expires.toUTCString()),r=t.write(r).replace(/=/g,"%3D"),o=n.write(String(o),r);var c="";for(var f in u)u[f]&&(c+="; "+f,!0!==u[f]&&(c+="="+u[f].split(";")[0]));return document.cookie=r+"="+o+c}}return Object.create({set:o,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var r=document.cookie?document.cookie.split("; "):[],i={},o=0;o<r.length;o++){var u=r[o].split("="),c=u.slice(1).join("="),f=t.read(u[0]).replace(/%3D/g,"=");if(i[f]=n.read(c,f),e===f)break}return e?i[e]:i}},remove:function(t,r){o(t,"",e({},r,{expires:-1}))},withAttributes:function(t){return r(this.converter,e({},this.attributes,t))},withConverter:function(t){return r(e({},this.converter,t),this.attributes)}},{attributes:{value:Object.freeze(i)},converter:{value:Object.freeze(n)}})}(t,{path:"/"})});
diff --git a/public/src/js/loader.js b/public/src/js/loader.js
index a2d5da9..30c1bd0 100644
--- a/public/src/js/loader.js
+++ b/public/src/js/loader.js
@@ -104,11 +104,12 @@ class Loader{
 		}))
 		
 		this.afterJSCount =
-			["blurPerformance", "P2Connection"].length +
+			["blurPerformance"].length +
 			assets.audioSfx.length +
 			assets.audioMusic.length +
 			assets.audioSfxLR.length +
-			assets.audioSfxLoud.length
+			assets.audioSfxLoud.length +
+			(gameConfig._accounts ? 1 : 0)
 		
 		Promise.all(this.promises).then(() => {
 			
@@ -155,65 +156,92 @@ class Loader{
 				}
 			}))
 			
-			var readyEvent = "normal"
-			var songId
-			var hashLower = location.hash.toLowerCase()
-			p2 = new P2Connection()
-			if(hashLower.startsWith("#song=")){
-				var number = parseInt(location.hash.slice(6))
-				if(number > 0){
-					songId = number
-					readyEvent = "song-id"
+			if(gameConfig._accounts){
+				var token = Cookies.get("token")
+				if(token){
+					this.addPromise(this.ajax("/api/scores/get").then(response => {
+						response = JSON.parse(response)
+						if(response.status === "ok"){
+							account.loggedIn = true
+							account.username = response.username
+							account.displayName = response.display_name
+							scoreStorage.load(response.scores)
+							pageEvents.send("login", account.username)
+						}
+					}))
+				}else{
+					this.assetLoaded()
 				}
-			}else if(location.hash.length === 6){
-				p2.hashLock = true
-				this.addPromise(new Promise(resolve => {
-					p2.open()
-					pageEvents.add(p2, "message", response => {
-						if(response.type === "session"){
-							pageEvents.send("session-start", "invited")
-							readyEvent = "session-start"
-							resolve()
-						}else if(response.type === "gameend"){
-							p2.hash("")
-							p2.hashLock = false
-							readyEvent = "session-expired"
-							resolve()
-						}
-					})
-					p2.send("invite", location.hash.slice(1).toLowerCase())
-					setTimeout(() => {
-						if(p2.socket.readyState !== 1){
-							p2.hash("")
-							p2.hashLock = false
-							resolve()
-						}
-					}, 10000)
-				}).then(() => {
-					pageEvents.remove(p2, "message")
-				}))
-			}else{
-				p2.hash("")
 			}
 			
 			settings = new Settings()
 			pageEvents.setKbd()
-			
 			scoreStorage = new ScoreStorage()
-			for(var i in assets.songsDefault){
-				var song = assets.songsDefault[i]
-				if(!song.hash){
-					song.hash = song.title
-				}
-				scoreStorage.songTitles[song.title] = song.hash
-				var score = scoreStorage.get(song.hash, false, true)
-				if(score){
-					score.title = song.title
-				}
-			}
 			
 			Promise.all(this.promises).then(() => {
-				this.canvasTest.drawAllImages().then(result => {
+				if(!account.loggedIn){
+					scoreStorage.load()
+				}
+				for(var i in assets.songsDefault){
+					var song = assets.songsDefault[i]
+					if(!song.hash){
+						song.hash = song.title
+					}
+					scoreStorage.songTitles[song.title] = song.hash
+					var score = scoreStorage.get(song.hash, false, true)
+					if(score){
+						score.title = song.title
+					}
+				}
+				var promises = []
+				
+				var readyEvent = "normal"
+				var songId
+				var hashLower = location.hash.toLowerCase()
+				p2 = new P2Connection()
+				if(hashLower.startsWith("#song=")){
+					var number = parseInt(location.hash.slice(6))
+					if(number > 0){
+						songId = number
+						readyEvent = "song-id"
+					}
+				}else if(location.hash.length === 6){
+					p2.hashLock = true
+					promises.push(new Promise(resolve => {
+						p2.open()
+						pageEvents.add(p2, "message", response => {
+							if(response.type === "session"){
+								pageEvents.send("session-start", "invited")
+								readyEvent = "session-start"
+								resolve()
+							}else if(response.type === "gameend"){
+								p2.hash("")
+								p2.hashLock = false
+								readyEvent = "session-expired"
+								resolve()
+							}
+						})
+						p2.send("invite", {
+							id: location.hash.slice(1).toLowerCase(),
+							name: account.loggedIn ? account.displayName : null
+						})
+						setTimeout(() => {
+							if(p2.socket.readyState !== 1){
+								p2.hash("")
+								p2.hashLock = false
+								resolve()
+							}
+						}, 10000)
+					}).then(() => {
+						pageEvents.remove(p2, "message")
+					}))
+				}else{
+					p2.hash("")
+				}
+				
+				promises.push(this.canvasTest.drawAllImages())
+				
+				Promise.all(promises).then(result => {
 					perf.allImg = result
 					perf.load = Date.now() - this.startTime
 					this.canvasTest.clean()
diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js
index b40461b..3e5b460 100644
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -297,7 +297,8 @@ class LoadSong{
 			})
 			p2.send("join", {
 				id: song.folder,
-				diff: song.difficulty
+				diff: song.difficulty,
+				name: account.loggedIn ? account.displayName : null
 			})
 		}else{
 			this.clean()
diff --git a/public/src/js/main.js b/public/src/js/main.js
index 3a393a4..c01209c 100644
--- a/public/src/js/main.js
+++ b/public/src/js/main.js
@@ -84,6 +84,7 @@ var strings
 var vectors
 var settings
 var scoreStorage
+var account = {}
 
 pageEvents.add(root, ["touchstart", "touchmove", "touchend"], event => {
 	if(event.cancelable && cancelTouch && event.target.tagName !== "SELECT"){
diff --git a/public/src/js/p2.js b/public/src/js/p2.js
index a0c266d..0857381 100644
--- a/public/src/js/p2.js
+++ b/public/src/js/p2.js
@@ -3,6 +3,7 @@ class P2Connection{
 		this.closed = true
 		this.lastMessages = {}
 		this.otherConnected = false
+		this.name = null
 		this.allEvents = new Map()
 		this.addEventListener("message", this.message.bind(this))
 		this.currentHash = ""
@@ -123,6 +124,7 @@ class P2Connection{
 					this.hash("")
 					this.hashLock = false
 				}
+				this.name = null
 				break
 			case "gameresults":
 				this.results = {}
@@ -151,6 +153,9 @@ class P2Connection{
 				this.otherConnected = true
 				this.session = true
 				break
+			case "name":
+				this.name = (response.value || "").toString() || null
+				break
 		}
 	}
 	onhashchange(){
diff --git a/public/src/js/pageevents.js b/public/src/js/pageevents.js
index 56c0d1a..46c0a12 100644
--- a/public/src/js/pageevents.js
+++ b/public/src/js/pageevents.js
@@ -86,6 +86,9 @@ class PageEvents{
 		})
 	}
 	keyEvent(event){
+		if(!("key" in event)){
+			return
+		}
 		if(this.kbd.indexOf(event.key.toLowerCase()) !== -1){
 			this.lastKeyEvent = Date.now()
 			event.preventDefault()
diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js
index 4e5cca6..a2a62c4 100644
--- a/public/src/js/scoresheet.js
+++ b/public/src/js/scoresheet.js
@@ -39,6 +39,7 @@ class Scoresheet{
 		
 		this.draw = new CanvasDraw(noSmoothing)
 		this.canvasCache = new CanvasCache(noSmoothing)
+		this.nameplateCache = new CanvasCache(noSmoothing)
 		
 		this.keyboard = new Keyboard({
 			confirm: ["enter", "space", "esc", "don_l", "don_r"]
@@ -208,6 +209,7 @@ class Scoresheet{
 				this.canvas.style.height = (winH / this.pixelRatio) + "px"
 				
 				this.canvasCache.resize(winW / ratio, 80 + 1, ratio)
+				this.nameplateCache.resize(274, 134, ratio + 0.2)
 				
 				if(!this.multiplayer){
 					this.tetsuoHana.style.setProperty("--scale", ratio / this.pixelRatio)
@@ -233,6 +235,9 @@ class Scoresheet{
 			if(!this.canvasCache.canvas){
 				this.canvasCache.resize(winW / ratio, 80 + 1, ratio)
 			}
+			if(!this.nameplateCache.canvas){
+				this.nameplateCache.resize(274, 67, ratio + 0.2)
+			}
 		}
 		this.winW = winW
 		this.winH = winH
@@ -450,6 +455,29 @@ class Scoresheet{
 					ctx.fillText(text, 395, 308)
 					ctx.miterLimit = 10
 					
+					if(p === 0){
+						var name = account.loggedIn ? account.displayName : strings.defaultName
+					}else{
+						var name = results.name
+					}
+					this.nameplateCache.get({
+						ctx: ctx,
+						x: 259,
+						y: 92,
+						w: 273,
+						h: 66,
+						id: p.toString() + "p",
+					}, ctx => {
+						this.draw.nameplate({
+							ctx: ctx,
+							x: 3,
+							y: 3,
+							name: name,
+							font: this.font,
+							blue: p === 1
+						})
+					})
+					
 					if(this.controller.autoPlayEnabled){
 						ctx.drawImage(assets.image["badge_auto"],
 							431, 311, 34, 34
diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index 87820f5..55dfe02 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -5,17 +5,22 @@ class ScoreStorage{
 		this.difficulty = ["oni", "ura", "hard", "normal", "easy"]
 		this.scoreKeys = ["points", "good", "ok", "bad", "maxCombo", "drumroll"]
 		this.crownValue = ["", "silver", "gold"]
-		this.load()
 	}
-	load(){
+	load(strings){
 		this.scores = {}
-		this.scoreStrings = {}
-		try{
-			var localScores = localStorage.getItem("scoreStorage")
-			if(localScores){
-				this.scoreStrings = JSON.parse(localScores)
-			}
-		}catch(e){}
+		if(strings){
+			this.scoreStrings = strings
+		}else if(account.loggedIn){
+			return
+		}else{
+			this.scoreStrings = {}
+			try{
+				var localScores = localStorage.getItem("scoreStorage")
+				if(localScores){
+					this.scoreStrings = JSON.parse(localScores)
+				}
+			}catch(e){}
+		}
 		for(var hash in this.scoreStrings){
 			var scoreString = this.scoreStrings[hash]
 			var songAdded = false
@@ -46,16 +51,22 @@ class ScoreStorage{
 			}
 		}
 	}
-	save(){
+	save(localOnly){
 		for(var hash in this.scores){
 			this.writeString(hash)
 		}
 		this.write()
+		return this.sendToServer({
+			scores: this.scoreStrings,
+			is_import: true
+		})
 	}
 	write(){
-		try{
-			localStorage.setItem("scoreStorage", JSON.stringify(this.scoreStrings))
-		}catch(e){}
+		if(!account.loggedIn){
+			try{
+				localStorage.setItem("scoreStorage", JSON.stringify(this.scoreStrings))
+			}catch(e){}
+		}
 	}
 	writeString(hash){
 		var score = this.scores[hash]
@@ -112,6 +123,11 @@ class ScoreStorage{
 		this.scores[hash][difficulty] = scoreObject
 		this.writeString(hash)
 		this.write()
+		var obj = {}
+		obj[hash] = this.scoreStrings[hash]
+		this.sendToServer({
+			scores: obj
+		}).catch(() => this.add.apply(this, arguments))
 	}
 	template(){
 		var template = {crown: ""}
@@ -146,6 +162,42 @@ class ScoreStorage{
 				delete this.scoreStrings[hash]
 			}
 			this.write()
+			this.sendToServer({
+				scores: this.scoreStrings,
+				is_import: true
+			})
+		}
+	}
+	sendToServer(obj, retry){
+		if(account.loggedIn){
+			var request = new XMLHttpRequest()
+			request.open("POST", "api/scores/save")
+			var promise = pageEvents.load(request).then(response => {
+				if(request.status !== 200){
+					return Promise.reject()
+				}
+			}).catch(() => {
+				if(retry){
+					account.loggedIn = false
+					delete account.username
+					delete account.displayName
+					Cookies.remove("token")
+					this.load()
+					pageEvents.send("logout")
+					return Promise.reject()
+				}else{
+					return new Promise(resolve => {
+						setTimeout(() => {
+							resolve()
+						}, 3000)
+					}).then(() => this.sendToServer(obj, true))
+				}
+			})
+			request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
+			request.send(JSON.stringify(obj))
+			return promise
+		}else{
+			return Promise.resolve()
 		}
 	}
 }
diff --git a/public/src/js/session.js b/public/src/js/session.js
index 0f08c67..f9d267e 100644
--- a/public/src/js/session.js
+++ b/public/src/js/session.js
@@ -34,7 +34,10 @@ class Session{
 				pageEvents.send("session-start", "host")
 			}
 		})
-		p2.send("invite")
+		p2.send("invite", {
+			id: null,
+			name: account.loggedIn ? account.displayName : null
+		})
 		pageEvents.send("session")
 	}
 	getElement(name){
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 85df8db..64b65de 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -116,7 +116,7 @@ class SongSelect{
 				originalTitle: song.title,
 				subtitle: subtitle,
 				skin: song.category in this.songSkin ? this.songSkin[song.category] : this.songSkin.default,
-				stars: song.stars,
+				courses: song.courses,
 				category: song.category,
 				preview: song.preview || 0,
 				type: song.type,
@@ -126,14 +126,19 @@ class SongSelect{
 				volume: song.volume,
 				maker: song.maker,
 				canJump: true,
-				hash: song.hash || song.title
+				hash: song.hash || song.title,
+				order: song.order
 			})
 		}
 		this.songs.sort((a, b) => {
 			var catA = a.category in this.songSkin ? this.songSkin[a.category] : this.songSkin.default
 			var catB = b.category in this.songSkin ? this.songSkin[b.category] : this.songSkin.default
 			if(catA.sort === catB.sort){
-				return a.id > b.id ? 1 : -1
+				if(a.order === b.order){
+					return a.id > b.id ? 1 : -1
+				}else{
+					return a.order > b.order ? 1 : -1
+				}
 			}else{
 				return catA.sort > catB.sort ? 1 : -1
 			}
@@ -226,6 +231,7 @@ class SongSelect{
 		this.difficultyCache = new CanvasCache(noSmoothing)
 		this.sessionCache = new CanvasCache(noSmoothing)
 		this.currentSongCache = new CanvasCache(noSmoothing)
+		this.nameplateCache = new CanvasCache(noSmoothing)
 		
 		this.difficulty = [strings.easy, strings.normal, strings.hard, strings.oni]
 		this.difficultyId = ["easy", "normal", "hard", "oni", "ura"]
@@ -450,7 +456,11 @@ class SongSelect{
 		if(this.state.screen === "song"){
 			if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
 				this.categoryJump(mouse.x < 640 ? -1 : 1)
-			}else if(mouse.x > 641 && mouse.y > 603){
+			}else if(!p2.session && 60 < mouse.x && mouse.x < 332 && 640 < mouse.y && mouse.y < 706 && gameConfig._accounts){
+				this.toAccount()
+			}else if(p2.session && 438 < mouse.x && mouse.x < 834 && mouse.y > 603){
+				this.toSession()
+			}else if(!p2.session && mouse.x > 641 && mouse.y > 603 && p2.socket.readyState === 1 && !assets.customSongs){
 				this.toSession()
 			}else{
 				var moveBy = this.songSelMouse(mouse.x, mouse.y)
@@ -501,11 +511,15 @@ class SongSelect{
 		if(this.state.screen === "song"){
 			if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
 				moveTo = mouse.x < 640 ? "categoryPrev" : "categoryNext"
-			}else if(mouse.x > 641 && mouse.y > 603 && p2.socket.readyState === 1 && !assets.customSongs){
+			}else if(!p2.session && 60 < mouse.x && mouse.x < 332 && 640 < mouse.y && mouse.y < 706 && gameConfig._accounts){
+				moveTo = "account"
+			}else if(p2.session && 438 < mouse.x && mouse.x < 834 && mouse.y > 603){
+				moveTo = "session"
+			}else if(!p2.session && mouse.x > 641 && mouse.y > 603 && p2.socket.readyState === 1 && !assets.customSongs){
 				moveTo = "session"
 			}else{
 				var moveTo = this.songSelMouse(mouse.x, mouse.y)
-				if(moveTo === null && this.state.moveHover === 0 && !this.songs[this.selectedSong].stars){
+				if(moveTo === null && this.state.moveHover === 0 && !this.songs[this.selectedSong].courses){
 					this.state.moveMS = this.getMS() - this.songSelecting.speed
 				}
 			}
@@ -544,7 +558,7 @@ class SongSelect{
 			var dir = x > 0 ? 1 : -1
 			x = Math.abs(x)
 			var selectedWidth = this.songAsset.selectedWidth
-			if(!this.songs[this.selectedSong].stars){
+			if(!this.songs[this.selectedSong].courses){
 				selectedWidth = this.songAsset.width
 			}
 			var moveBy = Math.ceil((x - selectedWidth / 2 - this.songAsset.marginLeft / 2) / (this.songAsset.width + this.songAsset.marginLeft)) * dir
@@ -565,7 +579,13 @@ class SongSelect{
 			}else if(550 < x && x < 1050 && 95 < y && y < 524){
 				var moveBy = Math.floor((x - 550) / ((1050 - 550) / 5)) + this.diffOptions.length
 				var currentSong = this.songs[this.selectedSong]
-				if(this.state.ura && moveBy === this.diffOptions.length + 3 || currentSong.stars[moveBy - this.diffOptions.length]){
+				if(
+					this.state.ura
+					&& moveBy === this.diffOptions.length + 3
+					|| currentSong.courses[
+						this.difficultyId[moveBy - this.diffOptions.length]
+					]
+				){
 					return moveBy
 				}
 			}
@@ -583,7 +603,7 @@ class SongSelect{
 				})
 			}
 		}else if(this.state.locked !== 1 || fromP2){
-			if(this.songs[this.selectedSong].stars && (this.state.locked === 0 || fromP2)){
+			if(this.songs[this.selectedSong].courses && (this.state.locked === 0 || fromP2)){
 				this.state.moveMS = ms
 			}else{
 				this.state.moveMS = ms - this.songSelecting.speed * this.songSelecting.resize
@@ -645,7 +665,7 @@ class SongSelect{
 	toSelectDifficulty(fromP2){
 		var currentSong = this.songs[this.selectedSong]
 		if(p2.session && !fromP2 && currentSong.action !== "random"){
-			if(this.songs[this.selectedSong].stars){
+			if(this.songs[this.selectedSong].courses){
 				if(!this.state.selLock){
 					this.state.selLock = true
 					p2.send("songsel", {
@@ -655,7 +675,7 @@ class SongSelect{
 				}
 			}
 		}else if(this.state.locked === 0 || fromP2){
-			if(currentSong.stars){
+			if(currentSong.courses){
 				this.state.screen = "difficulty"
 				this.state.screenMS = this.getMS()
 				this.state.locked = true
@@ -677,7 +697,7 @@ class SongSelect{
 				this.state.locked = true
 				do{
 					var i = Math.floor(Math.random() * this.songs.length)
-				}while(!this.songs[i].stars)
+				}while(!this.songs[i].courses)
 				var moveBy = i - this.selectedSong
 				setTimeout(() => {
 					this.moveToSong(moveBy)
@@ -744,17 +764,18 @@ class SongSelect{
 		}else if(p2.socket.readyState === 1 && !assets.customSongs){
 			multiplayer = ctrl
 		}
+		var diff = this.difficultyId[difficulty]
 		
 		new LoadSong({
 			"title": selectedSong.title,
 			"originalTitle": selectedSong.originalTitle,
 			"folder": selectedSong.id,
-			"difficulty": this.difficultyId[difficulty],
+			"difficulty": diff,
 			"category": selectedSong.category,
 			"type": selectedSong.type,
 			"offset": selectedSong.offset,
 			"songSkin": selectedSong.songSkin,
-			"stars": selectedSong.stars[difficulty],
+			"stars": selectedSong.courses[diff].stars,
 			"hash": selectedSong.hash
 		}, autoplay, multiplayer, touch)
 	}
@@ -797,6 +818,13 @@ class SongSelect{
 			new SettingsView(this.touchEnabled)
 		}, 500)
 	}
+	toAccount(){
+		this.playSound("se_don")
+		this.clean()
+		setTimeout(() => {
+			new Account(this.touchEnabled)
+		}, 500)
+	}
 	toSession(){
 		if(p2.socket.readyState !== 1 || assets.customSongs){
 			return
@@ -893,6 +921,8 @@ class SongSelect{
 			var textW = strings.id === "en" ? 350 : 280
 			this.selectTextCache.resize((textW + 53 + 60 + 1) * 2, this.songAsset.marginTop + 15, ratio + 0.5)
 			
+			this.nameplateCache.resize(274, 134, ratio + 0.2)
+			
 			var categories = 0
 			var lastCategory
 			this.songs.forEach(song => {
@@ -921,7 +951,7 @@ class SongSelect{
 						fontFamily: this.font,
 						x: w / 2,
 						y: 38 / 2,
-						width: w - 30,
+						width: id === "sessionend" ? 385 : w - 30,
 						align: "center",
 						baseline: "middle"
 					}, [
@@ -969,7 +999,7 @@ class SongSelect{
 		}
 		
 		if(screen === "song"){
-			if(this.songs[this.selectedSong].stars){
+			if(this.songs[this.selectedSong].courses){
 				selectedWidth = this.songAsset.selectedWidth
 			}
 			
@@ -1054,7 +1084,7 @@ class SongSelect{
 				if(elapsed < resize){
 					selectedWidth = this.songAsset.width + (((resize - elapsed) / resize) * (selectedWidth - this.songAsset.width))
 				}else if(elapsed > resize2){
-					this.playBgm(!this.songs[this.selectedSong].stars)
+					this.playBgm(!this.songs[this.selectedSong].courses)
 					this.state.locked = 1
 					selectedWidth = this.songAsset.width + ((elapsed - resize2) / resize * (selectedWidth - this.songAsset.width))
 				}else{
@@ -1062,7 +1092,7 @@ class SongSelect{
 					selectedWidth = this.songAsset.width
 				}
 			}else{
-				this.playBgm(!this.songs[this.selectedSong].stars)
+				this.playBgm(!this.songs[this.selectedSong].courses)
 				this.state.locked = 0
 			}
 		}else if(screen === "difficulty"){
@@ -1071,7 +1101,7 @@ class SongSelect{
 				this.state.locked = 0
 			}
 			if(this.state.move){
-				var hasUra = currentSong.stars[4]
+				var hasUra = currentSong.courses.ura
 				var previousSelection = this.selectedDiff
 				do{
 					if(hasUra && this.state.move > 0){
@@ -1089,12 +1119,12 @@ class SongSelect{
 						this.selectedDiff = this.mod(this.diffOptions.length + 5, this.selectedDiff + this.state.move)
 					}
 				}while(
-					this.selectedDiff >= this.diffOptions.length && !currentSong.stars[this.selectedDiff - this.diffOptions.length]
+					this.selectedDiff >= this.diffOptions.length && !currentSong.courses[this.difficultyId[this.selectedDiff - this.diffOptions.length]]
 					|| this.selectedDiff === this.diffOptions.length + 3 && this.state.ura
 					|| this.selectedDiff === this.diffOptions.length + 4 && !this.state.ura
 				)
 				this.state.move = 0
-			}else if(this.selectedDiff < 0 || this.selectedDiff >= this.diffOptions.length && !currentSong.stars[this.selectedDiff - this.diffOptions.length]){
+			}else if(this.selectedDiff < 0 || this.selectedDiff >= this.diffOptions.length && !currentSong.courses[this.difficultyId[this.selectedDiff - this.diffOptions.length]]){
 				this.selectedDiff = 0
 			}
 		}
@@ -1164,7 +1194,7 @@ class SongSelect{
 		
 		var currentSong = this.songs[this.selectedSong]
 		var highlight = 0
-		if(!currentSong.stars){
+		if(!currentSong.courses){
 			highlight = 2
 		}
 		if(this.state.moveHover === 0){
@@ -1418,7 +1448,7 @@ class SongSelect{
 					}
 				}
 				var drawDifficulty = (ctx, i, currentUra) => {
-					if(currentSong.stars[i] || currentUra){
+					if(currentSong.courses[this.difficultyId[i]] || currentUra){
 						var score = scoreStorage.get(currentSong.hash, false, true)
 						var crownDiff = currentUra ? "ura" : this.difficultyId[i]
 						var crownType = ""
@@ -1502,9 +1532,9 @@ class SongSelect{
 								outlineSize: currentUra ? this.songAsset.letterBorder : 0
 							})
 						})
-						var songStarsArray = (currentUra ? currentSong.stars[4] : currentSong.stars[i]).toString().split(" ")
-						var songStars = songStarsArray[0]
-						var songBranch = songStarsArray[1] === "B"
+						var songStarsObj = (currentUra ? currentSong.courses.ura : currentSong.courses[this.difficultyId[i]])
+						var songStars = songStarsObj.stars
+						var songBranch = songStarsObj.branch
 						var elapsedMS = this.state.screenMS > this.state.moveMS || !songSel ? this.state.screenMS : this.state.moveMS
 						var fade = ((ms - elapsedMS) % 2000) / 2000
 						if(songBranch && fade > 0.25 && fade < 0.75){
@@ -1591,8 +1621,8 @@ class SongSelect{
 						}
 					}
 				}
-				for(var i = 0; currentSong.stars && i < 4; i++){
-					var currentUra = i === 3 && (this.state.ura && !songSel || currentSong.stars[4] && songSel)
+				for(var i = 0; currentSong.courses && i < 4; i++){
+					var currentUra = i === 3 && (this.state.ura && !songSel || currentSong.courses.ura && songSel)
 					if(songSel && currentUra){
 						drawDifficulty(ctx, i, false)
 						var elapsedMS = this.state.screenMS > this.state.moveMS ? this.state.screenMS : this.state.moveMS
@@ -1753,7 +1783,7 @@ class SongSelect{
 					}
 				}
 				
-				if(!songSel && currentSong.stars[4]){
+				if(!songSel && currentSong.courses.ura){
 					var fade = ((ms - this.state.screenMS) % 1200) / 1200
 					var _x = x + 402 + 4 * 100 + fade * 25
 					var _y = y + 258
@@ -1842,7 +1872,7 @@ class SongSelect{
 		ctx.fillRect(0, frameTop + 595, 1280 + frameLeft * 2, 125 + frameTop)
 		var x = 0
 		var y = frameTop + 603
-		var w = frameLeft + 638
+		var w = p2.session ? frameLeft + 638 - 200 : frameLeft + 638
 		var h = 117 + frameTop
 		this.draw.pattern({
 			ctx: ctx,
@@ -1869,7 +1899,81 @@ class SongSelect{
 		ctx.lineTo(x + w - 4, y + h)
 		ctx.lineTo(x + w - 4, y + 4)
 		ctx.fill()
-		x = frameLeft + 642
+		
+		this.nameplateCache.get({
+			ctx: ctx,
+			x: frameLeft + 60,
+			y: frameTop + 640,
+			w: 273,
+			h: 66,
+			id: "1p",
+		}, ctx => {
+			this.draw.nameplate({
+				ctx: ctx,
+				x: 3,
+				y: 3,
+				name: account.loggedIn ? account.displayName : strings.defaultName,
+				rank: account.loggedIn || !gameConfig._accounts || p2.session ? false : strings.notLoggedIn,
+				font: this.font
+			})
+		})
+		if(this.state.moveHover === "account"){
+			this.draw.highlight({
+				ctx: ctx,
+				x: frameLeft + 59.5,
+				y: frameTop + 639.5,
+				w: 271,
+				h: 64,
+				radius: 28.5,
+				opacity: 0.8,
+				size: 10
+			})
+		}
+		
+		if(p2.session){
+			x = x + w + 4
+			w = 396
+			this.draw.pattern({
+				ctx: ctx,
+				img: assets.image["bg_settings"],
+				x: x,
+				y: y,
+				w: w,
+				h: h,
+				dx: frameLeft + 11,
+				dy: frameTop + 45,
+				scale: 3.1
+			})
+			ctx.fillStyle = "rgba(255, 255, 255, 0.5)"
+			ctx.beginPath()
+			ctx.moveTo(x, y + h)
+			ctx.lineTo(x, y)
+			ctx.lineTo(x + w, y)
+			ctx.lineTo(x + w, y + 4)
+			ctx.lineTo(x + 4, y + 4)
+			ctx.lineTo(x + 4, y + h)
+			ctx.fill()
+			ctx.fillStyle = "rgba(0, 0, 0, 0.25)"
+			ctx.beginPath()
+			ctx.moveTo(x + w, y)
+			ctx.lineTo(x + w, y + h)
+			ctx.lineTo(x + w - 4, y + h)
+			ctx.lineTo(x + w - 4, y + 4)
+			ctx.fill()
+			if(this.state.moveHover === "session"){
+				this.draw.highlight({
+					ctx: ctx,
+					x: x,
+					y: y,
+					w: w,
+					h: h,
+					opacity: 0.8
+				})
+			}
+		}
+		
+		x = p2.session ? frameLeft + 642 + 200 : frameLeft + 642
+		w = p2.session ? frameLeft + 638 - 200 : frameLeft + 638
 		if(p2.session){
 			this.draw.pattern({
 				ctx: ctx,
@@ -1925,7 +2029,7 @@ class SongSelect{
 				}
 				this.sessionCache.get({
 					ctx: ctx,
-					x: winW / 2,
+					x: p2.session ? winW / 4 : winW / 2,
 					y: y + (h - 32) / 2,
 					w: winW / 2,
 					h: 38,
@@ -1933,7 +2037,7 @@ class SongSelect{
 				})
 				ctx.globalAlpha = 1
 			}
-			if(this.state.moveHover === "session"){
+			if(!p2.session && this.state.moveHover === "session"){
 				this.draw.highlight({
 					ctx: ctx,
 					x: x,
@@ -1944,6 +2048,25 @@ class SongSelect{
 				})
 			}
 		}
+		if(p2.session){
+			this.nameplateCache.get({
+				ctx: ctx,
+				x: frameLeft + 949,
+				y: frameTop + 640,
+				w: 273,
+				h: 66,
+				id: "2p",
+			}, ctx => {
+				this.draw.nameplate({
+					ctx: ctx,
+					x: 3,
+					y: 3,
+					name: p2.name,
+					font: this.font,
+					blue: true
+				})
+			})
+		}
 		
 		if(screen === "titleFadeIn"){
 			ctx.save()
@@ -2019,7 +2142,7 @@ class SongSelect{
 				if(!score){
 					break
 				}
-				if(config.song.stars[i] && score[diff] && score[diff].crown){
+				if(config.song.courses[this.difficultyId[i]] && score[diff] && score[diff].crown){
 					this.draw.crown({
 						ctx: ctx,
 						type: score[diff].crown,
@@ -2148,7 +2271,7 @@ class SongSelect{
 					})
 					if(currentSong){
 						currentSong.p2Cursor = diffId
-						if(p2.session && currentSong.stars){
+						if(p2.session && currentSong.courses){
 							this.selectedSong = index
 							this.state.move = 0
 							if(this.state.screen !== "difficulty"){
@@ -2192,7 +2315,7 @@ class SongSelect{
 							}
 							this.moveToSong(moveBy, true)
 						}
-					}else if(this.songs[song].stars){
+					}else if(this.songs[song].courses){
 						this.selectedSong = song
 						this.state.move = 0
 						if(this.state.screen !== "difficulty"){
@@ -2238,16 +2361,11 @@ class SongSelect{
 	
 	getLocalTitle(title, titleLang){
 		if(titleLang){
-			titleLang = titleLang.split("\n")
-			titleLang.forEach(line => {
-				var space = line.indexOf(" ")
-				var id = line.slice(0, space)
-				if(id === strings.id){
-					title = line.slice(space + 1)
-				}else if(titleLang.length === 1 && strings.id === "en" && !(id in allStrings)){
-					title = line
+			for(var id in titleLang){
+				if(id === strings.id && titleLang[id]){
+					return titleLang[id]
 				}
-			})
+			}
 		}
 		return title
 	}
diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index 17986fc..9a6c499 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -36,6 +36,8 @@
 	this.hard = "むずかしい"
 	this.oni = "おに"
 	this.songBranch = "譜面分岐あり"
+	this.defaultName = "どんちゃん"
+	this.notLoggedIn = "ログインしていない"
 	this.sessionStart = "オンラインセッションを開始する！"
 	this.sessionEnd = "オンラインセッションを終了する"
 	this.loading = "ロード中..."
@@ -184,6 +186,24 @@
 			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
 		}
 	}
+	this.account = {
+		username: "ユーザー名",
+		enterUsername: "ユーザー名を入力",
+		password: "パスワード",
+		enterPassword: "パスワードを入力",
+		repeatPassword: "パスワードを再入力",
+		remember: "ログイン状態を保持する",
+		login: "ログイン",
+		register: "登録",
+		registerAccount: "アカウントを登録",
+		passwordsDoNotMatch: "パスワードが一致しません",
+		cannotBeEmpty: "%sは空にできません",
+		error: "リクエストの処理中にエラーが発生しました",
+		logout: "ログアウト",
+		back: "もどる",
+		cancel: "Cancel",
+		save: "Save"
+	}
 	this.browserSupport = {
 		browserWarning: "サポートされていないブラウザを実行しています (%s)",
 		details: "詳しく",
@@ -233,6 +253,8 @@ function StringsEn(){
 	this.hard = "Hard"
 	this.oni = "Extreme"
 	this.songBranch = "Diverge Notes"
+	this.defaultName = "Don-chan"
+	this.notLoggedIn = "Not logged in"
 	this.sessionStart = "Begin an Online Session!"
 	this.sessionEnd = "End Online Session"
 	this.loading = "Loading..."
@@ -381,6 +403,33 @@ function StringsEn(){
 			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
 		}
 	}
+	this.account = {
+		username: "Username",
+		enterUsername: "Enter Username",
+		password: "Password",
+		enterPassword: "Enter Password",
+		repeatPassword: "Repeat Password",
+		remember: "Remember me",
+		login: "Log In",
+		register: "Register",
+		registerAccount: "Register account",
+		passwordsDoNotMatch: "Passwords do not match",
+		cannotBeEmpty: "%s cannot be empty",
+		error: "An error occurred while processing your request",
+		logout: "Log Out",
+		back: "Back",
+		cancel: "Cancel",
+		save: "Save",
+		displayName: "Displayed Name",
+		changePassword: "Change Password",
+		currentNewRepeat: [
+			"Current Password",
+			"New Password",
+			"Repeat New Password"
+		],
+		deleteAccount: "Delete Account",
+		verifyPassword: "Verify password to delete this account"
+	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
 		details: "Details...",
@@ -430,6 +479,8 @@ function StringsCn(){
 	this.hard = "困难"
 	this.oni = "魔王"
 	this.songBranch = "有谱面分歧"
+	this.defaultName = "小咚"
+	this.notLoggedIn = "未登录"
 	this.sessionStart = "开始在线会话！"
 	this.sessionEnd = "结束在线会话"
 	this.loading = "加载中..."
@@ -578,6 +629,24 @@ function StringsCn(){
 			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
 		}
 	}
+	this.account = {
+		username: "登录名",
+		enterUsername: "输入用户名",
+		password: "密码",
+		enterPassword: "输入密码",
+		repeatPassword: "重新输入密码",
+		remember: "记住登录",
+		login: "登录",
+		register: "注册",
+		registerAccount: "注册帐号",
+		passwordsDoNotMatch: "密码不匹配",
+		cannotBeEmpty: "%s不能为空",
+		error: "处理您的请求时发生错误",
+		logout: "登出",
+		back: "返回",
+		cancel: "Cancel",
+		save: "Save"
+	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
 		details: "Details...",
@@ -627,6 +696,8 @@ function StringsTw(){
 	this.hard = "困難"
 	this.oni = "魔王"
 	this.songBranch = "有譜面分歧"
+	this.defaultName = "小咚"
+	this.notLoggedIn = "未登錄"
 	this.sessionStart = "開始多人模式!"
 	this.sessionEnd = "結束多人模式"
 	this.loading = "讀取中..."
@@ -775,6 +846,24 @@ function StringsTw(){
 			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
 		}
 	}
+	this.account = {
+		username: "使用者名稱",
+		enterUsername: "輸入用戶名",
+		password: "密碼",
+		enterPassword: "輸入密碼",
+		repeatPassword: "再次輸入密碼",
+		remember: "記住登錄",
+		login: "登入",
+		register: "註冊",
+		registerAccount: "註冊帳號",
+		passwordsDoNotMatch: "密碼不匹配",
+		cannotBeEmpty: "%s不能為空",
+		error: "處理您的請求時發生錯誤",
+		logout: "登出",
+		back: "返回",
+		cancel: "Cancel",
+		save: "Save"
+	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
 		details: "Details...",
@@ -824,6 +913,8 @@ function StringsKo(){
 	this.hard = "어려움"
 	this.oni = "귀신"
 	this.songBranch = "악보 분기 있습니다"
+	this.defaultName = "동이"
+	this.notLoggedIn = "로그인하지 않았습니다"
 	this.sessionStart = "온라인 세션 시작!"
 	this.sessionEnd = "온라인 세션 끝내기"
 	this.loading = "로딩 중..."
@@ -972,6 +1063,24 @@ function StringsKo(){
 			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
 		}
 	}
+	this.account = {
+		username: "사용자 이름",
+		enterUsername: "사용자 이름을 입력하십시오",
+		password: "비밀번호",
+		enterPassword: "비밀번호 입력",
+		repeatPassword: "비밀번호 재입력",
+		remember: "자동 로그인",
+		login: "로그인",
+		register: "가입하기",
+		registerAccount: "계정 등록",
+		passwordsDoNotMatch: "비밀번호가 일치하지 않습니다",
+		cannotBeEmpty: "%s 비어 있을 수 없습니다",
+		error: "요청을 처리하는 동안 오류가 발생했습니다",
+		logout: "로그 아웃",
+		back: "돌아간다",
+		cancel: "Cancel",
+		save: "Save"
+	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
 		details: "Details...",
diff --git a/public/src/js/view.js b/public/src/js/view.js
index 9964c83..a165b09 100644
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -126,6 +126,7 @@
 		this.comboCache = new CanvasCache(noSmoothing)
 		this.pauseCache = new CanvasCache(noSmoothing)
 		this.branchCache = new CanvasCache(noSmoothing)
+		this.nameplateCache = new CanvasCache(noSmoothing)
 		
 		this.multiplayer = this.controller.multiplayer
 		
@@ -235,6 +236,11 @@
 			if(!this.multiplayer){
 				this.pauseCache.resize(81 * this.pauseOptions.length * 2, 464, ratio)
 			}
+			if(this.portrait){
+				this.nameplateCache.resize(220, 54, ratio + 0.2)
+			}else{
+				this.nameplateCache.resize(274, 67, ratio + 0.2)
+			}
 			this.fillComboCache()
 			this.setDonBgHeight()
 			resized = true
@@ -388,6 +394,32 @@
 				h: 130
 			}
 			
+			if(this.multiplayer !== 2){
+				this.nameplateCache.get({
+					ctx: ctx,
+					x: 167,
+					y: 160,
+					w: 219,
+					h: 53,
+					id: "1p",
+				}, ctx => {
+					if(this.multiplayer === 2){
+						var name = p2.name || strings.defaultName
+					}else{
+						var name = account.loggedIn ? account.displayName : strings.defaultName
+					}
+					this.draw.nameplate({
+						ctx: ctx,
+						x: 3,
+						y: 3,
+						scale: 0.8,
+						name: name,
+						font: this.font,
+						blue: this.multiplayer === 2
+					})
+				})
+			}
+			
 			ctx.fillStyle = "#000"
 			ctx.fillRect(
 				0,
@@ -547,6 +579,29 @@
 			}
 			var taikoPos = {x: 179, y: frameTop + 190, w: 138, h: 162}
 			
+			this.nameplateCache.get({
+				ctx: ctx,
+				x: 320,
+				y: this.multiplayer === 2 ? frameTop + 305 : frameTop + 20,
+				w: 273,
+				h: 66,
+				id: "1p",
+			}, ctx => {
+				if(this.multiplayer === 2){
+					var name = p2.name || strings.defaultName
+				}else{
+					var name = account.loggedIn ? account.displayName : strings.defaultName
+				}
+				this.draw.nameplate({
+					ctx: ctx,
+					x: 3,
+					y: 3,
+					name: name,
+					font: this.font,
+					blue: this.multiplayer === 2
+				})
+			})
+			
 			ctx.fillStyle = "#000"
 			ctx.fillRect(
 				0,
diff --git a/public/src/views/account.html b/public/src/views/account.html
new file mode 100644
index 0000000..1271156
--- /dev/null
+++ b/public/src/views/account.html
@@ -0,0 +1,33 @@
+<div class="view-outer">
+	<div class="view account-view">
+		<div class="view-title stroke-sub"></div>
+		<div class="view-content">
+			<div class="displayname-div">
+				<div class="displayname-hint"></div>
+				<input type="text" class="displayname">
+			</div>
+			<form class="accountpass-form">
+				<div>
+					<div class="accountpass-btn taibtn stroke-sub link-btn"></div>
+				</div>
+				<div class="accountpass-div">
+					<input type="password" name="password"><input type="password" name="newpassword" autocomplete="new-password"><input type="password" name="newpassword2" autocomplete="new-password">
+				</div>
+			</form>
+			<form class="accountdel-form">
+				<div>
+					<div class="accountdel-btn taibtn stroke-sub link-btn"></div>
+				</div>
+				<div class="accountdel-div">
+					<input type="password" name="password">
+				</div>
+			</form>
+		</div>
+		<div id="diag-txt"></div>
+		<div class="left-buttons">
+			<div class="logout-btn taibtn stroke-sub link-btn"></div>
+		</div>
+		<div class="save-btn taibtn stroke-sub selected"></div>
+		<div class="view-end-button taibtn stroke-sub"></div>
+	</div>
+</div>
diff --git a/public/src/views/login.html b/public/src/views/login.html
new file mode 100644
index 0000000..c9a58c5
--- /dev/null
+++ b/public/src/views/login.html
@@ -0,0 +1,24 @@
+<div class="view-outer">
+	<div class="view">
+		<div class="view-title stroke-sub"></div>
+		<div class="view-content">
+			<form class="login-form">
+				<div class="username-hint"></div>
+				<input type="text" name="username" required>
+				<div class="password-hint"></div>
+				<input type="password" name="password" required>
+				<div class="password2-div"></div>
+				<div class="remember-div">
+					<label class="remember-label">
+						<input type="checkbox" checked="checked" name="remember">
+					</label>
+				</div>
+				<div class="login-btn taibtn stroke-sub link-btn"></div>
+			</form>
+		</div>
+		<div class="left-buttons">
+			<div class="register-btn taibtn stroke-sub link-btn"></div>
+		</div>
+		<div class="view-end-button taibtn stroke-sub selected"></div>
+	</div>
+</div>
diff --git a/server.py b/server.py
index 04e802d..eb8e73c 100644
--- a/server.py
+++ b/server.py
@@ -42,7 +42,8 @@ async def connection(ws, path):
 	user = {
 		"ws": ws,
 		"action": "ready",
-		"session": False
+		"session": False,
+		"name": None
 	}
 	server_status["users"].append(user)
 	try:
@@ -79,6 +80,7 @@ async def connection(ws, path):
 						waiting = server_status["waiting"]
 						id = value["id"] if "id" in value else None
 						diff = value["diff"] if "diff" in value else None
+						user["name"] = value["name"] if "name" in value else None
 						if not id or not diff:
 							continue
 						if id not in waiting:
@@ -92,6 +94,7 @@ async def connection(ws, path):
 							await ws.send(msgobj("waiting"))
 						else:
 							# Join the other user and start game
+							user["name"] = value["name"] if "name" in value else None
 							user["other_user"] = waiting[id]["user"]
 							waiting_diff = waiting[id]["diff"]
 							del waiting[id]
@@ -101,7 +104,9 @@ async def connection(ws, path):
 								user["other_user"]["other_user"] = user
 								await asyncio.wait([
 									ws.send(msgobj("gameload", waiting_diff)),
-									user["other_user"]["ws"].send(msgobj("gameload", diff))
+									user["other_user"]["ws"].send(msgobj("gameload", diff)),
+									ws.send(msgobj("name", user["other_user"]["name"])),
+									user["other_user"]["ws"].send(msgobj("name", user["name"]))
 								])
 							else:
 								# Wait for another user
@@ -116,27 +121,31 @@ async def connection(ws, path):
 						# Update others on waiting players
 						await notify_status()
 					elif type == "invite":
-						if value == None:
+						if value and "id" in value and value["id"] == None:
 							# Session invite link requested
 							invite = get_invite()
 							server_status["invites"][invite] = user
 							user["action"] = "invite"
 							user["session"] = invite
+							user["name"] = value["name"] if "name" in value else None
 							await ws.send(msgobj("invite", invite))
-						elif value in server_status["invites"]:
+						elif value and "id" in value and value["id"] in server_status["invites"]:
 							# Join a session with the other user
-							user["other_user"] = server_status["invites"][value]
-							del server_status["invites"][value]
+							user["name"] = value["name"] if "name" in value else None
+							user["other_user"] = server_status["invites"][value["id"]]
+							del server_status["invites"][value["id"]]
 							if "ws" in user["other_user"]:
 								user["other_user"]["other_user"] = user
 								user["action"] = "invite"
-								user["session"] = value
+								user["session"] = value["id"]
 								sent_msg = msgobj("session")
 								await asyncio.wait([
 									ws.send(sent_msg),
-									user["other_user"]["ws"].send(sent_msg)
+									user["other_user"]["ws"].send(sent_msg),
+									ws.send(msgobj("invite")),
+									ws.send(msgobj("name", user["other_user"]["name"])),
+									user["other_user"]["ws"].send(msgobj("name", user["name"]))
 								])
-								await ws.send(msgobj("invite"))
 							else:
 								del user["other_user"]
 								await ws.send(msgobj("gameend"))

From 7519b1c4c29e967e6fc9545cb86baa39c640f4d6 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Fri, 13 Mar 2020 02:45:42 +0000
Subject: [PATCH 02/41] account system backend, db rewrite

---
 .gitignore                       |   2 +
 app.py                           | 348 ++++++++++++++++++++++++-------
 config.example.json              |   4 +-
 public/src/css/admin.css         | 125 +++++++++++
 schema.py                        |  73 +++++++
 templates/admin.html             |  23 ++
 templates/admin_song_detail.html |  87 ++++++++
 templates/admin_songs.html       |  11 +
 tools/migrate_db.py              | 105 ++++++++++
 9 files changed, 700 insertions(+), 78 deletions(-)
 create mode 100644 public/src/css/admin.css
 create mode 100644 schema.py
 create mode 100644 templates/admin.html
 create mode 100644 templates/admin_song_detail.html
 create mode 100644 templates/admin_songs.html
 create mode 100644 tools/migrate_db.py

diff --git a/.gitignore b/.gitignore
index 6d44399..3b79d0f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,6 +36,7 @@ $RECYCLE.BIN/
 .Trashes
 
 .vscode
+*.pyc
 
 # Directories potentially created on remote AFP share
 .AppleDB
@@ -50,3 +51,4 @@ version.json
 public/index.html
 config.json
 public/assets/song_skins
+secret.txt
diff --git a/app.py b/app.py
index d1ecbe3..569631f 100644
--- a/app.py
+++ b/app.py
@@ -1,39 +1,65 @@
-#!/usr/bin/env python2
-
-from __future__ import division
+#!/usr/bin/env python3
 
+import bcrypt
 import json
-import sqlite3
 import re
+import schema
 import os
-from flask import Flask, g, jsonify, render_template, request, abort, redirect
+
+from functools import wraps
+from flask import Flask, g, jsonify, render_template, request, abort, redirect, session
 from flask_caching import Cache
+from flask_session import Session
 from ffmpy import FFmpeg
+from pymongo import MongoClient
 
 app = Flask(__name__)
-try:
-    app.cache = Cache(app, config={'CACHE_TYPE': 'redis'})
-except RuntimeError:
-    import tempfile
-    app.cache = Cache(app, config={'CACHE_TYPE': 'filesystem', 'CACHE_DIR': tempfile.gettempdir()})
+client = MongoClient()
+
+try:
+    app.secret_key = open('secret.txt').read().strip()
+except FileNotFoundError:
+    app.secret_key = os.urandom(24).hex()
+    with open('secret.txt', 'w') as fp:
+        fp.write(app.secret_key)
+        fp.close()
+
+app.config['SESSION_TYPE'] = 'redis'
+app.cache = Cache(app, config={'CACHE_TYPE': 'redis'})
+sess = Session()
+sess.init_app(app)
+
+db = client.taiko
+db.users.create_index('username', unique=True)
 
-DATABASE = 'taiko.db'
 DEFAULT_URL = 'https://github.com/bui/taiko-web/'
 
 
-def get_db():
-    db = getattr(g, '_database', None)
-    if db is None:
-        db = g._database = sqlite3.connect(DATABASE)
-        db.row_factory = sqlite3.Row
-    return db
+def api_error(message):
+    return jsonify({'status': 'error', 'message': message})
 
 
-def query_db(query, args=(), one=False):
-    cur = get_db().execute(query, args)
-    rv = cur.fetchall()
-    cur.close()
-    return (rv[0] if rv else None) if one else rv
+def login_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not session.get('username'):
+            return api_error('not_logged_in')
+        return f(*args, **kwargs)
+    return decorated_function
+
+
+def admin_required(f):
+    @wraps(f)
+    def decorated_function(*args, **kwargs):
+        if not session.get('username'):
+            return abort(403)
+
+        user = db.users.find_one({'username': session.get('username')})
+        if user['user_level'] < 100:
+            return abort(403)
+
+        return f(*args, **kwargs)
+    return decorated_function
 
 
 def get_config():
@@ -72,13 +98,6 @@ def get_version():
     return version
 
 
-@app.teardown_appcontext
-def close_connection(exception):
-    db = getattr(g, '_database', None)
-    if db is not None:
-        db.close()
-
-
 @app.route('/')
 @app.cache.cached(timeout=15)
 def route_index():
@@ -86,6 +105,33 @@ def route_index():
     return render_template('index.html', version=version, config=get_config())
 
 
+@app.route('/admin')
+@admin_required
+def route_admin():
+    return redirect('/admin/songs')
+
+
+@app.route('/admin/songs')
+@admin_required
+def route_admin_songs():
+    songs = db.songs.find({})
+    return render_template('admin_songs.html', songs=list(songs))
+
+
+@app.route('/admin/songs/<int:id>')
+@admin_required
+def route_admin_songs_id(id):
+    song = db.songs.find_one({'id': id})
+    if not song:
+        return abort(404)
+
+    categories = list(db.categories.find({}))
+    song_skins = list(db.song_skins.find({}))
+
+    return render_template('admin_song_detail.html',
+        song=song, categories=categories, song_skins=song_skins)
+
+
 @app.route('/api/preview')
 @app.cache.cached(timeout=15, query_string=True)
 def route_api_preview():
@@ -93,12 +139,12 @@ def route_api_preview():
     if not song_id or not re.match('^[0-9]+$', song_id):
         abort(400)
 
-    song_row = query_db('select * from songs where id = ? and enabled = 1', (song_id,))
-    if not song_row:
+    song = db.songs.find_one({'id': song_id})
+    if not song:
         abort(400)
 
-    song_type = song_row[0]['type']
-    prev_path = make_preview(song_id, song_type, song_row[0]['preview'])
+    song_type = song['type']
+    prev_path = make_preview(song_id, song_type, song['preview'])
     if not prev_path:
         return redirect(get_config()['songs_baseurl'] + '%s/main.mp3' % song_id)
 
@@ -108,52 +154,30 @@ def route_api_preview():
 @app.route('/api/songs')
 @app.cache.cached(timeout=15)
 def route_api_songs():
-    songs = query_db('select s.*, m.name, m.url from songs s left join makers m on s.maker_id = m.maker_id where enabled = 1')
-    
-    raw_categories = query_db('select * from categories')
-    categories = {}
-    for cat in raw_categories:
-        categories[cat['id']] = cat['title']
-    
-    raw_song_skins = query_db('select * from song_skins')
-    song_skins = {}
-    for skin in raw_song_skins:
-        song_skins[skin[0]] = {'name': skin['name'], 'song': skin['song'], 'stage': skin['stage'], 'don': skin['don']}
-    
-    songs_out = []
+    songs = list(db.songs.find({'enabled': True}, {'_id': False, 'enabled': False}))
     for song in songs:
-        song_id = song['id']
-        song_type = song['type']
-        preview = song['preview']
-        
-        category_out = categories[song['category']] if song['category'] in categories else ''
-        song_skin_out = song_skins[song['skin_id']] if song['skin_id'] in song_skins else None
-        maker = None
-        if song['maker_id'] == 0:
-            maker = 0
-        elif song['maker_id'] and song['maker_id'] > 0:
-            maker = {'name': song['name'], 'url': song['url'], 'id': song['maker_id']}
-        
-        songs_out.append({
-            'id': song_id,
-            'title': song['title'],
-            'title_lang': song['title_lang'],
-            'subtitle': song['subtitle'],
-            'subtitle_lang': song['subtitle_lang'],
-            'stars': [
-                song['easy'], song['normal'], song['hard'], song['oni'], song['ura']
-            ],
-            'preview': preview,
-            'category': category_out,
-            'type': song_type,
-            'offset': song['offset'],
-            'song_skin': song_skin_out,
-            'volume': song['volume'],
-            'maker': maker,
-            'hash': song['hash']
-        })
+        if song['maker_id']:
+            if song['maker_id'] == 0:
+                song['maker'] = 0
+            else:
+                song['maker'] = db.makers.find_one({'id': song['maker_id']}, {'_id': False})
+        else:
+            song['maker'] = None
+        del song['maker_id']
 
-    return jsonify(songs_out)
+        if song['category_id']:
+            song['category'] = db.categories.find_one({'id': song['category_id']})['title']
+        else:
+            song['category'] = None
+        del song['category_id']
+
+        if song['skin_id']:
+            song['song_skin'] = db.song_skins.find_one({'id': song['skin_id']}, {'_id': False, 'id': False})
+        else:
+            song['song_skin'] = None
+        del song['skin_id']
+
+    return jsonify(songs)
 
 
 @app.route('/api/config')
@@ -163,6 +187,176 @@ def route_api_config():
     return jsonify(config)
 
 
+@app.route('/api/register', methods=['POST'])
+def route_api_register():
+    if session.get('username'):
+        return api_error('already_logged_in')
+
+    data = request.get_json()
+    if not schema.validate(data, schema.register):
+        return abort(400)
+
+    username = data.get('username', '')
+    if len(username) > 20 or not re.match('^[a-zA-Z0-9_]{1,20}$', username):
+        return api_error('invalid_username')
+
+    if db.users.find_one({'username_lower': username.lower()}):
+        return api_error('username_in_use')
+
+    password = data.get('password', '').encode('utf-8')
+    if not 8 <= len(password) <= 5000:
+        return api_error('invalid_password')
+
+    salt = bcrypt.gensalt()
+    hashed = bcrypt.hashpw(password, salt)
+
+    db.users.insert_one({
+        'username': username,
+        'username_lower': username.lower(),
+        'password': hashed,
+        'display_name':  username,
+        'user_level': 1
+    })
+
+    session['username'] = username
+    session.permanent = True
+    return jsonify({'status': 'ok', 'username': username, 'display_name': username})
+
+
+@app.route('/api/login', methods=['POST'])
+def route_api_login():
+    if session.get('username'):
+        return api_error('already_logged_in')
+
+    data = request.get_json()
+    if not schema.validate(data, schema.login):
+        return abort(400)
+
+    username = data.get('username', '')
+    result = db.users.find_one({'username_lower': username.lower()})
+    if not result:
+        return api_error('invalid_username_password')
+
+    password = data.get('password', '').encode('utf-8')
+    if not bcrypt.checkpw(password, result['password']):
+        return api_error('invalid_username_password')
+
+    session['username'] = result['username']
+    if data.get('remember'):
+        session.permanent = True
+
+    return jsonify({'status': 'ok', 'username': result['username'], 'display_name': result['display_name']})
+
+
+@app.route('/api/logout', methods=['POST'])
+@login_required
+def route_api_logout():
+    session.clear()
+    return jsonify({'status': 'ok'})
+
+
+@app.route('/api/account/display_name', methods=['POST'])
+@login_required
+def route_api_account_display_name():
+    data = request.get_json()
+    if not schema.validate(data, schema.update_display_name):
+        return abort(400)
+
+    display_name = data.get('display_name', '')
+    if not display_name or len(display_name) > 20:
+        return api_error('invalid_display_name')
+    
+    db.users.update_one({'username': session.get('username')}, {
+        '$set': {'display_name': display_name}
+    })
+
+    return jsonify({'status': 'ok'})
+
+
+@app.route('/api/account/password', methods=['POST'])
+@login_required
+def route_api_account_password():
+    data = request.get_json()
+    if not schema.validate(data, schema.update_password):
+        return abort(400)
+
+    user = db.users.find_one({'username': session.get('username')})
+    current_password = data.get('current_password', '').encode('utf-8')
+    if not bcrypt.checkpw(current_password, user['password']):
+        return api_error('current_password_invalid')
+    
+    new_password = data.get('new_password', '').encode('utf-8')
+    if not 8 <= len(new_password) <= 5000:
+        return api_error('invalid_password')
+    
+    salt = bcrypt.gensalt()
+    hashed = bcrypt.hashpw(new_password, salt)
+
+    db.users.update_one({'username': session.get('username')}, {
+        '$set': {'password': hashed}
+    })
+
+    return jsonify({'status': 'ok'})
+
+
+@app.route('/api/account/remove', methods=['POST'])
+@login_required
+def route_api_account_remove():
+    data = request.get_json()
+    if not schema.validate(data, schema.delete_account):
+        return abort(400)
+
+    user = db.users.find_one({'username': session.get('username')})
+    password = data.get('password', '').encode('utf-8')
+    if not bcrypt.checkpw(password, user['password']):
+        return api_error('current_password_invalid')
+
+    db.scores.delete_many({'username': session.get('username')})
+    db.users.delete_one({'username': session.get('username')})
+
+    session.clear()
+    return jsonify({'status': 'ok'})
+
+
+@app.route('/api/scores/save', methods=['POST'])
+@login_required
+def route_api_scores_save():
+    data = request.get_json()
+    if not schema.validate(data, schema.scores_save):
+        return abort(400)
+
+    username = session.get('username')
+    if data.get('is_import'):
+        db.scores.delete_many({'username': username})
+
+    scores = data.get('scores', [])
+    for score in scores:
+        db.scores.update_one({'username': username, 'hash': score['hash']},
+        {'$set': {
+            'username': username,
+            'hash': score['hash'],
+            'score': score['score']
+        }}, upsert=True)
+
+    return jsonify({'success': True})
+
+
+@app.route('/api/scores/get')
+@login_required
+def route_api_scores_get():
+    username = session.get('username')
+
+    scores = []
+    for score in db.scores.find({'username': username}):
+        scores.append({
+            'hash': score['hash'],
+            'score': score['score']
+        })
+
+    user = db.users.find_one({'username': username})
+    return jsonify({'scores': scores, 'username': user['username'], 'display_name': user['display_name']})
+
+
 def make_preview(song_id, song_type, preview):
     song_path = 'public/songs/%s/main.mp3' % song_id
     prev_path = 'public/songs/%s/preview.mp3' % song_id
diff --git a/config.example.json b/config.example.json
index 9bfd207..9ec88e4 100644
--- a/config.example.json
+++ b/config.example.json
@@ -1,4 +1,6 @@
 {
     "songs_baseurl": "",
-    "assets_baseurl": ""
+    "assets_baseurl": "",
+    "email": "",
+    "_accounts": true
 }
diff --git a/public/src/css/admin.css b/public/src/css/admin.css
new file mode 100644
index 0000000..5b2f22d
--- /dev/null
+++ b/public/src/css/admin.css
@@ -0,0 +1,125 @@
+body {
+    margin: 0;
+    font-family: 'Noto Sans JP', sans-serif;
+    background: #FF7F00;
+  }
+  
+  .nav {
+    margin: 0;
+    padding: 0;
+    width: 200px;
+    background-color: #A01300;
+    position: fixed;
+    height: 100%;
+    overflow: auto;
+  }
+  
+  .nav a {
+    display: block;
+    color: #FFF;
+    padding: 16px;
+    text-decoration: none;
+  }
+   
+  .nav a.active {
+    background-color: #4CAF50;
+    color: white;
+  }
+  
+  .nav a:hover:not(.active) {
+    background-color: #555;
+    color: white;
+  }
+  
+main {
+    margin-left: 200px;
+    padding: 1px 16px;
+    height: 1000px;
+  }
+  
+  @media screen and (max-width: 700px) {
+    .nav {
+      width: 100%;
+      height: auto;
+      position: relative;
+    }
+    .nav a {float: left;}
+    main {margin-left: 0;}
+  }
+  
+  @media screen and (max-width: 400px) {
+    .sidebar a {
+      text-align: center;
+      float: none;
+    }
+  }
+
+  .container {
+      margin-bottom: 40px;
+  }
+
+.song {
+    background: #F84828;
+    color: white;
+    padding: 10px;
+    font-size: 14pt;
+    margin: 10px 0;
+}
+
+.song p {
+    margin: 0;
+}
+
+.song-link {
+    text-decoration: none;
+}
+
+.song-form {
+    background: #ff5333;
+    color: #FFF;
+    padding: 20px;
+}
+
+.form-field {
+    background: #555555;
+    padding: 15px 20px 20px 20px;
+    margin-bottom: 20px;
+}
+
+.form-field p {
+    margin: 0;
+    font-size: 18pt;
+}
+
+ .form-field > label {
+    display: block;
+}
+
+.form-field input {
+    margin: 5px 0;
+}
+
+.form-field input[type="text"] {
+    width: 300px;
+}
+
+.form-field input[type="number"] {
+    width: 50px;
+}
+
+h1 small {
+    color: #4a4a4a;
+}
+
+.form-field-indent {
+    margin-left: 20px;
+}
+
+.checkbox {
+    display: inline-block;
+}
+
+.checkbox input {
+    margin-right: 3px;
+    margin-left: 5px;
+}
\ No newline at end of file
diff --git a/schema.py b/schema.py
new file mode 100644
index 0000000..1ba0c81
--- /dev/null
+++ b/schema.py
@@ -0,0 +1,73 @@
+import jsonschema
+
+def validate(data, schema):
+    try:
+        jsonschema.validate(data, schema)
+        return True
+    except jsonschema.exceptions.ValidationError:
+        return False
+
+register = {
+    '$schema': 'http://json-schema.org/schema#',
+    'type': 'object',
+    'properties': {
+        'username': {'type': 'string'},
+        'password': {'type': 'string'}
+    }
+}
+
+login = {
+    '$schema': 'http://json-schema.org/schema#',
+    'type': 'object',
+    'properties': {
+        'username': {'type': 'string'},
+        'password': {'type': 'string'},
+        'remember': {'type': 'boolean'}
+    }
+}
+
+update_display_name = {
+    '$schema': 'http://json-schema.org/schema#',
+    'type': 'object',
+    'properties': {
+        'display_name': {'type': 'string'}
+    }
+}
+
+update_password = {
+    '$schema': 'http://json-schema.org/schema#',
+    'type': 'object',
+    'properties': {
+        'current_password': {'type': 'string'},
+        'new_password': {'type': 'string'}
+    }
+}
+
+delete_account = {
+    '$schema': 'http://json-schema.org/schema#',
+    'type': 'object',
+    'properties': {
+        'password': {'type': 'string'}
+    }
+}
+
+scores_save = {
+    '$schema': 'http://json-schema.org/schema#',
+    'type': 'object',
+    'properties': {
+        'scores': {
+            'type': 'array',
+            'items': {'$ref': '#/definitions/score'}
+        },
+        'is_import': {'type': 'boolean'}
+    },
+    'definitions': {
+        'score': {
+            'type': 'object',
+            'properties': {
+                'hash': {'type': 'string'},
+                'score': {'type': 'string'}
+            }
+        }
+    }
+}
diff --git a/templates/admin.html b/templates/admin.html
new file mode 100644
index 0000000..e92ff9a
--- /dev/null
+++ b/templates/admin.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>Taiko Web Admin</title>
+
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
+        <link href="/src/css/admin.css" rel="stylesheet">
+    </head>
+    <body>
+        <header>
+            <div class="nav">
+                <a href="/admin/songs">Songs</a>
+            </div>
+        </header>
+
+        <main>
+            <div class="container">
+                {% block content %}{% endblock %}
+            </div>
+        </main>
+    </body>
+</html>
diff --git a/templates/admin_song_detail.html b/templates/admin_song_detail.html
new file mode 100644
index 0000000..322c835
--- /dev/null
+++ b/templates/admin_song_detail.html
@@ -0,0 +1,87 @@
+{% extends 'admin.html' %}
+{% block content %}
+<h1>{{ song.title }} <small>(ID: {{ song.id }})</small></h1>
+<div class="song-form">
+    <form method="post">
+
+        <div class="form-field">
+            <span class="checkbox"><input type="checkbox" name="enabled" id="enabled"{% if song.enabled %} checked{% endif %}><label for="enabled"> Enabled</label></span>
+        </div>
+
+        <div class="form-field">
+            <p>Title</p>
+            <label for="title">Original</label>
+            <input type="text" id="title" value="{{song.title}}" name="title">
+            <label for="title_ja">Japanese</label>
+            <input type="text" id="title_ja" value="{{song.title_lang.ja}}" name="title_ja">
+            <label for="title_en">English</label>
+            <input type="text" id="title_en" value="{{song.title_lang.en}}" name="title_en">
+            <label for="title_cn">Chinese (Simplified)</label>
+            <input type="text" id="title_cn" value="{{song.title_lang.cn}}" name="title_cn">
+            <label for="title_tw">Chinese (Traditional)</label>
+            <input type="text" id="title_tw" value="{{song.title_lang.tw}}" name="title_tw">
+            <label for="title_ko">Korean</label>
+            <input type="text" id="title_ko" value="{{song.title_lang.ko}}" name="title_ko">
+        </div>
+
+        <div class="form-field">
+            <p>Subtitle</p>
+            <label for="subtitle">Original</label>
+            <input type="text" id="subtitle" value="{{song.subtitle}}" name="subtitle">
+            <label for="subtitle_ja">Japanese</label>
+            <input type="text" id="subtitle_ja" value="{{song.subtitle_lang.ja}}" name="subtitle_ja">
+            <label for="subtitle_en">English</label>
+            <input type="text" id="subtitle_en" value="{{song.subtitle_lang.en}}" name="subtitle_en">
+            <label for="subtitle_cn">Chinese (Simplified)</label>
+            <input type="text" id="subtitle_cn" value="{{song.subtitle_lang.cn}}" name="subtitle_cn">
+            <label for="subtitle_tw">Chinese (Traditional)</label>
+            <input type="text" id="subtitle_tw" value="{{song.subtitle_lang.tw}}" name="subtitle_tw">
+            <label for="subtitle_ko">Korean</label>
+            <input type="text" id="subtitle_ko" value="{{song.subtitle_lang.ko}}" name="subtitle_ko">
+        </div>
+
+        <div class="form-field">
+            <p>Courses</p>
+            <label for="course_easy">Easy</label>
+            <input type="number" id="course_easy" value="{{song.courses.easy.stars}}" name="course_easy" min="1" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_easy" id="branch_easy"{% if song.courses.easy.branch %} checked{% endif %}><label for="branch_easy"> Diverge Notes</label></span>
+            <label for="course_normal">Normal</label>
+            <input type="number" id="course_normal" value="{{song.courses.normal.stars}}" name="course_normal" min="1" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_normal" id="branch_normal"{% if song.courses.normal.branch %} checked{% endif %}><label for="branch_normal"> Diverge Notes</label></span>
+            <label for="course_hard">Hard</label>
+            <input type="number" id="course_hard" value="{{song.courses.hard.stars}}" name="course_hard" min="1" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_hard" id="branch_hard"{% if song.courses.hard.branch %} checked{% endif %}><label for="branch_hard"> Diverge Notes</label></span>
+            <label for="course_oni">Oni</label>
+            <input type="number" id="course_oni" value="{{song.courses.oni.stars}}" name="course_oni" min="1" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_oni" id="branch_oni"{% if song.courses.oni.branch %} checked{% endif %}><label for="branch_oni"> Diverge Notes</label></span>
+            <label for="course_ura">Ura</label>
+            <input type="number" id="course_ura" value="{{song.courses.ura.stars}}" name="course_ura" min="1" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_ura" id="branch_ura"{% if song.courses.ura.branch %} checked{% endif %}><label for="branch_ura"> Diverge Notes</label></span>
+        </div>
+
+        <div class="form-field">
+            <p><label for="category_id">Category</label></p>
+            <select name="category_id" id="category_id">
+                {% for category in categories %}
+                    <option value="{{ category.id }}"{% if song.category_id == category.id %} selected{% endif %}>{{ category.title }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="form-field">
+            <p><label for="type">Type</label></p>
+            <select name="type" id="type">
+                <option value="tja"{% if song.type == 'tja' %} selected{% endif %}>TJA</option>
+                <option value="osu"{% if song.type == 'osu' %} selected{% endif %}>osu!taiko</option>
+            </select>
+        </div>
+
+        <div class="form-field">
+            <p><label for="offset">Offset</label></p>
+            <input type="text" id="offset" value="{{song.offset}}" name="offset">
+        </div>
+
+        <button type="submit">Save</button>
+    </form>
+</div>
+{% endblock %}
diff --git a/templates/admin_songs.html b/templates/admin_songs.html
new file mode 100644
index 0000000..eb55425
--- /dev/null
+++ b/templates/admin_songs.html
@@ -0,0 +1,11 @@
+{% extends 'admin.html' %}
+{% block content %}
+<h1>Songs</h1>
+{% for song in songs %}
+    <a href="/admin/songs/{{ song.id }}" class="song-link">
+        <div class="song">
+            <p>{{ song.title }}</p>
+        </div>
+    </a>
+{% endfor %}
+{% endblock %}
diff --git a/tools/migrate_db.py b/tools/migrate_db.py
new file mode 100644
index 0000000..7ae71c6
--- /dev/null
+++ b/tools/migrate_db.py
@@ -0,0 +1,105 @@
+#!/usr/bin/env python3
+# Migrate old SQLite taiko.db to MongoDB
+
+import sqlite3
+from pymongo import MongoClient
+
+client = MongoClient()
+#client.drop_database('taiko')
+db = client.taiko
+sqdb = sqlite3.connect('taiko.db')
+sqdb.row_factory = sqlite3.Row
+curs = sqdb.cursor()
+
+def migrate_songs():
+    curs.execute('select * from songs')
+    rows = curs.fetchall()
+
+    for row in rows:
+        song = {
+            'id': row['id'],
+            'title': row['title'],
+            'title_lang': {'ja': row['title']},
+            'subtitle': row['subtitle'],
+            'subtitle_lang': {'ja': row['subtitle']},
+            'courses': {'easy': None, 'normal': None, 'hard': None, 'oni': None, 'ura': None},
+            'enabled': True if row['enabled'] else False,
+            'category_id': row['category'],
+            'type': row['type'],
+            'offset': row['offset'],
+            'skin_id': row['skin_id'],
+            'preview': row['preview'],
+            'volume':  row['volume'],
+            'maker_id': row['maker_id'],
+            'hash': row['hash'],
+            'order': row['id']
+        }
+
+        for diff in ['easy', 'normal', 'hard', 'oni', 'ura']:
+            if row[diff]:
+                spl = row[diff].split(' ')
+                branch = False
+                if len(spl) > 1 and spl[1] == 'B':
+                    branch = True
+                
+                song['courses'][diff] = {'stars': int(spl[0]), 'branch': branch}
+        
+        if row['title_lang']:
+            langs = row['title_lang'].splitlines()
+            for lang in langs:
+                spl = lang.split(' ', 1)
+                if spl[0] in ['ja', 'en', 'cn', 'tw', 'ko']:
+                    song['title_lang'][spl[0]] = spl[1]
+                else:
+                    song['title_lang']['en'] = lang
+
+        if row['subtitle_lang']:
+            langs = row['subtitle_lang'].splitlines()
+            for lang in langs:
+                spl = lang.split(' ', 1)
+                if spl[0] in ['ja', 'en', 'cn', 'tw', 'ko']:
+                    song['subtitle_lang'][spl[0]] = spl[1]
+                else:
+                    song['subtitle_lang']['en'] = lang
+
+        db.songs.insert_one(song)
+
+def migrate_makers():
+    curs.execute('select * from makers')
+    rows = curs.fetchall()
+
+    for row in rows:
+        db.makers.insert_one({
+            'id': row['maker_id'],
+            'name': row['name'],
+            'url': row['url']
+        })
+
+def migrate_categories():
+    curs.execute('select * from categories')
+    rows = curs.fetchall()
+
+    for row in rows:
+        db.categories.insert_one({
+            'id': row['id'],
+            'title': row['title']
+        })
+
+def migrate_song_skins():
+    curs.execute('select * from song_skins')
+    rows = curs.fetchall()
+
+    for row in rows:
+        db.song_skins.insert_one({
+            'id': row['id'],
+            'name': row['name'],
+            'song': row['song'],
+            'stage': row['stage'],
+            'don': row['don']
+        })
+
+if __name__ == '__main__':
+    migrate_songs()
+    migrate_makers()
+    migrate_categories()
+    migrate_song_skins()

From 62aca02aab25804ca4941e3364f2050053eb8999 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Fri, 13 Mar 2020 03:19:26 +0000
Subject: [PATCH 03/41] bugfixes

---
 app.py                        |  3 ++-
 public/src/js/loader.js       |  2 +-
 public/src/js/scorestorage.js | 13 ++++++++++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/app.py b/app.py
index 569631f..781819d 100644
--- a/app.py
+++ b/app.py
@@ -25,6 +25,7 @@ except FileNotFoundError:
         fp.close()
 
 app.config['SESSION_TYPE'] = 'redis'
+app.config['SESSION_COOKIE_HTTPONLY'] = False
 app.cache = Cache(app, config={'CACHE_TYPE': 'redis'})
 sess = Session()
 sess.init_app(app)
@@ -354,7 +355,7 @@ def route_api_scores_get():
         })
 
     user = db.users.find_one({'username': username})
-    return jsonify({'scores': scores, 'username': user['username'], 'display_name': user['display_name']})
+    return jsonify({'status': 'ok', 'scores': scores, 'username': user['username'], 'display_name': user['display_name']})
 
 
 def make_preview(song_id, song_type, preview):
diff --git a/public/src/js/loader.js b/public/src/js/loader.js
index 30c1bd0..ac4e279 100644
--- a/public/src/js/loader.js
+++ b/public/src/js/loader.js
@@ -157,7 +157,7 @@ class Loader{
 			}))
 			
 			if(gameConfig._accounts){
-				var token = Cookies.get("token")
+				var token = Cookies.get("session")
 				if(token){
 					this.addPromise(this.ajax("/api/scores/get").then(response => {
 						response = JSON.parse(response)
diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index 55dfe02..330a639 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -51,13 +51,20 @@ class ScoreStorage{
 			}
 		}
 	}
+	prepareScores(scores){
+		var output = []
+		for (var k in scores) {
+			songs.push({'hash': k, 'score': scores[k]})
+		}
+		return output
+	}
 	save(localOnly){
 		for(var hash in this.scores){
 			this.writeString(hash)
 		}
 		this.write()
 		return this.sendToServer({
-			scores: this.scoreStrings,
+			scores: this.prepareScores(this.scoreStrings),
 			is_import: true
 		})
 	}
@@ -163,7 +170,7 @@ class ScoreStorage{
 			}
 			this.write()
 			this.sendToServer({
-				scores: this.scoreStrings,
+				scores: this.prepareScores(this.scoreStrings),
 				is_import: true
 			})
 		}
@@ -181,7 +188,7 @@ class ScoreStorage{
 					account.loggedIn = false
 					delete account.username
 					delete account.displayName
-					Cookies.remove("token")
+					Cookies.remove("session")
 					this.load()
 					pageEvents.send("logout")
 					return Promise.reject()

From 73b8da36abeddeb69f3456602642565edeecaa5d Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Fri, 13 Mar 2020 03:54:27 +0000
Subject: [PATCH 04/41] fix registration bug

---
 app.py                        | 2 +-
 public/src/js/scorestorage.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app.py b/app.py
index 781819d..663d1a6 100644
--- a/app.py
+++ b/app.py
@@ -339,7 +339,7 @@ def route_api_scores_save():
             'score': score['score']
         }}, upsert=True)
 
-    return jsonify({'success': True})
+    return jsonify({'status': 'ok'})
 
 
 @app.route('/api/scores/get')
diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index 330a639..dc37a80 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -54,7 +54,7 @@ class ScoreStorage{
 	prepareScores(scores){
 		var output = []
 		for (var k in scores) {
-			songs.push({'hash': k, 'score': scores[k]})
+			output.push({'hash': k, 'score': scores[k]})
 		}
 		return output
 	}

From 929471698f10cc84752e93be1f53301453a1c5a9 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Fri, 13 Mar 2020 04:04:45 +0000
Subject: [PATCH 05/41] fix individual score upload

---
 public/src/js/scorestorage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index dc37a80..e9db533 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -133,7 +133,7 @@ class ScoreStorage{
 		var obj = {}
 		obj[hash] = this.scoreStrings[hash]
 		this.sendToServer({
-			scores: obj
+			scores: this.prepareScores(obj)
 		}).catch(() => this.add.apply(this, arguments))
 	}
 	template(){

From ad62ac800c4202b8ce9b2c78a5d1a9fabcc4775e Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Fri, 13 Mar 2020 08:32:53 +0300
Subject: [PATCH 06/41] Some bug fixes

---
 app.py                        |  2 +-
 public/src/js/account.js      | 26 +++++++++++---------
 public/src/js/scorestorage.js |  9 ++++++-
 public/src/js/strings.js      | 44 ++++++++++++++++++++++++++++++---
 public/src/js/view.js         | 46 +++++++++++++++++------------------
 5 files changed, 86 insertions(+), 41 deletions(-)

diff --git a/app.py b/app.py
index 663d1a6..a51e90f 100644
--- a/app.py
+++ b/app.py
@@ -205,7 +205,7 @@ def route_api_register():
         return api_error('username_in_use')
 
     password = data.get('password', '').encode('utf-8')
-    if not 8 <= len(password) <= 5000:
+    if not 6 <= len(password) <= 5000:
         return api_error('invalid_password')
 
     salt = bcrypt.gensalt()
diff --git a/public/src/js/account.js b/public/src/js/account.js
index 35ea69d..8476d4a 100644
--- a/public/src/js/account.js
+++ b/public/src/js/account.js
@@ -256,7 +256,7 @@ class Account{
 			account.displayName = response.display_name
 			var loadScores = scores => {
 				scoreStorage.load(scores)
-				this.onEnd(false, true)
+				this.onEnd(false, true, true)
 				pageEvents.send("login", account.username)
 			}
 			if(this.mode === "login"){
@@ -267,7 +267,7 @@ class Account{
 				})
 			}else{
 				scoreStorage.save().catch(() => {}).finally(() => {
-					this.onEnd(false, true)
+					this.onEnd(false, true, true)
 					pageEvents.send("login", account.username)
 				})
 			}
@@ -294,7 +294,7 @@ class Account{
 		delete account.username
 		delete account.displayName
 		var loadScores = scores => {
-			Cookies.remove("token")
+			Cookies.remove("session")
 			scoreStorage.load()
 			this.onEnd(false, true)
 			pageEvents.send("logout")
@@ -341,7 +341,7 @@ class Account{
 				account.loggedIn = false
 				delete account.username
 				delete account.displayName
-				Cookies.remove("token")
+				Cookies.remove("session")
 				scoreStorage.load()
 				pageEvents.send("logout")
 				return Promise.resolve
@@ -351,6 +351,8 @@ class Account{
 		if(!noNameChange && newName !== account.displayName){
 			promises.push(this.request("account/display_name", {
 				display_name: newName
+			}).then(() => {
+				account.displayName = newName
 			}))
 		}
 		var error = false
@@ -368,7 +370,7 @@ class Account{
 			this.onEnd(false, true)
 		}, errorFunc).catch(errorFunc)
 	}
-	onEnd(event, noSound){
+	onEnd(event, noSound, noReset){
 		var touched = false
 		if(event){
 			if(event.type === "touchstart"){
@@ -381,7 +383,7 @@ class Account{
 		if(this.locked){
 			return
 		}
-		this.clean()
+		this.clean(false, noReset)
 		assets.sounds["se_don"].play()
 		setTimeout(() => {
 			new SongSelect(false, false, touched)
@@ -391,7 +393,7 @@ class Account{
 		this.lock(true)
 		return new Promise((resolve, reject) => {
 			var request = new XMLHttpRequest()
-			request.open(obj ? "POST" : "GET", "api/" + url)
+			request.open("POST", "api/" + url)
 			pageEvents.load(request).then(() => {
 				this.lock(false)
 				if(request.status !== 200){
@@ -433,7 +435,7 @@ class Account{
 			}
 		}
 	}
-	clean(eventsOnly){
+	clean(eventsOnly, noReset){
 		if(!eventsOnly){
 			cancelTouch = true
 			this.keyboard.clean()
@@ -447,8 +449,10 @@ class Account{
 			for(var i = 0; i < this.inputForms.length; i++){
 				pageEvents.remove(this.inputForms[i], ["keydown", "keyup", "keypress"])
 			}
-			this.accountPass.reset()
-			this.accountDel.reset()
+			if(!noReset){
+				this.accountPass.reset()
+				this.accountDel.reset()
+			}
 			delete this.displayname
 			delete this.accountPassButton
 			delete this.accountPass
@@ -460,7 +464,7 @@ class Account{
 			delete this.saveButton
 			delete this.inputForms
 		}else if(this.mode === "login" || this.mode === "register"){
-			if(!eventsOnly){
+			if(!eventsOnly && !noReset){
 				this.form.reset()
 			}
 			pageEvents.remove(this.form, "submit")
diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index e9db533..db919c6 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -9,7 +9,7 @@ class ScoreStorage{
 	load(strings){
 		this.scores = {}
 		if(strings){
-			this.scoreStrings = strings
+			this.scoreStrings = this.prepareStrings(strings)
 		}else if(account.loggedIn){
 			return
 		}else{
@@ -58,6 +58,13 @@ class ScoreStorage{
 		}
 		return output
 	}
+	prepareStrings(scores){
+		var output = {}
+		for(var k in scores){
+			output[scores[k].hash] = scores[k].score
+		}
+		return output
+	}
 	save(localOnly){
 		for(var hash in this.scores){
 			this.writeString(hash)
diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index 9a6c499..f4d0d75 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -202,7 +202,16 @@
 		logout: "ログアウト",
 		back: "もどる",
 		cancel: "Cancel",
-		save: "Save"
+		save: "Save",
+		displayName: "Displayed Name",
+		changePassword: "Change Password",
+		currentNewRepeat: [
+			"Current Password",
+			"New Password",
+			"Repeat New Password"
+		],
+		deleteAccount: "Delete Account",
+		verifyPassword: "Verify password to delete this account"
 	}
 	this.browserSupport = {
 		browserWarning: "サポートされていないブラウザを実行しています (%s)",
@@ -645,7 +654,16 @@ function StringsCn(){
 		logout: "登出",
 		back: "返回",
 		cancel: "Cancel",
-		save: "Save"
+		save: "Save",
+		displayName: "Displayed Name",
+		changePassword: "Change Password",
+		currentNewRepeat: [
+			"Current Password",
+			"New Password",
+			"Repeat New Password"
+		],
+		deleteAccount: "Delete Account",
+		verifyPassword: "Verify password to delete this account"
 	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
@@ -862,7 +880,16 @@ function StringsTw(){
 		logout: "登出",
 		back: "返回",
 		cancel: "Cancel",
-		save: "Save"
+		save: "Save",
+		displayName: "Displayed Name",
+		changePassword: "Change Password",
+		currentNewRepeat: [
+			"Current Password",
+			"New Password",
+			"Repeat New Password"
+		],
+		deleteAccount: "Delete Account",
+		verifyPassword: "Verify password to delete this account"
 	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
@@ -1079,7 +1106,16 @@ function StringsKo(){
 		logout: "로그 아웃",
 		back: "돌아간다",
 		cancel: "Cancel",
-		save: "Save"
+		save: "Save",
+		displayName: "Displayed Name",
+		changePassword: "Change Password",
+		currentNewRepeat: [
+			"Current Password",
+			"New Password",
+			"Repeat New Password"
+		],
+		deleteAccount: "Delete Account",
+		verifyPassword: "Verify password to delete this account"
 	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
diff --git a/public/src/js/view.js b/public/src/js/view.js
index a165b09..235b169 100644
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -394,31 +394,29 @@
 				h: 130
 			}
 			
-			if(this.multiplayer !== 2){
-				this.nameplateCache.get({
+			this.nameplateCache.get({
+				ctx: ctx,
+				x: 167,
+				y: this.multiplayer === 2 ? 565 : 160,
+				w: 219,
+				h: 53,
+				id: "1p",
+			}, ctx => {
+				if(this.multiplayer === 2){
+					var name = p2.name || strings.defaultName
+				}else{
+					var name = account.loggedIn ? account.displayName : strings.defaultName
+				}
+				this.draw.nameplate({
 					ctx: ctx,
-					x: 167,
-					y: 160,
-					w: 219,
-					h: 53,
-					id: "1p",
-				}, ctx => {
-					if(this.multiplayer === 2){
-						var name = p2.name || strings.defaultName
-					}else{
-						var name = account.loggedIn ? account.displayName : strings.defaultName
-					}
-					this.draw.nameplate({
-						ctx: ctx,
-						x: 3,
-						y: 3,
-						scale: 0.8,
-						name: name,
-						font: this.font,
-						blue: this.multiplayer === 2
-					})
+					x: 3,
+					y: 3,
+					scale: 0.8,
+					name: name,
+					font: this.font,
+					blue: this.multiplayer === 2
 				})
-			}
+			})
 			
 			ctx.fillStyle = "#000"
 			ctx.fillRect(
@@ -582,7 +580,7 @@
 			this.nameplateCache.get({
 				ctx: ctx,
 				x: 320,
-				y: this.multiplayer === 2 ? frameTop + 305 : frameTop + 20,
+				y: this.multiplayer === 2 ? 460 : 20,
 				w: 273,
 				h: 66,
 				id: "1p",

From 7f1bb9d3576221c266042f15fdba0b2a3be0a8bd Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Sat, 14 Mar 2020 07:50:04 +0300
Subject: [PATCH 07/41] Multiplayer improvements and reupload score on error

- In multiplayer you will play at the bottom if you joined second
- Add a dialog to song select that score has not been saved
- Uploads the score when logged in again
- Translate error messages from the server
---
 app.py                             |  28 ++--
 config.example.json                |   2 +-
 public/src/css/view.css            |   8 ++
 public/src/js/account.js           |  64 +++++----
 public/src/js/assets.js            |   1 -
 public/src/js/controller.js        |  12 +-
 public/src/js/game.js              |   2 +-
 public/src/js/lib/js.cookie.min.js |   2 -
 public/src/js/loader.js            |  29 ++--
 public/src/js/loadsong.js          |   4 +-
 public/src/js/p2.js                |  12 +-
 public/src/js/pageevents.js        |   2 +-
 public/src/js/scoresheet.js        | 111 +++++++++-------
 public/src/js/scorestorage.js      |  77 ++++++++---
 public/src/js/songselect.js        | 205 ++++++++++++++++++++++++++---
 public/src/js/strings.js           |  66 ++++++++++
 public/src/js/view.js              | 108 ++++++++-------
 public/src/js/viewassets.js        |   2 +-
 public/src/views/account.html      |   3 +-
 public/src/views/login.html        |   3 +-
 server.py                          |  13 +-
 21 files changed, 543 insertions(+), 211 deletions(-)
 delete mode 100644 public/src/js/lib/js.cookie.min.js

diff --git a/app.py b/app.py
index a51e90f..d7c18cf 100644
--- a/app.py
+++ b/app.py
@@ -190,15 +190,15 @@ def route_api_config():
 
 @app.route('/api/register', methods=['POST'])
 def route_api_register():
-    if session.get('username'):
-        return api_error('already_logged_in')
-
     data = request.get_json()
     if not schema.validate(data, schema.register):
         return abort(400)
 
+    if session.get('username'):
+        session.clear()
+
     username = data.get('username', '')
-    if len(username) > 20 or not re.match('^[a-zA-Z0-9_]{1,20}$', username):
+    if len(username) < 3 or len(username) > 20 or not re.match('^[a-zA-Z0-9_]{3,20}$', username):
         return api_error('invalid_username')
 
     if db.users.find_one({'username_lower': username.lower()}):
@@ -226,13 +226,13 @@ def route_api_register():
 
 @app.route('/api/login', methods=['POST'])
 def route_api_login():
-    if session.get('username'):
-        return api_error('already_logged_in')
-
     data = request.get_json()
     if not schema.validate(data, schema.login):
         return abort(400)
 
+    if session.get('username'):
+        session.clear()
+
     username = data.get('username', '')
     result = db.users.find_one({'username_lower': username.lower()})
     if not result:
@@ -263,15 +263,17 @@ def route_api_account_display_name():
     if not schema.validate(data, schema.update_display_name):
         return abort(400)
 
-    display_name = data.get('display_name', '')
-    if not display_name or len(display_name) > 20:
+    display_name = data.get('display_name', '').strip()
+    if not display_name:
+        display_name = session.get('username')
+    elif len(display_name) > 25:
         return api_error('invalid_display_name')
     
     db.users.update_one({'username': session.get('username')}, {
         '$set': {'display_name': display_name}
     })
 
-    return jsonify({'status': 'ok'})
+    return jsonify({'status': 'ok', 'display_name': display_name})
 
 
 @app.route('/api/account/password', methods=['POST'])
@@ -287,8 +289,8 @@ def route_api_account_password():
         return api_error('current_password_invalid')
     
     new_password = data.get('new_password', '').encode('utf-8')
-    if not 8 <= len(new_password) <= 5000:
-        return api_error('invalid_password')
+    if not 6 <= len(new_password) <= 5000:
+        return api_error('invalid_new_password')
     
     salt = bcrypt.gensalt()
     hashed = bcrypt.hashpw(new_password, salt)
@@ -310,7 +312,7 @@ def route_api_account_remove():
     user = db.users.find_one({'username': session.get('username')})
     password = data.get('password', '').encode('utf-8')
     if not bcrypt.checkpw(password, user['password']):
-        return api_error('current_password_invalid')
+        return api_error('verify_password_invalid')
 
     db.scores.delete_many({'username': session.get('username')})
     db.users.delete_one({'username': session.get('username')})
diff --git a/config.example.json b/config.example.json
index 9ec88e4..f81c1b7 100644
--- a/config.example.json
+++ b/config.example.json
@@ -2,5 +2,5 @@
     "songs_baseurl": "",
     "assets_baseurl": "",
     "email": "",
-    "_accounts": true
+    "accounts": true
 }
diff --git a/public/src/css/view.css b/public/src/css/view.css
index c1f254e..4696d02 100644
--- a/public/src/css/view.css
+++ b/public/src/css/view.css
@@ -368,3 +368,11 @@ kbd{
 .accountdel-form{
 	margin: 0.3em auto;
 }
+.view-content .error-div{
+	display: none;
+	width: 80%;
+	margin: 0 auto;
+	padding: 0.5em;
+	font-size: 1.1em;
+	color: #d00;
+}
diff --git a/public/src/js/account.js b/public/src/js/account.js
index 8476d4a..22757a7 100644
--- a/public/src/js/account.js
+++ b/public/src/js/account.js
@@ -35,6 +35,7 @@ class Account{
 		this.inputForms = []
 		this.shownDiv = ""
 		
+		this.errorDiv = this.getElement("error-div")
 		this.getElement("displayname-hint").innerText = strings.account.displayName
 		this.displayname = this.getElement("displayname")
 		this.displayname.placeholder = strings.account.displayName
@@ -116,6 +117,8 @@ class Account{
 		this.mode = register ? "register" : "login"
 		
 		this.setAltText(this.getElement("view-title"), strings.account[this.mode])
+		
+		this.errorDiv = this.getElement("error-div")
 		this.items = []
 		this.form = this.getElement("login-form")
 		this.getElement("username-hint").innerText = strings.account.username
@@ -239,14 +242,14 @@ class Account{
 			password: this.form.password.value
 		}
 		if(!obj.username || !obj.password){
-			alert(strings.account.cannotBeEmpty.replace("%s", strings.account[!obj.username ? "username" : "password"]))
+			this.error(strings.account.cannotBeEmpty.replace("%s", strings.account[!obj.username ? "username" : "password"]))
 			return
 		}
 		if(this.mode === "login"){
 			obj.remember = this.form.remember.checked
 		}else{
 			if(obj.password !== this.form.password2.value){
-				alert(strings.account.passwordsDoNotMatch)
+				this.error(strings.account.passwordsDoNotMatch)
 				return
 			}
 		}
@@ -260,7 +263,7 @@ class Account{
 				pageEvents.send("login", account.username)
 			}
 			if(this.mode === "login"){
-				this.request("scores/get").then(response => {
+				this.request("scores/get", false, true).then(response => {
 					loadScores(response.scores)
 				}, () => {
 					loadScores({})
@@ -273,9 +276,13 @@ class Account{
 			}
 		}, response => {
 			if(response && response.status === "error" && response.message){
-				alert(response.message)
+				if(response.message in strings.serverError){
+					this.error(strings.serverError[response.message])
+				}else{
+					this.error(response.message)
+				}
 			}else{
-				alert(strings.account.error)
+				this.error(strings.account.error)
 			}
 		})
 	}
@@ -293,17 +300,12 @@ class Account{
 		account.loggedIn = false
 		delete account.username
 		delete account.displayName
-		var loadScores = scores => {
-			Cookies.remove("session")
+		var loadScores = () => {
 			scoreStorage.load()
 			this.onEnd(false, true)
 			pageEvents.send("logout")
 		}
-		this.request("logout").then(response => {
-			loadScores()
-		}, () => {
-			loadScores()
-		})
+		this.request("logout").then(loadScores, loadScores)
 	}
 	onSave(event){
 		if(event){
@@ -316,6 +318,7 @@ class Account{
 		if(this.locked){
 			return
 		}
+		this.clearError()
 		var promises = []
 		var noNameChange = false
 		if(this.shownDiv === "pass"){
@@ -329,7 +332,7 @@ class Account{
 					new_password: passwords[1]
 				}))
 			}else{
-				alert(strings.account.passwordsDoNotMatch)
+				this.error(strings.account.newPasswordsDoNotMatch)
 				return
 			}
 		}
@@ -341,7 +344,6 @@ class Account{
 				account.loggedIn = false
 				delete account.username
 				delete account.displayName
-				Cookies.remove("session")
 				scoreStorage.load()
 				pageEvents.send("logout")
 				return Promise.resolve
@@ -351,8 +353,8 @@ class Account{
 		if(!noNameChange && newName !== account.displayName){
 			promises.push(this.request("account/display_name", {
 				display_name: newName
-			}).then(() => {
-				account.displayName = newName
+			}).then(response => {
+				account.displayName = response.display_name
 			}))
 		}
 		var error = false
@@ -361,9 +363,13 @@ class Account{
 				return
 			}
 			if(response && response.message){
-				alert(response.message)
+				if(response.message in strings.serverError){
+					this.error(strings.serverError[response.message])
+				}else{
+					this.error(response.message)
+				}
 			}else{
-				alert(strings.account.error)
+				this.error(strings.account.error)
 			}
 		}
 		Promise.all(promises).then(() => {
@@ -389,11 +395,11 @@ class Account{
 			new SongSelect(false, false, touched)
 		}, 500)
 	}
-	request(url, obj){
+	request(url, obj, get){
 		this.lock(true)
 		return new Promise((resolve, reject) => {
 			var request = new XMLHttpRequest()
-			request.open("POST", "api/" + url)
+			request.open(get ? "GET" : "POST", "api/" + url)
 			pageEvents.load(request).then(() => {
 				this.lock(false)
 				if(request.status !== 200){
@@ -435,6 +441,14 @@ class Account{
 			}
 		}
 	}
+	error(text){
+		this.errorDiv.innerText = text
+		this.errorDiv.style.display = "block"
+	}
+	clearError(){
+		this.errorDiv.innerText = ""
+		this.errorDiv.style.display = ""
+	}
 	clean(eventsOnly, noReset){
 		if(!eventsOnly){
 			cancelTouch = true
@@ -442,6 +456,10 @@ class Account{
 			this.gamepad.clean()
 		}
 		if(this.mode === "account"){
+			if(!noReset){
+				this.accountPass.reset()
+				this.accountDel.reset()
+			}
 			pageEvents.remove(this.accounPassButton, ["click", "touchstart"])
 			pageEvents.remove(this.accountDelButton, ["click", "touchstart"])
 			pageEvents.remove(this.logoutButton, ["mousedown", "touchstart"])
@@ -449,10 +467,7 @@ class Account{
 			for(var i = 0; i < this.inputForms.length; i++){
 				pageEvents.remove(this.inputForms[i], ["keydown", "keyup", "keypress"])
 			}
-			if(!noReset){
-				this.accountPass.reset()
-				this.accountDel.reset()
-			}
+			delete this.errorDiv
 			delete this.displayname
 			delete this.accountPassButton
 			delete this.accountPass
@@ -473,6 +488,7 @@ class Account{
 			for(var i = 0; i < this.form.length; i++){
 				pageEvents.remove(this.registerButton, ["keydown", "keyup", "keypress"])
 			}
+			delete this.errorDiv
 			delete this.form
 			delete this.password2
 			delete this.remember
diff --git a/public/src/js/assets.js b/public/src/js/assets.js
index f7e3ee7..220e6d5 100644
--- a/public/src/js/assets.js
+++ b/public/src/js/assets.js
@@ -1,7 +1,6 @@
 var assets = {
 	"js": [
 		"lib/md5.min.js",
-		"lib/js.cookie.min.js",
 		"loadsong.js",
 		"parseosu.js",
 		"titlescreen.js",
diff --git a/public/src/js/controller.js b/public/src/js/controller.js
index 583ffd3..9b06aa1 100644
--- a/public/src/js/controller.js
+++ b/public/src/js/controller.js
@@ -155,10 +155,16 @@ class Controller{
 		if(this.mainLoopRunning){
 			if(this.multiplayer !== 2){
 				requestAnimationFrame(() => {
-					this.viewLoop()
+					var player = this.multiplayer ? p2.player : 1
+					if(player === 1){
+						this.viewLoop()
+					}
 					if(this.multiplayer === 1){
 						this.syncWith.viewLoop()
 					}
+					if(player === 2){
+						this.viewLoop()
+					}
 					if(this.scoresheet){
 						if(this.view.ctx){
 							this.view.ctx.save()
@@ -197,14 +203,14 @@ class Controller{
 	displayScore(score, notPlayed, bigNote){
 		this.view.displayScore(score, notPlayed, bigNote)
 	}
-	songSelection(fadeIn){
+	songSelection(fadeIn, scoreSaveFailed){
 		if(!fadeIn){
 			this.clean()
 		}
 		if(this.calibrationMode){
 			new SettingsView(this.touchEnabled, false, null, "latency")
 		}else{
-			new SongSelect(false, fadeIn, this.touchEnabled)
+			new SongSelect(false, fadeIn, this.touchEnabled, null, scoreSaveFailed)
 		}
 	}
 	restartSong(){
diff --git a/public/src/js/game.js b/public/src/js/game.js
index da9534e..e03e1f5 100644
--- a/public/src/js/game.js
+++ b/public/src/js/game.js
@@ -506,7 +506,7 @@ class Game{
 			if(this.musicFadeOut === 0){
 				if(this.controller.multiplayer === 1){
 					var obj = this.getGlobalScore()
-					obj.name = account.loggedIn ? account.displayName : strings.defaultName
+					obj.name = account.loggedIn ? account.displayName : null
 					p2.send("gameresults", obj)
 				}
 				this.musicFadeOut++
diff --git a/public/src/js/lib/js.cookie.min.js b/public/src/js/lib/js.cookie.min.js
deleted file mode 100644
index a0e6820..0000000
--- a/public/src/js/lib/js.cookie.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! js-cookie v3.0.0-rc.0 | MIT */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self,function(){var r=e.Cookies,n=e.Cookies=t();n.noConflict=function(){return e.Cookies=r,n}}())}(this,function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)e[n]=r[n]}return e}var t={read:function(e){return e.replace(/%3B/g,";")},write:function(e){return e.replace(/;/g,"%3B")}};return function r(n,i){function o(r,o,u){if("undefined"!=typeof document){"number"==typeof(u=e({},i,u)).expires&&(u.expires=new Date(Date.now()+864e5*u.expires)),u.expires&&(u.expires=u.expires.toUTCString()),r=t.write(r).replace(/=/g,"%3D"),o=n.write(String(o),r);var c="";for(var f in u)u[f]&&(c+="; "+f,!0!==u[f]&&(c+="="+u[f].split(";")[0]));return document.cookie=r+"="+o+c}}return Object.create({set:o,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var r=document.cookie?document.cookie.split("; "):[],i={},o=0;o<r.length;o++){var u=r[o].split("="),c=u.slice(1).join("="),f=t.read(u[0]).replace(/%3D/g,"=");if(i[f]=n.read(c,f),e===f)break}return e?i[e]:i}},remove:function(t,r){o(t,"",e({},r,{expires:-1}))},withAttributes:function(t){return r(this.converter,e({},this.attributes,t))},withConverter:function(t){return r(e({},this.converter,t),this.attributes)}},{attributes:{value:Object.freeze(i)},converter:{value:Object.freeze(n)}})}(t,{path:"/"})});
diff --git a/public/src/js/loader.js b/public/src/js/loader.js
index ac4e279..6ca9d0e 100644
--- a/public/src/js/loader.js
+++ b/public/src/js/loader.js
@@ -109,7 +109,7 @@ class Loader{
 			assets.audioMusic.length +
 			assets.audioSfxLR.length +
 			assets.audioSfxLoud.length +
-			(gameConfig._accounts ? 1 : 0)
+			(gameConfig.accounts ? 1 : 0)
 		
 		Promise.all(this.promises).then(() => {
 			
@@ -156,22 +156,17 @@ class Loader{
 				}
 			}))
 			
-			if(gameConfig._accounts){
-				var token = Cookies.get("session")
-				if(token){
-					this.addPromise(this.ajax("/api/scores/get").then(response => {
-						response = JSON.parse(response)
-						if(response.status === "ok"){
-							account.loggedIn = true
-							account.username = response.username
-							account.displayName = response.display_name
-							scoreStorage.load(response.scores)
-							pageEvents.send("login", account.username)
-						}
-					}))
-				}else{
-					this.assetLoaded()
-				}
+			if(gameConfig.accounts){
+				this.addPromise(this.ajax("/api/scores/get").then(response => {
+					response = JSON.parse(response)
+					if(response.status === "ok"){
+						account.loggedIn = true
+						account.username = response.username
+						account.displayName = response.display_name
+						scoreStorage.load(response.scores)
+						pageEvents.send("login", account.username)
+					}
+				}))
 			}
 			
 			settings = new Settings()
diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js
index 3e5b460..4b42555 100644
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -264,14 +264,14 @@ class LoadSong{
 				if(event.type === "gameload"){
 					this.cancelButton.style.display = ""
 					
-					if(event.value === song.difficulty){
+					if(event.value.diff === song.difficulty){
 						this.startMultiplayer()
 					}else{
 						this.selectedSong2 = {}
 						for(var i in this.selectedSong){
 							this.selectedSong2[i] = this.selectedSong[i]
 						}
-						this.selectedSong2.difficulty = event.value
+						this.selectedSong2.difficulty = event.value.diff
 						if(song.type === "tja"){
 							this.startMultiplayer()
 						}else{
diff --git a/public/src/js/p2.js b/public/src/js/p2.js
index 0857381..127b622 100644
--- a/public/src/js/p2.js
+++ b/public/src/js/p2.js
@@ -4,6 +4,7 @@ class P2Connection{
 		this.lastMessages = {}
 		this.otherConnected = false
 		this.name = null
+		this.player = 1
 		this.allEvents = new Map()
 		this.addEventListener("message", this.message.bind(this))
 		this.currentHash = ""
@@ -103,6 +104,10 @@ class P2Connection{
 	}
 	message(response){
 		switch(response.type){
+			case "gameload":
+				if("player" in response.value){
+					this.player = response.value.player === 2 ? 2 : 1
+				}
 			case "gamestart":
 				this.otherConnected = true
 				this.notes = []
@@ -129,7 +134,7 @@ class P2Connection{
 			case "gameresults":
 				this.results = {}
 				for(var i in response.value){
-					this.results[i] = response.value[i].toString()
+					this.results[i] = response.value[i] === null ? null : response.value[i].toString()
 				}
 				break
 			case "note":
@@ -152,9 +157,12 @@ class P2Connection{
 				this.clearMessage("users")
 				this.otherConnected = true
 				this.session = true
+				if("player" in response.value){
+					this.player = response.value.player === 2 ? 2 : 1
+				}
 				break
 			case "name":
-				this.name = (response.value || "").toString() || null
+				this.name = response.value ? response.value.toString() : response.value
 				break
 		}
 	}
diff --git a/public/src/js/pageevents.js b/public/src/js/pageevents.js
index 46c0a12..7779a24 100644
--- a/public/src/js/pageevents.js
+++ b/public/src/js/pageevents.js
@@ -86,7 +86,7 @@ class PageEvents{
 		})
 	}
 	keyEvent(event){
-		if(!("key" in event)){
+		if(!("key" in event) || event.ctrlKey && (event.key === "c" || event.key === "x" || event.key === "v")){
 			return
 		}
 		if(this.kbd.indexOf(event.key.toLowerCase()) !== -1){
diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js
index a2a62c4..265414e 100644
--- a/public/src/js/scoresheet.js
+++ b/public/src/js/scoresheet.js
@@ -2,9 +2,19 @@ class Scoresheet{
 	constructor(controller, results, multiplayer, touchEnabled){
 		this.controller = controller
 		this.resultsObj = results
-		this.results = {}
+		this.player = [multiplayer ? (p2.player === 1 ? 0 : 1) : 0]
+		var player0 = this.player[0]
+		this.results = []
+		this.results[player0] = {}
+		this.rules = []
+		this.rules[player0] = this.controller.game.rules
+		if(multiplayer){
+			this.player.push(p2.player === 2 ? 0 : 1)
+			this.results[this.player[1]] = p2.results
+			this.rules[this.player[1]] = this.controller.syncWith.game.rules
+		}
 		for(var i in results){
-			this.results[i] = results[i].toString()
+			this.results[player0][i] = results[i] === null ? null : results[i].toString()
 		}
 		this.multiplayer = multiplayer
 		this.touchEnabled = touchEnabled
@@ -248,7 +258,7 @@ class Scoresheet{
 		var frameTop = winH / 2 - 720 / 2
 		var frameLeft = winW / 2 - 1280 / 2
 		
-		var players = this.multiplayer && p2.results ? 2 : 1
+		var players = this.multiplayer ? 2 : 1
 		var p2Offset = 298
 		
 		var bgOffset = 0
@@ -331,28 +341,21 @@ class Scoresheet{
 		}
 		
 		var rules = this.controller.game.rules
-		var gaugePercent = rules.gaugePercent(this.results.gauge)
-		var gaugeClear = [rules.gaugeClear]
-		if(players === 2){
-			gaugeClear.push(this.controller.syncWith.game.rules.gaugeClear)
-		}
-		var failedOffset = gaugePercent >= gaugeClear[0] ? 0 : -2000
-		if(players === 2){
-			var gauge2 = this.controller.syncWith.game.rules.gaugePercent(p2.results.gauge)
-			if(gauge2 > gaugePercent && failedOffset !== 0 && gauge2 >= gaugeClear[1]){
+		var failedOffset = rules.clearReached(this.results[this.player[0]].gauge) ? 0 : -2000
+		if(players === 2 && failedOffset !== 0){
+			var p2results = this.results[this.player[1]]
+			if(p2results && this.controller.syncWith.game.rules.clearReached(p2results.gauge)){
 				failedOffset = 0
 			}
 		}
 		if(elapsed >= 3100 + failedOffset){
 			for(var p = 0; p < players; p++){
 				ctx.save()
-				var results = this.results
-				if(p === 1){
-					results = p2.results
+				var results = this.results[p]
+				if(!results){
+					continue
 				}
-				var playerRules = p === 0 ? rules : this.controller.syncWith.game.rules
-				var resultGauge = playerRules.gaugePercent(results.gauge)
-				var clear = resultGauge >= gaugeClear[p]
+				var clear = this.rules[p].clearReached(results.gauge)
 				if(p === 1 || !this.multiplayer && clear){
 					ctx.translate(0, 290)
 				}
@@ -415,7 +418,7 @@ class Scoresheet{
 					
 					this.draw.layeredText({
 						ctx: ctx,
-						text: this.results.title,
+						text: this.results[this.player[0]].title,
 						fontSize: 40,
 						fontFamily: this.font,
 						x: 1257,
@@ -431,9 +434,11 @@ class Scoresheet{
 				
 				ctx.save()
 				for(var p = 0; p < players; p++){
-					var results = this.results
+					var results = this.results[p]
+					if(!results){
+						continue
+					}
 					if(p === 1){
-						results = p2.results
 						ctx.translate(0, p2Offset)
 					}
 					
@@ -455,10 +460,11 @@ class Scoresheet{
 					ctx.fillText(text, 395, 308)
 					ctx.miterLimit = 10
 					
-					if(p === 0){
-						var name = account.loggedIn ? account.displayName : strings.defaultName
+					var defaultName = p === 0 ? strings.defaultName : strings.default2PName
+					if(p === this.player[0]){
+						var name = account.loggedIn ? account.displayName : defaultName
 					}else{
-						var name = results.name
+						var name = results.name || defaultName
 					}
 					this.nameplateCache.get({
 						ctx: ctx,
@@ -466,7 +472,7 @@ class Scoresheet{
 						y: 92,
 						w: 273,
 						h: 66,
-						id: p.toString() + "p",
+						id: p.toString() + "p" + name,
 					}, ctx => {
 						this.draw.nameplate({
 							ctx: ctx,
@@ -609,7 +615,7 @@ class Scoresheet{
 					if(this.tetsuoHanaClass){
 						this.tetsuoHana.classList.remove(this.tetsuoHanaClass)
 					}
-					this.tetsuoHanaClass = rules.clearReached(this.results.gauge) ? "dance" : "failed"
+					this.tetsuoHanaClass = this.rules[this.player[0]].clearReached(this.results[this.player[0]].gauge) ? "dance" : "failed"
 					this.tetsuoHana.classList.add(this.tetsuoHanaClass)
 				}
 			}
@@ -623,32 +629,32 @@ class Scoresheet{
 				ctx.translate(frameLeft, frameTop)
 				
 				for(var p = 0; p < players; p++){
-					var results = this.results
+					var results = this.results[p]
+					if(!results){
+						continue
+					}
 					if(p === 1){
-						results = p2.results
 						ctx.translate(0, p2Offset)
 					}
-					var gaugePercent = rules.gaugePercent(results.gauge)
 					var w = 712
 					this.draw.gauge({
 						ctx: ctx,
 						x: 558 + w,
 						y: p === 1 ? 124 : 116,
-						clear: gaugeClear[p],
-						percentage: gaugePercent,
+						clear: this.rules[p].gaugeClear,
+						percentage: this.rules[p].gaugePercent(results.gauge),
 						font: this.font,
 						scale: w / 788,
 						scoresheet: true,
 						blue: p === 1,
 						multiplayer: p === 1
 					})
-					var playerRules = p === 0 ? rules : this.controller.syncWith.game.rules
 					this.draw.soul({
 						ctx: ctx,
 						x: 1215,
 						y: 144,
 						scale: 36 / 42,
-						cleared: playerRules.clearReached(results.gauge)
+						cleared: this.rules[p].clearReached(results.gauge)
 					})
 				}
 			})
@@ -661,13 +667,12 @@ class Scoresheet{
 			var noCrownResultWait = -2000;
 
 			for(var p = 0; p < players; p++){
-				var results = this.results
-				if(p === 1){
-					results = p2.results
+				var results = this.results[p]
+				if(!results){
+					continue
 				}
 				var crownType = null
-				var playerRules = p === 0 ? rules : this.controller.syncWith.game.rules
-				if(playerRules.clearReached(results.gauge)){
+				if(this.rules[p].clearReached(results.gauge)){
 					crownType = results.bad === "0" ? "gold" : "silver"
 				}
 				if(crownType !== null){
@@ -730,7 +735,10 @@ class Scoresheet{
 				var times = {}
 				var lastTime = 0
 				for(var p = 0; p < players; p++){
-					var results = p === 0 ? this.results : p2.results
+					var results = this.results[p]
+					if(!results){
+						continue
+					}
 					var currentTime = 3100 + noCrownResultWait + results.points.length * 30 * this.frame
 					if(currentTime > lastTime){
 						lastTime = currentTime
@@ -739,7 +747,10 @@ class Scoresheet{
 				for(var i in printNumbers){
 					var largestTime = 0
 					for(var p = 0; p < players; p++){
-						var results = p === 0 ? this.results : p2.results
+						var results = this.results[p]
+						if(!results){
+							continue
+						}
 						times[printNumbers[i]] = lastTime + 500
 						var currentTime = lastTime + 500 + results[printNumbers[i]].length * 30 * this.frame
 						if(currentTime > largestTime){
@@ -755,9 +766,11 @@ class Scoresheet{
 			}
 			
 			for(var p = 0; p < players; p++){
-				var results = this.results
+				var results = this.results[p]
+				if(!results){
+					continue
+				}
 				if(p === 1){
-					results = p2.results
 					ctx.translate(0, p2Offset)
 				}
 				ctx.save()
@@ -851,7 +864,7 @@ class Scoresheet{
 			
 			if(elapsed >= 1000){
 				this.clean()
-				this.controller.songSelection(true)
+				this.controller.songSelection(true, this.scoreSaveFailed)
 			}
 		}
 		
@@ -918,10 +931,14 @@ class Scoresheet{
 				delete this.resultsObj.title
 				delete this.resultsObj.difficulty
 				delete this.resultsObj.gauge
-				scoreStorage.add(hash, difficulty, this.resultsObj, true, title)
+				scoreStorage.add(hash, difficulty, this.resultsObj, true, title).catch(() => {
+					this.scoreSaveFailed = true
+				})
 			}else if(oldScore && (crown === "gold" && oldScore.crown !== "gold" || crown && !oldScore.crown)){
 				oldScore.crown = crown
-				scoreStorage.add(hash, difficulty, oldScore, true, title)
+				scoreStorage.add(hash, difficulty, oldScore, true, title).catch(() => {
+					this.scoreSaveFailed = true
+				})
 			}
 		}
 		this.scoreSaved = true
@@ -936,7 +953,7 @@ class Scoresheet{
 		snd.buffer.loadSettings()
 		this.redrawRunning = false
 		pageEvents.remove(this.canvas, ["mousedown", "touchstart"])
-		if(this.multiplayer !== 2 && this.touchEnabled){
+		if(this.touchEnabled){
 			pageEvents.remove(document.getElementById("touch-full-btn"), "touchend")
 		}
 		if(this.session){
@@ -948,5 +965,7 @@ class Scoresheet{
 		delete this.ctx
 		delete this.canvas
 		delete this.fadeScreen
+		delete this.results
+		delete this.rules
 	}
 }
diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index db919c6..db6dd2b 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -6,23 +6,30 @@ class ScoreStorage{
 		this.scoreKeys = ["points", "good", "ok", "bad", "maxCombo", "drumroll"]
 		this.crownValue = ["", "silver", "gold"]
 	}
-	load(strings){
-		this.scores = {}
-		if(strings){
-			this.scoreStrings = this.prepareStrings(strings)
+	load(strings, loadFailed){
+		var scores = {}
+		var scoreStrings = {}
+		if(loadFailed){
+			try{
+				var localScores = localStorage.getItem("saveFailed")
+				if(localScores){
+					scoreStrings = JSON.parse(localScores)
+				}
+			}catch(e){}
+		}else if(strings){
+			scoreStrings = this.prepareStrings(strings)
 		}else if(account.loggedIn){
 			return
 		}else{
-			this.scoreStrings = {}
 			try{
 				var localScores = localStorage.getItem("scoreStorage")
 				if(localScores){
-					this.scoreStrings = JSON.parse(localScores)
+					scoreStrings = JSON.parse(localScores)
 				}
 			}catch(e){}
 		}
-		for(var hash in this.scoreStrings){
-			var scoreString = this.scoreStrings[hash]
+		for(var hash in scoreStrings){
+			var scoreString = scoreStrings[hash]
 			var songAdded = false
 			if(typeof scoreString === "string" && scoreString){
 				var diffArray = scoreString.split(";")
@@ -42,14 +49,32 @@ class ScoreStorage{
 							score[name] = value
 						}
 						if(!songAdded){
-							this.scores[hash] = {title: null}
+							scores[hash] = {title: null}
 							songAdded = true
 						}
-						this.scores[hash][this.difficulty[i]] = score
+						scores[hash][this.difficulty[i]] = score
 					}
 				}
 			}
 		}
+		if(loadFailed){
+			for(var hash in scores){
+				for(var i in this.difficulty){
+					var diff = this.difficulty[i]
+					if(scores[hash][diff]){
+						this.add(hash, diff, scores[hash][diff], true, this.songTitles[hash] || null).then(() => {
+							localStorage.removeItem("saveFailed")
+						}, () => {})
+					}
+				}
+			}
+		}else{
+			this.scores = scores
+			this.scoreStrings = scoreStrings
+		}
+		if(strings){
+			this.load(false, true)
+		}
 	}
 	prepareScores(scores){
 		var output = []
@@ -126,7 +151,7 @@ class ScoreStorage{
 			}
 		}
 	}
-	add(song, difficulty, scoreObject, isHash, setTitle){
+	add(song, difficulty, scoreObject, isHash, setTitle, saveFailed){
 		var hash = isHash ? song : this.titleHash(song)
 		if(!(hash in this.scores)){
 			this.scores[hash] = {}
@@ -137,11 +162,29 @@ class ScoreStorage{
 		this.scores[hash][difficulty] = scoreObject
 		this.writeString(hash)
 		this.write()
-		var obj = {}
-		obj[hash] = this.scoreStrings[hash]
-		this.sendToServer({
-			scores: this.prepareScores(obj)
-		}).catch(() => this.add.apply(this, arguments))
+		if(saveFailed){
+			var failedScores = {}
+			try{
+				var localScores = localStorage.getItem("saveFailed")
+				if(localScores){
+					failedScores = JSON.parse(localScores)
+				}
+			}catch(e){}
+			if(!(hash in failedScores)){
+				failedScores[hash] = {}
+			}
+			failedScores[hash] = this.scoreStrings[hash]
+			try{
+				localStorage.setItem("saveFailed", JSON.stringify(failedScores))
+			}catch(e){}
+			return Promise.reject()
+		}else{
+			var obj = {}
+			obj[hash] = this.scoreStrings[hash]
+			return this.sendToServer({
+				scores: this.prepareScores(obj)
+			}).catch(() => this.add(song, difficulty, scoreObject, isHash, setTitle, true))
+		}
 	}
 	template(){
 		var template = {crown: ""}
@@ -192,10 +235,10 @@ class ScoreStorage{
 				}
 			}).catch(() => {
 				if(retry){
+					this.scoreSaveFailed = true
 					account.loggedIn = false
 					delete account.username
 					delete account.displayName
-					Cookies.remove("session")
 					this.load()
 					pageEvents.send("logout")
 					return Promise.reject()
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 64b65de..0ae5b14 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -1,5 +1,5 @@
 class SongSelect{
-	constructor(fromTutorial, fadeIn, touchEnabled, songId){
+	constructor(fromTutorial, fadeIn, touchEnabled, songId, scoreSaveFailed){
 		this.touchEnabled = touchEnabled
 		
 		loader.changePage("songselect", false)
@@ -167,6 +167,9 @@ class SongSelect{
 				category: strings.random
 			})
 		}
+		if(scoreSaveFailed){
+			scoreStorage.scoreSaveFailed = true
+		}
 		this.songs.push({
 			title: strings.aboutSimulator,
 			skin: this.songSkin.about,
@@ -379,7 +382,12 @@ class SongSelect{
 			return
 		}
 		var shift = event ? event.shiftKey : this.pressedKeys["shift"]
-		if(this.state.screen === "song"){
+		if(this.state.scoreSaveFailed){
+			if(name === "confirm"){
+				this.playSound("se_don")
+				this.state.scoreSaveFailed = false
+			}
+		}else if(this.state.screen === "song"){
 			if(name === "confirm"){
 				this.toSelectDifficulty()
 			}else if(name === "back"){
@@ -453,10 +461,15 @@ class SongSelect{
 			var ctrl = false
 			var touch = true
 		}
-		if(this.state.screen === "song"){
+		if(this.state.scoreSaveFailed){
+			if(408 < mouse.x && mouse.x < 872 && 470 < mouse.y && mouse.y < 550){
+				this.playSound("se_don")
+				this.state.scoreSaveFailed = false
+			}
+		}else if(this.state.screen === "song"){
 			if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
 				this.categoryJump(mouse.x < 640 ? -1 : 1)
-			}else if(!p2.session && 60 < mouse.x && mouse.x < 332 && 640 < mouse.y && mouse.y < 706 && gameConfig._accounts){
+			}else if(!p2.session && 60 < mouse.x && mouse.x < 332 && 640 < mouse.y && mouse.y < 706 && gameConfig.accounts){
 				this.toAccount()
 			}else if(p2.session && 438 < mouse.x && mouse.x < 834 && mouse.y > 603){
 				this.toSession()
@@ -508,10 +521,14 @@ class SongSelect{
 	mouseMove(event){
 		var mouse = this.mouseOffset(event.offsetX, event.offsetY)
 		var moveTo = null
-		if(this.state.screen === "song"){
+		if(this.state.scoreSaveFailed){
+			if(408 < mouse.x && mouse.x < 872 && 470 < mouse.y && mouse.y < 550){
+				moveTo = "scoreSaveFailed"
+			}
+		}else if(this.state.screen === "song"){
 			if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
 				moveTo = mouse.x < 640 ? "categoryPrev" : "categoryNext"
-			}else if(!p2.session && 60 < mouse.x && mouse.x < 332 && 640 < mouse.y && mouse.y < 706 && gameConfig._accounts){
+			}else if(!p2.session && 60 < mouse.x && mouse.x < 332 && 640 < mouse.y && mouse.y < 706 && gameConfig.accounts){
 				moveTo = "account"
 			}else if(p2.session && 438 < mouse.x && mouse.x < 834 && mouse.y > 603){
 				moveTo = "session"
@@ -831,6 +848,7 @@ class SongSelect{
 		}
 		if(p2.session){
 			p2.send("gameend")
+			this.state.moveHover = null
 		}else{
 			localStorage["selectedSong"] = this.selectedSong
 
@@ -992,12 +1010,22 @@ class SongSelect{
 			}else{
 				this.state.moveMS = ms - this.songSelecting.speed * this.songSelecting.resize + (ms - this.state.screenMS - 1000)
 			}
-			if(ms > this.state.screenMS + 500){
+			if(screen === "titleFadeIn" && ms > this.state.screenMS + 500){
 				this.state.screen = "title"
 				screen = "title"
 			}
 		}
 		
+		if(screen === "song" && scoreStorage.scoreSaveFailed && !p2.session){
+			if(this.bgmEnabled){
+				this.playBgm(false)
+			}
+			scoreStorage.scoreSaveFailed = false
+			this.state.scoreSaveFailed = true
+			this.state.locked = true
+			this.playSound("se_pause")
+		}
+		
 		if(screen === "song"){
 			if(this.songs[this.selectedSong].courses){
 				selectedWidth = this.songAsset.selectedWidth
@@ -1441,7 +1469,8 @@ class SongSelect{
 									ctx: ctx,
 									font: this.font,
 									x: _x,
-									y: _y - 45
+									y: _y - 45,
+									two: p2.session && p2.player === 2
 								})
 							}
 						}
@@ -1579,15 +1608,15 @@ class SongSelect{
 						if(this.selectedDiff === 4 + this.diffOptions.length){
 							currentDiff = 3
 						}
-						if(i === currentSong.p2Cursor && p2.socket.readyState === 1){
+						if(songSel && i === currentSong.p2Cursor && p2.socket.readyState === 1){
 							this.draw.diffCursor({
 								ctx: ctx,
 								font: this.font,
 								x: _x,
-								y: _y - (songSel ? 45 : 65),
-								two: true,
-								side: songSel ? false : (currentSong.p2Cursor === currentDiff),
-								scale: songSel ? 0.7 : 1
+								y: _y - 45,
+								two: !p2.session || p2.player === 1,
+								side: false,
+								scale: 0.7
 							})
 						}
 						if(!songSel){
@@ -1603,7 +1632,8 @@ class SongSelect{
 									font: this.font,
 									x: _x,
 									y: _y - 65,
-									side: currentSong.p2Cursor === currentDiff && p2.socket.readyState === 1
+									side: currentSong.p2Cursor === currentDiff && p2.socket.readyState === 1,
+									two: p2.session && p2.player === 2
 								})
 							}
 							if(highlight){
@@ -1644,6 +1674,22 @@ class SongSelect{
 						drawDifficulty(ctx, i, currentUra)
 					}
 				}
+				for(var i = 0; currentSong.courses && i < 4; i++){
+					if(!songSel && i === currentSong.p2Cursor && p2.socket.readyState === 1){
+						var _x = x + 402 + i * 100
+						var _y = y + 87
+						var currentDiff = this.selectedDiff - this.diffOptions.length
+						this.draw.diffCursor({
+							ctx: ctx,
+							font: this.font,
+							x: _x,
+							y: _y - 65,
+							two: !p2.session || p2.player === 1,
+							side: currentSong.p2Cursor === currentDiff,
+							scale: 1
+						})
+					}
+				}
 				
 				var borders = (this.songAsset.border + this.songAsset.innerBorder) * 2
 				var textW = this.songAsset.width - borders
@@ -1900,20 +1946,27 @@ class SongSelect{
 		ctx.lineTo(x + w - 4, y + 4)
 		ctx.fill()
 		
+		if(!p2.session || p2.player === 1){
+			var name = account.loggedIn ? account.displayName : strings.defaultName
+			var rank = account.loggedIn || !gameConfig.accounts || p2.session ? false : strings.notLoggedIn
+		}else{
+			var name = p2.name || strings.defaultName
+			var rank = false
+		}
 		this.nameplateCache.get({
 			ctx: ctx,
 			x: frameLeft + 60,
 			y: frameTop + 640,
 			w: 273,
 			h: 66,
-			id: "1p",
+			id: "1p" + name + "\n" + rank,
 		}, ctx => {
 			this.draw.nameplate({
 				ctx: ctx,
 				x: 3,
 				y: 3,
-				name: account.loggedIn ? account.displayName : strings.defaultName,
-				rank: account.loggedIn || !gameConfig._accounts || p2.session ? false : strings.notLoggedIn,
+				name: name,
+				rank: rank,
 				font: this.font
 			})
 		})
@@ -2049,25 +2102,131 @@ class SongSelect{
 			}
 		}
 		if(p2.session){
+			if(p2.player === 1){
+				var name = p2.name || strings.default2PName
+			}else{
+				var name = account.loggedIn ? account.displayName : strings.default2PName
+			}
 			this.nameplateCache.get({
 				ctx: ctx,
 				x: frameLeft + 949,
 				y: frameTop + 640,
 				w: 273,
 				h: 66,
-				id: "2p",
+				id: "2p" + name,
 			}, ctx => {
 				this.draw.nameplate({
 					ctx: ctx,
 					x: 3,
 					y: 3,
-					name: p2.name,
+					name: name,
 					font: this.font,
 					blue: true
 				})
 			})
 		}
 		
+		if(this.state.scoreSaveFailed){
+			if(this.preview){
+				this.endPreview()
+			}
+			ctx.fillStyle = "rgba(0, 0, 0, 0.5)"
+			ctx.fillRect(0, 0, winW, winH)
+			
+			ctx.save()
+			ctx.translate(frameLeft, frameTop)
+			
+			var pauseRect = (ctx, mul) => {
+				this.draw.roundedRect({
+					ctx: ctx,
+					x: 269 * mul,
+					y: 93 * mul,
+					w: 742 * mul,
+					h: 494 * mul,
+					radius: 17 * mul
+				})
+			}
+			pauseRect(ctx, 1)
+			ctx.strokeStyle = "#fff"
+			ctx.lineWidth = 24
+			ctx.stroke()
+			ctx.strokeStyle = "#000"
+			ctx.lineWidth = 12
+			ctx.stroke()
+			this.draw.pattern({
+				ctx: ctx,
+				img: assets.image["bg_pause"],
+				shape: pauseRect,
+				dx: 68,
+				dy: 11
+			})
+			this.draw.wrappingText({
+				ctx: ctx,
+				text: strings.scoreSaveFailed,
+				fontSize: 30,
+				fontFamily: this.font,
+				x: 300,
+				y: 130,
+				width: 680,
+				height: 300,
+				lineHeight: 35,
+				fill: "#000",
+				verticalAlign: "middle",
+				textAlign: "center",
+			})
+			
+			var _x = 640
+			var _y = 470
+			var _w = 464
+			var _h = 80
+			ctx.fillStyle = "#ffb447"
+			this.draw.roundedRect({
+				ctx: ctx,
+				x: _x - _w / 2,
+				y: _y,
+				w: _w,
+				h: _h,
+				radius: 30
+			})
+			ctx.fill()
+			var layers = [
+				{outline: "#000", letterBorder: 10},
+				{fill: "#fff"}
+			]
+			this.draw.layeredText({
+				ctx: ctx,
+				text: strings.ok,
+				x: _x,
+				y: _y + 18,
+				width: _w,
+				height: _h - 54,
+				fontSize: 40,
+				fontFamily: this.font,
+				letterSpacing: -1,
+				align: "center"
+			}, layers)
+			
+			var highlight = 1
+			if(this.state.moveHover === "scoreSaveFailed"){
+				highlight = 2
+			}
+			if(highlight){
+				this.draw.highlight({
+					ctx: ctx,
+					x: _x - _w / 2 - 3.5,
+					y: _y - 3.5,
+					w: _w + 7,
+					h: _h + 7,
+					animate: highlight === 1,
+					animateMS: this.state.moveMS,
+					opacity: highlight === 2 ? 0.8 : 1,
+					radius: 30
+				})
+			}
+			
+			ctx.restore()
+		}
+		
 		if(screen === "titleFadeIn"){
 			ctx.save()
 			
@@ -2120,7 +2279,7 @@ class SongSelect{
 			})
 		}
 		this.draw.songFrame(config)
-		if(config.song.p2Cursor && p2.socket.readyState === 1){
+		if(config.song.p2Cursor !== null && p2.socket.readyState === 1){
 			this.draw.diffCursor({
 				ctx: ctx,
 				font: this.font,
@@ -2167,6 +2326,9 @@ class SongSelect{
 	}
 	
 	startPreview(loadOnly){
+		if(!loadOnly && this.state && this.state.scoreSaveFailed){
+			return
+		}
 		var currentSong = this.songs[this.selectedSong]
 		var id = currentSong.id
 		var prvTime = currentSong.preview
@@ -2242,6 +2404,9 @@ class SongSelect{
 		}
 	}
 	playBgm(enabled){
+		if(enabled && this.state && this.state.scoreSaveFailed){
+			return
+		}
 		if(enabled && !this.bgmEnabled){
 			this.bgmEnabled = true
 			snd.musicGain.fadeIn(0.4)
diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index f4d0d75..1f58f11 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -37,6 +37,7 @@
 	this.oni = "おに"
 	this.songBranch = "譜面分岐あり"
 	this.defaultName = "どんちゃん"
+	this.default2PName = "かっちゃん"
 	this.notLoggedIn = "ログインしていない"
 	this.sessionStart = "オンラインセッションを開始する！"
 	this.sessionEnd = "オンラインセッションを終了する"
@@ -197,6 +198,7 @@
 		register: "登録",
 		registerAccount: "アカウントを登録",
 		passwordsDoNotMatch: "パスワードが一致しません",
+		newPasswordsDoNotMatch: "New passwords do not match",
 		cannotBeEmpty: "%sは空にできません",
 		error: "リクエストの処理中にエラーが発生しました",
 		logout: "ログアウト",
@@ -213,6 +215,17 @@
 		deleteAccount: "Delete Account",
 		verifyPassword: "Verify password to delete this account"
 	}
+	this.serverError = {
+		not_logged_in: "Not logged in",
+		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
+		username_in_use: "A user already exists with that username",
+		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
+		invalid_username_password: "Invalid Username or Password",
+		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
+		current_password_invalid: "Current password does not match",
+		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
+		verify_password_invalid: "Verification password does not match"
+	}
 	this.browserSupport = {
 		browserWarning: "サポートされていないブラウザを実行しています (%s)",
 		details: "詳しく",
@@ -263,9 +276,11 @@ function StringsEn(){
 	this.oni = "Extreme"
 	this.songBranch = "Diverge Notes"
 	this.defaultName = "Don-chan"
+	this.default2PName = "Katsu-chan"
 	this.notLoggedIn = "Not logged in"
 	this.sessionStart = "Begin an Online Session!"
 	this.sessionEnd = "End Online Session"
+	this.scoreSaveFailed = "Could not connect to the server, your score has not been saved.\n\nPlease log in or refresh the page to try saving the score again."
 	this.loading = "Loading..."
 	this.waitingForP2 = "Waiting for Another Player..."
 	this.cancel = "Cancel"
@@ -423,6 +438,7 @@ function StringsEn(){
 		register: "Register",
 		registerAccount: "Register account",
 		passwordsDoNotMatch: "Passwords do not match",
+		newPasswordsDoNotMatch: "New passwords do not match",
 		cannotBeEmpty: "%s cannot be empty",
 		error: "An error occurred while processing your request",
 		logout: "Log Out",
@@ -439,6 +455,17 @@ function StringsEn(){
 		deleteAccount: "Delete Account",
 		verifyPassword: "Verify password to delete this account"
 	}
+	this.serverError = {
+		not_logged_in: "Not logged in",
+		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
+		username_in_use: "A user already exists with that username",
+		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
+		invalid_username_password: "Invalid Username or Password",
+		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
+		current_password_invalid: "Current password does not match",
+		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
+		verify_password_invalid: "Verification password does not match"
+	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
 		details: "Details...",
@@ -489,6 +516,7 @@ function StringsCn(){
 	this.oni = "魔王"
 	this.songBranch = "有谱面分歧"
 	this.defaultName = "小咚"
+	this.default2PName = "小咔"
 	this.notLoggedIn = "未登录"
 	this.sessionStart = "开始在线会话！"
 	this.sessionEnd = "结束在线会话"
@@ -649,6 +677,7 @@ function StringsCn(){
 		register: "注册",
 		registerAccount: "注册帐号",
 		passwordsDoNotMatch: "密码不匹配",
+		newPasswordsDoNotMatch: "New passwords do not match",
 		cannotBeEmpty: "%s不能为空",
 		error: "处理您的请求时发生错误",
 		logout: "登出",
@@ -665,6 +694,17 @@ function StringsCn(){
 		deleteAccount: "Delete Account",
 		verifyPassword: "Verify password to delete this account"
 	}
+	this.serverError = {
+		not_logged_in: "Not logged in",
+		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
+		username_in_use: "A user already exists with that username",
+		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
+		invalid_username_password: "Invalid Username or Password",
+		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
+		current_password_invalid: "Current password does not match",
+		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
+		verify_password_invalid: "Verification password does not match"
+	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
 		details: "Details...",
@@ -715,6 +755,7 @@ function StringsTw(){
 	this.oni = "魔王"
 	this.songBranch = "有譜面分歧"
 	this.defaultName = "小咚"
+	this.default2PName = "小咔"
 	this.notLoggedIn = "未登錄"
 	this.sessionStart = "開始多人模式!"
 	this.sessionEnd = "結束多人模式"
@@ -875,6 +916,7 @@ function StringsTw(){
 		register: "註冊",
 		registerAccount: "註冊帳號",
 		passwordsDoNotMatch: "密碼不匹配",
+		newPasswordsDoNotMatch: "New passwords do not match",
 		cannotBeEmpty: "%s不能為空",
 		error: "處理您的請求時發生錯誤",
 		logout: "登出",
@@ -891,6 +933,17 @@ function StringsTw(){
 		deleteAccount: "Delete Account",
 		verifyPassword: "Verify password to delete this account"
 	}
+	this.serverError = {
+		not_logged_in: "Not logged in",
+		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
+		username_in_use: "A user already exists with that username",
+		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
+		invalid_username_password: "Invalid Username or Password",
+		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
+		current_password_invalid: "Current password does not match",
+		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
+		verify_password_invalid: "Verification password does not match"
+	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
 		details: "Details...",
@@ -941,6 +994,7 @@ function StringsKo(){
 	this.oni = "귀신"
 	this.songBranch = "악보 분기 있습니다"
 	this.defaultName = "동이"
+	this.default2PName = "딱이"
 	this.notLoggedIn = "로그인하지 않았습니다"
 	this.sessionStart = "온라인 세션 시작!"
 	this.sessionEnd = "온라인 세션 끝내기"
@@ -1101,6 +1155,7 @@ function StringsKo(){
 		register: "가입하기",
 		registerAccount: "계정 등록",
 		passwordsDoNotMatch: "비밀번호가 일치하지 않습니다",
+		newPasswordsDoNotMatch: "New passwords do not match",
 		cannotBeEmpty: "%s 비어 있을 수 없습니다",
 		error: "요청을 처리하는 동안 오류가 발생했습니다",
 		logout: "로그 아웃",
@@ -1117,6 +1172,17 @@ function StringsKo(){
 		deleteAccount: "Delete Account",
 		verifyPassword: "Verify password to delete this account"
 	}
+	this.serverError = {
+		not_logged_in: "Not logged in",
+		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
+		username_in_use: "A user already exists with that username",
+		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
+		invalid_username_password: "Invalid Username or Password",
+		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
+		current_password_invalid: "Current password does not match",
+		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
+		verify_password_invalid: "Verification password does not match"
+	}
 	this.browserSupport = {
 		browserWarning: "You are running an unsupported browser (%s)",
 		details: "Details...",
diff --git a/public/src/js/view.js b/public/src/js/view.js
index 235b169..12e48b0 100644
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -129,6 +129,11 @@
 		this.nameplateCache = new CanvasCache(noSmoothing)
 		
 		this.multiplayer = this.controller.multiplayer
+		if(this.multiplayer === 2){
+			this.player = p2.player === 2 ? 1 : 2
+		}else{
+			this.player = this.controller.multiplayer ? p2.player : 1
+		}
 		
 		this.touchEnabled = this.controller.touchEnabled
 		this.touch = -Infinity
@@ -224,13 +229,12 @@
 			this.winH = winH
 			this.ratio = ratio
 			
-			if(this.multiplayer !== 2){
+			if(this.player !== 2){
 				this.canvas.width = winW
 				this.canvas.height = winH
 				ctx.scale(ratio, ratio)
 				this.canvas.style.width = (winW / this.pixelRatio) + "px"
 				this.canvas.style.height = (winH / this.pixelRatio) + "px"
-				
 				this.titleCache.resize(640, 90, ratio)
 			}
 			if(!this.multiplayer){
@@ -246,7 +250,7 @@
 			resized = true
 		}else if(this.controller.game.paused && !document.hasFocus()){
 			return
-		}else if(this.multiplayer !== 2){
+		}else if(this.player !== 2){
 			ctx.clearRect(0, 0, winW / ratio, winH / ratio)
 		}
 		winW /= ratio
@@ -263,8 +267,8 @@
 			var frameTop = winH / 2 - 720 / 2
 			var frameLeft = winW / 2 - 1280 / 2
 		}
-		if(this.multiplayer === 2){
-			frameTop += this.multiplayer === 2 ? 165 : 176
+		if(this.player === 2){
+			frameTop += 165
 		}
 		if(touchMultiplayer){
 			if(!this.touchp2Class){
@@ -284,11 +288,11 @@
 		
 		this.drawGogoTime()
 		
-		if(!touchMultiplayer || this.multiplayer === 1 && frameTop >= 0){
+		if(!touchMultiplayer || this.player === 1 && frameTop >= 0){
 			this.assets.drawAssets("background")
 		}
 		
-		if(this.multiplayer !== 2){
+		if(this.player !== 2){
 			this.titleCache.get({
 				ctx: ctx,
 				x: winW - (touchMultiplayer && fullScreenSupported ? 750 : 650),
@@ -356,7 +360,7 @@
 		var score = this.controller.getGlobalScore()
 		var gaugePercent = this.rules.gaugePercent(score.gauge)
 		
-		if(this.multiplayer === 2){
+		if(this.player === 2){
 			var scoreImg = "bg_score_p2"
 			var scoreFill = "#6bbec0"
 		}else{
@@ -379,17 +383,17 @@
 				size: 100,
 				paddingLeft: 0
 			}
-			this.scorePos = {x: 363, y: frameTop + (this.multiplayer === 2 ? 520 : 227)}
+			this.scorePos = {x: 363, y: frameTop + (this.player === 2 ? 520 : 227)}
 			
 			var animPos = {
 				x1: this.slotPos.x + 13,
-				y1: this.slotPos.y + (this.multiplayer === 2 ? 27 : -27),
+				y1: this.slotPos.y + (this.player === 2 ? 27 : -27),
 				x2: winW - 38,
-				y2: frameTop + (this.multiplayer === 2 ? 484 : 293)
+				y2: frameTop + (this.player === 2 ? 484 : 293)
 			}
 			var taikoPos = {
 				x: 19,
-				y: frameTop + (this.multiplayer === 2 ? 464 : 184),
+				y: frameTop + (this.player === 2 ? 464 : 184),
 				w: 111,
 				h: 130
 			}
@@ -397,15 +401,16 @@
 			this.nameplateCache.get({
 				ctx: ctx,
 				x: 167,
-				y: this.multiplayer === 2 ? 565 : 160,
+				y: this.player === 2 ? 565 : 160,
 				w: 219,
 				h: 53,
 				id: "1p",
 			}, ctx => {
+				var defaultName = this.player === 1 ? strings.defaultName : strings.default2PName
 				if(this.multiplayer === 2){
-					var name = p2.name || strings.defaultName
+					var name = p2.name || defaultName
 				}else{
-					var name = account.loggedIn ? account.displayName : strings.defaultName
+					var name = account.loggedIn ? account.displayName : defaultName
 				}
 				this.draw.nameplate({
 					ctx: ctx,
@@ -414,19 +419,19 @@
 					scale: 0.8,
 					name: name,
 					font: this.font,
-					blue: this.multiplayer === 2
+					blue: this.player === 2
 				})
 			})
 			
 			ctx.fillStyle = "#000"
 			ctx.fillRect(
 				0,
-				this.multiplayer === 2 ? 306 : 288,
+				this.player === 2 ? 306 : 288,
 				winW,
-				this.multiplayer === 1 ? 184 : 183
+				this.player === 1 ? 184 : 183
 			)
 			ctx.beginPath()
-			if(this.multiplayer === 2){
+			if(this.player === 2){
 				ctx.moveTo(0, 467)
 				ctx.lineTo(384, 467)
 				ctx.lineTo(384, 512)
@@ -445,7 +450,7 @@
 			ctx.fillStyle = scoreFill
 			var leftSide = (ctx, mul) => {
 				ctx.beginPath()
-				if(this.multiplayer === 2){
+				if(this.player === 2){
 					ctx.moveTo(0, 468 * mul)
 					ctx.lineTo(380 * mul, 468 * mul)
 					ctx.lineTo(380 * mul, 512 * mul)
@@ -475,7 +480,7 @@
 			// Score background
 			ctx.fillStyle = "#000"
 			ctx.beginPath()
-			if(this.multiplayer === 2){
+			if(this.player === 2){
 				this.draw.roundedCorner(ctx, 184, 512, 20, 0)
 				ctx.lineTo(384, 512)
 				this.draw.roundedCorner(ctx, 384, 560, 12, 2)
@@ -493,16 +498,16 @@
 				ctx.drawImage(assets.image["difficulty"],
 					0, 144 * this.difficulty[this.controller.selectedSong.difficulty],
 					168, 143,
-					126, this.multiplayer === 2 ? 497 : 228,
+					126, this.player === 2 ? 497 : 228,
 					62, 53
 				)
 			}
 			
 			// Badges
-			if(this.controller.autoPlayEnabled && !this.controller.multiplayer){
+			if(this.controller.autoPlayEnabled && !this.multiplayer){
 				this.ctx.drawImage(assets.image["badge_auto"],
 					183,
-					this.multiplayer === 2 ? 490 : 265,
+					this.player === 2 ? 490 : 265,
 					23,
 					23
 				)
@@ -512,7 +517,7 @@
 			ctx.fillStyle = "#000"
 			ctx.beginPath()
 			var gaugeX = winW - 788 * 0.7 - 32
-			if(this.multiplayer === 2){
+			if(this.player === 2){
 				ctx.moveTo(gaugeX, 464)
 				ctx.lineTo(winW, 464)
 				ctx.lineTo(winW, 489)
@@ -527,18 +532,18 @@
 			this.draw.gauge({
 				ctx: ctx,
 				x: winW,
-				y: this.multiplayer === 2 ? 468 : 273,
+				y: this.player === 2 ? 468 : 273,
 				clear: this.rules.gaugeClear,
 				percentage: gaugePercent,
 				font: this.font,
 				scale: 0.7,
-				multiplayer: this.multiplayer === 2,
-				blue: this.multiplayer === 2
+				multiplayer: this.player === 2,
+				blue: this.player === 2
 			})
 			this.draw.soul({
 				ctx: ctx,
 				x: winW - 40,
-				y: this.multiplayer === 2 ? 484 : 293,
+				y: this.player === 2 ? 484 : 293,
 				scale: 0.75,
 				cleared: this.rules.clearReached(score.gauge)
 			})
@@ -566,29 +571,30 @@
 			}
 			this.scorePos = {
 				x: 155,
-				y: frameTop + (this.multiplayer === 2 ? 318 : 193)
+				y: frameTop + (this.player === 2 ? 318 : 193)
 			}
 			
 			var animPos = {
 				x1: this.slotPos.x + 14,
-				y1: this.slotPos.y + (this.multiplayer === 2 ? 29 : -29),
+				y1: this.slotPos.y + (this.player === 2 ? 29 : -29),
 				x2: winW - 55,
-				y2: frameTop + (this.multiplayer === 2 ? 378 : 165)
+				y2: frameTop + (this.player === 2 ? 378 : 165)
 			}
 			var taikoPos = {x: 179, y: frameTop + 190, w: 138, h: 162}
 			
 			this.nameplateCache.get({
 				ctx: ctx,
 				x: 320,
-				y: this.multiplayer === 2 ? 460 : 20,
+				y: this.player === 2 ? 460 : 20,
 				w: 273,
 				h: 66,
 				id: "1p",
 			}, ctx => {
+				var defaultName = this.player === 1 ? strings.defaultName : strings.default2PName
 				if(this.multiplayer === 2){
-					var name = p2.name || strings.defaultName
+					var name = p2.name || defaultName
 				}else{
-					var name = account.loggedIn ? account.displayName : strings.defaultName
+					var name = account.loggedIn ? account.displayName : defaultName
 				}
 				this.draw.nameplate({
 					ctx: ctx,
@@ -596,7 +602,7 @@
 					y: 3,
 					name: name,
 					font: this.font,
-					blue: this.multiplayer === 2
+					blue: this.player === 2
 				})
 			})
 			
@@ -605,10 +611,10 @@
 				0,
 				184,
 				winW,
-				this.multiplayer === 1 ? 177 : 176
+				this.multiplayer && this.player === 1 ? 177 : 176
 			)
 			ctx.beginPath()
-			if(this.multiplayer === 2){
+			if(this.player === 2){
 				ctx.moveTo(328, 351)
 				ctx.lineTo(winW, 351)
 				ctx.lineTo(winW, 385)
@@ -625,17 +631,17 @@
 			this.draw.gauge({
 				ctx: ctx,
 				x: winW,
-				y: this.multiplayer === 2 ? 357 : 135,
+				y: this.player === 2 ? 357 : 135,
 				clear: this.rules.gaugeClear,
 				percentage: gaugePercent,
 				font: this.font,
-				multiplayer: this.multiplayer === 2,
-				blue: this.multiplayer === 2
+				multiplayer: this.player === 2,
+				blue: this.player === 2
 			})
 			this.draw.soul({
 				ctx: ctx,
 				x: winW - 57,
-				y: this.multiplayer === 2 ? 378 : 165,
+				y: this.player === 2 ? 378 : 165,
 				cleared: this.rules.clearReached(score.gauge)
 			})
 			
@@ -667,7 +673,7 @@
 				ctx.drawImage(assets.image["difficulty"],
 					0, 144 * this.difficulty[this.controller.selectedSong.difficulty],
 					168, 143,
-					16, this.multiplayer === 2 ? 194 : 232,
+					16, this.player === 2 ? 194 : 232,
 					141, 120
 				)
 				var diff = this.controller.selectedSong.difficulty
@@ -679,13 +685,13 @@
 				ctx.fillStyle = "#fff"
 				ctx.lineWidth = 7
 				ctx.miterLimit = 1
-				ctx.strokeText(text, 87, this.multiplayer === 2 ? 310 : 348)
-				ctx.fillText(text, 87, this.multiplayer === 2 ? 310 : 348)
+				ctx.strokeText(text, 87, this.player === 2 ? 310 : 348)
+				ctx.fillText(text, 87, this.player === 2 ? 310 : 348)
 				ctx.miterLimit = 10
 			}
 			
 			// Badges
-			if(this.controller.autoPlayEnabled && !this.controller.multiplayer){
+			if(this.controller.autoPlayEnabled && !this.multiplayer){
 				this.ctx.drawImage(assets.image["badge_auto"],
 					125, 235, 34, 34
 				)
@@ -694,7 +700,7 @@
 			// Score background
 			ctx.fillStyle = "#000"
 			ctx.beginPath()
-			if(this.multiplayer === 2){
+			if(this.player === 2){
 				ctx.moveTo(0, 312)
 				this.draw.roundedCorner(ctx, 176, 312, 20, 1)
 				ctx.lineTo(176, 353)
@@ -719,11 +725,11 @@
 		}, {
 			// 560, 10
 			x: animPos.x1 + animPos.w / 6,
-			y: animPos.y1 - animPos.h * (this.multiplayer === 2 ? 2.5 : 3.5)
+			y: animPos.y1 - animPos.h * (this.player === 2 ? 2.5 : 3.5)
 		}, {
 			// 940, -150
 			x: animPos.x2 - animPos.w / 3,
-			y: animPos.y2 - animPos.h * (this.multiplayer === 2 ? 3.5 : 5)
+			y: animPos.y2 - animPos.h * (this.player === 2 ? 3.5 : 5)
 		}, {
 			// 1225, 165
 			x: animPos.x2,
@@ -1443,12 +1449,12 @@
 		var selectedSong = this.controller.selectedSong
 		var songSkinName = selectedSong.songSkin.name
 		var donLayers = []
-		var filename = !selectedSong.songSkin.don && this.multiplayer === 2 ? "bg_don2_" : "bg_don_"
+		var filename = !selectedSong.songSkin.don && this.player === 2 ? "bg_don2_" : "bg_don_"
 		var prefix = ""
 		
 		this.donBg = document.createElement("div")
 		this.donBg.classList.add("donbg")
-		if(this.multiplayer === 2){
+		if(this.player === 2){
 			this.donBg.classList.add("donbg-bottom")
 		}
 		for(var layer = 1; layer <= 3; layer++){
diff --git a/public/src/js/viewassets.js b/public/src/js/viewassets.js
index dae06c6..9affaf7 100644
--- a/public/src/js/viewassets.js
+++ b/public/src/js/viewassets.js
@@ -18,7 +18,7 @@ class ViewAssets{
 				sw: imgw,
 				sh: imgh - 1,
 				x: view.portrait ? -60 : 0,
-				y: view.portrait ? (view.multiplayer === 2 ? 560 : 35) : (view.multiplayer === 2 ? 360 : 2),
+				y: view.portrait ? (view.player === 2 ? 560 : 35) : (view.player === 2 ? 360 : 2),
 				w: w,
 				h: h - 1
 			}
diff --git a/public/src/views/account.html b/public/src/views/account.html
index 1271156..b236652 100644
--- a/public/src/views/account.html
+++ b/public/src/views/account.html
@@ -2,9 +2,10 @@
 	<div class="view account-view">
 		<div class="view-title stroke-sub"></div>
 		<div class="view-content">
+			<div class="error-div"></div>
 			<div class="displayname-div">
 				<div class="displayname-hint"></div>
-				<input type="text" class="displayname">
+				<input type="text" class="displayname" maxlength="25">
 			</div>
 			<form class="accountpass-form">
 				<div>
diff --git a/public/src/views/login.html b/public/src/views/login.html
index c9a58c5..d8a76b6 100644
--- a/public/src/views/login.html
+++ b/public/src/views/login.html
@@ -2,9 +2,10 @@
 	<div class="view">
 		<div class="view-title stroke-sub"></div>
 		<div class="view-content">
+			<div class="error-div"></div>
 			<form class="login-form">
 				<div class="username-hint"></div>
-				<input type="text" name="username" required>
+				<input type="text" name="username" maxlength="20" required>
 				<div class="password-hint"></div>
 				<input type="password" name="password" required>
 				<div class="password2-div"></div>
diff --git a/server.py b/server.py
index eb8e73c..fbf1476 100644
--- a/server.py
+++ b/server.py
@@ -103,8 +103,8 @@ async def connection(ws, path):
 								user["other_user"]["action"] = "loading"
 								user["other_user"]["other_user"] = user
 								await asyncio.wait([
-									ws.send(msgobj("gameload", waiting_diff)),
-									user["other_user"]["ws"].send(msgobj("gameload", diff)),
+									ws.send(msgobj("gameload", {"diff": waiting_diff, "player": 2})),
+									user["other_user"]["ws"].send(msgobj("gameload", {"diff": diff, "player": 1})),
 									ws.send(msgobj("name", user["other_user"]["name"])),
 									user["other_user"]["ws"].send(msgobj("name", user["name"]))
 								])
@@ -138,10 +138,9 @@ async def connection(ws, path):
 								user["other_user"]["other_user"] = user
 								user["action"] = "invite"
 								user["session"] = value["id"]
-								sent_msg = msgobj("session")
 								await asyncio.wait([
-									ws.send(sent_msg),
-									user["other_user"]["ws"].send(sent_msg),
+									ws.send(msgobj("session", {"player": 2})),
+									user["other_user"]["ws"].send(msgobj("session", {"player": 1})),
 									ws.send(msgobj("invite")),
 									ws.send(msgobj("name", user["other_user"]["name"])),
 									user["other_user"]["ws"].send(msgobj("name", user["name"]))
@@ -291,8 +290,8 @@ async def connection(ws, path):
 								user["action"] = "loading"
 								user["other_user"]["action"] = "loading"
 								await asyncio.wait([
-									ws.send(msgobj("gameload", user["other_user"]["gamediff"])),
-									user["other_user"]["ws"].send(msgobj("gameload", diff))
+									ws.send(msgobj("gameload", {"diff": user["other_user"]["gamediff"]})),
+									user["other_user"]["ws"].send(msgobj("gameload", {"diff": diff}))
 								])
 							else:
 								user["action"] = "waiting"

From 0144367c6e10736cad212c569e20c2a5c9c9ac52 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Sat, 14 Mar 2020 12:44:29 +0300
Subject: [PATCH 08/41] Fix importing custom songs

---
 public/src/js/importsongs.js | 2 +-
 public/src/js/songselect.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/src/js/importsongs.js b/public/src/js/importsongs.js
index 992e96d..bc45977 100644
--- a/public/src/js/importsongs.js
+++ b/public/src/js/importsongs.js
@@ -205,7 +205,7 @@
 				order: index + 1,
 				type: "tja",
 				chart: file,
-				stars: {},
+				courses: {},
 				music: "muted"
 			}
 			var coursesAdded = false
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 0ae5b14..04d8ed4 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -2279,7 +2279,7 @@ class SongSelect{
 			})
 		}
 		this.draw.songFrame(config)
-		if(config.song.p2Cursor !== null && p2.socket.readyState === 1){
+		if("p2Cursor" in config.song && config.song.p2Cursor !== null && p2.socket.readyState === 1){
 			this.draw.diffCursor({
 				ctx: ctx,
 				font: this.font,

From 0fd0cb97a0815a171bafa8999d927062c736752a Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Sat, 14 Mar 2020 14:02:11 +0000
Subject: [PATCH 09/41] log out other sessions after password change

---
 app.py | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/app.py b/app.py
index d7c18cf..ee3ad4d 100644
--- a/app.py
+++ b/app.py
@@ -56,13 +56,20 @@ def admin_required(f):
             return abort(403)
 
         user = db.users.find_one({'username': session.get('username')})
-        if user['user_level'] < 100:
+        if user['user_level'] < 50:
             return abort(403)
 
         return f(*args, **kwargs)
     return decorated_function
 
 
+@app.before_request
+def before_request_func():
+    if session.get('session_id'):
+        if not db.users.find_one({'session_id': session.get('session_id')}):
+            session.clear()
+
+
 def get_config():
     if os.path.isfile('config.json'):
         try:
@@ -211,14 +218,17 @@ def route_api_register():
     salt = bcrypt.gensalt()
     hashed = bcrypt.hashpw(password, salt)
 
+    session_id = os.urandom(24).hex()
     db.users.insert_one({
         'username': username,
         'username_lower': username.lower(),
         'password': hashed,
         'display_name':  username,
-        'user_level': 1
+        'user_level': 1,
+        'session_id': session_id
     })
 
+    session['session_id'] = session_id
     session['username'] = username
     session.permanent = True
     return jsonify({'status': 'ok', 'username': username, 'display_name': username})
@@ -242,6 +252,7 @@ def route_api_login():
     if not bcrypt.checkpw(password, result['password']):
         return api_error('invalid_username_password')
 
+    session['session_id'] = result['session_id']
     session['username'] = result['username']
     if data.get('remember'):
         session.permanent = True
@@ -294,11 +305,13 @@ def route_api_account_password():
     
     salt = bcrypt.gensalt()
     hashed = bcrypt.hashpw(new_password, salt)
+    session_id = os.urandom(24).hex()
 
     db.users.update_one({'username': session.get('username')}, {
-        '$set': {'password': hashed}
+        '$set': {'password': hashed, 'session_id': session_id}
     })
 
+    session['session_id'] = session_id
     return jsonify({'status': 'ok'})
 
 

From 4c07813afff020871ad29b4879e2daeafbc76781 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Sun, 15 Mar 2020 10:12:16 +0300
Subject: [PATCH 10/41] Improve strings.js layout

---
 public/src/js/strings.js | 2248 ++++++++++++++++++--------------------
 1 file changed, 1076 insertions(+), 1172 deletions(-)

diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index 1f58f11..6f55c21 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -1,1203 +1,1107 @@
-function StringsJa(){
-	this.id = "ja"
-	this.name = "日本語"
-	this.regex = /^ja$|^ja-/
-	this.font = "TnT, Meiryo, sans-serif"
+var languageList = ["ja", "en", "cn", "tw", "ko"]
+var translations = {
+	name: {
+		ja: "日本語",
+		en: "English",
+		cn: "简体中文",
+		tw: "正體中文",
+		ko: "한국어"
+	},
+	regex: {
+		ja: /^ja$|^ja-/,
+		en: /^en$|^en-/,
+		cn: /^zh$|^zh-CN$|^zh-SG$/,
+		tw: /^zh-HK$|^zh-TW$/,
+		ko: /^ko$|^ko-/
+	},
+	font: {
+		ja: "TnT, Meiryo, sans-serif",
+		en: "TnT, Meiryo, sans-serif",
+		cn: "Microsoft YaHei, sans-serif",
+		tw: "Microsoft YaHei, sans-serif",
+		ko: "Microsoft YaHei, sans-serif"
+	},
 	
-	this.taikoWeb = "たいこウェブ"
-	this.titleProceed = "クリックするかEnterを押す！"
-	this.titleDisclaimer = "この非公式シミュレーターはバンダイナムコとは関係がありません。"
-	this.titleCopyright = "Taiko no Tatsujin ©&™ 2011 BANDAI NAMCO Entertainment Inc."
-	this.categories = {
-		"J-POP": "J-POP",
-		"アニメ": "アニメ",
-		"ボーカロイド™曲": "ボーカロイド™曲",
-		"バラエティ": "バラエティ",
-		"クラシック": "クラシック",
-		"ゲームミュージック": "ゲームミュージック",
-		"ナムコオリジナル": "ナムコオリジナル"
-	}
-	this.selectSong = "曲をえらぶ"
-	this.selectDifficulty = "むずかしさをえらぶ"
-	this.back = "もどる"
-	this.random = "ランダム"
-	this.randomSong = "ランダムに曲をえらぶ"
-	this.howToPlay = "あそびかた説明"
-	this.aboutSimulator = "このシミュレータについて"
-	this.gameSettings = "ゲーム設定"
-	this.browse = "参照する…"
-	this.defaultSongList = "デフォルト曲リスト"
-	this.songOptions = "演奏オプション"
-	this.none = "なし"
-	this.auto = "オート"
-	this.netplay = "ネットプレイ"
-	this.easy = "かんたん"
-	this.normal = "ふつう"
-	this.hard = "むずかしい"
-	this.oni = "おに"
-	this.songBranch = "譜面分岐あり"
-	this.defaultName = "どんちゃん"
-	this.default2PName = "かっちゃん"
-	this.notLoggedIn = "ログインしていない"
-	this.sessionStart = "オンラインセッションを開始する！"
-	this.sessionEnd = "オンラインセッションを終了する"
-	this.loading = "ロード中..."
-	this.waitingForP2 = "他のプレイヤーを待っている..."
-	this.cancel = "キャンセル"
-	this.note = {
-		don: "ドン",
-		ka: "カッ",
-		daiDon: "ドン(大)",
-		daiKa: "カッ(大)",
-		drumroll: "連打ーっ!!",
-		daiDrumroll: "連打(大)ーっ!!",
-		balloon: "ふうせん"
-	}
-	this.ex_note = {
-		don: [
-			"ド",
-			"コ"
+	taikoWeb: {
+		ja: "たいこウェブ",
+		en: "Taiko Web",
+		cn: "太鼓网页",
+		tw: "太鼓網頁",
+		ko: "태고 웹"
+	},
+	titleProceed: {
+		ja: "クリックするかEnterを押す！",
+		en: "Click or Press Enter!",
+		cn: "点击或按回车！",
+		tw: "點擊或按確認！",
+		ko: "클릭하거나 Enter를 누릅니다!"
+	},
+	titleDisclaimer: {
+		ja: "この非公式シミュレーターはバンダイナムコとは関係がありません。",
+		en: "This unofficial simulator is unaffiliated with BANDAI NAMCO.",
+		cn: "这款非官方模拟器与BANDAI NAMCO无关。",
+		tw: "這款非官方模擬器與BANDAI NAMCO無關。",
+		ko: "이 비공식 시뮬레이터는 반다이 남코와 관련이 없습니다."
+	},
+	titleCopyright: {
+		en: "Taiko no Tatsujin ©&™ 2011 BANDAI NAMCO Entertainment Inc."
+	},
+	categories: {
+		"J-POP": {
+			ja: "J-POP",
+			en: "Pop",
+			cn: "流行音乐",
+			tw: "流行音樂",
+			ko: "POP"
+		},
+		"アニメ": {
+			ja: "アニメ",
+			en: "Anime",
+			cn: "卡通动画音乐",
+			tw: "卡通動畫音樂",
+			ko: "애니메이션"
+		},
+		"ボーカロイド™曲": {
+			ja: "ボーカロイド™曲",
+			en: "VOCALOID™ Music"
+		},
+		"バラエティ": {
+			ja: "バラエティ",
+			en: "Variety",
+			cn: "综合音乐",
+			tw: "綜合音樂",
+			ko: "버라이어티"
+		},
+		"クラシック": {
+			ja: "クラシック",
+			en: "Classical",
+			cn: "古典音乐",
+			tw: "古典音樂",
+			ko: "클래식"
+		},
+		"ゲームミュージック": {
+			ja: "ゲームミュージック",
+			en: "Game Music",
+			cn: "游戏音乐",
+			tw: "遊戲音樂",
+			ko: "게임"
+		},
+		"ナムコオリジナル": {
+			ja: "ナムコオリジナル",
+			en: "NAMCO Original",
+			cn: "NAMCO原创音乐",
+			tw: "NAMCO原創音樂",
+			ko: "남코 오리지널"
+		}
+	},
+	selectSong: {
+		ja: "曲をえらぶ",
+		en: "Select Song",
+		cn: "选择乐曲",
+		tw: "選擇樂曲",
+		ko: "곡 선택"
+	},
+	selectDifficulty: {
+		ja: "むずかしさをえらぶ",
+		en: "Select Difficulty",
+		cn: "选择难度",
+		tw: "選擇難度",
+		ko: "난이도 선택"
+	},
+	back: {
+		ja: "もどる",
+		en: "Back",
+		cn: "返回",
+		tw: "返回",
+		ko: "돌아간다"
+	},
+	random: {
+		ja: "ランダム",
+		en: "Random",
+		cn: "随机",
+		tw: "隨機",
+		ko: "랜덤"
+	},
+	randomSong: {
+		ja: "ランダムに曲をえらぶ",
+		en: "Random Song",
+		cn: "随机选曲",
+		tw: "隨機選曲",
+		ko: "랜덤"
+	},
+	howToPlay: {
+		ja: "あそびかた説明",
+		en: "How to Play",
+		cn: "操作说明",
+		tw: "操作說明",
+		ko: "지도 시간"
+	},
+	aboutSimulator: {
+		ja: "このシミュレータについて",
+		en: "About Simulator",
+		cn: "关于模拟器",
+		tw: "關於模擬器",
+		ko: "게임 정보"
+	},
+	gameSettings: {
+		ja: "ゲーム設定",
+		en: "Game Settings",
+		cn: "游戏设定",
+		tw: "遊戲設定",
+		ko: "게임 설정"
+	},
+	browse: {
+		ja: "参照する…",
+		en: "Browse…",
+		cn: "浏览…",
+		tw: "開啟檔案…",
+		ko: "찾아보기…"
+	},
+	defaultSongList: {
+		ja: "デフォルト曲リスト",
+		en: "Default Song List",
+		cn: "默认歌曲列表",
+		tw: "默認歌曲列表",
+		ko: "기본 노래 목록"
+	},
+	songOptions: {
+		ja: "演奏オプション",
+		en: "Song Options",
+		cn: "选项",
+		tw: "選項",
+		ko: "옵션"
+	},
+	none: {
+		ja: "なし",
+		en: "None",
+		cn: "无",
+		tw: "無",
+		ko: "없음"
+	},
+	auto: {
+		ja: "オート",
+		en: "Auto",
+		cn: "自动",
+		tw: "自動",
+		ko: "오토"
+	},
+	netplay: {
+		ja: "ネットプレイ",
+		en: "Netplay",
+		cn: "网络对战",
+		tw: "網上對打",
+		ko: "넷 플레이"
+	},
+	easy: {
+		ja: "かんたん",
+		en: "Easy",
+		cn: "简单",
+		tw: "簡單",
+		ko: "쉬움"
+	},
+	normal: {
+		ja: "ふつう",
+		en: "Normal",
+		cn: "普通",
+		tw: "普通",
+		ko: "보통"
+	},
+	hard: {
+		ja: "むずかしい",
+		en: "Hard",
+		cn: "困难",
+		tw: "困難",
+		ko: "어려움"
+	},
+	oni: {
+		ja: "おに",
+		en: "Extreme",
+		cn: "魔王",
+		tw: "魔王",
+		ko: "귀신"
+	},
+	songBranch: {
+		ja: "譜面分岐あり",
+		en: "Diverge Notes",
+		cn: "有谱面分歧",
+		tw: "有譜面分歧",
+		ko: "악보 분기 있습니다"
+	},
+	defaultName: {
+		ja: "どんちゃん",
+		en: "Don-chan",
+		cn: "小咚",
+		tw: "小咚",
+		ko: "동이"
+	},
+	default2PName: {
+		ja: "かっちゃん",
+		en: "Katsu-chan",
+		cn: "小咔",
+		tw: "小咔",
+		ko: "딱이"
+	},
+	notLoggedIn: {
+		ja: "ログインしていない",
+		en: "Not logged in",
+		cn: "未登录",
+		tw: "未登錄",
+		ko: "로그인하지 않았습니다"
+	},
+	sessionStart: {
+		ja: "オンラインセッションを開始する！",
+		en: "Begin an Online Session!",
+		cn: "开始在线会话！",
+		tw: "開始多人模式!",
+		ko: "온라인 세션 시작!"
+	},
+	sessionEnd: {
+		ja: "オンラインセッションを終了する",
+		en: "End Online Session",
+		cn: "结束在线会话",
+		tw: "結束多人模式",
+		ko: "온라인 세션 끝내기"
+	},
+	scoreSaveFailed: {
+		ja: null,
+		en: "Could not connect to the server, your score has not been saved.\n\nPlease log in or refresh the page to try saving the score again."
+	},
+	loading: {
+		ja: "ロード中...",
+		en: "Loading...",
+		cn: "加载中...",
+		tw: "讀取中...",
+		ko: "로딩 중..."
+	},
+	waitingForP2: {
+		ja: "他のプレイヤーを待っている...",
+		en: "Waiting for Another Player...",
+		cn: "正在等待对方玩家...",
+		tw: "正在等待對方玩家...",
+		ko: "Waiting for Another Player..."
+	},
+	cancel: {
+		ja: "キャンセル",
+		en: "Cancel",
+		cn: "取消",
+		tw: "取消",
+		ko: "취소"
+	},
+	note: {
+		don: {
+			ja: "ドン",
+			en: "Don",
+			cn: "咚",
+			tw: "咚",
+			ko: "쿵"
+		},
+		ka: {
+			ja: "カッ",
+			en: "Ka",
+			cn: "咔",
+			tw: "咔",
+			ko: "딱"
+		},
+		daiDon: {
+			ja: "ドン(大)",
+			en: "DON",
+			cn: "咚(大)",
+			tw: "咚(大)",
+			ko: "쿵(대)"
+		},
+		daiKa: {
+			ja: "カッ(大)",
+			en: "KA",
+			cn: "咔(大)",
+			tw: "咔(大)",
+			ko: "딱(대)"
+		},
+		drumroll: {
+			ja: "連打ーっ!!",
+			en: "Drum rollー!!",
+			cn: "连打ー!!",
+			tw: "連打ー!!",
+			ko: "연타ー!!"
+		},
+		daiDrumroll: {
+			ja: "連打(大)ーっ!!",
+			en: "DRUM ROLLー!!",
+			cn: "连打(大)ー!!",
+			tw: "連打(大)ー!!",
+			ko: "연타(대)ー!!"
+		},
+		balloon: {
+			ja: "ふうせん",
+			en: "Balloon",
+			cn: "气球",
+			tw: "氣球",
+			ko: "풍선"
+		},
+	},
+	ex_note: {
+		don: {
+			ja: ["ド", "コ"],
+			en: ["Do", "Do"],
+			cn: ["咚", "咚"],
+			tw: ["咚", "咚"],
+			ko: ["쿠", "쿠"]
+		},
+		ka: {
+			ja: ["カ"],
+			en: ["Ka"],
+			cn: ["咔"],
+			tw: ["咔"],
+			ko: ["딱"]
+		},
+		daiDon: {
+			ja: ["ドン(大)", "ドン(大)"],
+			en: ["DON", "DON"],
+			cn: ["咚(大)", "咚(大)"],
+			tw: ["咚(大)", "咚(大)"],
+			ko: ["쿵(대)", "쿵(대)"]
+		},
+		daiKa: {
+			ja: ["カッ(大)"],
+			en: ["KA"],
+			cn: ["咔(大)"],
+			tw: ["咔(大)"],
+			ko: ["딱(대)"]
+		},
+	},
+	combo: {
+		ja: "コンボ",
+		en: "Combo",
+		cn: "连段",
+		tw: "連段",
+		ko: "콤보"
+	},
+	clear: {
+		ja: "クリア",
+		en: "Clear",
+		cn: "通关",
+		tw: "通關",
+		ko: "클리어"
+	},
+	good: {
+		ja: "良",
+		en: "GOOD",
+		cn: "良",
+		tw: "良",
+		ko: "얼쑤"
+	},
+	ok: {
+		ja: "可",
+		en: "OK",
+		cn: "可",
+		tw: "可",
+		ko: "좋다"
+	},
+	bad: {
+		ja: "不可",
+		en: "BAD",
+		cn: "不可",
+		tw: "不可",
+		ko: "에구"
+	},
+	branch: {
+		normal: {
+			ja: "普通譜面",
+			en: "Normal",
+			cn: "一般谱面",
+			tw: "一般譜面",
+			ko: "보통 악보"
+		},
+		advanced: {
+			ja: "玄人譜面",
+			en: "Professional",
+			cn: "进阶谱面",
+			tw: "進階譜面",
+			ko: "현인 악보"
+		},
+		master: {
+			ja: "達人譜面",
+			en: "Master",
+			cn: "达人谱面",
+			tw: "達人譜面",
+			ko: "달인 악보"
+		}
+	},
+	pauseOptions: {
+		ja: [
+			"演奏をつづける",
+			"はじめからやりなおす",
+			"「曲をえらぶ」にもどる"
 		],
-		ka: [
-			"カ"
+		en: [
+			"Continue",
+			"Retry",
+			"Back to Select Song"
 		],
-		daiDon: [
-			"ドン(大)",
-			"ドン(大)"
+		cn: [
+			"继续演奏",
+			"从头开始",
+			"返回「选择乐曲」"
 		],
-		daiKa: [
-			"カッ(大)"
+		tw: [
+			"繼續演奏",
+			"從頭開始",
+			"返回「選擇樂曲」"
+		],
+		ko: [
+			"연주 계속하기",
+			"처음부터 다시",
+			"「곡 선택」으로"
 		]
-	}
-	this.combo = "コンボ"
-	this.clear = "クリア"
-	this.good = "良"
-	this.ok = "可"
-	this.bad = "不可"
-	this.branch = {
-		"normal": "普通譜面",
-		"advanced": "玄人譜面",
-		"master": "達人譜面"
-	}
-	this.pauseOptions = [
-		"演奏をつづける",
-		"はじめからやりなおす",
-		"「曲をえらぶ」にもどる"
-	]
-	this.results = "成績発表"
-	this.points = "点"
-	this.maxCombo = "最大コンボ数"
-	this.drumroll = "連打数"
+	},
+	results: {
+		ja: "成績発表",
+		en: "Results",
+		cn: "发表成绩",
+		tw: "發表成績",
+		ko: "성적 발표"
+	},
+	points: {
+		ja: "点",
+		en: "pts",
+		cn: "点",
+		tw: "分",
+		ko: "점"
+	},
+	maxCombo: {
+		ja: "最大コンボ数",
+		en: "MAX Combo",
+		cn: "最多连段数",
+		tw: "最多連段數",
+		ko: "최대 콤보 수"
+	},
+	drumroll: {
+		ja: "連打数",
+		en: "Drumroll",
+		cn: "连打数",
+		tw: "連打數",
+		ko: "연타 횟수"
+	},
 	
-	this.errorOccured = "エラーが発生しました。再読み込みしてください。"
-	this.tutorial = {
-		basics: [
-			"流れてくる音符がワクに重なったらバチで太鼓をたたこう！",
-			"赤い音符は面をたたこう（%sまたは%s）",
-			"青い音符はフチをたたこう（%sまたは%s）",
-			"USBコントローラがサポートされています！"
-		],
-		otherControls: "他のコントロール",
-		otherTutorial: [
-			"%sはゲームを一時停止します",
-			"曲をえらぶしながら%sか%sキーを押してジャンルをスキップします",
-			"むずかしさをえらぶしながら%sキーを押しながらオートモードを有効",
-			"むずかしさをえらぶしながら%sキーを押しながらネットプレイモードを有効"
-		],
-		ok: "OK"
-	}
-	this.about = {
-		bugReporting: [
-			"このシミュレータは現在開発中です。",
-			"バグが発生した場合は、報告してください。",
-			"Gitリポジトリかメールでバグを報告してください。"
-		],
-		diagnosticWarning: "以下の端末診断情報も併せて報告してください！",
-		issueTemplate: "###### 下記の問題を説明してください。 スクリーンショットと診断情報を含めてください。",
-		issues: "課題"
-	}
-	this.session = {
-		multiplayerSession: "オンラインセッション",
-		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
-		cancel: "キャンセル"
-	}
-	this.settings = {
+	errorOccured: {
+		ja: "エラーが発生しました。再読み込みしてください。",
+		en: "An error occurred, please refresh"
+	},
+	tutorial: {
+		basics: {
+			ja: [
+				"流れてくる音符がワクに重なったらバチで太鼓をたたこう！",
+				"赤い音符は面をたたこう（%sまたは%s）",
+				"青い音符はフチをたたこう（%sまたは%s）",
+				"USBコントローラがサポートされています！"
+			],
+			en: [
+				"When a note overlaps the frame, that is your cue to hit the drum!",
+				"For red notes, hit the surface of the drum (%s or %s)...",
+				"...and for blue notes, hit the rim! (%s or %s)",
+				"USB controllers are also supported!"
+			],
+			cn: [
+				"当流动的音符将与框框重叠时就用鼓棒敲打太鼓吧",
+				"遇到红色音符要敲打鼓面（%s或%s）",
+				"遇到蓝色音符则敲打鼓边（%s或%s）",
+				"USB控制器也支持！"
+			],
+			tw: [
+				"當流動的音符將與框框重疊時就用鼓棒敲打太鼓吧",
+				"遇到紅色音符要敲打鼓面（%s或%s）",
+				"遇到藍色音符則敲打鼓邊（%s或%s）",
+				"USB控制器也支持！"
+			],
+			ko: [
+				"이동하는 음표가 테두리와 겹쳐졌을 때 북채로 태고를 두드리자！",
+				"빨간 음표는 면을 두드리자 (%s 또는 %s)",
+				"파란 음표는 테를 두드리자 (%s 또는 %s)",
+				"USB 컨트롤러도 지원됩니다!"
+			],
+		},
+		otherControls: {
+			ja: "他のコントロール",
+			en: "Other controls",
+			cn: "其他控制",
+			tw: "其他控制",
+			ko: "기타 컨트롤",
+		},
+		otherTutorial: {
+			ja: [
+				"%sはゲームを一時停止します",
+				"曲をえらぶしながら%sか%sキーを押してジャンルをスキップします",
+				"むずかしさをえらぶしながら%sキーを押しながらオートモードを有効",
+				"むずかしさをえらぶしながら%sキーを押しながらネットプレイモードを有効"
+			],
+			en: [
+				"%s \u2014 pause game",
+				'%s and %s while selecting song \u2014 navigate categories',
+				"%s while selecting difficulty \u2014 enable autoplay mode",
+				"%s while selecting difficulty \u2014 enable 2P mode"
+			],
+			cn: [
+				"%s暂停游戏",
+				'%s and %s while selecting song \u2014 navigate categories',
+				"选择难度时按住%s以启用自动模式",
+				"选择难度时按住%s以启用网络对战模式"
+			],
+			tw: [
+				"%s暫停遊戲",
+				'%s and %s while selecting song \u2014 navigate categories',
+				"選擇難度時按住%s以啟用自動模式",
+				"選擇難度時按住%s以啟用網上對打模式"
+			],
+			ko: [
+				"%s \u2014 게임을 일시 중지합니다",
+				'%s and %s while selecting song \u2014 navigate categories',
+				"난이도 선택 동안 %s 홀드 \u2014 오토 모드 활성화",
+				"난이도 선택 동안 %s 홀드 \u2014 넷 플레이 모드 활성화"
+			],
+		},
+		ok: {
+			ja: "OK",
+			en: "OK",
+			cn: "确定",
+			tw: "確定",
+			ko: "확인"
+		}
+	},
+	about: {
+		bugReporting: {
+			ja: [
+				"このシミュレータは現在開発中です。",
+				"バグが発生した場合は、報告してください。",
+				"Gitリポジトリかメールでバグを報告してください。"
+			],
+			en: [
+				"This simulator is still in development.",
+				"Please report any bugs you find.",
+				"You can report bugs either via our Git repository or email."
+			],
+		},
+		diagnosticWarning: {
+			ja: "以下の端末診断情報も併せて報告してください！",
+			en: "Be sure to include the following diagnostic data!",
+		},
+		issueTemplate: {
+			ja: "###### 下記の問題を説明してください。 スクリーンショットと診断情報を含めてください。",
+			en: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information.",
+		},
+		issues: {
+			ja: "課題",
+			en: "Issues",
+			cn: "工单",
+			tw: "問題",
+			ko: "이슈"
+		}
+	},
+	session: {
+		multiplayerSession: {
+			ja: "オンラインセッション",
+			en: "Multiplayer Session",
+			cn: "在线会话",
+			tw: "多人模式",
+			ko: null
+		},
+		linkTutorial: {
+			ja: null,
+			en: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
+			cn: "复制下方地址，给你的朋友即可开始一起游戏！当他们与您联系之前，请不要离开此页面。",
+			tw: "複製下方地址，給你的朋友即可開始一起遊戲！當他們與您聯繫之前，請不要離開此頁面。",
+			ko: null
+		},
+		cancel: {
+			ja: "キャンセル",
+			en: "Cancel",
+			cn: "取消",
+			tw: "取消",
+			ko: "취소"
+		}
+	},
+	settings: {
 		language: {
-			name: "言語"
+			name: {
+				ja: "言語",
+				en: "Language",
+				cn: "语言",
+				tw: "語系",
+				ko: "언어"
+			}
 		},
 		resolution: {
-			name: "ゲームの解像度",
-			high: "高",
-			medium: "中",
-			low: "低",
-			lowest: "最低"
+			name: {
+				ja: "ゲームの解像度",
+				en: "Game Resolution",
+				cn: "游戏分辨率",
+				tw: "遊戲分辨率",
+				ko: "게임 해상도"
+			},
+			high: {
+				ja: "高",
+				en: "High",
+				cn: "高",
+				tw: "高",
+				ko: "높은"
+			},
+			medium: {
+				ja: "中",
+				en: "Medium",
+				cn: "中",
+				tw: "中",
+				ko: "중간"
+			},
+			low: {
+				ja: "低",
+				en: "Low",
+				cn: "低",
+				tw: "低",
+				ko: "저"
+			},
+			lowest: {
+				ja: "最低",
+				en: "Lowest",
+				cn: "最低",
+				tw: "最低",
+				ko: "최저"
+			}
 		},
 		touchAnimation: {
-			name: "タッチアニメーション"
+			name: {
+				ja: "タッチアニメーション",
+				en: "Touch Animation",
+				cn: "触摸动画",
+				tw: "觸摸動畫",
+				ko: "터치 애니메이션"
+			}
 		},
 		keyboardSettings: {
-			name: "キーボード設定",
-			ka_l: "ふち(左)",
-			don_l: "面(左)",
-			don_r: "面(右)",
-			ka_r: "ふち(右)"
+			name: {
+				ja: "キーボード設定",
+				en: "Keyboard Settings",
+				cn: "键盘设置",
+				tw: "鍵盤設置",
+				ko: "키보드 설정"
+			},
+			ka_l: {
+				ja: "ふち(左)",
+				en: "Left Rim",
+				cn: "边缘（左）",
+				tw: "邊緣（左）",
+				ko: "가장자리 (왼쪽)"
+			},
+			don_l: {
+				ja: "面(左)",
+				en: "Left Surface",
+				cn: "表面（左）",
+				tw: "表面（左）",
+				ko: "표면 (왼쪽)"
+			},
+			don_r: {
+				ja: "面(右)",
+				en: "Right Surface",
+				cn: "表面（右）",
+				tw: "表面（右）",
+				ko: "표면 (오른쪽)"
+			},
+			ka_r: {
+				ja: "ふち(右)",
+				en: "Right Rim",
+				cn: "边缘（右）",
+				tw: "邊緣（右）",
+				ko: "가장자리 (오른쪽)"
+			}
 		},
 		gamepadLayout: {
-			name: "そうさタイプ設定",
-			a: "タイプA",
-			b: "タイプB",
-			c: "タイプC"
+			name: {
+				ja: "そうさタイプ設定",
+				en: "Gamepad Layout",
+				cn: "操作类型设定",
+				tw: "操作類型設定",
+				ko: "조작 타입 설정"
+			},
+			a: {
+				ja: "タイプA",
+				en: "Type A",
+				cn: "类型A",
+				tw: "類型A",
+				ko: "타입 A"
+			},
+			b: {
+				ja: "タイプB",
+				en: "Type B",
+				cn: "类型B",
+				tw: "類型B",
+				ko: "타입 B"
+			},
+			c: {
+				ja: "タイプC",
+				en: "Type C",
+				cn: "类型C",
+				tw: "類型C",
+				ko: "타입 C"
+			}
 		},
 		latency: {
-			name: "Latency",
-			value: "Audio: %s, Video: %s",
-			calibration: "Latency Calibration",
-			audio: "Audio",
-			video: "Video",
-			drumSounds: "Drum Sounds"
+			name: {
+				ja: null,
+				en: "Latency",
+			},
+			value: {
+				ja: null,
+				en: "Audio: %s, Video: %s",
+			},
+			calibration: {
+				ja: null,
+				en: "Latency Calibration",
+			},
+			audio: {
+				ja: null,
+				en: "Audio",
+			},
+			video: {
+				ja: null,
+				en: "Video",
+			},
+			drumSounds: {
+				ja: null,
+				en: "Drum Sounds",
+			}
 		},
 		easierBigNotes: {
-			name: "簡単な大きな音符"
+			name: {
+				ja: "簡単な大きな音符",
+				en: "Easier Big Notes",
+				cn: "简单的大音符",
+				tw: "簡單的大音符",
+				ko: "쉬운 큰 음표"
+			}
+		},
+		on: {
+			ja: "オン",
+			en: "On",
+			cn: "开",
+			tw: "開",
+			ko: "온"
+		},
+		off: {
+			ja: "オフ",
+			en: "Off",
+			cn: "关",
+			tw: "關",
+			ko: "오프"
+		},
+		default: {
+			ja: "既定値にリセット",
+			en: "Reset to Defaults",
+			cn: "重置为默认值",
+			tw: "重置為默認值",
+			ko: "기본값으로 재설정"
+		},
+		ok: {
+			ja: "OK",
+			en: "OK",
+			cn: "确定",
+			tw: "確定",
+			ko: "확인"
+		}
+	},
+	calibration: {
+		title: {
+			ja: null,
+			en: "Latency Calibration",
+		},
+		ms: {
+			ja: null,
+			en: "%sms",
+		},
+		back: {
+			ja: null,
+			en: "Back to Settings",
+		},
+		retryPrevious: {
+			ja: null,
+			en: "Retry Previous",
+		},
+		start: {
+			ja: null,
+			en: "Start",
+		},
+		finish: {
+			ja: null,
+			en: "Finish",
 		},
-		on: "オン",
-		off: "オフ",
-		default: "既定値にリセット",
-		ok: "OK"
-	}
-	this.calibration = {
-		title: "Latency Calibration",
-		ms: "%sms",
-		back: "Back to Settings",
-		retryPrevious: "Retry Previous",
-		start: "Start",
-		finish: "Finish",
 		audioHelp: {
-			title: "Audio Latency Calibration",
-			content: "Listen to a sound playing in the background.\n\nHit the surface of the drum (%s or %s) as you hear it!",
-			contentAlt: "Listen to a sound playing in the background.\n\nHit the surface of the drum as you hear it!"
+			title: {
+				ja: null,
+				en: "Audio Latency Calibration",
+			},
+			content: {
+				ja: null,
+				en: "Listen to a sound playing in the background.\n\nHit the surface of the drum (%s or %s) as you hear it!",
+			},
+			contentAlt: {
+				ja: null,
+				en: "Listen to a sound playing in the background.\n\nHit the surface of the drum as you hear it!",
+			}
+		},
+		audioComplete: {
+			ja: null,
+			en: "Audio Latency Calibration completed!",
 		},
-		audioComplete: "Audio Latency Calibration completed!",
 		videoHelp: {
-			title: "Video Latency Calibration",
-			content: "This time there will be no sounds.\n\nInstead, watch for notes blinking on the circle-shaped frame, hit the drum as they appear!"
+			title: {
+				ja: null,
+				en: "Video Latency Calibration",
+			},
+			content: {
+				ja: null,
+				en: "This time there will be no sounds.\n\nInstead, watch for notes blinking on the circle-shaped frame, hit the drum as they appear!",
+			}
+		},
+		videoComplete: {
+			ja: null,
+			en: "Video Latency Calibration completed!",
 		},
-		videoComplete: "Video Latency Calibration completed!",
 		results: {
-			title: "Latency Calibration Results",
-			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
+			title: {
+				ja: null,
+				en: "Latency Calibration Results",
+			},
+			content: {
+				ja: null,
+				en: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings.",
+			}
+		}
+	},
+	account: {
+		username: {
+			ja: "ユーザー名",
+			en: "Username",
+			cn: "登录名",
+			tw: "使用者名稱",
+			ko: "사용자 이름"
+		},
+		enterUsername: {
+			ja: "ユーザー名を入力",
+			en: "Enter Username",
+			cn: "输入用户名",
+			tw: "輸入用戶名",
+			ko: "사용자 이름을 입력하십시오"
+		},
+		password: {
+			ja: "パスワード",
+			en: "Password",
+			cn: "密码",
+			tw: "密碼",
+			ko: "비밀번호"
+		},
+		enterPassword: {
+			ja: "パスワードを入力",
+			en: "Enter Password",
+			cn: "输入密码",
+			tw: "輸入密碼",
+			ko: "비밀번호 입력"
+		},
+		repeatPassword: {
+			ja: "パスワードを再入力",
+			en: "Repeat Password",
+			cn: "重新输入密码",
+			tw: "再次輸入密碼",
+			ko: "비밀번호 재입력"
+		},
+		remember: {
+			ja: "ログイン状態を保持する",
+			en: "Remember me",
+			cn: "记住登录",
+			tw: "記住登錄",
+			ko: "자동 로그인"
+		},
+		login: {
+			ja: "ログイン",
+			en: "Log In",
+			cn: "登录",
+			tw: "登入",
+			ko: "로그인"
+		},
+		register: {
+			ja: "登録",
+			en: "Register",
+			cn: "注册",
+			tw: "註冊",
+			ko: "가입하기"
+		},
+		registerAccount: {
+			ja: "アカウントを登録",
+			en: "Register account",
+			cn: "注册帐号",
+			tw: "註冊帳號",
+			ko: "계정 등록"
+		},
+		passwordsDoNotMatch: {
+			ja: "パスワードが一致しません",
+			en: "Passwords do not match",
+			cn: "密码不匹配",
+			tw: "密碼不匹配",
+			ko: "비밀번호가 일치하지 않습니다"
+		},
+		newPasswordsDoNotMatch: {
+			ja: null,
+			en: "New passwords do not match",
+		},
+		cannotBeEmpty: {
+			ja: "%sは空にできません",
+			en: "%s cannot be empty",
+			cn: "%s不能为空",
+			tw: "%s不能為空",
+			ko: "%s 비어 있을 수 없습니다"
+		},
+		error: {
+			ja: "リクエストの処理中にエラーが発生しました",
+			en: "An error occurred while processing your request",
+			cn: "处理您的请求时发生错误",
+			tw: "處理您的請求時發生錯誤",
+			ko: "요청을 처리하는 동안 오류가 발생했습니다"
+		},
+		logout: {
+			ja: "ログアウト",
+			en: "Log Out",
+			cn: "登出",
+			tw: "登出",
+			ko: "로그 아웃"
+		},
+		back: {
+			ja: "もどる",
+			en: "Back",
+			cn: "返回",
+			tw: "返回",
+			ko: "돌아간다"
+		},
+		cancel: {
+			ja: null,
+			en: "Cancel",
+		},
+		save: {
+			ja: null,
+			en: "Save",
+		},
+		displayName: {
+			en: "Displayed Name",
+		},
+		changePassword: {
+			ja: null,
+			en: "Change Password",
+		},
+		currentNewRepeat: {
+			ja: null,
+			en: [
+				"Current Password",
+				"New Password",
+				"Repeat New Password"
+			],
+		},
+		deleteAccount: {
+			ja: null,
+			en: "Delete Account",
+		},
+		verifyPassword: {
+			ja: null,
+			en: "Verify password to delete this account",
+		}
+	},
+	serverError: {
+		not_logged_in: {
+			ja: null,
+			en: "Not logged in",
+		},
+		invalid_username: {
+			ja: null,
+			en: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
+		},
+		username_in_use: {
+			ja: null,
+			en: "A user already exists with that username",
+		},
+		invalid_password: {
+			ja: null,
+			en: "Cannot use this password, please check that your password is at least 6 characters long",
+		},
+		invalid_username_password: {
+			ja: null,
+			en: "Invalid Username or Password",
+		},
+		invalid_display_name: {
+			ja: null,
+			en: "Cannot use this name, please check that your new name is at most 25 characters long",
+		},
+		current_password_invalid: {
+			ja: null,
+			en: "Current password does not match",
+		},
+		invalid_new_password: {
+			ja: null,
+			en: "Cannot use this password, please check that your new password is at least 6 characters long",
+		},
+		verify_password_invalid: {
+			ja: null,
+			en: "Verification password does not match",
+		}
+	},
+	browserSupport: {
+		browserWarning: {
+			ja: "サポートされていないブラウザを実行しています (%s)",
+			en: "You are running an unsupported browser (%s)",
+		},
+		details: {
+			ja: "詳しく",
+			en: "Details...",
+		},
+		failedTests: {
+			ja: "このテストは失敗しました：",
+			en: "The following tests have failed:",
+		},
+		supportedBrowser: {
+			ja: "%sなどのサポートされているブラウザを使用してください",
+			en: "Please use a supported browser such as %s",
+		}
+	},
+	creative: {
+		creative: {
+			ja: "創作",
+			en: "Creative",
+			cn: "创作",
+			tw: "創作",
+			ko: "창작"
+		},
+		maker: {
+			ja: "メーカー",
+			en: "Maker:",
+			cn: "制作者",
+			tw: "製作者",
+			ko: "만드는 사람"
 		}
 	}
-	this.account = {
-		username: "ユーザー名",
-		enterUsername: "ユーザー名を入力",
-		password: "パスワード",
-		enterPassword: "パスワードを入力",
-		repeatPassword: "パスワードを再入力",
-		remember: "ログイン状態を保持する",
-		login: "ログイン",
-		register: "登録",
-		registerAccount: "アカウントを登録",
-		passwordsDoNotMatch: "パスワードが一致しません",
-		newPasswordsDoNotMatch: "New passwords do not match",
-		cannotBeEmpty: "%sは空にできません",
-		error: "リクエストの処理中にエラーが発生しました",
-		logout: "ログアウト",
-		back: "もどる",
-		cancel: "Cancel",
-		save: "Save",
-		displayName: "Displayed Name",
-		changePassword: "Change Password",
-		currentNewRepeat: [
-			"Current Password",
-			"New Password",
-			"Repeat New Password"
-		],
-		deleteAccount: "Delete Account",
-		verifyPassword: "Verify password to delete this account"
-	}
-	this.serverError = {
-		not_logged_in: "Not logged in",
-		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
-		username_in_use: "A user already exists with that username",
-		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
-		invalid_username_password: "Invalid Username or Password",
-		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
-		current_password_invalid: "Current password does not match",
-		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
-		verify_password_invalid: "Verification password does not match"
-	}
-	this.browserSupport = {
-		browserWarning: "サポートされていないブラウザを実行しています (%s)",
-		details: "詳しく",
-		failedTests: "このテストは失敗しました：",
-		supportedBrowser: "%sなどのサポートされているブラウザを使用してください"
-	}
-	this.creative = {
-		creative: '創作',
-		maker: 'メーカー'
-	}
 }
-function StringsEn(){
-	this.id = "en"
-	this.name = "English"
-	this.regex = /^en$|^en-/
-	this.font = "TnT, Meiryo, sans-serif"
-	
-	this.taikoWeb = "Taiko Web"
-	this.titleProceed = "Click or Press Enter!"
-	this.titleDisclaimer = "This unofficial simulator is unaffiliated with BANDAI NAMCO."
-	this.titleCopyright = "Taiko no Tatsujin ©&™ 2011 BANDAI NAMCO Entertainment Inc."
-	this.categories = {
-		"J-POP": "Pop",
-		"アニメ": "Anime",
-		"ボーカロイド™曲": "VOCALOID™ Music",
-		"バラエティ": "Variety",
-		"クラシック": "Classical",
-		"ゲームミュージック": "Game Music",
-		"ナムコオリジナル": "NAMCO Original"
-	}
-	this.selectSong = "Select Song"
-	this.selectDifficulty = "Select Difficulty"
-	this.back = "Back"
-	this.random = "Random"
-	this.randomSong = "Random Song"
-	this.howToPlay = "How to Play"
-	this.aboutSimulator = "About Simulator"
-	this.gameSettings = "Game Settings"
-	this.browse = "Browse…"
-	this.defaultSongList = "Default Song List"
-	this.songOptions = "Song Options"
-	this.none = "None"
-	this.auto = "Auto"
-	this.netplay = "Netplay"
-	this.easy = "Easy"
-	this.normal = "Normal"
-	this.hard = "Hard"
-	this.oni = "Extreme"
-	this.songBranch = "Diverge Notes"
-	this.defaultName = "Don-chan"
-	this.default2PName = "Katsu-chan"
-	this.notLoggedIn = "Not logged in"
-	this.sessionStart = "Begin an Online Session!"
-	this.sessionEnd = "End Online Session"
-	this.scoreSaveFailed = "Could not connect to the server, your score has not been saved.\n\nPlease log in or refresh the page to try saving the score again."
-	this.loading = "Loading..."
-	this.waitingForP2 = "Waiting for Another Player..."
-	this.cancel = "Cancel"
-	this.note = {
-		don: "Don",
-		ka: "Ka",
-		daiDon: "DON",
-		daiKa: "KA",
-		drumroll: "Drum rollー!!",
-		daiDrumroll: "DRUM ROLLー!!",
-		balloon: "Balloon"
-	}
-	this.ex_note = {
-		don: [
-			"Do",
-			"Do"
-		],
-		ka: [
-			"Ka"
-		],
-		daiDon: [
-			"DON",
-			"DON"
-		],
-		daiKa: [
-			"KA"
-		]
-	}
-	this.combo = "Combo"
-	this.clear = "Clear"
-	this.good = "GOOD"
-	this.ok = "OK"
-	this.bad = "BAD"
-	this.branch = {
-		"normal": "Normal",
-		"advanced": "Professional",
-		"master": "Master"
-	}
-	this.pauseOptions = [
-		"Continue",
-		"Retry",
-		"Back to Select Song"
-	]
-	this.results = "Results"
-	this.points = "pts"
-	this.maxCombo = "MAX Combo"
-	this.drumroll = "Drumroll"
-	
-	this.errorOccured = "An error occurred, please refresh"
-	this.tutorial = {
-		basics: [
-			"When a note overlaps the frame, that is your cue to hit the drum!",
-			"For red notes, hit the surface of the drum (%s or %s)...",
-			"...and for blue notes, hit the rim! (%s or %s)",
-			"USB controllers are also supported!"
-		],
-		otherControls: "Other controls",
-		otherTutorial: [
-			"%s \u2014 pause game",
-			'%s and %s while selecting song \u2014 navigate categories',
-			"%s while selecting difficulty \u2014 enable autoplay mode",
-			"%s while selecting difficulty \u2014 enable 2P mode"
-		],
-		ok: "OK"
-	}
-	this.about = {
-		bugReporting: [
-			"This simulator is still in development.",
-			"Please report any bugs you find.",
-			"You can report bugs either via our Git repository or email."
-		],
-		diagnosticWarning: "Be sure to include the following diagnostic data!",
-		issueTemplate: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information.",
-		issues: "Issues"
-	}
-	this.session = {
-		multiplayerSession: "Multiplayer Session",
-		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
-		cancel: "Cancel"
-	}
-	this.settings = {
-		language: {
-			name: "Language"
-		},
-		resolution: {
-			name: "Game Resolution",
-			high: "High",
-			medium: "Medium",
-			low: "Low",
-			lowest: "Lowest"
-		},
-		touchAnimation: {
-			name: "Touch Animation"
-		},
-		keyboardSettings: {
-			name: "Keyboard Settings",
-			ka_l: "Left Rim",
-			don_l: "Left Surface",
-			don_r: "Right Surface",
-			ka_r: "Right Rim"
-		},
-		gamepadLayout: {
-			name: "Gamepad Layout",
-			a: "Type A",
-			b: "Type B",
-			c: "Type C"
-		},
-		latency: {
-			name: "Latency",
-			value: "Audio: %s, Video: %s",
-			calibration: "Latency Calibration",
-			audio: "Audio",
-			video: "Video",
-			drumSounds: "Drum Sounds"
-		},
-		easierBigNotes: {
-			name: "Easier Big Notes"
-		},
-		on: "On",
-		off: "Off",
-		default: "Reset to Defaults",
-		ok: "OK"
-	}
-	this.calibration = {
-		title: "Latency Calibration",
-		ms: "%sms",
-		back: "Back to Settings",
-		retryPrevious: "Retry Previous",
-		start: "Start",
-		finish: "Finish",
-		audioHelp: {
-			title: "Audio Latency Calibration",
-			content: "Listen to a sound playing in the background.\n\nHit the surface of the drum (%s or %s) as you hear it!",
-			contentAlt: "Listen to a sound playing in the background.\n\nHit the surface of the drum as you hear it!"
-		},
-		audioComplete: "Audio Latency Calibration completed!",
-		videoHelp: {
-			title: "Video Latency Calibration",
-			content: "This time there will be no sounds.\n\nInstead, watch for notes blinking on the circle-shaped frame, hit the drum as they appear!"
-		},
-		videoComplete: "Video Latency Calibration completed!",
-		results: {
-			title: "Latency Calibration Results",
-			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
+var allStrings = {}
+function separateStrings(){
+	for(var j in languageList){
+		var lang = languageList[j]
+		allStrings[lang] = {}
+		var str = allStrings[lang]
+		var translateObj = function(obj, name, str){
+			if("en" in obj){
+				for(var i in obj){
+					str[name] = obj[lang] || obj.en
+				}
+			}else if(obj){
+				str[name] = {}
+				for(var i in obj){
+					translateObj(obj[i], i, str[name])
+				}
+			}
+		}
+		for(var i in translations){
+			translateObj(translations[i], i, str)
 		}
 	}
-	this.account = {
-		username: "Username",
-		enterUsername: "Enter Username",
-		password: "Password",
-		enterPassword: "Enter Password",
-		repeatPassword: "Repeat Password",
-		remember: "Remember me",
-		login: "Log In",
-		register: "Register",
-		registerAccount: "Register account",
-		passwordsDoNotMatch: "Passwords do not match",
-		newPasswordsDoNotMatch: "New passwords do not match",
-		cannotBeEmpty: "%s cannot be empty",
-		error: "An error occurred while processing your request",
-		logout: "Log Out",
-		back: "Back",
-		cancel: "Cancel",
-		save: "Save",
-		displayName: "Displayed Name",
-		changePassword: "Change Password",
-		currentNewRepeat: [
-			"Current Password",
-			"New Password",
-			"Repeat New Password"
-		],
-		deleteAccount: "Delete Account",
-		verifyPassword: "Verify password to delete this account"
-	}
-	this.serverError = {
-		not_logged_in: "Not logged in",
-		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
-		username_in_use: "A user already exists with that username",
-		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
-		invalid_username_password: "Invalid Username or Password",
-		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
-		current_password_invalid: "Current password does not match",
-		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
-		verify_password_invalid: "Verification password does not match"
-	}
-	this.browserSupport = {
-		browserWarning: "You are running an unsupported browser (%s)",
-		details: "Details...",
-		failedTests: "The following tests have failed:",
-		supportedBrowser: "Please use a supported browser such as %s"
-	}
-	this.creative = {
-		creative: 'Creative',
-		maker: 'Maker:'
-	}
-}
-function StringsCn(){
-	this.id = "cn"
-	this.name = "简体中文"
-	this.regex = /^zh$|^zh-CN$|^zh-SG$/
-	this.font = "Microsoft YaHei, sans-serif"
-	
-	this.taikoWeb = "太鼓网页"
-	this.titleProceed = "点击或按回车！"
-	this.titleDisclaimer = "这款非官方模拟器与BANDAI NAMCO无关。"
-	this.titleCopyright = "Taiko no Tatsujin ©&™ 2011 BANDAI NAMCO Entertainment Inc."
-	this.categories = {
-		"J-POP": "流行音乐",
-		"アニメ": "卡通动画音乐",
-		"ボーカロイド™曲": "VOCALOID™ Music",
-		"バラエティ": "综合音乐",
-		"クラシック": "古典音乐",
-		"ゲームミュージック": "游戏音乐",
-		"ナムコオリジナル": "NAMCO原创音乐"
-	}
-	this.selectSong = "选择乐曲"
-	this.selectDifficulty = "选择难度"
-	this.back = "返回"
-	this.random = "随机"
-	this.randomSong = "随机选曲"
-	this.howToPlay = "操作说明"
-	this.aboutSimulator = "关于模拟器"
-	this.gameSettings = "游戏设定"
-	this.browse = "浏览…"
-	this.defaultSongList = "默认歌曲列表"
-	this.songOptions = "选项"
-	this.none = "无"
-	this.auto = "自动"
-	this.netplay = "网络对战"
-	this.easy = "简单"
-	this.normal = "普通"
-	this.hard = "困难"
-	this.oni = "魔王"
-	this.songBranch = "有谱面分歧"
-	this.defaultName = "小咚"
-	this.default2PName = "小咔"
-	this.notLoggedIn = "未登录"
-	this.sessionStart = "开始在线会话！"
-	this.sessionEnd = "结束在线会话"
-	this.loading = "加载中..."
-	this.waitingForP2 = "正在等待对方玩家..."
-	this.cancel = "取消"
-	this.note = {
-		don: "咚",
-		ka: "咔",
-		daiDon: "咚(大)",
-		daiKa: "咔(大)",
-		drumroll: "连打ー!!",
-		daiDrumroll: "连打(大)ー!!",
-		balloon: "气球"
-	}
-	this.ex_note = {
-		don: [
-			"咚",
-			"咚"
-		],
-		ka: [
-			"咔"
-		],
-		daiDon: [
-			"咚(大)",
-			"咚(大)"
-		],
-		daiKa: [
-			"咔(大)"
-		]
-	}
-	this.combo = "连段"
-	this.clear = "通关"
-	this.good = "良"
-	this.ok = "可"
-	this.bad = "不可"
-	this.branch = {
-		"normal": "一般谱面",
-		"advanced": "进阶谱面",
-		"master": "达人谱面"
-	}
-	this.pauseOptions = [
-		"继续演奏",
-		"从头开始",
-		"返回「选择乐曲」"
-	]
-	this.results = "发表成绩"
-	this.points = "点"
-	this.maxCombo = "最多连段数"
-	this.drumroll = "连打数"
-	
-	this.errorOccured = "An error occurred, please refresh"
-	this.tutorial = {
-		basics: [
-			"当流动的音符将与框框重叠时就用鼓棒敲打太鼓吧",
-			"遇到红色音符要敲打鼓面（%s或%s）",
-			"遇到蓝色音符则敲打鼓边（%s或%s）",
-			"USB控制器也支持！"
-		],
-		otherControls: "其他控制",
-		otherTutorial: [
-			"%s暂停游戏",
-			'%s and %s while selecting song \u2014 navigate categories',
-			"选择难度时按住%s以启用自动模式",
-			"选择难度时按住%s以启用网络对战模式"
-		],
-		ok: "确定"
-	}
-	this.about = {
-		bugReporting: [
-			"This simulator is still in development.",
-			"Please report any bugs you find.",
-			"You can report bugs either via our Git repository or email."
-		],
-		diagnosticWarning: "Be sure to include the following diagnostic data!",
-		issueTemplate: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information.",
-		issues: "工单"
-	}
-	this.session = {
-		multiplayerSession: "在线会话",
-		linkTutorial: "复制下方地址，给你的朋友即可开始一起游戏！当他们与您联系之前，请不要离开此页面。",
-		cancel: "取消"
-	}
-	this.settings = {
-		language: {
-			name: "语言"
-		},
-		resolution: {
-			name: "游戏分辨率",
-			high: "高",
-			medium: "中",
-			low: "低",
-			lowest: "最低"
-		},
-		touchAnimation: {
-			name: "触摸动画"
-		},
-		keyboardSettings: {
-			name: "键盘设置",
-			ka_l: "边缘（左）",
-			don_l: "表面（左）",
-			don_r: "表面（右）",
-			ka_r: "边缘（右）"
-		},
-		gamepadLayout: {
-			name: "操作类型设定",
-			a: "类型A",
-			b: "类型B",
-			c: "类型C"
-		},
-		latency: {
-			name: "Latency",
-			value: "Audio: %s, Video: %s",
-			calibration: "Latency Calibration",
-			audio: "Audio",
-			video: "Video",
-			drumSounds: "Drum Sounds"
-		},
-		easierBigNotes: {
-			name: "简单的大音符"
-		},
-		on: "开",
-		off: "关",
-		default: "重置为默认值",
-		ok: "确定"
-	}
-	this.calibration = {
-		title: "Latency Calibration",
-		ms: "%sms",
-		back: "Back to Settings",
-		retryPrevious: "Retry Previous",
-		start: "Start",
-		finish: "Finish",
-		audioHelp: {
-			title: "Audio Latency Calibration",
-			content: "Listen to a sound playing in the background.\n\nHit the surface of the drum (%s or %s) as you hear it!",
-			contentAlt: "Listen to a sound playing in the background.\n\nHit the surface of the drum as you hear it!"
-		},
-		audioComplete: "Audio Latency Calibration completed!",
-		videoHelp: {
-			title: "Video Latency Calibration",
-			content: "This time there will be no sounds.\n\nInstead, watch for notes blinking on the circle-shaped frame, hit the drum as they appear!"
-		},
-		videoComplete: "Video Latency Calibration completed!",
-		results: {
-			title: "Latency Calibration Results",
-			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
-		}
-	}
-	this.account = {
-		username: "登录名",
-		enterUsername: "输入用户名",
-		password: "密码",
-		enterPassword: "输入密码",
-		repeatPassword: "重新输入密码",
-		remember: "记住登录",
-		login: "登录",
-		register: "注册",
-		registerAccount: "注册帐号",
-		passwordsDoNotMatch: "密码不匹配",
-		newPasswordsDoNotMatch: "New passwords do not match",
-		cannotBeEmpty: "%s不能为空",
-		error: "处理您的请求时发生错误",
-		logout: "登出",
-		back: "返回",
-		cancel: "Cancel",
-		save: "Save",
-		displayName: "Displayed Name",
-		changePassword: "Change Password",
-		currentNewRepeat: [
-			"Current Password",
-			"New Password",
-			"Repeat New Password"
-		],
-		deleteAccount: "Delete Account",
-		verifyPassword: "Verify password to delete this account"
-	}
-	this.serverError = {
-		not_logged_in: "Not logged in",
-		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
-		username_in_use: "A user already exists with that username",
-		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
-		invalid_username_password: "Invalid Username or Password",
-		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
-		current_password_invalid: "Current password does not match",
-		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
-		verify_password_invalid: "Verification password does not match"
-	}
-	this.browserSupport = {
-		browserWarning: "You are running an unsupported browser (%s)",
-		details: "Details...",
-		failedTests: "The following tests have failed:",
-		supportedBrowser: "Please use a supported browser such as %s"
-	}
-	this.creative = {
-		creative: '创作',
-		maker: '制作者'
-	}
-}
-function StringsTw(){
-	this.id = "tw"
-	this.name = "正體中文"
-	this.regex = /^zh-HK$|^zh-TW$/
-	this.font = "Microsoft YaHei, sans-serif"
-	
-	this.taikoWeb = "太鼓網頁"
-	this.titleProceed = "點擊或按確認！"
-	this.titleDisclaimer = "這款非官方模擬器與BANDAI NAMCO無關。"
-	this.titleCopyright = "Taiko no Tatsujin ©&™ 2011 BANDAI NAMCO Entertainment Inc."
-	this.categories = {
-		"J-POP": "流行音樂",
-		"アニメ": "卡通動畫音樂",
-		"ボーカロイド™曲": "VOCALOID™ Music",
-		"バラエティ": "綜合音樂",
-		"クラシック": "古典音樂",
-		"ゲームミュージック": "遊戲音樂",
-		"ナムコオリジナル": "NAMCO原創音樂"
-	}
-	this.selectSong = "選擇樂曲"
-	this.selectDifficulty = "選擇難度"
-	this.back = "返回"
-	this.random = "隨機"
-	this.randomSong = "隨機選曲"
-	this.howToPlay = "操作說明"
-	this.aboutSimulator = "關於模擬器"
-	this.gameSettings = "遊戲設定"
-	this.browse = "開啟檔案…"
-	this.defaultSongList = "默認歌曲列表"
-	this.songOptions = "選項"
-	this.none = "無"
-	this.auto = "自動"
-	this.netplay = "網上對打"
-	this.easy = "簡單"
-	this.normal = "普通"
-	this.hard = "困難"
-	this.oni = "魔王"
-	this.songBranch = "有譜面分歧"
-	this.defaultName = "小咚"
-	this.default2PName = "小咔"
-	this.notLoggedIn = "未登錄"
-	this.sessionStart = "開始多人模式!"
-	this.sessionEnd = "結束多人模式"
-	this.loading = "讀取中..."
-	this.waitingForP2 = "正在等待對方玩家..."
-	this.cancel = "取消"
-	this.note = {
-		don: "咚",
-		ka: "咔",
-		daiDon: "咚(大)",
-		daiKa: "咔(大)",
-		drumroll: "連打ー!!",
-		daiDrumroll: "連打(大)ー!!",
-		balloon: "氣球"
-	}
-	this.ex_note = {
-		don: [
-			"咚",
-			"咚"
-		],
-		ka: [
-			"咔"
-		],
-		daiDon: [
-			"咚(大)",
-			"咚(大)"
-		],
-		daiKa: [
-			"咔(大)"
-		]
-	}
-	this.combo = "連段"
-	this.clear = "通關"
-	this.good = "良"
-	this.ok = "可"
-	this.bad = "不可"
-	this.branch = {
-		"normal": "一般譜面",
-		"advanced": "進階譜面",
-		"master": "達人譜面"
-	}
-	this.pauseOptions = [
-		"繼續演奏",
-		"從頭開始",
-		"返回「選擇樂曲」"
-	]
-	this.results = "發表成績"
-	this.points = "分"
-	this.maxCombo = "最多連段數"
-	this.drumroll = "連打數"
-	
-	this.errorOccured = "An error occurred, please refresh"
-	this.tutorial = {
-		basics: [
-			"當流動的音符將與框框重疊時就用鼓棒敲打太鼓吧",
-			"遇到紅色音符要敲打鼓面（%s或%s）",
-			"遇到藍色音符則敲打鼓邊（%s或%s）",
-			"USB控制器也支持！"
-		],
-		otherControls: "其他控制",
-		otherTutorial: [
-			"%s暫停遊戲",
-			'%s and %s while selecting song \u2014 navigate categories',
-			"選擇難度時按住%s以啟用自動模式",
-			"選擇難度時按住%s以啟用網上對打模式"
-		],
-		ok: "確定"
-	}
-	this.about = {
-		bugReporting: [
-			"This simulator is still in development.",
-			"Please report any bugs you find.",
-			"You can report bugs either via our Git repository or email."
-		],
-		diagnosticWarning: "Be sure to include the following diagnostic data!",
-		issueTemplate: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information.",
-		issues: "問題"
-	}
-	this.session = {
-		multiplayerSession: "多人模式",
-		linkTutorial: "複製下方地址，給你的朋友即可開始一起遊戲！當他們與您聯繫之前，請不要離開此頁面。",
-		cancel: "取消"
-	}
-	this.settings = {
-		language: {
-			name: "語系"
-		},
-		resolution: {
-			name: "遊戲分辨率",
-			high: "高",
-			medium: "中",
-			low: "低",
-			lowest: "最低"
-		},
-		touchAnimation: {
-			name: "觸摸動畫"
-		},
-		keyboardSettings: {
-			name: "鍵盤設置",
-			ka_l: "邊緣（左）",
-			don_l: "表面（左）",
-			don_r: "表面（右）",
-			ka_r: "邊緣（右）"
-		},
-		gamepadLayout: {
-			name: "操作類型設定",
-			a: "類型A",
-			b: "類型B",
-			c: "類型C"
-		},
-		latency: {
-			name: "Latency",
-			value: "Audio: %s, Video: %s",
-			calibration: "Latency Calibration",
-			audio: "Audio",
-			video: "Video",
-			drumSounds: "Drum Sounds"
-		},
-		easierBigNotes: {
-			name: "簡單的大音符"
-		},
-		on: "開",
-		off: "關",
-		default: "重置為默認值",
-		ok: "確定"
-	}
-	this.calibration = {
-		title: "Latency Calibration",
-		ms: "%sms",
-		back: "Back to Settings",
-		retryPrevious: "Retry Previous",
-		start: "Start",
-		finish: "Finish",
-		audioHelp: {
-			title: "Audio Latency Calibration",
-			content: "Listen to a sound playing in the background.\n\nHit the surface of the drum (%s or %s) as you hear it!",
-			contentAlt: "Listen to a sound playing in the background.\n\nHit the surface of the drum as you hear it!"
-		},
-		audioComplete: "Audio Latency Calibration completed!",
-		videoHelp: {
-			title: "Video Latency Calibration",
-			content: "This time there will be no sounds.\n\nInstead, watch for notes blinking on the circle-shaped frame, hit the drum as they appear!"
-		},
-		videoComplete: "Video Latency Calibration completed!",
-		results: {
-			title: "Latency Calibration Results",
-			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
-		}
-	}
-	this.account = {
-		username: "使用者名稱",
-		enterUsername: "輸入用戶名",
-		password: "密碼",
-		enterPassword: "輸入密碼",
-		repeatPassword: "再次輸入密碼",
-		remember: "記住登錄",
-		login: "登入",
-		register: "註冊",
-		registerAccount: "註冊帳號",
-		passwordsDoNotMatch: "密碼不匹配",
-		newPasswordsDoNotMatch: "New passwords do not match",
-		cannotBeEmpty: "%s不能為空",
-		error: "處理您的請求時發生錯誤",
-		logout: "登出",
-		back: "返回",
-		cancel: "Cancel",
-		save: "Save",
-		displayName: "Displayed Name",
-		changePassword: "Change Password",
-		currentNewRepeat: [
-			"Current Password",
-			"New Password",
-			"Repeat New Password"
-		],
-		deleteAccount: "Delete Account",
-		verifyPassword: "Verify password to delete this account"
-	}
-	this.serverError = {
-		not_logged_in: "Not logged in",
-		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
-		username_in_use: "A user already exists with that username",
-		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
-		invalid_username_password: "Invalid Username or Password",
-		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
-		current_password_invalid: "Current password does not match",
-		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
-		verify_password_invalid: "Verification password does not match"
-	}
-	this.browserSupport = {
-		browserWarning: "You are running an unsupported browser (%s)",
-		details: "Details...",
-		failedTests: "The following tests have failed:",
-		supportedBrowser: "Please use a supported browser such as %s"
-	}
-	this.creative = {
-		creative: '創作',
-		maker: '製作者'
-	}
-}
-function StringsKo(){
-	this.id = "ko"
-	this.name = "한국어"
-	this.regex = /^ko$|^ko-/
-	this.font = "Microsoft YaHei, sans-serif"
-	
-	this.taikoWeb = "태고 웹"
-	this.titleProceed = "클릭하거나 Enter를 누릅니다!"
-	this.titleDisclaimer = "이 비공식 시뮬레이터는 반다이 남코와 관련이 없습니다."
-	this.titleCopyright = "Taiko no Tatsujin ©&™ 2011 BANDAI NAMCO Entertainment Inc."
-	this.categories = {
-		"J-POP": "POP",
-		"アニメ": "애니메이션",
-		"ボーカロイド™曲": "VOCALOID™ Music",
-		"バラエティ": "버라이어티",
-		"クラシック": "클래식",
-		"ゲームミュージック": "게임",
-		"ナムコオリジナル": "남코 오리지널"
-	}
-	this.selectSong = "곡 선택"
-	this.selectDifficulty = "난이도 선택"
-	this.back = "돌아간다"
-	this.random = "랜덤"
-	this.randomSong = "랜덤"
-	this.howToPlay = "지도 시간"
-	this.aboutSimulator = "게임 정보"
-	this.gameSettings = "게임 설정"
-	this.browse = "찾아보기…"
-	this.defaultSongList = "기본 노래 목록"
-	this.songOptions = "옵션"
-	this.none = "없음"
-	this.auto = "오토"
-	this.netplay = "넷 플레이"
-	this.easy = "쉬움"
-	this.normal = "보통"
-	this.hard = "어려움"
-	this.oni = "귀신"
-	this.songBranch = "악보 분기 있습니다"
-	this.defaultName = "동이"
-	this.default2PName = "딱이"
-	this.notLoggedIn = "로그인하지 않았습니다"
-	this.sessionStart = "온라인 세션 시작!"
-	this.sessionEnd = "온라인 세션 끝내기"
-	this.loading = "로딩 중..."
-	this.waitingForP2 = "Waiting for Another Player..."
-	this.cancel = "취소"
-	this.note = {
-		don: "쿵",
-		ka: "딱",
-		daiDon: "쿵(대)",
-		daiKa: "딱(대)",
-		drumroll: "연타ー!!",
-		daiDrumroll: "연타(대)ー!!",
-		balloon: "풍선"
-	}
-	this.ex_note = {
-		don: [
-			"쿠",
-			"쿠"
-		],
-		ka: [
-			"딱"
-		],
-		daiDon: [
-			"쿵(대)",
-			"쿵(대)"
-		],
-		daiKa: [
-			"딱(대)"
-		]
-	}
-	this.combo = "콤보"
-	this.clear = "클리어"
-	this.good = "얼쑤"
-	this.ok = "좋다"
-	this.bad = "에구"
-	this.branch = {
-		"normal": "보통 악보",
-		"advanced": "현인 악보",
-		"master": "달인 악보"
-	}
-	this.pauseOptions = [
-		"연주 계속하기",
-		"처음부터 다시",
-		"「곡 선택」으로"
-	]
-	this.results = "성적 발표"
-	this.points = "점"
-	this.maxCombo = "최대 콤보 수"
-	this.drumroll = "연타 횟수"
-	
-	this.errorOccured = "An error occurred, please refresh"
-	this.tutorial = {
-		basics: [
-			"이동하는 음표가 테두리와 겹쳐졌을 때 북채로 태고를 두드리자！",
-			"빨간 음표는 면을 두드리자 (%s 또는 %s)",
-			"파란 음표는 테를 두드리자 (%s 또는 %s)",
-			"USB 컨트롤러도 지원됩니다!"
-		],
-		otherControls: "기타 컨트롤",
-		otherTutorial: [
-			"%s \u2014 게임을 일시 중지합니다",
-			'%s and %s while selecting song \u2014 navigate categories',
-			"난이도 선택 동안 %s 홀드 \u2014 오토 모드 활성화",
-			"난이도 선택 동안 %s 홀드 \u2014 넷 플레이 모드 활성화"
-		],
-		ok: "확인"
-	}
-	this.about = {
-		bugReporting: [
-			"This simulator is still in development.",
-			"Please report any bugs you find.",
-			"You can report bugs either via our Git repository or email."
-		],
-		diagnosticWarning: "Be sure to include the following diagnostic data!",
-		issueTemplate: "###### Describe the problem you are having below. Please include a screenshot and the diagnostic information.",
-		issues: "이슈"
-	}
-	this.session = {
-		multiplayerSession: "Multiplayer Session",
-		linkTutorial: "Share this link with your friend to start playing together! Do not leave this screen while they join.",
-		cancel: "취소"
-	}
-	this.settings = {
-		language: {
-			name: "언어"
-		},
-		resolution: {
-			name: "게임 해상도",
-			high: "높은",
-			medium: "중간",
-			low: "저",
-			lowest: "최저"
-		},
-		touchAnimation: {
-			name: "터치 애니메이션"
-		},
-		keyboardSettings: {
-			name: "키보드 설정",
-			ka_l: "가장자리 (왼쪽)",
-			don_l: "표면 (왼쪽)",
-			don_r: "표면 (오른쪽)",
-			ka_r: "가장자리 (오른쪽)"
-		},
-		gamepadLayout: {
-			name: "조작 타입 설정",
-			a: "타입 A",
-			b: "타입 B",
-			c: "타입 C"
-		},
-		latency: {
-			name: "Latency",
-			value: "Audio: %s, Video: %s",
-			calibration: "Latency Calibration",
-			audio: "Audio",
-			video: "Video",
-			drumSounds: "Drum Sounds"
-		},
-		easierBigNotes: {
-			name: "쉬운 큰 음표"
-		},
-		on: "온",
-		off: "오프",
-		default: "기본값으로 재설정",
-		ok: "확인"
-	}
-	this.calibration = {
-		title: "Latency Calibration",
-		ms: "%sms",
-		back: "Back to Settings",
-		retryPrevious: "Retry Previous",
-		start: "Start",
-		finish: "Finish",
-		audioHelp: {
-			title: "Audio Latency Calibration",
-			content: "Listen to a sound playing in the background.\n\nHit the surface of the drum (%s or %s) as you hear it!",
-			contentAlt: "Listen to a sound playing in the background.\n\nHit the surface of the drum as you hear it!"
-		},
-		audioComplete: "Audio Latency Calibration completed!",
-		videoHelp: {
-			title: "Video Latency Calibration",
-			content: "This time there will be no sounds.\n\nInstead, watch for notes blinking on the circle-shaped frame, hit the drum as they appear!"
-		},
-		videoComplete: "Video Latency Calibration completed!",
-		results: {
-			title: "Latency Calibration Results",
-			content: "Audio latency: %s\nVideo latency: %s\n\nYou can configure these latency values in the settings."
-		}
-	}
-	this.account = {
-		username: "사용자 이름",
-		enterUsername: "사용자 이름을 입력하십시오",
-		password: "비밀번호",
-		enterPassword: "비밀번호 입력",
-		repeatPassword: "비밀번호 재입력",
-		remember: "자동 로그인",
-		login: "로그인",
-		register: "가입하기",
-		registerAccount: "계정 등록",
-		passwordsDoNotMatch: "비밀번호가 일치하지 않습니다",
-		newPasswordsDoNotMatch: "New passwords do not match",
-		cannotBeEmpty: "%s 비어 있을 수 없습니다",
-		error: "요청을 처리하는 동안 오류가 발생했습니다",
-		logout: "로그 아웃",
-		back: "돌아간다",
-		cancel: "Cancel",
-		save: "Save",
-		displayName: "Displayed Name",
-		changePassword: "Change Password",
-		currentNewRepeat: [
-			"Current Password",
-			"New Password",
-			"Repeat New Password"
-		],
-		deleteAccount: "Delete Account",
-		verifyPassword: "Verify password to delete this account"
-	}
-	this.serverError = {
-		not_logged_in: "Not logged in",
-		invalid_username: "Invalid username, a username can only contain letters, numbers, and underscores, and must be between 3 and 20 characters long",
-		username_in_use: "A user already exists with that username",
-		invalid_password: "Cannot use this password, please check that your password is at least 6 characters long",
-		invalid_username_password: "Invalid Username or Password",
-		invalid_display_name: "Cannot use this name, please check that your new name is at most 25 characters long",
-		current_password_invalid: "Current password does not match",
-		invalid_new_password: "Cannot use this password, please check that your new password is at least 6 characters long",
-		verify_password_invalid: "Verification password does not match"
-	}
-	this.browserSupport = {
-		browserWarning: "You are running an unsupported browser (%s)",
-		details: "Details...",
-		failedTests: "The following tests have failed:",
-		supportedBrowser: "Please use a supported browser such as %s"
-	}
-	this.creative = {
-		creative: '창작',
-		maker: '만드는 사람'
-	}
-}
-var allStrings = {
-	"ja": new StringsJa(),
-	"en": new StringsEn(),
-	"cn": new StringsCn(),
-	"tw": new StringsTw(),
-	"ko": new StringsKo()
 }
+separateStrings()

From 0a578578c5dc177b6605cc5d85465c5ba12a968a Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Sun, 15 Mar 2020 14:10:02 +0300
Subject: [PATCH 11/41] Fix strings not having id

---
 public/src/js/strings.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index 6f55c21..957b4aa 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -1085,7 +1085,9 @@ var allStrings = {}
 function separateStrings(){
 	for(var j in languageList){
 		var lang = languageList[j]
-		allStrings[lang] = {}
+		allStrings[lang] = {
+			id: lang
+		}
 		var str = allStrings[lang]
 		var translateObj = function(obj, name, str){
 			if("en" in obj){

From 38f1384f27451c9e8e6434a32bf67177965a044f Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Sun, 15 Mar 2020 18:00:23 +0300
Subject: [PATCH 12/41] ParseSong: Separate events from notes

---
 public/src/js/debug.js    |  4 ++--
 public/src/js/game.js     | 21 ++++-----------------
 public/src/js/parseosu.js | 19 ++++++++++++++++---
 public/src/js/parsetja.js | 15 ++++++++++++---
 public/src/js/view.js     | 20 ++++++++++++--------
 5 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/public/src/js/debug.js b/public/src/js/debug.js
index 271d66a..ffaa253 100644
--- a/public/src/js/debug.js
+++ b/public/src/js/debug.js
@@ -147,8 +147,8 @@ class Debug{
 				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
+			if(this.measureNum > 0 && measures.length >= this.measureNum){
+				var measureMS = measures[this.measureNum - 1].ms
 				var game = this.controller.game
 				game.started = true
 				var timestamp = Date.now()
diff --git a/public/src/js/game.js b/public/src/js/game.js
index e03e1f5..58664b4 100644
--- a/public/src/js/game.js
+++ b/public/src/js/game.js
@@ -5,6 +5,7 @@ class Game{
 		this.songData = songData
 		this.elapsedTime = 0
 		this.currentCircle = -1
+		this.currentEvent = 0
 		this.updateCurrentCircle()
 		this.combo = 0
 		this.rules = new GameRules(this)
@@ -47,13 +48,7 @@ class Game{
 	}
 	initTiming(){
 		// Date when the chrono is started (before the game begins)
-		var firstCircle
-		for(var i = 0; i < this.songData.circles.length; i++){
-			firstCircle = this.songData.circles[i]
-			if(firstCircle.type !== "event"){
-				break
-			}
-		}
+		var firstCircle = this.songData.circles[0]
 		if(this.controller.calibrationMode){
 			var offsetTime = 0
 		}else{
@@ -238,9 +233,6 @@ class Game{
 		}
 	}
 	skipNote(circle){
-		if(circle.type === "event"){
-			return
-		}
 		if(circle.section){
 			this.resetSection()
 		}
@@ -258,9 +250,6 @@ class Game{
 	checkPlays(){
 		var circles = this.songData.circles
 		var circle = circles[this.currentCircle]
-		if(circle && circle.type === "event"){
-			this.updateCurrentCircle()
-		}
 		
 		if(this.controller.autoPlayEnabled){
 			while(circle && this.controller.autoPlay(circle)){
@@ -469,9 +458,7 @@ class Game{
 	}
 	getLastCircle(circles){
 		for(var i = circles.length; i--;){
-			if(circles[i].type !== "event"){
-				return circles[i]
-			}
+			return circles[i]
 		}
 	}
 	whenLastCirclePlayed(){
@@ -623,7 +610,7 @@ class Game{
 		var circles = this.songData.circles
 		do{
 			var circle = circles[++this.currentCircle]
-		}while(circle && (circle.branch && !circle.branch.active || circle.type === "event"))
+		}while(circle && (circle.branch && !circle.branch.active))
 	}
 	getCurrentCircle(){
 		return this.currentCircle
diff --git a/public/src/js/parseosu.js b/public/src/js/parseosu.js
index 0ef70eb..f836cdf 100644
--- a/public/src/js/parseosu.js
+++ b/public/src/js/parseosu.js
@@ -48,6 +48,7 @@ class ParseOsu{
 			lastBeatInterval: 0,
 			bpm: 0
 		}
+		this.events = []
 		this.generalInfo = this.parseGeneralInfo()
 		this.metadata = this.parseMetadata()
 		this.editor = this.parseEditor()
@@ -244,6 +245,18 @@ class ParseOsu{
 		var circles = []
 		var circleID = 0
 		var indexes = this.getStartEndIndexes("HitObjects")
+		var lastBeatMS = this.beatInfo.beatInterval
+		var lastGogo = false
+		
+		var pushCircle = circle => {
+			circles.push(circle)
+			if(lastBeatMS !== circle.beatMS || lastGogo !== circle.gogoTime){
+				lastBeatMS = circle.beatMS
+				lastGogo = circle.gogoTime
+				this.events.push(circle)
+			}
+		}
+		
 		for(var i = indexes.start; i <= indexes.end; i++){
 			circleID++
 			var values = this.data[i].split(",")
@@ -277,7 +290,7 @@ class ParseOsu{
 				var endTime = parseInt(values[this.osu.ENDTIME])
 				var hitMultiplier = this.difficultyRange(this.difficulty.overallDifficulty, 3, 5, 7.5) * 1.65
 				var requiredHits = Math.floor(Math.max(1, (endTime - start) / 1000 * hitMultiplier))
-				circles.push(new Circle({
+				pushCircle(new Circle({
 					id: circleID,
 					start: start + this.offset,
 					type: "balloon",
@@ -304,7 +317,7 @@ class ParseOsu{
 					type = "drumroll"
 					txt = strings.note.drumroll
 				}
-				circles.push(new Circle({
+				pushCircle(new Circle({
 					id: circleID,
 					start: start + this.offset,
 					type: type,
@@ -339,7 +352,7 @@ class ParseOsu{
 					emptyValue = true
 				}
 				if(!emptyValue){
-					circles.push(new Circle({
+					pushCircle(new Circle({
 						id: circleID,
 						start: start + this.offset,
 						type: type,
diff --git a/public/src/js/parsetja.js b/public/src/js/parsetja.js
index 515266d..6c51ef1 100644
--- a/public/src/js/parsetja.js
+++ b/public/src/js/parsetja.js
@@ -43,6 +43,7 @@
 		this.metadata = this.parseMetadata()
 		this.measures = []
 		this.beatInfo = {}
+		this.events = []
 		if(!metaOnly){
 			this.circles = this.parseCircles()
 		}
@@ -248,7 +249,12 @@
 							lastDrumroll = circleObj
 						}
 						
-						circles.push(circleObj)
+						if(note.event){
+							this.events.push(circleObj)
+						}
+						if(note.type !== "event"){
+							circles.push(circleObj)
+						}
 					} else if (!(currentMeasure.length >= 24 && (!currentMeasure[i + 1] || currentMeasure[i + 1].type))
 						&& !(currentMeasure.length >= 48 && (!currentMeasure[i + 2] || currentMeasure[i + 2].type || !currentMeasure[i + 3] || currentMeasure[i + 3].type))) { 
 						if (note_chain.length > 1 && currentMeasure.length >= 8) { 
@@ -266,9 +272,12 @@
 			}
 		}
 		var insertNote = circleObj => {
-			lastBpm = bpm
-			lastGogo = gogo
 			if(circleObj){
+				if(bpm !== lastBpm || gogo !== lastGogo){
+					circleObj.event = true
+					lastBpm = bpm
+					lastGogo = gogo
+				}
 				currentMeasure.push(circleObj)
 			}
 		}
diff --git a/public/src/js/view.js b/public/src/js/view.js
index 12e48b0..ba7ece8 100644
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -1584,17 +1584,21 @@
 				// Start animation to gauge
 				circle.animate(ms)
 			}
-			if(ms - this.controller.audioLatency >= circle.ms && !circle.beatMSCopied && (!circle.branch || circle.branch.active)){
-				if(this.beatInterval !== circle.beatMS){
-					this.changeBeatInterval(circle.beatMS)
+		}
+		var game = this.controller.game
+		for(var i = 0; i < game.songData.events.length; i++){
+			var event = game.songData.events[i]
+			if(ms - this.controller.audioLatency >= event.ms && !event.beatMSCopied && (!event.branch || event.branch.active)){
+				if(this.beatInterval !== event.beatMS){
+					this.changeBeatInterval(event.beatMS)
 				}
-				circle.beatMSCopied = true
+				event.beatMSCopied = true
 			}
-			if(ms - this.controller.audioLatency >= circle.ms && !circle.gogoChecked && (!circle.branch || circle.branch.active)){
-				if(this.gogoTime != circle.gogoTime){
-					this.toggleGogoTime(circle)
+			if(ms - this.controller.audioLatency >= event.ms && !event.gogoChecked && (!event.branch || event.branch.active)){
+				if(this.gogoTime != event.gogoTime){
+					this.toggleGogoTime(event)
 				}
-				circle.gogoChecked = true
+				event.gogoChecked = true
 			}
 		}
 	}

From 61e521dda3042d898195788e4048709d28a24538 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Sun, 15 Mar 2020 16:16:18 +0000
Subject: [PATCH 13/41] update song edit page

---
 app.py                           | 47 ++++++++++++++++++++++--
 public/src/css/admin.css         |  9 ++++-
 templates/admin_song_detail.html | 61 ++++++++++++++++++++++++--------
 tools/migrate_db.py              |  8 ++---
 4 files changed, 104 insertions(+), 21 deletions(-)

diff --git a/app.py b/app.py
index ee3ad4d..ee64489 100644
--- a/app.py
+++ b/app.py
@@ -7,7 +7,7 @@ import schema
 import os
 
 from functools import wraps
-from flask import Flask, g, jsonify, render_template, request, abort, redirect, session
+from flask import Flask, g, jsonify, render_template, request, abort, redirect, session, flash
 from flask_caching import Cache
 from flask_session import Session
 from ffmpy import FFmpeg
@@ -135,9 +135,52 @@ def route_admin_songs_id(id):
 
     categories = list(db.categories.find({}))
     song_skins = list(db.song_skins.find({}))
+    makers = list(db.makers.find({}))
+    user = db.users.find_one({'username': session['username']})
 
     return render_template('admin_song_detail.html',
-        song=song, categories=categories, song_skins=song_skins)
+        song=song, categories=categories, song_skins=song_skins, makers=makers, admin=user)
+
+
+@app.route('/admin/songs/<int:id>', methods=['POST'])
+@admin_required
+def route_admin_songs_id_post(id):
+    song = db.songs.find_one({'id': id})
+    if not song:
+        return abort(404)
+
+    user = db.users.find_one({'username': session['username']})
+    user_level = user['user_level']
+
+    output = {'title_lang': {}, 'subtitle_lang': {}, 'courses': {}}
+    if user_level >= 100:
+        output['enabled'] = True if request.form.get('enabled') else False
+
+    output['title'] = request.form.get('title') or None
+    output['subtitle'] = request.form.get('subtitle') or None
+    for lang in ['ja', 'en', 'cn', 'tw', 'ko']:
+        output['title_lang'][lang] = request.form.get('title_%s' % lang) or None
+        output['subtitle_lang'][lang] = request.form.get('subtitle_%s' % lang) or None
+
+    for course in ['easy', 'normal', 'hard', 'oni', 'ura']:
+        if request.form.get('course_%s' % course):
+            output['courses'][course] = {'stars': int(request.form.get('course_%s' % course)),
+                                         'branch': True if request.form.get('branch_%s' % course) else False}
+        else:
+            output['courses'][course] = None
+    
+    output['category_id'] = int(request.form.get('category_id'))
+    output['type'] = request.form.get('type')
+    output['offset'] = float(request.form.get('offset')) or None
+    output['skin_id'] = int(request.form.get('skin_id')) or None
+    output['preview'] = float(request.form.get('preview')) or None
+    output['volume'] = float(request.form.get('volume')) or None
+    output['maker_id'] = int(request.form.get('maker_id')) or None
+
+    db.songs.update_one({'id': id}, {'$set': output})
+    flash('Changes saved.')
+
+    return redirect('/admin/songs/%s' % id)
 
 
 @app.route('/api/preview')
diff --git a/public/src/css/admin.css b/public/src/css/admin.css
index 5b2f22d..7445630 100644
--- a/public/src/css/admin.css
+++ b/public/src/css/admin.css
@@ -122,4 +122,11 @@ h1 small {
 .checkbox input {
     margin-right: 3px;
     margin-left: 5px;
-}
\ No newline at end of file
+}
+
+.message {
+    background: #2c862f;
+    padding: 15px;
+    margin-bottom: 10px;
+    color: white;
+}
diff --git a/templates/admin_song_detail.html b/templates/admin_song_detail.html
index 322c835..a8e2d54 100644
--- a/templates/admin_song_detail.html
+++ b/templates/admin_song_detail.html
@@ -1,43 +1,46 @@
 {% extends 'admin.html' %}
 {% block content %}
 <h1>{{ song.title }} <small>(ID: {{ song.id }})</small></h1>
+{% for message in get_flashed_messages() %}
+<div class="message">{{ message }}</div>
+{% endfor %}
 <div class="song-form">
     <form method="post">
 
         <div class="form-field">
-            <span class="checkbox"><input type="checkbox" name="enabled" id="enabled"{% if song.enabled %} checked{% endif %}><label for="enabled"> Enabled</label></span>
+            <span class="checkbox"><input type="checkbox" name="enabled" id="enabled"{% if song.enabled %} checked{% endif %}{% if admin.user_level < 100 %} disabled {% endif %}><label for="enabled"> Enabled</label></span>
         </div>
 
         <div class="form-field">
             <p>Title</p>
             <label for="title">Original</label>
-            <input type="text" id="title" value="{{song.title}}" name="title">
+            <input type="text" id="title" value="{{song.title or ''}}" name="title" required>
             <label for="title_ja">Japanese</label>
-            <input type="text" id="title_ja" value="{{song.title_lang.ja}}" name="title_ja">
+            <input type="text" id="title_ja" value="{{song.title_lang.ja or ''}}" name="title_ja">
             <label for="title_en">English</label>
-            <input type="text" id="title_en" value="{{song.title_lang.en}}" name="title_en">
+            <input type="text" id="title_en" value="{{song.title_lang.en or ''}}" name="title_en">
             <label for="title_cn">Chinese (Simplified)</label>
-            <input type="text" id="title_cn" value="{{song.title_lang.cn}}" name="title_cn">
+            <input type="text" id="title_cn" value="{{song.title_lang.cn or ''}}" name="title_cn">
             <label for="title_tw">Chinese (Traditional)</label>
-            <input type="text" id="title_tw" value="{{song.title_lang.tw}}" name="title_tw">
+            <input type="text" id="title_tw" value="{{song.title_lang.tw or ''}}" name="title_tw">
             <label for="title_ko">Korean</label>
-            <input type="text" id="title_ko" value="{{song.title_lang.ko}}" name="title_ko">
+            <input type="text" id="title_ko" value="{{song.title_lang.ko or ''}}" name="title_ko">
         </div>
 
         <div class="form-field">
             <p>Subtitle</p>
             <label for="subtitle">Original</label>
-            <input type="text" id="subtitle" value="{{song.subtitle}}" name="subtitle">
+            <input type="text" id="subtitle" value="{{song.subtitle or ''}}" name="subtitle">
             <label for="subtitle_ja">Japanese</label>
-            <input type="text" id="subtitle_ja" value="{{song.subtitle_lang.ja}}" name="subtitle_ja">
+            <input type="text" id="subtitle_ja" value="{{song.subtitle_lang.ja or ''}}" name="subtitle_ja">
             <label for="subtitle_en">English</label>
-            <input type="text" id="subtitle_en" value="{{song.subtitle_lang.en}}" name="subtitle_en">
+            <input type="text" id="subtitle_en" value="{{song.subtitle_lang.en or ''}}" name="subtitle_en">
             <label for="subtitle_cn">Chinese (Simplified)</label>
-            <input type="text" id="subtitle_cn" value="{{song.subtitle_lang.cn}}" name="subtitle_cn">
+            <input type="text" id="subtitle_cn" value="{{song.subtitle_lang.cn or ''}}" name="subtitle_cn">
             <label for="subtitle_tw">Chinese (Traditional)</label>
-            <input type="text" id="subtitle_tw" value="{{song.subtitle_lang.tw}}" name="subtitle_tw">
+            <input type="text" id="subtitle_tw" value="{{song.subtitle_lang.tw or ''}}" name="subtitle_tw">
             <label for="subtitle_ko">Korean</label>
-            <input type="text" id="subtitle_ko" value="{{song.subtitle_lang.ko}}" name="subtitle_ko">
+            <input type="text" id="subtitle_ko" value="{{song.subtitle_lang.ko or ''}}" name="subtitle_ko">
         </div>
 
         <div class="form-field">
@@ -78,7 +81,37 @@
 
         <div class="form-field">
             <p><label for="offset">Offset</label></p>
-            <input type="text" id="offset" value="{{song.offset}}" name="offset">
+            <input type="text" id="offset" value="{{song.offset or '0'}}" name="offset" required>
+        </div>
+
+        <div class="form-field">
+            <p><label for="skin_id">Skin</label></p>
+            <select name="skin_id" id="skin_id">
+                <option value="0">(none)</option>
+                {% for skin in song_skins %}
+                    <option value="{{ skin.id }}"{% if song.skin_id == skin.id %} selected{% endif %}>{{ skin.name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="form-field">
+            <p><label for="preview">Preview</label></p>
+            <input type="text" id="preview" value="{{song.preview or '0'}}" name="preview" required>
+        </div>
+
+        <div class="form-field">
+            <p><label for="volume">Volume</label></p>
+            <input type="text" id="volume" value="{{song.volume or '1.0'}}" name="volume" required>
+        </div>
+
+        <div class="form-field">
+            <p><label for="maker_id">Maker</label></p>
+            <select name="maker_id" id="maker_id">
+                <option value="0">(none)</option>
+                {% for maker in makers %}
+                    <option value="{{ maker.id }}"{% if song.maker_id == maker.id %} selected{% endif %}>{{ maker.name }}</option>
+                {% endfor %}
+            </select>
         </div>
 
         <button type="submit">Save</button>
diff --git a/tools/migrate_db.py b/tools/migrate_db.py
index 7ae71c6..9f88bfd 100644
--- a/tools/migrate_db.py
+++ b/tools/migrate_db.py
@@ -5,7 +5,7 @@ import sqlite3
 from pymongo import MongoClient
 
 client = MongoClient()
-#client.drop_database('taiko')
+client.drop_database('taiko')
 db = client.taiko
 sqdb = sqlite3.connect('taiko.db')
 sqdb.row_factory = sqlite3.Row
@@ -26,10 +26,10 @@ def migrate_songs():
             'enabled': True if row['enabled'] else False,
             'category_id': row['category'],
             'type': row['type'],
-            'offset': row['offset'],
+            'offset': row['offset'] or 0,
             'skin_id': row['skin_id'],
-            'preview': row['preview'],
-            'volume':  row['volume'],
+            'preview': row['preview'] or 0,
+            'volume':  row['volume'] or 1.0,
             'maker_id': row['maker_id'],
             'hash': row['hash'],
             'order': row['id']

From c5f85d0d871f3629a28f9957f4509f5f6e0bd615 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Sun, 15 Mar 2020 16:25:38 +0000
Subject: [PATCH 14/41] allow null category id

---
 app.py                           | 2 +-
 templates/admin_song_detail.html | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app.py b/app.py
index ee64489..76a0dcc 100644
--- a/app.py
+++ b/app.py
@@ -169,7 +169,7 @@ def route_admin_songs_id_post(id):
         else:
             output['courses'][course] = None
     
-    output['category_id'] = int(request.form.get('category_id'))
+    output['category_id'] = int(request.form.get('category_id')) or None
     output['type'] = request.form.get('type')
     output['offset'] = float(request.form.get('offset')) or None
     output['skin_id'] = int(request.form.get('skin_id')) or None
diff --git a/templates/admin_song_detail.html b/templates/admin_song_detail.html
index a8e2d54..9389f2d 100644
--- a/templates/admin_song_detail.html
+++ b/templates/admin_song_detail.html
@@ -65,6 +65,7 @@
         <div class="form-field">
             <p><label for="category_id">Category</label></p>
             <select name="category_id" id="category_id">
+                <option value="0">(none)</option>
                 {% for category in categories %}
                     <option value="{{ category.id }}"{% if song.category_id == category.id %} selected{% endif %}>{{ category.title }}</option>
                 {% endfor %}

From 33b9b206a791878b627d3d60d074125d1bda053f Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 16 Mar 2020 12:54:21 +0300
Subject: [PATCH 15/41] Improve the loading screen error message

- Fix subtitle if the previously selected song had the same title
---
 public/src/css/loader.css    |  17 ++++
 public/src/css/view.css      |   4 +-
 public/src/js/about.js       |   2 +-
 public/src/js/loader.js      | 152 ++++++++++++++++++++++++++---------
 public/src/js/songselect.js  |   6 +-
 public/src/views/about.html  |   2 +-
 public/src/views/loader.html |   7 ++
 7 files changed, 147 insertions(+), 43 deletions(-)

diff --git a/public/src/css/loader.css b/public/src/css/loader.css
index 9e97ec1..fcc7c23 100644
--- a/public/src/css/loader.css
+++ b/public/src/css/loader.css
@@ -117,3 +117,20 @@ body{
 	color: #777;
 	text-shadow: 0.05em 0.05em #fff;
 }
+.view-outer.loader-error-div,
+.loader-error-div .diag-txt{
+	display: none
+}
+.loader-error-div{
+	font-family: sans-serif;
+}
+.loader-error-div .debug-link{
+	color: #00f;
+	text-decoration: underline;
+	cursor: pointer;
+	float: right;
+}
+.loader-error-div .diag-txt textarea,
+.loader-error-div .diag-txt iframe{
+	height: 10em;
+}
diff --git a/public/src/css/view.css b/public/src/css/view.css
index 4696d02..13dbefd 100644
--- a/public/src/css/view.css
+++ b/public/src/css/view.css
@@ -108,8 +108,8 @@ kbd{
 .left-buttons .taibtn{
 	margin-right: 0.4em;
 }
-#diag-txt textarea,
-#diag-txt iframe{
+.diag-txt textarea,
+.diag-txt iframe{
 	width: 100%;
 	height: 5em;
 	font-size: inherit;
diff --git a/public/src/js/about.js b/public/src/js/about.js
index 8037a29..a2712c7 100644
--- a/public/src/js/about.js
+++ b/public/src/js/about.js
@@ -5,7 +5,7 @@
 		cancelTouch = false
 		
 		this.endButton = this.getElement("view-end-button")
-		this.diagTxt = document.getElementById("diag-txt")
+		this.diagTxt = this.getElement("diag-txt")
 		this.version = document.getElementById("version-link").href
 		this.tutorialOuter = this.getElement("view-outer")
 		if(touchEnabled){
diff --git a/public/src/js/loader.js b/public/src/js/loader.js
index 6ca9d0e..2f62e19 100644
--- a/public/src/js/loader.js
+++ b/public/src/js/loader.js
@@ -5,6 +5,7 @@ class Loader{
 		this.assetsDiv = document.getElementById("assets")
 		this.screen = document.getElementById("screen")
 		this.startTime = Date.now()
+		this.errorMessages = []
 		
 		var promises = []
 		
@@ -28,17 +29,24 @@ class Loader{
 		
 		if(gameConfig.custom_js){
 			var script = document.createElement("script")
-			this.addPromise(pageEvents.load(script))
-			script.src = gameConfig.custom_js + queryString
+			var url = gameConfig.custom_js + queryString
+			this.addPromise(pageEvents.load(script), url)
+			script.src = url
 			document.head.appendChild(script)
 		}
 		assets.js.forEach(name => {
 			var script = document.createElement("script")
-			this.addPromise(pageEvents.load(script))
-			script.src = "/src/js/" + name + queryString
+			var url = "/src/js/" + name + queryString
+			this.addPromise(pageEvents.load(script), url)
+			script.src = url
 			document.head.appendChild(script)
 		})
 		
+		var pageVersion = versionLink.href
+		var index = pageVersion.lastIndexOf("/")
+		if(index !== -1){
+			pageVersion = pageVersion.slice(index + 1)
+		}
 		this.addPromise(new Promise((resolve, reject) => {
 			if(
 				versionLink.href !== gameConfig._version.url &&
@@ -69,39 +77,43 @@ class Loader{
 			}
 			var interval = setInterval(checkStyles, 100)
 			checkStyles()
-		}))
+		}), "Version on the page and config does not match\n(page:  " + pageVersion + ",\nconfig: "+ gameConfig._version.commit + ")")
 		
 		for(var name in assets.fonts){
-			this.addPromise(new FontFace(name, "url('" + gameConfig.assets_baseurl + "fonts/" + assets.fonts[name] + "')").load().then(font => {
+			var url = gameConfig.assets_baseurl + "fonts/" + assets.fonts[name]
+			this.addPromise(new FontFace(name, "url('" + url + "')").load().then(font => {
 				document.fonts.add(font)
-			}))
+			}), url)
 		}
 		
 		assets.img.forEach(name => {
 			var id = this.getFilename(name)
 			var image = document.createElement("img")
-			this.addPromise(pageEvents.load(image))
+			var url = gameConfig.assets_baseurl + "img/" + name
+			this.addPromise(pageEvents.load(image), url)
 			image.id = name
-			image.src = gameConfig.assets_baseurl + "img/" + name
+			image.src = url
 			this.assetsDiv.appendChild(image)
 			assets.image[id] = image
 		})
 		
 		assets.views.forEach(name => {
 			var id = this.getFilename(name)
-			this.addPromise(this.ajax("/src/views/" + name + queryString).then(page => {
+			var url = "/src/views/" + name + queryString
+			this.addPromise(this.ajax(url).then(page => {
 				assets.pages[id] = page
-			}))
+			}), url)
 		})
 		
 		this.addPromise(this.ajax("/api/songs").then(songs => {
 			assets.songsDefault = JSON.parse(songs)
 			assets.songs = assets.songsDefault
-		}))
+		}), "/api/songs")
 		
-		this.addPromise(this.ajax(gameConfig.assets_baseurl + "img/vectors.json" + queryString).then(response => {
+		var url = gameConfig.assets_baseurl + "img/vectors.json" + queryString
+		this.addPromise(this.ajax(url).then(response => {
 			vectors = JSON.parse(response)
-		}))
+		}), url)
 		
 		this.afterJSCount =
 			["blurPerformance"].length +
@@ -112,6 +124,9 @@ class Loader{
 			(gameConfig.accounts ? 1 : 0)
 		
 		Promise.all(this.promises).then(() => {
+			if(this.error){
+				return
+			}
 			
 			snd.buffer = new SoundBuffer()
 			snd.musicGain = snd.buffer.createGain()
@@ -131,20 +146,20 @@ class Loader{
 			this.afterJSCount = 0
 			
 			assets.audioSfx.forEach(name => {
-				this.addPromise(this.loadSound(name, snd.sfxGain))
+				this.addPromise(this.loadSound(name, snd.sfxGain), this.soundUrl(name))
 			})
 			assets.audioMusic.forEach(name => {
-				this.addPromise(this.loadSound(name, snd.musicGain))
+				this.addPromise(this.loadSound(name, snd.musicGain), this.soundUrl(name))
 			})
 			assets.audioSfxLR.forEach(name => {
 				this.addPromise(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)
-				}))
+				}), this.soundUrl(name))
 			})
 			assets.audioSfxLoud.forEach(name => {
-				this.addPromise(this.loadSound(name, snd.sfxLoudGain))
+				this.addPromise(this.loadSound(name, snd.sfxLoudGain), this.soundUrl(name))
 			})
 			
 			this.canvasTest = new CanvasTest()
@@ -154,7 +169,7 @@ class Loader{
 					// Less than 50 fps with blur enabled
 					disableBlur = true
 				}
-			}))
+			}), "blurPerformance")
 			
 			if(gameConfig.accounts){
 				this.addPromise(this.ajax("/api/scores/get").then(response => {
@@ -166,7 +181,7 @@ class Loader{
 						scoreStorage.load(response.scores)
 						pageEvents.send("login", account.username)
 					}
-				}))
+				}), "/api/scores/get")
 			}
 			
 			settings = new Settings()
@@ -174,6 +189,9 @@ class Loader{
 			scoreStorage = new ScoreStorage()
 			
 			Promise.all(this.promises).then(() => {
+				if(this.error){
+					return
+				}
 				if(!account.loggedIn){
 					scoreStorage.load()
 				}
@@ -250,27 +268,36 @@ class Loader{
 		})
 	
 	}
-	addPromise(promise){
+	addPromise(promise, url){
 		this.promises.push(promise)
-		promise.then(this.assetLoaded.bind(this), this.errorMsg.bind(this))
+		promise.then(this.assetLoaded.bind(this), response => {
+			this.errorMsg(response, url)
+			return Promise.resolve()
+		})
+	}
+	soundUrl(name){
+		return gameConfig.assets_baseurl + "audio/" + name
 	}
 	loadSound(name, gain){
 		var id = this.getFilename(name)
-		return gain.load(gameConfig.assets_baseurl + "audio/" + name).then(sound => {
+		return gain.load(this.soundUrl(name)).then(sound => {
 			assets.sounds[id] = sound
 		})
 	}
 	getFilename(name){
 		return name.slice(0, name.lastIndexOf("."))
 	}
-	errorMsg(error){
-		if(Array.isArray(error) && error[1] instanceof HTMLElement){
-			error = error[0] + ": " + error[1].outerHTML
+	errorMsg(error, url){
+		if(url || error){
+			if(url){
+				error = (Array.isArray(error) ? error[0] + ": " : (error ? error + ": " : "")) + url
+			}
+			this.errorMessages.push(error)
+			pageEvents.send("loader-error", url || error)
 		}
-		console.error(error)
-		pageEvents.send("loader-error", error)
 		if(!this.error){
 			this.error = true
+			cancelTouch = false
 			this.loaderDiv.classList.add("loaderError")
 			if(typeof allStrings === "object"){
 				var lang = localStorage.lang
@@ -288,14 +315,57 @@ class Loader{
 				if(!lang){
 					lang = "en"
 				}
-				var errorOccured = allStrings[lang].errorOccured
-			}else{
-				var errorOccured = "An error occurred, please refresh"
+				loader.screen.getElementsByClassName("view-content")[0].innerText = allStrings[lang].errorOccured
 			}
-			this.loaderPercentage.appendChild(document.createElement("br"))
-			this.loaderPercentage.appendChild(document.createTextNode(errorOccured))
-			this.clean()
+			var loaderError = loader.screen.getElementsByClassName("loader-error-div")[0]
+			loaderError.style.display = "flex"
+			var diagTxt = loader.screen.getElementsByClassName("diag-txt")[0]
+			var debugLink = loader.screen.getElementsByClassName("debug-link")[0]
+			if(navigator.userAgent.indexOf("Android") >= 0){
+				var iframe = document.createElement("iframe")
+				diagTxt.appendChild(iframe)
+				var body = iframe.contentWindow.document.body
+				body.setAttribute("style", `
+					font-family: monospace;
+					margin: 2px 0 0 2px;
+					white-space: pre-wrap;
+					word-break: break-all;
+					cursor: text;
+				`)
+				body.setAttribute("onblur", `
+					getSelection().removeAllRanges()
+				`)
+				this.errorTxt = {
+					element: body,
+					method: "innerText"
+				}
+			}else{
+				var textarea = document.createElement("textarea")
+				textarea.readOnly = true
+				diagTxt.appendChild(textarea)
+				if(!this.touchEnabled){
+					textarea.addEventListener("focus", () => {
+						textarea.select()
+					})
+					textarea.addEventListener("blur", () => {
+						getSelection().removeAllRanges()
+					})
+				}
+				this.errorTxt = {
+					element: textarea,
+					method: "value"
+				}
+			}
+			var show = () => {
+				diagTxt.style.display = "block"
+				debugLink.style.display = "none"
+			}
+			debugLink.addEventListener("click", show)
+			debugLink.addEventListener("touchstart", show)
+			this.clean(true)
 		}
+		var percentage = Math.floor(this.loadedAssets * 100 / (this.promises.length + this.afterJSCount))
+		this.errorTxt.element[this.errorTxt.method] = "```\n" + this.errorMessages.join("\n") + "\nPercentage: " + percentage + "%\n```"
 	}
 	assetLoaded(){
 		if(!this.error){
@@ -314,7 +384,11 @@ class Loader{
 			var request = new XMLHttpRequest()
 			request.open("GET", url)
 			pageEvents.load(request).then(() => {
-				resolve(request.response)
+				if(request.status === 200){
+					resolve(request.response)
+				}else{
+					reject()
+				}
 			}, reject)
 			if(customRequest){
 				customRequest(request)
@@ -322,14 +396,18 @@ class Loader{
 			request.send()
 		})
 	}
-	clean(){
+	clean(error){
 		var fontDetectDiv = document.getElementById("fontdetectHelper")
 		if(fontDetectDiv){
 			fontDetectDiv.parentNode.removeChild(fontDetectDiv)
 		}
+		delete this.loaderDiv
 		delete this.loaderPercentage
 		delete this.loaderProgress
-		delete this.promises
+		if(!error){
+			delete this.promises
+			delete this.errorText
+		}
 		pageEvents.remove(root, "touchstart")
 	}
 }
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 04d8ed4..7a7da40 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -246,6 +246,7 @@ class SongSelect{
 		
 		this.selectedSong = 0
 		this.selectedDiff = 0
+		this.lastCurrentSong = {}
 		assets.sounds["bgm_songsel"].playLoop(0.1, false, 0, 1.442, 3.506)
 		
 		if(!assets.customSongs && !fromTutorial && !("selectedSong" in localStorage) && !songId){
@@ -1243,8 +1244,9 @@ class SongSelect{
 			highlight = 0
 		}
 		
-		if(this.currentSongTitle !== currentSong.title){
-			this.currentSongTitle = currentSong.title
+		if(this.lastCurrentSong.title !== currentSong.title || this.lastCurrentSong.subtitle !== currentSong.subtitle){
+			this.lastCurrentSong.title = currentSong.title
+			this.lastCurrentSong.subtitle = currentSong.subtitle
 			this.currentSongCache.clear()
 		}
 		
diff --git a/public/src/views/about.html b/public/src/views/about.html
index ae18ed6..0e168ee 100644
--- a/public/src/views/about.html
+++ b/public/src/views/about.html
@@ -2,7 +2,7 @@
 	<div class="view">
 		<div class="view-title stroke-sub"></div>
 		<div class="view-content"></div>
-		<div id="diag-txt"></div>
+		<div class="diag-txt"></div>
 		<div class="left-buttons">
 			<div id="link-issues" class="taibtn stroke-sub link-btn">
 				<a target="_blank"></a>
diff --git a/public/src/views/loader.html b/public/src/views/loader.html
index 865568a..e1bb5f0 100644
--- a/public/src/views/loader.html
+++ b/public/src/views/loader.html
@@ -2,3 +2,10 @@
 	<div class="progress"></div>
 	<span class="percentage">0%</span>
 </div>
+<div class="view-outer loader-error-div">
+	<div class="view">
+		<div class="view-content">An error occurred, please refresh</div>
+		<div class="diag-txt"></div>
+		<span class="debug-link">Debug</span>
+	</div>
+</div>

From a25e108a4b31674be6909939f786be71011e26f3 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 16 Mar 2020 15:22:16 +0300
Subject: [PATCH 16/41] SongSelect: Session sound effects play in appropriate
 sound channels

---
 public/src/js/assets.js     |  8 ++++----
 public/src/js/controller.js |  6 +++++-
 public/src/js/songselect.js | 36 +++++++++++++++++++-----------------
 server.py                   |  5 +++++
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/public/src/js/assets.js b/public/src/js/assets.js
index 220e6d5..5230169 100644
--- a/public/src/js/assets.js
+++ b/public/src/js/assets.js
@@ -87,11 +87,7 @@ var assets = {
 		"settings_gamepad.png"
 	],
 	"audioSfx": [
-		"se_cancel.wav",
-		"se_don.wav",
-		"se_ka.wav",
 		"se_pause.wav",
-		"se_jump.wav",
 		"se_calibration.wav",
 
 		"v_results.wav",
@@ -103,6 +99,10 @@ var assets = {
 	"audioSfxLR": [
 		"neiro_1_don.wav",
 		"neiro_1_ka.wav",
+		"se_cancel.wav",
+		"se_don.wav",
+		"se_ka.wav",
+		"se_jump.wav",
 
 		"se_balloon.wav",
 		"se_gameclear.wav",
diff --git a/public/src/js/controller.js b/public/src/js/controller.js
index 9b06aa1..ba383e2 100644
--- a/public/src/js/controller.js
+++ b/public/src/js/controller.js
@@ -6,7 +6,11 @@ class Controller{
 		this.saveScore = !autoPlayEnabled
 		this.multiplayer = multiplayer
 		this.touchEnabled = touchEnabled
-		this.snd = this.multiplayer ? "_p" + this.multiplayer : ""
+		if(multiplayer === 2){
+			this.snd = p2.player === 2 ? "_p1" : "_p2"
+		}else{
+			this.snd = multiplayer ? "_p" + p2.player : ""
+		}
 		
 		this.calibrationMode = selectedSong.folder === "calibration"
 		this.audioLatency = 0
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 7a7da40..11d94fd 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -497,7 +497,7 @@ class SongSelect{
 				window.open(this.songs[this.selectedSong].maker.url)
 			}else if(moveBy === this.diffOptions.length + 4){
 				this.state.ura = !this.state.ura
-				this.playSound("se_ka")
+				this.playSound("se_ka", 0, p2.session ? p2.player : false)
 				if(this.selectedDiff === this.diffOptions.length + 4 && !this.state.ura){
 					this.state.move = -1
 				}
@@ -639,9 +639,10 @@ class SongSelect{
 			var scroll = resize2 - resize - scrollDelay * 2
 			
 			var soundsDelay = Math.abs((scroll + resize) / moveBy)
+			this.lastMoveBy = fromP2 ? fromP2.player : false
 			
 			for(var i = 0; i < Math.abs(moveBy) - 1; i++){
-				this.playSound("se_ka", (resize + i * soundsDelay) / 1000)
+				this.playSound("se_ka", (resize + i * soundsDelay) / 1000, fromP2 ? fromP2.player : false)
 			}
 			this.pointer(false)
 		}
@@ -663,7 +664,7 @@ class SongSelect{
 			this.state.locked = 1
 			
 			this.endPreview()
-			this.playSound("se_jump")
+			this.playSound("se_jump", 0, fromP2 ? fromP2.player : false)
 		}
 	}
 
@@ -672,7 +673,7 @@ class SongSelect{
 			this.state.move = moveBy
 			this.state.moveMS = this.getMS() - 500
 			this.state.locked = 1
-			this.playSound("se_ka")
+			this.playSound("se_ka", 0, p2.session ? p2.player : false)
 		}
 	}
 	
@@ -703,7 +704,7 @@ class SongSelect{
 					this.selectedDiff = this.diffOptions.length + 3
 				}
 				
-				this.playSound("se_don")
+				this.playSound("se_don", 0, fromP2 ? fromP2.player : false)
 				assets.sounds["v_songsel"].stop()
 				this.playSound("v_diffsel", 0.3)
 				pageEvents.send("song-select-difficulty", currentSong)
@@ -711,14 +712,14 @@ class SongSelect{
 				this.clean()
 				this.toTitleScreen()
 			}else if(currentSong.action === "random"){
-				this.playSound("se_don")
+				this.playSound("se_don", 0, fromP2 ? fromP2.player : false)
 				this.state.locked = true
 				do{
 					var i = Math.floor(Math.random() * this.songs.length)
 				}while(!this.songs[i].courses)
 				var moveBy = i - this.selectedSong
 				setTimeout(() => {
-					this.moveToSong(moveBy)
+					this.moveToSong(moveBy, fromP2)
 				}, 200)
 				pageEvents.send("song-select-random")
 			}else if(currentSong.action === "tutorial"){
@@ -748,7 +749,7 @@ class SongSelect{
 			this.state.moveHover = null
 			
 			assets.sounds["v_diffsel"].stop()
-			this.playSound("se_cancel")
+			this.playSound("se_cancel", 0, fromP2 ? fromP2.player : false)
 		}
 		this.clearHash()
 		pageEvents.send("song-select-back")
@@ -757,7 +758,7 @@ class SongSelect{
 		this.clean()
 		var selectedSong = this.songs[this.selectedSong]
 		assets.sounds["v_diffsel"].stop()
-		this.playSound("se_don")
+		this.playSound("se_don", 0, p2.session ? p2.player : false)
 		
 		try{
 			if(assets.customSongs){
@@ -799,7 +800,7 @@ class SongSelect{
 	}
 	toOptions(moveBy){
 		if(!p2.session){
-			this.playSound("se_ka")
+			this.playSound("se_ka", 0, p2.session ? p2.player : false)
 			this.selectedDiff = 1
 			do{
 				this.state.options = this.mod(this.optionsList.length, this.state.options + moveBy)
@@ -848,6 +849,7 @@ class SongSelect{
 			return
 		}
 		if(p2.session){
+			this.playSound("se_don")
 			p2.send("gameend")
 			this.state.moveHover = null
 		}else{
@@ -1045,7 +1047,7 @@ class SongSelect{
 				var previousSelectedSong = this.selectedSong
 
 				if(!isJump){
-					this.playSound("se_ka")
+					this.playSound("se_ka", 0, this.lastMoveBy)
 					this.selectedSong = this.mod(this.songs.length, this.selectedSong + this.state.move)
 				}else{
 					var currentCat = this.songs[this.selectedSong].category
@@ -2442,7 +2444,7 @@ class SongSelect{
 							this.selectedSong = index
 							this.state.move = 0
 							if(this.state.screen !== "difficulty"){
-								this.toSelectDifficulty(true)
+								this.toSelectDifficulty({player: response.value.player})
 							}
 						}
 					}
@@ -2463,7 +2465,7 @@ class SongSelect{
 						var moveBy = response.value.move
 						if(moveBy === -1 || moveBy === 1){
 							this.selectedSong = song
-							this.categoryJump(moveBy, true)
+							this.categoryJump(moveBy, {player: response.value.player})
 						}
 					}else if(!selected){
 						this.state.locked = true
@@ -2480,13 +2482,13 @@ class SongSelect{
 							if(Math.abs(altMoveBy) < Math.abs(moveBy)){
 								moveBy = altMoveBy
 							}
-							this.moveToSong(moveBy, true)
+							this.moveToSong(moveBy, {player: response.value.player})
 						}
 					}else if(this.songs[song].courses){
 						this.selectedSong = song
 						this.state.move = 0
 						if(this.state.screen !== "difficulty"){
-							this.toSelectDifficulty(true)
+							this.toSelectDifficulty({player: response.value.player})
 						}
 					}
 				}
@@ -2543,13 +2545,13 @@ class SongSelect{
 		}
 	}
 	
-	playSound(id, time){
+	playSound(id, time, snd){
 		if(!this.drumSounds && (id === "se_don" || id === "se_ka" || id === "se_cancel")){
 			return
 		}
 		var ms = Date.now() + (time || 0) * 1000
 		if(!(id in this.playedSounds) || ms > this.playedSounds[id] + 30){
-			assets.sounds[id].play(time)
+			assets.sounds[id + (snd ? "_p" + snd : "")].play(time)
 			this.playedSounds[id] = ms
 		}
 	}
diff --git a/server.py b/server.py
index fbf1476..4235c00 100644
--- a/server.py
+++ b/server.py
@@ -102,6 +102,8 @@ async def connection(ws, path):
 								user["action"] = "loading"
 								user["other_user"]["action"] = "loading"
 								user["other_user"]["other_user"] = user
+								user["other_user"]["player"] = 1
+								user["player"] = 2
 								await asyncio.wait([
 									ws.send(msgobj("gameload", {"diff": waiting_diff, "player": 2})),
 									user["other_user"]["ws"].send(msgobj("gameload", {"diff": diff, "player": 1})),
@@ -138,6 +140,8 @@ async def connection(ws, path):
 								user["other_user"]["other_user"] = user
 								user["action"] = "invite"
 								user["session"] = value["id"]
+								user["other_user"]["player"] = 1
+								user["player"] = 2
 								await asyncio.wait([
 									ws.send(msgobj("session", {"player": 2})),
 									user["other_user"]["ws"].send(msgobj("session", {"player": 1})),
@@ -273,6 +277,7 @@ async def connection(ws, path):
 						if type == "songsel" or type == "catjump":
 							# Change song select position
 							if user["other_user"]["action"] == "songsel":
+								value["player"] = user["player"]
 								sent_msg = msgobj(type, value)
 								await asyncio.wait([
 									ws.send(sent_msg),

From 4b37150ee08df5673601997e6d1a7a193ffaf59a Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 16 Mar 2020 16:42:36 +0300
Subject: [PATCH 17/41] Improve the song loading screen error message

---
 public/src/css/view.css     |   1 +
 public/src/js/controller.js |   4 +-
 public/src/js/loadsong.js   | 130 +++++++++++++++++++++---------------
 public/src/js/scoresheet.js |   6 +-
 public/src/js/songselect.js |  57 +++++++++++-----
 public/src/js/strings.js    |   4 ++
 6 files changed, 126 insertions(+), 76 deletions(-)

diff --git a/public/src/css/view.css b/public/src/css/view.css
index 13dbefd..da0f13c 100644
--- a/public/src/css/view.css
+++ b/public/src/css/view.css
@@ -119,6 +119,7 @@ kbd{
 	background: #fff;
 	border: 1px solid #a9a9a9;
 	user-select: all;
+	box-sizing: border-box;
 }
 .text-warn{
 	color: #d00;
diff --git a/public/src/js/controller.js b/public/src/js/controller.js
index ba383e2..7c93cce 100644
--- a/public/src/js/controller.js
+++ b/public/src/js/controller.js
@@ -207,14 +207,14 @@ class Controller{
 	displayScore(score, notPlayed, bigNote){
 		this.view.displayScore(score, notPlayed, bigNote)
 	}
-	songSelection(fadeIn, scoreSaveFailed){
+	songSelection(fadeIn, showWarning){
 		if(!fadeIn){
 			this.clean()
 		}
 		if(this.calibrationMode){
 			new SettingsView(this.touchEnabled, false, null, "latency")
 		}else{
-			new SongSelect(false, fadeIn, this.touchEnabled, null, scoreSaveFailed)
+			new SongSelect(false, fadeIn, this.touchEnabled, null, showWarning)
 		}
 	}
 	restartSong(){
diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js
index 4b42555..033c405 100644
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -34,7 +34,7 @@ class LoadSong{
 	run(){
 		var song = this.selectedSong
 		var id = song.folder
-		var promises = []
+		this.promises = []
 		if(song.folder !== "calibration"){
 			assets.sounds["v_start"].play()
 			var songObj = assets.songs.find(song => song.id === id)
@@ -92,9 +92,9 @@ class LoadSong{
 					img.crossOrigin = "Anonymous"
 				}
 				let promise = pageEvents.load(img)
-				promises.push(promise.then(() => {
+				this.addPromise(promise.then(() => {
 					return this.scaleImg(img, filename, prefix, force)
-				}))
+				}), songObj.music ? filename + ".png" : skinBase + filename + ".png")
 				if(songObj.music){
 					img.src = URL.createObjectURL(song.songSkin[filename + ".png"])
 				}else{
@@ -102,14 +102,15 @@ class LoadSong{
 				}
 			}
 		}
-		promises.push(this.loadSongBg(id))
+		this.loadSongBg(id)
 		
-		promises.push(new Promise((resolve, reject) => {
+		var url = gameConfig.songs_baseurl + id + "/main.mp3"
+		this.addPromise(new Promise((resolve, reject) => {
 			if(songObj.sound){
 				songObj.sound.gain = snd.musicGain
 				resolve()
 			}else if(!songObj.music){
-				snd.musicGain.load(gameConfig.songs_baseurl + id + "/main.mp3").then(sound => {
+				snd.musicGain.load(url).then(sound => {
 					songObj.sound = sound
 					resolve()
 				}, reject)
@@ -121,15 +122,15 @@ class LoadSong{
 			}else{
 				resolve()
 			}
-		}))
+		}), songObj.music ? songObj.music.webkitRelativePath : url)
 		if(songObj.chart){
 			if(songObj.chart === "blank"){
 				this.songData = ""
 			}else{
 				var reader = new FileReader()
-				promises.push(pageEvents.load(reader).then(event => {
+				this.addPromise(pageEvents.load(reader).then(event => {
 					this.songData = event.target.result.replace(/\0/g, "").split("\n")
-				}))
+				}), songObj.chart.webkitRelativePath)
 				if(song.type === "tja"){
 					reader.readAsText(songObj.chart, "sjis")
 				}else{
@@ -137,68 +138,88 @@ class LoadSong{
 				}
 			}
 		}else{
-			promises.push(loader.ajax(this.getSongPath(song)).then(data => {
+			var url = this.getSongPath(song)
+			this.addPromise(loader.ajax(url).then(data => {
 				this.songData = data.replace(/\0/g, "").split("\n")
-			}))
+			}), url)
 		}
 		if(this.touchEnabled && !assets.image["touch_drum"]){
 			let img = document.createElement("img")
 			if(this.imgScale !== 1){
 				img.crossOrigin = "Anonymous"
 			}
-			promises.push(pageEvents.load(img).then(() => {
+			var url = gameConfig.assets_baseurl + "img/touch_drum.png"
+			this.addPromise(pageEvents.load(img).then(() => {
 				return this.scaleImg(img, "touch_drum", "")
-			}))
-			img.src = gameConfig.assets_baseurl + "img/touch_drum.png"
+			}), url)
+			img.src = url
 		}
-		Promise.all(promises).then(() => {
-			this.setupMultiplayer()
-		}, error => {
-			if(Array.isArray(error) && error[1] instanceof HTMLElement){
-				error = error[0] + ": " + error[1].outerHTML
+		Promise.all(this.promises).then(() => {
+			if(!this.error){
+				this.setupMultiplayer()
 			}
-			console.error(error)
-			pageEvents.send("load-song-error", error)
-			errorMessage(new Error(error).stack)
-			alert(strings.errorOccured)
 		})
 	}
+	addPromise(promise, url){
+		this.promises.push(promise.catch(response => {
+			this.errorMsg(response, url)
+			return Promise.resolve()
+		}))
+	}
+	errorMsg(error, url){
+		if(!this.error){
+			if(url){
+				error = (Array.isArray(error) ? error[0] + ": " : (error ? error + ": " : "")) + url
+			}
+			pageEvents.send("load-song-error", error)
+			errorMessage(new Error(error).stack)
+			var title = this.selectedSong.title
+			if(title !== this.selectedSong.originalTitle){
+				title += " (" + this.selectedSong.originalTitle + ")"
+			}
+			this.clean()
+			new SongSelect(false, false, this.touchEnabled, null, {
+				name: "loadSongError",
+				title: title,
+				id: this.selectedSong.folder,
+				error: error
+			})
+		}
+		this.error = true
+	}
 	loadSongBg(){
-		return new Promise((resolve, reject) => {
-			var promises = []
-			var filenames = []
-			if(this.selectedSong.songBg !== null){
-				filenames.push("bg_song_" + this.selectedSong.songBg)
+		var filenames = []
+		if(this.selectedSong.songBg !== null){
+			filenames.push("bg_song_" + this.selectedSong.songBg)
+		}
+		if(this.selectedSong.donBg !== null){
+			filenames.push("bg_don_" + this.selectedSong.donBg)
+			if(this.multiplayer){
+				filenames.push("bg_don2_" + this.selectedSong.donBg)
 			}
-			if(this.selectedSong.donBg !== null){
-				filenames.push("bg_don_" + this.selectedSong.donBg)
-				if(this.multiplayer){
-					filenames.push("bg_don2_" + this.selectedSong.donBg)
-				}
-			}
-			if(this.selectedSong.songStage !== null){
-				filenames.push("bg_stage_" + this.selectedSong.songStage)
-			}
-			for(var i = 0; i < filenames.length; i++){
-				var filename = filenames[i]
-				var stage = filename.startsWith("bg_stage_")
-				for(var letter = 0; letter < (stage ? 1 : 2); letter++){
-					let filenameAb = filenames[i] + (stage ? "" : (letter === 0 ? "a" : "b"))
-					if(!(filenameAb in assets.image)){
-						let img = document.createElement("img")
-						let force = filenameAb.startsWith("bg_song_") && this.touchEnabled
-						if(this.imgScale !== 1 || force){
-							img.crossOrigin = "Anonymous"
-						}
-						promises.push(pageEvents.load(img).then(() => {
-							return this.scaleImg(img, filenameAb, "", force)
-						}))
-						img.src = gameConfig.assets_baseurl + "img/" + filenameAb + ".png"
+		}
+		if(this.selectedSong.songStage !== null){
+			filenames.push("bg_stage_" + this.selectedSong.songStage)
+		}
+		for(var i = 0; i < filenames.length; i++){
+			var filename = filenames[i]
+			var stage = filename.startsWith("bg_stage_")
+			for(var letter = 0; letter < (stage ? 1 : 2); letter++){
+				let filenameAb = filenames[i] + (stage ? "" : (letter === 0 ? "a" : "b"))
+				if(!(filenameAb in assets.image)){
+					let img = document.createElement("img")
+					let force = filenameAb.startsWith("bg_song_") && this.touchEnabled
+					if(this.imgScale !== 1 || force){
+						img.crossOrigin = "Anonymous"
 					}
+					var url = gameConfig.assets_baseurl + "img/" + filenameAb + ".png"
+					this.addPromise(pageEvents.load(img).then(() => {
+						return this.scaleImg(img, filenameAb, "", force)
+					}), url)
+					img.src = url
 				}
 			}
-			Promise.all(promises).then(resolve, reject)
-		})
+		}
 	}
 	scaleImg(img, filename, prefix, force){
 		return new Promise((resolve, reject) => {
@@ -333,6 +354,7 @@ class LoadSong{
 		pageEvents.send("load-song-cancel")
 	}
 	clean(){
+		delete this.promises
 		pageEvents.remove(p2, "message")
 		if(this.cancelButton){
 			pageEvents.remove(this.cancelButton, ["mousedown", "touchstart"])
diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js
index 265414e..2a2dd81 100644
--- a/public/src/js/scoresheet.js
+++ b/public/src/js/scoresheet.js
@@ -864,7 +864,7 @@ class Scoresheet{
 			
 			if(elapsed >= 1000){
 				this.clean()
-				this.controller.songSelection(true, this.scoreSaveFailed)
+				this.controller.songSelection(true, this.showWarning)
 			}
 		}
 		
@@ -932,12 +932,12 @@ class Scoresheet{
 				delete this.resultsObj.difficulty
 				delete this.resultsObj.gauge
 				scoreStorage.add(hash, difficulty, this.resultsObj, true, title).catch(() => {
-					this.scoreSaveFailed = true
+					this.showWarning = {name: "scoreSaveFailed"}
 				})
 			}else if(oldScore && (crown === "gold" && oldScore.crown !== "gold" || crown && !oldScore.crown)){
 				oldScore.crown = crown
 				scoreStorage.add(hash, difficulty, oldScore, true, title).catch(() => {
-					this.scoreSaveFailed = true
+					this.showWarning = {name: "scoreSaveFailed"}
 				})
 			}
 		}
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 11d94fd..78e9659 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -1,5 +1,5 @@
 class SongSelect{
-	constructor(fromTutorial, fadeIn, touchEnabled, songId, scoreSaveFailed){
+	constructor(fromTutorial, fadeIn, touchEnabled, songId, showWarning){
 		this.touchEnabled = touchEnabled
 		
 		loader.changePage("songselect", false)
@@ -167,7 +167,8 @@ class SongSelect{
 				category: strings.random
 			})
 		}
-		if(scoreSaveFailed){
+		this.showWarning = showWarning
+		if(showWarning && showWarning.name === "scoreSaveFailed"){
 			scoreStorage.scoreSaveFailed = true
 		}
 		this.songs.push({
@@ -383,10 +384,11 @@ class SongSelect{
 			return
 		}
 		var shift = event ? event.shiftKey : this.pressedKeys["shift"]
-		if(this.state.scoreSaveFailed){
+		if(this.state.showWarning){
 			if(name === "confirm"){
 				this.playSound("se_don")
-				this.state.scoreSaveFailed = false
+				this.state.showWarning = false
+				this.showWarning = false
 			}
 		}else if(this.state.screen === "song"){
 			if(name === "confirm"){
@@ -462,10 +464,11 @@ class SongSelect{
 			var ctrl = false
 			var touch = true
 		}
-		if(this.state.scoreSaveFailed){
+		if(this.state.showWarning){
 			if(408 < mouse.x && mouse.x < 872 && 470 < mouse.y && mouse.y < 550){
 				this.playSound("se_don")
-				this.state.scoreSaveFailed = false
+				this.state.showWarning = false
+				this.showWarning = false
 			}
 		}else if(this.state.screen === "song"){
 			if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
@@ -522,9 +525,9 @@ class SongSelect{
 	mouseMove(event){
 		var mouse = this.mouseOffset(event.offsetX, event.offsetY)
 		var moveTo = null
-		if(this.state.scoreSaveFailed){
+		if(this.state.showWarning){
 			if(408 < mouse.x && mouse.x < 872 && 470 < mouse.y && mouse.y < 550){
-				moveTo = "scoreSaveFailed"
+				moveTo = "showWarning"
 			}
 		}else if(this.state.screen === "song"){
 			if(20 < mouse.y && mouse.y < 90 && 410 < mouse.x && mouse.x < 880 && (mouse.x < 540 || mouse.x > 750)){
@@ -1019,12 +1022,17 @@ class SongSelect{
 			}
 		}
 		
-		if(screen === "song" && scoreStorage.scoreSaveFailed && !p2.session){
+		if(screen === "song" && (this.showWarning || scoreStorage.scoreSaveFailed) && !p2.session){
+			if(!this.showWarning){
+				this.showWarning = {name: "scoreSaveFailed"}
+			}
 			if(this.bgmEnabled){
 				this.playBgm(false)
 			}
-			scoreStorage.scoreSaveFailed = false
-			this.state.scoreSaveFailed = true
+			if(this.showWarning.name === "scoreSaveFailed"){
+				scoreStorage.scoreSaveFailed = false
+			}
+			this.state.showWarning = true
 			this.state.locked = true
 			this.playSound("se_pause")
 		}
@@ -2130,7 +2138,7 @@ class SongSelect{
 			})
 		}
 		
-		if(this.state.scoreSaveFailed){
+		if(this.state.showWarning){
 			if(this.preview){
 				this.endPreview()
 			}
@@ -2164,9 +2172,24 @@ class SongSelect{
 				dx: 68,
 				dy: 11
 			})
+			if(this.showWarning.name === "scoreSaveFailed"){
+				var text = strings.scoreSaveFailed
+			}else if(this.showWarning.name === "loadSongError"){
+				var text = []
+				var textIndex = 0
+				var subText = [this.showWarning.title, this.showWarning.id, this.showWarning.error]
+				var textParts = strings.loadSongError.split("%s")
+				textParts.forEach((textPart, i) => {
+					if(i !== 0){
+						text.push(subText[textIndex++])
+					}
+					text.push(textPart)
+				})
+				text = text.join("")
+			}
 			this.draw.wrappingText({
 				ctx: ctx,
-				text: strings.scoreSaveFailed,
+				text: text,
 				fontSize: 30,
 				fontFamily: this.font,
 				x: 300,
@@ -2176,7 +2199,7 @@ class SongSelect{
 				lineHeight: 35,
 				fill: "#000",
 				verticalAlign: "middle",
-				textAlign: "center",
+				textAlign: "center"
 			})
 			
 			var _x = 640
@@ -2211,7 +2234,7 @@ class SongSelect{
 			}, layers)
 			
 			var highlight = 1
-			if(this.state.moveHover === "scoreSaveFailed"){
+			if(this.state.moveHover === "showWarning"){
 				highlight = 2
 			}
 			if(highlight){
@@ -2330,7 +2353,7 @@ class SongSelect{
 	}
 	
 	startPreview(loadOnly){
-		if(!loadOnly && this.state && this.state.scoreSaveFailed){
+		if(!loadOnly && this.state && this.state.showWarning){
 			return
 		}
 		var currentSong = this.songs[this.selectedSong]
@@ -2408,7 +2431,7 @@ class SongSelect{
 		}
 	}
 	playBgm(enabled){
-		if(enabled && this.state && this.state.scoreSaveFailed){
+		if(enabled && this.state && this.state.showWarning){
 			return
 		}
 		if(enabled && !this.bgmEnabled){
diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index 957b4aa..8eae935 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -266,6 +266,10 @@ var translations = {
 		ja: null,
 		en: "Could not connect to the server, your score has not been saved.\n\nPlease log in or refresh the page to try saving the score again."
 	},
+	loadSongError: {
+		ja: null,
+		en: "Could not load song %s with id %s.\n\n%s"
+	},
 	loading: {
 		ja: "ロード中...",
 		en: "Loading...",

From 8f736b5b237715c2d78eb3eb7b5ea40acb6786c1 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 16 Mar 2020 18:34:18 +0300
Subject: [PATCH 18/41] Fix weird sound on error and long lines not wrapping

---
 public/src/js/canvasdraw.js | 34 +++++++++++++++++++++++++++++++---
 public/src/js/songselect.js |  3 ++-
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/public/src/js/canvasdraw.js b/public/src/js/canvasdraw.js
index 6da8266..bb38f1b 100644
--- a/public/src/js/canvasdraw.js
+++ b/public/src/js/canvasdraw.js
@@ -927,8 +927,22 @@
 				}
 			}
 		}
+		var search = () => {
+			var end = line.length
+			var dist = end
+			while(dist){
+				dist >>= 1
+				line = words[i].slice(0, end)
+				lastWidth = ctx.measureText(line).width
+				end += lastWidth < config.width ? dist : -dist
+			}
+			if(line !== words[i]){
+				words.splice(i + 1, 0, words[i].slice(line.length))
+				words[i] = line
+			}
+		}
 		
-		for(var i in words){
+		for(var i = 0; i < words.length; i++){
 			var skip = words[i].substitute || words[i] === "\n"
 			if(!skip){
 				var currentWidth = ctx.measureText(line + words[i]).width
@@ -960,8 +974,22 @@
 					recenter()
 					x = 0
 					y += lineHeight
-					line = words[i] === "\n" ? "" : words[i]
-					lastWidth = ctx.measureText(line).width
+					if(words[i] === "\n"){
+						line = ""
+						lastWidth = 0
+					}else{
+						line = words[i]
+						lastWidth = ctx.measureText(line).width
+						if(line.length !== 1 && lastWidth > config.width){
+							search()
+						}
+					}
+				}
+			}else if(!line){
+				line = words[i]
+				lastWidth = ctx.measureText(line).width
+				if(line.length !== 1 && lastWidth > config.width){
+					search()
 				}
 			}else{
 				line += words[i]
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 78e9659..f2c6c63 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -1022,7 +1022,7 @@ class SongSelect{
 			}
 		}
 		
-		if(screen === "song" && (this.showWarning || scoreStorage.scoreSaveFailed) && !p2.session){
+		if(screen === "song" && (this.showWarning && !this.showWarning.shown || scoreStorage.scoreSaveFailed)){
 			if(!this.showWarning){
 				this.showWarning = {name: "scoreSaveFailed"}
 			}
@@ -1032,6 +1032,7 @@ class SongSelect{
 			if(this.showWarning.name === "scoreSaveFailed"){
 				scoreStorage.scoreSaveFailed = false
 			}
+			this.showWarning.shown = true
 			this.state.showWarning = true
 			this.state.locked = true
 			this.playSound("se_pause")

From 95eef4e8db690a1c1f8105b42dc713a45aa924b2 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 16 Mar 2020 19:00:32 +0300
Subject: [PATCH 19/41] Fix bgm_songsel playing on error

---
 public/src/js/loadsong.js   | 17 ++++++++++-------
 public/src/js/songselect.js |  4 +++-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js
index 033c405..769d64e 100644
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -177,13 +177,16 @@ class LoadSong{
 			if(title !== this.selectedSong.originalTitle){
 				title += " (" + this.selectedSong.originalTitle + ")"
 			}
-			this.clean()
-			new SongSelect(false, false, this.touchEnabled, null, {
-				name: "loadSongError",
-				title: title,
-				id: this.selectedSong.folder,
-				error: error
-			})
+			assets.sounds["v_start"].stop()
+			setTimeout(() => {
+				this.clean()
+				new SongSelect(false, false, this.touchEnabled, null, {
+					name: "loadSongError",
+					title: title,
+					id: this.selectedSong.folder,
+					error: error
+				})
+			}, 500)
 		}
 		this.error = true
 	}
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index f2c6c63..01f6e36 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -278,7 +278,9 @@ class SongSelect{
 			}else if((!p2.session || fadeIn) && "selectedSong" in localStorage){
 				this.selectedSong = Math.min(Math.max(0, localStorage["selectedSong"] |0), this.songs.length - 1)
 			}
-			this.playSound(songIdIndex !== -1 ? "v_diffsel" : "v_songsel")
+			if(!this.showWarning){
+				this.playSound(songIdIndex !== -1 ? "v_diffsel" : "v_songsel")
+			}
 			snd.musicGain.fadeOut()
 			this.playBgm(false)
 		}

From 47b769c8b3c72d63cd5322dd7f0ead7b7742dcd8 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 16 Mar 2020 19:07:55 +0300
Subject: [PATCH 20/41] Fix warning not showing in session mode

---
 public/src/js/songselect.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 01f6e36..63c5b1f 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -711,7 +711,9 @@ class SongSelect{
 				
 				this.playSound("se_don", 0, fromP2 ? fromP2.player : false)
 				assets.sounds["v_songsel"].stop()
-				this.playSound("v_diffsel", 0.3)
+				if(!this.showWarning){
+					this.playSound("v_diffsel", 0.3)
+				}
 				pageEvents.send("song-select-difficulty", currentSong)
 			}else if(currentSong.action === "back"){
 				this.clean()
@@ -1024,7 +1026,7 @@ class SongSelect{
 			}
 		}
 		
-		if(screen === "song" && (this.showWarning && !this.showWarning.shown || scoreStorage.scoreSaveFailed)){
+		if((screen === "song" || screen === "difficulty") && (this.showWarning && !this.showWarning.shown || scoreStorage.scoreSaveFailed)){
 			if(!this.showWarning){
 				this.showWarning = {name: "scoreSaveFailed"}
 			}

From 29fb7845edc99aba364f7f1693cf9c7ac2f75f79 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 16 Mar 2020 22:49:18 +0300
Subject: [PATCH 21/41] Add session crowns

---
 public/src/js/p2.js           | 34 +++++++++++++
 public/src/js/scorestorage.js | 68 +++++++++++++++++++++++--
 public/src/js/songselect.js   | 95 ++++++++++++++++++++++-------------
 server.py                     |  6 +++
 4 files changed, 165 insertions(+), 38 deletions(-)

diff --git a/public/src/js/p2.js b/public/src/js/p2.js
index 127b622..a8a1d34 100644
--- a/public/src/js/p2.js
+++ b/public/src/js/p2.js
@@ -116,6 +116,7 @@ class P2Connection{
 				this.kaAmount = 0
 				this.results = false
 				this.branch = "normal"
+				scoreStorage.clearP2()
 				break
 			case "gameend":
 				this.otherConnected = false
@@ -130,6 +131,7 @@ class P2Connection{
 					this.hashLock = false
 				}
 				this.name = null
+				scoreStorage.clearP2()
 				break
 			case "gameresults":
 				this.results = {}
@@ -157,6 +159,7 @@ class P2Connection{
 				this.clearMessage("users")
 				this.otherConnected = true
 				this.session = true
+				scoreStorage.clearP2()
 				if("player" in response.value){
 					this.player = response.value.player === 2 ? 2 : 1
 				}
@@ -164,6 +167,37 @@ class P2Connection{
 			case "name":
 				this.name = response.value ? response.value.toString() : response.value
 				break
+			case "getcrowns":
+				if(response.value){
+					var output = {}
+					for(var i in response.value){
+						if(response.value[i]){
+							var score = scoreStorage.get(response.value[i], false, true)
+							if(score){
+								var crowns = {}
+								for(var diff in score){
+									if(diff !== "title"){
+										crowns[diff] = {
+											crown: score[diff].crown
+										}
+									}
+								}
+							}else{
+								var crowns = null
+							}
+							output[response.value[i]] = crowns
+						}
+					}
+					p2.send("crowns", output)
+				}
+				break
+			case "crowns":
+				if(response.value){
+					for(var i in response.value){
+						scoreStorage.addP2(i, false, response.value[i], true)
+					}
+				}
+				break
 		}
 	}
 	onhashchange(){
diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index db6dd2b..1bf8ed8 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -1,6 +1,9 @@
 class ScoreStorage{
 	constructor(){
 		this.scores = {}
+		this.scoresP2 = {}
+		this.requestP2 = new Set()
+		this.requestedP2 = new Set()
 		this.songTitles = {}
 		this.difficulty = ["oni", "ura", "hard", "normal", "easy"]
 		this.scoreKeys = ["points", "good", "ok", "bad", "maxCombo", "drumroll"]
@@ -151,15 +154,40 @@ class ScoreStorage{
 			}
 		}
 	}
+	getP2(song, difficulty, isHash){
+		if(!song){
+			return this.scoresP2
+		}else{
+			var hash = isHash ? song : this.titleHash(song)
+			if(!(hash in this.scoresP2) && !this.requestP2.has(hash) && !this.requestedP2.has(hash)){
+				this.requestP2.add(hash)
+				this.requestedP2.add(hash)
+			}
+			if(difficulty){
+				if(hash in this.scoresP2){
+					return this.scoresP2[hash][difficulty]
+				}
+			}else{
+				return this.scoresP2[hash]
+			}
+		}
+	}
 	add(song, difficulty, scoreObject, isHash, setTitle, saveFailed){
 		var hash = isHash ? song : this.titleHash(song)
 		if(!(hash in this.scores)){
 			this.scores[hash] = {}
 		}
-		if(setTitle){
-			this.scores[hash].title = setTitle
+		if(difficulty){
+			if(setTitle){
+				this.scores[hash].title = setTitle
+			}
+			this.scores[hash][difficulty] = scoreObject
+		}else{
+			this.scores[hash] = scoreObject
+			if(setTitle){
+				this.scores[hash].title = setTitle
+			}
 		}
-		this.scores[hash][difficulty] = scoreObject
 		this.writeString(hash)
 		this.write()
 		if(saveFailed){
@@ -186,6 +214,23 @@ class ScoreStorage{
 			}).catch(() => this.add(song, difficulty, scoreObject, isHash, setTitle, true))
 		}
 	}
+	addP2(song, difficulty, scoreObject, isHash, setTitle){
+		var hash = isHash ? song : this.titleHash(song)
+		if(!(hash in this.scores)){
+			this.scoresP2[hash] = {}
+		}
+		if(difficulty){
+			if(setTitle){
+				this.scoresP2[hash].title = setTitle
+			}
+			this.scoresP2[hash][difficulty] = scoreObject
+		}else{
+			this.scoresP2[hash] = scoreObject
+			if(setTitle){
+				this.scoresP2[hash].title = setTitle
+			}
+		}
+	}
 	template(){
 		var template = {crown: ""}
 		for(var i in this.scoreKeys){
@@ -257,4 +302,21 @@ class ScoreStorage{
 			return Promise.resolve()
 		}
 	}
+	eventLoop(){
+		if(p2.session && this.requestP2.size){
+			var req = []
+			this.requestP2.forEach(hash => {
+				req.push(hash)
+			})
+			this.requestP2.clear()
+			if(req.length){
+				p2.send("getcrowns", req)
+			}
+		}
+	}
+	clearP2(){
+		this.scoresP2 = {}
+		this.requestP2.clear()
+		this.requestedP2.clear()
+	}
 }
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 63c5b1f..a67e9d0 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -1495,20 +1495,33 @@ class SongSelect{
 				}
 				var drawDifficulty = (ctx, i, currentUra) => {
 					if(currentSong.courses[this.difficultyId[i]] || currentUra){
-						var score = scoreStorage.get(currentSong.hash, false, true)
 						var crownDiff = currentUra ? "ura" : this.difficultyId[i]
-						var crownType = ""
-						if(score && score[crownDiff]){
-							crownType = score[crownDiff].crown
+						var players = p2.session ? 2 : 1
+						var score = [scoreStorage.get(currentSong.hash, false, true)]
+						if(p2.session){
+							score[p2.player === 1 ? "push" : "unshift"](scoreStorage.getP2(currentSong.hash, false, true))
+						}
+						var reversed = false
+						for(var a = players; a--;){
+							var crownType = ""
+							var p = reversed ? -(a - 1) : a
+							if(score[p] && score[p][crownDiff]){
+								crownType = score[p][crownDiff].crown
+							}
+							if(!reversed && players === 2 && p === 1 && crownType){
+								reversed = true
+								a++
+							}else{
+								this.draw.crown({
+									ctx: ctx,
+									type: crownType,
+									x: (songSel ? x + 33 + i * 60 : x + 402 + i * 100) + (players === 2 ? p === 0 ? -13 : 13 : 0),
+									y: songSel ? y + 75 : y + 30,
+									scale: 0.25,
+									ratio: this.ratio / this.pixelRatio
+								})
+							}
 						}
-						this.draw.crown({
-							ctx: ctx,
-							type: crownType,
-							x: songSel ? x + 33 + i * 60 : x + 402 + i * 100,
-							y: songSel ? y + 75 : y + 30,
-							scale: 0.25,
-							ratio: this.ratio / this.pixelRatio
-						})
 						if(songSel){
 							var _x = x + 33 + i * 60
 							var _y = y + 120
@@ -2269,6 +2282,11 @@ class SongSelect{
 			
 			ctx.restore()
 		}
+		
+		if(p2.session && (!this.lastScoreMS || ms > this.lastScoreMS + 1000)){
+			this.lastScoreMS = ms
+			scoreStorage.eventLoop()
+		}
 	}
 	
 	drawClosedSong(config){
@@ -2327,31 +2345,38 @@ class SongSelect{
 	drawSongCrown(config){
 		if(!config.song.action && config.song.hash){
 			var ctx = config.ctx
-			var score = scoreStorage.get(config.song.hash, false, true)
+			var players = p2.session ? 2 : 1
+			var score = [scoreStorage.get(config.song.hash, false, true)]
+			var scoreDrawn = []
+			if(p2.session){
+				score[p2.player === 1 ? "push" : "unshift"](scoreStorage.getP2(config.song.hash, false, true))
+			}
 			for(var i = this.difficultyId.length; i--;){
 				var diff = this.difficultyId[i]
-				if(!score){
-					break
-				}
-				if(config.song.courses[this.difficultyId[i]] && score[diff] && score[diff].crown){
-					this.draw.crown({
-						ctx: ctx,
-						type: score[diff].crown,
-						x: config.x + this.songAsset.width / 2,
-						y: config.y - 13,
-						scale: 0.3,
-						ratio: this.ratio / this.pixelRatio
-					})
-					this.draw.diffIcon({
-						ctx: ctx,
-						diff: i,
-						x: config.x + this.songAsset.width / 2 + 8,
-						y: config.y - 8,
-						scale: diff === "hard" || diff === "normal" ? 0.45 : 0.5,
-						border: 6.5,
-						small: true
-					})
-					break
+				for(var p = players; p--;){
+					if(!score[p] || scoreDrawn[p]){
+						continue
+					}
+					if(config.song.courses[this.difficultyId[i]] && score[p][diff] && score[p][diff].crown){
+						this.draw.crown({
+							ctx: ctx,
+							type: score[p][diff].crown,
+							x: (config.x + this.songAsset.width / 2) + (players === 2 ? p === 0 ? -13 : 13 : 0),
+							y: config.y - 13,
+							scale: 0.3,
+							ratio: this.ratio / this.pixelRatio
+						})
+						this.draw.diffIcon({
+							ctx: ctx,
+							diff: i,
+							x: (config.x + this.songAsset.width / 2 + 8) + (players === 2 ? p === 0 ? -13 : 13 : 0),
+							y: config.y - 8,
+							scale: diff === "hard" || diff === "normal" ? 0.45 : 0.5,
+							border: 6.5,
+							small: true
+						})
+						scoreDrawn[p] = true
+					}
 				}
 			}
 		}
diff --git a/server.py b/server.py
index 4235c00..587e0db 100644
--- a/server.py
+++ b/server.py
@@ -283,6 +283,12 @@ async def connection(ws, path):
 									ws.send(sent_msg),
 									user["other_user"]["ws"].send(sent_msg)
 								])
+						elif type == "crowns" or type == "getcrowns":
+							if user["other_user"]["action"] == "songsel":
+								sent_msg = msgobj(type, value)
+								await asyncio.wait([
+									user["other_user"]["ws"].send(sent_msg)
+								])
 						elif type == "join":
 							# Start game
 							if value == None:

From f4c3a664eb89012a24680553b1b66f883f6bd12e Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 17 Mar 2020 00:42:20 +0300
Subject: [PATCH 22/41] SongSelect: Lower the songs to make room for crowns

---
 public/src/js/songselect.js | 173 +++++++++++++++++-------------------
 1 file changed, 82 insertions(+), 91 deletions(-)

diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index a67e9d0..7306e8d 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -201,7 +201,7 @@ class SongSelect{
 		})
 		
 		this.songAsset = {
-			marginTop: 90,
+			marginTop: 104,
 			marginLeft: 18,
 			width: 82,
 			selectedWidth: 382,
@@ -1042,6 +1042,86 @@ class SongSelect{
 			this.playSound("se_pause")
 		}
 		
+		if(screen === "title" || screen === "titleFadeIn" || screen === "song"){
+			var textW = strings.id === "en" ? 350 : 280
+			this.selectTextCache.get({
+				ctx: ctx,
+				x: frameLeft,
+				y: frameTop,
+				w: textW + 53 + 60,
+				h: this.songAsset.marginTop + 15,
+				id: "song"
+			}, ctx => {
+				this.draw.layeredText({
+					ctx: ctx,
+					text: strings.selectSong,
+					fontSize: 48,
+					fontFamily: this.font,
+					x: 53,
+					y: 30,
+					width: textW,
+					letterSpacing: strings.id === "en" ? 0 : 2,
+					forceShadow: true
+				}, [
+					{x: -2, y: -2, outline: "#000", letterBorder: 22},
+					{},
+					{x: 2, y: 2, shadow: [3, 3, 3]},
+					{x: 2, y: 2, outline: "#ad1516", letterBorder: 10},
+					{x: -2, y: -2, outline: "#ff797b"},
+					{outline: "#f70808"},
+					{fill: "#fff", shadow: [-1, 1, 3, 1.5]}
+				])
+			})
+			
+			var category = this.songs[this.selectedSong].category
+			var selectedSong = this.songs[this.selectedSong]
+			this.draw.category({
+				ctx: ctx,
+				x: winW / 2 - 280 / 2 - 30,
+				y: frameTop + 60,
+				fill: selectedSong.skin.background,
+				highlight: this.state.moveHover === "categoryPrev"
+			})
+			this.draw.category({
+				ctx: ctx,
+				x: winW / 2 + 280 / 2 + 30,
+				y: frameTop + 60,
+				right: true,
+				fill: selectedSong.skin.background,
+				highlight: this.state.moveHover === "categoryNext"
+			})
+			this.categoryCache.get({
+				ctx: ctx,
+				x: winW / 2 - 280 / 2,
+				y: frameTop,
+				w: 280,
+				h: this.songAsset.marginTop,
+				id: category + selectedSong.skin.outline
+			}, ctx => {
+				if(category){
+					if(category in strings.categories){
+						var categoryName = strings.categories[category]
+					}else{
+						var categoryName = category
+					}
+					this.draw.layeredText({
+						ctx: ctx,
+						text: categoryName,
+						fontSize: 40,
+						fontFamily: this.font,
+						x: 280 / 2,
+						y: 38,
+						width: 255,
+						align: "center",
+						forceShadow: true
+					}, [
+						{outline: selectedSong.skin.outline, letterBorder: 12, shadow: [3, 3, 3]},
+						{fill: "#fff"}
+					])
+				}
+			})
+		}
+		
 		if(screen === "song"){
 			if(this.songs[this.selectedSong].courses){
 				selectedWidth = this.songAsset.selectedWidth
@@ -1265,96 +1345,7 @@ class SongSelect{
 			this.currentSongCache.clear()
 		}
 		
-		if(ms > this.state.screenMS + 2000 && selectedWidth === this.songAsset.width){
-			this.drawSongCrown({
-				ctx: ctx,
-				song: currentSong,
-				x: winW / 2 - selectedWidth / 2 + xOffset,
-				y: songTop + this.songAsset.height - selectedHeight
-			})
-		}
-		
-		if(screen === "title" || screen === "titleFadeIn" || screen === "song"){
-			var textW = strings.id === "en" ? 350 : 280
-			this.selectTextCache.get({
-				ctx: ctx,
-				x: frameLeft,
-				y: frameTop,
-				w: textW + 53 + 60,
-				h: this.songAsset.marginTop + 15,
-				id: "song"
-			}, ctx => {
-				this.draw.layeredText({
-					ctx: ctx,
-					text: strings.selectSong,
-					fontSize: 48,
-					fontFamily: this.font,
-					x: 53,
-					y: 30,
-					width: textW,
-					letterSpacing: strings.id === "en" ? 0 : 2,
-					forceShadow: true
-				}, [
-					{x: -2, y: -2, outline: "#000", letterBorder: 22},
-					{},
-					{x: 2, y: 2, shadow: [3, 3, 3]},
-					{x: 2, y: 2, outline: "#ad1516", letterBorder: 10},
-					{x: -2, y: -2, outline: "#ff797b"},
-					{outline: "#f70808"},
-					{fill: "#fff", shadow: [-1, 1, 3, 1.5]}
-				])
-			})
-			
-			var category = this.songs[this.selectedSong].category
-			var selectedSong = this.songs[this.selectedSong]
-			this.draw.category({
-				ctx: ctx,
-				x: winW / 2 - 280 / 2 - 30,
-				y: frameTop + 60,
-				fill: selectedSong.skin.background,
-				highlight: this.state.moveHover === "categoryPrev"
-			})
-			this.draw.category({
-				ctx: ctx,
-				x: winW / 2 + 280 / 2 + 30,
-				y: frameTop + 60,
-				right: true,
-				fill: selectedSong.skin.background,
-				highlight: this.state.moveHover === "categoryNext"
-			})
-			this.categoryCache.get({
-				ctx: ctx,
-				x: winW / 2 - 280 / 2,
-				y: frameTop,
-				w: 280,
-				h: this.songAsset.marginTop,
-				id: category + selectedSong.skin.outline
-			}, ctx => {
-				if(category){
-					if(category in strings.categories){
-						var categoryName = strings.categories[category]
-					}else{
-						var categoryName = category
-					}
-					this.draw.layeredText({
-						ctx: ctx,
-						text: categoryName,
-						fontSize: 40,
-						fontFamily: this.font,
-						x: 280 / 2,
-						y: 38,
-						width: 255,
-						align: "center",
-						forceShadow: true
-					}, [
-						{outline: selectedSong.skin.outline, letterBorder: 12, shadow: [3, 3, 3]},
-						{fill: "#fff"}
-					])
-				}
-			})
-		}
-		
-		if(ms <= this.state.screenMS + 2000 && selectedWidth === this.songAsset.width){
+		if(selectedWidth === this.songAsset.width){
 			this.drawSongCrown({
 				ctx: ctx,
 				song: currentSong,

From c63b5eba4bb4cf232eea10bb79b09228a764a432 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 17 Mar 2020 01:31:15 +0300
Subject: [PATCH 23/41] Fix positioning of the Select Difficulty text

---
 public/src/js/songselect.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 7306e8d..4704ccd 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -1379,8 +1379,8 @@ class SongSelect{
 					var textW = strings.id === "en" ? 350 : 280
 					this.selectTextCache.get({
 						ctx: ctx,
-						x: x - 144 - 53,
-						y: y - 24 - 30,
+						x: frameLeft,
+						y: frameTop,
 						w: textW + 53 + 60,
 						h: this.songAsset.marginTop + 15,
 						id: "difficulty"

From 5a68978ec440e4ccf0380ed4da4b51b35325eaf4 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Mon, 16 Mar 2020 23:30:44 +0000
Subject: [PATCH 24/41] implement song addition/deletion

---
 .gitignore                       |   3 +-
 app.py                           | 144 +++++++++++++++++++++----------
 config.example.json              |   6 --
 config.example.py                |  32 +++++++
 public/src/css/admin.css         |  20 +++++
 templates/admin_song_detail.html |  17 ++--
 templates/admin_song_new.html    | 121 ++++++++++++++++++++++++++
 templates/admin_songs.html       |   6 ++
 tools/migrate_db.py              |  21 +++--
 9 files changed, 305 insertions(+), 65 deletions(-)
 delete mode 100644 config.example.json
 create mode 100644 config.example.py
 create mode 100644 templates/admin_song_new.html

diff --git a/.gitignore b/.gitignore
index 3b79d0f..e7ddeff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -49,6 +49,5 @@ public/api
 taiko.db
 version.json
 public/index.html
-config.json
+config.py
 public/assets/song_skins
-secret.txt
diff --git a/app.py b/app.py
index 76a0dcc..0726ef9 100644
--- a/app.py
+++ b/app.py
@@ -1,6 +1,7 @@
 #!/usr/bin/env python3
 
 import bcrypt
+import config
 import json
 import re
 import schema
@@ -14,27 +15,18 @@ from ffmpy import FFmpeg
 from pymongo import MongoClient
 
 app = Flask(__name__)
-client = MongoClient()
-
-try:
-    app.secret_key = open('secret.txt').read().strip()
-except FileNotFoundError:
-    app.secret_key = os.urandom(24).hex()
-    with open('secret.txt', 'w') as fp:
-        fp.write(app.secret_key)
-        fp.close()
+client = MongoClient(host=config.MONGO['host'])
 
+app.secret_key = config.SECRET_KEY
 app.config['SESSION_TYPE'] = 'redis'
 app.config['SESSION_COOKIE_HTTPONLY'] = False
-app.cache = Cache(app, config={'CACHE_TYPE': 'redis'})
+app.cache = Cache(app, config=config.REDIS)
 sess = Session()
 sess.init_app(app)
 
-db = client.taiko
+db = client[config.MONGO['database']]
 db.users.create_index('username', unique=True)
-
-DEFAULT_URL = 'https://github.com/bui/taiko-web/'
-
+db.songs.create_index('id', unique=True)
 
 def api_error(message):
     return jsonify({'status': 'error', 'message': message})
@@ -49,17 +41,19 @@ def login_required(f):
     return decorated_function
 
 
-def admin_required(f):
-    @wraps(f)
-    def decorated_function(*args, **kwargs):
-        if not session.get('username'):
-            return abort(403)
+def admin_required(level):
+    def decorated_function(f):
+        @wraps(f)
+        def wrapper(*args, **kwargs):
+            if not session.get('username'):
+                return abort(403)
+            
+            user = db.users.find_one({'username': session.get('username')})
+            if user['user_level'] < level:
+                return abort(403)
 
-        user = db.users.find_one({'username': session.get('username')})
-        if user['user_level'] < 50:
-            return abort(403)
-
-        return f(*args, **kwargs)
+            return f(*args, **kwargs)
+        return wrapper
     return decorated_function
 
 
@@ -71,27 +65,24 @@ def before_request_func():
 
 
 def get_config():
-    if os.path.isfile('config.json'):
-        try:
-            config = json.load(open('config.json', 'r'))
-        except ValueError:
-            print('WARNING: Invalid config.json, using default values')
-            config = {}
-    else:
-        print('WARNING: No config.json found, using default values')
-        config = {}
+    config_out = {
+        'songs_baseurl': config.SONGS_BASEURL,
+        'assets_baseurl': config.ASSETS_BASEURL,
+        'email': config.EMAIL,
+        'accounts': config.ACCOUNTS
+    }
 
-    if not config.get('songs_baseurl'):
-        config['songs_baseurl'] = ''.join([request.host_url, 'songs']) + '/'
-    if not config.get('assets_baseurl'):
-        config['assets_baseurl'] = ''.join([request.host_url, 'assets']) + '/'
+    if not config_out.get('songs_baseurl'):
+        config_out['songs_baseurl'] = ''.join([request.host_url, 'songs']) + '/'
+    if not config_out.get('assets_baseurl'):
+        config_out['assets_baseurl'] = ''.join([request.host_url, 'assets']) + '/'
 
-    config['_version'] = get_version()
-    return config
+    config_out['_version'] = get_version()
+    return config_out
 
 
 def get_version():
-    version = {'commit': None, 'commit_short': '', 'version': None, 'url': DEFAULT_URL}
+    version = {'commit': None, 'commit_short': '', 'version': None, 'url': config.URL}
     if os.path.isfile('version.json'):
         try:
             ver = json.load(open('version.json', 'r'))
@@ -114,20 +105,21 @@ def route_index():
 
 
 @app.route('/admin')
-@admin_required
+@admin_required(level=50)
 def route_admin():
     return redirect('/admin/songs')
 
 
 @app.route('/admin/songs')
-@admin_required
+@admin_required(level=50)
 def route_admin_songs():
     songs = db.songs.find({})
-    return render_template('admin_songs.html', songs=list(songs))
+    user = db.users.find_one({'username': session['username']})
+    return render_template('admin_songs.html', songs=list(songs), admin=user)
 
 
 @app.route('/admin/songs/<int:id>')
-@admin_required
+@admin_required(level=50)
 def route_admin_songs_id(id):
     song = db.songs.find_one({'id': id})
     if not song:
@@ -142,8 +134,58 @@ def route_admin_songs_id(id):
         song=song, categories=categories, song_skins=song_skins, makers=makers, admin=user)
 
 
+@app.route('/admin/songs/new')
+@admin_required(level=100)
+def route_admin_songs_new():
+    categories = list(db.categories.find({}))
+    song_skins = list(db.song_skins.find({}))
+    makers = list(db.makers.find({}))
+
+    return render_template('admin_song_new.html', categories=categories, song_skins=song_skins, makers=makers)
+
+
+@app.route('/admin/songs/new', methods=['POST'])
+@admin_required(level=100)
+def route_admin_songs_new_post():
+    output = {'title_lang': {}, 'subtitle_lang': {}, 'courses': {}}
+    output['enabled'] = True if request.form.get('enabled') else False
+    output['title'] = request.form.get('title') or None
+    output['subtitle'] = request.form.get('subtitle') or None
+    for lang in ['ja', 'en', 'cn', 'tw', 'ko']:
+        output['title_lang'][lang] = request.form.get('title_%s' % lang) or None
+        output['subtitle_lang'][lang] = request.form.get('subtitle_%s' % lang) or None
+
+    for course in ['easy', 'normal', 'hard', 'oni', 'ura']:
+        if request.form.get('course_%s' % course):
+            output['courses'][course] = {'stars': int(request.form.get('course_%s' % course)),
+                                         'branch': True if request.form.get('branch_%s' % course) else False}
+        else:
+            output['courses'][course] = None
+    
+    output['category_id'] = int(request.form.get('category_id')) or None
+    output['type'] = request.form.get('type')
+    output['offset'] = float(request.form.get('offset')) or None
+    output['skin_id'] = int(request.form.get('skin_id')) or None
+    output['preview'] = float(request.form.get('preview')) or None
+    output['volume'] = float(request.form.get('volume')) or None
+    output['maker_id'] = int(request.form.get('maker_id')) or None
+    output['hash'] = None
+
+    seq = db.seq.find_one({'name': 'songs'})
+    seq_new = seq['value'] + 1 if seq else 1
+    output['id'] = seq_new
+    output['order'] = seq_new
+
+    db.songs.insert_one(output)
+    flash('Song created.')
+
+    db.seq.update_one({'name': 'songs'}, {'$set': {'value': seq_new}}, upsert=True)
+
+    return redirect('/admin/songs/%s' % str(seq_new))
+
+
 @app.route('/admin/songs/<int:id>', methods=['POST'])
-@admin_required
+@admin_required(level=100)
 def route_admin_songs_id_post(id):
     song = db.songs.find_one({'id': id})
     if not song:
@@ -183,6 +225,18 @@ def route_admin_songs_id_post(id):
     return redirect('/admin/songs/%s' % id)
 
 
+@app.route('/admin/songs/<int:id>/delete', methods=['POST'])
+@admin_required(level=100)
+def route_admin_songs_id_delete(id):
+    song = db.songs.find_one({'id': id})
+    if not song:
+        return abort(404)
+
+    db.songs.delete_one({'id': id})
+    flash('Song deleted.')
+    return redirect('/admin/songs')
+
+
 @app.route('/api/preview')
 @app.cache.cached(timeout=15, query_string=True)
 def route_api_preview():
diff --git a/config.example.json b/config.example.json
deleted file mode 100644
index f81c1b7..0000000
--- a/config.example.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "songs_baseurl": "",
-    "assets_baseurl": "",
-    "email": "",
-    "accounts": true
-}
diff --git a/config.example.py b/config.example.py
new file mode 100644
index 0000000..1fa4fc7
--- /dev/null
+++ b/config.example.py
@@ -0,0 +1,32 @@
+# The full URL base asset URL, with trailing slash.
+ASSETS_BASEURL = ''
+
+# The full URL base song URL, with trailing slash.
+SONGS_BASEURL = ''
+
+# The email address to display in the "About Simulator" menu.
+EMAIL = 'taiko@example.com'
+
+# Whether to use the user account system.
+ACCOUNTS = True
+
+# MongoDB server settings.
+MONGO = {
+    'host': ['localhost:27017'],
+    'database': 'taiko'
+}
+
+# Redis server settings, used for sessions + cache.
+REDIS = {
+    'CACHE_TYPE': 'redis',
+    'CACHE_REDIS_HOST': '127.0.0.1',
+    'CACHE_REDIS_PORT': 6379,
+    'CACHE_REDIS_PASSWORD': None,
+    'CACHE_REDIS_DB': None
+}
+
+# Secret key used for sessions.
+SECRET_KEY = 'change-me'
+
+# Git repository base URL.
+URL = 'https://github.com/bui/taiko-web/'
diff --git a/public/src/css/admin.css b/public/src/css/admin.css
index 7445630..69bb27c 100644
--- a/public/src/css/admin.css
+++ b/public/src/css/admin.css
@@ -130,3 +130,23 @@ h1 small {
     margin-bottom: 10px;
     color: white;
 }
+
+.save-song {
+    font-size: 22pt;
+    width: 120px;
+}
+
+.delete-song button {
+    float: right;
+    margin-top: -25px;
+    font-size: 12pt;
+}
+
+.side-button {
+    float: right;
+    background: green;
+    padding: 5px 20px;
+    color: white;
+    text-decoration: none;
+    margin-top: 25px;
+}
diff --git a/templates/admin_song_detail.html b/templates/admin_song_detail.html
index 9389f2d..27132f3 100644
--- a/templates/admin_song_detail.html
+++ b/templates/admin_song_detail.html
@@ -46,19 +46,19 @@
         <div class="form-field">
             <p>Courses</p>
             <label for="course_easy">Easy</label>
-            <input type="number" id="course_easy" value="{{song.courses.easy.stars}}" name="course_easy" min="1" max="10">
+            <input type="number" id="course_easy" value="{{song.courses.easy.stars}}" name="course_easy" min="0" max="10">
             <span class="checkbox"><input type="checkbox" name="branch_easy" id="branch_easy"{% if song.courses.easy.branch %} checked{% endif %}><label for="branch_easy"> Diverge Notes</label></span>
             <label for="course_normal">Normal</label>
-            <input type="number" id="course_normal" value="{{song.courses.normal.stars}}" name="course_normal" min="1" max="10">
+            <input type="number" id="course_normal" value="{{song.courses.normal.stars}}" name="course_normal" min="0" max="10">
             <span class="checkbox"><input type="checkbox" name="branch_normal" id="branch_normal"{% if song.courses.normal.branch %} checked{% endif %}><label for="branch_normal"> Diverge Notes</label></span>
             <label for="course_hard">Hard</label>
-            <input type="number" id="course_hard" value="{{song.courses.hard.stars}}" name="course_hard" min="1" max="10">
+            <input type="number" id="course_hard" value="{{song.courses.hard.stars}}" name="course_hard" min="0" max="10">
             <span class="checkbox"><input type="checkbox" name="branch_hard" id="branch_hard"{% if song.courses.hard.branch %} checked{% endif %}><label for="branch_hard"> Diverge Notes</label></span>
             <label for="course_oni">Oni</label>
-            <input type="number" id="course_oni" value="{{song.courses.oni.stars}}" name="course_oni" min="1" max="10">
+            <input type="number" id="course_oni" value="{{song.courses.oni.stars}}" name="course_oni" min="0" max="10">
             <span class="checkbox"><input type="checkbox" name="branch_oni" id="branch_oni"{% if song.courses.oni.branch %} checked{% endif %}><label for="branch_oni"> Diverge Notes</label></span>
             <label for="course_ura">Ura</label>
-            <input type="number" id="course_ura" value="{{song.courses.ura.stars}}" name="course_ura" min="1" max="10">
+            <input type="number" id="course_ura" value="{{song.courses.ura.stars}}" name="course_ura" min="0" max="10">
             <span class="checkbox"><input type="checkbox" name="branch_ura" id="branch_ura"{% if song.courses.ura.branch %} checked{% endif %}><label for="branch_ura"> Diverge Notes</label></span>
         </div>
 
@@ -115,7 +115,12 @@
             </select>
         </div>
 
-        <button type="submit">Save</button>
+        <button type="submit" class="save-song">Save</button>
     </form>
+    {% if admin.user_level >= 100 %}
+    <form class="delete-song" method="post" action="/admin/songs/{{song.id}}/delete" onsubmit="return confirm('Are you sure you wish to delete this song?');">
+        <button type="submit">Delete song</button>
+    </form>
+    {% endif %}
 </div>
 {% endblock %}
diff --git a/templates/admin_song_new.html b/templates/admin_song_new.html
new file mode 100644
index 0000000..9fc1361
--- /dev/null
+++ b/templates/admin_song_new.html
@@ -0,0 +1,121 @@
+{% extends 'admin.html' %}
+{% block content %}
+<h1>New song</h1>
+{% for message in get_flashed_messages() %}
+<div class="message">{{ message }}</div>
+{% endfor %}
+<div class="song-form">
+    <form method="post">
+
+        <div class="form-field">
+            <span class="checkbox"><input type="checkbox" name="enabled" id="enabled" checked><label for="enabled"> Enabled</label></span>
+        </div>
+
+        <div class="form-field">
+            <p>Title</p>
+            <label for="title">Original</label>
+            <input type="text" id="title" value="" name="title" required>
+            <label for="title_ja">Japanese</label>
+            <input type="text" id="title_ja" value="" name="title_ja">
+            <label for="title_en">English</label>
+            <input type="text" id="title_en" value="" name="title_en">
+            <label for="title_cn">Chinese (Simplified)</label>
+            <input type="text" id="title_cn" value="" name="title_cn">
+            <label for="title_tw">Chinese (Traditional)</label>
+            <input type="text" id="title_tw" value="" name="title_tw">
+            <label for="title_ko">Korean</label>
+            <input type="text" id="title_ko" value="" name="title_ko">
+        </div>
+
+        <div class="form-field">
+            <p>Subtitle</p>
+            <label for="subtitle">Original</label>
+            <input type="text" id="subtitle" value="" name="subtitle">
+            <label for="subtitle_ja">Japanese</label>
+            <input type="text" id="subtitle_ja" value="" name="subtitle_ja">
+            <label for="subtitle_en">English</label>
+            <input type="text" id="subtitle_en" value="" name="subtitle_en">
+            <label for="subtitle_cn">Chinese (Simplified)</label>
+            <input type="text" id="subtitle_cn" value="" name="subtitle_cn">
+            <label for="subtitle_tw">Chinese (Traditional)</label>
+            <input type="text" id="subtitle_tw" value="" name="subtitle_tw">
+            <label for="subtitle_ko">Korean</label>
+            <input type="text" id="subtitle_ko" value="" name="subtitle_ko">
+        </div>
+
+        <div class="form-field">
+            <p>Courses</p>
+            <label for="course_easy">Easy</label>
+            <input type="number" id="course_easy" value="" name="course_easy" min="0" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_easy" id="branch_easy"><label for="branch_easy"> Diverge Notes</label></span>
+            <label for="course_normal">Normal</label>
+            <input type="number" id="course_normal" value="" name="course_normal" min="0" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_normal" id="branch_normal"><label for="branch_normal"> Diverge Notes</label></span>
+            <label for="course_hard">Hard</label>
+            <input type="number" id="course_hard" value="" name="course_hard" min="0" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_hard" id="branch_hard"><label for="branch_hard"> Diverge Notes</label></span>
+            <label for="course_oni">Oni</label>
+            <input type="number" id="course_oni" value="" name="course_oni" min="0" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_oni" id="branch_oni"><label for="branch_oni"> Diverge Notes</label></span>
+            <label for="course_ura">Ura</label>
+            <input type="number" id="course_ura" value="" name="course_ura" min="0" max="10">
+            <span class="checkbox"><input type="checkbox" name="branch_ura" id="branch_ura"><label for="branch_ura"> Diverge Notes</label></span>
+        </div>
+
+        <div class="form-field">
+            <p><label for="category_id">Category</label></p>
+            <select name="category_id" id="category_id">
+                <option value="0">(none)</option>
+                {% for category in categories %}
+                    <option value="{{ category.id }}">{{ category.title }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="form-field">
+            <p><label for="type">Type</label></p>
+            <select name="type" id="type">
+                <option value="tja">TJA</option>
+                <option value="osu">osu!taiko</option>
+            </select>
+        </div>
+
+        <div class="form-field">
+            <p><label for="offset">Offset</label></p>
+            <input type="text" id="offset" value="" name="offset" required>
+        </div>
+
+        <div class="form-field">
+            <p><label for="skin_id">Skin</label></p>
+            <select name="skin_id" id="skin_id">
+                <option value="0">(none)</option>
+                {% for skin in song_skins %}
+                    <option value="{{ skin.id }}">{{ skin.name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <div class="form-field">
+            <p><label for="preview">Preview</label></p>
+            <input type="text" id="preview" value="" name="preview" required>
+        </div>
+
+        <div class="form-field">
+            <p><label for="volume">Volume</label></p>
+            <input type="text" id="volume" value="" name="volume" required>
+        </div>
+
+        <div class="form-field">
+            <p><label for="maker_id">Maker</label></p>
+            <select name="maker_id" id="maker_id">
+                <option value="0">(none)</option>
+                {% for maker in makers %}
+                    <option value="{{ maker.id }}">{{ maker.name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+
+        <button type="submit" class="save-song">Save</button>
+    </form>
+</div>
+{% endblock %}
diff --git a/templates/admin_songs.html b/templates/admin_songs.html
index eb55425..1c384a4 100644
--- a/templates/admin_songs.html
+++ b/templates/admin_songs.html
@@ -1,6 +1,12 @@
 {% extends 'admin.html' %}
 {% block content %}
+{% if admin.user_level >= 100 %}
+<a href="/admin/songs/new" class="side-button">New song</a>
+{% endif %}
 <h1>Songs</h1>
+{% for message in get_flashed_messages() %}
+<div class="message">{{ message }}</div>
+{% endfor %}
 {% for song in songs %}
     <a href="/admin/songs/{{ song.id }}" class="song-link">
         <div class="song">
diff --git a/tools/migrate_db.py b/tools/migrate_db.py
index 9f88bfd..e04ea9f 100644
--- a/tools/migrate_db.py
+++ b/tools/migrate_db.py
@@ -4,24 +4,30 @@
 import sqlite3
 from pymongo import MongoClient
 
-client = MongoClient()
-client.drop_database('taiko')
-db = client.taiko
+import os,sys,inspect
+current_dir = os.path.dirname(os.path.abspath(inspect.getfile(inspect.currentframe())))
+parent_dir = os.path.dirname(current_dir)
+sys.path.insert(0, parent_dir)
+import config
+
+client = MongoClient(config.MONGO['host'])
+client.drop_database(config.MONGO['database'])
+db = client[config.MONGO['database']]
 sqdb = sqlite3.connect('taiko.db')
 sqdb.row_factory = sqlite3.Row
 curs = sqdb.cursor()
 
 def migrate_songs():
-    curs.execute('select * from songs')
+    curs.execute('select * from songs order by id')
     rows = curs.fetchall()
 
     for row in rows:
         song = {
             'id': row['id'],
             'title': row['title'],
-            'title_lang': {'ja': row['title']},
+            'title_lang': {'ja': row['title'], 'en': None, 'cn': None, 'tw': None, 'ko': None},
             'subtitle': row['subtitle'],
-            'subtitle_lang': {'ja': row['subtitle']},
+            'subtitle_lang': {'ja': row['subtitle'], 'en': None, 'cn': None, 'tw': None, 'ko': None},
             'courses': {'easy': None, 'normal': None, 'hard': None, 'oni': None, 'ura': None},
             'enabled': True if row['enabled'] else False,
             'category_id': row['category'],
@@ -63,6 +69,9 @@ def migrate_songs():
                     song['subtitle_lang']['en'] = lang
 
         db.songs.insert_one(song)
+        last_song = song['id']
+    
+    db.seq.insert_one({'name': 'songs', 'value': last_song})
 
 def migrate_makers():
     curs.execute('select * from makers')

From fe90a3562534dcfbf7a3ecdef19df162a5194e00 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Tue, 17 Mar 2020 01:27:06 +0000
Subject: [PATCH 25/41] generate hashes on server

---
 app.py                           | 38 +++++++++++++++++++++++++++++++-
 config.example.py                |  5 ++++-
 public/src/css/admin.css         |  4 ++++
 templates/admin.html             |  2 +-
 templates/admin_song_detail.html | 10 +++++++--
 5 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/app.py b/app.py
index 0726ef9..2e5a7f6 100644
--- a/app.py
+++ b/app.py
@@ -1,9 +1,12 @@
 #!/usr/bin/env python3
 
+import base64
 import bcrypt
+import hashlib
 import config
 import json
 import re
+import requests
 import schema
 import os
 
@@ -28,10 +31,34 @@ db = client[config.MONGO['database']]
 db.users.create_index('username', unique=True)
 db.songs.create_index('id', unique=True)
 
+
+class HashException(Exception):
+    pass
+
+
 def api_error(message):
     return jsonify({'status': 'error', 'message': message})
 
 
+def generate_hash(id, form):
+    md5 = hashlib.md5()
+    if form['type'] == 'tja':
+        urls = ['%s%s/main.tja' % (config.SONGS_BASEURL, id)]
+    else:
+        urls = []
+        for diff in ['easy', 'normal', 'hard', 'oni', 'ura']:
+            if form['course_' + diff]:
+                urls.append('%s%s/%s.osu' % (config.SONGS_BASEURL, id, diff))
+
+    for url in urls:
+        resp = requests.get(url)
+        if resp.status_code != 200:
+            raise Exception('Invalid response from %s (status code %s)' % (resp.url, resp.status_code))
+        md5.update(resp.content)
+
+    return base64.b64encode(md5.digest())[:-2].decode('utf-8')
+
+
 def login_required(f):
     @wraps(f)
     def decorated_function(*args, **kwargs):
@@ -69,7 +96,8 @@ def get_config():
         'songs_baseurl': config.SONGS_BASEURL,
         'assets_baseurl': config.ASSETS_BASEURL,
         'email': config.EMAIL,
-        'accounts': config.ACCOUNTS
+        'accounts': config.ACCOUNTS,
+        'custom_js': config.CUSTOM_JS
     }
 
     if not config_out.get('songs_baseurl'):
@@ -218,6 +246,14 @@ def route_admin_songs_id_post(id):
     output['preview'] = float(request.form.get('preview')) or None
     output['volume'] = float(request.form.get('volume')) or None
     output['maker_id'] = int(request.form.get('maker_id')) or None
+    output['hash'] = request.form.get('hash')
+
+    if request.form.get('gen_hash'):
+        try:
+            output['hash'] = generate_hash(id, request.form)
+        except HashException as e:
+            flash('An error occurred: %s' % str(e), 'error')
+            return redirect('/admin/songs/%s' % id)
 
     db.songs.update_one({'id': id}, {'$set': output})
     flash('Changes saved.')
diff --git a/config.example.py b/config.example.py
index 1fa4fc7..478aa77 100644
--- a/config.example.py
+++ b/config.example.py
@@ -10,9 +10,12 @@ EMAIL = 'taiko@example.com'
 # Whether to use the user account system.
 ACCOUNTS = True
 
+# Custom JavaScript file to load with the simulator.
+CUSTOM_JS = ''
+
 # MongoDB server settings.
 MONGO = {
-    'host': ['localhost:27017'],
+    'host': ['127.0.0.1:27017'],
     'database': 'taiko'
 }
 
diff --git a/public/src/css/admin.css b/public/src/css/admin.css
index 69bb27c..033bb42 100644
--- a/public/src/css/admin.css
+++ b/public/src/css/admin.css
@@ -131,6 +131,10 @@ h1 small {
     color: white;
 }
 
+.message-error {
+    background: #b92222;
+}
+
 .save-song {
     font-size: 22pt;
     width: 120px;
diff --git a/templates/admin.html b/templates/admin.html
index e92ff9a..6080e06 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -13,7 +13,7 @@
                 <a href="/admin/songs">Songs</a>
             </div>
         </header>
-
+        
         <main>
             <div class="container">
                 {% block content %}{% endblock %}
diff --git a/templates/admin_song_detail.html b/templates/admin_song_detail.html
index 27132f3..9c860ae 100644
--- a/templates/admin_song_detail.html
+++ b/templates/admin_song_detail.html
@@ -1,8 +1,8 @@
 {% extends 'admin.html' %}
 {% block content %}
 <h1>{{ song.title }} <small>(ID: {{ song.id }})</small></h1>
-{% for message in get_flashed_messages() %}
-<div class="message">{{ message }}</div>
+{% for cat, message in get_flashed_messages(with_categories=true) %}
+<div class="message{% if cat %} message-{{cat}}{% endif %}">{{ message }}</div>
 {% endfor %}
 <div class="song-form">
     <form method="post">
@@ -115,6 +115,11 @@
             </select>
         </div>
 
+        <div class="form-field">
+            <p><label for="hash">Hash</label></p>
+            <input type="text" id="hash" value="{{song.hash}}" name="hash"> <span class="checkbox"><input type="checkbox" name="gen_hash" id="gen_hash"{><label for="gen_hash"> Generate</label></span>
+        </div>
+
         <button type="submit" class="save-song">Save</button>
     </form>
     {% if admin.user_level >= 100 %}
@@ -124,3 +129,4 @@
     {% endif %}
 </div>
 {% endblock %}
+

From 873bd1a73ea8357d70f9fe4ece87f045a4e656cc Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Tue, 17 Mar 2020 01:27:54 +0000
Subject: [PATCH 26/41] hashexception

---
 app.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app.py b/app.py
index 2e5a7f6..122ab2a 100644
--- a/app.py
+++ b/app.py
@@ -53,7 +53,7 @@ def generate_hash(id, form):
     for url in urls:
         resp = requests.get(url)
         if resp.status_code != 200:
-            raise Exception('Invalid response from %s (status code %s)' % (resp.url, resp.status_code))
+            raise HashException('Invalid response from %s (status code %s)' % (resp.url, resp.status_code))
         md5.update(resp.content)
 
     return base64.b64encode(md5.digest())[:-2].decode('utf-8')

From 1e7477dd96ac822fed217793e9aafa2b8a08a894 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Tue, 17 Mar 2020 02:10:47 +0000
Subject: [PATCH 27/41] anti-csrf

---
 app.py                           | 4 +++-
 public/src/js/account.js         | 1 +
 templates/admin_song_detail.html | 2 ++
 templates/admin_song_new.html    | 3 ++-
 4 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app.py b/app.py
index 122ab2a..22419b7 100644
--- a/app.py
+++ b/app.py
@@ -14,6 +14,7 @@ from functools import wraps
 from flask import Flask, g, jsonify, render_template, request, abort, redirect, session, flash
 from flask_caching import Cache
 from flask_session import Session
+from flask_wtf.csrf import CSRFProtect, generate_csrf
 from ffmpy import FFmpeg
 from pymongo import MongoClient
 
@@ -26,6 +27,7 @@ app.config['SESSION_COOKIE_HTTPONLY'] = False
 app.cache = Cache(app, config=config.REDIS)
 sess = Session()
 sess.init_app(app)
+csrf = CSRFProtect(app)
 
 db = client[config.MONGO['database']]
 db.users.create_index('username', unique=True)
@@ -106,6 +108,7 @@ def get_config():
         config_out['assets_baseurl'] = ''.join([request.host_url, 'assets']) + '/'
 
     config_out['_version'] = get_version()
+    config_out['_csrf_token'] = generate_csrf()
     return config_out
 
 
@@ -126,7 +129,6 @@ def get_version():
 
 
 @app.route('/')
-@app.cache.cached(timeout=15)
 def route_index():
     version = get_version()
     return render_template('index.html', version=version, config=get_config())
diff --git a/public/src/js/account.js b/public/src/js/account.js
index 22757a7..d33ab05 100644
--- a/public/src/js/account.js
+++ b/public/src/js/account.js
@@ -423,6 +423,7 @@ class Account{
 			})
 			if(obj){
 				request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
+				request.setRequestHeader("X-CSRFToken", gameConfig._csrf_token)
 				request.send(JSON.stringify(obj))
 			}else{
 				request.send()
diff --git a/templates/admin_song_detail.html b/templates/admin_song_detail.html
index 9c860ae..ff221c8 100644
--- a/templates/admin_song_detail.html
+++ b/templates/admin_song_detail.html
@@ -6,6 +6,7 @@
 {% endfor %}
 <div class="song-form">
     <form method="post">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
 
         <div class="form-field">
             <span class="checkbox"><input type="checkbox" name="enabled" id="enabled"{% if song.enabled %} checked{% endif %}{% if admin.user_level < 100 %} disabled {% endif %}><label for="enabled"> Enabled</label></span>
@@ -124,6 +125,7 @@
     </form>
     {% if admin.user_level >= 100 %}
     <form class="delete-song" method="post" action="/admin/songs/{{song.id}}/delete" onsubmit="return confirm('Are you sure you wish to delete this song?');">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
         <button type="submit">Delete song</button>
     </form>
     {% endif %}
diff --git a/templates/admin_song_new.html b/templates/admin_song_new.html
index 9fc1361..35557b0 100644
--- a/templates/admin_song_new.html
+++ b/templates/admin_song_new.html
@@ -6,9 +6,10 @@
 {% endfor %}
 <div class="song-form">
     <form method="post">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
 
         <div class="form-field">
-            <span class="checkbox"><input type="checkbox" name="enabled" id="enabled" checked><label for="enabled"> Enabled</label></span>
+            <span class="checkbox"><input type="checkbox" name="enabled" id="enabled"><label for="enabled"> Enabled</label></span>
         </div>
 
         <div class="form-field">

From 816833bac01d747a4360a411691405f6e42ef8a1 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Tue, 17 Mar 2020 02:18:18 +0000
Subject: [PATCH 28/41] handle csrf error

---
 app.py                   | 8 ++++++--
 public/src/js/strings.js | 4 ++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app.py b/app.py
index 22419b7..45d9a7b 100644
--- a/app.py
+++ b/app.py
@@ -14,7 +14,7 @@ from functools import wraps
 from flask import Flask, g, jsonify, render_template, request, abort, redirect, session, flash
 from flask_caching import Cache
 from flask_session import Session
-from flask_wtf.csrf import CSRFProtect, generate_csrf
+from flask_wtf.csrf import CSRFProtect, generate_csrf, CSRFError
 from ffmpy import FFmpeg
 from pymongo import MongoClient
 
@@ -23,7 +23,6 @@ client = MongoClient(host=config.MONGO['host'])
 
 app.secret_key = config.SECRET_KEY
 app.config['SESSION_TYPE'] = 'redis'
-app.config['SESSION_COOKIE_HTTPONLY'] = False
 app.cache = Cache(app, config=config.REDIS)
 sess = Session()
 sess.init_app(app)
@@ -86,6 +85,11 @@ def admin_required(level):
     return decorated_function
 
 
+@app.errorhandler(CSRFError)
+def handle_csrf_error(e):
+    return api_error('invalid_csrf')
+
+
 @app.before_request
 def before_request_func():
     if session.get('session_id'):
diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index 8eae935..26a3d24 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -1048,6 +1048,10 @@ var translations = {
 		verify_password_invalid: {
 			ja: null,
 			en: "Verification password does not match",
+		},
+		invalid_csrf: {
+			ja: null,
+			en: "Security token expired. Please refresh the page."
 		}
 	},
 	browserSupport: {

From 96b1ba4b04478a14c42ff50bb8510ed63f83ff18 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 17 Mar 2020 06:13:36 +0300
Subject: [PATCH 29/41] Add git hooks to tools

- Place these in your .git/hooks/ directory
---
 tools/get_version.bat     | 2 +-
 tools/get_version.sh      | 4 +++-
 tools/hooks/post-checkout | 2 ++
 tools/hooks/post-commit   | 2 ++
 tools/hooks/post-merge    | 2 ++
 tools/hooks/post-rewrite  | 2 ++
 6 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 tools/hooks/post-checkout
 create mode 100644 tools/hooks/post-commit
 create mode 100644 tools/hooks/post-merge
 create mode 100644 tools/hooks/post-rewrite

diff --git a/tools/get_version.bat b/tools/get_version.bat
index 3d2737d..72f2562 100644
--- a/tools/get_version.bat
+++ b/tools/get_version.bat
@@ -1,4 +1,4 @@
 @echo off
 (
-git log -1 --pretty="format:{\"commit\": \"%%H\", \"commit_short\": \"%%h\", \"version\": \"%%ad\", \"url\": \"https://github.com/bui/taiko-web/\"}" --date="format:%%y.%%m.%%d"
+git log -1 --pretty="format:{\"commit\": \"%%H\", \"commit_short\": \"%%h\", \"version\": \"%%ad\"}" --date="format:%%y.%%m.%%d"
 ) > ../version.json
diff --git a/tools/get_version.sh b/tools/get_version.sh
index 8d46c64..13ee916 100755
--- a/tools/get_version.sh
+++ b/tools/get_version.sh
@@ -1 +1,3 @@
-git log -1 --pretty="format:{\"commit\": \"%H\", \"commit_short\": \"%h\", \"version\": \"%ad\", \"url\": \"https://github.com/bui/taiko-web/\"}" --date="format:%y.%m.%d" > ../version.json
+#!/bin/bash
+toplevel=$( git rev-parse --show-toplevel )
+git log -1 --pretty="format:{\"commit\": \"%H\", \"commit_short\": \"%h\", \"version\": \"%ad\"}" --date="format:%y.%m.%d" > "$toplevel/version.json"
diff --git a/tools/hooks/post-checkout b/tools/hooks/post-checkout
new file mode 100644
index 0000000..12285a5
--- /dev/null
+++ b/tools/hooks/post-checkout
@@ -0,0 +1,2 @@
+#!/bin/bash
+./tools/get_version.sh
diff --git a/tools/hooks/post-commit b/tools/hooks/post-commit
new file mode 100644
index 0000000..12285a5
--- /dev/null
+++ b/tools/hooks/post-commit
@@ -0,0 +1,2 @@
+#!/bin/bash
+./tools/get_version.sh
diff --git a/tools/hooks/post-merge b/tools/hooks/post-merge
new file mode 100644
index 0000000..12285a5
--- /dev/null
+++ b/tools/hooks/post-merge
@@ -0,0 +1,2 @@
+#!/bin/bash
+./tools/get_version.sh
diff --git a/tools/hooks/post-rewrite b/tools/hooks/post-rewrite
new file mode 100644
index 0000000..12285a5
--- /dev/null
+++ b/tools/hooks/post-rewrite
@@ -0,0 +1,2 @@
+#!/bin/bash
+./tools/get_version.sh

From 841e9d37d103f4fb36b1f456fe8d425a256ead54 Mon Sep 17 00:00:00 2001
From: Bui <bui@bui.pm>
Date: Tue, 17 Mar 2020 04:03:10 +0000
Subject: [PATCH 30/41] add csrftoken api route

---
 app.py                     | 6 +++++-
 templates/admin_songs.html | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app.py b/app.py
index 45d9a7b..0667bba 100644
--- a/app.py
+++ b/app.py
@@ -112,7 +112,6 @@ def get_config():
         config_out['assets_baseurl'] = ''.join([request.host_url, 'assets']) + '/'
 
     config_out['_version'] = get_version()
-    config_out['_csrf_token'] = generate_csrf()
     return config_out
 
 
@@ -138,6 +137,11 @@ def route_index():
     return render_template('index.html', version=version, config=get_config())
 
 
+@app.route('/api/csrftoken')
+def route_csrftoken():
+    return jsonify({'status': 'ok', 'token': generate_csrf()})
+
+
 @app.route('/admin')
 @admin_required(level=50)
 def route_admin():
diff --git a/templates/admin_songs.html b/templates/admin_songs.html
index 1c384a4..2ef70ee 100644
--- a/templates/admin_songs.html
+++ b/templates/admin_songs.html
@@ -10,7 +10,11 @@
 {% for song in songs %}
     <a href="/admin/songs/{{ song.id }}" class="song-link">
         <div class="song">
-            <p>{{ song.title }}</p>
+            {% if song.title_lang.en %}
+                <p>{{ song.title_lang.en }} <small>({{ song.title }})</small></p>
+            {% else %}
+                <p>{{ song.title }}</p>
+            {% endif %}
         </div>
     </a>
 {% endfor %}

From 2232c36182602d76cef85ea6df8ce2c087d304bb Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 17 Mar 2020 07:20:03 +0300
Subject: [PATCH 31/41] Request a csrftoken before every request

---
 public/src/js/account.js      | 63 +++++++++++++++++++----------------
 public/src/js/loader.js       | 10 ++++++
 public/src/js/scorestorage.js | 53 +++++++++++++++--------------
 3 files changed, 73 insertions(+), 53 deletions(-)

diff --git a/public/src/js/account.js b/public/src/js/account.js
index d33ab05..b40bcc4 100644
--- a/public/src/js/account.js
+++ b/public/src/js/account.js
@@ -397,38 +397,45 @@ class Account{
 	}
 	request(url, obj, get){
 		this.lock(true)
-		return new Promise((resolve, reject) => {
-			var request = new XMLHttpRequest()
-			request.open(get ? "GET" : "POST", "api/" + url)
-			pageEvents.load(request).then(() => {
-				this.lock(false)
-				if(request.status !== 200){
+		var doRequest = token => {
+			return new Promise((resolve, reject) => {
+				var request = new XMLHttpRequest()
+				request.open(get ? "GET" : "POST", "api/" + url)
+				pageEvents.load(request).then(() => {
+					this.lock(false)
+					if(request.status !== 200){
+						reject()
+						return
+					}
+					try{
+						var json = JSON.parse(request.response)
+					}catch(e){
+						reject()
+						return
+					}
+					if(json.status === "ok"){
+						resolve(json)
+					}else{
+						reject(json)
+					}
+				}, () => {
+					this.lock(false)
 					reject()
-					return
-				}
-				try{
-					var json = JSON.parse(request.response)
-				}catch(e){
-					reject()
-					return
-				}
-				if(json.status === "ok"){
-					resolve(json)
+				})
+				if(obj){
+					request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
+					request.setRequestHeader("X-CSRFToken", token)
+					request.send(JSON.stringify(obj))
 				}else{
-					reject(json)
+					request.send()
 				}
-			}, () => {
-				this.lock(false)
-				reject()
 			})
-			if(obj){
-				request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
-				request.setRequestHeader("X-CSRFToken", gameConfig._csrf_token)
-				request.send(JSON.stringify(obj))
-			}else{
-				request.send()
-			}
-		})
+		}
+		if(get){
+			return doRequest()
+		}else{
+			return loader.getCsrfToken().then(doRequest)
+		}
 	}
 	lock(isLocked){
 		this.locked = isLocked
diff --git a/public/src/js/loader.js b/public/src/js/loader.js
index 2f62e19..fd98cfc 100644
--- a/public/src/js/loader.js
+++ b/public/src/js/loader.js
@@ -396,6 +396,16 @@ class Loader{
 			request.send()
 		})
 	}
+	getCsrfToken(){
+		return this.ajax("api/csrftoken").then(response => {
+			var json = JSON.parse(response)
+			if(json.status === "ok"){
+				return Promise.resolve(json.token)
+			}else{
+				return Promise.reject()
+			}
+		})
+	}
 	clean(error){
 		var fontDetectDiv = document.getElementById("fontdetectHelper")
 		if(fontDetectDiv){
diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index 1bf8ed8..6d2b16c 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -272,32 +272,35 @@ class ScoreStorage{
 	}
 	sendToServer(obj, retry){
 		if(account.loggedIn){
-			var request = new XMLHttpRequest()
-			request.open("POST", "api/scores/save")
-			var promise = pageEvents.load(request).then(response => {
-				if(request.status !== 200){
-					return Promise.reject()
-				}
-			}).catch(() => {
-				if(retry){
-					this.scoreSaveFailed = true
-					account.loggedIn = false
-					delete account.username
-					delete account.displayName
-					this.load()
-					pageEvents.send("logout")
-					return Promise.reject()
-				}else{
-					return new Promise(resolve => {
-						setTimeout(() => {
-							resolve()
-						}, 3000)
-					}).then(() => this.sendToServer(obj, true))
-				}
+			return loader.getCsrfToken().then(token => {
+				var request = new XMLHttpRequest()
+				request.open("POST", "api/scores/save")
+				var promise = pageEvents.load(request).then(response => {
+					if(request.status !== 200){
+						return Promise.reject()
+					}
+				}).catch(() => {
+					if(retry){
+						this.scoreSaveFailed = true
+						account.loggedIn = false
+						delete account.username
+						delete account.displayName
+						this.load()
+						pageEvents.send("logout")
+						return Promise.reject()
+					}else{
+						return new Promise(resolve => {
+							setTimeout(() => {
+								resolve()
+							}, 3000)
+						}).then(() => this.sendToServer(obj, true))
+					}
+				})
+				request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
+				request.setRequestHeader("X-CSRFToken", token)
+				request.send(JSON.stringify(obj))
+				return promise
 			})
-			request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
-			request.send(JSON.stringify(obj))
-			return promise
 		}else{
 			return Promise.resolve()
 		}

From a62184e0d2bb8a45057b42caf882b07f4e22806c Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 17 Mar 2020 08:51:23 +0300
Subject: [PATCH 32/41] Fix a multiplayer bug that I cannot reproduce

---
 server.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server.py b/server.py
index 587e0db..bc8cefa 100644
--- a/server.py
+++ b/server.py
@@ -276,7 +276,7 @@ async def connection(ws, path):
 					if "other_user" in user and "ws" in user["other_user"]:
 						if type == "songsel" or type == "catjump":
 							# Change song select position
-							if user["other_user"]["action"] == "songsel":
+							if user["other_user"]["action"] == "songsel" and type(value) is dict:
 								value["player"] = user["player"]
 								sent_msg = msgobj(type, value)
 								await asyncio.wait([

From 54a98b77d90067cd53c6bff6c7a7d927ec40f1c9 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 17 Mar 2020 11:07:29 +0300
Subject: [PATCH 33/41] Fix logging out and the Remember me checkbox

---
 app.py                   | 3 +--
 public/src/js/account.js | 4 +++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app.py b/app.py
index 0667bba..8a710e1 100644
--- a/app.py
+++ b/app.py
@@ -397,8 +397,7 @@ def route_api_login():
 
     session['session_id'] = result['session_id']
     session['username'] = result['username']
-    if data.get('remember'):
-        session.permanent = True
+    session.permanent = True if data.get('remember') else False
 
     return jsonify({'status': 'ok', 'username': result['username'], 'display_name': result['display_name']})
 
diff --git a/public/src/js/account.js b/public/src/js/account.js
index b40bcc4..1df6723 100644
--- a/public/src/js/account.js
+++ b/public/src/js/account.js
@@ -422,9 +422,11 @@ class Account{
 					this.lock(false)
 					reject()
 				})
+				if(!get){
+					request.setRequestHeader("X-CSRFToken", token)
+				}
 				if(obj){
 					request.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
-					request.setRequestHeader("X-CSRFToken", token)
 					request.send(JSON.stringify(obj))
 				}else{
 					request.send()

From 8d8a4577d2dbf24130093de260809ad62224709a Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Wed, 18 Mar 2020 06:54:42 +0300
Subject: [PATCH 34/41] Admin: Fix hashing if songs baseurl is not absolute

---
 app.py | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/app.py b/app.py
index 8a710e1..d1713a3 100644
--- a/app.py
+++ b/app.py
@@ -52,10 +52,16 @@ def generate_hash(id, form):
                 urls.append('%s%s/%s.osu' % (config.SONGS_BASEURL, id, diff))
 
     for url in urls:
-        resp = requests.get(url)
-        if resp.status_code != 200:
-            raise HashException('Invalid response from %s (status code %s)' % (resp.url, resp.status_code))
-        md5.update(resp.content)
+        if url.startswith("http://") or url.startswith("https://"):
+            resp = requests.get(url)
+            if resp.status_code != 200:
+                raise HashException('Invalid response from %s (status code %s)' % (resp.url, resp.status_code))
+            md5.update(resp.content)
+        else:
+            if url.startswith("/"):
+                url = url[1:]
+            with open(os.path.join("public", url), "rb") as file:
+                md5.update(file.read())
 
     return base64.b64encode(md5.digest())[:-2].decode('utf-8')
 

From 20b964ab2e76815c0537228dd22e8546d0f6b47a Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Thu, 26 Mar 2020 00:56:49 +0300
Subject: [PATCH 35/41] Fix some osu songs not being imported

---
 public/src/js/importsongs.js  | 2 +-
 public/src/js/scorestorage.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/src/js/importsongs.js b/public/src/js/importsongs.js
index bc45977..375c32b 100644
--- a/public/src/js/importsongs.js
+++ b/public/src/js/importsongs.js
@@ -430,7 +430,7 @@
 		for(var i = path.length - 2; i >= 0; i--){
 			var hasTitle = false
 			for(var j in exclude){
-				if(path[i].indexOf(exclude[j].toLowerCase()) !== -1){
+				if(exclude[j] && path[i].indexOf(exclude[j].toLowerCase()) !== -1){
 					hasTitle = true
 					break
 				}
diff --git a/public/src/js/scorestorage.js b/public/src/js/scorestorage.js
index 6d2b16c..82f6d11 100644
--- a/public/src/js/scorestorage.js
+++ b/public/src/js/scorestorage.js
@@ -93,7 +93,7 @@ class ScoreStorage{
 		}
 		return output
 	}
-	save(localOnly){
+	save(){
 		for(var hash in this.scores){
 			this.writeString(hash)
 		}

From 3679c2798674e5ddb3a2bf57efbbd2bc503a3d32 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 30 Mar 2020 09:50:34 +0300
Subject: [PATCH 36/41] Add lyrics

---
 public/src/css/debug.css    |   3 +-
 public/src/css/game.css     |  35 ++++++
 public/src/js/assets.js     |   3 +-
 public/src/js/controller.js |   7 ++
 public/src/js/debug.js      |  25 ++++
 public/src/js/loadsong.js   |  11 +-
 public/src/js/lyrics.js     | 231 ++++++++++++++++++++++++++++++++++++
 public/src/js/songselect.js |   6 +-
 public/src/js/view.js       |   7 ++
 public/src/views/debug.html |   6 +
 public/src/views/game.html  |   1 +
 11 files changed, 330 insertions(+), 5 deletions(-)
 create mode 100644 public/src/js/lyrics.js

diff --git a/public/src/css/debug.css b/public/src/css/debug.css
index f9e1478..d87c209 100644
--- a/public/src/css/debug.css
+++ b/public/src/css/debug.css
@@ -123,6 +123,7 @@
 }
 
 #debug .autoplay-label,
-#debug .branch-hide{
+#debug .branch-hide,
+#debug .lyrics-hide{
 	display: none;
 }
diff --git a/public/src/css/game.css b/public/src/css/game.css
index 69d1127..290c1eb 100644
--- a/public/src/css/game.css
+++ b/public/src/css/game.css
@@ -89,3 +89,38 @@
 .fix-animations *{
 	animation: none !important;
 }
+#song-lyrics{
+	position: absolute;
+	right: calc((100vw - 1280 / 720 * 100vh) / 2 + 100px * var(--scale));
+	bottom: calc(44 / 720 * 100vh - 30px * var(--scale));
+	left: calc((100vw - 1280 / 720 * 100vh) / 2 + 100px * var(--scale));
+	text-align: center;
+	font-family: Meiryo, sans-serif;
+	font-weight: bold;
+	font-size: calc(45px * var(--scale));
+	line-height: 1.2;
+}
+#game.portrait{
+	right: calc(20px * var(--scale));
+	left: calc(20px * var(--scale));
+}
+#song-lyrics .stroke,
+#song-lyrics .fill{
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}
+#song-lyrics .stroke{
+	-webkit-text-stroke: calc(7px * var(--scale)) #00a;
+}
+#song-lyrics .fill{
+	color: #fff;
+}
+#song-lyrics ruby{
+	display: inline-flex;
+	flex-direction: column-reverse;
+}
+#song-lyrics rt{
+	line-height: 1;
+}
diff --git a/public/src/js/assets.js b/public/src/js/assets.js
index 5230169..7d769ee 100644
--- a/public/src/js/assets.js
+++ b/public/src/js/assets.js
@@ -32,7 +32,8 @@ var assets = {
 		"logo.js",
 		"settings.js",
 		"scorestorage.js",
-		"account.js"
+		"account.js",
+		"lyrics.js"
 	],
 	"css": [
 		"main.css",
diff --git a/public/src/js/controller.js b/public/src/js/controller.js
index 7c93cce..0447daf 100644
--- a/public/src/js/controller.js
+++ b/public/src/js/controller.js
@@ -57,6 +57,10 @@ class Controller{
 				if(song.id == this.selectedSong.folder){
 					this.mainAsset = song.sound
 					this.volume = song.volume || 1
+					if(song.lyricsData && !multiplayer && (!this.touchEnabled || this.autoPlayEnabled)){
+						var lyricsDiv = document.getElementById("song-lyrics")
+						this.lyrics = new Lyrics(song.lyricsData, selectedSong.offset, lyricsDiv)
+					}
 				}
 			})
 		}
@@ -316,5 +320,8 @@ class Controller{
 				debugObj.debug.updateStatus()
 			}
 		}
+		if(this.lyrics){
+			this.lyrics.clean()
+		}
 	}
 }
diff --git a/public/src/js/debug.js b/public/src/js/debug.js
index ffaa253..1b2aeb2 100644
--- a/public/src/js/debug.js
+++ b/public/src/js/debug.js
@@ -17,6 +17,8 @@ class Debug{
 		this.branchSelect = this.branchSelectDiv.getElementsByTagName("select")[0]
 		this.branchResetBtn = this.branchSelectDiv.getElementsByClassName("reset")[0]
 		this.volumeDiv = this.byClass("music-volume")
+		this.lyricsHideDiv = this.byClass("lyrics-hide")
+		this.lyricsOffsetDiv = this.byClass("lyrics-offset")
 		this.restartLabel = this.byClass("change-restart-label")
 		this.restartCheckbox = this.byClass("change-restart")
 		this.autoplayLabel = this.byClass("autoplay-label")
@@ -50,6 +52,9 @@ class Debug{
 		this.volumeSlider.onchange(this.volumeChange.bind(this))
 		this.volumeSlider.set(1)
 		
+		this.lyricsSlider = new InputSlider(this.lyricsOffsetDiv, -60, 60, 3)
+		this.lyricsSlider.onchange(this.lyricsChange.bind(this))
+		
 		this.moveTo(100, 100)
 		this.restore()
 		this.updateStatus()
@@ -129,6 +134,9 @@ class Debug{
 			if(this.controller.parsedSongData.branches){
 				this.branchHideDiv.style.display = "block"
 			}
+			if(this.controller.lyrics){
+				this.lyricsHideDiv.style.display = "block"
+			}
 			
 			var selectedSong = this.controller.selectedSong
 			this.defaultOffset = selectedSong.offset || 0
@@ -136,11 +144,13 @@ class Debug{
 				this.offsetChange(this.offsetSlider.get(), true)
 				this.branchChange(null, true)
 				this.volumeChange(this.volumeSlider.get(), true)
+				this.lyricsChange(this.lyricsSlider.get())
 			}else{
 				this.songHash = selectedSong.hash
 				this.offsetSlider.set(this.defaultOffset)
 				this.branchReset(null, true)
 				this.volumeSlider.set(this.controller.volume)
+				this.lyricsSlider.set(this.controller.lyrics ? this.controller.lyrics.vttOffset / 1000 : 0)
 			}
 			
 			var measures = this.controller.parsedSongData.measures.filter((measure, i, array) => {
@@ -174,6 +184,7 @@ class Debug{
 			this.restartBtn.style.display = ""
 			this.autoplayLabel.style.display = ""
 			this.branchHideDiv.style.display = ""
+			this.lyricsHideDiv.style.display = ""
 			this.controller = null
 		}
 		this.stopMove()
@@ -194,6 +205,9 @@ class Debug{
 					branch.ms = branch.originalMS + offset
 				})
 			}
+			if(this.controller.lyrics){
+				this.controller.lyrics.offsetChange(value * 1000)
+			}
 			if(this.restartCheckbox.checked && !noRestart){
 				this.restartSong()
 			}
@@ -213,6 +227,14 @@ class Debug{
 			this.restartSong()
 		}
 	}
+	lyricsChange(value, noRestart){
+		if(this.controller && this.controller.lyrics){
+			this.controller.lyrics.offsetChange(undefined, value * 1000)
+		}
+		if(this.restartCheckbox.checked && !noRestart){
+			this.restartSong()
+		}
+	}
 	restartSong(){
 		if(this.controller){
 			this.controller.restartSong()
@@ -259,6 +281,7 @@ class Debug{
 		this.offsetSlider.clean()
 		this.measureNumSlider.clean()
 		this.volumeSlider.clean()
+		this.lyricsSlider.clean()
 		
 		pageEvents.remove(window, ["mousedown", "mouseup", "touchstart", "touchend", "blur", "resize"], this.windowSymbol)
 		pageEvents.mouseRemove(this)
@@ -285,6 +308,8 @@ class Debug{
 		delete this.branchSelect
 		delete this.branchResetBtn
 		delete this.volumeDiv
+		delete this.lyricsHideDiv
+		delete this.lyricsOffsetDiv
 		delete this.restartCheckbox
 		delete this.autoplayLabel
 		delete this.autoplayCheckbox
diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js
index 769d64e..a3e2485 100644
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -142,6 +142,12 @@ class LoadSong{
 			this.addPromise(loader.ajax(url).then(data => {
 				this.songData = data.replace(/\0/g, "").split("\n")
 			}), url)
+			if(song.lyrics && !songObj.lyricsData){
+				var url = this.getSongDir(song) + "main.vtt"
+				this.addPromise(loader.ajax(url).then(data => {
+					songObj.lyricsData = data
+				}), url)
+			}
 		}
 		if(this.touchEnabled && !assets.image["touch_drum"]){
 			let img = document.createElement("img")
@@ -262,8 +268,11 @@ class LoadSong{
 	randInt(min, max){
 		return Math.floor(Math.random() * (max - min + 1)) + min
 	}
+	getSongDir(selectedSong){
+		return gameConfig.songs_baseurl + selectedSong.folder + "/"
+	}
 	getSongPath(selectedSong){
-		var directory = gameConfig.songs_baseurl + selectedSong.folder + "/"
+		var directory = this.getSongDir(selectedSong)
 		if(selectedSong.type === "tja"){
 			return directory + "main.tja"
 		}else{
diff --git a/public/src/js/lyrics.js b/public/src/js/lyrics.js
new file mode 100644
index 0000000..122efa8
--- /dev/null
+++ b/public/src/js/lyrics.js
@@ -0,0 +1,231 @@
+class Lyrics{
+	constructor(file, songOffset, div){
+		this.div = div
+		this.stroke = document.createElement("div")
+		this.stroke.classList.add("stroke")
+		div.appendChild(this.stroke)
+		this.fill = document.createElement("div")
+		this.fill.classList.add("fill")
+		div.appendChild(this.fill)
+		this.current = 0
+		this.shown = -1
+		this.songOffset = songOffset || 0
+		this.vttOffset = 0
+		this.rLinebreak = /\n|\r\n/
+		this.lines = this.parseFile(file)
+		this.length = this.lines.length
+	}
+	parseFile(file){
+		var lines = []
+		var commands = file.split(/\n\n|\r\n\r\n/)
+		var arrow = " --> "
+		for(var i in commands){
+			var matches = commands[i].match(this.rLinebreak)
+			if(matches){
+				var cmd = commands[i].slice(0, matches.index)
+				var value = commands[i].slice(matches.index + 1)
+			}else{
+				var cmd = commands[i]
+				var value = ""
+			}
+			if(cmd.startsWith("WEBVTT")){
+				var nameValue = cmd.slice(7).split(";")
+				for(var j in nameValue){
+					var [name, value] = nameValue[j].split(":")
+					if(name.trim().toLowerCase() === "offset"){
+						this.vttOffset = (parseFloat(value.trim()) || 0) * 1000
+					}
+				}
+			}else{
+				var time = null
+				var index = cmd.indexOf(arrow)
+				if(index !== -1){
+					time = cmd
+				}else{
+					var matches = value.match(rLinebreak)
+					if(matches){
+						var value1 = value.slice(0, matches.index)
+						index = value1.indexOf(arrow)
+						if(index !== -1){
+							time = value1
+							value = value.slice(index)
+						}
+					}
+				}
+				if(time !== null){
+					var start = time.slice(0, index)
+					var end = time.slice(index + arrow.length)
+					var index = end.indexOf(" ")
+					if(index !== -1){
+						end = end.slice(0, index)
+					}
+					var text = value.trim()
+					var textLang = ""
+					var firstLang = -1
+					var index2 = -1
+					while(true){
+						var index1 = text.indexOf("<lang ", index2 + 1)
+						if(firstLang === -1){
+							firstLang = index1
+						}
+						if(index1 !== -1){
+							index2 = text.indexOf(">", index1 + 6)
+							if(index2 === -1){
+								break
+							}
+							var lang = text.slice(index1 + 6, index2).toLowerCase()
+							if(strings.id === lang){
+								var index3 = text.indexOf("<lang ", index2 + 1)
+								if(index3 !== -1){
+									textLang = text.slice(index2 + 1, index3)
+								}else{
+									textLang = text.slice(index2 + 1)
+								}
+							}
+						}else{
+							break
+						}
+					}
+					if(!textLang){
+						textLang = firstLang === -1 ? text : text.slice(0, firstLang)
+					}
+					lines.push({
+						start: this.convertTime(start),
+						end: this.convertTime(end),
+						text: textLang
+					})
+				}
+			}
+		}
+		return lines
+	}
+	convertTime(time){
+		if(time.startsWith("-")){
+			var mul = -1
+			time = time.slice(1)
+		}else{
+			var mul = 1
+		}
+		var array = time.split(":")
+		if(array.length === 2){
+			var h = 0
+			var m = array[0]
+			var s = array[1]
+		}else{
+			var h = parseInt(array[0])
+			var m = array[1]
+			var s = array[2]
+		}
+		var index = s.indexOf(",")
+		if(index !== -1){
+			s = s.slice(0, index) + "." + s.slice(index + 1)
+		}
+		return ((h * 60 + parseInt(m)) * 60 + parseFloat(s)) * 1000 * mul
+	}
+	update(ms){
+		if(this.current >= this.length){
+			return
+		}
+		ms += this.songOffset + this.vttOffset
+		var currentLine = this.lines[this.current]
+		while(currentLine && ms > currentLine.end){
+			currentLine = this.lines[++this.current]
+		}
+		if(this.shown !== this.current){
+			if(currentLine && ms >= currentLine.start){
+				this.setText(this.lines[this.current].text)
+				this.shown = this.current
+			}else if(this.shown !== -1){
+				this.setText("")
+				this.shown = -1
+			}
+		}
+	}
+	setText(text){
+		this.stroke.innerHTML = this.fill.innerHTML = ""
+		var hasRuby = false
+		while(text){
+			var matches = text.match(this.rLinebreak)
+			var index1 = matches ? matches.index : -1
+			var index2 = text.indexOf("<ruby>")
+			if(index1 !== -1 && (index2 === -1 || index2 > index1)){
+				this.textNode(text.slice(0, index1))
+				this.linebreakNode()
+				text = text.slice(index1 + matches[0].length)
+			}else if(index2 !== -1){
+				hasRuby = true
+				this.textNode(text.slice(0, index2))
+				text = text.slice(index2 + 6)
+				var index = text.indexOf("</ruby>")
+				if(index !== -1){
+					var ruby = text.slice(0, index)
+					text = text.slice(index + 7)
+				}else{
+					var ruby = text
+					text = ""
+				}
+				var index = ruby.indexOf("<rt>")
+				if(index !== -1){
+					var node1 = ruby.slice(0, index)
+					ruby = ruby.slice(index + 4)
+					var index = ruby.indexOf("</rt>")
+					if(index !== -1){
+						var node2 = ruby.slice(0, index)
+					}else{
+						var node2 = ruby
+					}
+				}else{
+					var node1 = ruby
+					var node2 = ""
+				}
+				this.rubyNode(node1, node2)
+			}else{
+				this.textNode(text)
+				break
+			}
+		}
+	}
+	insertNode(func){
+		this.stroke.appendChild(func())
+		this.fill.appendChild(func())
+	}
+	textNode(text){
+		this.insertNode(() => document.createTextNode(text))
+	}
+	linebreakNode(){
+		this.insertNode(() => document.createElement("br"))
+	}
+	rubyNode(node1, node2){
+		this.insertNode(() => {
+			var ruby = document.createElement("ruby")
+			var rt = document.createElement("rt")
+			ruby.appendChild(document.createTextNode(node1))
+			rt.appendChild(document.createTextNode(node2))
+			ruby.appendChild(rt)
+			return ruby
+		})
+	}
+	setScale(ratio){
+		this.div.style.setProperty("--scale", ratio)
+	}
+	offsetChange(songOffset, vttOffset){
+		if(typeof songOffset !== "undefined"){
+			this.songOffset = songOffset
+		}
+		if(typeof vttOffset !== "undefined"){
+			this.vttOffset = vttOffset
+		}
+		this.setText("")
+		this.current = 0
+		this.shown = -1
+	}
+	clean(){
+		if(this.shown !== -1){
+			this.setText("")
+		}
+		delete this.div
+		delete this.stroke
+		delete this.fill
+		delete this.lines
+	}
+}
diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index 4704ccd..bf95241 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -127,7 +127,8 @@ class SongSelect{
 				maker: song.maker,
 				canJump: true,
 				hash: song.hash || song.title,
-				order: song.order
+				order: song.order,
+				lyrics: song.lyrics
 			})
 		}
 		this.songs.sort((a, b) => {
@@ -802,7 +803,8 @@ class SongSelect{
 			"offset": selectedSong.offset,
 			"songSkin": selectedSong.songSkin,
 			"stars": selectedSong.courses[diff].stars,
-			"hash": selectedSong.hash
+			"hash": selectedSong.hash,
+			"lyrics": selectedSong.lyrics
 		}, autoplay, multiplayer, touch)
 	}
 	toOptions(moveBy){
diff --git a/public/src/js/view.js b/public/src/js/view.js
index ba7ece8..4326379 100644
--- a/public/src/js/view.js
+++ b/public/src/js/view.js
@@ -247,6 +247,9 @@
 			}
 			this.fillComboCache()
 			this.setDonBgHeight()
+			if(this.controller.lyrics){
+				this.controller.lyrics.setScale(ratio / this.pixelRatio)
+			}
 			resized = true
 		}else if(this.controller.game.paused && !document.hasFocus()){
 			return
@@ -283,6 +286,10 @@
 			this.setDonBgHeight()
 		}
 		
+		if(this.controller.lyrics){
+			this.controller.lyrics.update(ms)
+		}
+		
 		ctx.save()
 		ctx.translate(0, frameTop)
 		
diff --git a/public/src/views/debug.html b/public/src/views/debug.html
index 864e18f..14d6062 100644
--- a/public/src/views/debug.html
+++ b/public/src/views/debug.html
@@ -24,6 +24,12 @@
 	<div class="music-volume input-slider">
 		<span class="reset">x</span><input type="text" value="" readonly><span class="minus">-</span><span class="plus">+</span>
 	</div>
+	<div class="lyrics-hide">
+		<div>Lyrics offset:</div>
+		<div class="lyrics-offset input-slider">
+			<span class="reset">x</span><input type="text" value="" readonly><span class="minus">-</span><span class="plus">+</span>
+		</div>
+	</div>
 	<label class="change-restart-label"><input class="change-restart" type="checkbox">Restart on change</label>
 	<label class="autoplay-label"><input class="autoplay" type="checkbox">Auto play</label>
 	<div class="bottom-btns">
diff --git a/public/src/views/game.html b/public/src/views/game.html
index c9e3837..60c7908 100644
--- a/public/src/views/game.html
+++ b/public/src/views/game.html
@@ -8,6 +8,7 @@
 		<div id="touch-drum-img"></div>
 	</div>
 	<canvas id="canvas"></canvas>
+	<div id="song-lyrics"></div>
 	<div id="touch-buttons">
 		<div id="touch-full-btn"></div><div id="touch-pause-btn"></div>
 	</div>

From 18b6e7dfc2d60e1824f09a80195d063dca4bf718 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 30 Mar 2020 11:59:42 +0300
Subject: [PATCH 37/41] Fix debug

---
 public/src/js/debug.js  | 2 +-
 public/src/js/lyrics.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/src/js/debug.js b/public/src/js/debug.js
index 1b2aeb2..447f24f 100644
--- a/public/src/js/debug.js
+++ b/public/src/js/debug.js
@@ -144,7 +144,7 @@ class Debug{
 				this.offsetChange(this.offsetSlider.get(), true)
 				this.branchChange(null, true)
 				this.volumeChange(this.volumeSlider.get(), true)
-				this.lyricsChange(this.lyricsSlider.get())
+				this.lyricsChange(this.lyricsSlider.get(), true)
 			}else{
 				this.songHash = selectedSong.hash
 				this.offsetSlider.set(this.defaultOffset)
diff --git a/public/src/js/lyrics.js b/public/src/js/lyrics.js
index 122efa8..f2708a2 100644
--- a/public/src/js/lyrics.js
+++ b/public/src/js/lyrics.js
@@ -42,7 +42,7 @@ class Lyrics{
 				if(index !== -1){
 					time = cmd
 				}else{
-					var matches = value.match(rLinebreak)
+					var matches = value.match(this.rLinebreak)
 					if(matches){
 						var value1 = value.slice(0, matches.index)
 						index = value1.indexOf(arrow)

From b4dcd76f9034a3b5d23e7c4a624d2f981c26185b Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Mon, 30 Mar 2020 17:29:53 +0300
Subject: [PATCH 38/41] SongSelect: Mark songs with lyrics

---
 public/src/js/songselect.js | 72 +++++++++++++++++++++++--------------
 public/src/js/strings.js    |  7 ++++
 2 files changed, 52 insertions(+), 27 deletions(-)

diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js
index bf95241..0ef845b 100644
--- a/public/src/js/songselect.js
+++ b/public/src/js/songselect.js
@@ -1745,46 +1745,64 @@ class SongSelect{
 						})
 					})
 				}
-
-				if(currentSong.maker || currentSong.maker === 0){
+				
+				var hasMaker = currentSong.maker || currentSong.maker === 0
+				if(hasMaker || currentSong.lyrics){
 					if (songSel) {
 						var _x = x + 38
 						var _y = y + 10
+						ctx.strokeStyle = "#000"
 						ctx.lineWidth = 5
-
-						var grd = ctx.createLinearGradient(_x, _y, _x, _y+50);
-						grd.addColorStop(0, '#fa251a');
-						grd.addColorStop(1, '#ffdc33');
-
-						ctx.fillStyle = grd;
+						
+						if(hasMaker){
+							var grd = ctx.createLinearGradient(_x, _y, _x, _y + 50)
+							grd.addColorStop(0, "#fa251a")
+							grd.addColorStop(1, "#ffdc33")
+							ctx.fillStyle = grd
+						}else{
+							ctx.fillStyle = "#000"
+						}
 						this.draw.roundedRect({
 							ctx: ctx,
 							x: _x - 28,
 							y: _y,
-							w: 130,
+							w: 192,
 							h: 50,
 							radius: 24
 						})
 						ctx.fill()
 						ctx.stroke()
-						ctx.beginPath()
-						ctx.arc(_x, _y + 28, 20, 0, Math.PI * 2)
-						ctx.fill()
-
-						this.draw.layeredText({
-							ctx: ctx,
-							text: strings.creative.creative,
-							fontSize: strings.id == "en" ? 30 : 34,
-							fontFamily: this.font,
-							align: "center",
-							baseline: "middle",
-							x: _x + 38,
-							y: _y + (["ja", "en"].indexOf(strings.id) >= 0 ? 25 : 28),
-							width: 110
-						}, [
-							{outline: "#fff", letterBorder: 8},
-							{fill: "#000"}
-						])
+						
+						if(hasMaker){
+							this.draw.layeredText({
+								ctx: ctx,
+								text: strings.creative.creative,
+								fontSize: strings.id === "en" ? 28 : 34,
+								fontFamily: this.font,
+								align: "center",
+								baseline: "middle",
+								x: _x + 68,
+								y: _y + (strings.id === "ja" || strings.id === "en" ? 25 : 28),
+								width: 172
+							}, [
+								{outline: "#fff", letterBorder: 6},
+								{fill: "#000"}
+							])
+						}else{
+							this.draw.layeredText({
+								ctx: ctx,
+								text: strings.withLyrics,
+								fontSize: strings.id === "en" ? 28 : 34,
+								fontFamily: this.font,
+								align: "center",
+								baseline: "middle",
+								x: _x + 68,
+								y: _y + (strings.id === "ja" || strings.id === "en" ? 25 : 28),
+								width: 172
+							}, [
+								{fill: currentSong.skin.border[0]}
+							])
+						}
 					} else if(currentSong.maker && currentSong.maker.id > 0 && currentSong.maker.name){
 						var _x = x + 62
 						var _y = y + 380
diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index 26a3d24..6edf481 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -1087,6 +1087,13 @@ var translations = {
 			tw: "製作者",
 			ko: "만드는 사람"
 		}
+	},
+	withLyrics: {
+		ja: "歌詞あり",
+		en: "With lyrics",
+		cn: "带歌词",
+		tw: "帶歌詞",
+		ko: "가사가있는"
 	}
 }
 var allStrings = {}

From 51bd6cec6317027ede416740db9db8950c6d4680 Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 31 Mar 2020 15:50:27 +0300
Subject: [PATCH 39/41] Support importing lyrics

- Use inline "#LYRIC" lines in tja files
- "LYRICS:" in tja metadata can point to a vtt file, this overrides "#LYRIC"
---
 public/src/css/game.css      |  3 ++-
 public/src/js/controller.js  | 28 ++++++++++++++++++++--------
 public/src/js/importsongs.js |  9 +++++++++
 public/src/js/loadsong.js    |  7 +++++++
 public/src/js/lyrics.js      |  4 ++--
 public/src/js/parsetja.js    | 18 ++++++++++++++++++
 6 files changed, 58 insertions(+), 11 deletions(-)

diff --git a/public/src/css/game.css b/public/src/css/game.css
index 290c1eb..7918ce1 100644
--- a/public/src/css/game.css
+++ b/public/src/css/game.css
@@ -99,8 +99,9 @@
 	font-weight: bold;
 	font-size: calc(45px * var(--scale));
 	line-height: 1.2;
+	white-space: pre-wrap;
 }
-#game.portrait{
+#game.portrait #song-lyrics{
 	right: calc(20px * var(--scale));
 	left: calc(20px * var(--scale));
 }
diff --git a/public/src/js/controller.js b/public/src/js/controller.js
index 0447daf..af8e9a3 100644
--- a/public/src/js/controller.js
+++ b/public/src/js/controller.js
@@ -57,9 +57,14 @@ class Controller{
 				if(song.id == this.selectedSong.folder){
 					this.mainAsset = song.sound
 					this.volume = song.volume || 1
-					if(song.lyricsData && !multiplayer && (!this.touchEnabled || this.autoPlayEnabled)){
-						var lyricsDiv = document.getElementById("song-lyrics")
-						this.lyrics = new Lyrics(song.lyricsData, selectedSong.offset, lyricsDiv)
+					if(!multiplayer && (!this.touchEnabled || this.autoPlayEnabled)){
+						if(song.lyricsData){
+							var lyricsDiv = document.getElementById("song-lyrics")
+							this.lyrics = new Lyrics(song.lyricsData, selectedSong.offset, lyricsDiv)
+						}else if(this.parsedSongData.lyrics){
+							var lyricsDiv = document.getElementById("song-lyrics")
+							this.lyrics = new Lyrics(this.parsedSongData.lyrics, selectedSong.offset, lyricsDiv, true)
+						}
 					}
 				}
 			})
@@ -231,20 +236,27 @@ class Controller{
 					resolve()
 				}else{
 					var songObj = assets.songs.find(song => song.id === this.selectedSong.folder)
+					var promises = []
 					if(songObj.chart && songObj.chart !== "blank"){
 						var reader = new FileReader()
-						var promise = pageEvents.load(reader).then(event => {
+						promises.push(pageEvents.load(reader).then(event => {
 							this.songData = event.target.result.replace(/\0/g, "").split("\n")
-							resolve()
-						})
+							return Promise.resolve()
+						}))
 						if(this.selectedSong.type === "tja"){
 							reader.readAsText(songObj.chart, "sjis")
 						}else{
 							reader.readAsText(songObj.chart)
 						}
-					}else{
-						resolve()
 					}
+					if(songObj.lyricsFile){
+						var reader = new FileReader()
+						promises.push(pageEvents.load(reader).then(event => {
+							songObj.lyricsData = event.target.result
+						}), songObj.lyricsFile.webkitRelativePath)
+						reader.readAsText(songObj.lyricsFile)
+					}
+					Promise.all(promises).then(resolve)
 				}
 			}).then(() => {
 				var taikoGame = new Controller(this.selectedSong, this.songData, this.autoPlayEnabled, false, this.touchEnabled)
diff --git a/public/src/js/importsongs.js b/public/src/js/importsongs.js
index 375c32b..87d63df 100644
--- a/public/src/js/importsongs.js
+++ b/public/src/js/importsongs.js
@@ -260,6 +260,15 @@
 						id: 1
 					}
 				}
+				if(meta.lyrics){
+					var lyricsFile = this.normPath(this.joinPath(dir, meta.lyrics))
+					if(lyricsFile in this.otherFiles){
+						songObj.lyrics = true
+						songObj.lyricsFile = this.otherFiles[lyricsFile]
+					}
+				}else if(meta.inlineLyrics){
+					songObj.lyrics = true
+				}
 				for(var id in allStrings){
 					var songTitle = songObj.title
 					var ura = ""
diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js
index a3e2485..28285dc 100644
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -137,6 +137,13 @@ class LoadSong{
 					reader.readAsText(songObj.chart)
 				}
 			}
+			if(songObj.lyricsFile){
+				var reader = new FileReader()
+				this.addPromise(pageEvents.load(reader).then(event => {
+					songObj.lyricsData = event.target.result
+				}), songObj.lyricsFile.webkitRelativePath)
+				reader.readAsText(songObj.lyricsFile)
+			}
 		}else{
 			var url = this.getSongPath(song)
 			this.addPromise(loader.ajax(url).then(data => {
diff --git a/public/src/js/lyrics.js b/public/src/js/lyrics.js
index f2708a2..d4974b3 100644
--- a/public/src/js/lyrics.js
+++ b/public/src/js/lyrics.js
@@ -1,5 +1,5 @@
 class Lyrics{
-	constructor(file, songOffset, div){
+	constructor(file, songOffset, div, parsed){
 		this.div = div
 		this.stroke = document.createElement("div")
 		this.stroke.classList.add("stroke")
@@ -12,7 +12,7 @@ class Lyrics{
 		this.songOffset = songOffset || 0
 		this.vttOffset = 0
 		this.rLinebreak = /\n|\r\n/
-		this.lines = this.parseFile(file)
+		this.lines = parsed ? file : this.parseFile(file)
 		this.length = this.lines.length
 	}
 	parseFile(file){
diff --git a/public/src/js/parsetja.js b/public/src/js/parsetja.js
index 6c51ef1..2296dbc 100644
--- a/public/src/js/parsetja.js
+++ b/public/src/js/parsetja.js
@@ -84,6 +84,8 @@
 					}
 				}else if(name.startsWith("branchstart") && inSong){
 					courses[courseName].branch = true
+				}else if(name.startsWith("lyric") && inSong){
+					courses[courseName].inlineLyrics = true
 				}
 				
 			}else if(!inSong){
@@ -411,6 +413,18 @@
 						}
 						branchObj[branchName] = currentBranch
 						break
+					case "lyric":
+						if(!this.lyrics){
+							this.lyrics = []
+						}
+						if(this.lyrics.length !== 0){
+							this.lyrics[this.lyrics.length - 1].end = ms
+						}
+						this.lyrics.push({
+							start: ms,
+							text: value.trim()
+						})
+						break
 				}
 				
 			}else{
@@ -545,6 +559,10 @@
 			this.scoreinit = autoscore.ScoreInit;
 			this.scorediff = autoscore.ScoreDiff;
 		}
+		if(this.lyrics){
+			var line = this.lyrics[this.lyrics.length - 1]
+			line.end = Math.max(ms, line.start) + 5000
+		}
 		return circles
 	}
 }

From de284d204d52bb8e09e210871833fde9a8ac927a Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Tue, 31 Mar 2020 16:44:54 +0300
Subject: [PATCH 40/41] Add Show Lyrics option to settings

---
 public/src/js/controller.js | 4 ++--
 public/src/js/loadsong.js   | 6 +++---
 public/src/js/parsetja.js   | 3 ++-
 public/src/js/settings.js   | 4 ++++
 public/src/js/strings.js    | 6 ++++++
 5 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/public/src/js/controller.js b/public/src/js/controller.js
index af8e9a3..58d9315 100644
--- a/public/src/js/controller.js
+++ b/public/src/js/controller.js
@@ -57,7 +57,7 @@ class Controller{
 				if(song.id == this.selectedSong.folder){
 					this.mainAsset = song.sound
 					this.volume = song.volume || 1
-					if(!multiplayer && (!this.touchEnabled || this.autoPlayEnabled)){
+					if(!multiplayer && (!this.touchEnabled || this.autoPlayEnabled) && settings.getItem("showLyrics")){
 						if(song.lyricsData){
 							var lyricsDiv = document.getElementById("song-lyrics")
 							this.lyrics = new Lyrics(song.lyricsData, selectedSong.offset, lyricsDiv)
@@ -253,7 +253,7 @@ class Controller{
 						var reader = new FileReader()
 						promises.push(pageEvents.load(reader).then(event => {
 							songObj.lyricsData = event.target.result
-						}), songObj.lyricsFile.webkitRelativePath)
+						}, () => Promise.resolve()), songObj.lyricsFile.webkitRelativePath)
 						reader.readAsText(songObj.lyricsFile)
 					}
 					Promise.all(promises).then(resolve)
diff --git a/public/src/js/loadsong.js b/public/src/js/loadsong.js
index 28285dc..b2e3f98 100644
--- a/public/src/js/loadsong.js
+++ b/public/src/js/loadsong.js
@@ -137,11 +137,11 @@ class LoadSong{
 					reader.readAsText(songObj.chart)
 				}
 			}
-			if(songObj.lyricsFile){
+			if(songObj.lyricsFile && settings.getItem("showLyrics")){
 				var reader = new FileReader()
 				this.addPromise(pageEvents.load(reader).then(event => {
 					songObj.lyricsData = event.target.result
-				}), songObj.lyricsFile.webkitRelativePath)
+				}, () => Promise.resolve()), songObj.lyricsFile.webkitRelativePath)
 				reader.readAsText(songObj.lyricsFile)
 			}
 		}else{
@@ -149,7 +149,7 @@ class LoadSong{
 			this.addPromise(loader.ajax(url).then(data => {
 				this.songData = data.replace(/\0/g, "").split("\n")
 			}), url)
-			if(song.lyrics && !songObj.lyricsData){
+			if(song.lyrics && !songObj.lyricsData && !this.multiplayer && (!this.touchEnabled || this.autoPlayEnabled) && settings.getItem("showLyrics")){
 				var url = this.getSongDir(song) + "main.vtt"
 				this.addPromise(loader.ajax(url).then(data => {
 					songObj.lyricsData = data
diff --git a/public/src/js/parsetja.js b/public/src/js/parsetja.js
index 2296dbc..97b51fa 100644
--- a/public/src/js/parsetja.js
+++ b/public/src/js/parsetja.js
@@ -160,6 +160,7 @@
 		var circleID = 0
 		var regexAZ = /[A-Z]/
 		var regexSpace = /\s/
+		var regexLinebreak = /\\n/g
 		var isAllDon = (note_chain, start_pos) => { 
 			for (var i = start_pos; i < note_chain.length; ++i) { 
 				var note = note_chain[i];
@@ -422,7 +423,7 @@
 						}
 						this.lyrics.push({
 							start: ms,
-							text: value.trim()
+							text: value.trim().replace(regexLinebreak, "\n")
 						})
 						break
 				}
diff --git a/public/src/js/settings.js b/public/src/js/settings.js
index e2c2f4d..1f7a9bb 100644
--- a/public/src/js/settings.js
+++ b/public/src/js/settings.js
@@ -50,6 +50,10 @@ class Settings{
 			easierBigNotes: {
 				type: "toggle",
 				default: false
+			},
+			showLyrics: {
+				type: "toggle",
+				default: true
 			}
 		}
 		
diff --git a/public/src/js/strings.js b/public/src/js/strings.js
index 6edf481..5dd8ddd 100644
--- a/public/src/js/strings.js
+++ b/public/src/js/strings.js
@@ -780,6 +780,12 @@ var translations = {
 				ko: "쉬운 큰 음표"
 			}
 		},
+		showLyrics: {
+			name: {
+				ja: "歌詞の表示",
+				en: "Show Lyrics"
+			}
+		},
 		on: {
 			ja: "オン",
 			en: "On",

From 967d882a361726633eb79c560f4d8fc214a8a80b Mon Sep 17 00:00:00 2001
From: LoveEevee <LoveEevee@users.noreply.github.com>
Date: Thu, 2 Apr 2020 01:37:23 +0300
Subject: [PATCH 41/41] Fix multiplayer server

---
 server.py | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/server.py b/server.py
index bc8cefa..b7057fc 100644
--- a/server.py
+++ b/server.py
@@ -13,11 +13,11 @@ server_status = {
 }
 consonants = "bcdfghjklmnpqrstvwxyz"
 
-def msgobj(type, value=None):
+def msgobj(msg_type, value=None):
 	if value == None:
-		return json.dumps({"type": type})
+		return json.dumps({"type": msg_type})
 	else:
-		return json.dumps({"type": type, "value": value})
+		return json.dumps({"type": msg_type, "value": value})
 
 def status_event():
 	value = []
@@ -70,11 +70,11 @@ async def connection(ws, path):
 				except json.decoder.JSONDecodeError:
 					data = {}
 				action = user["action"]
-				type = data["type"] if "type" in data else None
+				msg_type = data["type"] if "type" in data else None
 				value = data["value"] if "value" in data else None
 				if action == "ready":
 					# Not playing or waiting
-					if type == "join":
+					if msg_type == "join":
 						if value == None:
 							continue
 						waiting = server_status["waiting"]
@@ -122,7 +122,7 @@ async def connection(ws, path):
 								await ws.send(msgobj("waiting"))
 						# Update others on waiting players
 						await notify_status()
-					elif type == "invite":
+					elif msg_type == "invite":
 						if value and "id" in value and value["id"] == None:
 							# Session invite link requested
 							invite = get_invite()
@@ -157,7 +157,7 @@ async def connection(ws, path):
 							await ws.send(msgobj("gameend"))
 				elif action == "waiting" or action == "loading" or action == "loaded":
 					# Waiting for another user
-					if type == "leave":
+					if msg_type == "leave":
 						# Stop waiting
 						if user["session"]:
 							if "other_user" in user and "ws" in user["other_user"]:
@@ -182,7 +182,7 @@ async def connection(ws, path):
 								notify_status()
 							])
 					if action == "loading":
-						if type == "gamestart":
+						if msg_type == "gamestart":
 							user["action"] = "loaded"
 							if user["other_user"]["action"] == "loaded":
 								user["action"] = "playing"
@@ -195,12 +195,12 @@ async def connection(ws, path):
 				elif action == "playing":
 					# Playing with another user
 					if "other_user" in user and "ws" in user["other_user"]:
-						if type == "note"\
-							or type == "drumroll"\
-							or type == "branch"\
-							or type == "gameresults":
-							await user["other_user"]["ws"].send(msgobj(type, value))
-						elif type == "songsel" and user["session"]:
+						if msg_type == "note"\
+							or msg_type == "drumroll"\
+							or msg_type == "branch"\
+							or msg_type == "gameresults":
+							await user["other_user"]["ws"].send(msgobj(msg_type, value))
+						elif msg_type == "songsel" and user["session"]:
 							user["action"] = "songsel"
 							user["other_user"]["action"] = "songsel"
 							sent_msg1 = msgobj("songsel")
@@ -211,7 +211,7 @@ async def connection(ws, path):
 								user["other_user"]["ws"].send(sent_msg1),
 								user["other_user"]["ws"].send(sent_msg2)
 							])
-						elif type == "gameend":
+						elif msg_type == "gameend":
 							# User wants to disconnect
 							user["action"] = "ready"
 							user["other_user"]["action"] = "ready"
@@ -234,7 +234,7 @@ async def connection(ws, path):
 							ws.send(status_event())
 						])
 				elif action == "invite":
-					if type == "leave":
+					if msg_type == "leave":
 						# Cancel session invite
 						if user["session"] in server_status["invites"]:
 							del server_status["invites"][user["session"]]
@@ -255,11 +255,11 @@ async def connection(ws, path):
 								ws.send(msgobj("left")),
 								ws.send(status_event())
 							])
-					elif type == "songsel" and "other_user" in user:
+					elif msg_type == "songsel" and "other_user" in user:
 						if "ws" in user["other_user"]:
 							user["action"] = "songsel"
 							user["other_user"]["action"] = "songsel"
-							sent_msg = msgobj(type)
+							sent_msg = msgobj(msg_type)
 							await asyncio.wait([
 								ws.send(sent_msg),
 								user["other_user"]["ws"].send(sent_msg)
@@ -274,22 +274,22 @@ async def connection(ws, path):
 				elif action == "songsel":
 					# Session song selection
 					if "other_user" in user and "ws" in user["other_user"]:
-						if type == "songsel" or type == "catjump":
+						if msg_type == "songsel" or msg_type == "catjump":
 							# Change song select position
 							if user["other_user"]["action"] == "songsel" and type(value) is dict:
 								value["player"] = user["player"]
-								sent_msg = msgobj(type, value)
+								sent_msg = msgobj(msg_type, value)
 								await asyncio.wait([
 									ws.send(sent_msg),
 									user["other_user"]["ws"].send(sent_msg)
 								])
-						elif type == "crowns" or type == "getcrowns":
+						elif msg_type == "crowns" or msg_type == "getcrowns":
 							if user["other_user"]["action"] == "songsel":
-								sent_msg = msgobj(type, value)
+								sent_msg = msgobj(msg_type, value)
 								await asyncio.wait([
 									user["other_user"]["ws"].send(sent_msg)
 								])
-						elif type == "join":
+						elif msg_type == "join":
 							# Start game
 							if value == None:
 								continue
@@ -311,7 +311,7 @@ async def connection(ws, path):
 									"id": id,
 									"diff": diff
 								}]))
-						elif type == "gameend":
+						elif msg_type == "gameend":
 							# User wants to disconnect
 							user["action"] = "ready"
 							user["session"] = False