home · contact · privacy
More mode code refactoring.
[plomrogue2] / rogue_chat_nocanvas_monochrome.html
index ab3ce34b1a65df612a176204f24f0dc09823f1fa..7928e2412f8b6c2acfd3006dad58bb0c164a0e95 100644 (file)
 </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 />
-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 />
+<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>
+<button id="switch_to_admin">become admin</button>
+<button id="switch_to_control_pw_type">change tile control password</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>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>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 = "ws://localhost:8000";
+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': '',
+        '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.'
+    },
+    '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': '',
+        'long': 'Pick your player name.'
+    },
+    'waiting_for_server': {
+        'short': '',
+        'long': 'Waiting for a server response.'
+    },
+    'post_login_wait': {
+        'short': '',
+        '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");
@@ -113,7 +201,6 @@ terminal.initialize();
 
 let parser = {
   tokenize: function(str) {
-    let token_ends = [];
     let tokens = [];
     let token = ''
     let quoted = false;
@@ -135,7 +222,6 @@ let parser = {
         quoted = true
       } else if (c === ' ') {
         if (token.length > 0) {
-          token_ends.push(i);
           tokens.push(token);
           token = '';
         }
@@ -146,11 +232,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(',')
@@ -172,19 +254,22 @@ let server = {
         this.url = url;
         this.websocket = new WebSocket(this.url);
         this.websocket.onopen = function(event) {
-            window.setInterval(function() { server.send(['PING']) }, 30000);
+            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);
+            tui.switch_mode('login');
         };
         this.websocket.onclose = function(event) {
+            server.connected = false;
+            tui.switch_mode('waiting_for_server');
             tui.log_msg("@ server disconnected :(");
-            tui.log_msg("@ hint: try the '/reconnect' command");
         };
            this.websocket.onmessage = this.handle_event;
         },
-    reconnect: function() {
-          this.reconnect_to(this.url);
-    },
     reconnect_to: function(url) {
         this.websocket.close();
         this.init(url);
@@ -193,36 +278,50 @@ 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]);
-        } else if (tokens[0] === 'THING_POS') {
-            game.get_thing(tokens[1], true).position = parser.parse_yx(tokens[2]);
+        } else if (tokens[0] === 'THING') {
+            let t = game.get_thing(tokens[3], true);
+            t.position = parser.parse_yx(tokens[1]);
+            t.type_ = tokens[2];
         } else if (tokens[0] === 'THING_NAME') {
-            game.get_thing(tokens[1], true).name_ = tokens[2];
+            let t = game.get_thing(tokens[1], false);
+            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(',');
+            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') {
+            game.terrains[tokens[1]] = tokens[2]
         } else if (tokens[0] === 'MAP') {
             game.map_geometry = tokens[1];
             tui.init_keys();
             game.map_size = parser.parse_yx(tokens[2]);
             game.map = tokens[3]
+        } else if (tokens[0] === 'FOV') {
+            game.fov = tokens[1]
+        } else if (tokens[0] === 'MAP_CONTROL') {
+            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);
-                tui.log_help();
-            } 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();
             }
-            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);
@@ -230,23 +329,29 @@ 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];
+        } 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]);
         } else if (tokens[0] === 'GAME_ERROR') {
             tui.log_msg('? game error: ' + tokens[1]);
         } else if (tokens[0] === 'PONG') {
-            console.log('PONG');
+            ;
         } else {
             tui.log_msg('? unhandled input: ' + event.data);
         }
