home · contact · privacy
Fix terminal link coloring.
[plomrogue2] / rogue_chat_nocanvas_monochrome.html
index 9db72e4f8ca6374db566469f509837ca192a1bb2..59d03a98141cda17de586e956b1abd6d88bf8dff 100644 (file)
@@ -1,39 +1,76 @@
 <!DOCTYPE html>
 <html><head>
 <style>
+  pre {
+      display: inline-block;
+  }
+  pre a {
+      color: white;
+  }
 </style>
 </head><body>
 <div>
 terminal rows: <input id="n_rows" type="number" step=4 min=24 value=24 />
 terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
 </div>
-<pre id="terminal" style="display: inline-block;"></pre>
+<pre id="terminal"></pre>
 <textarea id="input" style="opacity: 0; width: 0px;"></textarea>
 <div>
-<h3>for mouse players</h3>
+<a href="https://plomlompom.com/repos/?p=plomrogue2;a=summary">source code</a> (includes proper terminal / curses client)
+<h3>button controls for mouse players</h3>
 <table style="float: left">
-<tr><td><button id="move_upleft">up-left</button></td><td><button id="move_up">up</button></td><td><button id="move_upright">up-right</button></td></tr>
-<tr><td><button id="move_left">left</button></td><td>MOVE</td><td><button id="move_right">right</button></td></tr>
-<tr><td><button id="move_downleft">down-left</button></td><td><button id="move_down">down</button></td><td><button id="move_downright">down-right</button></td></tr>
+  <tr>
+    <td style="text-align: right"><button id="move_upleft">up-left</button></td>
+    <td style="text-align: center"><button id="move_up">up</button></td>
+    <td><button id="move_upright">up-right</button></td>
+  </tr>
+  <tr>
+    <td style="text-align: right;"><button id="move_left">left</button></td>
+    <td stlye="text-align: center;">move</td>
+    <td><button id="move_right">right</button></td>
+  </tr>
+  <tr>
+    <td><button id="move_downleft">down-left</button></td>
+    <td style="text-align: center"><button id="move_down">down</button></td>
+    <td><button id="move_downright">down-right</button></td>
+  </tr>
+</table>
+<table>
+  <tr>
+    <td><button id="help">help</button></td>
+  </tr>
+  <tr>
+    <td><button id="switch_to_chat">chat mode</button><br /></td>
+  </tr>
+    <td><button id="switch_to_study">study mode</button></td>
+    <td><button id="toggle_map_mode">toggle terrain/annotations/control view</button>
+  <tr>
+    <td><button id="switch_to_play">play mode</button></td>
+    <td>
+      <table>
+        <tr>
+          <td><button id="take_thing">take thing</button></td>
+          <td><button id="switch_to_edit">change tile</button></td>
+          <td><button id="switch_to_admin">become admin</button></td>
+        </tr>
+        <tr>
+          <td><button id="drop_thing">drop thing</button></td>
+          <td><button id="switch_to_password">change tile editing password</button></td>
+          <td><button id="switch_to_control_pw_type">change tile control password</button></td>
+        </tr>
+        <tr>
+          <td><button id="flatten">flatten surroundings</button></td>
+          <td><button id="switch_to_annotate">annotate tile</button></td>
+          <td><button id="switch_to_control_tile_type">change tiles control</button></td>
+        </tr>
+        <tr>
+          <td><button id="teleport">teleport</button></td>
+          <td><button id="switch_to_portal">edit portal link</button></td>
+        </tr>
+      </table>
+    </td>
+  </tr>
 </table>
