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