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