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