-<div>
-<button id="help">help</button>
-<button id="switch_to_play">play mode</button>
-<button id="switch_to_study">study mode</button>
-<button id="switch_to_chat">chat mode</button><br />
-<button id="take_thing">take thing</button>
-<button id="drop_thing">drop thing</button>
-<button id="flatten">flatten surroundings</button>
-<button id="teleport">teleport</button>
-<button id="switch_to_edit">change tile</button><br />
-<button id="switch_to_password">change tile editing password</button>
-<button id="switch_to_annotate">annotate tile</button>
-<button id="switch_to_portal">edit portal link</button>
-<button id="toggle_map_mode">toggle terrain/annotations/control view</button>
-<button id="switch_to_admin">become admin</button>
-<button id="switch_to_control_pw_type">change tile control password</button>
-<button id="switch_to_control_tile_type">change tiles control</button>
-</div>
 <h3>edit keybindings</h3> (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">here</a> for non-obvious available values):<br />
 <ul>
 <li>move up (square grid): <input id="key_square_move_up" type="text" value="w" /> (hint: ArrowUp)
@@ -51,17 +88,17 @@ terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
 <li>teleport: <input id="key_teleport" type="text" value="p" />
 <li>take thing under player: <input id="key_take_thing" type="text" value="z" />
 <li>drop carried thing: <input id="key_drop_thing" type="text" value="u" />
-<li>switch to chat mode: <input id="key_switch_to_chat" type="text" value="t" />
-<li>switch to play mode: <input id="key_switch_to_play" type="text" value="p" />
-<li>switch to study mode: <input id="key_switch_to_study" type="text" value="?" />
-<li>edit tile (from play mode): <input id="key_switch_to_edit" type="text" value="m" />
-<li>enter tile password (from play mode): <input id="key_switch_to_password" type="text" value="P" />
-<li>enter admin password (from play mode): <input id="key_switch_to_admin" type="text" value="A" />
-<li>change tile control password (from play mode): <input id="key_switch_to_control_pw_type" type="text" value="C" />
-<li>change tiles control (from play mode): <input id="key_switch_to_control_tile_type" type="text" value="Q" />
-<li>annotate tile (from play mode): <input id="key_switch_to_annotate" type="text" value="M" />
-<li>annotate portal (from play mode): <input id="key_switch_to_portal" type="text" value="T" />
-<li>toggle terrain/annotations/control view (from study mode): <input id="key_toggle_map_mode" type="text" value="M" />
+<li><input id="key_switch_to_chat" type="text" value="t" />
+<li><input id="key_switch_to_play" type="text" value="p" />
+<li><input id="key_switch_to_study" type="text" value="?" />
+<li><input id="key_switch_to_edit" type="text" value="m" />
+<li><input id="key_switch_to_password" type="text" value="P" />
+<li><input id="key_switch_to_admin" type="text" value="A" />
+<li><input id="key_switch_to_control_pw_type" type="text" value="C" />
+<li><input id="key_switch_to_control_tile_type" type="text" value="Q" />
+<li><input id="key_switch_to_annotate" type="text" value="M" />
+<li><input id="key_switch_to_portal" type="text" value="T" />
+<li>toggle terrain/annotations/control view: <input id="key_toggle_map_mode" type="text" value="M" />
 </ul>
 </div>
 <script>
@@ -82,11 +119,11 @@ let mode_helps = {
         'long': 'This mode allows you to change the map tile you currently stand on (if your map editing password authorizes you so).  Just enter any printable ASCII character to imprint it on the ground below you.'
     },
     'control_pw_type': {
-        'short': 'change tile control password',
+        'short': 'change tiles control password',
         'long': 'This mode is the first of two steps to change the password for a tile control character.  First enter the tile control character for which you want to change the password!'
     },
     'control_pw_pw': {
-        'short': 'change tile control password',
+        'short': 'change tiles control password',
         'long': 'This mode is the second of two steps to change the password for a tile control character.  Enter the new password for the tile control character you chose.'
     },
     'control_tile_type': {
@@ -98,7 +135,7 @@ let mode_helps = {
         'long': 'This mode is the second of two steps to change tile control areas on the map.  Move cursor around the map to draw selected tile control character'
     },
     'annotate': {
-        'short': 'annotation',
+        'short': 'annotate tile',
         'long': 'This mode allows you to add/edit a comment on the tile you are currently standing on (provided your map editing password authorizes you so).  Hit Return to leave.'
     },
     'portal': {
@@ -106,7 +143,7 @@ let mode_helps = {
         'long': 'This mode allows you to imprint/edit/remove a teleportation target on the ground you are currently standing on (provided your map editing password authorizes you so).  Enter or edit a URL to imprint a teleportation target; enter emptiness to remove a pre-existing teleportation target.  Hit Return to leave.'
     },
     'chat': {
-        'short': 'chat mode',
+        'short': 'chat',
         'long': 'This mode allows you to engage in chit-chat with other users.  Any line you enter into the input prompt that does not start with a "/" will be sent out to nearby players – but barriers and distance will reduce what they can read, so stand close to them to ensure they get your message.  Lines that start with a "/" are used for commands like:'
     },
     'login': {
@@ -135,6 +172,11 @@ let rows_selector = document.getElementById("n_rows");
 let cols_selector = document.getElementById("n_cols");
 let key_selectors = document.querySelectorAll('[id^="key_"]');
 
+for (const key_switch_selector of document.querySelectorAll('[id^="key_switch_to_"]')) {
+    const action = key_switch_selector.id.slice("key_switch_to_".length);
+    key_switch_selector.parentNode.prepend(mode_helps[action].short + ': ');
+}
+
 function restore_selector_value(selector) {
     let stored_selection = window.localStorage.getItem(selector.id);
     if (stored_selection) {
@@ -514,13 +556,26 @@ let tui = {
     for (let key_selector of key_selectors) {
         this.keys[key_selector.id.slice(4)] = key_selector.value;
     }
-    this.movement_keys = {
-        [this.keys.square_move_up]: 'UP',
-        [this.keys.square_move_left]: 'LEFT',
-        [this.keys.square_move_down]: 'DOWN',
-        [this.keys.square_move_right]: 'RIGHT'
-    };
-    if (game.map_geometry == 'Hex') {
+    if (game.map_geometry == 'Square') {
+        this.movement_keys = {
+            [this.keys.square_move_up]: 'UP',
+            [this.keys.square_move_left]: 'LEFT',
+            [this.keys.square_move_down]: 'DOWN',
+            [this.keys.square_move_right]: 'RIGHT'
+        };
+        document.getElementById("move_upright").hidden = true;
+        document.getElementById("move_upleft").hidden = true;
+        document.getElementById("move_downright").hidden = true;
+        document.getElementById("move_downleft").hidden = true;
+        document.getElementById("move_up").hidden = false;
+        document.getElementById("move_down").hidden = false;
+    } else if (game.map_geometry == 'Hex') {
+        document.getElementById("move_upright").hidden = false;
+        document.getElementById("move_upleft").hidden = false;
+        document.getElementById("move_downright").hidden = false;
+        document.getElementById("move_downleft").hidden = false;
+        document.getElementById("move_up").hidden = true;
+        document.getElementById("move_down").hidden = true;
         this.movement_keys = {
             [this.keys.hex_move_upleft]: 'UPLEFT',
             [this.keys.hex_move_upright]: 'UPRIGHT',
@@ -546,40 +601,13 @@ let tui = {
     }
     this.empty_input();
     this.restore_input_values();
-    document.getElementById("take_thing").disabled = true;
-    document.getElementById("drop_thing").disabled = true;
-    document.getElementById("flatten").disabled = true;
-    document.getElementById("teleport").disabled = true;
-    document.getElementById("toggle_map_mode").disabled = true;
-    document.getElementById("switch_to_chat").disabled = true;
-    document.getElementById("switch_to_play").disabled = true;
-    document.getElementById("switch_to_study").disabled = true;
-    document.getElementById("switch_to_edit").disabled = true;
-    document.getElementById("switch_to_portal").disabled = true;
-    document.getElementById("switch_to_annotate").disabled = true;
-    document.getElementById("switch_to_password").disabled = true;
-    document.getElementById("switch_to_admin").disabled = true;
-    document.getElementById("switch_to_control_pw_type").disabled = true;
-    document.getElementById("switch_to_control_tile_type").disabled = true;
-    document.getElementById("move_left").disabled = true;
-    document.getElementById("move_upleft").disabled = true;
-    document.getElementById("move_up").disabled = true;
-    document.getElementById("move_upright").disabled = true;
-    document.getElementById("move_downleft").disabled = true;
-    document.getElementById("move_down").disabled = true;
-    document.getElementById("move_downright").disabled = true;
-    document.getElementById("move_right").disabled = true;
+    for (let el of document.getElementsByTagName("button")) {
+        el.disabled = true;
+    }
+    document.getElementById("help").disabled = false;
     if (this.mode.name == 'play' || this.mode.name == 'study' || this.mode.name == 'control_tile_draw') {
-        document.getElementById("move_left").disabled = false;
-        document.getElementById("move_right").disabled = false;
-        if (game.map_geometry == 'Hex') {
-            document.getElementById("move_upleft").disabled = false;
-            document.getElementById("move_upright").disabled = false;
-            document.getElementById("move_downleft").disabled = false;
-            document.getElementById("move_downright").disabled = false;
-        } else {
-            document.getElementById("move_up").disabled = false;
-            document.getElementById("move_down").disabled = false;
+        for (const move_key of document.querySelectorAll('[id^="move_"]')) {
+            move_key.disabled = false;
         }
     }
     if (!this.mode.is_intro && this.mode.name != 'play') {