From: Christian Heller <c.heller@plomlompom.de>
Date: Sat, 14 Nov 2020 05:10:34 +0000 (+0100)
Subject: Add button control to web client for mouse players.
X-Git-Url: https://plomlompom.com/repos/%7B%7Bprefix%7D%7D/static/%7B%7Byoutube_prefix%7D%7D%7B%7Bvideo_id%7D%7D?a=commitdiff_plain;h=c44edaea10aa907301a47f19e492f1d869d528d9;p=plomrogue2

Add button control to web client for mouse players.
---

diff --git a/rogue_chat_nocanvas_monochrome.html b/rogue_chat_nocanvas_monochrome.html
index 7c24a43..f037bc7 100644
--- a/rogue_chat_nocanvas_monochrome.html
+++ b/rogue_chat_nocanvas_monochrome.html
@@ -10,29 +10,51 @@ terminal columns: <input id="n_cols" type="number" step=4 min=20 value=80 />
 <pre id="terminal" style="display: inline-block;"></pre>
 <textarea id="input" style="opacity: 0; width: 0px;"></textarea>
 <div>
-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 />
-help: <input id="key_help" type="text" value="h" /><br />
-flatten surroundings: <input id="key_flatten" type="text" value="F" /><br />
-take thing under player: <input id="key_take_thing" type="text" value="z" /><br />
-drop carried thing: <input id="key_drop_thing" type="text" value="u" /><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 tile (from play mode): <input id="key_switch_to_edit" type="text" value="m" /><br />
-enter tile password (from play mode): <input id="key_switch_to_password" type="text" value="P" /><br />
-annotate tile (from play mode): <input id="key_switch_to_annotate" type="text" value="M" /><br />
-annotate portal (from play mode): <input id="key_switch_to_portal" type="text" value="T" /><br />
-toggle terrain/control view (from study mode): <input id="key_toggle_map_mode" type="text" value="M" /><br />
+<h3>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>
+</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="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/control view</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)
+<li>move left (square grid): <input id="key_square_move_left" type="text" value="a" /> (hint: ArrowLeft)
+<li>move down (square grid): <input id="key_square_move_down" type="text" value="s" /> (hint: ArrowDown)
+<li>move right (square grid): <input id="key_square_move_right" type="text" value="d" /> (hint: ArrowRight)
+<li>move up-left (hex grid): <input id="key_hex_move_upleft" type="text" value="w" />
+<li>move up-right (hex grid): <input id="key_hex_move_upright" type="text" value="e" />
+<li>move right (hex grid): <input id="key_hex_move_right" type="text" value="d" />
+<li>move down-right (hex grid): <input id="key_hex_move_downright" type="text" value="x" />
+<li>move down-left (hex grid): <input id="key_hex_move_downleft" type="text" value="y" />
+<li>move left (hex grid): <input id="key_hex_move_left" type="text" value="a" />
+<li>help: <input id="key_help" type="text" value="h" />
+<li>flatten surroundings: <input id="key_flatten" type="text" value="F" />
+<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>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/control view (from study mode): <input id="key_toggle_map_mode" type="text" value="M" />
+</ul>
 </div>
 <script>
 "use strict";
