From 70792c88545e3f5e5793554558d62c477fec9051 Mon Sep 17 00:00:00 2001 From: Christian Heller Date: Thu, 29 Oct 2020 03:02:54 +0100 Subject: [PATCH] Refactor TUI drawing. --- new2/rogue_chat_nocanvas_monochrome.html | 190 ++++++++++------------- 1 file changed, 86 insertions(+), 104 deletions(-) diff --git a/new2/rogue_chat_nocanvas_monochrome.html b/new2/rogue_chat_nocanvas_monochrome.html index d7e0018..e46daac 100644 --- a/new2/rogue_chat_nocanvas_monochrome.html +++ b/new2/rogue_chat_nocanvas_monochrome.html @@ -163,14 +163,15 @@ let unparser = { } class Mode { - constructor(name, has_input_prompt=false, shows_annotations=false) { + constructor(name, has_input_prompt=false, shows_annotations=false, is_intro=false) { this.name = name; this.has_input_prompt = has_input_prompt; this.shows_annotations = shows_annotations; + this.is_intro = is_intro; } } -let mode_waiting_for_server = new Mode('waiting_for_server', false, false); -let mode_login = new Mode('login', true, false); +let mode_waiting_for_server = new Mode('waiting_for_server', false, false, true); +let mode_login = new Mode('login', true, false, true); let mode_chat = new Mode('chat', true, false); let mode_annotate = new Mode('annotate', true, true); let mode_play = new Mode('play', false, false); @@ -210,64 +211,6 @@ let tui = { } this.full_refresh(); }, - draw_mode_line: function() { - terminal.drawBox(1, this.window_width, this.height_mode_line, this.window_width); - terminal.write(1, this.window_width, 'MODE ' + this.mode.name); - }, - draw_history: function() { - if (terminal.rows <= this.height_header + this.height_input) { - return; - } - terminal.drawBox(this.height_header, this.window_width, terminal.rows - this.height_header - this.height_input, this.window_width); - for (let y = terminal.rows - 1 - this.height_input, - i = this.log.length - 1; - y >= this.height_header && i >= 0; - y--, i--) { - terminal.write(y, this.window_width, this.log[i]); - } - }, - draw_map: function() { - terminal.drawBox(0, 0, terminal.rows, this.window_width); - let map_lines = []; - let line = []; - for (let i = 0, j = 0; i < game.map.length; i++, j++) { - if (j == game.map_size[1]) { - map_lines.push(line); - line = []; - j = 0; - }; - line.push(game.map[i]); - }; - map_lines.push(line); - let player_position = [0,0]; - let center_pos = [Math.floor(game.map_size[0] / 2), - Math.floor(game.map_size[1] / 2)]; - for (const thing_id in game.things) { - let t = game.things[thing_id]; - map_lines[t[0]][t[1]] = '@'; - if (game.player_id == thing_id) { - center_pos = t; - } - }; - if (tui.mode.shows_annotations) { - map_lines[explorer.position[0]][explorer.position[1]] = '?'; - center_pos = explorer.position; - } - let offset = [(terminal.rows / 2) - center_pos[0], - this.window_width / 2 - center_pos[1]]; - for (let term_y = offset[0], map_y = 0; - term_y < terminal.rows && map_y < game.map_size[0]; - term_y++, map_y++) { - if (term_y >= 0) { - let to_draw = map_lines[map_y].join('').slice(0, this.window_width - offset[1]); - terminal.write(term_y, offset[1], to_draw); - } - } - }, - draw_turn_line: function(n) { - terminal.drawBox(0, this.window_width, 1, this.window_width); - terminal.write(0, this.window_width, 'turn: ' + game.turn); - }, empty_input: function(str) { this.input = ""; if (this.mode.has_input_prompt) { @@ -282,6 +225,7 @@ let tui = { } this.input += str; this.recalc_input_lines(); + this.full_refresh(); }, recalc_input_lines: function() { this.input_lines = this.msg_into_lines_of_width(this.input_prompt + this.input, this.window_width); @@ -293,16 +237,9 @@ let tui = { } else { this.input = tui.input.slice(0, -1); this.recalc_input_lines(); + this.full_refresh(); } }, - draw_input: function() { - terminal.drawBox(terminal.rows - this.height_input, this.window_width, this.height_input, this.window_width); - if (this.mode.has_input_prompt) { - for (let y = terminal.rows - this.height_input, i = 0; y < terminal.rows && i < this.input_lines.length; y++, i++) { - terminal.write(y, this.window_width, this.input_lines[i]); - } - } - }, msg_into_lines_of_width: function(msg, width) { let chunk = ""; let lines = []; @@ -323,10 +260,7 @@ let tui = { while (this.log.length > terminal.rows) { this.log.shift(); }; - this.draw_history(); - }, - refresh: function() { - terminal.refresh(); + this.full_refresh(); }, log_help: function() { this.log_msg(""); @@ -353,24 +287,90 @@ let tui = { this.log_msg("p - switch to play mode"); this.log_msg(""); }, + draw_map: function() { + let map_lines = []; + let line = []; + for (let i = 0, j = 0; i < game.map.length; i++, j++) { + if (j == game.map_size[1]) { + map_lines.push(line); + line = []; + j = 0; + }; + line.push(game.map[i]); + }; + map_lines.push(line); + let player_position = [0,0]; + let center_pos = [Math.floor(game.map_size[0] / 2), + Math.floor(game.map_size[1] / 2)]; + for (const thing_id in game.things) { + let t = game.things[thing_id]; + map_lines[t[0]][t[1]] = '@'; + if (game.player_id == thing_id) { + center_pos = t; + } + }; + if (tui.mode.shows_annotations) { + map_lines[explorer.position[0]][explorer.position[1]] = '?'; + center_pos = explorer.position; + } + let offset = [(terminal.rows / 2) - center_pos[0], + this.window_width / 2 - center_pos[1]]; + for (let term_y = offset[0], map_y = 0; + term_y < terminal.rows && map_y < game.map_size[0]; + term_y++, map_y++) { + if (term_y >= 0) { + let to_draw = map_lines[map_y].join('').slice(0, this.window_width - offset[1]); + terminal.write(term_y, offset[1], to_draw); + } + } + }, + draw_mode_line: function() { + terminal.write(0, this.window_width, 'MODE: ' + this.mode.name); + }, + draw_turn_line: function(n) { + terminal.write(1, this.window_width, 'TURN: ' + game.turn); + }, + draw_history: function() { + if (terminal.rows <= this.height_header + this.height_input) { + return; + } + for (let y = terminal.rows - 1 - this.height_input, + i = this.log.length - 1; + y >= this.height_header && i >= 0; + y--, i--) { + terminal.write(y, this.window_width, this.log[i]); + } + }, draw_info: function() { - terminal.drawBox(this.height_header, this.window_width, terminal.rows - this.height_header - this.height_input, this.window_width); let lines = this.msg_into_lines_of_width(explorer.get_info(), this.window_width); for (let y = this.height_header, i = 0; y < terminal.rows && i < lines.length; y++, i++) { terminal.write(y, this.window_width, lines[i]); } }, + draw_input: function() { + if (this.mode.has_input_prompt) { + for (let y = terminal.rows - this.height_input, i = 0; y < terminal.rows && i < this.input_lines.length; y++, i++) { + terminal.write(y, this.window_width, this.input_lines[i]); + } + } + }, full_refresh: function() { - this.draw_map(); - this.draw_turn_line(); - this.draw_mode_line(); - if (this.mode.shows_annotations) { - this.draw_info(); + terminal.drawBox(0, 0, terminal.rows, terminal.cols); + if (this.mode.is_intro) { + this.draw_history(); + this.draw_input(); } else { - this.draw_history(); + this.draw_map(); + this.draw_turn_line(); + this.draw_mode_line(); + if (this.mode.shows_annotations) { + this.draw_info(); + } else { + this.draw_history(); + } + this.draw_input(); } - this.draw_input(); - this.refresh(); + terminal.refresh(); } } @@ -402,17 +402,13 @@ server.websocket.onmessage = function (event) { if (tui.mode == mode_study) { explorer.query_info(); } - tui.draw_turn_line(); - tui.draw_map(); - tui.refresh(); + tui.full_refresh(); } else if (tokens[0] === 'CHAT') { tui.log_msg('# ' + tokens[1], 1); - tui.refresh(); } else if (tokens[0] === 'PLAYER_ID') { game.player_id = parseInt(tokens[1]); } else if (tokens[0] === 'META') { tui.log_msg('@ ' + tokens[1]); - tui.refresh(); } else if (tokens[0] === 'LOGIN_OK') { server.send(['GET_GAMESTATE']); tui.log_help(); @@ -423,20 +419,16 @@ server.websocket.onmessage = function (event) { explorer.update_info_db(position, tokens[2]); } else if (tokens[0] === 'UNHANDLED_INPUT') { tui.log_msg('? unknown command'); - tui.refresh(); } else if (tokens[0] === 'PLAY_ERROR') { terminal.blink_screen(); } else if (tokens[0] === 'ARGUMENT_ERROR') { tui.log_msg('? syntax error: ' + tokens[1]); - tui.refresh(); } else if (tokens[0] === 'GAME_ERROR') { tui.log_msg('? game error: ' + tokens[1]); - tui.refresh(); } else if (tokens[0] === 'PONG') { console.log('PONG'); } else { tui.log_msg('? unhandled input: ' + event.data); - tui.refresh(); } } @@ -462,23 +454,19 @@ let explorer = { && !(try_pos[1] >= game.map_size[1])) { this.position = try_pos; this.query_info(); - tui.draw_map(); - tui.draw_info(); - tui.refresh(); + tui.full_refresh(); } }, update_info_db: function(yx, str) { this.info_db[yx] = str; if (tui.mode == mode_study) { - tui.draw_info(); - tui.refresh(); + tui.full_refresh(); } }, empty_info_db: function() { this.info_db = {}; if (tui.mode == mode_study) { - tui.draw_info(); - tui.refresh(); + tui.full_refresh(); } }, query_info: function() { @@ -502,10 +490,8 @@ let explorer = { document.addEventListener('keydown', (event) => { if (tui.mode.has_input_prompt && event.key.length === 1) { tui.add_to_input(event.key); - tui.full_refresh(); } else if (tui.mode.has_input_prompt && event.key == 'Backspace') { tui.shorten_input(); - tui.full_refresh(); } else if (tui.mode == mode_login && event.key == 'Enter') { server.send(['LOGIN', tui.input]); tui.switch_mode(mode_login); @@ -522,7 +508,6 @@ document.addEventListener('keydown', (event) => { tui.switch_mode(mode_study); } else if (tokens[0] == ':help') { tui.log_help(); - tui.refresh(); } else if (tokens[0] == ':nick') { if (tokens.length > 1) { server.send(['LOGIN', tokens[1]]); @@ -554,7 +539,6 @@ document.addEventListener('keydown', (event) => { tui.switch_mode(mode_study); } else if (event.key === 'F1') { tui.log_help(); - tui.refresh(); } else if (event.key === 'f') { server.send(["TASK:FLATTEN_SURROUNDINGS"]); } else if (event.key === 'a') { @@ -586,8 +570,6 @@ document.addEventListener('keydown', (event) => { explorer.move('down'); } else if (event.key === 'A') { tui.switch_mode(mode_annotate); - tui.draw_info(); - tui.refresh(); }; } }, false); -- 2.30.2