home · contact · privacy
Refactor player session code.
[plomrogue2] / rogue_chat_nocanvas_monochrome.html
index 4956cbdc3beccb39222fc26f571462cd4482c4a1..b8d7b986d11c1350bf203f5a8f380bc4b1298816 100644 (file)
@@ -4,39 +4,64 @@
 </style>
 </head><body>
 <div>
-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 />
+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>
 <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="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>
+</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>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>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" />
+</ul>
 </div>
 <script>
 "use strict";
 let websocket_location = "wss://plomlompom.com/rogue_chat/";
+//let websocket_location = "ws://localhost:8000/";
 
 let rows_selector = document.getElementById("n_rows");
 let cols_selector = document.getElementById("n_cols");
@@ -118,7 +143,6 @@ terminal.initialize();
 
 let parser = {
   tokenize: function(str) {
-    let token_ends = [];
     let tokens = [];
     let token = ''
     let quoted = false;
@@ -140,7 +164,6 @@ let parser = {
         quoted = true
       } else if (c === ' ') {
         if (token.length > 0) {
-          token_ends.push(i);
           tokens.push(token);
           token = '';
         }
@@ -151,11 +174,7 @@ let parser = {
     if (token.length > 0) {
       tokens.push(token);
     }
-    let token_starts = [];
-    for (let i = 0; i < token_ends.length; i++) {
-      token_starts.push(token_ends[i] - tokens[i].length);
-    };
-    return [tokens, token_starts];
+    return tokens;
   },
   parse_yx: function(position_string) {
     let coordinate_strings = position_string.split(',')
@@ -179,7 +198,9 @@ let server = {
         this.websocket.onopen = function(event) {
             server.connected = true;
             game.thing_types = {};
+            game.terrains = {};
             server.send(['TASKS']);
+            server.send(['TERRAINS']);
             server.send(['THING_TYPES']);
             tui.log_msg("@ server connected! :)");
             tui.switch_mode(mode_login);
@@ -199,9 +220,10 @@ let server = {
         this.websocket.send(unparser.untokenize(tokens));
     },
     handle_event: function(event) {
-        let tokens = parser.tokenize(event.data)[0];
+        let tokens = parser.tokenize(event.data);
         if (tokens[0] === 'TURN') {
             game.turn_complete = false;
+            explorer.empty_info_db();
             game.things = {};
             game.portals = {};
             game.turn = parseInt(tokens[1]);
@@ -214,10 +236,17 @@ let server = {
             if (t) {
                 t.name_ = tokens[2];
             };
+        } else if (tokens[0] === 'THING_CHAR') {
+            let t = game.get_thing(tokens[1], false);
+            if (t) {
+                t.player_char = tokens[2];
+            };
         } else if (tokens[0] === 'TASKS') {
             game.tasks = tokens[1].split(',')
         } else if (tokens[0] === 'THING_TYPE') {
             game.thing_types[tokens[1]] = tokens[2]
+        } else if (tokens[0] === 'TERRAIN') {
+            game.terrains[tokens[1]] = tokens[2]
         } else if (tokens[0] === 'MAP') {
             game.map_geometry = tokens[1];
             tui.init_keys();
@@ -229,18 +258,11 @@ let server = {
             game.map_control = tokens[1]
         } else if (tokens[0] === 'GAME_STATE_COMPLETE') {
             game.turn_complete = true;
-            explorer.empty_info_db();
             if (tui.mode == mode_post_login_wait) {
                 tui.switch_mode(mode_play);
             } else if (tui.mode == mode_study) {
                 explorer.query_info();
             }
-            let t = game.get_thing(game.player_id);
-            if (t.position in game.portals) {
-                tui.teleport_target = game.portals[t.position];
-                tui.switch_mode(mode_teleport);
-                return;
-            }
             tui.full_refresh();
         } else if (tokens[0] === 'CHAT') {
              tui.log_msg('# ' + tokens[1], 1);
@@ -252,12 +274,18 @@ let server = {
         } else if (tokens[0] === 'PORTAL') {
             let position = parser.parse_yx(tokens[1]);
             game.portals[position] = tokens[2];
+        } else if (tokens[0] === 'ANNOTATION_HINT') {
+            let position = parser.parse_yx(tokens[1]);
+            explorer.info_hints = explorer.info_hints.concat([position]);
         } else if (tokens[0] === 'ANNOTATION') {
             let position = parser.parse_yx(tokens[1]);
             explorer.update_info_db(position, tokens[2]);
+            tui.restore_input_values();
+            tui.full_refresh();
         } else if (tokens[0] === 'UNHANDLED_INPUT') {
             tui.log_msg('? unknown command');
         } else if (tokens[0] === 'PLAY_ERROR') {
+            tui.log_msg('? ' + tokens[1]);
             terminal.blink_screen();
         } else if (tokens[0] === 'ARGUMENT_ERROR') {
             tui.log_msg('? syntax error: ' + tokens[1]);
@@ -313,7 +341,6 @@ let mode_chat = new Mode('chat', 'This mode allows you to engage in chit-chat wi
 let mode_play = new Mode('play', 'This mode allows you to interact with the map.', false, false);
 let mode_study = new Mode('study', 'This mode allows you to study the map and its tiles in detail.  Move the question mark over a tile, and the right half of the screen will show detailed information on it.', false, true);
 let mode_edit = new Mode('edit', '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.', false, false);
-let mode_teleport = new Mode('teleport', 'Follow the instructions to re-connect and log-in to another server, or enter anything else to abort.', true);
 let mode_portal = new Mode('portal', '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.', true, true);
 let mode_password = new Mode('password', 'This mode allows you to change the password that you send to authorize yourself for editing password-protected map tiles.  Hit return to confirm and leave.', true, false, false);
 
@@ -359,25 +386,85 @@ let tui = {
     };
   },
   switch_mode: function(mode) {
+    this.inputEl.focus();
     this.show_help = false;
     this.map_mode = 'terrain';
     if (mode.shows_info && game.player_id in game.things) {
       explorer.position = game.things[game.player_id].position;
+      explorer.query_info();
     }
     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("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("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("teleport").disabled = false;
+        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) {
-        tui.log_msg("@ May teleport to: " + tui.teleport_target);
-        tui.log_msg("@ Enter 'YES!' to entusiastically affirm.");
     }
     this.full_refresh();
   },
@@ -448,16 +535,27 @@ let tui = {
         line.push(map_content[i] + ' ');
     };
     map_lines_split.push(line);
-    if (this.map_mode == 'terrain') {
+    if (this.map_mode == 'annotations') {
+        for (const coordinate of explorer.info_hints) {
+            map_lines_split[coordinate[0]][coordinate[1]] = 'A ';
+        }
+    } else if (this.map_mode == 'terrain') {
+        for (const p in game.portals) {
+            let coordinate = p.split(',')
+            map_lines_split[coordinate[0]][coordinate[1]] = 'P ';
+        }
         let used_positions = [];
         for (const thing_id in game.things) {
             let t = game.things[thing_id];
             let symbol = game.thing_types[t.type_];
+            let meta_char = ' ';
+            if (t.player_char) {
+                meta_char = t.player_char;
+            }
             if (used_positions.includes(t.position.toString())) {
-                map_lines_split[t.position[0]][t.position[1]] = symbol + '+';
-            } else {
-                map_lines_split[t.position[0]][t.position[1]] = symbol + ' ';
+                meta_char = '+';
             };
+            map_lines_split[t.position[0]][t.position[1]] = symbol + meta_char;
             used_positions.push(t.position.toString());
         };
     }
@@ -553,6 +651,7 @@ let tui = {
           if (game.tasks.includes('FLATTEN_SURROUNDINGS')) {
               content += "[" + tui.keys.flatten + "] – flatten player's surroundings\n";
           }
+          content += "[" + tui.keys.teleport + "] – teleport to other space\n";
           content += '\nOther modes available from here:\n';
           content += '[' + this.keys.switch_to_chat + '] – chat mode\n';
           content += '[' + this.keys.switch_to_study + '] – study mode\n';
@@ -563,13 +662,12 @@ let tui = {
       } else if (this.mode == mode_study) {
           content += "Available actions:\n";
           content += '[' + movement_keys_desc + '] – move question mark\n';
-          content += '[' + this.keys.toggle_map_mode + '] – toggle view between terrain, and password protection areas\n';
+          content += '[' + this.keys.toggle_map_mode + '] – toggle view between terrain, annotations, and password protection areas\n';
           content += '\nOther modes available from here:\n';
           content += '[' + this.keys.switch_to_chat + '] – chat mode\n';
           content += '[' + this.keys.switch_to_play + '] – play mode\n';
       } else if (this.mode == mode_chat) {
           content += '/nick NAME – re-name yourself to NAME\n';
-          //content += '/msg USER TEXT – send TEXT to USER\n';
           content += '/' + this.keys.switch_to_play + ' or /play – switch to play mode\n';
           content += '/' + this.keys.switch_to_study + ' or /study – switch to study mode\n';
       }
@@ -669,6 +767,15 @@ let game = {
             return null;
         };
         return target;
+    },
+    teleport: function() {
+        let player = this.get_thing(game.player_id);
+        if (player.position in this.portals) {
+            server.reconnect_to(this.portals[player.position]);
+        } else {
+            terminal.blink_screen();
+            tui.log_msg('? not standing on portal')
+        }
     }
 }
 
@@ -680,6 +787,7 @@ server.init(websocket_location);
 let explorer = {
     position: [0,0],
     info_db: {},
+    info_hints: [],
     move: function(direction) {
         let target = game.move(this.position, direction);
         if (target) {
@@ -697,6 +805,7 @@ let explorer = {
     },
     empty_info_db: function() {
         this.info_db = {};
+        this.info_hints = [];
         if (tui.mode == mode_study) {
             tui.full_refresh();
         }
@@ -710,13 +819,27 @@ let explorer = {
             return 'outside field of view';
         };
         let info = "";
-        info += "TERRAIN: " + game.map[position_i] + "\n";
+        let terrain_char = game.map[position_i]
+        let terrain_desc = '?'
+        if (game.terrains[terrain_char]) {
+            terrain_desc = game.terrains[terrain_char];
+        };
+        info += 'TERRAIN: "' + terrain_char + '" / ' + terrain_desc + "\n";
+        let protection = game.map_control[position_i];
+        if (protection == '.') {
+            protection = 'unprotected';
+        };
+        info += 'PROTECTION: ' + protection + '\n';
         for (let t_id in game.things) {
              let t = game.things[t_id];
              if (t.position[0] == this.position[0] && t.position[1] == this.position[1]) {
-                 info += "THING: " + t.type_;
+                 let symbol = game.thing_types[t.type_];
+                 info += "THING: " + t.type_ + " / " + symbol;
+                 if (t.player_char) {
+                     info += t.player_char;
+                 };
                  if (t.name_) {
-                     info += " (name: " + t.name_ + ")";
+                     info += " (" + t.name_ + ")";
                  }
                  info += "\n";
              }
@@ -785,15 +908,8 @@ tui.inputEl.addEventListener('keydown', (event) => {
         }
         tui.password = tui.inputEl.value
         tui.switch_mode(mode_play);
-    } else if (tui.mode == mode_teleport && event.key == 'Enter') {
-        if (tui.inputEl.value == 'YES!') {
-            server.reconnect_to(tui.teleport_target);
-        } else {
-            tui.log_msg('@ teleport aborted');
-            tui.switch_mode(mode_play);
-        };
     } else if (tui.mode == mode_chat && event.key == 'Enter') {
-        let [tokens, token_starts] = parser.tokenize(tui.inputEl.value);
+        let tokens = parser.tokenize(tui.inputEl.value);
         if (tokens.length > 0 && tokens[0].length > 0) {
             if (tui.inputEl.value[0][0] == '/') {
                 if (tokens[0].slice(1) == 'play' || tokens[0][1] == tui.keys.switch_to_play) {
@@ -806,13 +922,6 @@ tui.inputEl.addEventListener('keydown', (event) => {
                     } else {
                         tui.log_msg('? need new name');
                     }
-                //} else if (tokens[0].slice(1) == 'msg') {
-                //    if (tokens.length > 2) {
-                //        let msg = tui.inputEl.value.slice(token_starts[2]);
-                //        server.send(['QUERY', tokens[1], msg]);
-                //    } else {
-                //        tui.log_msg('? need message target and message');
-                //    }
                 } else {
                     tui.log_msg('? unknown command');
                 }
@@ -848,6 +957,8 @@ tui.inputEl.addEventListener('keydown', (event) => {
           } else if (event.key in tui.movement_keys
                      && game.tasks.includes('MOVE')) {
               server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
+          } else if (event.key === tui.keys.teleport) {
+              game.teleport();
           } else if (event.key === tui.keys.switch_to_portal) {
               event.preventDefault();
               tui.switch_mode(mode_portal);
@@ -865,6 +976,8 @@ tui.inputEl.addEventListener('keydown', (event) => {
             explorer.move(tui.movement_keys[event.key]);
         } else if (event.key == tui.keys.toggle_map_mode) {
             if (tui.map_mode == 'terrain') {
+                tui.map_mode = 'annotations';
+            } else if (tui.map_mode == 'annotations') {
                 tui.map_mode = 'control';
             } else {
                 tui.map_mode = 'terrain';
@@ -875,7 +988,7 @@ tui.inputEl.addEventListener('keydown', (event) => {
 }, false);
 
 rows_selector.addEventListener('input', function() {
-    if (rows_selector.value % 4 != 0) {
+    if (rows_selector.value % 4 != 0 || rows_selector.value < 24) {
         return;
     }
     window.localStorage.setItem(rows_selector.id, rows_selector.value);
@@ -883,7 +996,7 @@ rows_selector.addEventListener('input', function() {
     tui.full_refresh();
 }, false);
 cols_selector.addEventListener('input', function() {
-    if (cols_selector.value % 4 != 0) {
+    if (cols_selector.value % 4 != 0 || cols_selector.value < 80) {
         return;
     }
     window.localStorage.setItem(cols_selector.id, cols_selector.value);
@@ -897,12 +1010,6 @@ for (let key_selector of key_selectors) {
         tui.init_keys();
     }, false);
 }
-window.setInterval(function() {
-    if (!(['input', 'n_cols', 'n_rows'].includes(document.activeElement.id)
-          || document.activeElement.id.startsWith('key_'))) {
-        tui.inputEl.focus();
-    }
-}, 100);
 window.setInterval(function() {
     if (server.connected) {
         server.send(['PING']);
@@ -911,5 +1018,118 @@ window.setInterval(function() {
         tui.log_msg('@ attempting reconnect …')
     }
 }, 5000);
+document.getElementById("terminal").onclick = function() {
+    tui.inputEl.focus();
+};
+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 = 'annotations';
+    } else if (tui.map_mode == 'annotations') {
+        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("teleport").onclick = function() {
+    game.teleport();
+};
+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>