X-Git-Url: https://plomlompom.com/repos/?a=blobdiff_plain;f=new2%2Frogue_chat.html;h=37eb27a426c53bdc893d118dff6432aaa3c6a56f;hb=b6547c8d843a9e0d6b341fc17e6fb6eebededd18;hp=931ca082f5043406a03cddd12c29d6506e3459ab;hpb=91641af0986a58b67730beeb0f1cf126bfac96ef;p=plomrogue2-experiments diff --git a/new2/rogue_chat.html b/new2/rogue_chat.html index 931ca08..37eb27a 100644 --- a/new2/rogue_chat.html +++ b/new2/rogue_chat.html @@ -26,16 +26,18 @@ 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; + write_cheap: function(start_y, start_x, msg) { + this.ctx.fillText(msg, start_x*this.charWidth, start_y*this.charHeight); + }, + set_color: function(color) { + this.ctx.fillStyle = color; + }, + write: function(start_y, start_x, msg, foreground_color='white') { + this.ctx.fillStyle = 'black'; this.ctx.fillRect(start_x*this.charWidth, start_y*this.charHeight, - this.charWidth*msg.length, this.charHeight); - 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.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 +97,39 @@ 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++) { + terminal.drawBox(0, 0, terminal.rows, terminal.cols / 2, 'black'); + let last_c = ''; + let color = 'white'; + 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]; + if (c != last_c) { + last_c = c; + color = 'white'; + if (c == '.') { + color = '#ffaa00'; + } else if (c == '~') { + color = '#5555ff'; + } else if (c == 'X') { + color = '#55ff00'; + } + terminal.set_color(color); + } + terminal.write_cheap(y, x, c); } - 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'); @@ -138,8 +147,7 @@ let tui = { chunk += msg[i]; } chat.history.unshift(' '.repeat(indent) + chunk); - if (chat.history.length > terminal.rows - 2) { - + while (chat.history.length > terminal.rows - 2) { chat.history.pop(); }; this.draw_history(); @@ -148,7 +156,7 @@ let tui = { let game = { things: {}, - tick: 0, + turn: 0, map: "", map_size: [1,1] } @@ -160,20 +168,24 @@ let chat = { terminal.initialize() tui.draw_map(); -tui.draw_tick_line(); +tui.draw_turn_line(); tui.draw_history(); tui.draw_input_line(); -tui.log_msg("commands:", 1); +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", 1); +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 write on the map, hit Return on a single visible ASCII character in the input prompt", 1); +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 === '') { @@ -188,6 +200,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); } @@ -209,14 +223,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') {