plomlompom.com Git - plomrogue2/blob - rogue_chat.html

   1 <!DOCTYPE html>
   2 <html><head>
   3 <style>
   4   pre {
   5       display: inline-block;
   6   }
   7   pre a {
   8       color: white;
   9   }
  10 </style>
  11 </head><body>
  12 <div>
  13 terminal rows: <input id="n_rows" type="number" step=4 min=24 value=24 />
  14 / terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
  15 / <a href="https://plomlompom.com/repos/?p=plomrogue2;a=summary">source code</a> (includes proper terminal/ncurses client)
  16 </div>
  17 <pre id="terminal"></pre>
  18 <textarea id="input" style="opacity: 0; width: 0px;"></textarea>
  19 <div>
  20 keyboard input/control: <span id="keyboard_control"></span>
  21 </div>
  22 <h3>button controls for hard-to-remember keybindings</h3>
  23 <table id="move_table" style="float: left">
  24   <tr>
  25     <td style="text-align: right"><button id="hex_move_upleft"></button></td>
  26     <td style="text-align: center"><button id="square_move_up"></button></td>
  27     <td><button id="hex_move_upright"></button></td>
  28   </tr>
  29   <tr>
  30     <td style="text-align: right;"><button id="square_move_left"></button><button id="hex_move_left">left</button></td>
  31     <td stlye="text-align: center;">move</td>
  32     <td><button id="square_move_right"></button><button id="hex_move_right"></button></td>
  33   </tr>
  34   <tr>
  35     <td><button id="hex_move_downleft"></button></td>
  36     <td style="text-align: center"><button id="square_move_down"></button></td>
  37     <td><button id="hex_move_downright"></button></td>
  38   </tr>
  39 </table>
  40 <table>
  41   <tr>
  42     <td><button id="help"></button></td>
  43   </tr>
  44   <tr>
  45     <td><button id="switch_to_chat"></button><br /></td>
  46   </tr>
  47   <tr>
  48     <td><button id="switch_to_study"></button></td>
  49     <td><button id="toggle_map_mode"></button>
  50   </tr>
  51   <tr>
  52     <td><button id="switch_to_play"></button></td>
  53     <td>
  54       <button id="switch_to_take_thing"></button>
  55       <button id="switch_to_drop_thing"></button>
  56       <button id="door"></button>
  57       <button id="consume"></button>
  58       <button id="switch_to_command_thing"></button>
  59       <button id="teleport"></button>
  60       <button id="install"></button>
  61       <button id="wear"></button>
  62       <button id="spin"></button>
  63     </td>
  64   </tr>
  65   <tr>
  66     <td><button id="switch_to_edit"></button></td>
  67     <td>
  68       <button id="switch_to_write"></button>
  69       <button id="flatten"></button>
  70       <button id="switch_to_annotate"></button>
  71       <button id="switch_to_portal"></button>
  72       <button id="switch_to_name_thing"></button>
  73       <button id="switch_to_password"></button>
  74       <button id="switch_to_enter_face"></button>
  75     </td>
  76   </tr>
  77   <tr>
  78     <td><button id="switch_to_admin_enter"></button></td>
  79     <td>
  80       <button id="switch_to_control_pw_type"></button>
  81       <button id="switch_to_control_tile_type"></button>
  82       <button id="switch_to_admin_thing_protect"></button>
  83       <button id="toggle_tile_draw"></button>
  84     </td>
  85   <tr>
  86   </tr>
  87 </table>
  88 <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 />
  89 <ul>
  90 <li>move up (square grid): <input id="key_square_move_up" type="text" value="w" /> (hint: ArrowUp)
  91 <li>move left (square grid): <input id="key_square_move_left" type="text" value="a" /> (hint: ArrowLeft)
  92 <li>move down (square grid): <input id="key_square_move_down" type="text" value="s" /> (hint: ArrowDown)
  93 <li>move right (square grid): <input id="key_square_move_right" type="text" value="d" /> (hint: ArrowRight)
  94 <li>move up-left (hex grid): <input id="key_hex_move_upleft" type="text" value="w" />
  95 <li>move up-right (hex grid): <input id="key_hex_move_upright" type="text" value="e" />
  96 <li>move right (hex grid): <input id="key_hex_move_right" type="text" value="d" />
  97 <li>move down-right (hex grid): <input id="key_hex_move_downright" type="text" value="x" />
  98 <li>move down-left (hex grid): <input id="key_hex_move_downleft" type="text" value="y" />
  99 <li>move left (hex grid): <input id="key_hex_move_left" type="text" value="a" />
 100 <li>help: <input id="key_help" type="text" value="h" />
 101 <li>flatten surroundings: <input id="key_flatten" type="text" value="F" />
 102 <li>teleport: <input id="key_teleport" type="text" value="p" />
 103 <li>spin: <input id="key_spin" type="text" value="S" />
 104 <li>open/close: <input id="key_door" type="text" value="D" />
 105 <li>consume: <input id="key_consume" type="text" value="C" />
 106 <li>install: <input id="key_install" type="text" value="I" />
 107 <li>(un-)wear: <input id="key_wear" type="text" value="W" />
 108 <li><input id="key_switch_to_drop_thing" type="text" value="u" />
 109 <li><input id="key_switch_to_enter_face" type="text" value="f" />
 110 <li><input id="key_switch_to_take_thing" type="text" value="z" />
 111 <li><input id="key_switch_to_chat" type="text" value="t" />
 112 <li><input id="key_switch_to_play" type="text" value="p" />
 113 <li><input id="key_switch_to_study" type="text" value="?" />
 114 <li><input id="key_switch_to_edit" type="text" value="E" />
 115 <li><input id="key_switch_to_write" type="text" value="m" />
 116 <li><input id="key_switch_to_name_thing" type="text" value="N" />
 117 <li><input id="key_switch_to_command_thing" type="text" value="O" />
 118 <li><input id="key_switch_to_password" type="text" value="P" />
 119 <li><input id="key_switch_to_admin_enter" type="text" value="A" />
 120 <li><input id="key_switch_to_control_pw_type" type="text" value="C" />
 121 <li><input id="key_switch_to_control_tile_type" type="text" value="Q" />
 122 <li><input id="key_switch_to_admin_thing_protect" type="text" value="T" />
 123 <li><input id="key_switch_to_annotate" type="text" value="M" />
 124 <li><input id="key_switch_to_portal" type="text" value="T" />
 125 <li>toggle map view: <input id="key_toggle_map_mode" type="text" value="L" />
 126 <li>toggle protection character drawing: <input id="key_toggle_tile_draw" type="text" value="m" />
 127 </ul>
 128 </div>
 129 <script>
 130 "use strict";
 131 let websocket_location = "wss://plomlompom.com/rogue_chat/";
 132 //let websocket_location = "ws://localhost:8000/";
 133
 134 let mode_helps = {
 135     'play': {
 136         'short': 'play',
 137         'intro': '',
 138         'long': 'This mode allows you to interact with the map in various ways.'
 139     },
 140     'study': {
 141         'short': 'study',
 142         'intro': '',
 143         '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.  Toggle the map view to show or hide different information layers.'},
 144     'edit': {
 145         'short': 'world edit',
 146         'intro': '',
 147         'long': 'This mode allows you to change the game world in various ways.  Individual map tiles can be protected by "protection characters", which you can see by toggling into the protections map view.  You can edit a tile if you set the world edit password that matches its protection character.  The character "." marks the absence of protection:  Such tiles can always be edited.'
 148     },
 149     'name_thing': {
 150         'short': 'name thing',
 151         'intro': '',
 152         'long': 'Give name to/change name of thing here.'
 153     },
 154     'command_thing': {
 155         'short': 'command thing',
 156         'intro': '',
 157         'long': 'Enter a command to the thing you carry.  Enter nothing to return to play mode.'
 158     },
 159     'take_thing': {
 160         'short': 'take thing',
 161         'intro': 'Pick up a thing in reach by entering its index number.  Enter nothing to abort.',
 162         'long': 'You see a list of things which you could pick up.  Enter the target thing\'s index, or, to leave, nothing.'
 163     },
 164     'drop_thing': {
 165         'short': 'drop thing',
 166         'intro': 'Enter number of direction to which you want to drop thing.',
 167         'long': 'Drop currently carried thing by entering the target direction index.  Enter nothing to return to play mode..'
 168     },
 169     'admin_thing_protect': {
 170         'short': 'change thing protection',
 171         'intro': '@ enter thing protection character:',
 172         'long': 'Change protection character for thing here.'
 173     },
 174     'enter_face': {
 175         'short': 'enter your face',
 176         'intro': '@ enter face line (enter nothing to abort):',
 177         'long': 'Draw your face as ASCII art.  The string you enter must be 18 characters long, and will be divided on display into 3 lines of 6 characters each, from top to bottom..'
 178     },
 179     'write': {
 180         'short': 'change terrain',
 181         'intro': '',
 182         'long': 'This mode allows you to change the map tile you currently stand on (if your world editing password authorizes you so).  Just enter any printable ASCII character to imprint it on the ground below you.'
 183     },
 184     'control_pw_type': {
 185         'short': 'change protection character password',
 186         'intro': '@ enter protection character for which you want to change the password:',
 187         'long': 'This mode is the first of two steps to change the password for a protection character.  First enter the protection character for which you want to change the password.'
 188     },
 189     'control_pw_pw': {
 190         'short': 'change protection character password',
 191         'intro': '',
 192         'long': 'This mode is the second of two steps to change the password for a protection character.  Enter the new password for the protection character you chose.'
 193     },
 194     'control_tile_type': {
 195         'short': 'change tiles protection',
 196         'intro': '@ enter protection character which you want to draw:',
 197         'long': 'This mode is the first of two steps to change tile protection areas on the map.  First enter the tile protection character you want to write.'
 198     },
 199     'control_tile_draw': {
 200         'short': 'change tiles protection',
 201         'intro': '',
 202         'long': 'This mode is the second of two steps to change tile protection areas on the map.  Toggle tile protection drawing on/off and move the ?? cursor around the map to draw the selected protection character.'
 203     },
 204     'annotate': {
 205         'short': 'annotate tile',
 206         'intro': '',
 207         'long': 'This mode allows you to add/edit a comment on the tile you are currently standing on (provided your world editing password authorizes you so).  Hit Return to leave.'
 208     },
 209     'portal': {
 210         'short': 'edit portal',
 211         'intro': '',
 212         'long': 'This mode allows you to imprint/edit/remove a teleportation target on the ground you are currently standing on (provided your world 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.'
 213     },
 214     'chat': {
 215         'short': 'chat',
 216         'intro': '',
 217         '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:\n\n/nick NAME – re-name yourself to NAME'
 218     },
 219     'login': {
 220         'short': 'login',
 221         'intro': '',
 222         'long': 'Enter your player name.'
 223     },
 224     'waiting_for_server': {
 225         'short': 'waiting for server response',
 226         'intro': '@ waiting for server …',
 227         'long': 'Waiting for a server response.'
 228     },
 229     'post_login_wait': {
 230         'short': 'waiting for server response',
 231         'intro': '',
 232         'long': 'Waiting for a server response.'
 233     },
 234     'password': {
 235         'short': 'set world edit password',
 236         'intro': '',
 237         'long': 'This mode allows you to change the password that you send to authorize yourself for editing password-protected elements of the world.  Hit return to confirm and leave.'
 238     },
 239     'admin_enter': {
 240         'short': 'become admin',
 241         'intro': '@ enter admin password:',
 242         'long': 'This mode allows you to become admin if you know an admin password.'
 243     },
 244     'admin': {
 245         'short': 'admin',
 246         'intro': '',
 247         'long': 'This mode allows you access to actions limited to administrators.'
 248     }
 249 }
 250 let key_descriptions = {
 251     'help': 'help',
 252     'flatten': 'flatten surroundings',
 253     'teleport': 'teleport',
 254     'door': 'open/close',
 255     'consume': 'consume',
 256     'install': '(un-)install',
 257     'wear': '(un-)wear',
 258     'spin': 'spin',
 259     'toggle_map_mode': 'toggle map view',
 260     'toggle_tile_draw': 'toggle protection character drawing',
 261     'hex_move_upleft': 'up-left',
 262     'hex_move_upright': 'up-right',
 263     'hex_move_right': 'right',
 264     'hex_move_left': 'left',
 265     'hex_move_downleft': 'down-left',
 266     'hex_move_downright': 'down-right',
 267     'square_move_up': 'up',
 268     'square_move_left': 'left',
 269     'square_move_down': 'down',
 270     'square_move_right': 'right',
 271 };
 272 for (const mode_name of Object.keys(mode_helps)) {
 273     key_descriptions['switch_to_' + mode_name] = mode_helps[mode_name].short;
 274 };
 275
 276 let rows_selector = document.getElementById("n_rows");
 277 let cols_selector = document.getElementById("n_cols");
 278 let key_selectors = document.querySelectorAll('[id^="key_"]');
 279
 280 for (const key_switch_selector of document.querySelectorAll('[id^="key_switch_to_"]')) {
 281     const action = key_switch_selector.id.slice("key_switch_to_".length);
 282     key_switch_selector.parentNode.prepend(mode_helps[action].short + ': ');
 283 }
 284
 285 function restore_selector_value(selector) {
 286     let stored_selection = window.localStorage.getItem(selector.id);
 287     if (stored_selection) {
 288         selector.value = stored_selection;
 289     }
 290 }
 291 restore_selector_value(rows_selector);
 292 restore_selector_value(cols_selector);
 293 for (let key_selector of key_selectors) {
 294     restore_selector_value(key_selector);
 295 }
 296
 297 function escapeHTML(str) {
 298     return str.
 299         replace(/&/g, '&amp;').
 300         replace(/</g, '&lt;').
 301         replace(/>/g, '&gt;').
 302         replace(/'/g, '&apos;').
 303         replace(/"/g, '&quot;');
 304 };
 305
 306 let terminal = {
 307   initialize: function() {
 308     this.rows = rows_selector.value;
 309     this.cols = cols_selector.value;
 310     this.pre_el = document.getElementById("terminal");
 311     this.set_default_colors();
 312     this.apply_colors();
 313     this.content = [];
 314       let line = []
 315     for (let y = 0, x = 0; y <= this.rows; x++) {
 316         if (x == this.cols) {
 317             x = 0;
 318             y += 1;
 319             this.content.push(line);
 320             line = [];
 321             if (y == this.rows) {
 322                 break;
 323             }
 324         }
 325         line.push(' ');
 326     }
 327   },
 328   apply_colors: function() {
 329     this.pre_el.style.color = this.foreground;
 330     this.pre_el.style.backgroundColor = this.background;
 331   },
 332   set_default_colors: function() {
 333       this.foreground = 'white';
 334       this.background = 'black';
 335       this.apply_colors();
 336   },
 337   set_random_colors: function() {
 338       function rand(offset) {
 339           return Math.floor(offset + Math.random() * 96).toString(16).padStart(2, '0');
 340       }
 341       this.foreground = '#' + rand(159) + rand(159) + rand(159);
 342       this.background = '#' + rand(0) + rand(0) + rand(0);
 343       this.apply_colors();
 344   },
 345   blink_screen: function() {
 346       this.pre_el.style.color = this.background;
 347       this.pre_el.style.backgroundColor = this.foreground;
 348       setTimeout(() => {
 349           this.pre_el.style.color = this.foreground;
 350           this.pre_el.style.backgroundColor = this.background;
 351       }, 100);
 352   },
 353   refresh: function() {
 354       let pre_content = '';
 355       for (let y = 0; y < this.rows; y++) {
 356           let line = this.content[y].join('');
 357           let chunks = [];
 358           if (y in tui.links) {
 359               let start_x = 0;
 360               for (let span of tui.links[y]) {
 361                   chunks.push(escapeHTML(line.slice(start_x, span[0])));
 362                   chunks.push('<a target="_blank" href="');
 363                   chunks.push(escapeHTML(span[2]));
 364                   chunks.push('">');
 365                   chunks.push(escapeHTML(line.slice(span[0], span[1])));
 366                   chunks.push('</a>');
 367                   start_x = span[1];
 368               }
 369               chunks.push(escapeHTML(line.slice(start_x)));
 370           } else {
 371               chunks = [escapeHTML(line)];
 372           }
 373           for (const chunk of chunks) {
 374               pre_content += chunk;
 375           }
 376           pre_content += '\n';
 377       }
 378       this.pre_el.innerHTML = pre_content;
 379   },
 380   write: function(start_y, start_x, msg) {
 381       for (let x = start_x, i = 0; x < this.cols && i < msg.length; x++, i++) {
 382           this.content[start_y][x] = msg[i];
 383       }
 384   },
 385   drawBox: function(start_y, start_x, height, width) {
 386     let end_y = start_y + height;
 387     let end_x = start_x + width;
 388     for (let y = start_y, x = start_x; y < this.rows; x++) {
 389       if (x == end_x) {
 390         x = start_x;
 391         y += 1;
 392         if (y == end_y) {
 393             break;
 394         }
 395       };
 396       this.content[y][x] = ' ';
 397     }
 398   },
 399 }
 400 terminal.initialize();
 401
 402 let parser = {
 403   tokenize: function(str) {
 404     let tokens = [];
 405     let token = ''
 406     let quoted = false;
 407     let escaped = false;
 408     for (let i = 0; i < str.length; i++) {
 409       let c = str[i];
 410       if (quoted) {
 411         if (escaped) {
 412           token += c;
 413           escaped = false;
 414         } else if (c == '\\') {
 415           escaped = true;
 416         } else if (c == '"') {
 417           quoted = false
 418         } else {
 419           token += c;
 420         }
 421       } else if (c == '"') {
 422         quoted = true
 423       } else if (c === ' ') {
 424         if (token.length > 0) {
 425           tokens.push(token);
 426           token = '';
 427         }
 428       } else {
 429         token += c;
 430       }
 431     }
 432     if (token.length > 0) {
 433       tokens.push(token);
 434     }
 435     return tokens;
 436   },
 437   parse_yx: function(position_string) {
 438     let coordinate_strings = position_string.split(',')
 439     let position = [0, 0];
 440     position[0] = parseInt(coordinate_strings[0].slice(2));
 441     position[1] = parseInt(coordinate_strings[1].slice(2));
 442     return position;
 443   },
 444 }
 445
 446 class Thing {
 447     constructor(yx) {
 448         this.position = yx;
 449     }
 450 }
 451
 452 let server = {
 453     init: function(url) {
 454         this.url = url;
 455         this.websocket = new WebSocket(this.url);
 456         this.websocket.onopen = function(event) {
 457             game.thing_types = {};
 458             game.terrains = {};
 459             server.send(['TASKS']);
 460             server.send(['TERRAINS']);
 461             server.send(['THING_TYPES']);
 462             tui.log_msg("@ server connected! :)");
 463             tui.switch_mode('login');
 464         };
 465         this.websocket.onclose = function(event) {
 466             tui.switch_mode('waiting_for_server');
 467             tui.log_msg("@ server disconnected :(");
 468         };
 469             this.websocket.onmessage = this.handle_event;
 470         },
 471     reconnect_to: function(url) {
 472         this.websocket.close();
 473         this.init(url);
 474     },
 475     send: function(tokens) {
 476         this.websocket.send(unparser.untokenize(tokens));
 477     },
 478     handle_event: function(event) {
 479         let tokens = parser.tokenize(event.data);
 480         if (tokens[0] === 'TURN') {
 481             game.turn_complete = false;
 482             explorer.empty_annotations();
 483             game.things = {};
 484             game.portals = {};
 485             game.fov = '';
 486             game.turn = parseInt(tokens[1]);
 487         } else if (tokens[0] === 'THING') {
 488             let t = game.get_thing(tokens[4], true);
 489             t.position = parser.parse_yx(tokens[1]);
 490             t.type_ = tokens[2];
 491             t.protection = tokens[3];
 492             t.portable = parseInt(tokens[5]);
 493             t.commandable = parseInt(tokens[6]);
 494         } else if (tokens[0] === 'THING_NAME') {
 495             let t = game.get_thing(tokens[1], false);
 496             t.name_ = tokens[2];
 497         } else if (tokens[0] === 'THING_FACE') {
 498             let t = game.get_thing(tokens[1], false);
 499             t.face = tokens[2];
 500         } else if (tokens[0] === 'THING_HAT') {
 501             let t = game.get_thing(tokens[1], false);
 502             t.hat = tokens[2];
 503         } else if (tokens[0] === 'THING_CHAR') {
 504             let t = game.get_thing(tokens[1], false);
 505             t.thing_char = tokens[2];
 506         } else if (tokens[0] === 'TASKS') {
 507             game.tasks = tokens[1].split(',');
 508             tui.mode_write.legal = game.tasks.includes('WRITE');
 509             tui.mode_command_thing.legal = game.tasks.includes('WRITE');
 510             tui.mode_take_thing.legal = game.tasks.includes('PICK_UP');
 511             tui.mode_drop_thing.legal = game.tasks.includes('DROP');
 512         } else if (tokens[0] === 'THING_TYPE') {
 513             game.thing_types[tokens[1]] = tokens[2]
 514         } else if (tokens[0] === 'THING_CARRYING') {
 515             let t = game.get_thing(tokens[1], false);
 516             t.carrying = t = game.get_thing(tokens[2], false);
 517         } else if (tokens[0] === 'THING_INSTALLED') {
 518             let t = game.get_thing(tokens[1], false);
 519             t.installed = true;
 520         } else if (tokens[0] === 'TERRAIN') {
 521             game.terrains[tokens[1]] = tokens[2]
 522         } else if (tokens[0] === 'MAP') {
 523             game.map_geometry = tokens[1];
 524             tui.init_keys();
 525             game.map_size = parser.parse_yx(tokens[2]);
 526             game.map = tokens[3]
 527         } else if (tokens[0] === 'FOV') {
 528             game.fov = tokens[1]
 529         } else if (tokens[0] === 'MAP_CONTROL') {
 530             game.map_control = tokens[1]
 531         } else if (tokens[0] === 'GAME_STATE_COMPLETE') {
 532             game.turn_complete = true;
 533             game.player = game.things[game.player_id];
 534             explorer.info_cached = false;
 535             if (tui.mode.name == 'post_login_wait') {
 536                 tui.switch_mode('play');
 537             } else {
 538                 tui.full_refresh();
 539             }
 540         } else if (tokens[0] === 'CHAT') {
 541              tui.log_msg('# ' + tokens[1], 1);
 542         } else if (tokens[0] === 'REPLY') {
 543              tui.log_msg('#MUSICPLAYER: ' + tokens[1], 1);
 544         } else if (tokens[0] === 'PLAYER_ID') {
 545             game.player_id = parseInt(tokens[1]);
 546         } else if (tokens[0] === 'LOGIN_OK') {
 547             this.send(['GET_GAMESTATE']);
 548             tui.switch_mode('post_login_wait');
 549         } else if (tokens[0] === 'DEFAULT_COLORS') {
 550             terminal.set_default_colors();
 551         } else if (tokens[0] === 'RANDOM_COLORS') {
 552             terminal.set_random_colors();
 553         } else if (tokens[0] === 'ADMIN_OK') {
 554             tui.is_admin = true;
 555             tui.log_msg('@ you now have admin rights');
 556             tui.switch_mode('admin');
 557         } else if (tokens[0] === 'PORTAL') {
 558             let position = parser.parse_yx(tokens[1]);
 559             game.portals[position] = tokens[2];
 560         } else if (tokens[0] === 'ANNOTATION') {
 561             let position = parser.parse_yx(tokens[1]);
 562             explorer.update_annotations(position, tokens[2]);
 563             tui.full_refresh();
 564         } else if (tokens[0] === 'UNHANDLED_INPUT') {
 565             tui.log_msg('? unknown command');
 566         } else if (tokens[0] === 'PLAY_ERROR') {
 567             tui.log_msg('? ' + tokens[1]);
 568             terminal.blink_screen();
 569         } else if (tokens[0] === 'ARGUMENT_ERROR') {
 570             tui.log_msg('? syntax error: ' + tokens[1]);
 571         } else if (tokens[0] === 'GAME_ERROR') {
 572             tui.log_msg('? game error: ' + tokens[1]);
 573         } else if (tokens[0] === 'PONG') {
 574             ;
 575         } else {
 576             tui.log_msg('? unhandled input: ' + event.data);
 577         }
 578     }
 579 }
 580
 581 let unparser = {
 582     quote: function(str) {
 583         let quoted = ['"'];
 584         for (let i = 0; i < str.length; i++) {
 585             let c = str[i];
 586             if (['"', '\\'].includes(c)) {
 587                 quoted.push('\\');
 588             };
 589             quoted.push(c);
 590         }
 591         quoted.push('"');
 592         return quoted.join('');
 593     },
 594     to_yx: function(yx_coordinate) {
 595         return "Y:" + yx_coordinate[0] + ",X:" + yx_coordinate[1];
 596     },
 597     untokenize: function(tokens) {
 598         let quoted_tokens = [];
 599         for (let token of tokens) {
 600             quoted_tokens.push(this.quote(token));
 601         }
 602         return quoted_tokens.join(" ");
 603     }
 604 }
 605
 606 class Mode {
 607     constructor(name, has_input_prompt=false, shows_info=false,
 608                 is_intro=false, is_single_char_entry=false) {
 609         this.name = name;
 610         this.short_desc = mode_helps[name].short;
 611         this.available_modes = [];
 612         this.available_actions = [];
 613         this.has_input_prompt = has_input_prompt;
 614         this.shows_info= shows_info;
 615         this.is_intro = is_intro;
 616         this.help_intro = mode_helps[name].long;
 617         this.intro_msg = mode_helps[name].intro;
 618         this.is_single_char_entry = is_single_char_entry;
 619         this.legal = true;
 620     }
 621     *iter_available_modes() {
 622         for (let mode_name of this.available_modes) {
 623             let mode = tui['mode_' + mode_name];
 624             if (!mode.legal) {
 625                 continue;
 626             }
 627             let key = tui.keys['switch_to_' + mode.name];
 628             yield [mode, key]
 629         }
 630     }
 631     list_available_modes() {
 632         let msg = ''
 633         if (this.available_modes.length > 0) {
 634             msg += 'Other modes available from here:\n';
 635             for (let [mode, key] of this.iter_available_modes()) {
 636                 msg += '[' + key + '] – ' + mode.short_desc + '\n';
 637             }
 638         }
 639         return msg;
 640     }
 641     mode_switch_on_key(key_event) {
 642         for (let [mode, key] of this.iter_available_modes()) {
 643             if (key_event.key == key) {
 644                 event.preventDefault();
 645                 tui.switch_mode(mode.name);
 646                 return true;
 647             };
 648         }
 649         return false;
 650     }
 651 }
 652 let tui = {
 653   links: {},
 654   log: [],
 655   input_prompt: '> ',
 656   input_lines: [],
 657   window_width: terminal.cols / 2,
 658   height_turn_line: 1,
 659   height_mode_line: 1,
 660   height_input: 1,
 661   password: 'foo',
 662   show_help: false,
 663   is_admin: false,
 664   tile_draw: false,
 665   mode_waiting_for_server: new Mode('waiting_for_server',
 666                                      false, false, true),
 667   mode_login: new Mode('login', true, false, true),
 668   mode_post_login_wait: new Mode('post_login_wait'),
 669   mode_chat: new Mode('chat', true),
 670   mode_annotate: new Mode('annotate', true, true),
 671   mode_play: new Mode('play'),
 672   mode_study: new Mode('study', false, true),
 673   mode_write: new Mode('write', false, false, false, true),
 674   mode_edit: new Mode('edit'),
 675   mode_control_pw_type: new Mode('control_pw_type', true),
 676   mode_admin_thing_protect: new Mode('admin_thing_protect', true),
 677   mode_portal: new Mode('portal', true, true),
 678   mode_password: new Mode('password', true),
 679   mode_name_thing: new Mode('name_thing', true, true),
 680   mode_command_thing: new Mode('command_thing', true),
 681   mode_take_thing: new Mode('take_thing', true),
 682   mode_drop_thing: new Mode('drop_thing', true),
 683   mode_enter_face: new Mode('enter_face', true),
 684   mode_admin_enter: new Mode('admin_enter', true),
 685   mode_admin: new Mode('admin'),
 686   mode_control_pw_pw: new Mode('control_pw_pw', true),
 687   mode_control_tile_type: new Mode('control_tile_type', true),
 688   mode_control_tile_draw: new Mode('control_tile_draw'),
 689   action_tasks: {
 690       'flatten': 'FLATTEN_SURROUNDINGS',
 691       'take_thing': 'PICK_UP',
 692       'drop_thing': 'DROP',
 693       'move': 'MOVE',
 694       'door': 'DOOR',
 695       'install': 'INSTALL',
 696       'wear': 'WEAR',
 697       'command': 'COMMAND',
 698       'consume': 'INTOXICATE',
 699       'spin': 'SPIN',
 700   },
 701   offset: [0,0],
 702   map_lines: [],
 703   selectables: [],
 704   init: function() {
 705       this.mode_play.available_modes = ["chat", "study", "edit", "admin_enter",
 706                                         "command_thing", "take_thing", "drop_thing"]
 707       this.mode_play.available_actions = ["move", "teleport", "door", "consume",
 708                                           "install", "wear", "spin"];
 709       this.mode_study.available_modes = ["chat", "play", "admin_enter", "edit"]
 710       this.mode_study.available_actions = ["toggle_map_mode", "move_explorer"];
 711       this.mode_admin.available_modes = ["admin_thing_protect", "control_pw_type",
 712                                          "control_tile_type", "chat",
 713                                          "study", "play", "edit"]
 714       this.mode_admin.available_actions = ["move"];
 715       this.mode_control_tile_draw.available_modes = ["admin_enter"]
 716       this.mode_control_tile_draw.available_actions = ["toggle_tile_draw"];
 717       this.mode_edit.available_modes = ["write", "annotate", "portal", "name_thing",
 718                                         "password", "chat", "study", "play",
 719                                         "admin_enter", "enter_face"]
 720       this.mode_edit.available_actions = ["move", "flatten", "toggle_map_mode"]
 721       this.inputEl = document.getElementById("input");
 722       this.inputEl.focus();
 723       this.switch_mode('waiting_for_server');
 724       this.recalc_input_lines();
 725       this.height_header = this.height_turn_line + this.height_mode_line;
 726       this.init_keys();
 727   },
 728   init_keys: function() {
 729     document.getElementById("move_table").hidden = true;
 730     this.keys = {};
 731     for (let key_selector of key_selectors) {
 732         this.keys[key_selector.id.slice(4)] = key_selector.value;
 733     }
 734     this.movement_keys = {};
 735     let geometry_prefix = 'undefinedMapGeometry_';
 736     if (game.map_geometry) {
 737         geometry_prefix = game.map_geometry.toLowerCase() + '_';
 738     }
 739     for (const key_name of Object.keys(key_descriptions)) {
 740         if (key_name.startsWith(geometry_prefix)) {
 741             let direction = key_name.split('_')[2].toUpperCase();
 742             let key = this.keys[key_name];
 743             this.movement_keys[key] = direction;
 744         }
 745     };
 746     for (const move_button of document.querySelectorAll('[id*="_move_"]')) {
 747         if (move_button.id.startsWith('key_')) {
 748             continue;
 749         }
 750         move_button.hidden = true;
 751     };
 752     for (const move_button of document.querySelectorAll('[id^="' + geometry_prefix + 'move_"]')) {
 753         document.getElementById("move_table").hidden = false;
 754         move_button.hidden = false;
 755     };
 756     for (let el of document.getElementsByTagName("button")) {
 757       let action_desc = key_descriptions[el.id];
 758       let action_key = '[' + this.keys[el.id] + ']';
 759       el.innerHTML = escapeHTML(action_desc) + '<br /><span class="keyboard_controlled">' + escapeHTML(action_key) + '</span>';
 760     }
 761   },
 762   task_action_on: function(action) {
 763       return game.tasks.includes(this.action_tasks[action]);
 764   },
 765   switch_mode: function(mode_name) {
 766     if (this.mode && this.mode.name == 'control_tile_draw') {
 767         tui.log_msg('@ finished tile protection drawing.')
 768     }
 769     this.tile_draw = false;
 770       if (mode_name == 'command_thing' && (!game.player.carrying
 771                                            || !game.player.carrying.commandable)) {
 772         this.log_msg('? not carrying anything commandable');
 773         terminal.blink_screen();
 774         this.switch_mode('play');
 775         return;
 776     };
 777     if (mode_name == 'drop_thing' && (!game.player.carrying)) {
 778         this.log_msg('? not carrying anything droppable');
 779         terminal.blink_screen();
 780         this.switch_mode('play');
 781         return;
 782     }
 783     if (mode_name == 'admin_enter' && this.is_admin) {
 784         mode_name = 'admin';
 785     } else if (['name_thing', 'admin_thing_protect'].includes(mode_name)) {
 786         let thing_id = null;
 787         for (let t_id in game.things) {
 788             if (t_id == game.player_id) {
 789                 continue;
 790             }
 791             let t = game.things[t_id];
 792             if (game.player.position[0] == t.position[0]
 793                 && game.player.position[1] == t.position[1]) {
 794                 thing_id = t_id;
 795                 break;
 796             }
 797         }
 798         if (!thing_id) {
 799             terminal.blink_screen();
 800             this.log_msg('? not standing over thing');
 801             return;
 802         } else {
 803             this.selected_thing_id = thing_id;
 804         }
 805     };
 806     this.mode = this['mode_' + mode_name];
 807     if (["control_tile_draw", "control_tile_type", "control_pw_type"].includes(this.mode.name)) {
 808         this.map_mode = 'protections';
 809     } else if (this.mode.name != "edit") {
 810         this.map_mode = 'terrain + things';
 811     };
 812     if (this.mode.has_input_prompt || this.mode.is_single_char_entry) {
 813         this.inputEl.focus();
 814     }
 815     if (game.player_id in game.things && (this.mode.shows_info || this.mode.name == 'control_tile_draw')) {
 816         explorer.position = game.player.position;
 817     }
 818     this.inputEl.value = "";
 819     this.restore_input_values();
 820     for (let el of document.getElementsByTagName("button")) {
 821         el.disabled = true;
 822     }
 823     document.getElementById("help").disabled = false;
 824     for (const action of this.mode.available_actions) {
 825         if (["move", "move_explorer"].includes(action)) {
 826             for (const move_key of document.querySelectorAll('[id*="_move_"]')) {
 827                 move_key.disabled = false;
 828             }
 829         } else if (Object.keys(this.action_tasks).includes(action)) {
 830             if (this.task_action_on(action)) {
 831                 document.getElementById(action).disabled = false;
 832             }
 833         } else {
 834             document.getElementById(action).disabled = false;
 835         };
 836     }
 837     for (const mode_name of this.mode.available_modes) {
 838             document.getElementById('switch_to_' + mode_name).disabled = false;
 839     }
 840     if (this.mode.intro_msg.length > 0) {
 841         this.log_msg(this.mode.intro_msg);
 842     }
 843     if (this.mode.name == 'login') {
 844         if (this.login_name) {
 845             server.send(['LOGIN', this.login_name]);
 846         } else {
 847             this.log_msg("? need login name");
 848         }
 849     } else if (this.mode.is_single_char_entry) {
 850         this.show_help = true;
 851     } else if (this.mode.name == 'take_thing') {
 852         this.log_msg("Portable things in reach for pick-up:");
 853         const y = game.player.position[0]
 854         const x = game.player.position[1]
 855         let select_range = [y.toString() + ':' + x.toString(),
 856                             (y + 0).toString() + ':' + (x - 1).toString(),
 857                             (y + 0).toString() + ':' + (x + 1).toString(),
 858                             (y - 1).toString() + ':' + (x).toString(),
 859                             (y + 1).toString() + ':' + (x).toString()];
 860         if (game.map_geometry == 'Hex') {
 861             if (y % 2) {
 862                 select_range.push((y - 1).toString() + ':' + (x + 1).toString());
 863                 select_range.push((y + 1).toString() + ':' + (x + 1).toString());
 864             } else {
 865                 select_range.push((y - 1).toString() + ':' + (x - 1).toString());
 866                 select_range.push((y + 1).toString() + ':' + (x - 1).toString());
 867             }
 868         };
 869         this.selectables = [];
 870         for (const t_id in game.things) {
 871             const t = game.things[t_id];
 872             if (select_range.includes(t.position[0].toString()
 873                                       + ':' + t.position[1].toString())
 874                 && t.portable) {
 875                 this.selectables.push(t_id);
 876             }
 877         };
 878         if (this.selectables.length == 0) {
 879             this.log_msg('none');
 880             terminal.blink_screen();
 881             this.switch_mode('play');
 882             return;
 883         } else {
 884             for (let [i, t_id] of this.selectables.entries()) {
 885                 const t = game.things[t_id];
 886                 this.log_msg(i + ': ' + explorer.get_thing_info(t));
 887             }
 888         }
 889     } else if (this.mode.name == 'drop_thing') {
 890         this.log_msg('Direction to drop thing to:');
 891         this.selectables = ['HERE'].concat(Object.values(this.movement_keys));
 892         for (let [i, direction] of this.selectables.entries()) {
 893             this.log_msg(i + ': ' + direction);
 894         };
 895     } else if (this.mode.name == 'command_thing') {
 896         server.send(['TASK:COMMAND', 'HELP']);
 897     } else if (this.mode.name == 'control_pw_pw') {
 898         this.log_msg('@ enter protection password for "' + this.tile_control_char + '":');
 899     } else if (this.mode.name == 'control_tile_draw') {
 900         this.log_msg('@ can draw protection character "' + this.tile_control_char + '", turn drawing on/off with [' + this.keys.toggle_tile_draw + '], finish with [' +  this.keys.switch_to_admin_enter + '].')
 901     }
 902     this.full_refresh();
 903   },
 904   offset_links: function(offset, links) {
 905       for (let y in links) {
 906           let real_y = offset[0] + parseInt(y);
 907           if (!this.links[real_y]) {
 908               this.links[real_y] = [];
 909           }
 910           for (let link of links[y]) {
 911               const offset_link = [link[0] + offset[1], link[1] + offset[1], link[2]];
 912               this.links[real_y].push(offset_link);
 913           }
 914       }
 915   },
 916   restore_input_values: function() {
 917       if (this.mode.name == 'annotate' && explorer.position in explorer.annotations) {
 918           let info = explorer.annotations[explorer.position];
 919           if (info != "(none)") {
 920               this.inputEl.value = info;
 921           }
 922       } else if (this.mode.name == 'portal' && explorer.position in game.portals) {
 923           let portal = game.portals[explorer.position]
 924           this.inputEl.value = portal;
 925       } else if (this.mode.name == 'password') {
 926           this.inputEl.value = this.password;
 927       } else if (this.mode.name == 'name_thing') {
 928           let t = game.get_thing(this.selected_thing_id);
 929           if (t && t.name_) {
 930               this.inputEl.value = t.name_;
 931           }
 932       } else if (this.mode.name == 'admin_thing_protect') {
 933           let t = game.get_thing(this.selected_thing_id);
 934           if (t && t.protection) {
 935               this.inputEl.value = t.protection;
 936           }
 937       }
 938   },
 939   recalc_input_lines: function() {
 940       if (this.mode.has_input_prompt) {
 941           let _ = null;
 942           [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value, this.window_width);
 943       } else {
 944           this.input_lines = [];
 945       }
 946       this.height_input = this.input_lines.length;
 947   },
 948   msg_into_lines_of_width: function(msg, width) {
 949       function push_inner_link(y, end_x) {
 950           if (!inner_links[y]) {
 951               inner_links[y] = [];
 952           };
 953           inner_links[y].push([url_start_x, end_x, url]);
 954       };
 955       const matches = msg.matchAll(/https?:\/\/[^\s]+/g)
 956       let link_data = {};
 957       let url_ends = [];
 958       for (const match of matches) {
 959           const url = match[0];
 960           const url_start = match.index;
 961           const url_end = match.index + match[0].length;
 962           link_data[url_start] = url;
 963           url_ends.push(url_end);
 964       }
 965       let url_start_x = 0;
 966       let url = '';
 967       let inner_links = {};
 968       let in_link = false;
 969       let chunk = "";
 970       let lines = [];
 971       for (let i = 0, x = 0, y = 0; i < msg.length; i++, x++) {
 972           if (x >= width || msg[i] == "\n") {
 973               if (in_link) {
 974                   push_inner_link(y, chunk.length);
 975                   url_start_x = 0;
 976                   if (url_ends[0] == i) {
 977                       in_link = false;
 978                       url_ends.shift();
 979                   }
 980               };
 981               lines.push(chunk);
 982               chunk = "";
 983               x = 0;
 984               if (msg[i] == "\n") {
 985                   x -= 1;
 986               };
 987               y += 1;
 988           };
 989           if (msg[i] != "\n") {
 990               chunk += msg[i];
 991           };
 992           if (i in link_data) {
 993               url_start_x = x;
 994               url = link_data[i];
 995               in_link = true;
 996           } else if (url_ends[0] == i) {
 997               url_ends.shift();
 998               push_inner_link(y, x);
 999               in_link = false;
1000           }
1001       }
1002       lines.push(chunk);
1003       if (in_link) {
1004           push_inner_link(lines.length - 1, chunk.length);
1005       }
1006       return [lines, inner_links];
1007   },
1008   log_msg: function(msg) {
1009       this.log.push(msg);
1010       while (this.log.length > 100) {
1011         this.log.shift();
1012       };
1013       this.full_refresh();
1014   },
1015   pick_selectable: function(task_name) {
1016       const i = parseInt(this.inputEl.value);
1017       if (isNaN(i) || i < 0 || i >= this.selectables.length) {
1018           tui.log_msg('? invalid index, aborted');
1019       } else {
1020           server.send(['TASK:' + task_name, tui.selectables[i]]);
1021       }
1022       this.inputEl.value = "";
1023       this.switch_mode('play');
1024   },
1025   draw_map: function() {
1026     if (!game.turn_complete && this.map_lines.length == 0) {
1027         return;
1028     }
1029     if (game.turn_complete) {
1030         let map_lines_split = [];
1031         let line = [];
1032         for (let i = 0, j = 0; i < game.map.length; i++, j++) {
1033             if (j == game.map_size[1]) {
1034                 map_lines_split.push(line);
1035                 line = [];
1036                 j = 0;
1037             };
1038             if (this.map_mode == 'protections') {
1039                 line.push(game.map_control[i] + ' ');
1040             } else {
1041                 line.push(game.map[i] + ' ');
1042             }
1043         };
1044         map_lines_split.push(line);
1045         if (this.map_mode == 'terrain + annotations') {
1046             for (const coordinate of explorer.info_hints) {
1047                 map_lines_split[coordinate[0]][coordinate[1]] = 'A ';
1048             }
1049         } else if (this.map_mode == 'terrain + things') {
1050             for (const p in game.portals) {
1051                 let coordinate = p.split(',')
1052                 let original = map_lines_split[coordinate[0]][coordinate[1]];
1053                 map_lines_split[coordinate[0]][coordinate[1]] = original[0] + 'P';
1054             }
1055             let used_positions = [];
1056             function draw_thing(t, used_positions) {
1057                 let symbol = game.thing_types[t.type_];
1058                 let meta_char = ' ';
1059                 if (t.thing_char) {
1060                     meta_char = t.thing_char;
1061                 }
1062                 if (used_positions.includes(t.position.toString())) {
1063                     meta_char = '+';
1064                 };
1065                 if (t.carrying) {
1066                     meta_char = '$';
1067                 }
1068                 map_lines_split[t.position[0]][t.position[1]] = symbol + meta_char;
1069                 used_positions.push(t.position.toString());
1070             }
1071             for (const thing_id in game.things) {
1072                 let t = game.things[thing_id];
1073                 if (t.type_ != 'Player') {
1074                     draw_thing(t, used_positions);
1075                 }
1076             };
1077             for (const thing_id in game.things) {
1078                 let t = game.things[thing_id];
1079                 if (t.type_ == 'Player') {
1080                     draw_thing(t, used_positions);
1081                 }
1082             };
1083         }
1084         if (tui.mode.shows_info || tui.mode.name == 'control_tile_draw') {
1085             map_lines_split[explorer.position[0]][explorer.position[1]] = '??';
1086         } else if (tui.map_mode != 'terrain + things') {
1087             map_lines_split[game.player.position[0]][game.player.position[1]] = '??';
1088         }
1089         this.map_lines = []
1090         if (game.map_geometry == 'Square') {
1091             for (let line_split of map_lines_split) {
1092                 this.map_lines.push(line_split.join(''));
1093             };
1094         } else if (game.map_geometry == 'Hex') {
1095             let indent = 0
1096             for (let line_split of map_lines_split) {
1097                 this.map_lines.push(' '.repeat(indent) + line_split.join(''));
1098                 if (indent == 0) {
1099                     indent = 1;
1100                 } else {
1101                     indent = 0;
1102                 };
1103             };
1104         }
1105         let window_center = [terminal.rows / 2, this.window_width / 2];
1106         let center_position = [game.player.position[0], game.player.position[1]];
1107         if (tui.mode.shows_info || tui.mode.name == 'control_tile_draw') {
1108             center_position = [explorer.position[0], explorer.position[1]];
1109         }
1110         center_position[1] = center_position[1] * 2;
1111         this.offset = [center_position[0] - window_center[0],
1112                        center_position[1] - window_center[1]]
1113         if (game.map_geometry == 'Hex' && this.offset[0] % 2) {
1114             this.offset[1] += 1;
1115         };
1116     };
1117     let term_y = Math.max(0, -this.offset[0]);
1118     let term_x = Math.max(0, -this.offset[1]);
1119     let map_y = Math.max(0, this.offset[0]);
1120     let map_x = Math.max(0, this.offset[1]);
1121     for (; term_y < terminal.rows && map_y < this.map_lines.length; term_y++, map_y++) {
1122         let to_draw = this.map_lines[map_y].slice(map_x, this.window_width + this.offset[1]);
1123         terminal.write(term_y, term_x, to_draw);
1124     }
1125   },
1126   draw_mode_line: function() {
1127       let help = 'hit [' + this.keys.help + '] for help';
1128       if (this.mode.has_input_prompt) {
1129           help = 'enter /help for help';
1130       }
1131       terminal.write(0, this.window_width, 'MODE: ' + this.mode.short_desc + ' – ' + help);
1132   },
1133   draw_turn_line: function(n) {
1134       if (game.turn_complete) {
1135           terminal.write(1, this.window_width, 'TURN: ' + game.turn);
1136       }
1137   },
1138   draw_history: function() {
1139       let log_display_lines = [];
1140       let log_links = {};
1141       let y_offset_in_log = 0;
1142       for (let line of this.log) {
1143           let [new_lines, link_data] = this.msg_into_lines_of_width(line,
1144                                                                     this.window_width)
1145           log_display_lines = log_display_lines.concat(new_lines);
1146           for (const y in link_data) {
1147               const rel_y = y_offset_in_log + parseInt(y);
1148               log_links[rel_y] = [];
1149               for (let link of link_data[y]) {
1150                   log_links[rel_y].push(link);
1151               }
1152           }
1153           y_offset_in_log += new_lines.length;
1154       };
1155       let i = log_display_lines.length - 1;
1156       for (let y = terminal.rows - 1 - this.height_input;
1157            y >= this.height_header && i >= 0;
1158            y--, i--) {
1159           terminal.write(y, this.window_width, log_display_lines[i]);
1160       }
1161       for (const key of Object.keys(log_links)) {
1162           if (parseInt(key) <= i) {
1163               delete log_links[key];
1164           }
1165       }
1166       let offset = [terminal.rows - this.height_input - log_display_lines.length,
1167                     this.window_width];
1168       this.offset_links(offset, log_links);
1169   },
1170   draw_info: function() {
1171       const info = "MAP VIEW: " + tui.map_mode + "\n" + explorer.get_info();
1172       let [lines, link_data] = this.msg_into_lines_of_width(info, this.window_width);
1173       let offset = [this.height_header, this.window_width];
1174       for (let y = offset[0], i = 0; y < terminal.rows && i < lines.length; y++, i++) {
1175         terminal.write(y, offset[1], lines[i]);
1176       }
1177       this.offset_links(offset, link_data);
1178   },
1179   draw_input: function() {
1180     if (this.mode.has_input_prompt) {
1181         for (let y = terminal.rows - this.height_input, i = 0; i < this.input_lines.length; y++, i++) {
1182             terminal.write(y, this.window_width, this.input_lines[i]);
1183         }
1184     }
1185   },
1186   draw_help: function() {
1187       let movement_keys_desc = '';
1188       if (!this.mode.is_intro) {
1189           movement_keys_desc = Object.keys(this.movement_keys).join(',');
1190       }
1191       let content = this.mode.short_desc + " help\n\n" + this.mode.help_intro + "\n\n";
1192       if (this.mode.available_actions.length > 0) {
1193           content += "Available actions:\n";
1194           for (let action of this.mode.available_actions) {
1195               if (Object.keys(this.action_tasks).includes(action)) {
1196                   if (!this.task_action_on(action)) {
1197                       continue;
1198                   }
1199               }
1200               if (action == 'move_explorer') {
1201                   action = 'move';
1202               }
1203               if (action == 'move') {
1204                   content += "[" + movement_keys_desc + "] – move\n"
1205               } else {
1206                   content += "[" + this.keys[action] + "] – " + key_descriptions[action] + "\n";
1207               }
1208           }
1209           content += '\n';
1210       }
1211       content += this.mode.list_available_modes();
1212       let start_x = 0;
1213       if (!this.mode.has_input_prompt) {
1214           start_x = this.window_width
1215       }
1216       terminal.drawBox(0, start_x, terminal.rows, this.window_width);
1217       let [lines, _] = this.msg_into_lines_of_width(content, this.window_width);
1218       for (let y = 0, i = 0; y < terminal.rows && i < lines.length; y++, i++) {
1219           terminal.write(y, start_x, lines[i]);
1220       }
1221   },
1222   toggle_tile_draw: function() {
1223       if (tui.tile_draw) {
1224           tui.tile_draw = false;
1225       } else {
1226           tui.tile_draw = true;
1227       }
1228   },
1229   toggle_map_mode: function() {
1230       if (tui.map_mode == 'terrain only') {
1231           tui.map_mode = 'terrain + annotations';
1232       } else if (tui.map_mode == 'terrain + annotations') {
1233           tui.map_mode = 'terrain + things';
1234       } else if (tui.map_mode == 'terrain + things') {
1235           tui.map_mode = 'protections';
1236       } else if (tui.map_mode == 'protections') {
1237           tui.map_mode = 'terrain only';
1238       }
1239   },
1240   full_refresh: function() {
1241     this.links = {};
1242     terminal.drawBox(0, 0, terminal.rows, terminal.cols);
1243     this.recalc_input_lines();
1244     if (this.mode.is_intro) {
1245         this.draw_history();
1246         this.draw_input();
1247     } else {
1248         this.draw_map();
1249         this.draw_turn_line();
1250         this.draw_mode_line();
1251         if (this.mode.shows_info) {
1252           this.draw_info();
1253         } else {
1254           this.draw_history();
1255         }
1256         this.draw_input();
1257     }
1258     if (this.show_help) {
1259         this.draw_help();
1260     }
1261     terminal.refresh();
1262   }
1263 }
1264
1265 let game = {
1266     init: function() {
1267         this.things = {};
1268         this.turn = -1;
1269         this.map = "";
1270         this.map_control = "";
1271         this.map_size = [0,0];
1272         this.player_id = -1;
1273         this.portals = {};
1274         this.tasks = {};
1275     },
1276     get_thing: function(id_, create_if_not_found=false) {
1277         if (id_ in game.things) {
1278             return game.things[id_];
1279         } else if (create_if_not_found) {
1280             let t = new Thing([0,0]);
1281             game.things[id_] = t;
1282             return t;
1283         };
1284     },
1285     move: function(start_position, direction) {
1286         let target = [start_position[0], start_position[1]];
1287         if (direction == 'LEFT') {
1288             target[1] -= 1;
1289         } else if (direction == 'RIGHT') {
1290             target[1] += 1;
1291         } else if (game.map_geometry == 'Square') {
1292             if (direction == 'UP') {
1293                 target[0] -= 1;
1294             } else if (direction == 'DOWN') {
1295                 target[0] += 1;
1296             };
1297         } else if (game.map_geometry == 'Hex') {
1298             let start_indented = start_position[0] % 2;
1299             if (direction == 'UPLEFT') {
1300                 target[0] -= 1;
1301                 if (!start_indented) {
1302                     target[1] -= 1;
1303                 }
1304             } else if (direction == 'UPRIGHT') {
1305                 target[0] -= 1;
1306                 if (start_indented) {
1307                     target[1] += 1;
1308                 }
1309             } else if (direction == 'DOWNLEFT') {
1310                 target[0] += 1;
1311                 if (!start_indented) {
1312                     target[1] -= 1;
1313                 }
1314             } else if (direction == 'DOWNRIGHT') {
1315                 target[0] += 1;
1316                 if (start_indented) {
1317                     target[1] += 1;
1318                 }
1319             };
1320         };
1321         if (target[0] < 0 || target[1] < 0 ||
1322             target[0] >= this.map_size[0] || target[1] >= this.map_size[1]) {
1323             return null;
1324         };
1325         return target;
1326     },
1327     teleport: function() {
1328         if (game.player.position in this.portals) {
1329             server.reconnect_to(this.portals[game.player.position]);
1330         } else {
1331             terminal.blink_screen();
1332             tui.log_msg('? not standing on portal')
1333         }
1334     }
1335 }
1336
1337 game.init();
1338 tui.init();
1339 tui.full_refresh();
1340 server.init(websocket_location);
1341
1342 let explorer = {
1343     position: [0,0],
1344     annotations: {},
1345     info_cached: false,
1346     move: function(direction) {
1347         let target = game.move(this.position, direction);
1348         if (target) {
1349             this.position = target
1350             this.info_cached = false;
1351             if (tui.tile_draw) {
1352                 this.send_tile_control_command();
1353             }
1354         } else {
1355             terminal.blink_screen();
1356         };
1357     },
1358     update_annotations: function(yx, str) {
1359         this.annotations[yx] = str;
1360         if (tui.mode.name == 'study') {
1361             tui.full_refresh();
1362         }
1363     },
1364     empty_annotations: function() {
1365         this.annotations = {};
1366         if (tui.mode.name == 'study') {
1367             tui.full_refresh();
1368         }
1369     },
1370     get_info: function() {
1371         if (this.info_cached) {
1372             return this.info_cached;
1373         }
1374         let info_to_cache = '';
1375         let position_i = this.position[0] * game.map_size[1] + this.position[1];
1376         if (game.fov[position_i] != '.') {
1377             info_to_cache += 'outside field of view';
1378         } else {
1379             for (let t_id in game.things) {
1380                  let t = game.things[t_id];
1381                  if (t.position[0] == this.position[0] && t.position[1] == this.position[1]) {
1382                      info_to_cache += "THING: " + this.get_thing_info(t);
1383                      let protection = t.protection;
1384                      if (protection == '.') {
1385                          protection = 'none';
1386                      }
1387                      info_to_cache += " / protection: " + protection + "\n";
1388                      if (t.hat) {
1389                          info_to_cache += t.hat.slice(0, 6) + '\n';
1390                          info_to_cache += t.hat.slice(6, 12) + '\n';
1391                          info_to_cache += t.hat.slice(12, 18) + '\n';
1392                      }
1393                      if (t.face) {
1394                          info_to_cache += t.face.slice(0, 6) + '\n';
1395                          info_to_cache += t.face.slice(6, 12) + '\n';
1396                          info_to_cache += t.face.slice(12, 18) + '\n';
1397                      }
1398                  }
1399             }
1400             let terrain_char = game.map[position_i]
1401             let terrain_desc = '?'
1402             if (game.terrains[terrain_char]) {
1403                 terrain_desc = game.terrains[terrain_char];
1404             };
1405             info_to_cache += 'TERRAIN: "' + terrain_char + '" / ' + terrain_desc + "\n";
1406             let protection = game.map_control[position_i];
1407             if (protection == '.') {
1408                 protection = 'unprotected';
1409             };
1410             info_to_cache += 'PROTECTION: ' + protection + '\n';
1411             if (this.position in game.portals) {
1412                 info_to_cache += "PORTAL: " + game.portals[this.position] + "\n";
1413             }
1414             if (this.position in this.annotations) {
1415                 info_to_cache += "ANNOTATION: " + this.annotations[this.position];
1416             }
1417         }
1418         this.info_cached = info_to_cache;
1419         return this.info_cached;
1420     },
1421     get_thing_info: function(t) {
1422         const symbol = game.thing_types[t.type_];
1423         let info = t.type_ + " / " + symbol;
1424         if (t.thing_char) {
1425             info += t.thing_char;
1426         };
1427         if (t.name_) {
1428             info += " (" + t.name_ + ")";
1429         }
1430         if (t.installed) {
1431             info += " / installed";
1432         }
1433         return info;
1434     },
1435     annotate: function(msg) {
1436         if (msg.length == 0) {
1437             msg = " ";  // triggers annotation deletion
1438         }
1439         server.send(["ANNOTATE", unparser.to_yx(explorer.position), msg, tui.password]);
1440     },
1441     set_portal: function(msg) {
1442         if (msg.length == 0) {
1443             msg = " ";  // triggers portal deletion
1444         }
1445         server.send(["PORTAL", unparser.to_yx(explorer.position), msg, tui.password]);
1446     },
1447     send_tile_control_command: function() {
1448         server.send(["SET_TILE_CONTROL", unparser.to_yx(this.position), tui.tile_control_char]);
1449     }
1450 }
1451
1452 tui.inputEl.addEventListener('input', (event) => {
1453     if (tui.mode.has_input_prompt) {
1454         let max_length = tui.window_width * terminal.rows - tui.input_prompt.length;
1455         if (tui.inputEl.value.length > max_length) {
1456             tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
1457         };
1458     } else if (tui.mode.name == 'write' && tui.inputEl.value.length > 0) {
1459         server.send(["TASK:WRITE", tui.inputEl.value[0], tui.password]);
1460         tui.switch_mode('edit');
1461     }
1462     tui.full_refresh();
1463 }, false);
1464 document.onclick = function() {
1465     tui.show_help = false;
1466 };
1467 tui.inputEl.addEventListener('keydown', (event) => {
1468     tui.show_help = false;
1469     if (event.key == 'Enter') {
1470         event.preventDefault();
1471     }
1472     if ((!tui.mode.is_intro && event.key == 'Escape')
1473         || (tui.mode.has_input_prompt && event.key == 'Enter'
1474             && tui.inputEl.value.length == 0
1475             && ['chat', 'command_thing', 'take_thing', 'drop_thing',
1476                 'admin_enter'].includes(tui.mode.name))) {
1477         if (!['chat', 'play', 'study', 'edit'].includes(tui.mode.name)) {
1478             tui.log_msg('@ aborted');
1479         }
1480         tui.switch_mode('play');
1481     } else if (tui.mode.has_input_prompt && event.key == 'Enter' && tui.inputEl.value == '/help') {
1482         tui.show_help = true;
1483         tui.inputEl.value = "";
1484         tui.restore_input_values();
1485     } else if (!tui.mode.has_input_prompt && event.key == tui.keys.help
1486                && !tui.mode.is_single_char_entry) {
1487         tui.show_help = true;
1488     } else if (tui.mode.name == 'login' && event.key == 'Enter') {
1489         tui.login_name = tui.inputEl.value;
1490         server.send(['LOGIN', tui.inputEl.value]);
1491         tui.inputEl.value = "";
1492     } else if (tui.mode.name == 'enter_face' && event.key == 'Enter') {
1493         if (tui.inputEl.value.length != 18) {
1494             tui.log_msg('? wrong input length, aborting');
1495         } else {
1496             server.send(['PLAYER_FACE', tui.inputEl.value]);
1497         }
1498         tui.inputEl.value = "";
1499         tui.switch_mode('edit');
1500     } else if (tui.mode.name == 'command_thing' && event.key == 'Enter') {
1501         server.send(['TASK:COMMAND', tui.inputEl.value]);
1502         tui.inputEl.value = "";
1503     } else if (tui.mode.name == 'take_thing' && event.key == 'Enter') {
1504         tui.pick_selectable('PICK_UP');
1505     } else if (tui.mode.name == 'drop_thing' && event.key == 'Enter') {
1506         tui.pick_selectable('DROP');
1507     } else if (tui.mode.name == 'control_pw_pw' && event.key == 'Enter') {
1508         if (tui.inputEl.value.length == 0) {
1509             tui.log_msg('@ aborted');
1510         } else {
1511             server.send(['SET_MAP_CONTROL_PASSWORD',
1512                         tui.tile_control_char, tui.inputEl.value]);
1513             tui.log_msg('@ sent new password for protection character "' + tui.tile_control_char + '".');
1514         }
1515         tui.switch_mode('admin');
1516     } else if (tui.mode.name == 'portal' && event.key == 'Enter') {
1517         explorer.set_portal(tui.inputEl.value);
1518         tui.switch_mode('edit');
1519     } else if (tui.mode.name == 'name_thing' && event.key == 'Enter') {
1520         if (tui.inputEl.value.length == 0) {
1521             tui.inputEl.value = " ";
1522         }
1523         server.send(["THING_NAME", tui.selected_thing_id, tui.inputEl.value,
1524                      tui.password]);
1525         tui.switch_mode('edit');
1526     } else if (tui.mode.name == 'annotate' && event.key == 'Enter') {
1527         explorer.annotate(tui.inputEl.value);
1528         tui.switch_mode('edit');
1529     } else if (tui.mode.name == 'password' && event.key == 'Enter') {
1530         if (tui.inputEl.value.length == 0) {
1531             tui.inputEl.value = " ";
1532         }
1533         tui.password = tui.inputEl.value
1534         tui.switch_mode('edit');
1535     } else if (tui.mode.name == 'admin_enter' && event.key == 'Enter') {
1536         server.send(['BECOME_ADMIN', tui.inputEl.value]);
1537         tui.switch_mode('play');
1538     } else if (tui.mode.name == 'control_pw_type' && event.key == 'Enter') {
1539         if (tui.inputEl.value.length != 1) {
1540             tui.log_msg('@ entered non-single-char, therefore aborted');
1541             tui.switch_mode('admin');
1542         } else {
1543             tui.tile_control_char = tui.inputEl.value[0];
1544             tui.switch_mode('control_pw_pw');
1545         }
1546     } else if (tui.mode.name == 'control_tile_type' && event.key == 'Enter') {
1547         if (tui.inputEl.value.length != 1) {
1548             tui.log_msg('@ entered non-single-char, therefore aborted');
1549             tui.switch_mode('admin');
1550         } else {
1551             tui.tile_control_char = tui.inputEl.value[0];
1552             tui.switch_mode('control_tile_draw');
1553         }
1554     } else if (tui.mode.name == 'admin_thing_protect' && event.key == 'Enter') {
1555         if (tui.inputEl.value.length != 1) {
1556             tui.log_msg('@ entered non-single-char, therefore aborted');
1557         } else {
1558             server.send(['THING_PROTECTION', tui.selected_thing_id, tui.inputEl.value])
1559             tui.log_msg('@ sent new protection character for thing');
1560         }
1561         tui.switch_mode('admin');
1562     } else if (tui.mode.name == 'chat' && event.key == 'Enter') {
1563         let tokens = parser.tokenize(tui.inputEl.value);
1564         if (tokens.length > 0 && tokens[0].length > 0) {
1565             if (tui.inputEl.value[0][0] == '/') {
1566                 if (tokens[0].slice(1) == 'nick') {
1567                     if (tokens.length > 1) {
1568                         server.send(['NICK', tokens[1]]);
1569                     } else {
1570                         tui.log_msg('? need new name');
1571                     }
1572                 } else {
1573                     tui.log_msg('? unknown command');
1574                 }
1575             } else {
1576                     server.send(['ALL', tui.inputEl.value]);
1577             }
1578         } else if (tui.inputEl.valuelength > 0) {
1579                 server.send(['ALL', tui.inputEl.value]);
1580         }
1581         tui.inputEl.value = "";
1582     } else if (tui.mode.name == 'play') {
1583           if (tui.mode.mode_switch_on_key(event)) {
1584               null;
1585           } else if (event.key === tui.keys.consume && tui.task_action_on('consume')) {
1586               server.send(["TASK:INTOXICATE"]);
1587           } else if (event.key === tui.keys.door && tui.task_action_on('door')) {
1588               server.send(["TASK:DOOR"]);
1589           } else if (event.key === tui.keys.install && tui.task_action_on('install')) {
1590               server.send(["TASK:INSTALL"]);
1591           } else if (event.key === tui.keys.wear && tui.task_action_on('wear')) {
1592               server.send(["TASK:WEAR"]);
1593           } else if (event.key === tui.keys.spin && tui.task_action_on('spin')) {
1594               server.send(["TASK:SPIN"]);
1595           } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1596               server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1597           } else if (event.key === tui.keys.teleport) {
1598               game.teleport();
1599           };
1600     } else if (tui.mode.name == 'study') {
1601         if (tui.mode.mode_switch_on_key(event)) {
1602               null;
1603         } else if (event.key in tui.movement_keys) {
1604             explorer.move(tui.movement_keys[event.key]);
1605         } else if (event.key == tui.keys.toggle_map_mode) {
1606             tui.toggle_map_mode();
1607         };
1608     } else if (tui.mode.name == 'control_tile_draw') {
1609         if (tui.mode.mode_switch_on_key(event)) {
1610             null;
1611         } else if (event.key in tui.movement_keys) {
1612             explorer.move(tui.movement_keys[event.key]);
1613         } else if (event.key === tui.keys.toggle_tile_draw) {
1614             tui.toggle_tile_draw();
1615         };
1616     } else if (tui.mode.name == 'admin') {
1617         if (tui.mode.mode_switch_on_key(event)) {
1618               null;
1619         } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1620             server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1621         };
1622     } else if (tui.mode.name == 'edit') {
1623         if (tui.mode.mode_switch_on_key(event)) {
1624               null;
1625         } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1626             server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1627         } else if (event.key === tui.keys.flatten && tui.task_action_on('flatten')) {
1628             server.send(["TASK:FLATTEN_SURROUNDINGS", tui.password]);
1629         } else if (event.key == tui.keys.toggle_map_mode) {
1630             tui.toggle_map_mode();
1631         }
1632     }
1633     tui.full_refresh();
1634 }, false);
1635
1636 rows_selector.addEventListener('input', function() {
1637     if (rows_selector.value % 4 != 0 || rows_selector.value < 24) {
1638         return;
1639     }
1640     window.localStorage.setItem(rows_selector.id, rows_selector.value);
1641     terminal.initialize();
1642     tui.full_refresh();
1643 }, false);
1644 cols_selector.addEventListener('input', function() {
1645     if (cols_selector.value % 4 != 0 || cols_selector.value < 80) {
1646         return;
1647     }
1648     window.localStorage.setItem(cols_selector.id, cols_selector.value);
1649     terminal.initialize();
1650     tui.window_width = terminal.cols / 2,
1651     tui.full_refresh();
1652 }, false);
1653 for (let key_selector of key_selectors) {
1654     key_selector.addEventListener('input', function() {
1655         window.localStorage.setItem(key_selector.id, key_selector.value);
1656         tui.init_keys();
1657     }, false);
1658 }
1659 window.setInterval(function() {
1660     if (server.websocket.readyState == 1) {
1661         server.send(['PING']);
1662     } else if (server.websocket.readyState != 0) {
1663         server.reconnect_to(server.url);
1664         tui.log_msg('@ attempting reconnect …')
1665     }
1666 }, 1000);
1667 window.setInterval(function() {
1668     let val = "?";
1669     let span_decoration = "none";
1670     if (document.activeElement == tui.inputEl) {
1671         val = "on (click outside terminal to change)";
1672     } else {
1673         val = "off (click into terminal to change)";
1674         span_decoration = "line-through";
1675     };
1676     document.getElementById("keyboard_control").textContent = val;
1677     for (const span of document.querySelectorAll('.keyboard_controlled')) {
1678         span.style.textDecoration = span_decoration;
1679     }
1680 }, 100);
1681 document.getElementById("terminal").onclick = function() {
1682     tui.inputEl.focus();
1683 };
1684 document.getElementById("help").onclick = function() {
1685     tui.show_help = true;
1686     tui.full_refresh();
1687 };
1688 for (const switchEl  of document.querySelectorAll('[id^="switch_to_"]')) {
1689     const mode = switchEl.id.slice("switch_to_".length);
1690     switchEl.onclick = function() {
1691         tui.switch_mode(mode);
1692         tui.full_refresh();
1693     }
1694 };
1695 document.getElementById("toggle_tile_draw").onclick = function() {
1696     tui.toggle_tile_draw();
1697 }
1698 document.getElementById("toggle_map_mode").onclick = function() {
1699     tui.toggle_map_mode();
1700     tui.full_refresh();
1701 };
1702 document.getElementById("flatten").onclick = function() {
1703     server.send(['TASK:FLATTEN_SURROUNDINGS', tui.password]);
1704 };
1705 document.getElementById("door").onclick = function() {
1706     server.send(['TASK:DOOR']);
1707 };
1708 document.getElementById("consume").onclick = function() {
1709     server.send(['TASK:INTOXICATE']);
1710 };
1711 document.getElementById("install").onclick = function() {
1712     server.send(['TASK:INSTALL']);
1713 };
1714 document.getElementById("wear").onclick = function() {
1715     server.send(['TASK:WEAR']);
1716 };
1717 document.getElementById("spin").onclick = function() {
1718     server.send(['TASK:SPIN']);
1719 };
1720 document.getElementById("teleport").onclick = function() {
1721     game.teleport();
1722 };
1723 for (const move_button of document.querySelectorAll('[id*="_move_"]')) {
1724     if (move_button.id.startsWith('key_')) {  // not a move button
1725         continue;
1726     };
1727     let direction = move_button.id.split('_')[2].toUpperCase();
1728     move_button.onclick = function() {
1729         if (tui.mode.available_actions.includes("move")) {
1730             server.send(['TASK:MOVE', direction]);
1731         } else if (tui.mode.available_actions.includes("move_explorer")) {
1732             explorer.move(direction);
1733             tui.full_refresh();
1734         };
1735     };
1736 };
1737 </script>
1738 </body></html>