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="wear"></button>
  61       <button id="spin"></button>
  62     </td>
  63   </tr>
  64   <tr>
  65     <td><button id="switch_to_edit"></button></td>
  66     <td>
  67       <button id="switch_to_write"></button>
  68       <button id="flatten"></button>
  69       <button id="install"></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 = 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] === 'CHATFACE') {
 543             tui.draw_face = tokens[1];
 544             tui.full_refresh();
 545         } else if (tokens[0] === 'REPLY') {
 546              tui.log_msg('#MUSICPLAYER: ' + tokens[1], 1);
 547         } else if (tokens[0] === 'PLAYER_ID') {
 548             game.player_id = parseInt(tokens[1]);
 549         } else if (tokens[0] === 'LOGIN_OK') {
 550             this.send(['GET_GAMESTATE']);
 551             tui.switch_mode('post_login_wait');
 552         } else if (tokens[0] === 'DEFAULT_COLORS') {
 553             terminal.set_default_colors();
 554         } else if (tokens[0] === 'RANDOM_COLORS') {
 555             terminal.set_random_colors();
 556         } else if (tokens[0] === 'ADMIN_OK') {
 557             tui.is_admin = true;
 558             tui.log_msg('@ you now have admin rights');
 559             tui.switch_mode('admin');
 560         } else if (tokens[0] === 'PORTAL') {
 561             let position = parser.parse_yx(tokens[1]);
 562             game.portals[position] = tokens[2];
 563         } else if (tokens[0] === 'ANNOTATION') {
 564             let position = parser.parse_yx(tokens[1]);
 565             explorer.update_annotations(position, tokens[2]);
 566             tui.full_refresh();
 567         } else if (tokens[0] === 'UNHANDLED_INPUT') {
 568             tui.log_msg('? unknown command');
 569         } else if (tokens[0] === 'PLAY_ERROR') {
 570             tui.log_msg('? ' + tokens[1]);
 571             terminal.blink_screen();
 572         } else if (tokens[0] === 'ARGUMENT_ERROR') {
 573             tui.log_msg('? syntax error: ' + tokens[1]);
 574         } else if (tokens[0] === 'GAME_ERROR') {
 575             tui.log_msg('? game error: ' + tokens[1]);
 576         } else if (tokens[0] === 'PONG') {
 577             ;
 578         } else {
 579             tui.log_msg('? unhandled input: ' + event.data);
 580         }
 581     }
 582 }
 583
 584 let unparser = {
 585     quote: function(str) {
 586         let quoted = ['"'];
 587         for (let i = 0; i < str.length; i++) {
 588             let c = str[i];
 589             if (['"', '\\'].includes(c)) {
 590                 quoted.push('\\');
 591             };
 592             quoted.push(c);
 593         }
 594         quoted.push('"');
 595         return quoted.join('');
 596     },
 597     to_yx: function(yx_coordinate) {
 598         return "Y:" + yx_coordinate[0] + ",X:" + yx_coordinate[1];
 599     },
 600     untokenize: function(tokens) {
 601         let quoted_tokens = [];
 602         for (let token of tokens) {
 603             quoted_tokens.push(this.quote(token));
 604         }
 605         return quoted_tokens.join(" ");
 606     }
 607 }
 608
 609 class Mode {
 610     constructor(name, has_input_prompt=false, shows_info=false,
 611                 is_intro=false, is_single_char_entry=false) {
 612         this.name = name;
 613         this.short_desc = mode_helps[name].short;
 614         this.available_modes = [];
 615         this.available_actions = [];
 616         this.has_input_prompt = has_input_prompt;
 617         this.shows_info= shows_info;
 618         this.is_intro = is_intro;
 619         this.help_intro = mode_helps[name].long;
 620         this.intro_msg = mode_helps[name].intro;
 621         this.is_single_char_entry = is_single_char_entry;
 622         this.legal = true;
 623     }
 624     *iter_available_modes() {
 625         for (let mode_name of this.available_modes) {
 626             let mode = tui['mode_' + mode_name];
 627             if (!mode.legal) {
 628                 continue;
 629             }
 630             let key = tui.keys['switch_to_' + mode.name];
 631             yield [mode, key]
 632         }
 633     }
 634     list_available_modes() {
 635         let msg = ''
 636         if (this.available_modes.length > 0) {
 637             msg += 'Other modes available from here:\n';
 638             for (let [mode, key] of this.iter_available_modes()) {
 639                 msg += '[' + key + '] – ' + mode.short_desc + '\n';
 640             }
 641         }
 642         return msg;
 643     }
 644     mode_switch_on_key(key_event) {
 645         for (let [mode, key] of this.iter_available_modes()) {
 646             if (key_event.key == key) {
 647                 event.preventDefault();
 648                 tui.switch_mode(mode.name);
 649                 return true;
 650             };
 651         }
 652         return false;
 653     }
 654 }
 655 let tui = {
 656   links: {},
 657   log: [],
 658   input_prompt: '> ',
 659   input_lines: [],
 660   window_width: terminal.cols / 2,
 661   height_turn_line: 1,
 662   height_mode_line: 1,
 663   height_input: 1,
 664   password: 'foo',
 665   show_help: false,
 666   is_admin: false,
 667   tile_draw: false,
 668   mode_waiting_for_server: new Mode('waiting_for_server',
 669                                      false, false, true),
 670   mode_login: new Mode('login', true, false, true),
 671   mode_post_login_wait: new Mode('post_login_wait'),
 672   mode_chat: new Mode('chat', true),
 673   mode_annotate: new Mode('annotate', true, true),
 674   mode_play: new Mode('play'),
 675   mode_study: new Mode('study', false, true),
 676   mode_write: new Mode('write', false, false, false, true),
 677   mode_edit: new Mode('edit'),
 678   mode_control_pw_type: new Mode('control_pw_type', true),
 679   mode_admin_thing_protect: new Mode('admin_thing_protect', true),
 680   mode_portal: new Mode('portal', true, true),
 681   mode_password: new Mode('password', true),
 682   mode_name_thing: new Mode('name_thing', true, true),
 683   mode_command_thing: new Mode('command_thing', true),
 684   mode_take_thing: new Mode('take_thing', true),
 685   mode_drop_thing: new Mode('drop_thing', true),
 686   mode_enter_face: new Mode('enter_face', true),
 687   mode_admin_enter: new Mode('admin_enter', true),
 688   mode_admin: new Mode('admin'),
 689   mode_control_pw_pw: new Mode('control_pw_pw', true),
 690   mode_control_tile_type: new Mode('control_tile_type', true),
 691   mode_control_tile_draw: new Mode('control_tile_draw'),
 692   action_tasks: {
 693       'flatten': 'FLATTEN_SURROUNDINGS',
 694       'take_thing': 'PICK_UP',
 695       'drop_thing': 'DROP',
 696       'move': 'MOVE',
 697       'door': 'DOOR',
 698       'install': 'INSTALL',
 699       'wear': 'WEAR',
 700       'command': 'COMMAND',
 701       'consume': 'INTOXICATE',
 702       'spin': 'SPIN',
 703   },
 704   offset: [0,0],
 705   map_lines: [],
 706   selectables: [],
 707   draw_face: false,
 708   init: function() {
 709       this.mode_play.available_modes = ["chat", "study", "edit", "admin_enter",
 710                                         "command_thing", "take_thing", "drop_thing"]
 711       this.mode_play.available_actions = ["move", "teleport", "door", "consume",
 712                                           "wear", "spin"];
 713       this.mode_study.available_modes = ["chat", "play", "admin_enter", "edit"]
 714       this.mode_study.available_actions = ["toggle_map_mode", "move_explorer"];
 715       this.mode_admin.available_modes = ["admin_thing_protect", "control_pw_type",
 716                                          "control_tile_type", "chat",
 717                                          "study", "play", "edit"]
 718       this.mode_admin.available_actions = ["move"];
 719       this.mode_control_tile_draw.available_modes = ["admin_enter"]
 720       this.mode_control_tile_draw.available_actions = ["toggle_tile_draw"];
 721       this.mode_edit.available_modes = ["write", "annotate", "portal", "name_thing",
 722                                         "password", "chat", "study", "play",
 723                                         "admin_enter", "enter_face"]
 724       this.mode_edit.available_actions = ["move", "flatten", "install",
 725                                           "toggle_map_mode"]
 726       this.inputEl = document.getElementById("input");
 727       this.inputEl.focus();
 728       this.switch_mode('waiting_for_server');
 729       this.recalc_input_lines();
 730       this.height_header = this.height_turn_line + this.height_mode_line;
 731       this.init_keys();
 732   },
 733   init_keys: function() {
 734     document.getElementById("move_table").hidden = true;
 735     this.keys = {};
 736     for (let key_selector of key_selectors) {
 737         this.keys[key_selector.id.slice(4)] = key_selector.value;
 738     }
 739     this.movement_keys = {};
 740     let geometry_prefix = 'undefinedMapGeometry_';
 741     if (game.map_geometry) {
 742         geometry_prefix = game.map_geometry.toLowerCase() + '_';
 743     }
 744     for (const key_name of Object.keys(key_descriptions)) {
 745         if (key_name.startsWith(geometry_prefix)) {
 746             let direction = key_name.split('_')[2].toUpperCase();
 747             let key = this.keys[key_name];
 748             this.movement_keys[key] = direction;
 749         }
 750     };
 751     for (const move_button of document.querySelectorAll('[id*="_move_"]')) {
 752         if (move_button.id.startsWith('key_')) {
 753             continue;
 754         }
 755         move_button.hidden = true;
 756     };
 757     for (const move_button of document.querySelectorAll('[id^="' + geometry_prefix + 'move_"]')) {
 758         document.getElementById("move_table").hidden = false;
 759         move_button.hidden = false;
 760     };
 761     for (let el of document.getElementsByTagName("button")) {
 762       let action_desc = key_descriptions[el.id];
 763       let action_key = '[' + this.keys[el.id] + ']';
 764       el.innerHTML = escapeHTML(action_desc) + '<br /><span class="keyboard_controlled">' + escapeHTML(action_key) + '</span>';
 765     }
 766   },
 767   task_action_on: function(action) {
 768       return game.tasks.includes(this.action_tasks[action]);
 769   },
 770   switch_mode: function(mode_name) {
 771
 772     function fail(msg, return_mode) {
 773         tui.log_msg('? ' + msg);
 774         terminal.blink_screen();
 775         this.switch_mode(return_mode);
 776     }
 777
 778     if (this.mode && this.mode.name == 'control_tile_draw') {
 779         tui.log_msg('@ finished tile protection drawing.')
 780     }
 781     this.tile_draw = false;
 782       if (mode_name == 'command_thing' && (!game.player.carrying
 783                                            || !game.player.carrying.commandable)) {
 784         return fail('not carrying anything commandable', 'play');
 785     };
 786     if (mode_name == 'take_thing' && game.player.carrying) {
 787         return fail('already carrying something', 'play');
 788     };
 789     if (mode_name == 'drop_thing' && !game.player.carrying) {
 790         return fail('not carrying anything droppable', 'play');
 791     }
 792     if (mode_name == 'admin_enter' && this.is_admin) {
 793         mode_name = 'admin';
 794     } else if (['name_thing', 'admin_thing_protect'].includes(mode_name)) {
 795         let thing_id = null;
 796         for (let t_id in game.things) {
 797             if (t_id == game.player_id) {
 798                 continue;
 799             }
 800             let t = game.things[t_id];
 801             if (game.player.position[0] == t.position[0]
 802                 && game.player.position[1] == t.position[1]) {
 803                 thing_id = t_id;
 804                 break;
 805             }
 806         }
 807         if (!thing_id) {
 808             return fail('not standing over thing', 'fail');
 809         } else {
 810             this.selected_thing_id = thing_id;
 811         }
 812     };
 813     this.mode = this['mode_' + mode_name];
 814     if (["control_tile_draw", "control_tile_type", "control_pw_type"].includes(this.mode.name)) {
 815         this.map_mode = 'protections';
 816     } else if (this.mode.name != "edit") {
 817         this.map_mode = 'terrain + things';
 818     };
 819     if (this.mode.has_input_prompt || this.mode.is_single_char_entry) {
 820         this.inputEl.focus();
 821     }
 822     if (game.player_id in game.things && (this.mode.shows_info || this.mode.name == 'control_tile_draw')) {
 823         explorer.position = game.player.position;
 824     }
 825     this.inputEl.value = "";
 826     this.restore_input_values();
 827     for (let el of document.getElementsByTagName("button")) {
 828         el.disabled = true;
 829     }
 830     document.getElementById("help").disabled = false;
 831     for (const action of this.mode.available_actions) {
 832         if (["move", "move_explorer"].includes(action)) {
 833             for (const move_key of document.querySelectorAll('[id*="_move_"]')) {
 834                 move_key.disabled = false;
 835             }
 836         } else if (Object.keys(this.action_tasks).includes(action)) {
 837             if (this.task_action_on(action)) {
 838                 document.getElementById(action).disabled = false;
 839             }
 840         } else {
 841             document.getElementById(action).disabled = false;
 842         };
 843     }
 844     for (const mode_name of this.mode.available_modes) {
 845             document.getElementById('switch_to_' + mode_name).disabled = false;
 846     }
 847     if (this.mode.intro_msg.length > 0) {
 848         this.log_msg(this.mode.intro_msg);
 849     }
 850     if (this.mode.name == 'login') {
 851         if (this.login_name) {
 852             server.send(['LOGIN', this.login_name]);
 853         } else {
 854             this.log_msg("? need login name");
 855         }
 856     } else if (this.mode.is_single_char_entry) {
 857         this.show_help = true;
 858     } else if (this.mode.name == 'take_thing') {
 859         this.log_msg("Portable things in reach for pick-up:");
 860         const y = game.player.position[0]
 861         const x = game.player.position[1]
 862         let select_range = [y.toString() + ':' + x.toString(),
 863                             (y + 0).toString() + ':' + (x - 1).toString(),
 864                             (y + 0).toString() + ':' + (x + 1).toString(),
 865                             (y - 1).toString() + ':' + (x).toString(),
 866                             (y + 1).toString() + ':' + (x).toString()];
 867         if (game.map_geometry == 'Hex') {
 868             if (y % 2) {
 869                 select_range.push((y - 1).toString() + ':' + (x + 1).toString());
 870                 select_range.push((y + 1).toString() + ':' + (x + 1).toString());
 871             } else {
 872                 select_range.push((y - 1).toString() + ':' + (x - 1).toString());
 873                 select_range.push((y + 1).toString() + ':' + (x - 1).toString());
 874             }
 875         };
 876         this.selectables = [];
 877         for (const t_id in game.things) {
 878             const t = game.things[t_id];
 879             if (select_range.includes(t.position[0].toString()
 880                                       + ':' + t.position[1].toString())
 881                 && t.portable) {
 882                 this.selectables.push(t_id);
 883             }
 884         };
 885         if (this.selectables.length == 0) {
 886             this.log_msg('none');
 887             terminal.blink_screen();
 888             this.switch_mode('play');
 889             return;
 890         } else {
 891             for (let [i, t_id] of this.selectables.entries()) {
 892                 const t = game.things[t_id];
 893                 this.log_msg(i + ': ' + explorer.get_thing_info(t));
 894             }
 895         }
 896     } else if (this.mode.name == 'drop_thing') {
 897         this.log_msg('Direction to drop thing to:');
 898         this.selectables = ['HERE'].concat(Object.values(this.movement_keys));
 899         for (let [i, direction] of this.selectables.entries()) {
 900             this.log_msg(i + ': ' + direction);
 901         };
 902     } else if (this.mode.name == 'command_thing') {
 903         server.send(['TASK:COMMAND', 'HELP']);
 904     } else if (this.mode.name == 'control_pw_pw') {
 905         this.log_msg('@ enter protection password for "' + this.tile_control_char + '":');
 906     } else if (this.mode.name == 'control_tile_draw') {
 907         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 + '].')
 908     }
 909     this.full_refresh();
 910   },
 911   offset_links: function(offset, links) {
 912       for (let y in links) {
 913           let real_y = offset[0] + parseInt(y);
 914           if (!this.links[real_y]) {
 915               this.links[real_y] = [];
 916           }
 917           for (let link of links[y]) {
 918               const offset_link = [link[0] + offset[1], link[1] + offset[1], link[2]];
 919               this.links[real_y].push(offset_link);
 920           }
 921       }
 922   },
 923   restore_input_values: function() {
 924       if (this.mode.name == 'annotate' && explorer.position in explorer.annotations) {
 925           let info = explorer.annotations[explorer.position];
 926           if (info != "(none)") {
 927               this.inputEl.value = info;
 928           }
 929       } else if (this.mode.name == 'portal' && explorer.position in game.portals) {
 930           let portal = game.portals[explorer.position]
 931           this.inputEl.value = portal;
 932       } else if (this.mode.name == 'password') {
 933           this.inputEl.value = this.password;
 934       } else if (this.mode.name == 'name_thing') {
 935           let t = game.get_thing(this.selected_thing_id);
 936           if (t && t.name_) {
 937               this.inputEl.value = t.name_;
 938           }
 939       } else if (this.mode.name == 'admin_thing_protect') {
 940           let t = game.get_thing(this.selected_thing_id);
 941           if (t && t.protection) {
 942               this.inputEl.value = t.protection;
 943           }
 944       }
 945   },
 946   recalc_input_lines: function() {
 947       if (this.mode.has_input_prompt) {
 948           let _ = null;
 949           [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value, this.window_width);
 950       } else {
 951           this.input_lines = [];
 952       }
 953       this.height_input = this.input_lines.length;
 954   },
 955   msg_into_lines_of_width: function(msg, width) {
 956       function push_inner_link(y, end_x) {
 957           if (!inner_links[y]) {
 958               inner_links[y] = [];
 959           };
 960           inner_links[y].push([url_start_x, end_x, url]);
 961       };
 962       const matches = msg.matchAll(/https?:\/\/[^\s]+/g)
 963       let link_data = {};
 964       let url_ends = [];
 965       for (const match of matches) {
 966           const url = match[0];
 967           const url_start = match.index;
 968           const url_end = match.index + match[0].length;
 969           link_data[url_start] = url;
 970           url_ends.push(url_end);
 971       }
 972       let url_start_x = 0;
 973       let url = '';
 974       let inner_links = {};
 975       let in_link = false;
 976       let chunk = "";
 977       let lines = [];
 978       for (let i = 0, x = 0, y = 0; i < msg.length; i++, x++) {
 979           if (x >= width || msg[i] == "\n") {
 980               if (in_link) {
 981                   push_inner_link(y, chunk.length);
 982                   url_start_x = 0;
 983                   if (url_ends[0] == i) {
 984                       in_link = false;
 985                       url_ends.shift();
 986                   }
 987               };
 988               lines.push(chunk);
 989               chunk = "";
 990               x = 0;
 991               if (msg[i] == "\n") {
 992                   x -= 1;
 993               };
 994               y += 1;
 995           };
 996           if (msg[i] != "\n") {
 997               chunk += msg[i];
 998           };
 999           if (i in link_data) {
1000               url_start_x = x;
1001               url = link_data[i];
1002               in_link = true;
1003           } else if (url_ends[0] == i) {
1004               url_ends.shift();
1005               push_inner_link(y, x);
1006               in_link = false;
1007           }
1008       }
1009       lines.push(chunk);
1010       if (in_link) {
1011           push_inner_link(lines.length - 1, chunk.length);
1012       }
1013       return [lines, inner_links];
1014   },
1015   log_msg: function(msg) {
1016       this.log.push(msg);
1017       while (this.log.length > 100) {
1018         this.log.shift();
1019       };
1020       this.full_refresh();
1021   },
1022   pick_selectable: function(task_name) {
1023       const i = parseInt(this.inputEl.value);
1024       if (isNaN(i) || i < 0 || i >= this.selectables.length) {
1025           tui.log_msg('? invalid index, aborted');
1026       } else {
1027           server.send(['TASK:' + task_name, tui.selectables[i]]);
1028       }
1029       this.inputEl.value = "";
1030       this.switch_mode('play');
1031   },
1032   draw_map: function() {
1033     if (!game.turn_complete && this.map_lines.length == 0) {
1034         return;
1035     }
1036     if (game.turn_complete) {
1037         let map_lines_split = [];
1038         let line = [];
1039         for (let i = 0, j = 0; i < game.map.length; i++, j++) {
1040             if (j == game.map_size[1]) {
1041                 map_lines_split.push(line);
1042                 line = [];
1043                 j = 0;
1044             };
1045             if (this.map_mode == 'protections') {
1046                 line.push(game.map_control[i] + ' ');
1047             } else {
1048                 line.push(game.map[i] + ' ');
1049             }
1050         };
1051         map_lines_split.push(line);
1052         if (this.map_mode == 'terrain + annotations') {
1053             for (const [coordinate, _] of Object.entries(explorer.annotations)) {
1054                 const yx = coordinate.split(',')
1055                 map_lines_split[yx[0]][yx[1]] = 'A ';
1056             }
1057         } else if (this.map_mode == 'terrain + things') {
1058             for (const p in game.portals) {
1059                 let coordinate = p.split(',')
1060                 let original = map_lines_split[coordinate[0]][coordinate[1]];
1061                 map_lines_split[coordinate[0]][coordinate[1]] = original[0] + 'P';
1062             }
1063             let used_positions = [];
1064             function draw_thing(t, used_positions) {
1065                 let symbol = game.thing_types[t.type_];
1066                 let meta_char = ' ';
1067                 if (t.thing_char) {
1068                     meta_char = t.thing_char;
1069                 }
1070                 if (used_positions.includes(t.position.toString())) {
1071                     meta_char = '+';
1072                 };
1073                 if (t.carrying) {
1074                     meta_char = '$';
1075                 }
1076                 map_lines_split[t.position[0]][t.position[1]] = symbol + meta_char;
1077                 used_positions.push(t.position.toString());
1078             }
1079             for (const thing_id in game.things) {
1080                 let t = game.things[thing_id];
1081                 if (t.type_ != 'Player') {
1082                     draw_thing(t, used_positions);
1083                 }
1084             };
1085             for (const thing_id in game.things) {
1086                 let t = game.things[thing_id];
1087                 if (t.type_ == 'Player') {
1088                     draw_thing(t, used_positions);
1089                 }
1090             };
1091         }
1092         if (tui.mode.shows_info || tui.mode.name == 'control_tile_draw') {
1093             map_lines_split[explorer.position[0]][explorer.position[1]] = '??';
1094         } else if (tui.map_mode != 'terrain + things') {
1095             map_lines_split[game.player.position[0]][game.player.position[1]] = '??';
1096         }
1097         this.map_lines = []
1098         if (game.map_geometry == 'Square') {
1099             for (let line_split of map_lines_split) {
1100                 this.map_lines.push(line_split.join(''));
1101             };
1102         } else if (game.map_geometry == 'Hex') {
1103             let indent = 0
1104             for (let line_split of map_lines_split) {
1105                 this.map_lines.push(' '.repeat(indent) + line_split.join(''));
1106                 if (indent == 0) {
1107                     indent = 1;
1108                 } else {
1109                     indent = 0;
1110                 };
1111             };
1112         }
1113         let window_center = [terminal.rows / 2, this.window_width / 2];
1114         let center_position = [game.player.position[0], game.player.position[1]];
1115         if (tui.mode.shows_info || tui.mode.name == 'control_tile_draw') {
1116             center_position = [explorer.position[0], explorer.position[1]];
1117         }
1118         center_position[1] = center_position[1] * 2;
1119         this.offset = [center_position[0] - window_center[0],
1120                        center_position[1] - window_center[1]]
1121         if (game.map_geometry == 'Hex' && this.offset[0] % 2) {
1122             this.offset[1] += 1;
1123         };
1124     };
1125     let term_y = Math.max(0, -this.offset[0]);
1126     let term_x = Math.max(0, -this.offset[1]);
1127     let map_y = Math.max(0, this.offset[0]);
1128     let map_x = Math.max(0, this.offset[1]);
1129     for (; term_y < terminal.rows && map_y < this.map_lines.length; term_y++, map_y++) {
1130         let to_draw = this.map_lines[map_y].slice(map_x, this.window_width + this.offset[1]);
1131         terminal.write(term_y, term_x, to_draw);
1132     }
1133   },
1134   draw_face_popup: function() {
1135       const t = game.things[this.draw_face];
1136       if (!t) {
1137           this.draw_face = false;
1138           return;
1139       }
1140       function draw_body_part(body_part, end_y) {
1141           const start_x = tui.window_width - 10;
1142           terminal.write(end_y - 4, start_x, '+--------+');
1143           terminal.write(end_y - 3, start_x, '|        |');
1144           terminal.write(end_y - 2, start_x, '| ' + body_part.slice(0, 6) + ' |');
1145           terminal.write(end_y - 1, start_x, '| ' + body_part.slice(6, 12) + ' |');
1146           terminal.write(end_y, start_x, '| ' + body_part.slice(12, 18) + ' |');
1147       }
1148       if (t.face) {
1149           draw_body_part(t.face, terminal.rows - 1);
1150       }
1151       if (t.hat) {
1152           draw_body_part(t.hat, terminal.rows - 4);
1153       }
1154   },
1155   draw_mode_line: function() {
1156       let help = 'hit [' + this.keys.help + '] for help';
1157       if (this.mode.has_input_prompt) {
1158           help = 'enter /help for help';
1159       }
1160       terminal.write(0, this.window_width, 'MODE: ' + this.mode.short_desc + ' – ' + help);
1161   },
1162   draw_turn_line: function(n) {
1163       if (game.turn_complete) {
1164           terminal.write(1, this.window_width, 'TURN: ' + game.turn);
1165       }
1166   },
1167   draw_history: function() {
1168       let log_display_lines = [];
1169       let log_links = {};
1170       let y_offset_in_log = 0;
1171       for (let line of this.log) {
1172           let [new_lines, link_data] = this.msg_into_lines_of_width(line,
1173                                                                     this.window_width)
1174           log_display_lines = log_display_lines.concat(new_lines);
1175           for (const y in link_data) {
1176               const rel_y = y_offset_in_log + parseInt(y);
1177               log_links[rel_y] = [];
1178               for (let link of link_data[y]) {
1179                   log_links[rel_y].push(link);
1180               }
1181           }
1182           y_offset_in_log += new_lines.length;
1183       };
1184       let i = log_display_lines.length - 1;
1185       for (let y = terminal.rows - 1 - this.height_input;
1186            y >= this.height_header && i >= 0;
1187            y--, i--) {
1188           terminal.write(y, this.window_width, log_display_lines[i]);
1189       }
1190       for (const key of Object.keys(log_links)) {
1191           if (parseInt(key) <= i) {
1192               delete log_links[key];
1193           }
1194       }
1195       let offset = [terminal.rows - this.height_input - log_display_lines.length,
1196                     this.window_width];
1197       this.offset_links(offset, log_links);
1198   },
1199   draw_info: function() {
1200       const info = "MAP VIEW: " + tui.map_mode + "\n" + explorer.get_info();
1201       let [lines, link_data] = this.msg_into_lines_of_width(info, this.window_width);
1202       let offset = [this.height_header, this.window_width];
1203       for (let y = offset[0], i = 0; y < terminal.rows && i < lines.length; y++, i++) {
1204         terminal.write(y, offset[1], lines[i]);
1205       }
1206       this.offset_links(offset, link_data);
1207   },
1208   draw_input: function() {
1209     if (this.mode.has_input_prompt) {
1210         for (let y = terminal.rows - this.height_input, i = 0; i < this.input_lines.length; y++, i++) {
1211             terminal.write(y, this.window_width, this.input_lines[i]);
1212         }
1213     }
1214   },
1215   draw_help: function() {
1216       let movement_keys_desc = '';
1217       if (!this.mode.is_intro) {
1218           movement_keys_desc = Object.keys(this.movement_keys).join(',');
1219       }
1220       let content = this.mode.short_desc + " help\n\n" + this.mode.help_intro + "\n\n";
1221       if (this.mode.available_actions.length > 0) {
1222           content += "Available actions:\n";
1223           for (let action of this.mode.available_actions) {
1224               if (Object.keys(this.action_tasks).includes(action)) {
1225                   if (!this.task_action_on(action)) {
1226                       continue;
1227                   }
1228               }
1229               if (action == 'move_explorer') {
1230                   action = 'move';
1231               }
1232               if (action == 'move') {
1233                   content += "[" + movement_keys_desc + "] – move\n"
1234               } else {
1235                   content += "[" + this.keys[action] + "] – " + key_descriptions[action] + "\n";
1236               }
1237           }
1238           content += '\n';
1239       }
1240       content += this.mode.list_available_modes();
1241       let start_x = 0;
1242       if (!this.mode.has_input_prompt) {
1243           start_x = this.window_width;
1244           this.draw_links = false;
1245       }
1246       terminal.drawBox(0, start_x, terminal.rows, this.window_width);
1247       let [lines, _] = this.msg_into_lines_of_width(content, this.window_width);
1248       for (let y = 0, i = 0; y < terminal.rows && i < lines.length; y++, i++) {
1249           terminal.write(y, start_x, lines[i]);
1250       }
1251   },
1252   toggle_tile_draw: function() {
1253       if (tui.tile_draw) {
1254           tui.tile_draw = false;
1255       } else {
1256           tui.tile_draw = true;
1257       }
1258   },
1259   toggle_map_mode: function() {
1260       if (tui.map_mode == 'terrain only') {
1261           tui.map_mode = 'terrain + annotations';
1262       } else if (tui.map_mode == 'terrain + annotations') {
1263           tui.map_mode = 'terrain + things';
1264       } else if (tui.map_mode == 'terrain + things') {
1265           tui.map_mode = 'protections';
1266       } else if (tui.map_mode == 'protections') {
1267           tui.map_mode = 'terrain only';
1268       }
1269   },
1270   full_refresh: function() {
1271     this.draw_links = true;
1272     this.links = {};
1273     terminal.drawBox(0, 0, terminal.rows, terminal.cols);
1274     this.recalc_input_lines();
1275     if (this.mode.is_intro) {
1276         this.draw_history();
1277         this.draw_input();
1278     } else {
1279         this.draw_map();
1280         this.draw_turn_line();
1281         this.draw_mode_line();
1282         if (this.mode.shows_info) {
1283           this.draw_info();
1284         } else {
1285           this.draw_history();
1286         }
1287         this.draw_input();
1288     }
1289     if (this.show_help) {
1290         this.draw_help();
1291     }
1292     if (this.draw_face && ['chat', 'play'].includes(this.mode.name)) {
1293         this.draw_face_popup();
1294     }
1295     if (!this.draw_links) {
1296         this.links = {};
1297     }
1298     terminal.refresh();
1299   }
1300 }
1301
1302 let game = {
1303     init: function() {
1304         this.things = {};
1305         this.turn = -1;
1306         this.map = "";
1307         this.map_control = "";
1308         this.map_size = [0,0];
1309         this.player_id = -1;
1310         this.portals = {};
1311         this.tasks = {};
1312     },
1313     get_thing: function(id_, create_if_not_found=false) {
1314         if (id_ in game.things) {
1315             return game.things[id_];
1316         } else if (create_if_not_found) {
1317             let t = new Thing([0,0]);
1318             game.things[id_] = t;
1319             return t;
1320         };
1321     },
1322     move: function(start_position, direction) {
1323         let target = [start_position[0], start_position[1]];
1324         if (direction == 'LEFT') {
1325             target[1] -= 1;
1326         } else if (direction == 'RIGHT') {
1327             target[1] += 1;
1328         } else if (game.map_geometry == 'Square') {
1329             if (direction == 'UP') {
1330                 target[0] -= 1;
1331             } else if (direction == 'DOWN') {
1332                 target[0] += 1;
1333             };
1334         } else if (game.map_geometry == 'Hex') {
1335             let start_indented = start_position[0] % 2;
1336             if (direction == 'UPLEFT') {
1337                 target[0] -= 1;
1338                 if (!start_indented) {
1339                     target[1] -= 1;
1340                 }
1341             } else if (direction == 'UPRIGHT') {
1342                 target[0] -= 1;
1343                 if (start_indented) {
1344                     target[1] += 1;
1345                 }
1346             } else if (direction == 'DOWNLEFT') {
1347                 target[0] += 1;
1348                 if (!start_indented) {
1349                     target[1] -= 1;
1350                 }
1351             } else if (direction == 'DOWNRIGHT') {
1352                 target[0] += 1;
1353                 if (start_indented) {
1354                     target[1] += 1;
1355                 }
1356             };
1357         };
1358         if (target[0] < 0 || target[1] < 0 ||
1359             target[0] >= this.map_size[0] || target[1] >= this.map_size[1]) {
1360             return null;
1361         };
1362         return target;
1363     },
1364     teleport: function() {
1365         if (game.player.position in this.portals) {
1366             server.reconnect_to(this.portals[game.player.position]);
1367         } else {
1368             terminal.blink_screen();
1369             tui.log_msg('? not standing on portal')
1370         }
1371     }
1372 }
1373
1374 game.init();
1375 tui.init();
1376 tui.full_refresh();
1377 server.init(websocket_location);
1378
1379 let explorer = {
1380     position: [0,0],
1381     annotations: {},
1382     info_cached: false,
1383     move: function(direction) {
1384         let target = game.move(this.position, direction);
1385         if (target) {
1386             this.position = target
1387             this.info_cached = false;
1388             if (tui.tile_draw) {
1389                 this.send_tile_control_command();
1390             }
1391         } else {
1392             terminal.blink_screen();
1393         };
1394     },
1395     update_annotations: function(yx, str) {
1396         this.annotations[yx] = str;
1397         if (tui.mode.name == 'study') {
1398             tui.full_refresh();
1399         }
1400     },
1401     empty_annotations: function() {
1402         this.annotations = {};
1403         if (tui.mode.name == 'study') {
1404             tui.full_refresh();
1405         }
1406     },
1407     get_info: function() {
1408         if (this.info_cached) {
1409             return this.info_cached;
1410         }
1411         let info_to_cache = '';
1412         let position_i = this.position[0] * game.map_size[1] + this.position[1];
1413         if (game.fov[position_i] != '.') {
1414             info_to_cache += 'outside field of view';
1415         } else {
1416             for (let t_id in game.things) {
1417                  let t = game.things[t_id];
1418                  if (t.position[0] == this.position[0] && t.position[1] == this.position[1]) {
1419                      info_to_cache += "THING: " + this.get_thing_info(t);
1420                      let protection = t.protection;
1421                      if (protection == '.') {
1422                          protection = 'none';
1423                      }
1424                      info_to_cache += " / protection: " + protection + "\n";
1425                      if (t.hat) {
1426                          info_to_cache += t.hat.slice(0, 6) + '\n';
1427                          info_to_cache += t.hat.slice(6, 12) + '\n';
1428                          info_to_cache += t.hat.slice(12, 18) + '\n';
1429                      }
1430                      if (t.face) {
1431                          info_to_cache += t.face.slice(0, 6) + '\n';
1432                          info_to_cache += t.face.slice(6, 12) + '\n';
1433                          info_to_cache += t.face.slice(12, 18) + '\n';
1434                      }
1435                  }
1436             }
1437             let terrain_char = game.map[position_i]
1438             let terrain_desc = '?'
1439             if (game.terrains[terrain_char]) {
1440                 terrain_desc = game.terrains[terrain_char];
1441             };
1442             info_to_cache += 'TERRAIN: "' + terrain_char + '" / ' + terrain_desc + "\n";
1443             let protection = game.map_control[position_i];
1444             if (protection == '.') {
1445                 protection = 'unprotected';
1446             };
1447             info_to_cache += 'PROTECTION: ' + protection + '\n';
1448             if (this.position in game.portals) {
1449                 info_to_cache += "PORTAL: " + game.portals[this.position] + "\n";
1450             }
1451             if (this.position in this.annotations) {
1452                 info_to_cache += "ANNOTATION: " + this.annotations[this.position];
1453             }
1454         }
1455         this.info_cached = info_to_cache;
1456         return this.info_cached;
1457     },
1458     get_thing_info: function(t) {
1459         const symbol = game.thing_types[t.type_];
1460         let info = t.type_ + " / " + symbol;
1461         if (t.thing_char) {
1462             info += t.thing_char;
1463         };
1464         if (t.name_) {
1465             info += " (" + t.name_ + ")";
1466         }
1467         if (t.installed) {
1468             info += " / installed";
1469         }
1470         return info;
1471     },
1472     annotate: function(msg) {
1473         if (msg.length == 0) {
1474             msg = " ";  // triggers annotation deletion
1475         }
1476         server.send(["ANNOTATE", unparser.to_yx(explorer.position), msg, tui.password]);
1477     },
1478     set_portal: function(msg) {
1479         if (msg.length == 0) {
1480             msg = " ";  // triggers portal deletion
1481         }
1482         server.send(["PORTAL", unparser.to_yx(explorer.position), msg, tui.password]);
1483     },
1484     send_tile_control_command: function() {
1485         server.send(["SET_TILE_CONTROL", unparser.to_yx(this.position), tui.tile_control_char]);
1486     }
1487 }
1488
1489 tui.inputEl.addEventListener('input', (event) => {
1490     if (tui.mode.has_input_prompt) {
1491         let max_length = tui.window_width * terminal.rows - tui.input_prompt.length;
1492         if (tui.inputEl.value.length > max_length) {
1493             tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
1494         };
1495     } else if (tui.mode.name == 'write' && tui.inputEl.value.length > 0) {
1496         server.send(["TASK:WRITE", tui.inputEl.value[0], tui.password]);
1497         tui.switch_mode('edit');
1498     }
1499     tui.full_refresh();
1500 }, false);
1501 document.onclick = function() {
1502     tui.show_help = false;
1503 };
1504 tui.inputEl.addEventListener('keydown', (event) => {
1505     tui.show_help = false;
1506     tui.draw_face = false;
1507     if (event.key == 'Enter') {
1508         event.preventDefault();
1509     }
1510     if ((!tui.mode.is_intro && event.key == 'Escape')
1511         || (tui.mode.has_input_prompt && event.key == 'Enter'
1512             && tui.inputEl.value.length == 0
1513             && ['chat', 'command_thing', 'take_thing', 'drop_thing',
1514                 'admin_enter'].includes(tui.mode.name))) {
1515         if (!['chat', 'play', 'study', 'edit'].includes(tui.mode.name)) {
1516             tui.log_msg('@ aborted');
1517         }
1518         tui.switch_mode('play');
1519     } else if (tui.mode.has_input_prompt && event.key == 'Enter' && tui.inputEl.value == '/help') {
1520         tui.show_help = true;
1521         tui.inputEl.value = "";
1522         tui.restore_input_values();
1523     } else if (!tui.mode.has_input_prompt && event.key == tui.keys.help
1524                && !tui.mode.is_single_char_entry) {
1525         tui.show_help = true;
1526     } else if (tui.mode.name == 'login' && event.key == 'Enter') {
1527         tui.login_name = tui.inputEl.value;
1528         server.send(['LOGIN', tui.inputEl.value]);
1529         tui.inputEl.value = "";
1530     } else if (tui.mode.name == 'enter_face' && event.key == 'Enter') {
1531         if (tui.inputEl.value.length != 18) {
1532             tui.log_msg('? wrong input length, aborting');
1533         } else {
1534             server.send(['PLAYER_FACE', tui.inputEl.value]);
1535         }
1536         tui.inputEl.value = "";
1537         tui.switch_mode('edit');
1538     } else if (tui.mode.name == 'command_thing' && event.key == 'Enter') {
1539         server.send(['TASK:COMMAND', tui.inputEl.value]);
1540         tui.inputEl.value = "";
1541     } else if (tui.mode.name == 'take_thing' && event.key == 'Enter') {
1542         tui.pick_selectable('PICK_UP');
1543     } else if (tui.mode.name == 'drop_thing' && event.key == 'Enter') {
1544         tui.pick_selectable('DROP');
1545     } else if (tui.mode.name == 'control_pw_pw' && event.key == 'Enter') {
1546         if (tui.inputEl.value.length == 0) {
1547             tui.log_msg('@ aborted');
1548         } else {
1549             server.send(['SET_MAP_CONTROL_PASSWORD',
1550                         tui.tile_control_char, tui.inputEl.value]);
1551             tui.log_msg('@ sent new password for protection character "' + tui.tile_control_char + '".');
1552         }
1553         tui.switch_mode('admin');
1554     } else if (tui.mode.name == 'portal' && event.key == 'Enter') {
1555         explorer.set_portal(tui.inputEl.value);
1556         tui.switch_mode('edit');
1557     } else if (tui.mode.name == 'name_thing' && event.key == 'Enter') {
1558         if (tui.inputEl.value.length == 0) {
1559             tui.inputEl.value = " ";
1560         }
1561         server.send(["THING_NAME", tui.selected_thing_id, tui.inputEl.value,
1562                      tui.password]);
1563         tui.switch_mode('edit');
1564     } else if (tui.mode.name == 'annotate' && event.key == 'Enter') {
1565         explorer.annotate(tui.inputEl.value);
1566         tui.switch_mode('edit');
1567     } else if (tui.mode.name == 'password' && event.key == 'Enter') {
1568         if (tui.inputEl.value.length == 0) {
1569             tui.inputEl.value = " ";
1570         }
1571         tui.password = tui.inputEl.value
1572         tui.switch_mode('edit');
1573     } else if (tui.mode.name == 'admin_enter' && event.key == 'Enter') {
1574         server.send(['BECOME_ADMIN', tui.inputEl.value]);
1575         tui.switch_mode('play');
1576     } else if (tui.mode.name == 'control_pw_type' && event.key == 'Enter') {
1577         if (tui.inputEl.value.length != 1) {
1578             tui.log_msg('@ entered non-single-char, therefore aborted');
1579             tui.switch_mode('admin');
1580         } else {
1581             tui.tile_control_char = tui.inputEl.value[0];
1582             tui.switch_mode('control_pw_pw');
1583         }
1584     } else if (tui.mode.name == 'control_tile_type' && event.key == 'Enter') {
1585         if (tui.inputEl.value.length != 1) {
1586             tui.log_msg('@ entered non-single-char, therefore aborted');
1587             tui.switch_mode('admin');
1588         } else {
1589             tui.tile_control_char = tui.inputEl.value[0];
1590             tui.switch_mode('control_tile_draw');
1591         }
1592     } else if (tui.mode.name == 'admin_thing_protect' && event.key == 'Enter') {
1593         if (tui.inputEl.value.length != 1) {
1594             tui.log_msg('@ entered non-single-char, therefore aborted');
1595         } else {
1596             server.send(['THING_PROTECTION', tui.selected_thing_id, tui.inputEl.value])
1597             tui.log_msg('@ sent new protection character for thing');
1598         }
1599         tui.switch_mode('admin');
1600     } else if (tui.mode.name == 'chat' && event.key == 'Enter') {
1601         let tokens = parser.tokenize(tui.inputEl.value);
1602         if (tokens.length > 0 && tokens[0].length > 0) {
1603             if (tui.inputEl.value[0][0] == '/') {
1604                 if (tokens[0].slice(1) == 'nick') {
1605                     if (tokens.length > 1) {
1606                         server.send(['NICK', tokens[1]]);
1607                     } else {
1608                         tui.log_msg('? need new name');
1609                     }
1610                 } else {
1611                     tui.log_msg('? unknown command');
1612                 }
1613             } else {
1614                     server.send(['ALL', tui.inputEl.value]);
1615             }
1616         } else if (tui.inputEl.valuelength > 0) {
1617                 server.send(['ALL', tui.inputEl.value]);
1618         }
1619         tui.inputEl.value = "";
1620     } else if (tui.mode.name == 'play') {
1621           if (tui.mode.mode_switch_on_key(event)) {
1622               null;
1623           } else if (event.key === tui.keys.consume && tui.task_action_on('consume')) {
1624               server.send(["TASK:INTOXICATE"]);
1625           } else if (event.key === tui.keys.door && tui.task_action_on('door')) {
1626               server.send(["TASK:DOOR"]);
1627           } else if (event.key === tui.keys.wear && tui.task_action_on('wear')) {
1628               server.send(["TASK:WEAR"]);
1629           } else if (event.key === tui.keys.spin && tui.task_action_on('spin')) {
1630               server.send(["TASK:SPIN"]);
1631           } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1632               server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1633           } else if (event.key === tui.keys.teleport) {
1634               game.teleport();
1635           };
1636     } else if (tui.mode.name == 'study') {
1637         if (tui.mode.mode_switch_on_key(event)) {
1638               null;
1639         } else if (event.key in tui.movement_keys) {
1640             explorer.move(tui.movement_keys[event.key]);
1641         } else if (event.key == tui.keys.toggle_map_mode) {
1642             tui.toggle_map_mode();
1643         };
1644     } else if (tui.mode.name == 'control_tile_draw') {
1645         if (tui.mode.mode_switch_on_key(event)) {
1646             null;
1647         } else if (event.key in tui.movement_keys) {
1648             explorer.move(tui.movement_keys[event.key]);
1649         } else if (event.key === tui.keys.toggle_tile_draw) {
1650             tui.toggle_tile_draw();
1651         };
1652     } else if (tui.mode.name == 'admin') {
1653         if (tui.mode.mode_switch_on_key(event)) {
1654               null;
1655         } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1656             server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1657         };
1658     } else if (tui.mode.name == 'edit') {
1659         if (tui.mode.mode_switch_on_key(event)) {
1660               null;
1661         } else if (event.key in tui.movement_keys && tui.task_action_on('move')) {
1662             server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
1663         } else if (event.key === tui.keys.flatten && tui.task_action_on('flatten')) {
1664             server.send(["TASK:FLATTEN_SURROUNDINGS", tui.password]);
1665           } else if (event.key === tui.keys.install && tui.task_action_on('install')) {
1666               server.send(["TASK:INSTALL", tui.password]);
1667         } else if (event.key == tui.keys.toggle_map_mode) {
1668             tui.toggle_map_mode();
1669         }
1670     }
1671     tui.full_refresh();
1672 }, false);
1673
1674 rows_selector.addEventListener('input', function() {
1675     if (rows_selector.value % 4 != 0 || rows_selector.value < 24) {
1676         return;
1677     }
1678     window.localStorage.setItem(rows_selector.id, rows_selector.value);
1679     terminal.initialize();
1680     tui.full_refresh();
1681 }, false);
1682 cols_selector.addEventListener('input', function() {
1683     if (cols_selector.value % 4 != 0 || cols_selector.value < 80) {
1684         return;
1685     }
1686     window.localStorage.setItem(cols_selector.id, cols_selector.value);
1687     terminal.initialize();
1688     tui.window_width = terminal.cols / 2,
1689     tui.full_refresh();
1690 }, false);
1691 for (let key_selector of key_selectors) {
1692     key_selector.addEventListener('input', function() {
1693         window.localStorage.setItem(key_selector.id, key_selector.value);
1694         tui.init_keys();
1695     }, false);
1696 }
1697 window.setInterval(function() {
1698     if (server.websocket.readyState == 1) {
1699         server.send(['PING']);
1700     } else if (server.websocket.readyState != 0) {
1701         server.reconnect_to(server.url);
1702         tui.log_msg('@ attempting reconnect …')
1703     }
1704 }, 1000);
1705 window.setInterval(function() {
1706     let val = "?";
1707     let span_decoration = "none";
1708     if (document.activeElement == tui.inputEl) {
1709         val = "on (click outside terminal to change)";
1710     } else {
1711         val = "off (click into terminal to change)";
1712         span_decoration = "line-through";
1713     };
1714     document.getElementById("keyboard_control").textContent = val;
1715     for (const span of document.querySelectorAll('.keyboard_controlled')) {
1716         span.style.textDecoration = span_decoration;
1717     }
1718 }, 100);
1719 document.getElementById("terminal").onclick = function() {
1720     tui.inputEl.focus();
1721 };
1722 document.getElementById("help").onclick = function() {
1723     tui.show_help = true;
1724     tui.full_refresh();
1725 };
1726 for (const switchEl  of document.querySelectorAll('[id^="switch_to_"]')) {
1727     const mode = switchEl.id.slice("switch_to_".length);
1728     switchEl.onclick = function() {
1729         tui.switch_mode(mode);
1730         tui.full_refresh();
1731     }
1732 };
1733 document.getElementById("toggle_tile_draw").onclick = function() {
1734     tui.toggle_tile_draw();
1735 }
1736 document.getElementById("toggle_map_mode").onclick = function() {
1737     tui.toggle_map_mode();
1738     tui.full_refresh();
1739 };
1740 document.getElementById("flatten").onclick = function() {
1741     server.send(['TASK:FLATTEN_SURROUNDINGS', tui.password]);
1742 };
1743 document.getElementById("door").onclick = function() {
1744     server.send(['TASK:DOOR']);
1745 };
1746 document.getElementById("consume").onclick = function() {
1747     server.send(['TASK:INTOXICATE']);
1748 };
1749 document.getElementById("install").onclick = function() {
1750     server.send(['TASK:INSTALL']);
1751 };
1752 document.getElementById("wear").onclick = function() {
1753     server.send(['TASK:WEAR']);
1754 };
1755 document.getElementById("spin").onclick = function() {
1756     server.send(['TASK:SPIN']);
1757 };
1758 document.getElementById("teleport").onclick = function() {
1759     game.teleport();
1760 };
1761 for (const move_button of document.querySelectorAll('[id*="_move_"]')) {
1762     if (move_button.id.startsWith('key_')) {  // not a move button
1763         continue;
1764     };
1765     let direction = move_button.id.split('_')[2].toUpperCase();
1766     move_button.onclick = function() {
1767         if (tui.mode.available_actions.includes("move")) {
1768             server.send(['TASK:MOVE', direction]);
1769         } else if (tui.mode.available_actions.includes("move_explorer")) {
1770             explorer.move(direction);
1771             tui.full_refresh();
1772         };
1773     };
1774 };
1775 </script>
1776 </body></html>