Improve keybinding help in web client.

[plomrogue2-experiments] / new2 / rogue_chat_nocanvas_monochrome.html
diff --git a/new2/rogue_chat_nocanvas_monochrome.html b/new2/rogue_chat_nocanvas_monochrome.html

index d789e6c8ad54a4e847f2f90aa21f9fe3c42dc31c..b51fc019c3fe859219d38f32ce6b90f6bc3a1e7d 100644 (file)
--- a/new2/rogue_chat_nocanvas_monochrome.html
+++ b/new2/rogue_chat_nocanvas_monochrome.html
@@ -4,30 +4,30 @@
  </style>
  </head><body>
  <div>
-rows: <input id="n_rows" type="number" step=4 min=8 value=24 />
-cols: <input id="n_cols" type="number" step=4 min=20 value=80 />
+terminal rows: <input id="n_rows" type="number" step=4 min=8 value=24 />
+terminal columns: <input id="n_cols" type="number" step=4 min=20 value=80 />
  </div>
  <pre id="terminal" style="display: inline-block;"></pre>
  <textarea id="input" style="opacity: 0; width: 0px;"></textarea>
  <div>
-keys:<br />
-square_move_up: <input id="key_square_move_up" type="text" value="w" /> (hint: ArrowUp)<br />
-square_move_left: <input id="key_square_move_left" type="text" value="a" /> (hint: ArrowLeft)<br />
-square_move_down: <input id="key_square_move_down" type="text" value="s" /> (hint: ArrowDown)<br />
-square_move_right: <input id="key_square_move_right" type="text" value="d" /> (hint: ArrowRight)<br />
-hex_move_upleft: <input id="key_hex_move_upleft" type="text" value="w" /><br />
-hex_move_upright: <input id="key_hex_move_upright" type="text" value="e" /><br />
-hex_move_right: <input id="key_hex_move_right" type="text" value="d" /><br />
-hex_move_downright: <input id="key_hex_move_downright" type="text" value="x" /><br />
-hex_move_downleft: <input id="key_hex_move_downleft" type="text" value="y" /><br />
-hex_move_left: <input id="key_hex_move_left" type="text" value="a" /><br />
-flatten_: <input id="key_flatten" type="text" value="F" /><br />
-switch_to_chat: <input id="key_switch_to_chat" type="text" value="t" /><br />
-switch_to_play: <input id="key_switch_to_play" type="text" value="p" /><br />
-switch_to_annotate: <input id="key_switch_to_annotate" type="text" value="m" /><br />
-switch_to_portal: <input id="key_switch_to_portal" type="text" value="P" /><br />
-switch_to_study: <input id="key_switch_to_study" type="text" value="?" /><br />
-switch_to_edit: <input id="key_switch_to_edit" type="text" value="m" /><br />
+keys (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">here</a> for non-obvious available values):<br />
+move up (square grid): <input id="key_square_move_up" type="text" value="w" /> (hint: ArrowUp)<br />
+move left (square grid): <input id="key_square_move_left" type="text" value="a" /> (hint: ArrowLeft)<br />
+move down (square grid): <input id="key_square_move_down" type="text" value="s" /> (hint: ArrowDown)<br />
+move right (square grid): <input id="key_square_move_right" type="text" value="d" /> (hint: ArrowRight)<br />
+move up-left (hex grid): <input id="key_hex_move_upleft" type="text" value="w" /><br />
+move up-right (hex grid): <input id="key_hex_move_upright" type="text" value="e" /><br />
+move right (hex grid): <input id="key_hex_move_right" type="text" value="d" /><br />
+move down-right (hex grid): <input id="key_hex_move_downright" type="text" value="x" /><br />
+move down-left (hex grid): <input id="key_hex_move_downleft" type="text" value="y" /><br />
+move left (hex grid): <input id="key_hex_move_left" type="text" value="a" /><br />
+flatten surroundings: <input id="key_flatten" type="text" value="F" /><br />
+switch to chat mode: <input id="key_switch_to_chat" type="text" value="t" /><br />
+switch to play mode: <input id="key_switch_to_play" type="text" value="p" /><br />
+switch to study mode: <input id="key_switch_to_study" type="text" value="?" /><br />
+edit terrain (from play mode): <input id="key_switch_to_edit" type="text" value="m" /><br />
+annotate terrain (from study mode): <input id="key_switch_to_annotate" type="text" value="m" /><br />
+annotate portal (from study mode): <input id="key_switch_to_portal" type="text" value="P" /><br />
  </div>
  <script>
  "use strict";
@@ -37,6 +37,18 @@ let rows_selector = document.getElementById("n_rows");
  let cols_selector = document.getElementById("n_cols");
  let key_selectors = document.querySelectorAll('[id^="key_"]');
  
+function restore_selector_value(selector) {
+    let stored_selection = window.localStorage.getItem(selector.id);
+    if (stored_selection) {
+        selector.value = stored_selection;
+    }
+}
+restore_selector_value(rows_selector);
+restore_selector_value(cols_selector);
+for (let key_selector of key_selectors) {
+    restore_selector_value(key_selector);
+}
+
  let terminal = {
    foreground: 'white',
    background: 'black',
@@ -168,10 +180,10 @@ let server = {
              tui.log_msg("@ server disconnected :(");
              tui.log_msg("@ hint: try the '/reconnect' command");
          };
-       this.websocket.onmessage = this.handle_event;
-    },
+           this.websocket.onmessage = this.handle_event;
+        },
      reconnect: function() {
-       this.reconnect_to(this.url);
+          this.reconnect_to(this.url);
      },
      reconnect_to: function(url) {
          this.websocket.close();
@@ -768,6 +780,7 @@ rows_selector.addEventListener('input', function() {
      if (rows_selector.value % 4 != 0) {
          return;
      }
+    window.localStorage.setItem(rows_selector.id, rows_selector.value);
      terminal.initialize();
      tui.full_refresh();
  }, false);
@@ -775,12 +788,14 @@ cols_selector.addEventListener('input', function() {
      if (cols_selector.value % 4 != 0) {
          return;
      }
+    window.localStorage.setItem(cols_selector.id, cols_selector.value);
      terminal.initialize();
      tui.window_width = terminal.cols / 2,
      tui.full_refresh();
  }, false);
  for (let key_selector of key_selectors) {
      key_selector.addEventListener('input', function() {
+        window.localStorage.setItem(key_selector.id, key_selector.value);
          tui.init_keys();
      }, false);
  }