X-Git-Url: https://plomlompom.com/repos/%7B%7B%20web_path%20%7D%7D/decks/%7B%7Bdeck_id%7D%7D/cards/%7B%7Bcard_id%7D%7D/static/gitweb.css?a=blobdiff_plain;f=rogue_chat_nocanvas_monochrome.html;h=c2c6bc7d338ae912218f91df48d5f2c0ba532e32;hb=dbd7f497e0726b80f7df42c53ea7b4ee6a74a280;hp=9feb615049d9fe682b0b54f74aef0f02fe52dc4a;hpb=750eb29e8a84e9846bb6b568745b8de453788f58;p=plomrogue2

diff --git a/rogue_chat_nocanvas_monochrome.html b/rogue_chat_nocanvas_monochrome.html
index 9feb615..c2c6bc7 100644
--- a/rogue_chat_nocanvas_monochrome.html
+++ b/rogue_chat_nocanvas_monochrome.html
@@ -31,7 +31,8 @@ terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
 <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">change tile control password</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>
@@ -56,7 +57,8 @@ terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
 <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="text" value="C" />
+<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" />
@@ -67,6 +69,68 @@ terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
 let websocket_location = "wss://plomlompom.com/rogue_chat/";
 //let websocket_location = "ws://localhost:8000/";
 
