From 879186c313dd313b5f8f7577c5cd8c4355f00b24 Mon Sep 17 00:00:00 2001 From: LoveEevee Date: Fri, 5 Apr 2019 22:53:51 +0300 Subject: [PATCH] Add keyboard and gamepad settings --- public/assets/img/img.css | 3 + public/src/css/main.css | 29 ++++- public/src/js/about.js | 74 +++++++++++-- public/src/js/keyboard.js | 50 ++++++--- public/src/js/loader.js | 1 + public/src/js/pageevents.js | 12 +- public/src/js/scoresheet.js | 27 +++-- public/src/js/session.js | 3 + public/src/js/settings.js | 194 +++++++++++++++++++++++++++------ public/src/js/songselect.js | 83 +++++++------- public/src/js/strings.js | 65 +++++++++++ public/src/js/titlescreen.js | 26 +++-- public/src/js/tutorial.js | 30 +++-- public/src/views/about.html | 2 +- public/src/views/settings.html | 2 +- public/src/views/tutorial.html | 2 +- 16 files changed, 468 insertions(+), 135 deletions(-) diff --git a/public/assets/img/img.css b/public/assets/img/img.css index 9d4073a..7d339c6 100644 --- a/public/assets/img/img.css +++ b/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"); +} diff --git a/public/src/css/main.css b/public/src/css/main.css index c31abb0..9b44bb3 100644 --- a/public/src/css/main.css +++ b/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; diff --git a/public/src/js/about.js b/public/src/js/about.js index d01c66d..95575b7 100644 --- a/public/src/js/about.js +++ b/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"){ - event.preventDefault() - touched = true + 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 diff --git a/public/src/js/keyboard.js b/public/src/js/keyboard.js index 0a5b32a..2960a97 100644 --- a/public/src/js/keyboard.js +++ b/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 = {} - 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"] + 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) diff --git a/public/src/js/loader.js b/public/src/js/loader.js index d7f45cd..a3ba450 100644 --- a/public/src/js/loader.js +++ b/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 => { diff --git a/public/src/js/pageevents.js b/public/src/js/pageevents.js index 7ba8d68..a1bba1d 100644 --- a/public/src/js/pageevents.js +++ b/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] + ] + } } diff --git a/public/src/js/scoresheet.js b/public/src/js/scoresheet.js index 9ea0240..4d0360c 100644 --- a/public/src/js/scoresheet.js +++ b/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() } } diff --git a/public/src/js/session.js b/public/src/js/session.js index 8dfe8e6..43efa9e 100644 --- a/public/src/js/session.js +++ b/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{ diff --git a/public/src/js/settings.js b/public/src/js/settings.js index 1f83c01..97b8a41 100644 --- a/public/src/js/settings.js +++ b/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 => { - event.preventDefault() - this.setValue(i) + 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 } - return value + 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,11 +230,23 @@ class SettingsView{ } if(!event.repeat){ for(var i in this.kbd){ - if(this.kbd[i].indexOf(event.keyCode) !== -1){ - this.keyPressed(true, i) - break + if(this.kbd[i].indexOf(event.key.toLowerCase()) !== -1){ + if(this.mode !== "keyboard" || i === "back"){ + this.keyPressed(true, i) + 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){ @@ -164,26 +254,64 @@ class SettingsView{ return } var selected = this.items[this.selected] - if(name === "confirm"){ - if(selected.id === "back"){ + if(this.mode === "settings"){ + if(name === "confirm"){ + if(selected.id === "back"){ + this.onEnd() + }else{ + this.setValue(selected.id) + } + }else if(name === "previous" || name === "next"){ + selected.settingBox.classList.remove("selected") + this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1)) + this.items[this.selected].settingBox.classList.add("selected") + assets.sounds["se_ka"].play() + }else if(name === "back"){ this.onEnd() - }else{ - this.setValue(selected.id) } - }else if(name === "previous" || name === "next"){ - selected.settingBox.classList.remove("selected") - this.selected = this.mod(this.items.length, this.selected + (name === "next" ? 1 : -1)) - this.items[this.selected].settingBox.classList.add("selected") - assets.sounds["se_ka"].play() - }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"){ - event.preventDefault() - touched = true + if(event){ + if(event.type === "touchstart"){ + event.preventDefault() + touched = true + }else if(event.which !== 1){ + return + } } this.clean() assets.sounds["se_don"].play() diff --git a/public/src/js/songselect.js b/public/src/js/songselect.js index 530447e..ea7ba1b 100644 --- a/public/src/js/songselect.js +++ b/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) } } } diff --git a/public/src/js/strings.js b/public/src/js/strings.js index 8176d1e..39a3bde 100644 --- a/public/src/js/strings.js +++ b/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: "확인" diff --git a/public/src/js/titlescreen.js b/public/src/js/titlescreen.js index 9f95cdc..709de14 100644 --- a/public/src/js/titlescreen.js +++ b/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){ - return + keyDown(event, key){ + if(!key){ + if(event.repeat || event.target === this.langDropdown){ + return + } + for(var i in this.kbd){ + if(this.kbd[i].indexOf(event.key.toLowerCase()) !== -1){ + key = i + break + } + } } - if(!code){ - code = event.keyCode - } - if(code == 13 || code == 32 || code == 70 || code == 74){ - // Enter, Space, F, J + if(key === "confirm"){ this.onPressed() } } diff --git a/public/src/js/tutorial.js b/public/src/js/tutorial.js index d2999cd..7a1f484 100644 --- a/public/src/js/tutorial.js +++ b/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"){ - event.preventDefault() - touched = true + 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 } } diff --git a/public/src/views/about.html b/public/src/views/about.html index 7ec8436..f6165c7 100644 --- a/public/src/views/about.html +++ b/public/src/views/about.html @@ -11,6 +11,6 @@ taiko@bui.pm -
+
diff --git a/public/src/views/settings.html b/public/src/views/settings.html index 983c90e..bfaa4ee 100644 --- a/public/src/views/settings.html +++ b/public/src/views/settings.html @@ -1,4 +1,4 @@ -
+
diff --git a/public/src/views/tutorial.html b/public/src/views/tutorial.html index 239daf2..ffd124a 100644 --- a/public/src/views/tutorial.html +++ b/public/src/views/tutorial.html @@ -2,6 +2,6 @@
-
+