@@ -279,26 +384,50 @@ let unparser = {
 }
 
 class Mode {
-    constructor(name, has_input_prompt=false, shows_info=false, is_intro=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 = 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', false, false, true);
-let mode_login = new Mode('login', true, false, true);
-let mode_post_login_wait = new Mode('waiting for game world', false, false, true);
-let mode_chat = new Mode('chat / write messages to players', true, false);
-let mode_annotate = new Mode('add message to map tile', true, true);
-let mode_play = new Mode('play / move around', false, false);
-let mode_study = new Mode('check map tiles for messages', false, true);
-let mode_edit = new Mode('write ASCII char to map tile', false, false);
-let mode_teleport = new Mode('teleport away?', true);
-let mode_portal = new Mode('add portal to map tile', true, true);
-
 let tui = {
-  mode: mode_waiting_for_server,
   log: [],
   input_prompt: '> ',
   input_lines: [],
@@ -306,7 +435,30 @@ let tui = {
   height_turn_line: 1,
   height_mode_line: 1,
   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),
   init: function() {
+      this.mode_play.available_modes = ["chat", "study", "edit",
+                                        "annotate", "portal",
+                                        "password", "admin",
+                                        "control_pw_type"]
+      this.mode_study.available_modes = ["chat", "play"]
+      this.mode = this.mode_waiting_for_server;
       this.inputEl = document.getElementById("input");
       this.inputEl.focus();
       this.recalc_input_lines();
@@ -319,14 +471,13 @@ let tui = {
     for (let key_selector of key_selectors) {
         this.keys[key_selector.id.slice(4)] = key_selector.value;
     }
-    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'
-        };
-    } else if (game.map_geometry == 'Hex') {
+    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') {
         this.movement_keys = {
             [this.keys.hex_move_upleft]: 'UPLEFT',
             [this.keys.hex_move_upright]: 'UPRIGHT',
@@ -337,35 +488,112 @@ let tui = {
         };
     };
   },
-  switch_mode: function(mode, keep_pos=false) {
-    if (mode == mode_study && !keep_pos && game.player_id in game.things) {
+  switch_mode: function(mode_name) {
+    this.inputEl.focus();
+    this.map_mode = 'terrain';
+    this.mode = this['mode_' + mode_name];
+    if (this.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();
-    if (mode == mode_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();
+    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("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 (this.mode.name == 'play' || this.mode.name == '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 == mode_login) {
+    if (!this.mode.is_intro && this.mode.name != 'play') {
+        document.getElementById("switch_to_play").disabled = false;
+    }
+    if (!this.mode.is_intro && this.mode.name != 'study') {
+        document.getElementById("switch_to_study").disabled = false;
+    }
+    if (!this.mode.is_intro && this.mode.name != 'chat') {
+        document.getElementById("switch_to_chat").disabled = false;
+    }
+    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_portal && explorer.position in game.portals) {
-        let portal = game.portals[explorer.position]
-        this.inputEl.value = portal;
-        this.recalc_input_lines();
-    } else if (mode == mode_teleport) {
-        tui.log_msg("@ May teleport to: " + tui.teleport_target);
-        tui.log_msg("@ Enter 'YES!' to entusiastically affirm.");
+    } else if (this.mode.name == '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;
+        document.getElementById("switch_to_admin").disabled = false;
+        document.getElementById("switch_to_control_pw_type").disabled = false;
+    } else if (this.mode.name == 'study') {
+        document.getElementById("toggle_map_mode").disabled = false;
+    } else if (this.mode.is_single_char_entry) {
+        this.show_help = true;
+    } else if (this.mode.name == 'admin') {
+        this.log_msg('@ enter admin password:')
+    } 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.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.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.name == 'password') {
+          this.inputEl.value = this.password;
+          this.recalc_input_lines();
+      }
+  },
   empty_input: function(str) {
       this.inputEl.value = "";
       if (this.mode.has_input_prompt) {
@@ -401,54 +629,58 @@ let tui = {
       };
       this.full_refresh();
   },
-  log_help: function() {
-    let movement_keys_desc = Object.keys(this.movement_keys).join(',');
-    this.log_msg("HELP:");
-    this.log_msg("chat mode commands:");
-    this.log_msg("  /nick NAME - re-name yourself to NAME");
-    this.log_msg("  /msg USER TEXT - send TEXT to USER");
-    this.log_msg("  /help - show this help");
-    this.log_msg("  /" + this.keys.switch_to_play + " or /play - switch to play mode");
-    this.log_msg("  /" + this.keys.switch_to_study + " or /study - switch to study mode");
-    this.log_msg("commands common to study and play mode:");
-    this.log_msg("  " + movement_keys_desc + " - move");
-    this.log_msg("  " + this.keys.switch_to_chat + " - switch to chat mode");
-    this.log_msg("commands specific to play mode:");
-    this.log_msg("  " + this.keys.switch_to_edit + " - write following ASCII character");
-    this.log_msg("  " + this.keys.flatten + " - flatten surroundings");
-    this.log_msg("  " + this.keys.switch_to_study + " - switch to study mode");
-    this.log_msg("commands specific to study mode:");
-    this.log_msg("  " + this.keys.switch_to_annotate + " - annotate terrain");
-    this.log_msg("  " + this.keys.switch_to_play + " - switch to play mode");
-  },
   draw_map: function() {
     let map_lines_split = [];
     let line = [];
+    let map_content = game.map;
+    if (this.map_mode == 'control') {
+        map_content = game.map_control;
+    }
     for (let i = 0, j = 0; i < game.map.length; i++, j++) {
         if (j == game.map_size[1]) {
             map_lines_split.push(line);
             line = [];
             j = 0;
         };
-        line.push(game.map[i]);
+        line.push(map_content[i] + ' ');
     };
     map_lines_split.push(line);
-    for (const thing_id in game.things) {
-        let t = game.things[thing_id];
-        map_lines_split[t.position[0]][t.position[1]] = '@';
-    };
+    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())) {
+                meta_char = '+';
+            };
+            map_lines_split[t.position[0]][t.position[1]] = symbol + meta_char;
+            used_positions.push(t.position.toString());
+        };
+    }
     if (tui.mode.shows_info) {
-        map_lines_split[explorer.position[0]][explorer.position[1]] = '?';
+        map_lines_split[explorer.position[0]][explorer.position[1]] = '??';
     }
     let map_lines = []
     if (game.map_geometry == 'Square') {
         for (let line_split of map_lines_split) {
-            map_lines.push(line_split.join(' '));
+            map_lines.push(line_split.join(''));
         };
     } else if (game.map_geometry == 'Hex') {
         let indent = 0
         for (let line_split of map_lines_split) {
-            map_lines.push(' '.repeat(indent) + line_split.join(' '));
+            map_lines.push(' '.repeat(indent) + line_split.join(''));
             if (indent == 0) {
                 indent = 1;
             } else {
@@ -478,7 +710,11 @@ let tui = {
     }
   },
   draw_mode_line: function() {
-      terminal.write(0, this.window_width, 'MODE: ' + this.mode.name);
+      let help = 'hit [' + this.keys.help + '] for help';
+      if (this.mode.has_input_prompt) {
+          help = 'enter /help for help';
+      }
+      terminal.write(0, this.window_width, 'MODE: ' + this.mode.name + ' – ' + help);
   },
   draw_turn_line: function(n) {
     terminal.write(1, this.window_width, 'TURN: ' + game.turn);
@@ -508,6 +744,46 @@ 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.name == 'play') {
+          content += "Available actions:\n";
+          if (game.tasks.includes('MOVE')) {
+              content += "[" + movement_keys_desc + "] – move player\n";
+          }
+          if (game.tasks.includes('PICK_UP')) {
+              content += "[" + this.keys.take_thing + "] – take thing under player\n";
+          }
+          if (game.tasks.includes('DROP')) {
+              content += "[" + this.keys.drop_thing + "] – drop carried thing\n";
+          }
+          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 += '\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 += '\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
+      }
+      terminal.drawBox(0, start_x, terminal.rows, this.window_width);
+      let lines = this.msg_into_lines_of_width(content, this.window_width);
+      for (let y = 0, i = 0; y < terminal.rows && i < lines.length; y++, i++) {
+          terminal.write(y, start_x, lines[i]);
+      }
+  },
   full_refresh: function() {
     terminal.drawBox(0, 0, terminal.rows, terminal.cols);
     if (this.mode.is_intro) {
@@ -526,6 +802,9 @@ let tui = {
         }
         this.draw_input();
     }
+    if (this.show_help) {
+        this.draw_help();
+    }
     terminal.refresh();
   }
 }
@@ -535,9 +814,11 @@ let game = {
         this.things = {};
         this.turn = -1;
         this.map = "";
+        this.map_control = "";
         this.map_size = [0,0];
         this.player_id = -1;
         this.portals = {};
+        this.tasks = {};
     },
     get_thing: function(id_, create_if_not_found=false) {
         if (id_ in game.things) {
@@ -589,6 +870,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')
+        }
     }
 }
 
@@ -600,25 +890,26 @@ 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) {
             this.position = target
             this.query_info();
-            tui.full_refresh();
         } 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 = {};
-        if (tui.mode == mode_study) {
+        this.info_hints = [];
+        if (tui.mode.name == 'study') {
             tui.full_refresh();
         }
     },
@@ -626,15 +917,32 @@ let explorer = {
         server.send(["GET_ANNOTATION", unparser.to_yx(explorer.position)]);
     },
     get_info: function() {
-        let info = "";
         let position_i = this.position[0] * game.map_size[1] + this.position[1];
-        info += "TERRAIN: " + game.map[position_i] + "\n";
+        if (game.fov[position_i] != '.') {
+            return 'outside field of view';
+        };
+        let info = "";
+        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 += "PLAYER @";
+                 let symbol = game.thing_types[t.type_];
+                 info += "THING: " + t.type_ + " / " + symbol;
+                 if (t.player_char) {
+                     info += t.player_char;
+                 };
                  if (t.name_) {
-                     info += ": " + t.name_;
+                     info += " (" + t.name_ + ")";
                  }
                  info += "\n";
              }
@@ -653,13 +961,13 @@ let explorer = {
         if (msg.length == 0) {
             msg = " ";  // triggers annotation deletion
         }
-        server.send(["ANNOTATE", unparser.to_yx(explorer.position), msg]);
+        server.send(["ANNOTATE", unparser.to_yx(explorer.position), msg, tui.password]);
     },
     set_portal: function(msg) {
         if (msg.length == 0) {
             msg = " ";  // triggers portal deletion
         }
-        server.send(["PORTAL", unparser.to_yx(explorer.position), msg]);
+        server.send(["PORTAL", unparser.to_yx(explorer.position), msg, tui.password]);
     }
 }
 
@@ -670,114 +978,124 @@ tui.inputEl.addEventListener('input', (event) => {
             tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
         };
         tui.recalc_input_lines();
-        tui.full_refresh();
-    } else if (tui.mode == mode_edit && tui.inputEl.value.length > 0) {
-        server.send(["TASK:WRITE", tui.inputEl.value[0]]);
-        tui.switch_mode(mode_play);
-    } else if (tui.mode == mode_teleport) {
-        if (['Y', 'y'].includes(tui.inputEl.value[0])) {
-            server.reconnect_to(tui.teleport_target);
-       } else {
-            tui.log_msg("@ teleportation aborted");
-            tui.switch_mode(mode_play);
-       }
+    } else if (tui.mode.name == 'edit' && tui.inputEl.value.length > 0) {
+        server.send(["TASK:WRITE", tui.inputEl.value[0], tui.password]);
+        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');
     }
+    tui.full_refresh();
 }, false);
 tui.inputEl.addEventListener('keydown', (event) => {
+    tui.show_help = false;
     if (event.key == 'Enter') {
         event.preventDefault();
     }
-    if (tui.mode == mode_login && event.key == 'Enter') {
+    if (tui.mode.has_input_prompt && event.key == 'Enter' && tui.inputEl.value == '/help') {
+        tui.show_help = true;
+        tui.empty_input();
+        tui.restore_input_values();
+    } 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.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_portal && 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('play');
+    } else if (tui.mode.name == 'portal' && event.key == 'Enter') {
         explorer.set_portal(tui.inputEl.value);
-        tui.switch_mode(mode_study, true);
-    } 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_study, true);
-    } 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);
+        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('play');
+    } else if (tui.mode.name == 'admin' && event.key == 'Enter') {
+        server.send(['BECOME_ADMIN', tui.inputEl.value]);
+        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);
-                } else if (tokens[0].slice(1) == 'help') {
-                    tui.log_help();
+                    tui.switch_mode('study');
                 } else if (tokens[0].slice(1) == 'nick') {
                     if (tokens.length > 1) {
-                        server.send(['LOGIN', tokens[1]]);
-                    } else {
-                        tui.log_msg('? need login 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]);
+                        server.send(['NICK', tokens[1]]);
                     } else {
-                        tui.log_msg('? need message target and message');
+                        tui.log_msg('? need new name');
                     }
-                } else if (tokens[0].slice(1) == 'reconnect') {
-                   if (tokens.length > 1) {
-                        server.reconnect_to(tokens[1]);
-                   } else {
-                        server.reconnect();
-                   }
                 } else {
                     tui.log_msg('? unknown command');
                 }
-           } else {
-               server.send(['ALL', tui.inputEl.value]);
+            } else {
+                   server.send(['ALL', tui.inputEl.value]);
             }
