home · contact · privacy
664409d990800a38a9a980bd71bdb6f376161d9d
[plomrogue2-experiments] / new2 / rogue_chat_nocanvas_monochrome.html
1 <!DOCTYPE html>
2 <html><head>
3 <style>
4 </style>
5 </head><body>
6 <div>
7 rows: <input id="n_rows" type="number" step=4 min=8 value=24 />
8 cols: <input id="n_cols" type="number" step=4 min=20 value=80 />
9 </div>
10 <pre id="terminal" style="display: inline-block;"></pre>
11 <textarea id="input" style="opacity: 0; width: 0px;"></textarea>
12 <div>
13 keys:<br />
14 square_move_up: <input id="key_square_move_up" type="text" value="w" /> (hint: ArrowUp)<br />
15 square_move_left: <input id="key_square_move_left" type="text" value="a" /> (hint: ArrowLeft)<br />
16 square_move_down: <input id="key_square_move_down" type="text" value="s" /> (hint: ArrowDown)<br />
17 square_move_right: <input id="key_square_move_right" type="text" value="d" /> (hint: ArrowRight)<br />
18 hex_move_upleft: <input id="key_hex_move_upleft" type="text" value="w" /><br />
19 hex_move_upright: <input id="key_hex_move_upright" type="text" value="e" /><br />
20 hex_move_right: <input id="key_hex_move_right" type="text" value="d" /><br />
21 hex_move_downright: <input id="key_hex_move_downright" type="text" value="c" /><br />
22 hex_move_downleft: <input id="key_hex_move_downleft" type="text" value="x" /><br />
23 hex_move_left: <input id="key_hex_move_left" type="text" value="s" /><br />
24 flatten_: <input id="key_flatten" type="text" value="f" /><br />
25 switch_to_chat: <input id="key_switch_to_chat" type="text" value="C" /><br />
26 switch_to_play: <input id="key_switch_to_play" type="text" value="P" /><br />
27 switch_to_annotate: <input id="key_switch_to_annotate" type="text" value="E" /><br />
28 switch_to_portal: <input id="key_switch_to_portal" type="text" value="p" /><br />
29 switch_to_study: <input id="key_switch_to_study" type="text" value="?" /><br />
30 switch_to_edit: <input id="key_switch_to_edit" type="text" value="E" /><br />
31 </div>
32 <script>
33 "use strict";
34 let websocket_location = "ws://localhost:8000";
35
36 let rows_selector = document.getElementById("n_rows");
37 let cols_selector = document.getElementById("n_cols");
38 let key_selectors = document.querySelectorAll('[id^="key_"]');
39
40 let terminal = {
41   foreground: 'white',
42   background: 'black',
43   initialize: function() {
44     this.rows = rows_selector.value;
45     this.cols = cols_selector.value;
46     this.pre_el = document.getElementById("terminal");
47     this.pre_el.style.color = this.foreground;
48     this.pre_el.style.backgroundColor = this.background;
49     this.content = [];
50       let line = []
51     for (let y = 0, x = 0; y <= this.rows; x++) {
52         if (x == this.cols) {
53             x = 0;
54             y += 1;
55             this.content.push(line);
56             line = [];
57             if (y == this.rows) {
58                 break;
59             }
60         }
61         line.push(' ');
62     }
63   },
64   blink_screen: function() {
65       this.pre_el.style.color = this.background;
66       this.pre_el.style.backgroundColor = this.foreground;
67       setTimeout(() => {
68           this.pre_el.style.color = this.foreground;
69           this.pre_el.style.backgroundColor = this.background;
70       }, 100);
71   },
72   refresh: function() {
73       let pre_string = '';
74       for (let y = 0; y < this.rows; y++) {
75           let line = this.content[y].join('');
76           pre_string += line + '\n';
77       }
78       this.pre_el.textContent = pre_string;
79   },
80   write: function(start_y, start_x, msg) {
81       for (let x = start_x, i = 0; x < this.cols && i < msg.length; x++, i++) {
82           this.content[start_y][x] = msg[i];
83       }
84   },
85   drawBox: function(start_y, start_x, height, width) {
86     let end_y = start_y + height;
87     let end_x = start_x + width;
88     for (let y = start_y, x = start_x; y < this.rows; x++) {
89       if (x == end_x) {
90         x = start_x;
91         y += 1;
92         if (y == end_y) {
93             break;
94         }
95       };
96       this.content[y][x] = ' ';
97     }
98   },
99 }
100 terminal.initialize();
101
102 let parser = {
103   tokenize: function(str) {
104     let token_ends = [];
105     let tokens = [];
106     let token = ''
107     let quoted = false;
108     let escaped = false;
109     for (let i = 0; i < str.length; i++) {
110       let c = str[i];
111       if (quoted) {
112         if (escaped) {
113           token += c;
114           escaped = false;
115         } else if (c == '\\') {
116           escaped = true;
117         } else if (c == '"') {
118           quoted = false
119         } else {
120           token += c;
121         }
122       } else if (c == '"') {
123         quoted = true
124       } else if (c === ' ') {
125         if (token.length > 0) {
126           token_ends.push(i);
127           tokens.push(token);
128           token = '';
129         }
130       } else {
131         token += c;
132       }
133     }
134     if (token.length > 0) {
135       tokens.push(token);
136     }
137     let token_starts = [];
138     for (let i = 0; i < token_ends.length; i++) {
139       token_starts.push(token_ends[i] - tokens[i].length);
140     };
141     return [tokens, token_starts];
142   },
143   parse_yx: function(position_string) {
144     let coordinate_strings = position_string.split(',')
145     let position = [0, 0];
146     position[0] = parseInt(coordinate_strings[0].slice(2));
147     position[1] = parseInt(coordinate_strings[1].slice(2));
148     return position;
149   },
150 }
151
152 class Thing {
153     constructor(yx) {
154         this.position = yx;
155     }
156 }
157
158 let server = {
159     init: function(url) {
160         this.url = url;
161         this.websocket = new WebSocket(this.url);
162         this.websocket.onopen = function(event) {
163             window.setInterval(function() { server.send(['PING']) }, 30000);
164             tui.log_msg("@ server connected! :)");
165             tui.switch_mode(mode_login);
166         };
167         this.websocket.onclose = function(event) {
168             tui.log_msg("@ server disconnected :(");
169             tui.log_msg("@ hint: try the '/reconnect' command");
170         };
171         this.websocket.onmessage = this.handle_event;
172     },
173     reconnect: function() {
174         this.reconnect_to(this.url);
175     },
176     reconnect_to: function(url) {
177         this.websocket.close();
178         this.init(url);
179     },
180     send: function(tokens) {
181         this.websocket.send(unparser.untokenize(tokens));
182     },
183     handle_event: function(event) {
184         let tokens = parser.tokenize(event.data)[0];
185         if (tokens[0] === 'TURN') {
186             game.turn_complete = false;
187             game.things = {};
188             game.portals = {};
189             game.turn = parseInt(tokens[1]);
190         } else if (tokens[0] === 'THING_POS') {
191             game.get_thing(tokens[1], true).position = parser.parse_yx(tokens[2]);
192         } else if (tokens[0] === 'THING_NAME') {
193             game.get_thing(tokens[1], true).name_ = tokens[2];
194         } else if (tokens[0] === 'MAP') {
195             game.map_geometry = tokens[1];
196             tui.init_keys();
197             game.map_size = parser.parse_yx(tokens[2]);
198             game.map = tokens[3]
199         } else if (tokens[0] === 'GAME_STATE_COMPLETE') {
200             game.turn_complete = true;
201             explorer.empty_info_db();
202             if (tui.mode == mode_post_login_wait) {
203                 tui.switch_mode(mode_play);
204                 tui.log_help();
205             } else if (tui.mode == mode_study) {
206                 explorer.query_info();
207             }
208             let t = game.get_thing(game.player_id);
209             if (t.position in game.portals) {
210                 tui.teleport_target = game.portals[t.position];
211                 tui.switch_mode(mode_teleport);
212                 return;
213             }
214             tui.full_refresh();
215         } else if (tokens[0] === 'CHAT') {
216              tui.log_msg('# ' + tokens[1], 1);
217         } else if (tokens[0] === 'PLAYER_ID') {
218             game.player_id = parseInt(tokens[1]);
219         } else if (tokens[0] === 'LOGIN_OK') {
220             this.send(['GET_GAMESTATE']);
221             tui.switch_mode(mode_post_login_wait);
222         } else if (tokens[0] === 'PORTAL') {
223             let position = parser.parse_yx(tokens[1]);
224             game.portals[position] = tokens[2];
225         } else if (tokens[0] === 'ANNOTATION') {
226             let position = parser.parse_yx(tokens[1]);
227             explorer.update_info_db(position, tokens[2]);
228         } else if (tokens[0] === 'UNHANDLED_INPUT') {
229             tui.log_msg('? unknown command');
230         } else if (tokens[0] === 'PLAY_ERROR') {
231             terminal.blink_screen();
232         } else if (tokens[0] === 'ARGUMENT_ERROR') {
233             tui.log_msg('? syntax error: ' + tokens[1]);
234         } else if (tokens[0] === 'GAME_ERROR') {
235             tui.log_msg('? game error: ' + tokens[1]);
236         } else if (tokens[0] === 'PONG') {
237             console.log('PONG');
238         } else {
239             tui.log_msg('? unhandled input: ' + event.data);
240         }
241     }
242 }
243
244 let unparser = {
245     quote: function(str) {
246         let quoted = ['"'];
247         for (let i = 0; i < str.length; i++) {
248             let c = str[i];
249             if (['"', '\\'].includes(c)) {
250                 quoted.push('\\');
251             };
252             quoted.push(c);
253         }
254         quoted.push('"');
255         return quoted.join('');
256     },
257     to_yx: function(yx_coordinate) {
258         return "Y:" + yx_coordinate[0] + ",X:" + yx_coordinate[1];
259     },
260     untokenize: function(tokens) {
261         let quoted_tokens = [];
262         for (let token of tokens) {
263             quoted_tokens.push(this.quote(token));
264         }
265         return quoted_tokens.join(" ");
266     }
267 }
268
269 class Mode {
270     constructor(name, has_input_prompt=false, shows_info=false, is_intro=false) {
271         this.name = name;
272         this.has_input_prompt = has_input_prompt;
273         this.shows_info= shows_info;
274         this.is_intro = is_intro;
275     }
276 }
277 let mode_waiting_for_server = new Mode('waiting_for_server', false, false, true);
278 let mode_login = new Mode('login', true, false, true);
279 let mode_post_login_wait = new Mode('waiting for game world', false, false, true);
280 let mode_chat = new Mode('chat / write messages to players', true, false);
281 let mode_annotate = new Mode('add message to map tile', true, true);
282 let mode_play = new Mode('play / move around', false, false);
283 let mode_study = new Mode('check map tiles for messages', false, true);
284 let mode_edit = new Mode('write ASCII char to map tile', false, false);
285 let mode_teleport = new Mode('teleport away?', true);
286 let mode_portal = new Mode('add portal to map tile', true, true);
287
288 let tui = {
289   mode: mode_waiting_for_server,
290   log: [],
291   input_prompt: '> ',
292   input_lines: [],
293   window_width: terminal.cols / 2,
294   height_turn_line: 1,
295   height_mode_line: 1,
296   height_input: 1,
297   init: function() {
298       this.inputEl = document.getElementById("input");
299       this.inputEl.focus();
300       this.recalc_input_lines();
301       this.height_header = this.height_turn_line + this.height_mode_line;
302       this.log_msg("@ waiting for server connection ...");
303       this.init_keys();
304   },
305   init_keys: function() {
306     this.keys = {};
307     for (let key_selector of key_selectors) {
308         this.keys[key_selector.id.slice(4)] = key_selector.value;
309     }
310     if (game.map_geometry == 'Square') {
311         this.movement_keys = {
312             [this.keys.square_move_up]: 'UP',
313             [this.keys.square_move_left]: 'LEFT',
314             [this.keys.square_move_down]: 'DOWN',
315             [this.keys.square_move_right]: 'RIGHT'
316         };
317     } else if (game.map_geometry == 'Hex') {
318         this.movement_keys = {
319             [this.keys.hex_move_upleft]: 'UPLEFT',
320             [this.keys.hex_move_upright]: 'UPRIGHT',
321             [this.keys.hex_move_right]: 'RIGHT',
322             [this.keys.hex_move_downright]: 'DOWNRIGHT',
323             [this.keys.hex_move_downleft]: 'DOWNLEFT',
324             [this.keys.hex_move_left]: 'LEFT'
325         };
326     };
327   },
328   switch_mode: function(mode, keep_pos=false) {
329     if (mode == mode_study && !keep_pos && game.player_id in game.things) {
330       explorer.position = game.things[game.player_id].position;
331     }
332     this.mode = mode;
333     this.empty_input();
334     if (mode == mode_annotate && explorer.position in explorer.info_db) {
335         let info = explorer.info_db[explorer.position];
336         if (info != "(none)") {
337             this.inputEl.value = info;
338             this.recalc_input_lines();
339         }
340     }
341     if (mode == mode_login) {
342         if (this.login_name) {
343             server.send(['LOGIN', this.login_name]);
344         } else {
345             this.log_msg("? need login name");
346         }
347     } else if (mode == mode_portal && explorer.position in game.portals) {
348         let portal = game.portals[explorer.position]
349         this.inputEl.value = portal;
350         this.recalc_input_lines();
351     } else if (mode == mode_teleport) {
352         tui.log_msg("@ May teleport to: " + tui.teleport_target);
353         tui.log_msg("@ Enter 'YES!' to entusiastically affirm.");
354     }
355     this.full_refresh();
356   },
357   empty_input: function(str) {
358       this.inputEl.value = "";
359       if (this.mode.has_input_prompt) {
360           this.recalc_input_lines();
361       } else {
362           this.height_input = 0;
363       }
364   },
365   recalc_input_lines: function() {
366       this.input_lines = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value, this.window_width);
367       this.height_input = this.input_lines.length;
368   },
369   msg_into_lines_of_width: function(msg, width) {
370     let chunk = "";
371     let lines = [];
372     for (let i = 0, x = 0; i < msg.length; i++, x++) {
373       if (x >= width || msg[i] == "\n") {
374         lines.push(chunk);
375         chunk = "";
376         x = 0;
377       };
378       if (msg[i] != "\n") {
379         chunk += msg[i];
380       }
381     }
382     lines.push(chunk);
383     return lines;
384   },
385   log_msg: function(msg) {
386       this.log.push(msg);
387       while (this.log.length > 100) {
388         this.log.shift();
389       };
390       this.full_refresh();
391   },
392   log_help: function() {
393     let movement_keys_desc = Object.keys(this.movement_keys).join(',');
394     this.log_msg("HELP:");
395     this.log_msg("chat mode commands:");
396     this.log_msg("  /nick NAME - re-name yourself to NAME");
397     this.log_msg("  /msg USER TEXT - send TEXT to USER");
398     this.log_msg("  /help - show this help");
399     this.log_msg("  /P or /play - switch to play mode");
400     this.log_msg("  /? or /study - switch to study mode");
401     this.log_msg("commands common to study and play mode:");
402     this.log_msg("  " + movement_keys_desc + " - move");
403     this.log_msg("  " + this.keys.switch_to_chat + " - switch to chat mode");
404     this.log_msg("commands specific to play mode:");
405     this.log_msg("  " + this.keys.switch_to_edit + " - write following ASCII character");
406     this.log_msg("  " + this.keys.flatten + " - flatten surroundings");
407     this.log_msg("  " + this.keys.switch_to_study + " - switch to study mode");
408     this.log_msg("commands specific to study mode:");
409     this.log_msg("  " + this.keys.switch_to_annotate + " - annotate terrain");
410     this.log_msg("  " + this.keys.switch_to_play + " - switch to play mode");
411   },
412   draw_map: function() {
413     let map_lines_split = [];
414     let line = [];
415     for (let i = 0, j = 0; i < game.map.length; i++, j++) {
416         if (j == game.map_size[1]) {
417             map_lines_split.push(line);
418             line = [];
419             j = 0;
420         };
421         line.push(game.map[i]);
422     };
423     map_lines_split.push(line);
424     for (const thing_id in game.things) {
425         let t = game.things[thing_id];
426         map_lines_split[t.position[0]][t.position[1]] = '@';
427     };
428     if (tui.mode.shows_info) {
429         map_lines_split[explorer.position[0]][explorer.position[1]] = '?';
430     }
431     let map_lines = []
432     if (game.map_geometry == 'Square') {
433         for (let line_split of map_lines_split) {
434             map_lines.push(line_split.join(' '));
435         };
436     } else if (game.map_geometry == 'Hex') {
437         let indent = 0
438         for (let line_split of map_lines_split) {
439             map_lines.push(' '.repeat(indent) + line_split.join(' '));
440             if (indent == 0) {
441                 indent = 1;
442             } else {
443                 indent = 0;
444             };
445         };
446     }
447     let window_center = [terminal.rows / 2, this.window_width / 2];
448     let player = game.things[game.player_id];
449     let center_position = [player.position[0], player.position[1]];
450     if (tui.mode.shows_info) {
451         center_position = [explorer.position[0], explorer.position[1]];
452     }
453     center_position[1] = center_position[1] * 2;
454     let offset = [center_position[0] - window_center[0],
455                   center_position[1] - window_center[1]]
456     if (game.map_geometry == 'Hex' && offset[0] % 2) {
457         offset[1] += 1;
458     };
459     let term_y = Math.max(0, -offset[0]);
460     let term_x = Math.max(0, -offset[1]);
461     let map_y = Math.max(0, offset[0]);
462     let map_x = Math.max(0, offset[1]);
463     for (; term_y < terminal.rows && map_y < game.map_size[0]; term_y++, map_y++) {
464         let to_draw = map_lines[map_y].slice(map_x, this.window_width + offset[1]);
465         terminal.write(term_y, term_x, to_draw);
466     }
467   },
468   draw_mode_line: function() {
469       terminal.write(0, this.window_width, 'MODE: ' + this.mode.name);
470   },
471   draw_turn_line: function(n) {
472     terminal.write(1, this.window_width, 'TURN: ' + game.turn);
473   },
474   draw_history: function() {
475       let log_display_lines = [];
476       for (let line of this.log) {
477           log_display_lines = log_display_lines.concat(this.msg_into_lines_of_width(line, this.window_width));
478       };
479       for (let y = terminal.rows - 1 - this.height_input,
480                i = log_display_lines.length - 1;
481            y >= this.height_header && i >= 0;
482            y--, i--) {
483           terminal.write(y, this.window_width, log_display_lines[i]);
484       }
485   },
486   draw_info: function() {
487     let lines = this.msg_into_lines_of_width(explorer.get_info(), this.window_width);
488     for (let y = this.height_header, i = 0; y < terminal.rows && i < lines.length; y++, i++) {
489       terminal.write(y, this.window_width, lines[i]);
490     }
491   },
492   draw_input: function() {
493     if (this.mode.has_input_prompt) {
494         for (let y = terminal.rows - this.height_input, i = 0; i < this.input_lines.length; y++, i++) {
495             terminal.write(y, this.window_width, this.input_lines[i]);
496         }
497     }
498   },
499   full_refresh: function() {
500     terminal.drawBox(0, 0, terminal.rows, terminal.cols);
501     if (this.mode.is_intro) {
502         this.draw_history();
503         this.draw_input();
504     } else {
505         if (game.turn_complete) {
506             this.draw_map();
507             this.draw_turn_line();
508         }
509         this.draw_mode_line();
510         if (this.mode.shows_info) {
511           this.draw_info();
512         } else {
513           this.draw_history();
514         }
515         this.draw_input();
516     }
517     terminal.refresh();
518   }
519 }
520
521 let game = {
522     init: function() {
523         this.things = {};
524         this.turn = -1;
525         this.map = "";
526         this.map_size = [0,0];
527         this.player_id = -1;
528         this.portals = {};
529     },
530     get_thing: function(id_, create_if_not_found=false) {
531         if (id_ in game.things) {
532             return game.things[id_];
533         } else if (create_if_not_found) {
534             let t = new Thing([0,0]);
535             game.things[id_] = t;
536             return t;
537         };
538     },
539     move: function(start_position, direction) {
540         let target = [start_position[0], start_position[1]];
541         if (direction == 'LEFT') {
542             target[1] -= 1;
543         } else if (direction == 'RIGHT') {
544             target[1] += 1;
545         } else if (game.map_geometry == 'Square') {
546             if (direction == 'UP') {
547                 target[0] -= 1;
548             } else if (direction == 'DOWN') {
549                 target[0] += 1;
550             };
551         } else if (game.map_geometry == 'Hex') {
552             let start_indented = start_position[0] % 2;
553             if (direction == 'UPLEFT') {
554                 target[0] -= 1;
555                 if (!start_indented) {
556                     target[1] -= 1;
557                 }
558             } else if (direction == 'UPRIGHT') {
559                 target[0] -= 1;
560                 if (start_indented) {
561                     target[1] += 1;
562                 }
563             } else if (direction == 'DOWNLEFT') {
564                 target[0] += 1;
565                 if (!start_indented) {
566                     target[1] -= 1;
567                 }
568             } else if (direction == 'DOWNRIGHT') {
569                 target[0] += 1;
570                 if (start_indented) {
571                     target[1] += 1;
572                 }
573             };
574         };
575         if (target[0] < 0 || target[1] < 0 ||
576             target[0] >= this.map_size[0] || target[1] >= this.map_size[1]) {
577             return null;
578         };
579         return target;
580     }
581 }
582
583 game.init();
584 tui.init();
585 tui.full_refresh();
586 server.init(websocket_location);
587
588 let explorer = {
589     position: [0,0],
590     info_db: {},
591     move: function(direction) {
592         let target = game.move(this.position, direction);
593         if (target) {
594             this.position = target
595             this.query_info();
596             tui.full_refresh();
597         } else {
598             terminal.blink_screen();
599         };
600     },
601     update_info_db: function(yx, str) {
602         this.info_db[yx] = str;
603         if (tui.mode == mode_study) {
604             tui.full_refresh();
605         }
606     },
607     empty_info_db: function() {
608         this.info_db = {};
609         if (tui.mode == mode_study) {
610             tui.full_refresh();
611         }
612     },
613     query_info: function() {
614         server.send(["GET_ANNOTATION", unparser.to_yx(explorer.position)]);
615     },
616     get_info: function() {
617         let info = "";
618         let position_i = this.position[0] * game.map_size[1] + this.position[1];
619         info += "TERRAIN: " + game.map[position_i] + "\n";
620         for (let t_id in game.things) {
621              let t = game.things[t_id];
622              if (t.position[0] == this.position[0] && t.position[1] == this.position[1]) {
623                  info += "PLAYER @";
624                  if (t.name_) {
625                      info += ": " + t.name_;
626                  }
627                  info += "\n";
628              }
629         }
630         if (this.position in game.portals) {
631             info += "PORTAL: " + game.portals[this.position] + "\n";
632         }
633         if (this.position in this.info_db) {
634             info += "ANNOTATIONS: " + this.info_db[this.position];
635         } else {
636             info += 'waiting …';
637         }
638         return info;
639     },
640     annotate: function(msg) {
641         if (msg.length == 0) {
642             msg = " ";  // triggers annotation deletion
643         }
644         server.send(["ANNOTATE", unparser.to_yx(explorer.position), msg]);
645     },
646     set_portal: function(msg) {
647         if (msg.length == 0) {
648             msg = " ";  // triggers portal deletion
649         }
650         server.send(["PORTAL", unparser.to_yx(explorer.position), msg]);
651     }
652 }
653
654 tui.inputEl.addEventListener('input', (event) => {
655     if (tui.mode.has_input_prompt) {
656         let max_length = tui.window_width * terminal.rows - tui.input_prompt.length;
657         if (tui.inputEl.value.length > max_length) {
658             tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
659         };
660         tui.recalc_input_lines();
661         tui.full_refresh();
662     } else if (tui.mode == mode_edit && tui.inputEl.value.length > 0) {
663         server.send(["TASK:WRITE", tui.inputEl.value[0]]);
664         tui.switch_mode(mode_play);
665     } else if (tui.mode == mode_teleport) {
666         if (['Y', 'y'].includes(tui.inputEl.value[0])) {
667             server.reconnect_to(tui.teleport_target);
668         } else {
669             tui.log_msg("@ teleportation aborted");
670             tui.switch_mode(mode_play);
671         }
672     }
673 }, false);
674 tui.inputEl.addEventListener('keydown', (event) => {
675     if (event.key == 'Enter') {
676         event.preventDefault();
677     }
678     if (tui.mode == mode_login && event.key == 'Enter') {
679         tui.login_name = tui.inputEl.value;
680         server.send(['LOGIN', tui.inputEl.value]);
681         tui.empty_input();
682     } else if (tui.mode == mode_portal && event.key == 'Enter') {
683         explorer.set_portal(tui.inputEl.value);
684         tui.switch_mode(mode_study, true);
685     } else if (tui.mode == mode_annotate && event.key == 'Enter') {
686         explorer.annotate(tui.inputEl.value);
687         tui.switch_mode(mode_study, true);
688     } else if (tui.mode == mode_teleport && event.key == 'Enter') {
689         if (tui.inputEl.value == 'YES!') {
690             server.reconnect_to(tui.teleport_target);
691         } else {
692             tui.log_msg('@ teleport aborted');
693             tui.switch_mode(mode_play);
694         };
695     } else if (tui.mode == mode_chat && event.key == 'Enter') {
696         let [tokens, token_starts] = parser.tokenize(tui.inputEl.value);
697         if (tokens.length > 0 && tokens[0].length > 0) {
698             if (tui.inputEl.value[0][0] == '/') {
699                 if (tokens[0].slice(1) == 'play' || tokens[0].slice(1) == 'P') {
700                     tui.switch_mode(mode_play);
701                 } else if (tokens[0].slice(1) == 'study' || tokens[0].slice(1) == '?') {
702                     tui.switch_mode(mode_study);
703                 } else if (tokens[0].slice(1) == 'help') {
704                     tui.log_help();
705                 } else if (tokens[0].slice(1) == 'nick') {
706                     if (tokens.length > 1) {
707                         server.send(['LOGIN', tokens[1]]);
708                     } else {
709                         tui.log_msg('? need login name');
710                     }
711                 } else if (tokens[0].slice(1) == 'msg') {
712                     if (tokens.length > 2) {
713                         let msg = tui.inputEl.value.slice(token_starts[2]);
714                         server.send(['QUERY', tokens[1], msg]);
715                     } else {
716                         tui.log_msg('? need message target and message');
717                     }
718                 } else if (tokens[0].slice(1) == 'reconnect') {
719                     if (tokens.length > 1) {
720                         server.reconnect_to(tokens[1]);
721                     } else {
722                         server.reconnect();
723                     }
724                 } else {
725                     tui.log_msg('? unknown command');
726                 }
727             } else {
728                 server.send(['ALL', tui.inputEl.value]);
729             }
730         } else if (tui.inputEl.valuelength > 0) {
731             server.send(['ALL', tui.inputEl.value]);
732         }
733         tui.empty_input();
734         tui.full_refresh();
735       } else if (tui.mode == mode_play) {
736           if (event.key === tui.keys.switch_to_chat) {
737               event.preventDefault();
738               tui.switch_mode(mode_chat);
739           } else if (event.key === tui.keys.switch_to_edit) {
740               event.preventDefault();
741               tui.switch_mode(mode_edit);
742           } else if (event.key === tui.keys.switch_to_study) {
743               tui.switch_mode(mode_study);
744           } else if (event.key === tui.keys.flatten) {
745               server.send(["TASK:FLATTEN_SURROUNDINGS"]);
746           } else if (event.key in tui.movement_keys) {
747               server.send(['TASK:MOVE', tui.movement_keys[event.key]]);
748           };
749     } else if (tui.mode == mode_study) {
750         if (event.key === tui.keys.switch_to_chat) {
751             event.preventDefault();
752             tui.switch_mode(mode_chat);
753         } else if (event.key == tui.keys.switch_to_play) {
754             tui.switch_mode(mode_play);
755         } else if (event.key === tui.keys.switch_to_portal) {
756             event.preventDefault();
757             tui.switch_mode(mode_portal);
758         } else if (event.key in tui.movement_keys) {
759             explorer.move(tui.movement_keys[event.key]);
760         } else if (event.key === tui.keys.switch_to_annotate) {
761           event.preventDefault();
762           tui.switch_mode(mode_annotate);
763         };
764     }
765 }, false);
766
767 rows_selector.addEventListener('input', function() {
768     if (rows_selector.value % 4 != 0) {
769         return;
770     }
771     terminal.initialize();
772     tui.full_refresh();
773 }, false);
774 cols_selector.addEventListener('input', function() {
775     if (cols_selector.value % 4 != 0) {
776         return;
777     }
778     terminal.initialize();
779     tui.window_width = terminal.cols / 2,
780     tui.full_refresh();
781 }, false);
782 for (let key_selector of key_selectors) {
783     key_selector.addEventListener('input', function() {
784         tui.init_keys();
785     }, false);
786 }
787 window.setInterval(function() {
788     if (!(['input', 'n_cols', 'n_rows'].includes(document.activeElement.id)
789           || document.activeElement.id.startsWith('key_'))) {
790         tui.inputEl.focus();
791     }
792 }, 100);
793 </script>
794 </body></html>