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