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