home · contact · privacy
Shorten web client HTML file name.
authorChristian Heller <c.heller@plomlompom.de>
Tue, 24 Nov 2020 23:07:19 +0000 (00:07 +0100)
committerChristian Heller <c.heller@plomlompom.de>
Tue, 24 Nov 2020 23:07:19 +0000 (00:07 +0100)
rogue_chat.html [new file with mode: 0644]
rogue_chat_nocanvas_monochrome.html [deleted file]

diff --git a/rogue_chat.html b/rogue_chat.html
new file mode 100644 (file)
index 0000000..59d03a9
--- /dev/null
@@ -0,0 +1,1424 @@
+<!DOCTYPE html>
+<html><head>
+<style>
+  pre {
+      display: inline-block;
+  }
+  pre a {
+      color: white;
+  }
+</style>
+</head><body>
+<div>
+terminal rows: <input id="n_rows" type="number" step=4 min=24 value=24 />
+terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
+</div>
+<pre id="terminal"></pre>
+<textarea id="input" style="opacity: 0; width: 0px;"></textarea>
+<div>
+<a href="https://plomlompom.com/repos/?p=plomrogue2;a=summary">source code</a> (includes proper terminal / curses client)
+<h3>button controls for mouse players</h3>
+<table style="float: left">
+  <tr>
+    <td style="text-align: right"><button id="move_upleft">up-left</button></td>
+    <td style="text-align: center"><button id="move_up">up</button></td>
+    <td><button id="move_upright">up-right</button></td>
+  </tr>
+  <tr>
+    <td style="text-align: right;"><button id="move_left">left</button></td>
+    <td stlye="text-align: center;">move</td>
+    <td><button id="move_right">right</button></td>
+  </tr>
+  <tr>
+    <td><button id="move_downleft">down-left</button></td>
+    <td style="text-align: center"><button id="move_down">down</button></td>
+    <td><button id="move_downright">down-right</button></td>
+  </tr>
+</table>
+<table>
+  <tr>
+    <td><button id="help">help</button></td>
+  </tr>
+  <tr>
+    <td><button id="switch_to_chat">chat mode</button><br /></td>
+  </tr>
+    <td><button id="switch_to_study">study mode</button></td>
+    <td><button id="toggle_map_mode">toggle terrain/annotations/control view</button>
+  <tr>
+    <td><button id="switch_to_play">play mode</button></td>
+    <td>
+      <table>
+        <tr>
+          <td><button id="take_thing">take thing</button></td>
+          <td><button id="switch_to_edit">change tile</button></td>
+          <td><button id="switch_to_admin">become admin</button></td>
+        </tr>
+        <tr>
+          <td><button id="drop_thing">drop thing</button></td>
+          <td><button id="switch_to_password">change tile editing password</button></td>
+          <td><button id="switch_to_control_pw_type">change tile control password</button></td>
+        </tr>
+        <tr>
+          <td><button id="flatten">flatten surroundings</button></td>
+          <td><button id="switch_to_annotate">annotate tile</button></td>
+          <td><button id="switch_to_control_tile_type">change tiles control</button></td>
+        </tr>
+        <tr>
+          <td><button id="teleport">teleport</button></td>
+          <td><button id="switch_to_portal">edit portal link</button></td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>
+<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><input id="key_switch_to_chat" type="text" value="t" />
+<li><input id="key_switch_to_play" type="text" value="p" />
+<li><input id="key_switch_to_study" type="text" value="?" />
+<li><input id="key_switch_to_edit" type="text" value="m" />
+<li><input id="key_switch_to_password" type="text" value="P" />
+<li><input id="key_switch_to_admin" type="text" value="A" />
+<li><input id="key_switch_to_control_pw_type" type="text" value="C" />
+<li><input id="key_switch_to_control_tile_type" type="text" value="Q" />
+<li><input id="key_switch_to_annotate" type="text" value="M" />
+<li><input id="key_switch_to_portal" type="text" value="T" />
+<li>toggle terrain/annotations/control view: <input id="key_toggle_map_mode" type="text" value="M" />
+</ul>
+</div>
+<script>
+"use strict";
+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 tiles control password',
+        'long': 'This mode is the first of two steps to change the password for a tile control character.  First enter the tile control character for which you want to change the password!'
+    },
+    'control_pw_pw': {
+        'short': 'change tiles control password',
+        'long': 'This mode is the second of two steps to change the password for a tile control character.  Enter the new password for the tile control character you chose.'
+    },
+    'control_tile_type': {
+        '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': 'annotate tile',
+        'long': 'This mode allows you to add/edit a comment on the tile you are currently standing on (provided your map editing password authorizes you so).  Hit Return to leave.'
+    },
+    'portal': {
+        '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',
+        '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': 'map edit password',
+        '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_"]');
+
+for (const key_switch_selector of document.querySelectorAll('[id^="key_switch_to_"]')) {
+    const action = key_switch_selector.id.slice("key_switch_to_".length);
+    key_switch_selector.parentNode.prepend(mode_helps[action].short + ': ');
+}
+
+function restore_selector_value(selector) {
+    let stored_selection = window.localStorage.getItem(selector.id);
+    if (stored_selection) {
+        selector.value = stored_selection;
+    }
+}
+restore_selector_value(rows_selector);
+restore_selector_value(cols_selector);
+for (let key_selector of key_selectors) {
+    restore_selector_value(key_selector);
+}
+
+let terminal = {
+  foreground: 'white',
+  background: 'black',
+  initialize: function() {
+    this.rows = rows_selector.value;
+    this.cols = cols_selector.value;
+    this.pre_el = document.getElementById("terminal");
+    this.pre_el.style.color = this.foreground;
+    this.pre_el.style.backgroundColor = this.background;
+    this.content = [];
+      let line = []
+    for (let y = 0, x = 0; y <= this.rows; x++) {
+        if (x == this.cols) {
+            x = 0;
+            y += 1;
+            this.content.push(line);
+            line = [];
+            if (y == this.rows) {
+                break;
+            }
+        }
+        line.push(' ');
+    }
+  },
+  blink_screen: function() {
+      this.pre_el.style.color = this.background;
+      this.pre_el.style.backgroundColor = this.foreground;
+      setTimeout(() => {
+          this.pre_el.style.color = this.foreground;
+          this.pre_el.style.backgroundColor = this.background;
+      }, 100);
+  },
+  refresh: function() {
+      function escapeHTML(str) {
+          return str.
+              replace(/&/g, '&amp;').
+              replace(/</g, '&lt;').
+              replace(/>/g, '&gt;').
+              replace(/'/g, '&apos;').
+              replace(/"/g, '&quot;');
+      };
+      let pre_content = '';
+      for (let y = 0; y < this.rows; y++) {
+          let line = this.content[y].join('');
+          let chunks = [];
+          if (y in tui.links) {
+              let start_x = 0;
+              for (let span of tui.links[y]) {
+                  chunks.push(escapeHTML(line.slice(start_x, span[0])));
+                  chunks.push('<a href="');
+                  chunks.push(escapeHTML(span[2]));
+                  chunks.push('">');
+                  chunks.push(escapeHTML(line.slice(span[0], span[1])));
+                  chunks.push('</a>');
+                  start_x = span[1];
+              }
+              chunks.push(escapeHTML(line.slice(start_x)));
+          } else {
+              chunks = [escapeHTML(line)];
+          }
+          for (const chunk of chunks) {
+              pre_content += chunk;
+          }
+          pre_content += '\n';
+      }
+      this.pre_el.innerHTML = pre_content;
+  },
+  write: function(start_y, start_x, msg) {
+      for (let x = start_x, i = 0; x < this.cols && i < msg.length; x++, i++) {
+          this.content[start_y][x] = msg[i];
+      }
+  },
+  drawBox: function(start_y, start_x, height, width) {
+    let end_y = start_y + height;
+    let end_x = start_x + width;
+    for (let y = start_y, x = start_x; y < this.rows; x++) {
+      if (x == end_x) {
+        x = start_x;
+        y += 1;
+        if (y == end_y) {
+            break;
+        }
+      };
+      this.content[y][x] = ' ';
+    }
+  },
+}
+terminal.initialize();
+
+let parser = {
+  tokenize: function(str) {
+    let tokens = [];
+    let token = ''
+    let quoted = false;
+    let escaped = false;
+    for (let i = 0; i < str.length; i++) {
+      let c = str[i];
+      if (quoted) {
+        if (escaped) {
+          token += c;
+          escaped = false;
+        } else if (c == '\\') {
+          escaped = true;
+        } else if (c == '"') {
+          quoted = false
+        } else {
+          token += c;
+        }
+      } else if (c == '"') {
+        quoted = true
+      } else if (c === ' ') {
+        if (token.length > 0) {
+          tokens.push(token);
+          token = '';
+        }
+      } else {
+        token += c;
+      }
+    }
+    if (token.length > 0) {
+      tokens.push(token);
+    }
+    return tokens;
+  },
+  parse_yx: function(position_string) {
+    let coordinate_strings = position_string.split(',')
+    let position = [0, 0];
+    position[0] = parseInt(coordinate_strings[0].slice(2));
+    position[1] = parseInt(coordinate_strings[1].slice(2));
+    return position;
+  },
+}
+
+class Thing {
+    constructor(yx) {
+        this.position = yx;
+    }
+}
+
+let server = {
+    init: function(url) {
+        this.url = url;
+        this.websocket = new WebSocket(this.url);
+        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('login');
+        };
+        this.websocket.onclose = function(event) {
+            server.connected = false;
+            tui.switch_mode('waiting_for_server');
+            tui.log_msg("@ server disconnected :(");
+        };
+           this.websocket.onmessage = this.handle_event;
+        },
+    reconnect_to: function(url) {
+        this.websocket.close();
+        this.init(url);
+    },
+    send: function(tokens) {
+        this.websocket.send(unparser.untokenize(tokens));
+    },
+    handle_event: function(event) {
+        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') {
+            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') {
+            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;
+            if (tui.mode.name == 'post_login_wait') {
+                tui.switch_mode('play');
+            } else if (tui.mode.name == 'study') {
+                explorer.query_info();
+            }
+            tui.full_refresh();
+        } else if (tokens[0] === 'CHAT') {
+             tui.log_msg('# ' + tokens[1], 1);
+        } else if (tokens[0] === 'PLAYER_ID') {
+            game.player_id = parseInt(tokens[1]);
+        } else if (tokens[0] === 'LOGIN_OK') {
+            this.send(['GET_GAMESTATE']);
+            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') {
+            ;
+        } else {
+            tui.log_msg('? unhandled input: ' + event.data);
+        }
+    }
+}
+
+let unparser = {
+    quote: function(str) {
+        let quoted = ['"'];
+        for (let i = 0; i < str.length; i++) {
+            let c = str[i];
+            if (['"', '\\'].includes(c)) {
+                quoted.push('\\');
+            };
+            quoted.push(c);
+        }
+        quoted.push('"');
+        return quoted.join('');
+    },
+    to_yx: function(yx_coordinate) {
+        return "Y:" + yx_coordinate[0] + ",X:" + yx_coordinate[1];
+    },
+    untokenize: function(tokens) {
+        let quoted_tokens = [];
+        for (let token of tokens) {
+            quoted_tokens.push(this.quote(token));
+        }
+        return quoted_tokens.join(" ");
+    }
+}
+
+class Mode {
+    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 tui = {
+  links: {},
+  log: [],
+  input_prompt: '> ',
+  input_lines: [],
+  window_width: terminal.cols / 2,
+  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),
+  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();
+      this.height_header = this.height_turn_line + this.height_mode_line;
+      this.log_msg("@ waiting for server connection ...");
+      this.init_keys();
+  },
+  init_keys: function() {
+    this.keys = {};
+    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'
+        };
+        document.getElementById("move_upright").hidden = true;
+        document.getElementById("move_upleft").hidden = true;
+        document.getElementById("move_downright").hidden = true;
+        document.getElementById("move_downleft").hidden = true;
+        document.getElementById("move_up").hidden = false;
+        document.getElementById("move_down").hidden = false;
+    } else if (game.map_geometry == 'Hex') {
+        document.getElementById("move_upright").hidden = false;
+        document.getElementById("move_upleft").hidden = false;
+        document.getElementById("move_downright").hidden = false;
+        document.getElementById("move_downleft").hidden = false;
+        document.getElementById("move_up").hidden = true;
+        document.getElementById("move_down").hidden = true;
+        this.movement_keys = {
+            [this.keys.hex_move_upleft]: 'UPLEFT',
+            [this.keys.hex_move_upright]: 'UPRIGHT',
+            [this.keys.hex_move_right]: 'RIGHT',
+            [this.keys.hex_move_downright]: 'DOWNRIGHT',
+            [this.keys.hex_move_downleft]: 'DOWNLEFT',
+            [this.keys.hex_move_left]: 'LEFT'
+        };
+    };
+  },
+  switch_mode: function(mode_name) {
+    this.inputEl.focus();
+    this.map_mode = 'terrain';
+    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.empty_input();
+    this.restore_input_values();
+    for (let el of document.getElementsByTagName("button")) {
+        el.disabled = true;
+    }
+    document.getElementById("help").disabled = false;
+    if (this.mode.name == 'play' || this.mode.name == 'study' || this.mode.name == 'control_tile_draw') {
+        for (const move_key of document.querySelectorAll('[id^="move_"]')) {
+            move_key.disabled = false;
+        }
+    }
+    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 (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;
+        document.getElementById("switch_to_control_tile_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 + '":');
+    } else if (this.mode.name == 'control_pw_pw') {
+        this.log_msg('@ enter tile control password for "' + this.tile_control_char + '":');
+    }
+    this.full_refresh();
+  },
+  offset_links: function(offset, links) {
+      for (let y in links) {
+          let real_y = offset[0] + parseInt(y);
+          if (!this.links[real_y]) {
+              this.links[real_y] = [];
+          }
+          for (let link of links[y]) {
+              const offset_link = [link[0] + offset[1], link[1] + offset[1], link[2]];
+              this.links[real_y].push(offset_link);
+          }
+      }
+  },
+  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) {
+          this.recalc_input_lines();
+      } else {
+          this.height_input = 0;
+      }
+  },
+  recalc_input_lines: function() {
+      let _ = null;
+      [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value, this.window_width);
+      this.height_input = this.input_lines.length;
+  },
+  msg_into_lines_of_width: function(msg, width) {
+      function push_inner_link(y, end_x) {
+          if (!inner_links[y]) {
+              inner_links[y] = [];
+          };
+          inner_links[y].push([url_start_x, end_x, url]);
+      };
+      const matches = msg.matchAll(/https?:\/\/[^\s]+/g)
+      let link_data = {};
+      let url_ends = [];
+      for (const match of matches) {
+          const url = match[0];
+          const url_start = match.index;
+          const url_end = match.index + match[0].length;
+          link_data[url_start] = url;
+          url_ends.push(url_end);
+      }
+      let url_start_x = 0;
+      let url = '';
+      let inner_links = {};
+      let in_link = false;
+      let chunk = "";
+      let lines = [];
+      for (let i = 0, x = 0, y = 0; i < msg.length; i++, x++) {
+          if (x >= width || msg[i] == "\n") {
+              if (in_link) {
+                  push_inner_link(y, chunk.length);
+                  url_start_x = 0;
+              };
+              lines.push(chunk);
+              chunk = "";
+              x = 0;
+              if (msg[i] == "\n") {
+                  x -= 1;
+              };
+              y += 1;
+          };
+          if (msg[i] != "\n") {
+              chunk += msg[i];
+          };
+          if (i in link_data) {
+              url_start_x = x;
+              url = link_data[i];
+              in_link = true;
+          } else if (url_ends.includes(i)) {
+              push_inner_link(y, x);
+              in_link = false;
+          }
+      }
+      lines.push(chunk);
+      if (in_link) {
+          push_inner_link(lines.length - 1, chunk.length);
+      }
+      return [lines, inner_links];
+  },
+  log_msg: function(msg) {
+      this.log.push(msg);
+      while (this.log.length > 100) {
+        this.log.shift();
+      };
+      this.full_refresh();
+  },
+  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(map_content[i] + ' ');
+    };
+    map_lines_split.push(line);
+    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 || tui.mode.name == 'control_tile_draw') {
+        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(''));
+        };
+    } 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(''));
+            if (indent == 0) {
+                indent = 1;
+            } else {
+                indent = 0;
+            };
+        };
+    }
+    let window_center = [terminal.rows / 2, this.window_width / 2];
+    let player = game.things[game.player_id];
+    let center_position = [player.position[0], player.position[1]];
+    if (tui.mode.shows_info) {
+        center_position = [explorer.position[0], explorer.position[1]];
+    }
+    center_position[1] = center_position[1] * 2;
+    let offset = [center_position[0] - window_center[0],
+                  center_position[1] - window_center[1]]
+    if (game.map_geometry == 'Hex' && offset[0] % 2) {
+        offset[1] += 1;
+    };
+    let term_y = Math.max(0, -offset[0]);
+    let term_x = Math.max(0, -offset[1]);
+    let map_y = Math.max(0, offset[0]);
+    let map_x = Math.max(0, offset[1]);
+    for (; term_y < terminal.rows && map_y < game.map_size[0]; term_y++, map_y++) {
+        let to_draw = map_lines[map_y].slice(map_x, this.window_width + offset[1]);
+        terminal.write(term_y, term_x, to_draw);
+    }
+  },
+  draw_mode_line: function() {
+      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.short_desc + ' – ' + help);
+  },
+  draw_turn_line: function(n) {
+    terminal.write(1, this.window_width, 'TURN: ' + game.turn);
+  },
+  draw_history: function() {
+      let log_display_lines = [];
+      let log_links = {};
+      let y_offset_in_log = 0;
+      for (let line of this.log) {
+          let [new_lines, link_data] = this.msg_into_lines_of_width(line,
+                                                                    this.window_width)
+          log_display_lines = log_display_lines.concat(new_lines);
+          for (const y in link_data) {
+              const rel_y = y_offset_in_log + parseInt(y);
+              log_links[rel_y] = [];
+              for (let link of link_data[y]) {
+                  log_links[rel_y].push(link);
+              }
+          }
+          y_offset_in_log += new_lines.length;
+      };
+      let i = log_display_lines.length - 1;
+      for (let y = terminal.rows - 1 - this.height_input;
+           y >= this.height_header && i >= 0;
+           y--, i--) {
+          terminal.write(y, this.window_width, log_display_lines[i]);
+      }
+      for (const key of Object.keys(log_links)) {
+          if (parseInt(key) <= i) {
+              delete log_links[key];
+          }
+      }
+      let offset = [terminal.rows - this.height_input - log_display_lines.length,
+                    this.window_width];
+      this.offset_links(offset, log_links);
+  },
+  draw_info: function() {
+      let [lines, link_data] = this.msg_into_lines_of_width(explorer.get_info(),
+                                                            this.window_width);
+      let offset = [this.height_header, this.window_width];
+      for (let y = offset[0], i = 0; y < terminal.rows && i < lines.length; y++, i++) {
+        terminal.write(y, offset[1], lines[i]);
+      }
+      this.offset_links(offset, link_data);
+  },
+  draw_input: function() {
+    if (this.mode.has_input_prompt) {
+        for (let y = terminal.rows - this.height_input, i = 0; i < this.input_lines.length; y++, i++) {
+            terminal.write(y, this.window_width, this.input_lines[i]);
+        }
+    }
+  },
+  draw_help: function() {
+      let movement_keys_desc = Object.keys(this.movement_keys).join(',');
+      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";
+          }
+          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() {
+    this.links = {};
+    terminal.drawBox(0, 0, terminal.rows, terminal.cols);
+    if (this.mode.is_intro) {
+        this.draw_history();
+        this.draw_input();
+    } else {
+        if (game.turn_complete) {
+            this.draw_map();
+            this.draw_turn_line();
+        }
+        this.draw_mode_line();
+        if (this.mode.shows_info) {
+          this.draw_info();
+        } else {
+          this.draw_history();
+        }
+        this.draw_input();
+    }
+    if (this.show_help) {
+        this.draw_help();
+    }
+    terminal.refresh();
+  }
+}
+
+let game = {
+    init: function() {
+        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) {
+            return game.things[id_];
+        } else if (create_if_not_found) {
+            let t = new Thing([0,0]);
+            game.things[id_] = t;
+            return t;
+        };
+    },
+    move: function(start_position, direction) {
+        let target = [start_position[0], start_position[1]];
+        if (direction == 'LEFT') {
+            target[1] -= 1;
+        } else if (direction == 'RIGHT') {
+            target[1] += 1;
+        } else if (game.map_geometry == 'Square') {
+            if (direction == 'UP') {
+                target[0] -= 1;
+            } else if (direction == 'DOWN') {
+                target[0] += 1;
+            };
+        } else if (game.map_geometry == 'Hex') {
+            let start_indented = start_position[0] % 2;
+            if (direction == 'UPLEFT') {
+                target[0] -= 1;
+                if (!start_indented) {
+                    target[1] -= 1;
+                }
+            } else if (direction == 'UPRIGHT') {
+                target[0] -= 1;
+                if (start_indented) {
+                    target[1] += 1;
+                }
+            } else if (direction == 'DOWNLEFT') {
+                target[0] += 1;
+                if (!start_indented) {
+                    target[1] -= 1;
+                }
+            } else if (direction == 'DOWNRIGHT') {
+                target[0] += 1;
+                if (start_indented) {
+                    target[1] += 1;
+                }
+            };
+        };
+        if (target[0] < 0 || target[1] < 0 ||
+            target[0] >= this.map_size[0] || target[1] >= this.map_size[1]) {
+            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')
+        }
+    }
+}
+
+game.init();
+tui.init();
+tui.full_refresh();
+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
+            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.name == 'study') {
+            tui.full_refresh();
+        }
+    },
+    empty_info_db: function() {
+        this.info_db = {};
+        this.info_hints = [];
+        if (tui.mode.name == 'study') {
+            tui.full_refresh();
+        }
+    },
+    query_info: function() {
+        server.send(["GET_ANNOTATION", unparser.to_yx(explorer.position)]);
+    },
+    get_info: function() {
+        let position_i = this.position[0] * game.map_size[1] + this.position[1];
+        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]) {
+                 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 += "\n";
+             }
+        }
+        if (this.position in game.portals) {
+            info += "PORTAL: " + game.portals[this.position] + "\n";
+        }
+        if (this.position in this.info_db) {
+            info += "ANNOTATIONS: " + this.info_db[this.position];
+        } else {
+            info += 'waiting …';
+        }
+        return info;
+    },
+    annotate: function(msg) {
+        if (msg.length == 0) {
+            msg = " ";  // triggers annotation deletion
+        }
+        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, tui.password]);
+    },
+    send_tile_control_command: function() {
+        server.send(["SET_TILE_CONTROL", unparser.to_yx(this.position), tui.tile_control_char]);
+    }
+}
+
+tui.inputEl.addEventListener('input', (event) => {
+    if (tui.mode.has_input_prompt) {
+        let max_length = tui.window_width * terminal.rows - tui.input_prompt.length;
+        if (tui.inputEl.value.length > max_length) {
+            tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
+        };
+        tui.recalc_input_lines();
+    } 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');
+    } else if (tui.mode.name == 'control_tile_type' && tui.inputEl.value.length > 0) {
+        tui.tile_control_char = tui.inputEl.value[0];
+        tui.switch_mode('control_tile_draw');
+    }
+    tui.full_refresh();
+}, false);
+tui.inputEl.addEventListener('keydown', (event) => {
+    tui.show_help = false;
+    if (event.key == 'Enter') {
+        event.preventDefault();
+    }
+    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.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('play');
+    } else if (tui.mode.name == 'annotate' && event.key == 'Enter') {
+        explorer.annotate(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('play');
+                } else if (tokens[0].slice(1) == 'study' || tokens[0][1] == tui.keys.switch_to_study) {
+                    tui.switch_mode('study');
+                } else if (tokens[0].slice(1) == 'nick') {
+                    if (tokens.length > 1) {
+                        server.send(['NICK', tokens[1]]);
+                    } else {
+                        tui.log_msg('? need new name');
+                    }
+                } else {
+                    tui.log_msg('? unknown command');
+                }
+            } else {
+                   server.send(['ALL', tui.inputEl.value]);
+            }
+        } else if (tui.inputEl.valuelength > 0) {
+               server.send(['ALL', tui.inputEl.value]);
+        }
+        tui.empty_input();
+    } 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('portal');
+          } else if (event.key === tui.keys.switch_to_annotate) {
+              event.preventDefault();
+              tui.switch_mode('annotate');
+          };
+    } 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) {
+            if (tui.map_mode == 'terrain') {
+                tui.map_mode = 'annotations';
+            } else if (tui.map_mode == 'annotations') {
+                tui.map_mode = 'control';
+            } else {
+                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);
+
+rows_selector.addEventListener('input', function() {
+    if (rows_selector.value % 4 != 0 || rows_selector.value < 24) {
+        return;
+    }
+    window.localStorage.setItem(rows_selector.id, rows_selector.value);
+    terminal.initialize();
+    tui.full_refresh();
+}, false);
+cols_selector.addEventListener('input', function() {
+    if (cols_selector.value % 4 != 0 || cols_selector.value < 80) {
+        return;
+    }
+    window.localStorage.setItem(cols_selector.id, cols_selector.value);
+    terminal.initialize();
+    tui.window_width = terminal.cols / 2,
+    tui.full_refresh();
+}, false);
+for (let key_selector of key_selectors) {
+    key_selector.addEventListener('input', function() {
+        window.localStorage.setItem(key_selector.id, key_selector.value);
+        tui.init_keys();
+    }, false);
+}
+window.setInterval(function() {
+    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("switch_to_control_tile_type").onclick = function() {
+    tui.switch_mode('control_tile_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';
+    }
+    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>
diff --git a/rogue_chat_nocanvas_monochrome.html b/rogue_chat_nocanvas_monochrome.html
deleted file mode 100644 (file)
index 59d03a9..0000000
+++ /dev/null
@@ -1,1424 +0,0 @@
-<!DOCTYPE html>
-<html><head>
-<style>
-  pre {
-      display: inline-block;
-  }
-  pre a {
-      color: white;
-  }
-</style>
-</head><body>
-<div>
-terminal rows: <input id="n_rows" type="number" step=4 min=24 value=24 />
-terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
-</div>
-<pre id="terminal"></pre>
-<textarea id="input" style="opacity: 0; width: 0px;"></textarea>
-<div>
-<a href="https://plomlompom.com/repos/?p=plomrogue2;a=summary">source code</a> (includes proper terminal / curses client)
-<h3>button controls for mouse players</h3>
-<table style="float: left">
-  <tr>
-    <td style="text-align: right"><button id="move_upleft">up-left</button></td>
-    <td style="text-align: center"><button id="move_up">up</button></td>
-    <td><button id="move_upright">up-right</button></td>
-  </tr>
-  <tr>
-    <td style="text-align: right;"><button id="move_left">left</button></td>
-    <td stlye="text-align: center;">move</td>
-    <td><button id="move_right">right</button></td>
-  </tr>
-  <tr>
-    <td><button id="move_downleft">down-left</button></td>
-    <td style="text-align: center"><button id="move_down">down</button></td>
-    <td><button id="move_downright">down-right</button></td>
-  </tr>
-</table>
-<table>
-  <tr>
-    <td><button id="help">help</button></td>
-  </tr>
-  <tr>
-    <td><button id="switch_to_chat">chat mode</button><br /></td>
-  </tr>
-    <td><button id="switch_to_study">study mode</button></td>
-    <td><button id="toggle_map_mode">toggle terrain/annotations/control view</button>
-  <tr>
-    <td><button id="switch_to_play">play mode</button></td>
-    <td>
-      <table>
-        <tr>
-          <td><button id="take_thing">take thing</button></td>
-          <td><button id="switch_to_edit">change tile</button></td>
-          <td><button id="switch_to_admin">become admin</button></td>
-        </tr>
-        <tr>
-          <td><button id="drop_thing">drop thing</button></td>
-          <td><button id="switch_to_password">change tile editing password</button></td>
-          <td><button id="switch_to_control_pw_type">change tile control password</button></td>
-        </tr>
-        <tr>
-          <td><button id="flatten">flatten surroundings</button></td>
-          <td><button id="switch_to_annotate">annotate tile</button></td>
-          <td><button id="switch_to_control_tile_type">change tiles control</button></td>
-        </tr>
-        <tr>
-          <td><button id="teleport">teleport</button></td>
-          <td><button id="switch_to_portal">edit portal link</button></td>
-        </tr>
-      </table>
-    </td>
-  </tr>
-</table>
-<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><input id="key_switch_to_chat" type="text" value="t" />
-<li><input id="key_switch_to_play" type="text" value="p" />
-<li><input id="key_switch_to_study" type="text" value="?" />
-<li><input id="key_switch_to_edit" type="text" value="m" />
-<li><input id="key_switch_to_password" type="text" value="P" />
-<li><input id="key_switch_to_admin" type="text" value="A" />
-<li><input id="key_switch_to_control_pw_type" type="text" value="C" />
-<li><input id="key_switch_to_control_tile_type" type="text" value="Q" />
-<li><input id="key_switch_to_annotate" type="text" value="M" />
-<li><input id="key_switch_to_portal" type="text" value="T" />
-<li>toggle terrain/annotations/control view: <input id="key_toggle_map_mode" type="text" value="M" />
-</ul>
-</div>
-<script>
-"use strict";
-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 tiles control password',
-        'long': 'This mode is the first of two steps to change the password for a tile control character.  First enter the tile control character for which you want to change the password!'
-    },
-    'control_pw_pw': {
-        'short': 'change tiles control password',
-        'long': 'This mode is the second of two steps to change the password for a tile control character.  Enter the new password for the tile control character you chose.'
-    },
-    'control_tile_type': {
-        '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': 'annotate tile',
-        'long': 'This mode allows you to add/edit a comment on the tile you are currently standing on (provided your map editing password authorizes you so).  Hit Return to leave.'
-    },
-    'portal': {
-        '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',
-        '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': 'map edit password',
-        '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_"]');
-
-for (const key_switch_selector of document.querySelectorAll('[id^="key_switch_to_"]')) {
-    const action = key_switch_selector.id.slice("key_switch_to_".length);
-    key_switch_selector.parentNode.prepend(mode_helps[action].short + ': ');
-}
-
-function restore_selector_value(selector) {
-    let stored_selection = window.localStorage.getItem(selector.id);
-    if (stored_selection) {
-        selector.value = stored_selection;
-    }
-}
-restore_selector_value(rows_selector);
-restore_selector_value(cols_selector);
-for (let key_selector of key_selectors) {
-    restore_selector_value(key_selector);
-}
-
-let terminal = {
-  foreground: 'white',
-  background: 'black',
-  initialize: function() {
-    this.rows = rows_selector.value;
-    this.cols = cols_selector.value;
-    this.pre_el = document.getElementById("terminal");
-    this.pre_el.style.color = this.foreground;
-    this.pre_el.style.backgroundColor = this.background;
-    this.content = [];
-      let line = []
-    for (let y = 0, x = 0; y <= this.rows; x++) {
-        if (x == this.cols) {
-            x = 0;
-            y += 1;
-            this.content.push(line);
-            line = [];
-            if (y == this.rows) {
-                break;
-            }
-        }
-        line.push(' ');
-    }
-  },
-  blink_screen: function() {
-      this.pre_el.style.color = this.background;
-      this.pre_el.style.backgroundColor = this.foreground;
-      setTimeout(() => {
-          this.pre_el.style.color = this.foreground;
-          this.pre_el.style.backgroundColor = this.background;
-      }, 100);
-  },
-  refresh: function() {
-      function escapeHTML(str) {
-          return str.
-              replace(/&/g, '&amp;').
-              replace(/</g, '&lt;').
-              replace(/>/g, '&gt;').
-              replace(/'/g, '&apos;').
-              replace(/"/g, '&quot;');
-      };
-      let pre_content = '';
-      for (let y = 0; y < this.rows; y++) {
-          let line = this.content[y].join('');
-          let chunks = [];
-          if (y in tui.links) {
-              let start_x = 0;
-              for (let span of tui.links[y]) {
-                  chunks.push(escapeHTML(line.slice(start_x, span[0])));
-                  chunks.push('<a href="');
-                  chunks.push(escapeHTML(span[2]));
-                  chunks.push('">');
-                  chunks.push(escapeHTML(line.slice(span[0], span[1])));
-                  chunks.push('</a>');
-                  start_x = span[1];
-              }
-              chunks.push(escapeHTML(line.slice(start_x)));
-          } else {
-              chunks = [escapeHTML(line)];
-          }
-          for (const chunk of chunks) {
-              pre_content += chunk;
-          }
-          pre_content += '\n';
-      }
-      this.pre_el.innerHTML = pre_content;
-  },
-  write: function(start_y, start_x, msg) {
-      for (let x = start_x, i = 0; x < this.cols && i < msg.length; x++, i++) {
-          this.content[start_y][x] = msg[i];
-      }
-  },
-  drawBox: function(start_y, start_x, height, width) {
-    let end_y = start_y + height;
-    let end_x = start_x + width;
-    for (let y = start_y, x = start_x; y < this.rows; x++) {
-      if (x == end_x) {
-        x = start_x;
-        y += 1;
-        if (y == end_y) {
-            break;
-        }
-      };
-      this.content[y][x] = ' ';
-    }
-  },
-}
-terminal.initialize();
-
-let parser = {
-  tokenize: function(str) {
-    let tokens = [];
-    let token = ''
-    let quoted = false;
-    let escaped = false;
-    for (let i = 0; i < str.length; i++) {
-      let c = str[i];
-      if (quoted) {
-        if (escaped) {
-          token += c;
-          escaped = false;
-        } else if (c == '\\') {
-          escaped = true;
-        } else if (c == '"') {
-          quoted = false
-        } else {
-          token += c;
-        }
-      } else if (c == '"') {
-        quoted = true
-      } else if (c === ' ') {
-        if (token.length > 0) {
-          tokens.push(token);
-          token = '';
-        }
-      } else {
-        token += c;
-      }
-    }
-    if (token.length > 0) {
-      tokens.push(token);
-    }
-    return tokens;
-  },
-  parse_yx: function(position_string) {
-    let coordinate_strings = position_string.split(',')
-    let position = [0, 0];
-    position[0] = parseInt(coordinate_strings[0].slice(2));
-    position[1] = parseInt(coordinate_strings[1].slice(2));
-    return position;
-  },
-}
-
-class Thing {
-    constructor(yx) {
-        this.position = yx;
-    }
-}
-
-let server = {
-    init: function(url) {
-        this.url = url;
-        this.websocket = new WebSocket(this.url);
-        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('login');
-        };
-        this.websocket.onclose = function(event) {
-            server.connected = false;
-            tui.switch_mode('waiting_for_server');
-            tui.log_msg("@ server disconnected :(");
-        };
-           this.websocket.onmessage = this.handle_event;
-        },
-    reconnect_to: function(url) {
-        this.websocket.close();
-        this.init(url);
-    },
-    send: function(tokens) {
-        this.websocket.send(unparser.untokenize(tokens));
-    },
-    handle_event: function(event) {
-        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') {
-            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') {
-            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;
-            if (tui.mode.name == 'post_login_wait') {
-                tui.switch_mode('play');
-            } else if (tui.mode.name == 'study') {
-                explorer.query_info();
-            }
-            tui.full_refresh();
-        } else if (tokens[0] === 'CHAT') {
-             tui.log_msg('# ' + tokens[1], 1);
-        } else if (tokens[0] === 'PLAYER_ID') {
-            game.player_id = parseInt(tokens[1]);
-        } else if (tokens[0] === 'LOGIN_OK') {
-            this.send(['GET_GAMESTATE']);
-            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') {
-            ;
-        } else {
-            tui.log_msg('? unhandled input: ' + event.data);
-        }
-    }
-}
-
-let unparser = {
-    quote: function(str) {
-        let quoted = ['"'];
-        for (let i = 0; i < str.length; i++) {
-            let c = str[i];
-            if (['"', '\\'].includes(c)) {
-                quoted.push('\\');
-            };
-            quoted.push(c);
-        }
-        quoted.push('"');
-        return quoted.join('');
-    },
-    to_yx: function(yx_coordinate) {
-        return "Y:" + yx_coordinate[0] + ",X:" + yx_coordinate[1];
-    },
-    untokenize: function(tokens) {
-        let quoted_tokens = [];
-        for (let token of tokens) {
-            quoted_tokens.push(this.quote(token));
-        }
-        return quoted_tokens.join(" ");
-    }
-}
-
-class Mode {
-    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 tui = {
-  links: {},
-  log: [],
-  input_prompt: '> ',
-  input_lines: [],
-  window_width: terminal.cols / 2,
-  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),
-  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();
-      this.height_header = this.height_turn_line + this.height_mode_line;
-      this.log_msg("@ waiting for server connection ...");
-      this.init_keys();
-  },
-  init_keys: function() {
-    this.keys = {};
-    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'
-        };
-        document.getElementById("move_upright").hidden = true;
-        document.getElementById("move_upleft").hidden = true;
-        document.getElementById("move_downright").hidden = true;
-        document.getElementById("move_downleft").hidden = true;
-        document.getElementById("move_up").hidden = false;
-        document.getElementById("move_down").hidden = false;
-    } else if (game.map_geometry == 'Hex') {
-        document.getElementById("move_upright").hidden = false;
-        document.getElementById("move_upleft").hidden = false;
-        document.getElementById("move_downright").hidden = false;
-        document.getElementById("move_downleft").hidden = false;
-        document.getElementById("move_up").hidden = true;
-        document.getElementById("move_down").hidden = true;
-        this.movement_keys = {
-            [this.keys.hex_move_upleft]: 'UPLEFT',
-            [this.keys.hex_move_upright]: 'UPRIGHT',
-            [this.keys.hex_move_right]: 'RIGHT',
-            [this.keys.hex_move_downright]: 'DOWNRIGHT',
-            [this.keys.hex_move_downleft]: 'DOWNLEFT',
-            [this.keys.hex_move_left]: 'LEFT'
-        };
-    };
-  },
-  switch_mode: function(mode_name) {
-    this.inputEl.focus();
-    this.map_mode = 'terrain';
-    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.empty_input();
-    this.restore_input_values();
-    for (let el of document.getElementsByTagName("button")) {
-        el.disabled = true;
-    }
-    document.getElementById("help").disabled = false;
-    if (this.mode.name == 'play' || this.mode.name == 'study' || this.mode.name == 'control_tile_draw') {
-        for (const move_key of document.querySelectorAll('[id^="move_"]')) {
-            move_key.disabled = false;
-        }
-    }
-    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 (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;
-        document.getElementById("switch_to_control_tile_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 + '":');
-    } else if (this.mode.name == 'control_pw_pw') {
-        this.log_msg('@ enter tile control password for "' + this.tile_control_char + '":');
-    }
-    this.full_refresh();
-  },
-  offset_links: function(offset, links) {
-      for (let y in links) {
-          let real_y = offset[0] + parseInt(y);
-          if (!this.links[real_y]) {
-              this.links[real_y] = [];
-          }
-          for (let link of links[y]) {
-              const offset_link = [link[0] + offset[1], link[1] + offset[1], link[2]];
-              this.links[real_y].push(offset_link);
-          }
-      }
-  },
-  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) {
-          this.recalc_input_lines();
-      } else {
-          this.height_input = 0;
-      }
-  },
-  recalc_input_lines: function() {
-      let _ = null;
-      [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value, this.window_width);
-      this.height_input = this.input_lines.length;
-  },
-  msg_into_lines_of_width: function(msg, width) {
-      function push_inner_link(y, end_x) {
-          if (!inner_links[y]) {
-              inner_links[y] = [];
-          };
-          inner_links[y].push([url_start_x, end_x, url]);
-      };
-      const matches = msg.matchAll(/https?:\/\/[^\s]+/g)
-      let link_data = {};
-      let url_ends = [];
-      for (const match of matches) {
-          const url = match[0];
-          const url_start = match.index;
-          const url_end = match.index + match[0].length;
-          link_data[url_start] = url;
-          url_ends.push(url_end);
-      }
-      let url_start_x = 0;
-      let url = '';
-      let inner_links = {};
-      let in_link = false;
-      let chunk = "";
-      let lines = [];
-      for (let i = 0, x = 0, y = 0; i < msg.length; i++, x++) {
-          if (x >= width || msg[i] == "\n") {
-              if (in_link) {
-                  push_inner_link(y, chunk.length);
-                  url_start_x = 0;
-              };
-              lines.push(chunk);
-              chunk = "";
-              x = 0;
-              if (msg[i] == "\n") {
-                  x -= 1;
-              };
-              y += 1;
-          };
-          if (msg[i] != "\n") {
-              chunk += msg[i];
-          };
-          if (i in link_data) {
-              url_start_x = x;
-              url = link_data[i];
-              in_link = true;
-          } else if (url_ends.includes(i)) {
-              push_inner_link(y, x);
-              in_link = false;
-          }
-      }
-      lines.push(chunk);
-      if (in_link) {
-          push_inner_link(lines.length - 1, chunk.length);
-      }
-      return [lines, inner_links];
-  },
-  log_msg: function(msg) {
-      this.log.push(msg);
-      while (this.log.length > 100) {
-        this.log.shift();
-      };
-      this.full_refresh();
-  },
-  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(map_content[i] + ' ');
-    };
-    map_lines_split.push(line);
-    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 || tui.mode.name == 'control_tile_draw') {
-        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(''));
-        };
-    } 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(''));
-            if (indent == 0) {
-                indent = 1;
-            } else {
-                indent = 0;
-            };
-        };
-    }
-    let window_center = [terminal.rows / 2, this.window_width / 2];
-    let player = game.things[game.player_id];
-    let center_position = [player.position[0], player.position[1]];
-    if (tui.mode.shows_info) {
-        center_position = [explorer.position[0], explorer.position[1]];
-    }
-    center_position[1] = center_position[1] * 2;
-    let offset = [center_position[0] - window_center[0],
-                  center_position[1] - window_center[1]]
-    if (game.map_geometry == 'Hex' && offset[0] % 2) {
-        offset[1] += 1;
-    };
-    let term_y = Math.max(0, -offset[0]);
-    let term_x = Math.max(0, -offset[1]);
-    let map_y = Math.max(0, offset[0]);
-    let map_x = Math.max(0, offset[1]);
-    for (; term_y < terminal.rows && map_y < game.map_size[0]; term_y++, map_y++) {
-        let to_draw = map_lines[map_y].slice(map_x, this.window_width + offset[1]);
-        terminal.write(term_y, term_x, to_draw);
-    }
-  },
-  draw_mode_line: function() {
-      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.short_desc + ' – ' + help);
-  },
-  draw_turn_line: function(n) {
-    terminal.write(1, this.window_width, 'TURN: ' + game.turn);
-  },
-  draw_history: function() {
-      let log_display_lines = [];
-      let log_links = {};
-      let y_offset_in_log = 0;
-      for (let line of this.log) {
-          let [new_lines, link_data] = this.msg_into_lines_of_width(line,
-                                                                    this.window_width)
-          log_display_lines = log_display_lines.concat(new_lines);
-          for (const y in link_data) {
-              const rel_y = y_offset_in_log + parseInt(y);
-              log_links[rel_y] = [];
-              for (let link of link_data[y]) {
-                  log_links[rel_y].push(link);
-              }
-          }
-          y_offset_in_log += new_lines.length;
-      };
-      let i = log_display_lines.length - 1;
-      for (let y = terminal.rows - 1 - this.height_input;
-           y >= this.height_header && i >= 0;
-           y--, i--) {
-          terminal.write(y, this.window_width, log_display_lines[i]);
-      }
-      for (const key of Object.keys(log_links)) {
-          if (parseInt(key) <= i) {
-              delete log_links[key];
-          }
-      }
-      let offset = [terminal.rows - this.height_input - log_display_lines.length,
-                    this.window_width];
-      this.offset_links(offset, log_links);
-  },
-  draw_info: function() {
-      let [lines, link_data] = this.msg_into_lines_of_width(explorer.get_info(),
-                                                            this.window_width);
-      let offset = [this.height_header, this.window_width];
-      for (let y = offset[0], i = 0; y < terminal.rows && i < lines.length; y++, i++) {
-        terminal.write(y, offset[1], lines[i]);
-      }
-      this.offset_links(offset, link_data);
-  },
-  draw_input: function() {
-    if (this.mode.has_input_prompt) {
-        for (let y = terminal.rows - this.height_input, i = 0; i < this.input_lines.length; y++, i++) {
-            terminal.write(y, this.window_width, this.input_lines[i]);
-        }
-    }
-  },
-  draw_help: function() {
-      let movement_keys_desc = Object.keys(this.movement_keys).join(',');
-      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";
-          }
-          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() {
-    this.links = {};
-    terminal.drawBox(0, 0, terminal.rows, terminal.cols);
-    if (this.mode.is_intro) {
-        this.draw_history();
-        this.draw_input();
-    } else {
-        if (game.turn_complete) {
-            this.draw_map();
-            this.draw_turn_line();
-        }
-        this.draw_mode_line();
-        if (this.mode.shows_info) {
-          this.draw_info();
-        } else {
-          this.draw_history();
-        }
-        this.draw_input();
-    }
-    if (this.show_help) {
-        this.draw_help();
-    }
-    terminal.refresh();
-  }
-}
-
-let game = {
-    init: function() {
-        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) {
-            return game.things[id_];
-        } else if (create_if_not_found) {
-            let t = new Thing([0,0]);
-            game.things[id_] = t;
-            return t;
-        };
-    },
-    move: function(start_position, direction) {
-        let target = [start_position[0], start_position[1]];
-        if (direction == 'LEFT') {
-            target[1] -= 1;
-        } else if (direction == 'RIGHT') {
-            target[1] += 1;
-        } else if (game.map_geometry == 'Square') {
-            if (direction == 'UP') {
-                target[0] -= 1;
-            } else if (direction == 'DOWN') {
-                target[0] += 1;
-            };
-        } else if (game.map_geometry == 'Hex') {
-            let start_indented = start_position[0] % 2;
-            if (direction == 'UPLEFT') {
-                target[0] -= 1;
-                if (!start_indented) {
-                    target[1] -= 1;
-                }
-            } else if (direction == 'UPRIGHT') {
-                target[0] -= 1;
-                if (start_indented) {
-                    target[1] += 1;
-                }
-            } else if (direction == 'DOWNLEFT') {
-                target[0] += 1;
-                if (!start_indented) {
-                    target[1] -= 1;
-                }
-            } else if (direction == 'DOWNRIGHT') {
-                target[0] += 1;
-                if (start_indented) {
-                    target[1] += 1;
-                }
-            };
-        };
-        if (target[0] < 0 || target[1] < 0 ||
-            target[0] >= this.map_size[0] || target[1] >= this.map_size[1]) {
-            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')
-        }
-    }
-}
-
-game.init();
-tui.init();
-tui.full_refresh();
-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
-            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.name == 'study') {
-            tui.full_refresh();
-        }
-    },
-    empty_info_db: function() {
-        this.info_db = {};
-        this.info_hints = [];
-        if (tui.mode.name == 'study') {
-            tui.full_refresh();
-        }
-    },
-    query_info: function() {
-        server.send(["GET_ANNOTATION", unparser.to_yx(explorer.position)]);
-    },
-    get_info: function() {
-        let position_i = this.position[0] * game.map_size[1] + this.position[1];
-        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]) {
-                 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 += "\n";
-             }
-        }
-        if (this.position in game.portals) {
-            info += "PORTAL: " + game.portals[this.position] + "\n";
-        }
-        if (this.position in this.info_db) {
-            info += "ANNOTATIONS: " + this.info_db[this.position];
-        } else {
-            info += 'waiting …';
-        }
-        return info;
-    },
-    annotate: function(msg) {
-        if (msg.length == 0) {
-            msg = " ";  // triggers annotation deletion
-        }
-        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, tui.password]);
-    },
-    send_tile_control_command: function() {
-        server.send(["SET_TILE_CONTROL", unparser.to_yx(this.position), tui.tile_control_char]);
-    }
-}
-
-tui.inputEl.addEventListener('input', (event) => {
-    if (tui.mode.has_input_prompt) {
-        let max_length = tui.window_width * terminal.rows - tui.input_prompt.length;
-        if (tui.inputEl.value.length > max_length) {
-            tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
-        };
-        tui.recalc_input_lines();
-    } 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');
-    } else if (tui.mode.name == 'control_tile_type' && tui.inputEl.value.length > 0) {
-        tui.tile_control_char = tui.inputEl.value[0];
-        tui.switch_mode('control_tile_draw');
-    }
-    tui.full_refresh();
-}, false);
-tui.inputEl.addEventListener('keydown', (event) => {
-    tui.show_help = false;
-    if (event.key == 'Enter') {
-        event.preventDefault();
-    }
-    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.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('play');
-    } else if (tui.mode.name == 'annotate' && event.key == 'Enter') {
-        explorer.annotate(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('play');
-                } else if (tokens[0].slice(1) == 'study' || tokens[0][1] == tui.keys.switch_to_study) {
-                    tui.switch_mode('study');
-                } else if (tokens[0].slice(1) == 'nick') {
-                    if (tokens.length > 1) {
-                        server.send(['NICK', tokens[1]]);
-                    } else {
-                        tui.log_msg('? need new name');
-                    }
-                } else {
-                    tui.log_msg('? unknown command');
-                }
-            } else {
-                   server.send(['ALL', tui.inputEl.value]);
-            }
-        } else if (tui.inputEl.valuelength > 0) {
-               server.send(['ALL', tui.inputEl.value]);
-        }
-        tui.empty_input();
-    } 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('portal');
-          } else if (event.key === tui.keys.switch_to_annotate) {
-              event.preventDefault();
-              tui.switch_mode('annotate');
-          };
-    } 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) {
-            if (tui.map_mode == 'terrain') {
-                tui.map_mode = 'annotations';
-            } else if (tui.map_mode == 'annotations') {
-                tui.map_mode = 'control';
-            } else {
-                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);
-
-rows_selector.addEventListener('input', function() {
-    if (rows_selector.value % 4 != 0 || rows_selector.value < 24) {
-        return;
-    }
-    window.localStorage.setItem(rows_selector.id, rows_selector.value);
-    terminal.initialize();
-    tui.full_refresh();
-}, false);
-cols_selector.addEventListener('input', function() {
-    if (cols_selector.value % 4 != 0 || cols_selector.value < 80) {
-        return;
-    }
-    window.localStorage.setItem(cols_selector.id, cols_selector.value);
-    terminal.initialize();
-    tui.window_width = terminal.cols / 2,
-    tui.full_refresh();
-}, false);
-for (let key_selector of key_selectors) {
-    key_selector.addEventListener('input', function() {
-        window.localStorage.setItem(key_selector.id, key_selector.value);
-        tui.init_keys();
-    }, false);
-}
-window.setInterval(function() {
-    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("switch_to_control_tile_type").onclick = function() {
-    tui.switch_mode('control_tile_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';
-    }
-    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>