X-Git-Url: https://plomlompom.com/repos//%22https:/validator.w3.org/check?a=blobdiff_plain;f=new2%2Frogue_chat.html;h=3d8e4c3850fa373bdb8dae0e2823cef6c50729be;hb=7f15f017f0e2784b3b2df4ff7cd07f403badee11;hp=7ba548b119f19cfaf74b373faed4084ea2ba0548;hpb=f70b38598ec55eb8036d3f0e301c9e39df567dee;p=plomrogue2-experiments diff --git a/new2/rogue_chat.html b/new2/rogue_chat.html index 7ba548b..3d8e4c3 100644 --- a/new2/rogue_chat.html +++ b/new2/rogue_chat.html @@ -26,16 +26,17 @@ let terminal = { set_font: function(type='normal') { this.ctx.font = type + ' ' + this.charHeight + 'px monospace'; }, - write: function(start_y, start_x, msg, foreground_color='black') { - this.ctx.fillStyle = foreground_color; - this.ctx.fillRect(start_x*this.charWidth, start_y*this.charHeight, - this.charWidth*msg.length, this.charHeight); + write: function(start_y, start_x, msg, foreground_color='white') { if (foreground_color === 'black') { this.ctx.fillStyle = 'white'; } else { this.ctx.fillStyle = 'black'; } this.ctx.fillText(msg, start_x*this.charWidth, start_y*this.charHeight); + this.ctx.fillRect(start_x*this.charWidth, start_y*this.charHeight, + this.charWidth*msg.length, this.charHeight); + this.ctx.fillStyle = foreground_color; + this.ctx.fillText(msg, start_x*this.charWidth, start_y*this.charHeight); }, drawBox: function (start_y, start_x, height, width, color='white') { this.ctx.fillStyle = color; @@ -95,32 +96,33 @@ let tui = { for (let line of chat.history) { terminal.write(terminal.rows - 2 - i, terminal.cols / 2, line); i += 1; - // if (i > terminal.rows - 3) { - // break; - // } } }, draw_map: function() { terminal.drawBox(0, 0, terminal.rows, terminal.cols / 2); - let map_line = ""; - let y = 0; - for (let i = 0, x = 0; i < game.map.length; i++, x++) { + for (let i = 0, y = 0, x = 0; i < game.map.length; i++, x++) { if (x >= game.map_size[1]) { - terminal.write(y, 0, map_line); - map_line = ""; x = 0; y += 1; }; - map_line += game.map[i]; + let c = game.map[i]; + let color = 'white'; + if (c == '.') { + color = '#ffaa00'; + } else if (c == '~') { + color = '#5555ff'; + } else if (c == 'X') { + color = '#55ff00'; + } + terminal.write(y, x, game.map[i], color); } - terminal.write(y, 0, map_line); for (const t in game.things) { terminal.write(game.things[t][0], game.things[t][1], '@'); } }, - draw_tick_line: function(n) { + draw_turn_line: function(n) { terminal.drawBox(0, terminal.cols / 2, 1, terminal.cols / 2, 'black'); - terminal.write(0, terminal.cols / 2, 'tick: ' + game.tick); + terminal.write(0, terminal.cols / 2, 'turn: ' + game.turn); }, draw_input_line: function() { terminal.drawBox(terminal.rows - 1, terminal.cols / 2, 1, terminal.cols / 2, 'black'); @@ -148,34 +150,37 @@ let tui = { let game = { things: {}, - tick: 0, + turn: 0, map: "", map_size: [1,1] } let chat = { - input_line:"", - history: ["", - " visible ASCII char in the input prompt.", - " To write on the map, enter on a single", - "", - " contain whitespace, escape them with \\.", - " Use double quotes for strings that", - "", - " Use arrow keys to move your avatar.", - "", - " QUERY USER TEXT - send TEXT to USER", - " ALL TEXT - send TEXT to all users", - " LOGIN USER - register as USER", - " commands:"] + input_line: "", + history: [] } terminal.initialize() tui.draw_map(); -tui.draw_tick_line(); +tui.draw_turn_line(); tui.draw_history(); tui.draw_input_line(); +tui.log_msg("basic commands:", 1); +tui.log_msg("LOGIN USER - register as USER", 3); +tui.log_msg("ALL TEXT - send TEXT to all users", 3); +tui.log_msg("QUERY USER TEXT - send TEXT to USER", 3); +tui.log_msg(""); +tui.log_msg("Use arrow keys to move your avatar. You can only move over \".\" map cells.", 1); +tui.log_msg(""); +tui.log_msg("Use double quotes for strings that contain whitespace, escape them with \\.", 1); +tui.log_msg(""); +tui.log_msg("To change the map cell you are standing on, type the desired ASCII character into the prompt and hit Return.", 1); +tui.log_msg(""); +tui.log_msg("more commands:", 1); +tui.log_msg("FLATTEN - transform surrounding map cells to \".\" ones", 3); +tui.log_msg(""); + document.addEventListener('keydown', (event) => { if (chat.input_line === '') { terminal.drawBox(terminal.rows - 1, terminal.cols / 2, 1, terminal.rows, 'black'); @@ -189,6 +194,8 @@ document.addEventListener('keydown', (event) => { } else if (event.key === 'Enter') { if (chat.input_line.length === 1) { websocket.send("TASK:WRITE " + chat.input_line); + } else if (chat.input_line.trimEnd() === 'FLATTEN') { + websocket.send("TASK:FLATTEN_SURROUNDINGS"); } else { websocket.send(chat.input_line); } @@ -210,14 +217,14 @@ websocket.onmessage = function (event) { let tokens = parser.tokenize(event.data); if (tokens[0] === 'TURN') { game.things = {} - game.tick = parseInt(tokens[1]); + game.turn = parseInt(tokens[1]); } else if (tokens[0] === 'THING_POS') { game.things[tokens[1]] = parser.parse_yx(tokens[2]); } else if (tokens[0] === 'MAP') { game.map_size = parser.parse_yx(tokens[1]); game.map = tokens[2] } else if (tokens[0] === 'GAME_STATE_COMPLETE') { - tui.draw_tick_line(); + tui.draw_turn_line(); tui.draw_map(); tui.draw_map(); } else if (tokens[0] === 'LOG') { @@ -226,14 +233,18 @@ websocket.onmessage = function (event) { tui.log_msg(tokens[1]); } else if (tokens[0] === 'UNHANDLED_INPUT') { tui.log_msg('unknown command'); + } else if (tokens[0] === 'ARGUMENT_ERROR') { + tui.log_msg('syntax error: ' + tokens[1]); } else if (tokens[0] === 'GAME_ERROR') { tui.log_msg('game error: ' + tokens[1]); - } else if (tokens[0] === 'GAME_ERROR') { - tui.log_msg('game error: ' + tokens[1]); + } else if (tokens[0] === 'PONG') { + console.log('PONG'); } else { tui.log_msg('unhandled input: ' + event.data); } } + +window.setInterval(function() { websocket.send('PING') }, 30000);