+let mode_helps = {
+    'play': {
+        'short': 'play',
+        'long': 'This mode allows you to interact with the map.'
+    },
+    'study': {
+        'short': 'study',
+        'long': '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.'},
+    'edit': {
+        'short': 'terrain edit',
+        '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',
+        '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',
+        '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': {
+        'short': 'change tiles control',
+        'long': 'This mode is the first of two steps to change tile control areas on the map.  First enter the tile control character you want to write.'
+    },
+    'control_tile_draw': {
+        'short': 'change tiles control',
+        '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',
+        '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': {
+        'short': 'edit portal',
+        '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',
+        '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': {
+        'short': 'login',
+        'long': 'Pick your player name.'
+    },
+    'waiting_for_server': {
+        'short': 'waiting for server response',
+        'long': 'Waiting for a server response.'
+    },
+    'post_login_wait': {
+        'short': 'waiting for server response',
+        'long': 'Waiting for a server response.'
+    },
+    'password': {
+        'short': 'password input',
+        'long': '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.'
+    },
+    'admin': {
+        'short': 'become admin',
+        'long': 'This mode allows you to become admin if you know an admin password.'
+    }
+}
+
 let rows_selector = document.getElementById("n_rows");
 let cols_selector = document.getElementById("n_cols");
 let key_selectors = document.querySelectorAll('[id^="key_"]');
@@ -207,11 +271,11 @@ let server = {
             server.send(['TERRAINS']);
             server.send(['THING_TYPES']);
             tui.log_msg("@ server connected! :)");
-            tui.switch_mode(mode_login);
+            tui.switch_mode('login');
         };
         this.websocket.onclose = function(event) {
             server.connected = false;
-            tui.switch_mode(mode_waiting_for_server);
+            tui.switch_mode('waiting_for_server');
             tui.log_msg("@ server disconnected :(");
         };
 	    this.websocket.onmessage = this.handle_event;
@@ -246,7 +310,8 @@ let server = {
                 t.player_char = tokens[2];
             };
         } else if (tokens[0] === 'TASKS') {
-            game.tasks = tokens[1].split(',')
+            game.tasks = tokens[1].split(',');
+            tui.mode_edit.legal = game.tasks.includes('WRITE');
         } else if (tokens[0] === 'THING_TYPE') {
             game.thing_types[tokens[1]] = tokens[2]
         } else if (tokens[0] === 'TERRAIN') {
@@ -262,9 +327,9 @@ let server = {
             game.map_control = tokens[1]
         } else if (tokens[0] === 'GAME_STATE_COMPLETE') {
             game.turn_complete = true;
-            if (tui.mode == mode_post_login_wait) {
-                tui.switch_mode(mode_play);
-            } else if (tui.mode == mode_study) {
+            if (tui.mode.name == 'post_login_wait') {
+                tui.switch_mode('play');
+            } else if (tui.mode.name == 'study') {
                 explorer.query_info();
             }
             tui.full_refresh();
@@ -274,7 +339,7 @@ let server = {
             game.player_id = parseInt(tokens[1]);
         } else if (tokens[0] === 'LOGIN_OK') {
             this.send(['GET_GAMESTATE']);
-            tui.switch_mode(mode_post_login_wait);
+            tui.switch_mode('post_login_wait');
         } else if (tokens[0] === 'PORTAL') {
             let position = parser.parse_yx(tokens[1]);
             game.portals[position] = tokens[2];
@@ -329,56 +394,50 @@ let unparser = {
 }
 
 class Mode {
-    constructor(name, help_intro, has_input_prompt=false, shows_info=false,
+    constructor(name, has_input_prompt=false, shows_info=false,
                 is_intro=false, is_single_char_entry=false) {
         this.name = name;
+        this.short_desc = mode_helps[name].short;
+        this.available_modes = [];
         this.has_input_prompt = has_input_prompt;
         this.shows_info= shows_info;
         this.is_intro = is_intro;
-        this.help_intro = help_intro;
+        this.help_intro = mode_helps[name].long;
         this.is_single_char_entry = is_single_char_entry;
+        this.legal = true;
+    }
+    *iter_available_modes() {
+        for (let mode_name of this.available_modes) {
+            let mode = tui['mode_' + mode_name];
+            if (!mode.legal) {
+                continue;
+            }
+            let key = tui.keys['switch_to_' + mode.name];
+            yield [mode, key]
+        }
+    }
+    list_available_modes() {
+        let msg = ''
+        if (this.available_modes.length > 0) {
+            msg += 'Other modes available from here:\n';
+            for (let [mode, key] of this.iter_available_modes()) {
+                msg += '[' + key + '] – ' + mode.short_desc + '\n';
+            }
+        }
+        return msg;
+    }
+    mode_switch_on_key(key_event) {
+        for (let [mode, key] of this.iter_available_modes()) {
+            if (key_event.key == key) {
+                event.preventDefault();
+                tui.switch_mode(mode.name);
+                return true;
+            };
+        }
+        return false;
     }
 }
-  let mode_waiting_for_server = new Mode('waiting_for_server',
-                                         'Waiting for a server response.',
-                                         false, false, true);
-  let mode_login = new Mode('login',
-                            'Pick your player name.',
-                            true, false, true);
-  let mode_post_login_wait = new Mode('waiting for game world',
-                                      'Waiting for a server response.')
-  let mode_chat = new Mode('chat',
-                           '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:',
-                           true);
-  let mode_annotate = new Mode('annotate',
-                               '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.',
-                               true, true);
-  let mode_play = new Mode('play',
-                           'This mode allows you to interact with the map.')
-  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, false, true);
-  let mode_control_pw_type = new Mode('control_pw_type',
-                                      '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!',
-                                      false, false, false, 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);
-  let mode_admin = new Mode('admin',
-                            'This mode allows you to become admin if you know an admin password.',
-                            true);
-  let mode_control_pw_pw = new Mode('control_pw_pw',
-                                    '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.',
-                                    true);
-
 let tui = {
-  mode: mode_waiting_for_server,
   log: [],
   input_prompt: '> ',
   input_lines: [],
@@ -388,7 +447,33 @@ let tui = {
   height_input: 1,
   password: 'foo',
   show_help: false,
+  mode_waiting_for_server: new Mode('waiting_for_server',
+                                     false, false, true),
+  mode_login: new Mode('login', true, false, true),
+  mode_post_login_wait: new Mode('post_login_wait'),
+  mode_chat: new Mode('chat', true),
+  mode_annotate: new Mode('annotate', true, true),
+  mode_play: new Mode('play'),
+  mode_study: new Mode('study', false, true),
+  mode_edit: new Mode('edit', false, false, false, true),
+  mode_control_pw_type: new Mode('control_pw_type',
+                                  false, false, false, true),
+  mode_portal: new Mode('portal', true, true),
+  mode_password: new Mode('password', true),
+  mode_admin: new Mode('admin', true),
+  mode_control_pw_pw: new Mode('control_pw_pw', true),
+  mode_control_tile_type: new Mode('control_tile_type',
+                                   false, false, false, true),
+  mode_control_tile_draw: new Mode('control_tile_draw'),
   init: function() {
+      this.mode_play.available_modes = ["chat", "study", "edit",
+                                        "annotate", "portal",
+                                        "password", "admin",
+                                        "control_pw_type",
+                                        "control_tile_type"]
+      this.mode_study.available_modes = ["chat", "play"]
+      this.mode_control_tile_draw.available_modes = ["play"]
+      this.mode = this.mode_waiting_for_server;
       this.inputEl = document.getElementById("input");
       this.inputEl.focus();
       this.recalc_input_lines();
@@ -418,15 +503,19 @@ let tui = {
         };
     };
   },
-  switch_mode: function(mode) {
+  switch_mode: function(mode_name) {
     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 = this['mode_' + mode_name];
+    if (game.player_id in game.things && (this.mode.shows_info || this.mode.name == 'control_tile_draw')) {
+        explorer.position = game.things[game.player_id].position;
+        if (this.mode.shows_info) {
+        explorer.query_info();
+        } else if (this.mode.name == 'control_tile_draw') {
+            explorer.send_tile_control_command();
+            this.map_mode = 'control';
+        }
     }
-    this.mode = mode;
     this.empty_input();
     this.restore_input_values();
     document.getElementById("take_thing").disabled = true;
@@ -442,7 +531,8 @@ let tui = {
     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").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;
@@ -451,7 +541,7 @@ let tui = {
     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) {
+    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') {
@@ -464,22 +554,22 @@ let tui = {
             document.getElementById("move_down").disabled = false;
         }
     }
-    if (!mode.is_intro && mode != mode_play) {
+    if (!this.mode.is_intro && this.mode.name != 'play') {
         document.getElementById("switch_to_play").disabled = false;
     }
-    if (!mode.is_intro && mode != mode_study) {
+    if (!this.mode.is_intro && this.mode.name != 'study') {
         document.getElementById("switch_to_study").disabled = false;
     }
-    if (!mode.is_intro && mode != mode_chat) {
+    if (!this.mode.is_intro && this.mode.name != 'chat') {
         document.getElementById("switch_to_chat").disabled = false;
     }
-    if (mode == mode_login) {
+    if (this.mode.name == 'login') {
         if (this.login_name) {
             server.send(['LOGIN', this.login_name]);
         } else {
             this.log_msg("? need login name");
         }
-    } else if (mode == mode_play) {
+    } else if (this.mode.name == 'play') {
         if (game.tasks.includes('PICK_UP')) {
             document.getElementById("take_thing").disabled = false;
         }
@@ -497,30 +587,33 @@ let tui = {
         document.getElementById("switch_to_portal").disabled = false;
         document.getElementById("switch_to_password").disabled = false;
         document.getElementById("switch_to_admin").disabled = false;
-        document.getElementById("switch_to_control_pw").disabled = false;
-    } else if (mode == mode_study) {
+        document.getElementById("switch_to_control_pw_type").disabled = false;
+        document.getElementById("switch_to_control_tile_type").disabled = false;
+    } else if (this.mode.name == 'study') {
         document.getElementById("toggle_map_mode").disabled = false;
-    } else if (mode.is_single_char_entry) {
+    } else if (this.mode.is_single_char_entry) {
         this.show_help = true;
-    } else if (mode == mode_admin) {
+    } else if (this.mode.name == 'admin') {
         this.log_msg('@ enter admin password:')
-    } else if (mode == mode_control_pw_pw) {
+    } else if (this.mode.name == 'control_pw_pw') {
+        this.log_msg('@ enter tile control password for "' + this.tile_control_char + '":');
+    } else if (this.mode.name == 'control_pw_pw') {
         this.log_msg('@ enter tile control password for "' + this.tile_control_char + '":');
     }
     this.full_refresh();
   },
   restore_input_values: function() {
-      if (this.mode == mode_annotate && explorer.position in explorer.info_db) {
+      if (this.mode.name == 'annotate' && explorer.position in explorer.info_db) {
           let info = explorer.info_db[explorer.position];
           if (info != "(none)") {
               this.inputEl.value = info;
               this.recalc_input_lines();
           }
-      } else if (this.mode == mode_portal && explorer.position in game.portals) {
+      } else if (this.mode.name == 'portal' && explorer.position in game.portals) {
           let portal = game.portals[explorer.position]
           this.inputEl.value = portal;
           this.recalc_input_lines();
-      } else if (this.mode == mode_password) {
+      } else if (this.mode.name == 'password') {
           this.inputEl.value = this.password;
           this.recalc_input_lines();
       }
@@ -600,7 +693,7 @@ let tui = {
             used_positions.push(t.position.toString());
         };
     }
-    if (tui.mode.shows_info) {
+    if (tui.mode.shows_info || tui.mode.name == 'control_tile_draw') {
         map_lines_split[explorer.position[0]][explorer.position[1]] = '??';
     }
     let map_lines = []
@@ -645,7 +738,7 @@ let tui = {
       if (this.mode.has_input_prompt) {
           help = 'enter /help for help';
       }
-      terminal.write(0, this.window_width, 'MODE: ' + this.mode.name + ' – ' + help);
+      terminal.write(0, this.window_width, 'MODE: ' + this.mode.short_desc + ' – ' + help);
   },
   draw_turn_line: function(n) {
     terminal.write(1, this.window_width, 'TURN: ' + game.turn);
@@ -677,8 +770,8 @@ let tui = {
   },
   draw_help: function() {
       let movement_keys_desc = Object.keys(this.movement_keys).join(',');
-      let content = this.mode.name + " mode help\n\n" + this.mode.help_intro + "\n\n";
-      if (this.mode == mode_play) {
+      let content = this.mode.short_desc + " help\n\n" + this.mode.help_intro + "\n\n";
+      if (this.mode.name == 'play') {
           content += "Available actions:\n";
           if (game.tasks.includes('MOVE')) {
               content += "[" + movement_keys_desc + "] – move player\n";
@@ -693,27 +786,18 @@ let tui = {
               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';
-          content += '[' + this.keys.switch_to_edit + '] – terrain edit mode\n';
-          content += '[' + this.keys.switch_to_portal + '] – portal edit mode\n';
-          content += '[' + this.keys.switch_to_annotate + '] – annotation mode\n';
-          content += '[' + this.keys.switch_to_password + '] – password input mode\n';
-          content += '[' + this.keys.switch_to_admin + '] – become admin\n';
-          content += '[' + this.keys.switch_to_control_pw + '] – change tile control password\n';
-      } else if (this.mode == mode_study) {
+          content += '\n';
+      } else if (this.mode.name == 'study') {
           content += "Available actions:\n";
           content += '[' + movement_keys_desc + '] – move question mark\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 += '\n';
+      } else if (this.mode.name == 'chat') {
           content += '/nick NAME – re-name yourself to NAME\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';
       }
+      content += this.mode.list_available_modes();
       let start_x = 0;
       if (!this.mode.has_input_prompt) {
           start_x = this.window_width
@@ -835,21 +919,25 @@ let explorer = {
         let target = game.move(this.position, direction);
         if (target) {
             this.position = target
-            this.query_info();
+            if (tui.mode.shows_info) {
+                this.query_info();
+            } else if (tui.mode.name == 'control_tile_draw') {
+                this.send_tile_control_command();
+            }
         } else {
             terminal.blink_screen();
         };
     },
     update_info_db: function(yx, str) {
         this.info_db[yx] = str;
-        if (tui.mode == mode_study) {
+        if (tui.mode.name == 'study') {
             tui.full_refresh();
         }
     },
     empty_info_db: function() {
         this.info_db = {};
         this.info_hints = [];
-        if (tui.mode == mode_study) {
+        if (tui.mode.name == 'study') {
             tui.full_refresh();
         }
     },
@@ -908,6 +996,9 @@ let explorer = {
             msg = " ";  // triggers portal deletion
         }
         server.send(["PORTAL", unparser.to_yx(explorer.position), msg, tui.password]);
+    },
+    send_tile_control_command: function() {
+        server.send(["SET_TILE_CONTROL", unparser.to_yx(this.position), tui.tile_control_char]);
     }
 }
 
@@ -918,12 +1009,15 @@ tui.inputEl.addEventListener('input', (event) => {
             tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
         };
         tui.recalc_input_lines();
-    } else if (tui.mode == mode_edit && tui.inputEl.value.length > 0) {
+    } else if (tui.mode.name == 'edit' && tui.inputEl.value.length > 0) {
         server.send(["TASK:WRITE", tui.inputEl.value[0], tui.password]);
-        tui.switch_mode(mode_play);
-    } else if (tui.mode == mode_control_pw_type && tui.inputEl.value.length > 0) {
+        tui.switch_mode('play');
+    } else if (tui.mode.name == 'control_pw_type' && tui.inputEl.value.length > 0) {
+        tui.tile_control_char = tui.inputEl.value[0];
+        tui.switch_mode('control_pw_pw');
+    } else if (tui.mode.name == 'control_tile_type' && tui.inputEl.value.length > 0) {
         tui.tile_control_char = tui.inputEl.value[0];
-        tui.switch_mode(mode_control_pw_pw);
+        tui.switch_mode('control_tile_draw');
     }
     tui.full_refresh();
 }, false);
@@ -939,41 +1033,41 @@ tui.inputEl.addEventListener('keydown', (event) => {
     } else if (!tui.mode.has_input_prompt && event.key == tui.keys.help
                && !tui.mode.is_single_char_entry) {
         tui.show_help = true;
-    } else if (tui.mode == mode_login && event.key == 'Enter') {
+    } else if (tui.mode.name == 'login' && event.key == 'Enter') {
         tui.login_name = tui.inputEl.value;
         server.send(['LOGIN', tui.inputEl.value]);
         tui.empty_input();
-    } else if (tui.mode == mode_control_pw_pw && event.key == 'Enter') {
+    } else if (tui.mode.name == 'control_pw_pw' && event.key == 'Enter') {
         if (tui.inputEl.value.length == 0) {
             tui.log_msg('@ aborted');
         } else {
             server.send(['SET_MAP_CONTROL_PASSWORD',
                         tui.tile_control_char, tui.inputEl.value]);
         }
-        tui.switch_mode(mode_play);
-    } else if (tui.mode == mode_portal && event.key == 'Enter') {
+        tui.switch_mode('play');
+    } else if (tui.mode.name == 'portal' && event.key == 'Enter') {
         explorer.set_portal(tui.inputEl.value);
-        tui.switch_mode(mode_play);
-    } else if (tui.mode == mode_annotate && event.key == 'Enter') {
+        tui.switch_mode('play');
+    } else if (tui.mode.name == 'annotate' && event.key == 'Enter') {
         explorer.annotate(tui.inputEl.value);
-        tui.switch_mode(mode_play);
-    } else if (tui.mode == mode_password && event.key == 'Enter') {
+        tui.switch_mode('play');
+    } else if (tui.mode.name == 'password' && event.key == 'Enter') {
         if (tui.inputEl.value.length == 0) {
             tui.inputEl.value = " ";
         }
         tui.password = tui.inputEl.value
-        tui.switch_mode(mode_play);
-    } else if (tui.mode == mode_admin && event.key == 'Enter') {
+        tui.switch_mode('play');
+    } else if (tui.mode.name == 'admin' && event.key == 'Enter') {
         server.send(['BECOME_ADMIN', tui.inputEl.value]);
-        tui.switch_mode(mode_play);
-    } else if (tui.mode == mode_chat && event.key == 'Enter') {
+        tui.switch_mode('play');
+    } else if (tui.mode.name == 'chat' && event.key == 'Enter') {
         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) {
-                    tui.switch_mode(mode_play);
+                    tui.switch_mode('play');
                 } else if (tokens[0].slice(1) == 'study' || tokens[0][1] == tui.keys.switch_to_study) {
-                    tui.switch_mode(mode_study);
+                    tui.switch_mode('study');
                 } else if (tokens[0].slice(1) == 'nick') {
                     if (tokens.length > 1) {
                         server.send(['NICK', tokens[1]]);
@@ -990,25 +1084,9 @@ tui.inputEl.addEventListener('keydown', (event) => {
 	        server.send(['ALL', tui.inputEl.value]);
         }
         tui.empty_input();
-    } else if (tui.mode == mode_play) {
-          if (event.key === tui.keys.switch_to_chat) {
-              event.preventDefault();
-              tui.switch_mode(mode_chat);
-          } else if (event.key === tui.keys.switch_to_edit
-                     && game.tasks.includes('WRITE')) {
-              event.preventDefault();
-              tui.switch_mode(mode_edit);
-          } else if (event.key === tui.keys.switch_to_study) {
-              tui.switch_mode(mode_study);
-          } else if (event.key === tui.keys.switch_to_admin) {
-              event.preventDefault();
-              tui.switch_mode(mode_admin);
-          } else if (event.key === tui.keys.switch_to_control_pw) {
-              event.preventDefault();
-              tui.switch_mode(mode_control_pw_type);
-          } else if (event.key === tui.keys.switch_to_password) {
-              event.preventDefault();
-              tui.switch_mode(mode_password);
+    } else if (tui.mode.name == 'play') {
+          if (tui.mode.mode_switch_on_key(event)) {
+              null;
           } else if (event.key === tui.keys.flatten
                      && game.tasks.includes('FLATTEN_SURROUNDINGS')) {
               server.send(["TASK:FLATTEN_SURROUNDINGS", tui.password]);
@@ -1025,17 +1103,14 @@ tui.inputEl.addEventListener('keydown', (event) => {
               game.teleport();
           } else if (event.key === tui.keys.switch_to_portal) {
               event.preventDefault();
-              tui.switch_mode(mode_portal);
+              tui.switch_mode('portal');
           } else if (event.key === tui.keys.switch_to_annotate) {
               event.preventDefault();
-              tui.switch_mode(mode_annotate);
+              tui.switch_mode('annotate');
           };
-    } else if (tui.mode == mode_study) {
-        if (event.key === tui.keys.switch_to_chat) {
-            event.preventDefault();
-            tui.switch_mode(mode_chat);
-        } else if (event.key == tui.keys.switch_to_play) {
-            tui.switch_mode(mode_play);
+    } else if (tui.mode.name == 'study') {
+        if (tui.mode.mode_switch_on_key(event)) {
+              null;
         } else if (event.key in tui.movement_keys) {
             explorer.move(tui.movement_keys[event.key]);
         } else if (event.key == tui.keys.toggle_map_mode) {
@@ -1047,6 +1122,12 @@ tui.inputEl.addEventListener('keydown', (event) => {
                 tui.map_mode = 'terrain';
             }
         };
+    } else if (tui.mode.name == 'control_tile_draw') {
+        if (tui.mode.mode_switch_on_key(event)) {
+              null;
+        } else if (event.key in tui.movement_keys) {
+            explorer.move(tui.movement_keys[event.key]);
+        };
     }
     tui.full_refresh();
 }, false);
@@ -1090,39 +1171,43 @@ document.getElementById("help").onclick = function() {
     tui.full_refresh();
 };
 document.getElementById("switch_to_play").onclick = function() {
-    tui.switch_mode(mode_play);
+    tui.switch_mode('play');
     tui.full_refresh();
 };
 document.getElementById("switch_to_study").onclick = function() {
-    tui.switch_mode(mode_study);
+    tui.switch_mode('study');
     tui.full_refresh();
 };
 document.getElementById("switch_to_chat").onclick = function() {
-    tui.switch_mode(mode_chat);
+    tui.switch_mode('chat');
     tui.full_refresh();
 };
 document.getElementById("switch_to_password").onclick = function() {
-    tui.switch_mode(mode_password);
+    tui.switch_mode('password');
     tui.full_refresh();
 };
 document.getElementById("switch_to_edit").onclick = function() {
-    tui.switch_mode(mode_edit);
+    tui.switch_mode('edit');
     tui.full_refresh();
 };
 document.getElementById("switch_to_annotate").onclick = function() {
-    tui.switch_mode(mode_annotate);
+    tui.switch_mode('annotate');
     tui.full_refresh();
 };
 document.getElementById("switch_to_portal").onclick = function() {
-    tui.switch_mode(mode_portal);
+    tui.switch_mode('portal');
     tui.full_refresh();
 };
 document.getElementById("switch_to_admin").onclick = function() {
-    tui.switch_mode(mode_admin);
+    tui.switch_mode('admin');
+    tui.full_refresh();
+};
+document.getElementById("switch_to_control_pw_type").onclick = function() {
+    tui.switch_mode('control_pw_type');
     tui.full_refresh();
 };
-document.getElementById("switch_to_control_pw").onclick = function() {
-    tui.switch_mode(mode_control_pw_type);
+document.getElementById("switch_to_control_tile_type").onclick = function() {
+    tui.switch_mode('control_tile_type');
     tui.full_refresh();
 };
 document.getElementById("toggle_map_mode").onclick = function() {
@@ -1148,56 +1233,56 @@ document.getElementById("teleport").onclick = function() {
     game.teleport();
 };
 document.getElementById("move_upleft").onclick = function() {
-    if (tui.mode == mode_play) {
+    if (tui.mode.name == 'play') {
         server.send(['TASK:MOVE', 'UPLEFT']);
     } else {
         explorer.move('UPLEFT');
     };
 };
 document.getElementById("move_left").onclick = function() {
-    if (tui.mode == mode_play) {
+    if (tui.mode.name == 'play') {
         server.send(['TASK:MOVE', 'LEFT']);
     } else {
         explorer.move('LEFT');
     };
 };
 document.getElementById("move_downleft").onclick = function() {
-    if (tui.mode == mode_play) {
+    if (tui.mode.name == 'play') {
         server.send(['TASK:MOVE', 'DOWNLEFT']);
     } else {
         explorer.move('DOWNLEFT');
     };
 };
 document.getElementById("move_down").onclick = function() {
-    if (tui.mode == mode_play) {
+    if (tui.mode.name == 'play') {
         server.send(['TASK:MOVE', 'DOWN']);
     } else {
         explorer.move('DOWN');
     };
 };
 document.getElementById("move_up").onclick = function() {
-    if (tui.mode == mode_play) {
+    if (tui.mode.name == 'play') {
         server.send(['TASK:MOVE', 'UP']);
     } else {
         explorer.move('UP');
     };
 };
 document.getElementById("move_upright").onclick = function() {
-    if (tui.mode == mode_play) {
+    if (tui.mode.name == 'play') {
         server.send(['TASK:MOVE', 'UPRIGHT']);
     } else {
         explorer.move('UPRIGHT');
     };
 };
 document.getElementById("move_right").onclick = function() {
-    if (tui.mode == mode_play) {
+    if (tui.mode.name == 'play') {
         server.send(['TASK:MOVE', 'RIGHT']);
     } else {
         explorer.move('RIGHT');
     };
 };
 document.getElementById("move_downright").onclick = function() {
-    if (tui.mode == mode_play) {
+    if (tui.mode.name == 'play') {
         server.send(['TASK:MOVE', 'DOWNRIGHT']);
     } else {
         explorer.move('DOWNRIGHT');