Add keyboard and gamepad settings

public/assets/img/img.css

@@ -16,3 +16,6 @@
 #touch-pause-btn{
 	background-image: url("touch_pause.png");
 }
+.settings-outer{
+	background-image: url("bg_settings.png");
+}

public/src/css/main.css

@@ -92,6 +92,7 @@ kbd{
 	color: #000;
 }
 .taibtn:hover,
+.taibtn.selected,
 #tutorial-end-button:hover,
 #tutorial-end-button.selected{
 	position: relative;
@@ -148,6 +149,19 @@ kbd{
 	cursor: text;
 	overflow: hidden;
 }
+@keyframes border-pulse{
+	0%{border-color: #ff0}
+	50%{border-color: rgba(255, 255, 0, 0)}
+	100%{border-color: #ff0}
+}
+@keyframes border-pulse2{
+	0%{border-color: #e29e06}
+	50%{border-color: rgba(226, 158, 6, 0)}
+	100%{border-color: #e29e06}
+}
+.settings-outer{
+	background-size: 50vh;
+}
 .setting-box{
 	display: flex;
 	height: 2em;
@@ -165,7 +179,7 @@ kbd{
 #tutorial-content:not(:hover) .setting-box.selected,
 .setting-box:hover{
 	background: #ffb547;
-	border-color: #21211a;
+	animation: 2s linear border-pulse infinite;
 }
 .setting-name{
 	position: relative;
@@ -183,12 +197,25 @@ kbd{
 	padding-left: 0.3em;
 }
 .setting-value{
+	display: flex;
 	background: #fff;
 	width: 50%;
 	border-radius: 0.2em;
 	padding: 0.5em;
 	box-sizing: border-box;
 }
+.setting-value.selected{
+	width: calc(50% + 0.2em);
+	margin: -0.1em;
+	border: 0.2em solid #e29e06;
+	padding: 0.4em;
+	animation: 2s linear border-pulse2 infinite;
+}
+.setting-value>div{
+	padding: 0 0.4em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 @keyframes bgscroll{
 	from{
 		background-position: 0 top;

public/src/js/about.js

@@ -32,22 +32,77 @@
 		var versionUrl = gameConfig._version.url
 		this.getLink(this.linkIssues).href = versionUrl + "issues"
 		
+		var kbdSettings = settings.getItem("keyboardSettings")
+		this.kbd = {
+			confirm: ["enter", " ", kbdSettings.don_l[0], kbdSettings.don_r[0]],
+			previous: ["arrowleft", "arrowup", kbdSettings.ka_l[0]],
+			next: ["arrowright", "arrowdown", kbdSettings.ka_r[0]],
+			back: ["backspace", "escape"]
+		}
 		pageEvents.add(this.linkIssues, ["click", "touchend"], this.linkButton.bind(this))
 		pageEvents.add(this.linkEmail, ["click", "touchend"], this.linkButton.bind(this))
-		pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
-		pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
+		pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
+		pageEvents.keyAdd(this, "all", "down", this.keyEvent.bind(this))
+		this.items = [this.linkIssues, this.linkEmail, this.endButton]
+		this.selected = 2
 		
 		this.gamepad = new Gamepad({
-			"confirm": ["start", "b", "ls", "rs"]
-		}, this.onEnd.bind(this))
+			"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("about", this.addDiag())
 	}
+	keyEvent(event){
+		if(event.keyCode === 27 || event.keyCode === 8 || event.keyCode === 9){
+			// Escape, Backspace, Tab
+			event.preventDefault()
+		}
+		if(!event.repeat){
+			for(var i in this.kbd){
+				if(this.kbd[i].indexOf(event.key.toLowerCase()) !== -1){
+					this.keyPressed(true, i)
+					break
+				}
+			}
+		}
+	}
+	keyPressed(pressed, name){
+		if(!pressed){
+			return
+		}
+		var selected = this.items[this.selected]
+		if(name === "confirm"){
+			if(selected === this.endButton){
+				this.onEnd()
+			}else{
+				this.getLink(selected).click()
+				pageEvents.send("about-link", selected)
+				assets.sounds["se_don"].play()
+			}
+		}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
+	}
 	onEnd(event){
 		var touched = false
-		if(event && event.type === "touchstart"){
+		if(event){
+			if(event.type === "touchstart"){
 				event.preventDefault()
 				touched = true
+			}else if(event.which !== 1){
+				return
+			}
 		}
 		this.clean()
 		assets.sounds["se_don"].play()
@@ -154,7 +209,8 @@
 	linkButton(event){
 		if(event.target === event.currentTarget){
 			this.getLink(event.currentTarget).click()
-			pageEvents.send("about-link", event)
+			pageEvents.send("about-link", event.currentTarget)
+			assets.sounds["se_don"].play()
 		}
 	}
 	clean(){
@@ -166,7 +222,7 @@
 		if(this.textarea){
 			pageEvents.remove(this.textarea, ["focus", "blur"])
 		}
-		pageEvents.keyRemove(this, 13)
+		pageEvents.keyRemove(this, "all")
 		delete this.endButton
 		delete this.diagTxt
 		delete this.version

public/src/js/keyboard.js

@@ -3,22 +3,23 @@ class Keyboard{
 		this.controller = controller
 		this.game = this.controller.game
 		
+		var kbdSettings = settings.getItem("keyboardSettings")
 		this.kbd = {
-			"don_l": 70, // F
-			"don_r": 74, // J
-			"ka_l": 68, // D
-			"ka_r": 75, // K
-			"pause": 81, // Q
-			"back": 8, // Backspace
-			"previous": 37, // Left
-			"next": 39, // Right
-			"confirm": 13 // Enter
+			"ka_l": kbdSettings.ka_l[0],
+			"don_l": kbdSettings.don_l[0],
+			"don_r": kbdSettings.don_r[0],
+			"ka_r": kbdSettings.ka_r[0],
+			"pause": "q",
+			"back": "backspace",
+			"previous": "arrowleft",
+			"next": "arrowright",
+			"confirm": "enter"
 		}
 		this.kbdAlias = {
-			"pause": [27], // Esc
-			"previous": [38], // Up
-			"next": [40], // Down
-			"confirm": [32] // Space
+			"pause": ["escape"],
+			"previous": ["arrowup"],
+			"next": ["arrowdown"],
+			"confirm": [" "]
 		}
 		this.keys = {}
 		this.waitKeyupScore = {}
@@ -30,11 +31,24 @@ class Keyboard{
 		}
 		this.keyboardEvents = 0
 		
+		var layout = settings.getItem("gamepadLayout")
 		var gameBtn = {}
+		if(layout === "b"){
+			gameBtn[this.kbd["don_l"]] = ["d", "r", "ls"]
+			gameBtn[this.kbd["don_r"]] = ["a", "x", "rs"]
+			gameBtn[this.kbd["ka_l"]] = ["u", "l", "lb", "lt"]
+			gameBtn[this.kbd["ka_r"]] = ["b", "y", "rb", "rt"]
+		}else if(layout === "c"){
+			gameBtn[this.kbd["don_l"]] = ["d", "l", "ls"]
+			gameBtn[this.kbd["don_r"]] = ["a", "b", "rs"]
+			gameBtn[this.kbd["ka_l"]] = ["u", "r", "lb", "lt"]
+			gameBtn[this.kbd["ka_r"]] = ["x", "y", "rb", "rt"]
+		}else{
 			gameBtn[this.kbd["don_l"]] = ["u", "d", "l", "r", "ls"]
 			gameBtn[this.kbd["don_r"]] = ["a", "b", "x", "y", "rs"]
 			gameBtn[this.kbd["ka_l"]] = ["lb", "lt"]
 			gameBtn[this.kbd["ka_r"]] = ["rb", "rt"]
+		}
 		this.gamepad = new Gamepad(gameBtn)
 		this.gamepadInterval = setInterval(this.gamepadKeys.bind(this), 1000 / 60 / 2)
 		
@@ -63,7 +77,7 @@ class Keyboard{
 				// Escape, Backspace, Tab
 				event.preventDefault()
 			}
-			var key = this.kbdSearch[event.keyCode]
+			var key = this.kbdSearch[event.key.toLowerCase()]
 			if(key && !event.repeat && this.buttonEnabled(key)){
 				var ms = this.game.getAccurateTime()
 				this.setKey(key, event.type === "keydown", ms)

public/src/js/loader.js

@@ -204,6 +204,7 @@ class Loader{
 			}
 			
 			settings = new Settings()
+			pageEvents.setKbd()
 			
 			Promise.all(this.promises).then(() => {
 				this.canvasTest.drawAllImages().then(result => {

public/src/js/pageevents.js

@@ -7,6 +7,7 @@ class PageEvents{
 		this.add(window, "keydown", this.keyEvent.bind(this))
 		this.add(window, "keyup", this.keyEvent.bind(this))
 		this.add(window, "mousemove", this.mouseEvent.bind(this))
+		this.kbd = []
 	}
 	add(target, type, callback){
 		if(Array.isArray(type)){
@@ -81,7 +82,7 @@ class PageEvents{
 		})
 	}
 	keyEvent(event){
-		if ([68, 70, 74, 75].indexOf(event.keyCode) > -1) {  // D, F, J, K
+		if(this.kbd.indexOf(event.key.toLowerCase()) !== -1){
 			this.lastKeyEvent = Date.now()
 		}
 		this.keyListeners.forEach(addedKeyCode => {
@@ -146,4 +147,13 @@ class PageEvents{
 	send(name, detail){
 		dispatchEvent(new CustomEvent(name, {detail: detail}))
 	}
+	setKbd(){
+		var kbdSettings = settings.getItem("keyboardSettings")
+		this.kbd = [
+			kbdSettings.ka_l[0],
+			kbdSettings.don_l[0],
+			kbdSettings.don_r[0],
+			kbdSettings.ka_r[0]
+		]
+	}
 }

public/src/js/scoresheet.js

@@ -31,8 +31,12 @@ class Scoresheet{
 		this.draw = new CanvasDraw()
 		this.canvasCache = new CanvasCache()
 		
+		var kbdSettings = settings.getItem("keyboardSettings")
+		this.kbd = {
+			confirm: ["enter", " ", "escape", "backspace", kbdSettings.don_l[0], kbdSettings.don_r[0]]
+		}
 		this.gamepad = new Gamepad({
-			"13": ["a", "b", "start", "ls", "rs"]
+			confirm: ["a", "b", "start", "ls", "rs"]
 		})
 		
 		this.difficulty = {
@@ -72,23 +76,22 @@ class Scoresheet{
 			touchEvents: controller.view.touchEvents
 		})
 	}
-	keyDown(event, code){
-		if(!code){
+	keyDown(event, key){
+		if(!key){
 			if(event.repeat){
 				return
 			}
-			code = event.keyCode
+			for(var i in this.kbd){
+				if(this.kbd[i].indexOf(event.key.toLowerCase()) !== -1){
+					key = i
+					break
 				}
-		var key = {
-			confirm: code == 13 || code == 32 || code == 70 || code == 74,
-			// Enter, Space, F, J
-			cancel: code == 27 || code == 8
-			// Esc, Backspace
 			}
-		if(key.cancel && event){
+		}
+		if(event && event.keyCode === 27 || event.keyCode === 8 || event.keyCode === 9){
 			event.preventDefault()
 		}
-		if(key.confirm || key.cancel){
+		if(key === "confirm"){
 			this.toNext()
 		}
 	}

public/src/js/session.js

@@ -37,6 +37,9 @@ class Session{
 		pageEvents.send("session")
 	}
 	mouseDown(event){
+		if(event.type === "mousedown" && event.which !== 1){
+			return
+		}
 		if(event.target === this.sessionInvite){
 			this.sessionInvite.focus()
 		}else{

public/src/js/settings.js

@@ -13,6 +13,22 @@ class Settings{
 				type: "toggle",
 				default: !ios,
 				touch: true
+			},
+			keyboardSettings: {
+				type: "keyboard",
+				default: {
+					ka_l: ["d"],
+					don_l: ["f"],
+					don_r: ["j"],
+					ka_r: ["k"]
+				},
+				touch: false
+			},
+			gamepadLayout: {
+				type: "select",
+				options: ["a", "b", "c"],
+				default: "a",
+				gamepad: true
 			}
 		}
 		
@@ -24,6 +40,17 @@ class Settings{
 				if(i in storage){
 					if(current.type === "select" && current.options.indexOf(storage[i]) === -1){
 						this.storage[i] = null
+					}else if(current.type === "keyboard"){
+						var obj = {}
+						for(var j in current.default){
+							if(storage[i][j] && storage[i][j][0]){
+								obj[j] = storage[i][j]
+							}else{
+								obj = null
+								break
+							}
+						}
+						this.storage[i] = obj
 					}else{
 						this.storage[i] = storage[i]
 					}
@@ -52,13 +79,24 @@ class Settings{
 class SettingsView{
 	constructor(touchEnabled){
 		this.touchEnabled = touchEnabled
-		loader.changePage("settings", true)
+		loader.changePage("settings", false)
 		assets.sounds["bgm_settings"].playLoop(0.1, false, 0, 1.392, 26.992)
 		
 		this.endButton = document.getElementById("tutorial-end-button")
 		if(touchEnabled){
 			document.getElementById("tutorial-outer").classList.add("touch-enabled")
 		}
+		var gamepadEnabled = false
+		if("getGamepads" in navigator){
+			var gamepads = navigator.getGamepads()
+			for(var i = 0; i < gamepads.length; i++){
+				if(gamepads[i]){
+					gamepadEnabled = true
+					break
+				}
+			}
+		}
+		this.mode = "settings"
 		
 		var tutorialTitle = document.getElementById("tutorial-title")
 		tutorialTitle.innerText = strings.gameSettings
@@ -71,7 +109,12 @@ class SettingsView{
 		this.items = []
 		this.selected = 0
 		for(let i in settings.items){
-			if(!touchEnabled && settings.items[i].touch){
+			var current = settings.items[i]
+			if(
+				!touchEnabled && current.touch === true ||
+				touchEnabled && current.touch === false ||
+				!gamepadEnabled && current.gamepad === true
+			){
 				continue
 			}
 			var settingBox = document.createElement("div")
@@ -84,15 +127,17 @@ class SettingsView{
 			settingBox.appendChild(nameDiv)
 			var valueDiv = document.createElement("div")
 			valueDiv.classList.add("setting-value")
-			valueDiv.innerText = this.getValue(i)
+			this.getValue(i, valueDiv)
 			settingBox.appendChild(valueDiv)
 			content.appendChild(settingBox)
 			if(this.items.length === this.selected){
 				settingBox.classList.add("selected")
 			}
 			pageEvents.add(settingBox, ["mousedown", "touchstart"], event => {
+				if(event.which === 1){
 					event.preventDefault()
 					this.setValue(i)
+				}
 			})
 			this.items.push({
 				id: i,
@@ -105,13 +150,8 @@ class SettingsView{
 			settingBox: this.endButton
 		})
 		
-		this.kbd = {
-			"confirm": [13, 32, 70, 74], // Enter, Space, F, J
-			"previous": [37, 38, 68], // Left, Up, D
-			"next": [39, 40, 75], // Right, Down, K
-			"back": [8, 27] // Backspace, Esc
-		}
-		pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
+		this.setKbd()
+		pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
 		pageEvents.keyAdd(this, "all", "down", this.keyEvent.bind(this))
 		this.gamepad = new Gamepad({
 			"confirm": ["b", "ls", "rs"],
@@ -122,27 +162,65 @@ class SettingsView{
 		
 		pageEvents.send("settings")
 	}
-	getValue(name){
+	setKbd(){
+		var kbdSettings = settings.getItem("keyboardSettings")
+		this.kbd = {
+			"confirm": ["enter", " ", kbdSettings.don_l[0], kbdSettings.don_r[0]],
+			"previous": ["arrowleft", "arrowup", kbdSettings.ka_l[0]],
+			"next": ["arrowright", "arrowdown", kbdSettings.ka_r[0]],
+			"back": ["backspace", "escape"]
+		}
+	}
+	getValue(name, valueDiv){
 		var current = settings.items[name]
 		var value = settings.getItem(name)
 		if(current.type === "select"){
 			value = strings.settings[name][value]
 		}else if(current.type === "toggle"){
 			value = value ? strings.settings.on : strings.settings.off
+		}else if(current.type === "keyboard"){
+			valueDiv.innerHTML = ""
+			for(var i in value){
+				var key = document.createElement("div")
+				key.style.color = i === "ka_l" || i === "ka_r" ? "#009aa5" : "#ef2c10"
+				key.innerText = value[i][0].toUpperCase()
+				valueDiv.appendChild(key)
 			}
-		return value
+			return
+		}
+		valueDiv.innerText = value
 	}
 	setValue(name){
 		var current = settings.items[name]
 		var value = settings.getItem(name)
+		var selectedIndex = this.items.findIndex(item => item.id === name)
+		var selected = this.items[selectedIndex]
+		if(this.mode !== "settings"){
+			if(this.selected === selectedIndex){
+				this.keyboardBack(selected)
+			}
+			return
+		}
+		if(this.selected !== selectedIndex){
+			this.items[this.selected].settingBox.classList.remove("selected")
+			this.selected = selectedIndex
+			selected.settingBox.classList.add("selected")
+		}
 		if(current.type === "select"){
 			value = current.options[this.mod(current.options.length, current.options.indexOf(value) + 1)]
 		}else if(current.type === "toggle"){
 			value = !value
+		}else if(current.type === "keyboard"){
+			this.mode = "keyboard"
+			selected.settingBox.style.animation = "none"
+			selected.valueDiv.classList.add("selected")
+			this.keyboardKeys = {}
+			this.keyboardSet()
+			assets.sounds["se_don"].play()
+			return
 		}
 		settings.setItem(name, value)
-		this.selected = this.items.findIndex(item => item.id === name)
-		this.items[this.selected].valueDiv.innerText = this.getValue(name)
+		this.getValue(name, this.items[this.selected].valueDiv)
 		assets.sounds["se_ka"].play()
 	}
 	keyEvent(event){
@@ -152,18 +230,31 @@ class SettingsView{
 		}
 		if(!event.repeat){
 			for(var i in this.kbd){
-				if(this.kbd[i].indexOf(event.keyCode) !== -1){
+				if(this.kbd[i].indexOf(event.key.toLowerCase()) !== -1){
+					if(this.mode !== "keyboard" || i === "back"){
 						this.keyPressed(true, i)
-					break
+						return
 					}
 				}
 			}
+			if(this.mode === "keyboard"){
+				var currentKey = event.key.toLowerCase()
+				for(var i in this.keyboardKeys){
+					if(this.keyboardKeys[i][0] === currentKey || !currentKey){
+						return
+					}
+				}
+				this.keyboardKeys[this.keyboardCurrent] = [currentKey]
+				this.keyboardSet()
+			}
+		}
 	}
 	keyPressed(pressed, name){
 		if(!pressed){
 			return
 		}
 		var selected = this.items[this.selected]
+		if(this.mode === "settings"){
 			if(name === "confirm"){
 				if(selected.id === "back"){
 					this.onEnd()
@@ -178,12 +269,49 @@ class SettingsView{
 			}else if(name === "back"){
 				this.onEnd()
 			}
+		}else if(this.mode === "keyboard"){
+			if(name === "back"){
+				this.keyboardBack(selected)
+			}
+		}
+	}
+	keyboardSet(){
+		var selected = this.items[this.selected]
+		var current = settings.items[selected.id]
+		selected.valueDiv.innerHTML = ""
+		for(var i in current.default){
+			var key = document.createElement("div")
+			key.style.color = i === "ka_l" || i === "ka_r" ? "#009aa5" : "#ef2c10"
+			if(this.keyboardKeys[i]){
+				key.innerText = this.keyboardKeys[i][0].toUpperCase()
+				selected.valueDiv.appendChild(key)
+			}else{
+				key.innerText = "[" + strings.settings[selected.id][i] + "]"
+				selected.valueDiv.appendChild(key)
+				this.keyboardCurrent = i
+				return
+			}
+		}
+		settings.setItem(selected.id, this.keyboardKeys)
+		this.keyboardBack(selected)
+		this.setKbd()
+		pageEvents.setKbd()
+	}
+	keyboardBack(selected){
+		this.mode = "settings"
+		selected.settingBox.style.animation = ""
+		selected.valueDiv.classList.remove("selected")
+		this.getValue(selected.id, selected.valueDiv)
 	}
 	onEnd(event){
 		var touched = false
-		if(event && event.type === "touchstart"){
+		if(event){
+			if(event.type === "touchstart"){
 				event.preventDefault()
 				touched = true
+			}else if(event.which !== 1){
+				return
+			}
 		}
 		this.clean()
 		assets.sounds["se_don"].play()

public/src/js/songselect.js

@@ -289,16 +289,26 @@ class SongSelect{
 		this.startPreview(true)
 		
 		this.pressedKeys = {}
+		var kbdSettings = settings.getItem("keyboardSettings")
+		this.kbd = {
+			confirm: ["enter", " ", kbdSettings.don_l[0], kbdSettings.don_r[0]],
+			back: ["escape"],
+			left: ["arrowleft", kbdSettings.ka_l[0]],
+			right: ["arrowright", kbdSettings.ka_r[0]],
+			up: ["arrowup"],
+			down: ["arrowdown"],
+			session: ["backspace"]
+		}
 		this.gamepad = new Gamepad({
-			"13": ["b", "start", "ls", "rs"],
-			"27": ["a"],
-			"37": ["l", "lb", "lt", "lsl"],
-			"39": ["r", "rb", "rt", "lsr"],
-			"38": ["u", "lsu"],
-			"40": ["d", "lsd"],
-			"8": ["back"],
-			"ctrl": ["y"],
-			"shift": ["x"]
+			confirm: ["b", "start", "ls", "rs"],
+			back: ["a"],
+			left: ["l", "lb", "lt", "lsl"],
+			right: ["r", "rb", "rt", "lsr"],
+			up: ["u", "lsu"],
+			down: ["d", "lsd"],
+			session: ["back"],
+			ctrl: ["y"],
+			shift: ["x"]
 		})
 		
 		if(!assets.customSongs){
@@ -331,57 +341,46 @@ class SongSelect{
 		}
 	}
 	
-	keyDown(event, code){
-		if(code){
+	keyDown(event, key){
+		if(key){
 			var modifiers = {
 				shift: this.pressedKeys["shift"],
 				ctrl: this.pressedKeys["ctrl"]
 			}
 		}else{
-			code = event.keyCode
 			var modifiers = {
 				shift: event.shiftKey,
 				ctrl: event.ctrlKey
 			}
+			for(var i in this.kbd){
+				if(this.kbd[i].indexOf(event.key.toLowerCase()) !== -1){
+					key = i
+					break
 				}
-		if(code === "ctrl" || code === "shift" || !this.redrawRunning){
+			}
+		}
+		if(key === "ctrl" || key === "shift" || !this.redrawRunning){
 			return
 		}
 		
-		var key = {
-			confirm: code == 13 || code == 32 || code == 70 || code == 74,
-			// Enter, Space, F, J
-			cancel: code == 27,
-			// Esc
-			session: code == 8,
-			// Backspace
-			left: code == 37 || code == 68,
-			// Left, D
-			right: code == 39 || code == 75,
-			// Right, K
-			up: code == 38,
-			// Up
-			down: code == 40
-			// Down
-		}
-		if(event && (code == 27 || code == 8 || code == 9)){
+		if(event && (event.keyCode === 27 || event.keyCode === 8 || event.keyCode === 9)){
 			// Escape, Backspace, Tab
 			event.preventDefault()
 		}
 		if(this.state.screen === "song"){
-			if(key.confirm){
+			if(key === "confirm"){
 				this.toSelectDifficulty()
-			}else if(key.cancel){
+			}else if(key === "back"){
 				this.toTitleScreen()
-			}else if(key.session){
+			}else if(key === "session"){
 				this.toSession()
-			}else if(key.left){
+			}else if(key === "left"){
 				this.moveToSong(-1)
-			}else if(key.right){
+			}else if(key === "right"){
 				this.moveToSong(1)
 			}
 		}else if(this.state.screen === "difficulty"){
-			if(key.confirm){
+			if(key === "confirm"){
 				if(this.selectedDiff === 0){
 					this.toSongSelect()
 				}else if(this.selectedDiff === 1){
@@ -389,14 +388,14 @@ class SongSelect{
 				}else{
 					this.toLoadSong(this.selectedDiff - this.diffOptions.length, modifiers.shift, modifiers.ctrl)
 				}
-			}else if(key.cancel || key.session){
+			}else if(key === "back" || key === "session"){
 				this.toSongSelect()
-			}else if(key.left){
+			}else if(key === "left"){
 				this.moveToDiff(-1)
-			}else if(key.right){
+			}else if(key === "right"){
 				this.moveToDiff(1)
-			}else if(this.selectedDiff === 1 && (key.up || key.down)){
-				this.toOptions(key.up ? -1 : 1)
+			}else if(this.selectedDiff === 1 && (key === "up" || key === "down")){
+				this.toOptions(key === "up" ? -1 : 1)
 			}
 		}
 	}

public/src/js/strings.js

@@ -110,6 +110,19 @@
 		touchAnimation: {
 			name: "タッチアニメーション"
 		},
+		keyboardSettings: {
+			name: "キーボード設定",
+			ka_l: "ふち(左)",
+			don_l: "面(左)",
+			don_r: "面(右)",
+			ka_r: "ふち(右)"
+		},
+		gamepadLayout: {
+			name: "そうさタイプ設定",
+			a: "タイプA",
+			b: "タイプB",
+			c: "タイプC"
+		},
 		on: "オン",
 		off: "オフ",
 		ok: "OK"
@@ -233,6 +246,19 @@ function StringsEn(){
 		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"
+		},
 		on: "On",
 		off: "Off",
 		ok: "OK"
@@ -356,6 +382,19 @@ function StringsCn(){
 		touchAnimation: {
 			name: "触摸动画"
 		},
+		keyboardSettings: {
+			name: "Keyboard Settings",
+			ka_l: "Left Rim",
+			don_l: "Left Surface",
+			don_r: "Right Surface",
+			ka_r: "Right Rim"
+		},
+		gamepadLayout: {
+			name: "操作类型设定",
+			a: "类型A",
+			b: "类型B",
+			c: "类型C"
+		},
 		on: "开",
 		off: "关",
 		ok: "确定"
@@ -479,6 +518,19 @@ function StringsTw(){
 		touchAnimation: {
 			name: "觸摸動畫"
 		},
+		keyboardSettings: {
+			name: "Keyboard Settings",
+			ka_l: "Left Rim",
+			don_l: "Left Surface",
+			don_r: "Right Surface",
+			ka_r: "Right Rim"
+		},
+		gamepadLayout: {
+			name: "操作類型設定",
+			a: "類型A",
+			b: "類型B",
+			c: "類型C"
+		},
 		on: "開",
 		off: "關",
 		ok: "確定"
@@ -602,6 +654,19 @@ function StringsKo(){
 		touchAnimation: {
 			name: "터치 애니메이션"
 		},
+		keyboardSettings: {
+			name: "Keyboard Settings",
+			ka_l: "Left Rim",
+			don_l: "Left Surface",
+			don_r: "Right Surface",
+			ka_r: "Right Rim"
+		},
+		gamepadLayout: {
+			name: "조작 타입 설정",
+			a: "타입 A",
+			b: "타입 B",
+			c: "타입 C"
+		},
 		on: "온",
 		off: "오프",
 		ok: "확인"

public/src/js/titlescreen.js

@@ -31,8 +31,12 @@ class Titlescreen{
 			pageEvents.add(this.langDropdown, "change", this.langChange.bind(this))
 			
 			assets.sounds["v_title"].play()
+			var kbdSettings = settings.getItem("keyboardSettings")
+			this.kbd = {
+				confirm: ["enter", " ", kbdSettings.don_l[0], kbdSettings.don_r[0]]
+			}
 			this.gamepad = new Gamepad({
-				"13": ["a", "b", "x", "y", "start", "ls", "rs"]
+				confirm: ["a", "b", "x", "y", "start", "ls", "rs"]
 			}, pressed => {
 				if(pressed){
 					this.onPressed()
@@ -49,15 +53,19 @@ class Titlescreen{
 		}
 	}
 	
-	keyDown(event, code){
-		if(event && event.target === this.langDropdown){
+	keyDown(event, key){
+		if(!key){
+			if(event.repeat || event.target === this.langDropdown){
 				return
 			}
-		if(!code){
-			code = event.keyCode
+			for(var i in this.kbd){
+				if(this.kbd[i].indexOf(event.key.toLowerCase()) !== -1){
+					key = i
+					break
 				}
-		if(code == 13 || code == 32 || code == 70 || code == 74){
-			// Enter, Space, F, J
+			}
+		}
+		if(key === "confirm"){
 			this.onPressed()
 		}
 	}

public/src/js/tutorial.js

@@ -10,7 +10,14 @@ class Tutorial{
 		tutorialTitle.innerText = strings.howToPlay
 		tutorialTitle.setAttribute("alt", strings.howToPlay)
 		var tutorialContent = document.getElementById("tutorial-content")
-		var keys = ["F", "J", "D", "K", "Q", "SHIFT", "CTRL"]
+		var kbdSettings = settings.getItem("keyboardSettings")
+		var keys = [
+			kbdSettings.don_l[0].toUpperCase(),
+			kbdSettings.don_r[0].toUpperCase(),
+			kbdSettings.ka_l[0].toUpperCase(),
+			kbdSettings.ka_r[0].toUpperCase(),
+			"Q", "SHIFT", "CTRL"
+		]
 		var keyIndex = 0
 		strings.tutorial.basics.forEach(string => {
 			var par = document.createElement("p")
@@ -42,8 +49,13 @@ class Tutorial{
 		this.endButton.innerText = strings.tutorial.ok
 		this.endButton.setAttribute("alt", strings.tutorial.ok)
 		
-		pageEvents.once(this.endButton, ["mousedown", "touchstart"]).then(this.onEnd.bind(this))
-		pageEvents.keyOnce(this, 13, "down").then(this.onEnd.bind(this))
+		pageEvents.add(this.endButton, ["mousedown", "touchstart"], this.onEnd.bind(this))
+		pageEvents.keyAdd(this, "all", "down", event => {
+			if(event.keyCode === 13 || event.keyCode === 27 || event.keyCode === 8){
+				// Enter, Esc, Backspace
+				this.onEnd.bind(this)
+			}
+		})
 		
 		this.gamepad = new Gamepad({
 			"confirm": ["start", "b", "ls", "rs"]
@@ -60,9 +72,13 @@ class Tutorial{
 	}
 	onEnd(event){
 		var touched = false
-		if(event && event.type === "touchstart"){
+		if(event){
+			if(event.type === "touchstart"){
 				event.preventDefault()
 				touched = true
+			}else if(event.which !== 1){
+				return
+			}
 		}
 		this.clean()
 		assets.sounds["se_don"].play()
@@ -75,7 +91,7 @@ class Tutorial{
 		this.gamepad.clean()
 		assets.sounds["bgm_setsume"].stop()
 		pageEvents.remove(this.endButton, ["mousedown", "touchstart"])
-		pageEvents.keyRemove(this, 13)
+		pageEvents.keyRemove(this, "all")
 		delete this.endButton
 	}
 }

public/src/views/about.html

@@ -11,6 +11,6 @@
 				<a href="mailto:taiko@bui.pm">taiko@bui.pm</a>
 			</div>
 		</div>
-		<div id="tutorial-end-button" class="taibtn stroke-sub"></div>
+		<div id="tutorial-end-button" class="taibtn stroke-sub selected"></div>
 	</div>
 </div>

public/src/views/settings.html

@@ -1,4 +1,4 @@
-<div id="tutorial-outer">
+<div id="tutorial-outer" class="settings-outer">
 	<div id="tutorial">
 		<div id="tutorial-title" class="stroke-sub"></div>
 		<div id="tutorial-content"></div>

public/src/views/tutorial.html

@@ -2,6 +2,6 @@
 	<div id="tutorial">
 		<div id="tutorial-title" class="stroke-sub"></div>
 		<div id="tutorial-content"></div>
-		<div id="tutorial-end-button" class="taibtn stroke-sub"></div>
+		<div id="tutorial-end-button" class="taibtn stroke-sub selected"></div>
 	</div>
 </div>