plomlompom.com Git - plomrogue2-experiments/blob - new2/rogue_chat_nocanvas_monochrome.html

   1 <!DOCTYPE html>
   2 <html><head>
   3 <style>
   4 </style>
   5 </head><body>
   6 <pre id="terminal" style="display: inline-block; color: white; background-color: black;"></pre>
   7 <script>
   8 "use strict";
   9 let websocket_location = "ws://localhost:8000";
  10
  11 let terminal = {
  12   rows: 24,
  13   cols: 80,
  14   initialize: function() {
  15     this.pre_el = document.getElementById("terminal");
  16     this.content = [];
  17       let line = []
  18     for (let y = 0, x = 0; y <= this.rows; x++) {
  19         if (x == this.cols) {
  20             x = 0;
  21             y += 1;
  22             this.content.push(line);
  23             line = [];
  24             if (y == this.rows) {
  25                 break;
  26             }
  27         }
  28         line.push(' ');
  29     }
  30   },
  31   refresh: function() {
  32       let pre_string = '';
  33       for (let y = 0; y < this.rows; y++) {
  34           let line = this.content[y].join('');
  35           pre_string += line + '\n';
  36       }
  37       this.pre_el.textContent = pre_string;
  38   },
  39   write: function(start_y, start_x, msg) {
  40       for (let x = start_x, i = 0; x < this.cols && i < msg.length; x++, i++) {
  41           this.content[start_y][x] = msg[i];
  42       }
  43   },
  44   drawBox: function(start_y, start_x, height, width) {
  45     let end_y = start_y + height;
  46     let end_x = start_x + width;
  47       for (let y = start_y, x = start_x;; x++) {
  48         if (x == end_x) {
  49           x = start_x;
  50           y += 1;
  51           if (y == end_y) {
  52               break;
  53           }
  54         };
  55         this.content[y][x] = ' ';
  56     }
  57   },
  58 }
  59
  60 let parser = {
  61   tokenize: function(str) {
  62     let token_ends = [];
  63     let tokens = [];
  64     let token = ''
  65     let quoted = false;
  66     let escaped = false;
  67     for (let i = 0; i < str.length; i++) {
  68       let c = str[i];
  69       if (quoted) {
  70         if (escaped) {
  71           token += c;
  72           escaped = false;
  73         } else if (c == '\\') {
  74           escaped = true;
  75         } else if (c == '"') {
  76           quoted = false
  77         } else {
  78           token += c;
  79         }
  80       } else if (c == '"') {
  81         quoted = true
  82       } else if (c === ' ') {
  83         if (token.length > 0) {
  84           token_ends.push(i);
  85           tokens.push(token);
  86           token = '';
  87         }
  88       } else {
  89         token += c;
  90       }
  91     }
  92     if (token.length > 0) {
  93       tokens.push(token);
  94     }
  95     let token_starts = [];
  96     for (let i = 0; i < token_ends.length; i++) {
  97       token_starts.push(token_ends[i] - tokens[i].length);
  98     };
  99     return [tokens, token_starts];
 100   },
 101   parse_yx(position_string) {
 102     let coordinate_strings = position_string.split(',')
 103     let position = [0, 0];
 104     position[0] = parseInt(coordinate_strings[0].slice(2));
 105     position[1] = parseInt(coordinate_strings[1].slice(2));
 106     return position;
 107   },
 108 }
 109
 110 function quote(str) {
 111     let quoted = ['"'];
 112     for (let i = 0; i < str.length; i++) {
 113         let c = str[i];
 114         if (c in ['"', '\\']) {
 115             quoted.push('\\');
 116         };
 117         quoted.push(c);
 118     }
 119     quoted.push('"');
 120     return quoted.join('');
 121 }
 122
 123 let tui = {
 124   mode: 'chat',
 125   switch_mode: function(mode_name) {
 126     if (mode_name == 'explore') {
 127         explorer.position = game.things[game.player_id];
 128     }
 129     this.mode = mode_name;
 130     this.full_refresh();
 131   },
 132   draw_history: function() {
 133     terminal.drawBox(1, terminal.cols / 2, terminal.rows - 2, terminal.cols / 2);
 134     let i = 0;
 135     for (let line of chat.history) {
 136       terminal.write(terminal.rows - 2 - i, terminal.cols / 2, line);
 137       i += 1;
 138     }
 139   },
 140   draw_map: function() {
 141     terminal.drawBox(0, 0, terminal.rows, terminal.cols / 2);
 142     let map_lines = [];
 143     let line = [];
 144     for (let i = 0, j = 0; i < game.map.length; i++, j++) {
 145         if (j == game.map_size[1]) {
 146             map_lines.push(line);
 147             line = [];
 148             j = 0;
 149         };
 150         line.push(game.map[i]);
 151     };
 152     map_lines.push(line);
 153     let player_position = [0,0];
 154     for (const thing_id in game.things) {
 155         let t = game.things[thing_id];
 156         map_lines[t[0]][t[1]] = '@';
 157         if (game.player_id == thing_id) {
 158             player_position = t;
 159         }
 160     };
 161     let center_pos = player_position;
 162     if (tui.mode == 'explore') {
 163         map_lines[explorer.position[0]][explorer.position[1]] = '?';
 164         center_pos = explorer.position;
 165     }
 166     let offset = [(terminal.rows / 2) - center_pos[0],
 167                   terminal.cols / 4 - center_pos[1]];
 168       for (let term_y = offset[0], map_y = 0;
 169            term_y < terminal.rows && map_y < game.map_size[0];
 170            term_y++, map_y++) {
 171         if (term_y >= 0) {
 172             let to_draw = map_lines[map_y].join('').slice(0, terminal.cols / 2 - offset[1]);
 173             terminal.write(term_y, offset[1], to_draw);
 174         }
 175     }
 176   },
 177   draw_turn_line: function(n) {
 178     terminal.drawBox(0, terminal.cols / 2, 1, terminal.cols / 2);
 179     terminal.write(0, terminal.cols / 2, 'turn: ' + game.turn);
 180   },
 181   draw_input_line: function() {
 182     terminal.drawBox(terminal.rows - 1, terminal.cols / 2, 1, terminal.cols / 2);
 183     terminal.write(terminal.rows - 1, terminal.cols / 2, chat.input_line);
 184   },
 185   log_msg: function(msg) {
 186     let line_length = (terminal.cols / 2);
 187     let chunk = "";
 188     for (let i = 0, x = 0; i < msg.length; i++, x++) {
 189       if (x >= line_length) {
 190         chat.history.unshift(chunk);
 191         chunk = "";
 192         x = 0;
 193       };
 194       chunk += msg[i];
 195     }
 196     chat.history.unshift(chunk);
 197     while (chat.history.length > terminal.rows - 2) {
 198       chat.history.pop();
 199     };
 200     this.draw_history();
 201   },
 202   refresh: function() {
 203     terminal.refresh();
 204   },
 205   log_help: function() {
 206     tui.log_msg("");
 207     tui.log_msg("HELP");
 208     tui.log_msg("chat mode commands:");
 209     tui.log_msg("");
 210     tui.log_msg("/login USER - register as USER");
 211     tui.log_msg("/msg USER TEXT - send TEXT to USER");
 212     tui.log_msg("/help - show this help");
 213     tui.log_msg("/play - switch to play mode");
 214     tui.log_msg("");
 215     tui.log_msg("play mode commands:");
 216     tui.log_msg("w, a, s, d - move avatar");
 217     tui.log_msg("f - flatten surroundings");
 218     tui.log_msg("e - write following ASCII character");
 219     tui.log_msg("c - switch to chat mode");
 220     tui.log_msg("? - switch to explore mode");
 221     tui.log_msg("");
 222     tui.log_msg("explore mode commands:");
 223     tui.log_msg("w, a, s, d - move question mark");
 224     tui.log_msg("c - switch to chat mode");
 225     tui.log_msg("p - switch to play mode");
 226     tui.log_msg("");
 227   },
 228   draw_info: function() {
 229     terminal.drawBox(0, terminal.cols / 2, terminal.rows, terminal.cols / 2);
 230     let lines = ['unfinished info screen'];
 231     for (let y = 0, i = 0; y < terminal.rows && i < lines.length; y++, i++) {
 232       terminal.write(y, terminal.cols / 2, lines[i]);
 233     }
 234   },
 235   full_refresh: function() {
 236     this.draw_map();
 237     this.draw_turn_line();
 238     this.draw_history();
 239     this.draw_input_line();
 240     this.refresh();
 241   }
 242 }
 243
 244 let game = {
 245   things: {},
 246   turn: 0,
 247   map: "",
 248   map_size: [0,0],
 249   player_id: 0
 250 }
 251
 252 let chat = {
 253   input_line: "",
 254   history: [],
 255 }
 256
 257 terminal.initialize();
 258 tui.log_help();
 259 tui.full_refresh();
 260
 261 let websocket = new WebSocket(websocket_location);
 262 websocket.onmessage = function (event) {
 263   let tokens = parser.tokenize(event.data)[0];
 264   if (tokens[0] === 'TURN') {
 265     game.things = {}
 266     game.turn = parseInt(tokens[1]);
 267   } else if (tokens[0] === 'THING_POS') {
 268     game.things[tokens[1]] = parser.parse_yx(tokens[2]);
 269   } else if (tokens[0] === 'MAP') {
 270     game.map_size = parser.parse_yx(tokens[1]);
 271     game.map = tokens[2]
 272   } else if (tokens[0] === 'GAME_STATE_COMPLETE') {
 273     tui.draw_turn_line();
 274     tui.draw_map();
 275     tui.refresh();
 276   } else if (tokens[0] === 'CHAT') {
 277      tui.log_msg('# ' + tokens[1], 1);
 278      tui.refresh();
 279   } else if (tokens[0] === 'PLAYER_ID') {
 280       game.player_id = parseInt(tokens[1]);
 281   } else if (tokens[0] === 'META') {
 282      tui.log_msg('@ ' + tokens[1]);
 283      tui.refresh();
 284   } else if (tokens[0] === 'UNHANDLED_INPUT') {
 285      tui.log_msg('? unknown command');
 286      tui.refresh();
 287   } else if (tokens[0] === 'ARGUMENT_ERROR') {
 288      tui.log_msg('? syntax error: ' + tokens[1]);
 289      tui.refresh();
 290   } else if (tokens[0] === 'GAME_ERROR') {
 291      tui.log_msg('? game error: ' + tokens[1]);
 292      tui.refresh();
 293   } else if (tokens[0] === 'PONG') {
 294     console.log('PONG');
 295   } else {
 296      tui.log_msg('? unhandled input: ' + event.data);
 297      tui.refresh();
 298   }
 299 }
 300
 301 let explorer = {
 302     position: [0,0],
 303     move: function(direction) {
 304         let try_pos = [0,0];
 305         try_pos[0] = this.position[0];
 306         try_pos[1] = this.position[1];
 307         if (direction == 'left') {
 308             try_pos[1] -= 1;
 309         } else if (direction == 'right') {
 310             try_pos[1] += 1;
 311         } else if (direction == 'up') {
 312             try_pos[0] -= 1;
 313         } else if (direction == 'down') {
 314             try_pos[0] += 1;
 315         };
 316         if (!(try_pos[0] < 0) &&
 317             !(try_pos[1] < 0) &&
 318             !(try_pos[0] >= game.map_size[0])
 319             && !(try_pos[1] >= game.map_size[1])) {
 320             this.position = try_pos;
 321             tui.draw_map();
 322             tui.draw_info();
 323             tui.refresh();
 324         }
 325     }
 326 }
 327
 328 document.addEventListener('keydown', (event) => {
 329     if (tui.mode == 'chat') {
 330         if (event.key.length === 1) {
 331             chat.input_line += event.key;
 332             tui.draw_input_line();
 333             tui.refresh();
 334         } else if (event.key == 'Backspace') {
 335             chat.input_line = chat.input_line.slice(0, -1);
 336             tui.draw_input_line();
 337             tui.refresh();
 338         } else if (event.key == 'Enter') {
 339             let [tokens, token_starts] = parser.tokenize(chat.input_line);
 340             if (tokens.length > 0 && tokens[0].length > 0) {
 341                 if (tokens[0][0] == '/') {
 342                     if (tokens[0] == '/play') {
 343                         tui.switch_mode('play');
 344                     } else if (tokens[0] == '/?') {
 345                         tui.log_help();
 346                         tui.refresh();
 347                     } else if (tokens[0] == '/login') {
 348                         if (tokens.length > 1) {
 349                             websocket.send('LOGIN ' + quote(tokens[1]));
 350                         } else {
 351                             tui.log_msg('? need login name');
 352                         }
 353                     } else if (tokens[0] == '/msg') {
 354                         if (tokens.length > 2) {
 355                             let msg = chat.input_line.slice(token_starts[2]);
 356                             websocket.send('QUERY ' + quote(tokens[1]) + ' ' + quote(msg));
 357                         } else {
 358                             tui.log_msg('? need message target and message');
 359                         }
 360                     } else {
 361                         tui.log_msg('? unknown command');
 362                     }
 363                 } else {
 364                     websocket.send('ALL ' + quote(chat.input_line));
 365                 }
 366             }
 367             chat.input_line = '';
 368             tui.draw_input_line();
 369             tui.refresh();
 370         }
 371     } else if (tui.mode == 'play') {
 372           if (event.key === 'c') {
 373               tui.switch_mode('chat');
 374           } else if (event.key === 'e') {
 375               tui.switch_mode('edit');
 376           } else if (event.key === '?') {
 377               tui.switch_mode('explore');
 378           } else if (event.key === 'F1') {
 379               tui.log_help();
 380               tui.refresh();
 381           } else if (event.key === 'f') {
 382               websocket.send("TASK:FLATTEN_SURROUNDINGS");
 383           } else if (event.key === 'a') {
 384               websocket.send('TASK:MOVE LEFT');
 385           } else if (event.key === 'd') {
 386               websocket.send('TASK:MOVE RIGHT');
 387           } else if (event.key === 'w') {
 388               websocket.send('TASK:MOVE UP');
 389           } else if (event.key === 's') {
 390               websocket.send('TASK:MOVE DOWN');
 391           };
 392     } else if (tui.mode == 'edit') {
 393         if (event.key.length === 1) {
 394             websocket.send("TASK:WRITE " + quote(event.key));
 395         }
 396         tui.switch_mode('play');
 397     } else if (tui.mode == 'explore') {
 398         if (event.key === 'c') {
 399             tui.switch_mode('chat');
 400         } else if (event.key == 'p') {
 401             tui.switch_mode('play');
 402         } else if (event.key === 'a') {
 403               explorer.move('left');
 404         } else if (event.key === 'd') {
 405               explorer.move('right');
 406         } else if (event.key === 'w') {
 407               explorer.move('up');
 408         } else if (event.key === 's') {
 409               explorer.move('down');
 410         };
 411     }
 412 }, false);
 413
 414 window.setInterval(function() { websocket.send('PING') }, 30000);
 415 </script>
 416 </body></html>