-       } else if (tui.inputEl.valuelength > 0) {
-           server.send(['ALL', tui.inputEl.value]);
+        } else if (tui.inputEl.valuelength > 0) {
+               server.send(['ALL', tui.inputEl.value]);
         }
         tui.empty_input();
-        tui.full_refresh();
-      } else if (tui.mode == mode_play) {
-          if (event.key === tui.keys.switch_to_chat) {
+    } 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]);
+          } else if (event.key === tui.keys.take_thing
+                     && game.tasks.includes('PICK_UP')) {
+              server.send(["TASK:PICK_UP"]);
+          } else if (event.key === tui.keys.drop_thing
+                     && game.tasks.includes('DROP')) {
+              server.send(["TASK:DROP"]);
+          } 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_chat);
-          } else if (event.key === tui.keys.switch_to_edit) {
+              tui.switch_mode('portal');
+          } else if (event.key === tui.keys.switch_to_annotate) {
               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.flatten) {
-              server.send(["TASK:FLATTEN_SURROUNDINGS"]);
-          } else if (event.key in tui.movement_keys) {
-              server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
+              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 (tui.mode.name == 'study') {
+        if (tui.mode.mode_switch_on_key(event)) {
+              null;
         } else if (event.key == tui.keys.switch_to_play) {
-            tui.switch_mode(mode_play);
-        } else if (event.key === tui.keys.switch_to_portal) {
-            event.preventDefault();
-            tui.switch_mode(mode_portal);
+            tui.switch_mode('play');
         } else if (event.key in tui.movement_keys) {
             explorer.move(tui.movement_keys[event.key]);
-        } else if (event.key === tui.keys.switch_to_annotate) {
-          event.preventDefault();
-          tui.switch_mode(mode_annotate);
+        } 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';
+            }
         };
     }