@@ -376,12 +398,71 @@ let tui = {
     this.mode = mode;
     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("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("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;
+    if (mode == mode_play || mode == mode_study) {
+        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;
+        }
+    }
+    if (!mode.is_intro && mode != mode_play) {
+        document.getElementById("switch_to_play").disabled = false;
+    }
+    if (!mode.is_intro && mode != mode_study) {
+        document.getElementById("switch_to_study").disabled = false;
+    }
+    if (!mode.is_intro && mode != mode_chat) {
+        document.getElementById("switch_to_chat").disabled = false;
+    }
     if (mode == mode_login) {
         if (this.login_name) {
             server.send(['LOGIN', this.login_name]);
         } else {
             this.log_msg("? need login name");
         }
+    } else if (mode == mode_play) {
+        if (game.tasks.includes('PICK_UP')) {
+            document.getElementById("take_thing").disabled = false;
+        }
+        if (game.tasks.includes('DROP')) {
+            document.getElementById("drop_thing").disabled = false;
+        }
+        if (game.tasks.includes('FLATTEN_SURROUNDINGS')) {
+            document.getElementById("flatten").disabled = false;
+        }
+        if (game.tasks.includes('MOVE')) {
+        }
+        document.getElementById("switch_to_annotate").disabled = false;
+        document.getElementById("switch_to_edit").disabled = false;
+        document.getElementById("switch_to_portal").disabled = false;
+        document.getElementById("switch_to_password").disabled = false;
+    } else if (mode == mode_study) {
+        document.getElementById("toggle_map_mode").disabled = false;
     } else if (mode == mode_edit) {
         this.show_help = true;
     } else if (mode == mode_teleport) {
@@ -779,6 +860,7 @@ tui.inputEl.addEventListener('input', (event) => {
     }
     tui.full_refresh();
 }, false);
+
 tui.inputEl.addEventListener('keydown', (event) => {
     tui.show_help = false;
     if (event.key == 'Enter') {
@@ -932,5 +1014,111 @@ window.setInterval(function() {
         tui.log_msg('@ attempting reconnect …')
     }
 }, 5000);
+
+document.getElementById("help").onclick = function() {
+    tui.show_help = true;
+    tui.full_refresh();
+};
+document.getElementById("switch_to_play").onclick = function() {
+    tui.switch_mode(mode_play);
+    tui.full_refresh();
+};
+document.getElementById("switch_to_study").onclick = function() {
+    tui.switch_mode(mode_study);
+    tui.full_refresh();
+};
+document.getElementById("switch_to_chat").onclick = function() {
+    tui.switch_mode(mode_chat);
+    tui.full_refresh();
+};
+document.getElementById("switch_to_password").onclick = function() {
+    tui.switch_mode(mode_password);
+    tui.full_refresh();
+};
+document.getElementById("switch_to_edit").onclick = function() {
+    tui.switch_mode(mode_edit);
+    tui.full_refresh();
+};
+document.getElementById("switch_to_annotate").onclick = function() {
+    tui.switch_mode(mode_annotate);
+    tui.full_refresh();
+};
+document.getElementById("switch_to_portal").onclick = function() {
+    tui.switch_mode(mode_portal);
+    tui.full_refresh();
+};
+document.getElementById("toggle_map_mode").onclick = function() {
+    if (tui.map_mode == 'terrain') {
+        tui.map_mode = 'control';
+    } else {
+        tui.map_mode = 'terrain';
+    }
+    tui.full_refresh();
+};
+document.getElementById("take_thing").onclick = function() {
+        server.send(['TASK:PICK_UP']);
+};
+document.getElementById("drop_thing").onclick = function() {
+        server.send(['TASK:DROP']);
+};
+document.getElementById("flatten").onclick = function() {
+    server.send(['TASK:FLATTEN_SURROUNDINGS', tui.password]);
+};
+document.getElementById("move_upleft").onclick = function() {
+    if (tui.mode == mode_play) {
+        server.send(['TASK:MOVE', 'UPLEFT']);
+    } else {
+        explorer.move('UPLEFT');
+    };
+};
+document.getElementById("move_left").onclick = function() {
+    if (tui.mode == mode_play) {
+        server.send(['TASK:MOVE', 'LEFT']);
+    } else {
+        explorer.move('LEFT');
+    };
+};
+document.getElementById("move_downleft").onclick = function() {
+    if (tui.mode == mode_play) {
+        server.send(['TASK:MOVE', 'DOWNLEFT']);
+    } else {
+        explorer.move('DOWNLEFT');
+    };
+};
+document.getElementById("move_down").onclick = function() {
+    if (tui.mode == mode_play) {
+        server.send(['TASK:MOVE', 'DOWN']);
+    } else {
+        explorer.move('DOWN');
+    };
+};
+document.getElementById("move_up").onclick = function() {
+    if (tui.mode == mode_play) {
+        server.send(['TASK:MOVE', 'UP']);
+    } else {
+        explorer.move('UP');
+    };
+};
+document.getElementById("move_upright").onclick = function() {
+    if (tui.mode == mode_play) {
+        server.send(['TASK:MOVE', 'UPRIGHT']);
+    } else {
+        explorer.move('UPRIGHT');
+    };
+};
+document.getElementById("move_right").onclick = function() {
+    if (tui.mode == mode_play) {
+        server.send(['TASK:MOVE', 'RIGHT']);
+    } else {
+        explorer.move('RIGHT');
+    };
+};
+document.getElementById("move_downright").onclick = function() {
+    if (tui.mode == mode_play) {
+        server.send(['TASK:MOVE', 'DOWNRIGHT']);
+    } else {
+        explorer.move('DOWNRIGHT');
+    };
+};
 </script>
 </body></html>