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