From b5c982519a4df407d655d6a572d2776d17edc423 Mon Sep 17 00:00:00 2001 From: Christian Heller <c.heller@plomlompom.de> Date: Thu, 29 Oct 2020 04:11:00 +0100 Subject: [PATCH] Add movement key selector to pick between arrows and WASD. --- new2/rogue_chat_nocanvas_monochrome.html | 46 ++++++++++++++++++------ 1 file changed, 35 insertions(+), 11 deletions(-) diff --git a/new2/rogue_chat_nocanvas_monochrome.html b/new2/rogue_chat_nocanvas_monochrome.html index 3694675..09d400d 100644 --- a/new2/rogue_chat_nocanvas_monochrome.html +++ b/new2/rogue_chat_nocanvas_monochrome.html @@ -4,6 +4,12 @@ </style> </head><body> <pre id="terminal" style="display: inline-block; color: white; background-color: black;"></pre> +<div> +movement: <select id="WASD_selector" name="WASD_selector" > +<option value="w, a, s, d" selected>w, a, s, d</option> +<option value="arrow keys">arrow keys</option> +</select> +</div> <script> "use strict"; let websocket_location = "ws://localhost:8000"; @@ -188,10 +194,30 @@ let tui = { height_turn_line: 1, height_mode_line: 1, height_input: 1, + key_up: 'w', + key_down: 's', + key_left: 'a', + key_right: 'd', + movement_keys_desc: 'w, a, s, d', init: function() { this.recalc_input_lines(); this.height_header = this.height_turn_line + this.height_mode_line; this.log_msg("@ waiting for server connection ..."); + this.wasd_selector = document.getElementById("WASD_selector"); + this.wasd_selector.addEventListener('input', function() { + if (tui.wasd_selector.value == 'w, a, s, d') { + tui.key_up = 'w'; + tui.key_down = 's'; + tui.key_left = 'a'; + tui.key_right = 'd'; + } else if (tui.wasd_selector.value == 'arrow keys') { + tui.key_up = 'ArrowUp'; + tui.key_down = 'ArrowDown'; + tui.key_left = 'ArrowLeft'; + tui.key_right = 'ArrowRight'; + }; + tui.movement_keys_desc = tui.wasd_selector.value; + }, false); }, init_login: function() { this.log_msg("@ please enter your username:"); @@ -263,7 +289,6 @@ let tui = { this.full_refresh(); }, log_help: function() { - this.log_msg(""); this.log_msg("HELP:"); this.log_msg("chat mode commands:"); this.log_msg(" :nick NAME - re-name yourself to NAME"); @@ -272,7 +297,7 @@ let tui = { this.log_msg(" :p or :play - switch to play mode"); this.log_msg(" :? or :study - switch to study mode"); this.log_msg("commands common to study and play mode:"); - this.log_msg(" w, a, s, d - move"); + this.log_msg(" " + this.movement_keys_desc + " - move"); this.log_msg(" c - switch to chat mode"); this.log_msg("commands specific to play mode:"); this.log_msg(" e - write following ASCII character"); @@ -281,7 +306,6 @@ let tui = { this.log_msg("commands specific to study mode:"); this.log_msg(" e - annotate terrain"); this.log_msg(" p - switch to play mode"); - this.log_msg(""); }, draw_map: function() { let map_lines = []; @@ -537,13 +561,13 @@ document.addEventListener('keydown', (event) => { tui.log_help(); } else if (event.key === 'f') { server.send(["TASK:FLATTEN_SURROUNDINGS"]); - } else if (event.key === 'a') { + } else if (event.key === tui.key_left) { server.send(['TASK:MOVE', 'LEFT']); - } else if (event.key === 'd') { + } else if (event.key === tui.key_right) { server.send(['TASK:MOVE', 'RIGHT']); - } else if (event.key === 'w') { + } else if (event.key === tui.key_up) { server.send(['TASK:MOVE', 'UP']); - } else if (event.key === 's') { + } else if (event.key === tui.key_down) { server.send(['TASK:MOVE', 'DOWN']); }; } else if (tui.mode == mode_edit) { @@ -558,13 +582,13 @@ document.addEventListener('keydown', (event) => { tui.switch_mode(mode_play); } else if (event.key === 'a') { explorer.move('left'); - } else if (event.key === 'd') { + } else if (event.key === tui.key_left) { explorer.move('right'); - } else if (event.key === 'w') { + } else if (event.key === tui.key_right) { explorer.move('up'); - } else if (event.key === 's') { + } else if (event.key === tui.key_up) { explorer.move('down'); - } else if (event.key === 'e') { + } else if (event.key === tui.key_down) { tui.switch_mode(mode_annotate); }; } -- 2.30.2