+    tui.full_refresh();
 }, 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);
@@ -785,7 +1103,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);
@@ -800,10 +1118,133 @@ for (let key_selector of key_selectors) {
     }, false);
 }
 window.setInterval(function() {
-    if (!(['input', 'n_cols', 'n_rows'].includes(document.activeElement.id)
-          || document.activeElement.id.startsWith('key_'))) {
-        tui.inputEl.focus();
+    if (server.connected) {
+        server.send(['PING']);
+    } else {
+        server.reconnect_to(server.url);
+        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('play');
+    tui.full_refresh();
+};
+document.getElementById("switch_to_study").onclick = function() {
+    tui.switch_mode('study');
+    tui.full_refresh();
+};
+document.getElementById("switch_to_chat").onclick = function() {
+    tui.switch_mode('chat');
+    tui.full_refresh();
+};
+document.getElementById("switch_to_password").onclick = function() {
+    tui.switch_mode('password');
+    tui.full_refresh();
+};
+document.getElementById("switch_to_edit").onclick = function() {
+    tui.switch_mode('edit');
+    tui.full_refresh();
+};
+document.getElementById("switch_to_annotate").onclick = function() {
+    tui.switch_mode('annotate');
+    tui.full_refresh();
+};
+document.getElementById("switch_to_portal").onclick = function() {
+    tui.switch_mode('portal');
+    tui.full_refresh();
+};
+document.getElementById("switch_to_admin").onclick = function() {
+    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("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';
     }
-}, 100);
+    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.name == 'play') {
+        server.send(['TASK:MOVE', 'UPLEFT']);
+    } else {
+        explorer.move('UPLEFT');
+    };
+};
+document.getElementById("move_left").onclick = function() {
+    if (tui.mode.name == 'play') {
+        server.send(['TASK:MOVE', 'LEFT']);
+    } else {
+        explorer.move('LEFT');
+    };
+};
+document.getElementById("move_downleft").onclick = function() {
+    if (tui.mode.name == 'play') {
+        server.send(['TASK:MOVE', 'DOWNLEFT']);
+    } else {
+        explorer.move('DOWNLEFT');
+    };
+};
+document.getElementById("move_down").onclick = function() {
+    if (tui.mode.name == 'play') {
+        server.send(['TASK:MOVE', 'DOWN']);
+    } else {
+        explorer.move('DOWN');
+    };
+};
+document.getElementById("move_up").onclick = function() {
+    if (tui.mode.name == 'play') {
+        server.send(['TASK:MOVE', 'UP']);
+    } else {
+        explorer.move('UP');
+    };
+};
+document.getElementById("move_upright").onclick = function() {
+    if (tui.mode.name == 'play') {
+        server.send(['TASK:MOVE', 'UPRIGHT']);
+    } else {
+        explorer.move('UPRIGHT');
+    };
+};
+document.getElementById("move_right").onclick = function() {
+    if (tui.mode.name == 'play') {
+        server.send(['TASK:MOVE', 'RIGHT']);
+    } else {
+        explorer.move('RIGHT');
+    };
+};
+document.getElementById("move_downright").onclick = function() {
+    if (tui.mode.name == 'play') {
+        server.send(['TASK:MOVE', 'DOWNRIGHT']);
+    } else {
+        explorer.move('DOWNRIGHT');
+    };
+};
 </script>
 </body></html>