X-Git-Url: https://plomlompom.com/repos/?a=blobdiff_plain;f=rogue_chat.html;h=d6a86e096dbada3c123e0c953981ea99b737b34a;hb=HEAD;hp=eb23d1cf3bfeb411f60079bcaf78eac35fa0aa8e;hpb=249d0afc8663af2a1dbdd9d2f893582fe235cf6c;p=plomrogue2 diff --git a/rogue_chat.html b/rogue_chat.html index eb23d1c..d6a86e0 100644 --- a/rogue_chat.html +++ b/rogue_chat.html @@ -72,7 +72,7 @@ terminal rows: - + @@ -109,7 +109,7 @@ terminal rows:
  • (un-)wear:
  • -
  • +
  • @@ -176,13 +176,13 @@ let mode_helps = { }, 'enter_face': { 'short': 'edit face', - 'intro': '@ enter face line (enter nothing to abort):', + 'intro': '@ enter face line:', 'long': 'Draw your face as ASCII art. The string you enter must be 18 characters long, and will be divided on display into 3 lines of 6 characters each, from top to bottom. Eat cookies to extend the ASCII characters available for drawing.' }, - 'enter_hat': { - 'short': 'edit hat', - 'intro': '@ enter hat line (enter nothing to abort):', - 'long': 'Draw your hat as ASCII art. The string you enter must be 18 characters long, and will be divided on display into 3 lines of 6 characters each, from top to bottom..' + 'enter_design': { + 'short': 'edit design', + 'intro': '@ enter design:', + 'long': 'Enter design for carried thing as ASCII art.' }, 'write': { 'short': 'edit tile', @@ -465,6 +465,7 @@ let server = { this.websocket.onopen = function(event) { game.thing_types = {}; game.terrains = {}; + tui.is_admin = false; server.send(['TASKS']); server.send(['TERRAINS']); server.send(['THING_TYPES']); @@ -511,6 +512,9 @@ let server = { } else if (tokens[0] === 'THING_HAT') { let t = game.get_thing_temp(tokens[1]); t.hat = tokens[2]; + } else if (tokens[0] === 'THING_DESIGN') { + let t = game.get_thing_temp(tokens[1]); + t.design = [parser.parse_yx(tokens[2]), tokens[3]]; } else if (tokens[0] === 'THING_CHAR') { let t = game.get_thing_temp(tokens[1]); t.thing_char = tokens[2]; @@ -574,8 +578,6 @@ let server = { this.send(['GET_GAMESTATE']); tui.switch_mode('post_login_wait'); tui.log_msg('@ welcome!') - tui.log_msg('@ hint: see top of terminal for how to get help.') - tui.log_msg('@ hint: enter study mode to understand your environment.') } else if (tokens[0] === 'DEFAULT_COLORS') { terminal.set_default_colors(); } else if (tokens[0] === 'RANDOM_COLORS') { @@ -683,7 +685,6 @@ let tui = { log: [], input_prompt: '> ', input_lines: [], - window_width: terminal.cols / 2, height_turn_line: 1, height_mode_line: 1, height_input: 1, @@ -710,7 +711,7 @@ let tui = { mode_take_thing: new Mode('take_thing', true), mode_drop_thing: new Mode('drop_thing', true), mode_enter_face: new Mode('enter_face', true), - mode_enter_hat: new Mode('enter_hat', true), + mode_enter_design: new Mode('enter_design', true), mode_admin_enter: new Mode('admin_enter', true), mode_admin: new Mode('admin'), mode_control_pw_pw: new Mode('control_pw_pw', true), @@ -736,6 +737,7 @@ let tui = { selectables: [], draw_face: false, init: function() { + this.reset_screen_size(); this.mode_play.available_modes = ["chat", "study", "edit", "admin_enter", "command_thing", "take_thing", "drop_thing"] this.mode_play.available_actions = ["move", "teleport", "door", "consume", @@ -745,12 +747,12 @@ let tui = { this.mode_admin.available_modes = ["admin_thing_protect", "control_pw_type", "control_tile_type", "chat", "study", "play", "edit"] - this.mode_admin.available_actions = ["move"]; + this.mode_admin.available_actions = ["move", "toggle_map_mode"]; this.mode_control_tile_draw.available_modes = ["admin_enter"] this.mode_control_tile_draw.available_actions = ["toggle_tile_draw"]; this.mode_edit.available_modes = ["write", "annotate", "portal", "name_thing", - "password", "chat", "study", "play", - "admin_enter", "enter_face", "enter_hat"] + "enter_design", "password", "chat", "study", + "play", "admin_enter", "enter_face"] this.mode_edit.available_actions = ["move", "flatten", "install", "toggle_map_mode"] this.inputEl = document.getElementById("input"); @@ -759,6 +761,10 @@ let tui = { this.height_header = this.height_turn_line + this.height_mode_line; this.init_keys(); }, + reset_screen_size: function() { + this.left_window_width = Math.min(52, terminal.cols / 2); + this.right_window_width = terminal.cols - tui.left_window_width; + }, init_keys: function() { document.getElementById("move_table").hidden = true; this.keys = {}; @@ -809,19 +815,22 @@ let tui = { } this.draw_face = false; this.tile_draw = false; + this.ascii_draw_stage = 0; + this.full_ascii_draw = ''; if (mode_name == 'command_thing' && (!game.player.carrying || !game.player.carrying.commandable)) { return fail('not carrying anything commandable'); } else if (mode_name == 'name_thing' && !game.player.carrying) { - return fail('not carrying anything to re-name'); + return fail('not carrying anything to re-name', 'edit'); } else if (mode_name == 'admin_thing_protect' && !game.player.carrying) { return fail('not carrying anything to protect') } else if (mode_name == 'take_thing' && game.player.carrying) { return fail('already carrying something'); } else if (mode_name == 'drop_thing' && !game.player.carrying) { return fail('not carrying anything droppable'); - } else if (mode_name == 'enter_hat' && !game.player.hat) { - return fail('not wearing hat to edit', 'edit'); + } else if (mode_name == 'enter_design' && (!game.player.carrying + || !game.player.carrying.design)) { + return fail('not carrying designable to edit', 'edit'); } if (mode_name == 'admin_enter' && this.is_admin) { mode_name = 'admin'; @@ -891,7 +900,6 @@ let tui = { directed_moves['DOWNRIGHT'] = [1, 0]; } } - console.log(directed_moves); let select_range = {}; for (const direction in directed_moves) { const move = directed_moves[direction]; @@ -929,8 +937,17 @@ let tui = { for (let [i, direction] of this.selectables.entries()) { this.log_msg(i + ': ' + direction); }; - } else if (this.mode.name == 'enter_hat') { - this.log_msg('legal characters: ' + game.players_hat_chars); + } else if (this.mode.name == 'enter_design') { + if (game.player.carrying.type_ == 'Hat') { + this.log_msg('@ The design you enter must be ' + + game.player.carrying.design[0][0] + ' lines of max ' + + game.player.carrying.design[0][1] + ' characters width each'); + this.log_msg('@ Legal characters: ' + game.players_hat_chars); + this.log_msg('@ (Eat cookies to extend the ASCII characters available for drawing.)'); + } else { + this.log_msg('@ Width of first line determines maximum width for remaining design') + this.log_msg('@ Finish design by entering an empty line (multiple space characters do not count as empty)') + } } else if (this.mode.name == 'command_thing') { server.send(['TASK:COMMAND', 'HELP']); } else if (this.mode.name == 'control_pw_pw') { @@ -971,20 +988,21 @@ let tui = { if (game.player.carrying && game.player.carrying.protection) { this.inputEl.value = game.player.carrying.protection; } - } else if (['enter_face', 'enter_hat'].includes(this.mode.name)) { + } else if (this.mode.name == 'enter_face') { const start = this.ascii_draw_stage * 6; const end = (this.ascii_draw_stage + 1) * 6; - if (this.mode.name == 'enter_face') { - this.inputEl.value = game.player.face.slice(start, end); - } else if (this.mode.name == 'enter_hat') { - this.inputEl.value = game.player.hat.slice(start, end); - } + this.inputEl.value = game.player.face.slice(start, end); + } else if (this.mode.name == 'enter_design') { + const width = game.player.carrying.design[0][1]; + const start = this.ascii_draw_stage * width; + const end = (this.ascii_draw_stage + 1) * width; + this.inputEl.value = game.player.carrying.design[1].slice(start, end); } }, recalc_input_lines: function() { if (this.mode.has_input_prompt) { let _ = null; - [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value + '█', this.window_width); + [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value + '█', this.right_window_width); } else { this.input_lines = []; } @@ -1068,23 +1086,55 @@ let tui = { this.inputEl.value = ""; this.switch_mode('play'); }, - enter_ascii_art: function(command) { - if (this.inputEl.value.length != 6) { - this.log_msg('? wrong input length, must be 6; try again'); - return; - } - this.log_msg(' ' + this.inputEl.value); - this.full_ascii_draw += this.inputEl.value; - this.ascii_draw_stage += 1; - if (this.ascii_draw_stage < 3) { - this.restore_input_values(); - } else { - server.send([command, this.full_ascii_draw]); - this.full_ascii_draw = ''; - this.ascii_draw_stage = 0; - this.inputEl.value = ''; - this.switch_mode('edit'); - } + enter_ascii_art: function(command, height, width, with_pw=false, with_size=false) { + if (with_size && this.ascii_draw_stage == 0) { + width = this.inputEl.value.length; + if (width > 36) { + this.log_msg('? wrong input length, must be max 36; try again'); + return; + } + if (width != game.player.carrying.design[0][1]) { + game.player.carrying.design[1] = ''; + game.player.carrying.design[0][1] = width; + } + } else if (this.inputEl.value.length > width) { + this.log_msg('? wrong input length, must be max ' + width + '; try again'); + return; + } + this.log_msg(' ' + this.inputEl.value); + if (with_size && ['', ' '].includes(this.inputEl.value) && this.ascii_draw_stage > 0) { + height = this.ascii_draw_stage; + } else { + if (with_size) { + height = this.ascii_draw_stage + 2; + } + while (this.inputEl.value.length < width) { + this.inputEl.value += ' '; + } + this.full_ascii_draw += this.inputEl.value; + } + if (with_size) { + game.player.carrying.design[0][0] = height; + } + this.ascii_draw_stage += 1; + if (this.ascii_draw_stage < height) { + this.restore_input_values(); + } else { + if (with_pw && with_size) { + server.send([command + '_SIZE', + unparser.to_yx(game.player.carrying.design[0]), + this.password]); + } + if (with_pw) { + server.send([command, this.full_ascii_draw, this.password]); + } else { + server.send([command, this.full_ascii_draw]); + } + this.full_ascii_draw = ''; + this.ascii_draw_stage = 0; + this.inputEl.value = ''; + this.switch_mode('edit'); + } }, draw_map: function() { if (!game.turn_complete && this.map_lines.length == 0) { @@ -1167,7 +1217,7 @@ let tui = { }; }; } - let window_center = [terminal.rows / 2, this.window_width / 2]; + let window_center = [terminal.rows / 2, this.left_window_width / 2]; let center_position = [game.player.position[0], game.player.position[1]]; if (tui.mode.shows_info || tui.mode.name == 'control_tile_draw') { center_position = [explorer.position[0], explorer.position[1]]; @@ -1184,45 +1234,79 @@ let tui = { let map_y = Math.max(0, this.offset[0]); let map_x = Math.max(0, this.offset[1]); for (; term_y < terminal.rows && map_y < this.map_lines.length; term_y++, map_y++) { - let to_draw = this.map_lines[map_y].slice(map_x, this.window_width + this.offset[1]); + let to_draw = this.map_lines[map_y].slice(map_x, this.left_window_width + this.offset[1]); terminal.write(term_y, term_x, to_draw); } }, + draw_names: function() { + let players = []; + for (const thing_id in game.things) { + let t = game.things[thing_id]; + if (t.type_ == 'Player') { + players.push(t); + } + }; + function compare(a, b) { + if (a.name_.length > b.name_.length) { + return -1; + } else if (a.name_.length < b.name_.length) { + return 1; + } else { + return 0; + } + } + players.sort(compare); + const shrink_offset = Math.max(0, (terminal.rows - tui.left_window_width / 2) / 2); + let y = 0; + for (const player of players) { + let name = player.name_; + const offset_y = y - shrink_offset; + const max_len = Math.max(5, (tui.left_window_width / 2) - (offset_y * 2) - 8); + if (name.length > max_len) { + name = name.slice(0, max_len - 1) + '…'; + } + terminal.write(y, 0, '@' + player.thing_char + ':' + name); + y += 1; + if (y >= terminal.rows) { + break; + } + } + }, draw_face_popup: function() { const t = game.things[this.draw_face]; if (!t || !t.face) { this.draw_face = false; return; } - const start_x = tui.window_width - 10; - let t_char = ' '; - if (t.thing_char) { - t_char = t.thing_char; - } + const start_x = tui.left_window_width - 10; function draw_body_part(body_part, end_y) { - terminal.write(end_y - 4, start_x, ' _[ @' + t_char + ' ]_ '); - terminal.write(end_y - 3, start_x, '| |'); + terminal.write(end_y - 3, start_x, '----------'); terminal.write(end_y - 2, start_x, '| ' + body_part.slice(0, 6) + ' |'); terminal.write(end_y - 1, start_x, '| ' + body_part.slice(6, 12) + ' |'); terminal.write(end_y, start_x, '| ' + body_part.slice(12, 18) + ' |'); } if (t.face) { - draw_body_part(t.face, terminal.rows - 2); + draw_body_part(t.face, terminal.rows - 3); } if (t.hat) { - draw_body_part(t.hat, terminal.rows - 5); + draw_body_part(t.hat, terminal.rows - 6); + } + terminal.write(terminal.rows - 2, start_x, '----------'); + let name = t.name_; + if (name.length > 7) { + name = name.slice(0, 6) + '…'; } - terminal.write(terminal.rows - 1, start_x, '| |'); + terminal.write(terminal.rows - 1, start_x, '@' + t.thing_char + ':' + name); }, draw_mode_line: function() { let help = 'hit [' + this.keys.help + '] for help'; if (this.mode.has_input_prompt) { help = 'enter /help for help'; } - terminal.write(0, this.window_width, 'MODE: ' + this.mode.short_desc + ' – ' + help); + terminal.write(1, this.left_window_width, 'MODE: ' + this.mode.short_desc + ' – ' + help); }, draw_stats_line: function(n) { - terminal.write(1, this.window_width, + terminal.write(0, this.left_window_width, 'ENERGY: ' + game.energy + ' BLADDER: ' + game.bladder_pressure); }, @@ -1232,7 +1316,7 @@ let tui = { let y_offset_in_log = 0; for (let line of this.log) { let [new_lines, link_data] = this.msg_into_lines_of_width(line, - this.window_width) + this.right_window_width) log_display_lines = log_display_lines.concat(new_lines); for (const y in link_data) { const rel_y = y_offset_in_log + parseInt(y); @@ -1247,7 +1331,7 @@ let tui = { for (let y = terminal.rows - 1 - this.height_input; y >= this.height_header && i >= 0; y--, i--) { - terminal.write(y, this.window_width, log_display_lines[i]); + terminal.write(y, this.left_window_width, log_display_lines[i]); } for (const key of Object.keys(log_links)) { if (parseInt(key) <= i) { @@ -1255,13 +1339,13 @@ let tui = { } } let offset = [terminal.rows - this.height_input - log_display_lines.length, - this.window_width]; + this.left_window_width]; this.offset_links(offset, log_links); }, draw_info: function() { const info = "MAP VIEW: " + tui.map_mode + "\n" + explorer.get_info(); - let [lines, link_data] = this.msg_into_lines_of_width(info, this.window_width); - let offset = [this.height_header, this.window_width]; + let [lines, link_data] = this.msg_into_lines_of_width(info, this.right_window_width); + let offset = [this.height_header, this.left_window_width]; for (let y = offset[0], i = 0; y < terminal.rows && i < lines.length; y++, i++) { terminal.write(y, offset[1], lines[i]); } @@ -1270,7 +1354,7 @@ let tui = { draw_input: function() { if (this.mode.has_input_prompt) { for (let y = terminal.rows - this.height_input, i = 0; i < this.input_lines.length; y++, i++) { - terminal.write(y, this.window_width, this.input_lines[i]); + terminal.write(y, this.left_window_width, this.input_lines[i]); } } }, @@ -1301,12 +1385,18 @@ let tui = { } content += this.mode.list_available_modes(); let start_x = 0; + let lines = []; + let _ = undefined; if (!this.mode.has_input_prompt) { - start_x = this.window_width; + start_x = this.left_window_width; this.draw_links = false; + terminal.drawBox(0, start_x, terminal.rows, this.right_window_width); + [lines, _] = this.msg_into_lines_of_width(content, this.right_window_width); + } else { + start_x = 0; + terminal.drawBox(0, start_x, terminal.rows, this.left_window_width); + [lines, _] = this.msg_into_lines_of_width(content, this.left_window_width); } - terminal.drawBox(0, start_x, terminal.rows, this.window_width); - let [lines, _] = this.msg_into_lines_of_width(content, this.window_width); for (let y = 0, i = 0; y < terminal.rows && i < lines.length; y++, i++) { terminal.write(y, start_x, lines[i]); } @@ -1351,8 +1441,11 @@ let tui = { if (this.show_help) { this.draw_help(); } - if (this.draw_face && ['chat', 'play'].includes(this.mode.name)) { - this.draw_face_popup(); + if (['chat', 'play'].includes(this.mode.name)) { + this.draw_names(); + if (this.draw_face) { + this.draw_face_popup(); + } } if (!this.draw_links) { this.links = {}; @@ -1482,22 +1575,7 @@ let explorer = { for (let t_id in game.things) { let t = game.things[t_id]; if (t.position[0] == this.position[0] && t.position[1] == this.position[1]) { - info_to_cache += "THING: " + this.get_thing_info(t); - let protection = t.protection; - if (protection == '.') { - protection = 'none'; - } - info_to_cache += " / protection: " + protection + "\n"; - if (t.hat) { - info_to_cache += t.hat.slice(0, 6) + '\n'; - info_to_cache += t.hat.slice(6, 12) + '\n'; - info_to_cache += t.hat.slice(12, 18) + '\n'; - } - if (t.face) { - info_to_cache += t.face.slice(0, 6) + '\n'; - info_to_cache += t.face.slice(6, 12) + '\n'; - info_to_cache += t.face.slice(12, 18) + '\n'; - } + info_to_cache += this.get_thing_info(t, true); } } let terrain_char = game.map[position_i] @@ -1505,12 +1583,12 @@ let explorer = { if (game.terrains[terrain_char]) { terrain_desc = game.terrains[terrain_char]; }; - info_to_cache += 'TERRAIN: "' + terrain_char + '" / ' + terrain_desc + "\n"; + info_to_cache += 'TERRAIN: "' + terrain_char + '" (' + terrain_desc; let protection = game.map_control[position_i]; - if (protection == '.') { - protection = 'unprotected'; + if (protection != '.') { + info_to_cache += '/protection:' + protection; }; - info_to_cache += 'PROTECTION: ' + protection + '\n'; + info_to_cache += ')\n'; if (this.position in game.portals) { info_to_cache += "PORTAL: " + game.portals[this.position] + "\n"; } @@ -1521,17 +1599,64 @@ let explorer = { this.info_cached = info_to_cache; return this.info_cached; }, - get_thing_info: function(t) { - const symbol = game.thing_types[t.type_]; - let info = t.type_ + " / " + symbol; + get_thing_info: function(t, detailed=false) { + let info = ''; + if (detailed) { + info += '- '; + } + info += game.thing_types[t.type_]; if (t.thing_char) { info += t.thing_char; }; if (t.name_) { - info += " (" + t.name_ + ")"; + info += ": " + t.name_; } + info += ' (' + t.type_; if (t.installed) { - info += " / installed"; + info += "/installed"; + } + if (t.type_ == 'Bottle') { + if (t.thing_char == '_') { + info += '/empty'; + } else if (t.thing_char == '~') { + info += '/full'; + } + } + if (detailed) { + const protection = t.protection; + if (protection != '.') { + info += '/protection:' + protection; + } + info += ')\n'; + if (t.hat || t.face) { + info += '----------\n'; + } + if (t.hat) { + info += '| ' + t.hat.slice(0, 6) + ' |\n'; + info += '| ' + t.hat.slice(6, 12) + ' |\n'; + info += '| ' + t.hat.slice(12, 18) + ' |\n'; + } + if (t.face) { + info += '| ' + t.face.slice(0, 6) + ' |\n'; + info += '| ' + t.face.slice(6, 12) + ' |\n'; + info += '| ' + t.face.slice(12, 18) + ' |\n'; + info += '----------\n'; + } + if (t.design) { + const line_length = t.design[0][1]; + info += '-'.repeat(line_length + 4) + '\n'; + let lines = [''] + if (line_length > 0) { + const regexp = RegExp('.{1,' + line_length + '}', 'g'); + lines = t.design[1].match(regexp); + } + for (const line of lines) { + info += '| ' + line + ' |\n'; + } + info += '-'.repeat(line_length + 4) + '\n'; + } + } else { + info += ')'; } return info; }, @@ -1554,7 +1679,7 @@ let explorer = { tui.inputEl.addEventListener('input', (event) => { if (tui.mode.has_input_prompt) { - let max_length = tui.window_width * terminal.rows - tui.input_prompt.length; + let max_length = tui.right_window_width * terminal.rows - tui.input_prompt.length; if (tui.inputEl.value.length > max_length) { tui.inputEl.value = tui.inputEl.value.slice(0, max_length); }; @@ -1595,9 +1720,17 @@ tui.inputEl.addEventListener('keydown', (event) => { server.send(['LOGIN', tui.inputEl.value]); tui.inputEl.value = ""; } else if (tui.mode.name == 'enter_face' && event.key == 'Enter') { - tui.enter_ascii_art('PLAYER_FACE'); - } else if (tui.mode.name == 'enter_hat' && event.key == 'Enter') { - tui.enter_ascii_art('PLAYER_HAT'); + tui.enter_ascii_art('PLAYER_FACE', 3, 6); + } else if (tui.mode.name == 'enter_design' && event.key == 'Enter') { + if (game.player.carrying.type_ == 'Hat') { + tui.enter_ascii_art('THING_DESIGN', + game.player.carrying.design[0][0], + game.player.carrying.design[0][1], true); + } else { + tui.enter_ascii_art('THING_DESIGN', + game.player.carrying.design[0][0], + game.player.carrying.design[0][1], true, true); + } } else if (tui.mode.name == 'command_thing' && event.key == 'Enter') { server.send(['TASK:COMMAND', tui.inputEl.value]); tui.inputEl.value = ""; @@ -1716,6 +1849,8 @@ tui.inputEl.addEventListener('keydown', (event) => { } else if (tui.mode.name == 'admin') { if (tui.mode.mode_switch_on_key(event)) { null; + } else if (event.key == tui.keys.toggle_map_mode) { + tui.toggle_map_mode(); } else if (event.key in tui.movement_keys && tui.task_action_on('move')) { server.send(['TASK:MOVE', tui.movement_keys[event.key]]); }; @@ -1749,7 +1884,7 @@ cols_selector.addEventListener('input', function() { } window.localStorage.setItem(cols_selector.id, cols_selector.value); terminal.initialize(); - tui.window_width = terminal.cols / 2, + tui.reset_screen_size(); tui.full_refresh(); }, false); for (let key_selector of key_selectors) { @@ -1768,7 +1903,10 @@ window.setInterval(function() { }, 1000); window.setInterval(function() { if (document.activeElement.tagName.toLowerCase() != 'input') { + const scroll_x = window.scrollX; + const scroll_y = window.scrollY; tui.inputEl.focus(); + window.scrollTo(scroll_x, scroll_y); }; }, 100); document.getElementById("help").onclick = function() {