home · contact · privacy
projects / plomrogue2-experiments / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 792dad9)
Add movement key selector to pick between arrows and WASD.
authorChristian Heller <c.heller@plomlompom.de>
Thu, 29 Oct 2020 03:11:00 +0000 (04:11 +0100)
committerChristian Heller <c.heller@plomlompom.de>
Thu, 29 Oct 2020 03:11:00 +0000 (04:11 +0100)
new2/rogue_chat_nocanvas_monochrome.html patch | blob | history

diff --git a/new2/rogue_chat_nocanvas_monochrome.html b/new2/rogue_chat_nocanvas_monochrome.html
index 3694675eeeb1c034f878961c1699d9101e2500d9..09d400d8ca5c78eb6536fc042ffb10cf42de0a31 100644 (file)
--- 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);
         };
     }
preliminary study for new roguelike engine