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
 767     function fail(msg, return_mode) {
 768         tui.log_msg('? ' + msg);
 769         terminal.blink_screen();
 770         this.switch_mode(return_mode);
 771     }
 772
 773     if (this.mode && this.mode.name == 'control_tile_draw') {
 774         tui.log_msg('@ finished tile protection drawing.')
 775     }
 776     this.tile_draw = false;
 777       if (mode_name == 'command_thing' && (!game.player.carrying
 778                                            || !game.player.carrying.commandable)) {
 779         return fail('not carrying anything commandable', 'play');
 780     };
 781     if (mode_name == 'take_thing' && game.player.carrying) {
 782         return fail('already carrying something', 'play');
 783     };
 784     if (mode_name == 'drop_thing' && !game.player.carrying) {
 785         return fail('not carrying anything droppable', 'play');
 786     }
 787     if (mode_name == 'admin_enter' && this.is_admin) {
 788         mode_name = 'admin';
 789     } else if (['name_thing', 'admin_thing_protect'].includes(mode_name)) {
 790         let thing_id = null;
 791         for (let t_id in game.things) {
 792             if (t_id == game.player_id) {
 793                 continue;
 794             }
 795             let t = game.things[t_id];
 796             if (game.player.position[0] == t.position[0]
 797                 && game.player.position[1] == t.position[1]) {
 798                 thing_id = t_id;
 799                 break;
 800             }
 801         }
 802         if (!thing_id) {
 803             return fail('not standing over thing', 'fail');
 804         } else {
 805             this.selected_thing_id = thing_id;
 806         }
 807     };
 808     this.mode = this['mode_' + mode_name];
 809     if (["control_tile_draw", "control_tile_type", "control_pw_type"].includes(this.mode.name)) {
 810         this.map_mode = 'protections';
 811     } else if (this.mode.name != "edit") {
 812         this.map_mode = 'terrain + things';
 813     };
 814     if (this.mode.has_input_prompt || this.mode.is_single_char_entry) {
 815         this.inputEl.focus();
 816     }
 817     if (game.player_id in game.things && (this.mode.shows_info || this.mode.name == 'control_tile_draw')) {
 818         explorer.position = game.player.position;
 819     }
 820     this.inputEl.value = "";
 821     this.restore_input_values();
 822     for (let el of document.getElementsByTagName("button")) {
 823         el.disabled = true;
 824     }
 825     document.getElementById("help").disabled = false;
 826     for (const action of this.mode.available_actions) {
 827         if (["move", "move_explorer"].includes(action)) {
 828             for (const move_key of document.querySelectorAll('[id*="_move_"]')) {
 829                 move_key.disabled = false;
 830             }
 831         } else if (Object.keys(this.action_tasks).includes(action)) {
 832             if (this.task_action_on(action)) {
 833                 document.getElementById(action).disabled = false;
 834             }
 835         } else {
 836             document.getElementById(action).disabled = false;
 837         };
 838     }
 839     for (const mode_name of this.mode.available_modes) {
 840             document.getElementById('switch_to_' + mode_name).disabled = false;
 841     }
 842     if (this.mode.intro_msg.length > 0) {
 843         this.log_msg(this.mode.intro_msg);
 844     }
 845     if (this.mode.name == 'login') {
 846         if (this.login_name) {
 847             server.send(['LOGIN', this.login_name]);
 848         } else {
 849             this.log_msg("? need login name");
 850         }
 851     } else if (this.mode.is_single_char_entry) {
 852         this.show_help = true;
 853     } else if (this.mode.name == 'take_thing') {
 854         this.log_msg("Portable things in reach for pick-up:");
 855         const y = game.player.position[0]
 856         const x = game.player.position[1]
 857         let select_range = [y.toString() + ':' + x.toString(),
 858                             (y + 0).toString() + ':' + (x - 1).toString(),
 859                             (y + 0).toString() + ':' + (x + 1).toString(),
 860                             (y - 1).toString() + ':' + (x).toString(),
 861                             (y + 1).toString() + ':' + (x).toString()];
 862         if (game.map_geometry == 'Hex') {
 863             if (y % 2) {
 864                 select_range.push((y - 1).toString() + ':' + (x + 1).toString());
 865                 select_range.push((y + 1).toString() + ':' + (x + 1).toString());
 866             } else {
 867                 select_range.push((y - 1).toString() + ':' + (x - 1).toString());
 868                 select_range.push((y + 1).toString() + ':' + (x - 1).toString());
 869             }
 870         };
 871         this.selectables = [];
 872         for (const t_id in game.things) {
 873             const t = game.things[t_id];
 874             if (select_range.includes(t.position[0].toString()
 875                                       + ':' + t.position[1].toString())
 876                 && t.portable) {
 877                 this.selectables.push(t_id);
 878             }
 879         };
 880         if (this.selectables.length == 0) {
 881             this.log_msg('none');
 882             terminal.blink_screen();
 883             this.switch_mode('play');
 884             return;
 885         } else {
 886             for (let [i, t_id] of this.selectables.entries()) {
 887                 const t = game.things[t_id];
 888                 this.log_msg(i + ': ' + explorer.get_thing_info(t));
 889             }
 890         }
 891     } else if (this.mode.name == 'drop_thing') {
 892         this.log_msg('Direction to drop thing to:');
 893         this.selectables = ['HERE'].concat(Object.values(this.movement_keys));
 894         for (let [i, direction] of this.selectables.entries()) {
 895             this.log_msg(i + ': ' + direction);
 896         };
 897     } else if (this.mode.name == 'command_thing') {
 898         server.send(['TASK:COMMAND', 'HELP']);
 899     } else if (this.mode.name == 'control_pw_pw') {
 900         this.log_msg('@ enter protection password for "' + this.tile_control_char + '":');
 901     } else if (this.mode.name == 'control_tile_draw') {
 902         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 + '].')
 903     }
 904     this.full_refresh();
 905   },
 906   offset_links: function(offset, links) {
 907       for (let y in links) {
 908           let real_y = offset[0] + parseInt(y);
 909           if (!this.links[real_y]) {
 910               this.links[real_y] = [];
 911           }
 912           for (let link of links[y]) {
 913               const offset_link = [link[0] + offset[1], link[1] + offset[1], link[2]];
 914               this.links[real_y].push(offset_link);
 915           }
 916       }
 917   },
 918   restore_input_values: function() {
 919       if (this.mode.name == 'annotate' && explorer.position in explorer.annotations) {
 920           let info = explorer.annotations[explorer.position];
 921           if (info != "(none)") {
 922               this.inputEl.value = info;
 923           }
 924       } else if (this.mode.name == 'portal' && explorer.position in game.portals) {
 925           let portal = game.portals[explorer.position]
 926           this.inputEl.value = portal;
 927       } else if (this.mode.name == 'password') {
 928           this.inputEl.value = this.password;
 929       } else if (this.mode.name == 'name_thing') {
 930           let t = game.get_thing(this.selected_thing_id);
 931           if (t && t.name_) {
 932               this.inputEl.value = t.name_;
 933           }
 934       } else if (this.mode.name == 'admin_thing_protect') {
 935           let t = game.get_thing(this.selected_thing_id);
 936           if (t && t.protection) {
 937               this.inputEl.value = t.protection;
 938           }
 939       }
 940   },
 941   recalc_input_lines: function() {
 942       if (this.mode.has_input_prompt) {
 943           let _ = null;
 944           [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value, this.window_width);
 945       } else {
 946           this.input_lines = [];
 947       }
 948       this.height_input = this.input_lines.length;
 949   },
 950   msg_into_lines_of_width: function(msg, width) {
 951       function push_inner_link(y, end_x) {
 952           if (!inner_links[y]) {
 953               inner_links[y] = [];
 954           };
 955           inner_links[y].push([url_start_x, end_x, url]);
 956       };
 957       const matches = msg.matchAll(/https?:\/\/[^\s]+/g)
 958       let link_data = {};
 959       let url_ends = [];
 960       for (const match of matches) {
 961           const url = match[0];
 962           const url_start = match.index;
 963           const url_end = match.index + match[0].length;
 964           link_data[url_start] = url;
 965           url_ends.push(url_end);
 966       }
 967       let url_start_x = 0;
 968       let url = '';
 969       let inner_links = {};
 970       let in_link = false;
 971       let chunk = "";
 972       let lines = [];
 973       for (let i = 0, x = 0, y = 0; i < msg.length; i++, x++) {
 974           if (x >= width || msg[i] == "\n") {
 975               if (in_link) {
 976                   push_inner_link(y, chunk.length);
 977                   url_start_x = 0;
 978                   if (url_ends[0] == i) {
 979                       in_link = false;
 980                       url_ends.shift();
 981                   }
 982               };
 983               lines.push(chunk);
 984               chunk = "";
 985               x = 0;
 986               if (msg[i] == "\n") {
 987                   x -= 1;
 988               };
 989               y += 1;
 990           };
 991           if (msg[i] != "\n") {
 992               chunk += msg[i];
 993           };
 994           if (i in link_data) {
 995               url_start_x = x;
 996               url = link_data[i];
 997               in_link = true;
 998           } else if (url_ends[0] == i) {
 999               url_ends.shift();
1000               push_inner_link(y, x);
1001               in_link = false;
1002           }
1003       }
1004       lines.push(chunk);
1005       if (in_link) {
1006           push_inner_link(lines.length - 1, chunk.length);
1007       }
1008       return [lines, inner_links];
1009   },
1010   log_msg: function(msg) {
1011       this.log.push(msg);
1012       while (this.log.length > 100) {
1013         this.log.shift();
1014       };
1015       this.full_refresh();
1016   },
1017   pick_selectable: function(task_name) {
1018       const i = parseInt(this.inputEl.value);
1019       if (isNaN(i) || i < 0 || i >= this.selectables.length) {
1020           tui.log_msg('? invalid index, aborted');
1021       } else {
1022           server.send(['TASK:' + task_name, tui.selectables[i]]);
1023       }
1024       this.inputEl.value = "";
1025       this.switch_mode('play');
1026   },
1027   draw_map: function() {
1028     if (!game.turn_complete && this.map_lines.length == 0) {
1029         return;
1030     }
1031     if (game.turn_complete) {
1032         let map_lines_split = [];
1033         let line = [];
1034         for (let i = 0, j = 0; i < game.map.length; i++, j++) {
1035             if (j == game.map_size[1]) {
1036                 map_lines_split.push(line);
1037                 line = [];
1038                 j = 0;
1039             };
1040             if (this.map_mode == 'protections') {
1041                 line.push(game.map_control[i] + ' ');
1042             } else {
1043                 line.push(game.map[i] + ' ');
1044             }
1045         };
1046         map_lines_split.push(line);
1047         if (this.map_mode == 'terrain + annotations') {
1048             for (const [coordinate, _] of Object.entries(explorer.annotations)) {
1049                 const yx = coordinate.split(',')
1050                 map_lines_split[yx[0]][yx[1]] = 'A ';
1051             }
1052         } else if (this.map_mode == 'terrain + things') {
1053             for (const p in game.portals) {
1054                 let coordinate = p.split(',')
1055                 let original = map_lines_split[coordinate[0]][coordinate[1]];
1056                 map_lines_split[coordinate[0]][coordinate[1]] = original[0] + 'P';
1057             }
1058             let used_positions = [];
1059             function draw_thing(t, used_positions) {
1060                 let symbol = game.thing_types[t.type_];
1061                 let meta_char = ' ';
1062                 if (t.thing_char) {
1063                     meta_char = t.thing_char;
1064                 }
1065                 if (used_positions.includes(t.position.toString())) {
1066                     meta_char = '+';
1067                 };
1068                 if (t.carrying) {
1069                     meta_char = '$';
1070                 }
1071                 map_lines_split[t.position[0]][t.position[1]] = symbol + meta_char;
1072                 used_positions.push(t.position.toString());
1073             }
1074             for (const thing_id in game.things) {
1075                 let t = game.things[thing_id];
1076                 if (t.type_ != 'Player') {
1077                     draw_thing(t, used_positions);
1078                 }
1079             };
1080             for (const thing_id in game.things) {
1081                 let t = game.things[thing_id];
1082                 if (t.type_ == 'Player') {
1083                     draw_thing(t, used_positions);
1084                 }
1085             };
1086         }
1087         if (tui.mode.shows_info || tui.mode.name == 'control_tile_draw') {
1088             map_lines_split[explorer.position[0]][explorer.position[1]] = '??';
1089         } else if (tui.map_mode != 'terrain + things') {
1090             map_lines_split[game.player.position[0]][game.player.position[1]] = '??';
1091         }
1092         this.map_lines = []
1093         if (game.map_geometry == 'Square') {
1094             for (let line_split of map_lines_split) {
1095                 this.map_lines.push(line_split.join(''));
1096             };
1097         } else if (game.map_geometry == 'Hex') {
1098             let indent = 0
1099             for (let line_split of map_lines_split) {
1100                 this.map_lines.push(' '.repeat(indent) + line_split.join(''));
1101                 if (indent == 0) {
1102                     indent = 1;
1103                 } else {
1104                     indent = 0;
1105                 };
1106             };
1107         }
1108         let window_center = [terminal.rows / 2, this.window_width / 2];
1109         let center_position = [game.player.position[0], game.player.position[1]];
1110         if (tui.mode.shows_info || tui.mode.name == 'control_tile_draw') {
1111             center_position = [explorer.position[0], explorer.position[1]];
1112         }
1113         center_position[1] = center_position[1] * 2;
1114         this.offset = [center_position[0] - window_center[0],
1115                        center_position[1] - window_center[1]]
1116         if (game.map_geometry == 'Hex' && this.offset[0] % 2) {
1117             this.offset[1] += 1;
1118         };
1119     };
1120     let term_y = Math.max(0, -this.offset[0]);
1121     let term_x = Math.max(0, -this.offset[1]);
1122     let map_y = Math.max(0, this.offset[0]);
1123     let map_x = Math.max(0, this.offset[1]);
1124     for (; term_y < terminal.rows && map_y < this.map_lines.length; term_y++, map_y++) {
1125         let to_draw = this.map_lines[map_y].slice(map_x, this.window_width + this.offset[1]);
1126         terminal.write(term_y, term_x, to_draw);
1127     }
1128   },
1129   draw_mode_line: function() {
1130       let help = 'hit [' + this.keys.help + '] for help';
1131       if (this.mode.has_input_prompt) {
1132           help = 'enter /help for help';
1133       }
1134       terminal.write(0, this.window_width, 'MODE: ' + this.mode.short_desc + ' – ' + help);
1135   },
1136   draw_turn_line: function(n) {
1137       if (game.turn_complete) {
1138           terminal.write(1, this.window_width, 'TURN: ' + game.turn);
1139       }
1140   },
1141   draw_history: function() {
1142       let log_display_lines = [];
1143       let log_links = {};
1144       let y_offset_in_log = 0;
1145       for (let line of this.log) {
1146           let [new_lines, link_data] = this.msg_into_lines_of_width(line,
1147                                                                     this.window_width)
1148           log_display_lines = log_display_lines.concat(new_lines);
1149           for (const y in link_data) {
1150               const rel_y = y_offset_in_log + parseInt(y);
1151               log_links[rel_y] = [];
1152               for (let link of link_data[y]) {
1153                   log_links[rel_y].push(link);
1154               }
1155           }
1156           y_offset_in_log += new_lines.length;
1157       };
1158       let i = log_display_lines.length - 1;
1159       for (let y = terminal.rows - 1 - this.height_input;
1160            y >= this.height_header && i >= 0;
1161            y--, i--) {
1162           terminal.write(y, this.window_width, log_display_lines[i]);
1163       }
1164       for (const key of Object.keys(log_links)) {
1165           if (parseInt(key) <= i) {
1166               delete log_links[key];
1167           }
1168       }
1169       let offset = [terminal.rows - this.height_input - log_display_lines.length,
1170                     this.window_width];
1171       this.offset_links(offset, log_links);
1172   },
1173   draw_info: function() {
1174       const info = "MAP VIEW: " + tui.map_mode + "\n" + explorer.get_info();
1175       let [lines, link_data] = this.msg_into_lines_of_width(info, this.window_width);
1176       let offset = [this.height_header, this.window_width];
1177       for (let y = offset[0], i = 0; y < terminal.rows && i < lines.length; y++, i++) {
1178         terminal.write(y, offset[1], lines[i]);
1179       }
1180       this.offset_links(offset, link_data);
1181   },
1182   draw_input: function() {
1183     if (this.mode.has_input_prompt) {
1184         for (let y = terminal.rows - this.height_input, i = 0; i < this.input_lines.length; y++, i++) {
1185             terminal.write(y, this.window_width, this.input_lines[i]);
1186         }
1187     }
1188   },
1189   draw_help: function() {
1190       let movement_keys_desc = '';
1191       if (!this.mode.is_intro) {
1192           movement_keys_desc = Object.keys(this.movement_keys).join(',');
1193       }
1194       let content = this.mode.short_desc + " help\n\n" + this.mode.help_intro + "\n\n";
1195       if (this.mode.available_actions.length > 0) {
1196           content += "Available actions:\n";
1197           for (let action of this.mode.available_actions) {
1198               if (Object.keys(this.action_tasks).includes(action)) {
1199                   if (!this.task_action_on(action)) {
1200                       continue;
1201                   }
1202               }
1203               if (action == 'move_explorer') {
1204                   action = 'move';
1205               }
1206               if (action == 'move') {
1207                   content += "[" + movement_keys_desc + "] – move\n"
1208               } else {
1209                   content += "[" + this.keys[action] + "] – " + key_descriptions[action] + "\n";
1210               }
1211           }
1212           content += '\n';
1213       }
1214       content += this.mode.list_available_modes();
1215       let start_x = 0;
1216       if (!this.mode.has_input_prompt) {
1217           start_x = this.window_width
1218       }
1219       terminal.drawBox(0, start_x, terminal.rows, this.window_width);
1220       let [lines, _] = this.msg_into_lines_of_width(content, this.window_width);
1221       for (let y = 0, i = 0; y < terminal.rows && i < lines.length; y++, i++) {
1222           terminal.write(y, start_x, lines[i]);
1223       }
1224   },
1225   toggle_tile_draw: function() {
1226       if (tui.tile_draw) {
1227           tui.tile_draw = false;
1228       } else {
1229           tui.tile_draw = true;
1230       }
1231   },
1232   toggle_map_mode: function() {
1233       if (tui.map_mode == 'terrain only') {
1234           tui.map_mode = 'terrain + annotations';
1235       } else if (tui.map_mode == 'terrain + annotations') {
1236           tui.map_mode = 'terrain + things';
1237       } else if (tui.map_mode == 'terrain + things') {
1238           tui.map_mode = 'protections';
1239       } else if (tui.map_mode == 'protections') {
1240           tui.map_mode = 'terrain only';
1241       }
1242   },
1243   full_refresh: function() {
1244     this.links = {};
1245     terminal.drawBox(0, 0, terminal.rows, terminal.cols);
1246     this.recalc_input_lines();
1247     if (this.mode.is_intro) {
1248         this.draw_history();
1249         this.draw_input();
1250     } else {
1251         this.draw_map();
1252         this.draw_turn_line();
1253         this.draw_mode_line();
1254         if (this.mode.shows_info) {
1255           this.draw_info();
1256         } else {
1257           this.draw_history();
1258         }
1259         this.draw_input();
1260     }
1261     if (this.show_help) {
1262         this.draw_help();
1263     }
1264     terminal.refresh();
1265   }
1266 }
1267
1268 let game = {
1269     init: function() {
1270         this.things = {};
1271         this.turn = -1;
1272         this.map = "";
1273         this.map_control = "";
1274         this.map_size = [0,0];
1275         this.player_id = -1;
1276         this.portals = {};
1277         this.tasks = {};
1278     },
1279     get_thing: function(id_, create_if_not_found=false) {
1280         if (id_ in game.things) {
1281             return game.things[id_];
1282         } else if (create_if_not_found) {
1283             let t = new Thing([0,0]);
1284             game.things[id_] = t;
1285             return t;
1286         };
1287     },
1288     move: function(start_position, direction) {
1289         let target = [start_position[0], start_position[1]];
1290         if (direction == 'LEFT') {
1291             target[1] -= 1;
1292         } else if (direction == 'RIGHT') {
1293             target[1] += 1;
1294         } else if (game.map_geometry == 'Square') {
1295             if (direction == 'UP') {
1296                 target[0] -= 1;
1297             } else if (direction == 'DOWN') {
1298                 target[0] += 1;
1299             };
1300         } else if (game.map_geometry == 'Hex') {
1301             let start_indented = start_position[0] % 2;
1302             if (direction == 'UPLEFT') {
1303                 target[0] -= 1;
1304                 if (!start_indented) {
1305                     target[1] -= 1;
1306                 }
1307             } else if (direction == 'UPRIGHT') {
1308                 target[0] -= 1;
1309                 if (start_indented) {
1310                     target[1] += 1;
1311                 }
1312             } else if (direction == 'DOWNLEFT') {
1313                 target[0] += 1;
1314                 if (!start_indented) {
1315                     target[1] -= 1;
1316                 }
1317             } else if (direction == 'DOWNRIGHT') {
1318                 target[0] += 1;
1319                 if (start_indented) {
1320                     target[1] += 1;
1321                 }
1322             };
1323         };
1324         if (target[0] < 0 || target[1] < 0 ||
1325             target[0] >= this.map_size[0] || target[1] >= this.map_size[1]) {
1326             return null;
1327         };
1328         return target;
1329     },
1330     teleport: function() {
1331         if (game.player.position in this.portals) {
1332             server.reconnect_to(this.portals[game.player.position]);
1333         } else {
1334             terminal.blink_screen();
1335             tui.log_msg('? not standing on portal')
1336         }
1337     }
1338 }
1339
1340 game.init();
1341 tui.init();
1342 tui.full_refresh();
1343 server.init(websocket_location);
1344
1345 let explorer = {
1346     position: [0,0],
1347     annotations: {},
1348     info_cached: false,
1349     move: function(direction) {
1350         let target = game.move(this.position, direction);
1351         if (target) {
1352             this.position = target
1353             this.info_cached = false;
1354             if (tui.tile_draw) {
1355                 this.send_tile_control_command();
1356             }
1357         } else {
1358             terminal.blink_screen();
1359         };
1360     },
1361     update_annotations: function(yx, str) {
1362         this.annotations[yx] = str;
1363         if (tui.mode.name == 'study') {
1364             tui.full_refresh();
1365         }
1366     },
1367     empty_annotations: function() {
1368         this.annotations = {};
1369         if (tui.mode.name == 'study') {
1370             tui.full_refresh();
1371         }
1372     },
1373     get_info: function() {
1374         if (this.info_cached) {
1375             return this.info_cached;
1376         }
1377         let info_to_cache = '';
1378         let position_i = this.position[0] * game.map_size[1] + this.position[1];
1379         if (game.fov[position_i] != '.') {
1380             info_to_cache += 'outside field of view';
1381         } else {
1382             for (let t_id in game.things) {
1383                  let t = game.things[t_id];
1384                  if (t.position[0] == this.position[0] && t.position[1] == this.position[1]) {
1385                      info_to_cache += "THING: " + this.get_thing_info(t);
1386                      let protection = t.protection;
1387                      if (protection == '.') {
1388                          protection = 'none';
1389                      }
1390                      info_to_cache += " / protection: " + protection + "\n";
1391                      if (t.hat) {
1392                          info_to_cache += t.hat.slice(0, 6) + '\n';
1393                          info_to_cache += t.hat.slice(6, 12) + '\n';
1394                          info_to_cache += t.hat.slice(12, 18) + '\n';
1395                      }
1396                      if (t.face) {
1397                          info_to_cache += t.face.slice(0, 6) + '\n';
1398                          info_to_cache += t.face.slice(6, 12) + '\n';
1399                          info_to_cache += t.face.slice(12, 18) + '\n';
1400                      }
1401                  }
1402             }
1403             let terrain_char = game.map[position_i]
1404             let terrain_desc = '?'
1405             if (game.terrains[terrain_char]) {
1406                 terrain_desc = game.terrains[terrain_char];
1407             };
1408             info_to_cache += 'TERRAIN: "' + terrain_char + '" / ' + terrain_desc + "\n";
1409             let protection = game.map_control[position_i];
1410             if (protection == '.') {
1411                 protection = 'unprotected';
1412             };
1413             info_to_cache += 'PROTECTION: ' + protection + '\n';
1414             if (this.position in game.portals) {
1415                 info_to_cache += "PORTAL: " + game.portals[this.position] + "\n";
1416             }
1417             if (this.position in this.annotations) {
1418                 info_to_cache += "ANNOTATION: " + this.annotations[this.position];
1419             }
1420         }
1421         this.info_cached = info_to_cache;
1422         return this.info_cached;
1423     },
1424     get_thing_info: function(t) {
1425         const symbol = game.thing_types[t.type_];
1426         let info = t.type_ + " / " + symbol;
1427         if (t.thing_char) {
1428             info += t.thing_char;
1429         };
1430         if (t.name_) {
1431             info += " (" + t.name_ + ")";
1432         }
1433         if (t.installed) {
1434             info += " / installed";
1435         }
1436         return info;
1437     },
1438     annotate: function(msg) {
1439         if (msg.length == 0) {
1440             msg = " ";  // triggers annotation deletion
1441         }
1442         server.send(["ANNOTATE", unparser.to_yx(explorer.position), msg, tui.password]);
1443     },
1444     set_portal: function(msg) {
1445         if (msg.length == 0) {
1446             msg = " ";  // triggers portal deletion
1447         }
1448         server.send(["PORTAL", unparser.to_yx(explorer.position), msg, tui.password]);
1449     },
1450     send_tile_control_command: function() {
1451         server.send(["SET_TILE_CONTROL", unparser.to_yx(this.position), tui.tile_control_char]);
1452     }
1453 }
1454
1455 tui.inputEl.addEventListener('input', (event) => {
1456     if (tui.mode.has_input_prompt) {
1457         let max_length = tui.window_width * terminal.rows - tui.input_prompt.length;
1458         if (tui.inputEl.value.length > max_length) {
1459             tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
1460         };
1461     } else if (tui.mode.name == 'write' && tui.inputEl.value.length > 0) {
1462         server.send(["TASK:WRITE", tui.inputEl.value[0], tui.password]);
1463         tui.switch_mode('edit');
1464     }
1465     tui.full_refresh();
1466 }, false);
1467 document.onclick = function() {
1468     tui.show_help = false;
1469 };
1470 tui.inputEl.addEventListener('keydown', (event) => {
1471     tui.show_help = false;
1472     if (event.key == 'Enter') {
1473         event.preventDefault();
1474     }
1475     if ((!tui.mode.is_intro && event.key == 'Escape')
1476         || (tui.mode.has_input_prompt && event.key == 'Enter'
1477             && tui.inputEl.value.length == 0
1478             && ['chat', 'command_thing', 'take_thing', 'drop_thing',
1479                 'admin_enter'].includes(tui.mode.name))) {
1480         if (!['chat', 'play', 'study', 'edit'].includes(tui.mode.name)) {
1481             tui.log_msg('@ aborted');
1482         }
1483         tui.switch_mode('play');
1484     } else if (tui.mode.has_input_prompt && event.key == 'Enter' && tui.inputEl.value == '/help') {
1485         tui.show_help = true;
1486         tui.inputEl.value = "";
1487         tui.restore_input_values();
1488     } else if (!tui.mode.has_input_prompt && event.key == tui.keys.help
1489                && !tui.mode.is_single_char_entry) {
1490         tui.show_help = true;
1491     } else if (tui.mode.name == 'login' && event.key == 'Enter') {
1492         tui.login_name = tui.inputEl.value;
1493         server.send(['LOGIN', tui.inputEl.value]);
1494         tui.inputEl.value = "";
1495     } else if (tui.mode.name == 'enter_face' && event.key == 'Enter') {
1496         if (tui.inputEl.value.length != 18) {
1497             tui.log_msg('? wrong input length, aborting');
1498         } else {
1499             server.send(['PLAYER_FACE', tui.inputEl.value]);
1500         }
1501         tui.inputEl.value = "";
1502         tui.switch_mode('edit');
1503     } else if (tui.mode.name == 'command_thing' && event.key == 'Enter') {
1504         server.send(['TASK:COMMAND', tui.inputEl.value]);
1505         tui.inputEl.value = "";
1506     } else if (tui.mode.name == 'take_thing' && event.key == 'Enter') {
1507         tui.pick_selectable('PICK_UP');
1508     } else if (tui.mode.name == 'drop_thing' && event.key == 'Enter') {
1509         tui.pick_selectable('DROP');
1510     } else if (tui.mode.name == 'control_pw_pw' && event.key == 'Enter') {
1511         if (tui.inputEl.value.length == 0) {
1512             tui.log_msg('@ aborted');
1513         } else {
1514             server.send(['SET_MAP_CONTROL_PASSWORD',
1515                         tui.tile_control_char, tui.inputEl.value]);
1516             tui.log_msg('@ sent new password for protection character "' + tui.tile_control_char + '".');
1517         }
1518         tui.switch_mode('admin');
1519     } else if (tui.mode.name == 'portal' && event.key == 'Enter') {
1520         explorer.set_portal(tui.inputEl.value);
1521         tui.switch_mode('edit');
1522     } else if (tui.mode.name == 'name_thing' && event.key == 'Enter') {
1523         if (tui.inputEl.value.length == 0) {
1524             tui.inputEl.value = " ";
1525         }
1526         server.send(["THING_NAME", tui.selected_thing_id, tui.inputEl.value,
1527                      tui.password]);
1528         tui.switch_mode('edit');
1529     } else if (tui.mode.name == 'annotate' && event.key == 'Enter') {
1530         explorer.annotate(tui.inputEl.value);
1531         tui.switch_mode('edit');
1532     } else if (tui.mode.name == 'password' && event.key == 'Enter') {
1533         if (tui.inputEl.value.length == 0) {
1534             tui.inputEl.value = " ";
1535         }
1536         tui.password = tui.inputEl.value
1537         tui.switch_mode('edit');
1538     } else if (tui.mode.name == 'admin_enter' && event.key == 'Enter') {
1539         server.send(['BECOME_ADMIN', tui.inputEl.value]);
1540         tui.switch_mode('play');
1541     } else if (tui.mode.name == 'control_pw_type' && event.key == 'Enter') {
1542         if (tui.inputEl.value.length != 1) {
1543             tui.log_msg('@ entered non-single-char, therefore aborted');
1544             tui.switch_mode('admin');
1545         } else {
1546             tui.tile_control_char = tui.inputEl.value[0];
1547             tui.switch_mode('control_pw_pw');
1548         }
1549     } else if (tui.mode.name == 'control_tile_type' && event.key == 'Enter') {
1550         if (tui.inputEl.value.length != 1) {
1551             tui.log_msg('@ entered non-single-char, therefore aborted');
1552             tui.switch_mode('admin');
1553         } else {
1554             tui.tile_control_char = tui.inputEl.value[0];
1555             tui.switch_mode('control_tile_draw');
1556         }
1557     } else if (tui.mode.name == 'admin_thing_protect' && event.key == 'Enter') {
1558         if (tui.inputEl.value.length != 1) {
1559             tui.log_msg('@ entered non-single-char, therefore aborted');
1560         } else {
1561             server.send(['THING_PROTECTION', tui.selected_thing_id, tui.inputEl.value])
1562             tui.log_msg('@ sent new protection character for thing');
1563         }
1564         tui.switch_mode('admin');
1565     } else if (tui.mode.name == 'chat' && event.key == 'Enter') {
1566         let tokens = parser.tokenize(tui.inputEl.value);
1567         if (tokens.length > 0 && tokens[0].length > 0) {
1568             if (tui.inputEl.value[0][0] == '/') {
1569                 if (tokens[0].slice(1) == 'nick') {
1570                     if (tokens.length > 1) {
1571                         server.send(['NICK', tokens[1]]);
1572                     } else {
1573                         tui.log_msg('? need new name');
1574                     }
1575                 } else {
1576                     tui.log_msg('? unknown command');
1577                 }
1578             } else {
1579                     server.send(['ALL', tui.inputEl.value]);
1580             }
1581         } else if (tui.inputEl.valuelength > 0) {
1582                 server.send(['ALL', tui.inputEl.value]);
1583         }
1584         tui.inputEl.value = "";
1585     } else if (tui.mode.name == 'play') {
1586           if (tui.mode.mode_switch_on_key(event)) {
1587               null;
1588           } else if (event.key === tui.keys.consume && tui.task_action_on('consume')) {
1589               server.send(["TASK:INTOXICATE"]);
1590           } else if (event.key === tui.keys.door && tui.task_action_on('door')) {
1591               server.send(["TASK:DOOR"]);
1592           } else if (event.key === tui.keys.install && tui.task_action_on('install')) {
1593               server.send(["TASK:INSTALL"]);
1594           } else if (event.key === tui.keys.wear && tui.task_action_on('wear')) {
1595               server.send(["TASK:WEAR"]);
1596           } else if (event.key === tui.keys.spin && tui.task_action_on('spin')) {
1597               server.send(["TASK:SPIN"]);
1598           } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1599               server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1600           } else if (event.key === tui.keys.teleport) {
1601               game.teleport();
1602           };
1603     } else if (tui.mode.name == 'study') {
1604         if (tui.mode.mode_switch_on_key(event)) {
1605               null;
1606         } else if (event.key in tui.movement_keys) {
1607             explorer.move(tui.movement_keys[event.key]);
1608         } else if (event.key == tui.keys.toggle_map_mode) {
1609             tui.toggle_map_mode();
1610         };
1611     } else if (tui.mode.name == 'control_tile_draw') {
1612         if (tui.mode.mode_switch_on_key(event)) {
1613             null;
1614         } else if (event.key in tui.movement_keys) {
1615             explorer.move(tui.movement_keys[event.key]);
1616         } else if (event.key === tui.keys.toggle_tile_draw) {
1617             tui.toggle_tile_draw();
1618         };
1619     } else if (tui.mode.name == 'admin') {
1620         if (tui.mode.mode_switch_on_key(event)) {
1621               null;
1622         } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1623             server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1624         };
1625     } else if (tui.mode.name == 'edit') {
1626         if (tui.mode.mode_switch_on_key(event)) {
1627               null;
1628         } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1629             server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1630         } else if (event.key === tui.keys.flatten && tui.task_action_on('flatten')) {
1631             server.send(["TASK:FLATTEN_SURROUNDINGS", tui.password]);
1632         } else if (event.key == tui.keys.toggle_map_mode) {
1633             tui.toggle_map_mode();
1634         }
1635     }
1636     tui.full_refresh();
1637 }, false);
1638
1639 rows_selector.addEventListener('input', function() {
1640     if (rows_selector.value % 4 != 0 || rows_selector.value < 24) {
1641         return;
1642     }
1643     window.localStorage.setItem(rows_selector.id, rows_selector.value);
1644     terminal.initialize();
1645     tui.full_refresh();
1646 }, false);
1647 cols_selector.addEventListener('input', function() {
1648     if (cols_selector.value % 4 != 0 || cols_selector.value < 80) {
1649         return;
1650     }
1651     window.localStorage.setItem(cols_selector.id, cols_selector.value);
1652     terminal.initialize();
1653     tui.window_width = terminal.cols / 2,
1654     tui.full_refresh();
1655 }, false);
1656 for (let key_selector of key_selectors) {
1657     key_selector.addEventListener('input', function() {
1658         window.localStorage.setItem(key_selector.id, key_selector.value);
1659         tui.init_keys();
1660     }, false);
1661 }
1662 window.setInterval(function() {
1663     if (server.websocket.readyState == 1) {
1664         server.send(['PING']);
1665     } else if (server.websocket.readyState != 0) {
1666         server.reconnect_to(server.url);
1667         tui.log_msg('@ attempting reconnect …')
1668     }
1669 }, 1000);
1670 window.setInterval(function() {
1671     let val = "?";
1672     let span_decoration = "none";
1673     if (document.activeElement == tui.inputEl) {
1674         val = "on (click outside terminal to change)";
1675     } else {
1676         val = "off (click into terminal to change)";
1677         span_decoration = "line-through";
1678     };
1679     document.getElementById("keyboard_control").textContent = val;
1680     for (const span of document.querySelectorAll('.keyboard_controlled')) {
1681         span.style.textDecoration = span_decoration;
1682     }
1683 }, 100);
1684 document.getElementById("terminal").onclick = function() {
1685     tui.inputEl.focus();
1686 };
1687 document.getElementById("help").onclick = function() {
1688     tui.show_help = true;
1689     tui.full_refresh();
1690 };
1691 for (const switchEl  of document.querySelectorAll('[id^="switch_to_"]')) {
1692     const mode = switchEl.id.slice("switch_to_".length);
1693     switchEl.onclick = function() {
1694         tui.switch_mode(mode);
1695         tui.full_refresh();
1696     }
1697 };
1698 document.getElementById("toggle_tile_draw").onclick = function() {
1699     tui.toggle_tile_draw();
1700 }
1701 document.getElementById("toggle_map_mode").onclick = function() {
1702     tui.toggle_map_mode();
1703     tui.full_refresh();
1704 };
1705 document.getElementById("flatten").onclick = function() {
1706     server.send(['TASK:FLATTEN_SURROUNDINGS', tui.password]);
1707 };
1708 document.getElementById("door").onclick = function() {
1709     server.send(['TASK:DOOR']);
1710 };
1711 document.getElementById("consume").onclick = function() {
1712     server.send(['TASK:INTOXICATE']);
1713 };
1714 document.getElementById("install").onclick = function() {
1715     server.send(['TASK:INSTALL']);
1716 };
1717 document.getElementById("wear").onclick = function() {
1718     server.send(['TASK:WEAR']);
1719 };
1720 document.getElementById("spin").onclick = function() {
1721     server.send(['TASK:SPIN']);
1722 };
1723 document.getElementById("teleport").onclick = function() {
1724     game.teleport();
1725 };
1726 for (const move_button of document.querySelectorAll('[id*="_move_"]')) {
1727     if (move_button.id.startsWith('key_')) {  // not a move button
1728         continue;
1729     };
1730     let direction = move_button.id.split('_')[2].toUpperCase();
1731     move_button.onclick = function() {
1732         if (tui.mode.available_actions.includes("move")) {
1733             server.send(['TASK:MOVE', direction]);
1734         } else if (tui.mode.available_actions.includes("move_explorer")) {
1735             explorer.move(direction);
1736             tui.full_refresh();
1737         };
1738     };
1739 };
1740 </script>
1741 </body></html>