From 0632bf7e7745618cf6946b83b283f683f93954bd Mon Sep 17 00:00:00 2001 From: adrien Date: Tue, 4 Jul 2023 22:16:35 +0200 Subject: [PATCH] key mapper as proxies --- app.js | 210 +++++++++++++++++++++++++++++++-------------------------- 1 file changed, 113 insertions(+), 97 deletions(-) diff --git a/app.js b/app.js index 01051c9..9fe9c76 100644 --- a/app.js +++ b/app.js @@ -477,82 +477,6 @@ Ghost.prototype.minoesPosition = [ ] -const KEY_NAMES = new Proxy({ - ["ArrowLeft"] : "←", - ["←"] : "ArrowLeft", - ["ArrowRight"] : "→", - ["→"] : "ArrowRight", - ["ArrowUp"] : "↑", - ["↑"] : "ArrowUp", - ["ArrowDown"] : "↓", - ["↓"] : "ArrowDown", - [" "] : "Espace", - ["Espace"] : " ", - ["Escape"] : "Échap.", - ["Échap."] : "Escape", - ["Backspace"] : "Ret. arrière", - ["Ret. arrière"]: "Backspace", - ["Enter"] : "Entrée", - ["Entrée"] : "Enter", -}, { - get(obj, keyName) { - return keyName in obj? obj[keyName] : keyName - } -}) - - -class KeyMapper { - static actions = {} - - constructor(action, key) { - this.action = action - this.key = key - } - - set key(key) { - if (this.constructor.actions[this.prevKey] == this.action) - delete this.constructor.actions[this.prevKey] - this.prevKey = key - this.constructor.actions[KEY_NAMES[key]] = this.action - } - get key() { - return this.prevKey - } -} - -function changeKey() { - let controller = this - let input = controller.domElement.getElementsByTagName("input")[0] - input.select() - input.onkeydown = function (event) { - controller.setValue(KEY_NAMES[event.key]) - input.blur() - } -} - - -class Settings { - constructor() { - this.startLevel = 1 - - this.moveLeftKeymap = new KeyMapper(playerActions.moveLeft, "←") - this.moveRightKeymap = new KeyMapper(playerActions.moveRight, "→") - this.rotateCCWKeymap = new KeyMapper(playerActions.rotateCCW, "w") - this.rotateCWKeymap = new KeyMapper(playerActions.rotateCW, "↑") - this.softDropKeymap = new KeyMapper(playerActions.softDrop, "↓") - this.hardDropKeymap = new KeyMapper(playerActions.hardDrop, "Espace") - this.holdKeymap = new KeyMapper(playerActions.hold, "c") - this.pauseKeymap = new KeyMapper(playerActions.pause, "Échap.") - - this.arrDelay = 50 - this.dasDelay = 300 - - this.musicVolume = 50 - this.sfxVolume = 50 - } -} - - class Stats { constructor() { this.clock = new THREE.Clock(false) @@ -714,6 +638,88 @@ class Stats { } + +let jsKeyRenamer = new Proxy({ + ["←"] : "ArrowLeft", + ["→"] : "ArrowRight", + ["↑"] : "ArrowUp", + ["↓"] : "ArrowDown", + ["Espace"] : " ", + ["Échap."] : "Escape", + ["Ret. arrière"]: "Backspace", + ["Entrée"] : "Enter", +}, { + get(obj, keyName) { + return keyName in obj? obj[keyName] : keyName + } +}) +let friendyKeyRenamer = new Proxy({ + ["ArrowLeft"] : "←", + ["ArrowRight"] : "→", + ["ArrowUp"] : "↑", + ["ArrowDown"] : "↓", + [" "] : "Espace", + ["Escape"] : "Échap.", + ["Backspace"] : "Ret. arrière", + ["Enter"] : "Entrée", +}, { + get(obj, keyName) { + return keyName in obj? obj[keyName] : keyName + } +}) + +class Settings { + constructor() { + this.startLevel = 1 + + let keyMaps = { + key: {}, + action: {} + } + + this.key = new Proxy(keyMaps, { + set(km, action, key) { + km.action[key] = action + return km.key[action] = jsKeyRenamer[key] + }, + has(km, action) { + return action in km.key + }, + get(km, action) { + return friendyKeyRenamer[km.key[action]] + } + }) + this.action = new Proxy(keyMaps, { + set(km, key, action) { + km.key[action] = key + return km.action[key] = action + }, + has(km, key) { + return key in km.action + }, + get(km, key) { + return km.action[key] + } + }) + + this.key.moveLeft = "ArrowLeft" + this.key.moveRight = "ArrowRight" + this.key.rotateCCW = "w" + this.key.rotateCW = "ArrowUp" + this.key.softDrop = "ArrowDown" + this.key.hardDrop = " " + this.key.hold = "c" + this.key.pause = "Escape" + + this.arrDelay = 50 + this.dasDelay = 300 + + this.musicVolume = 50 + this.sfxVolume = 50 + } +} + + class TetraGUI extends GUI { constructor(game, settings, stats, debug=false) { super({title: "teTra"}) @@ -737,22 +743,22 @@ class TetraGUI extends GUI { this.settings.add(settings, "startLevel").name("Niveau initial").min(1).max(15).step(1) this.settings.key = this.settings.addFolder("Commandes").open() - let moveLeftKeyController = this.settings.key.add(settings.moveLeftKeymap, "key").name('Gauche') - moveLeftKeyController.domElement.onclick = changeKey.bind(moveLeftKeyController) - let moveRightKeyController = this.settings.key.add(settings.moveRightKeymap, "key").name('Droite') - moveRightKeyController.domElement.onclick = changeKey.bind(moveRightKeyController) - let rotateCWKeyController = this.settings.key.add(settings.rotateCWKeymap, "key").name('Rotation horaire') - rotateCWKeyController.domElement.onclick = changeKey.bind(rotateCWKeyController) - let rotateCCWKeyController = this.settings.key.add(settings.rotateCCWKeymap, "key").name('anti-horaire') - rotateCCWKeyController.domElement.onclick = changeKey.bind(rotateCCWKeyController) - let softDropKeyController = this.settings.key.add(settings.softDropKeymap, "key").name('Chute lente') - softDropKeyController.domElement.onclick = changeKey.bind(softDropKeyController) - let hardDropKeyController = this.settings.key.add(settings.hardDropKeymap, "key").name('Chute rapide') - hardDropKeyController.domElement.onclick = changeKey.bind(hardDropKeyController) - let holdKeyController = this.settings.key.add(settings.holdKeymap, "key").name('Garder') - holdKeyController.domElement.onclick = changeKey.bind(holdKeyController) - let pauseKeyController = this.settings.key.add(settings.pauseKeymap, "key").name('Pause') - pauseKeyController.domElement.onclick = changeKey.bind(pauseKeyController) + let moveLeftKeyController = this.settings.key.add(settings.key, "moveLeft").name('Gauche') + moveLeftKeyController.domElement.onclick = this.changeKey.bind(moveLeftKeyController) + let moveRightKeyController = this.settings.key.add(settings.key, "moveRight").name('Droite') + moveRightKeyController.domElement.onclick = this.changeKey.bind(moveRightKeyController) + let rotateCWKeyController = this.settings.key.add(settings.key, "rotateCW").name('Rotation horaire') + rotateCWKeyController.domElement.onclick = this.changeKey.bind(rotateCWKeyController) + let rotateCCWKeyController = this.settings.key.add(settings.key, "rotateCCW").name('anti-horaire') + rotateCCWKeyController.domElement.onclick = this.changeKey.bind(rotateCCWKeyController) + let softDropKeyController = this.settings.key.add(settings.key, "softDrop").name('Chute lente') + softDropKeyController.domElement.onclick = this.changeKey.bind(softDropKeyController) + let hardDropKeyController = this.settings.key.add(settings.key, "hardDrop").name('Chute rapide') + hardDropKeyController.domElement.onclick = this.changeKey.bind(hardDropKeyController) + let holdKeyController = this.settings.key.add(settings.key, "hold").name('Garder') + holdKeyController.domElement.onclick = this.changeKey.bind(holdKeyController) + let pauseKeyController = this.settings.key.add(settings.key, "pause").name('Pause') + pauseKeyController.domElement.onclick = this.changeKey.bind(pauseKeyController) this.settings.delay = this.settings.addFolder("Répétition automatique").open() this.settings.delay.add(settings,"arrDelay").name("ARR (ms)").min(2).max(200).step(1); @@ -802,6 +808,16 @@ class TetraGUI extends GUI { save() { localStorage["teTraSettings"] = JSON.stringify(this.settings.save()) } + + changeKey() { + let controller = this + let input = controller.domElement.getElementsByTagName("input")[0] + input.select() + input.onkeydown = function (event) { + controller.setValue(event.key) + input.blur() + } + } } @@ -1200,7 +1216,7 @@ audioLoader.load('audio/hard-drop.wav', function( buffer ) { let scheduler = new Scheduler() let stats = new Stats() -let settings = new Settings() +let settings = new Settings(playerActions) var gui = new TetraGUI(game, settings, stats, debug) @@ -1217,11 +1233,11 @@ let actionsQueue = [] function onkeydown(event) { let key = event.key - if (key in KeyMapper.actions) { + if (key in settings.action) { event.preventDefault() if (!pressedKeys.has(key)) { pressedKeys.add(key) - let action = KeyMapper.actions[key] + let action = playerActions[settings.action[key]] action() if (REPEATABLE_ACTIONS.includes(action)) { actionsQueue.unshift(action) @@ -1251,10 +1267,10 @@ function autorepeat() { function onkeyup(event) { let key = event.key - if (key in KeyMapper.actions) { + if (key in settings.action) { event.preventDefault() pressedKeys.delete(key) - let action = KeyMapper.actions[key] + let action = playerActions[settings.action[key]] if (actionsQueue.includes(action)) { actionsQueue.splice(actionsQueue.indexOf(action), 1) if (!actionsQueue.length) {