-movement: + + -rows: +rows: cols: command character: "use strict"; let websocket_location = "ws://localhost:8000"; -let wasd_selector = document.getElementById("WASD_selector"); +let movement_keys_selector = document.getElementById("movement_keys"); let rows_selector = document.getElementById("n_rows"); let cols_selector = document.getElementById("n_cols"); let command_char_selector = document.getElementById("command_char"); @@ -151,7 +151,7 @@ let server = { this.websocket.onopen = function(event) { window.setInterval(function() { server.send(['PING']) }, 30000); tui.log_msg("@ server connected! :)"); - tui.init_login(); + tui.switch_mode(mode_login); }; this.websocket.onclose = function(event) { tui.log_msg("@ server disconnected :("); @@ -172,6 +172,7 @@ let server = { handle_event: function(event) { let tokens = parser.tokenize(event.data)[0]; if (tokens[0] === 'TURN') { + game.turn_complete = false; game.things = {}; game.portals = {}; game.turn = parseInt(tokens[1]); @@ -180,11 +181,17 @@ let server = { } else if (tokens[0] === 'THING_NAME') { game.get_thing(tokens[1], true).name_ = tokens[2]; } else if (tokens[0] === 'MAP') { - game.map_size = parser.parse_yx(tokens[1]); - game.map = tokens[2] + game.map_geometry = tokens[1]; + tui.init_wasd(); + game.map_size = parser.parse_yx(tokens[2]); + game.map = tokens[3] } else if (tokens[0] === 'GAME_STATE_COMPLETE') { + game.turn_complete = true; explorer.empty_info_db(); - if (tui.mode == mode_study) { + if (tui.mode == mode_post_login_wait) { + tui.switch_mode(mode_play); + tui.log_help(); + } else if (tui.mode == mode_study) { explorer.query_info(); } let t = game.get_thing(game.player_id); @@ -200,8 +207,7 @@ let server = { game.player_id = parseInt(tokens[1]); } else if (tokens[0] === 'LOGIN_OK') { this.send(['GET_GAMESTATE']); - tui.log_help(); - tui.switch_mode(mode_play); + tui.switch_mode(mode_post_login_wait); } else if (tokens[0] === 'PORTAL') { let position = parser.parse_yx(tokens[1]); game.portals[position] = tokens[2]; @@ -259,12 +265,13 @@ class Mode { } let mode_waiting_for_server = new Mode('waiting_for_server', false, false, true); let mode_login = new Mode('login', true, false, true); +let mode_post_login_wait = new Mode('waiting for game world', false, false, true); let mode_chat = new Mode('chat / write messages to players', true, false); let mode_annotate = new Mode('add message to map tile', true, true); let mode_play = new Mode('play / move around', false, false); let mode_study = new Mode('check map tiles for messages', false, true); let mode_edit = new Mode('write ASCII char to map tile', false, false); -let mode_teleport = new Mode('teleport away?'); +let mode_teleport = new Mode('teleport away?', true); let mode_portal = new Mode('add portal to map tile', true, true); let tui = { @@ -285,25 +292,51 @@ let tui = { this.init_wasd(); }, init_wasd: function() { - if (wasd_selector.value == 'w, a, s, d') { - tui.key_up = 'w'; - tui.key_down = 's'; - tui.key_left = 'a'; - tui.key_right = 'd'; - } else if (wasd_selector.value == 'arrow keys') { - tui.key_up = 'ArrowUp'; - tui.key_down = 'ArrowDown'; - tui.key_left = 'ArrowLeft'; - tui.key_right = 'ArrowRight'; + + if (movement_keys_selector.value == 'alphabetic') { + if (game.map_geometry == 'Square') { + this.movement_keys = { + 'w': 'UP', + 'a': 'LEFT', + 's': 'DOWN', + 'd': 'RIGHT' + }; + tui.movement_keys_desc = 'w, a, s, d'; + } else if (game.map_geometry == 'Hex') { + this.movement_keys = { + 'w': 'UPLEFT', + 'e': 'UPRIGHT', + 'd': 'RIGHT', + 'c': 'DOWNRIGHT', + 'x': 'DOWNLEFT', + 's': 'LEFT' + }; + tui.movement_keys_desc = 'e, d, c, x, s, w'; + }; + } else if (movement_keys_selector.value == 'arrow_or_numpad') { + if (game.map_geometry == 'Square') { + this.movement_keys = { + 'ArrowUp': 'UP', + 'ArrowLeft': 'LEFT', + 'ArrowDown': 'DOWN', + 'ArrowRight': 'RIGHT' + }; + tui.movement_keys_desc = 'arrow keys'; + } else if (game.map_geometry == 'Hex') { + this.movement_keys = { + '7': 'UPLEFT', + '9': 'UPRIGHT', + '6': 'RIGHT', + '3': 'DOWNRIGHT', + '1': 'DOWNLEFT', + '4': 'LEFT' + }; + tui.movement_keys_desc = 'numpad keys'; + }; }; - tui.movement_keys_desc = wasd_selector.value; - }, - init_login: function() { - this.log_msg("@ please enter your username:"); - this.switch_mode(mode_login); }, switch_mode: function(mode, keep_pos=false) { - if (mode == mode_study && !keep_pos) { + if (mode == mode_study && !keep_pos && game.player_id in game.things) { explorer.position = game.things[game.player_id].position; } this.mode = mode; @@ -315,13 +348,19 @@ let tui = { this.recalc_input_lines(); } } - if (mode == mode_portal && explorer.position in game.portals) { + if (mode == mode_login) { + if (this.login_name) { + server.send(['LOGIN', this.login_name]); + } else { + this.log_msg("? need login name"); + } + } else if (mode == mode_portal && explorer.position in game.portals) { let portal = game.portals[explorer.position] - this.inputEl.value = portal; - this.recalc_input_lines(); + this.inputEl.value = portal; + this.recalc_input_lines(); } else if (mode == mode_teleport) { tui.log_msg("@ May teleport to: " + tui.teleport_target); - tui.log_msg("@ Type Y or y to affirm, other keys to abort."); + tui.log_msg("@ Enter 'YES!' to entusiastically affirm."); } this.full_refresh(); }, @@ -366,53 +405,75 @@ let tui = { this.log_msg(" " + command_char_selector.value + "nick NAME - re-name yourself to NAME"); this.log_msg(" " + command_char_selector.value + "msg USER TEXT - send TEXT to USER"); this.log_msg(" " + command_char_selector.value + "help - show this help"); - this.log_msg(" " + command_char_selector.value + "p or " + command_char_selector.value + "play - switch to play mode"); + this.log_msg(" " + command_char_selector.value + "P or " + command_char_selector.value + "play - switch to play mode"); this.log_msg(" " + command_char_selector.value + "? or " + command_char_selector.value + "study - switch to study mode"); this.log_msg("commands common to study and play mode:"); this.log_msg(" " + this.movement_keys_desc + " - move"); - this.log_msg(" c - switch to chat mode"); + this.log_msg(" C - switch to chat mode"); this.log_msg("commands specific to play mode:"); - this.log_msg(" e - write following ASCII character"); + this.log_msg(" E - write following ASCII character"); this.log_msg(" f - flatten surroundings"); this.log_msg(" ? - switch to study mode"); this.log_msg("commands specific to study mode:"); - this.log_msg(" e - annotate terrain"); - this.log_msg(" p - switch to play mode"); + this.log_msg(" E - annotate terrain"); + this.log_msg(" P - switch to play mode"); }, draw_map: function() { - let map_lines = []; + let map_lines_split = []; let line = []; for (let i = 0, j = 0; i < game.map.length; i++, j++) { if (j == game.map_size[1]) { - map_lines.push(line); + map_lines_split.push(line); line = []; j = 0; }; line.push(game.map[i]); }; - map_lines.push(line); - let center_pos = [Math.floor(game.map_size[0] / 2), - Math.floor(game.map_size[1] / 2)]; + map_lines_split.push(line); for (const thing_id in game.things) { let t = game.things[thing_id]; - map_lines[t.position[0]][t.position[1]] = '@'; - if (game.player_id == thing_id) { - center_pos = t.position; - } + map_lines_split[t.position[0]][t.position[1]] = '@'; }; if (tui.mode.shows_info) { - map_lines[explorer.position[0]][explorer.position[1]] = '?'; - center_pos = explorer.position; + map_lines_split[explorer.position[0]][explorer.position[1]] = '?'; } - 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); - } + let map_lines = [] + if (game.map_geometry == 'Square') { + for (let line_split of map_lines_split) { + map_lines.push(line_split.join('')); + }; + } else if (game.map_geometry == 'Hex') { + let indent = 0 + for (let line_split of map_lines_split) { + map_lines.push(' '.repeat(indent) + line_split.join(' ')); + if (indent == 0) { + indent = 1; + } else { + indent = 0; + }; + }; + } + let window_center = [terminal.rows / 2, this.window_width / 2]; + let player = game.things[game.player_id]; + let center_position = [player.position[0], player.position[1]]; + if (tui.mode.shows_info) { + center_position = [explorer.position[0], explorer.position[1]]; + } + if (game.map_geometry == 'Hex') { + center_position[1] = center_position[1] * 2; + }; + let offset = [center_position[0] - window_center[0], + center_position[1] - window_center[1]] + if (game.map_geometry == 'Hex' && offset[0] % 2) { + offset[1] += 1; + }; + let term_y = Math.max(0, -offset[0]); + let term_x = Math.max(0, -offset[1]); + let map_y = Math.max(0, offset[0]); + let map_x = Math.max(0, offset[1]); + for (; term_y < terminal.rows && map_y < game.map_size[0]; term_y++, map_y++) { + let to_draw = map_lines[map_y].slice(map_x, this.window_width + offset[1]); + terminal.write(term_y, term_x, to_draw); } }, draw_mode_line: function() { @@ -452,8 +513,10 @@ let tui = { this.draw_history(); this.draw_input(); } else { - this.draw_map(); - this.draw_turn_line(); + if (game.turn_complete) { + this.draw_map(); + this.draw_turn_line(); + } this.draw_mode_line(); if (this.mode.shows_info) { this.draw_info(); @@ -483,6 +546,48 @@ let game = { game.things[id_] = t; return t; }; + }, + move: function(start_position, direction) { + let target = [start_position[0], start_position[1]]; + if (direction == 'LEFT') { + target[1] -= 1; + } else if (direction == 'RIGHT') { + target[1] += 1; + } else if (game.map_geometry == 'Square') { + if (direction == 'UP') { + target[0] -= 1; + } else if (direction == 'DOWN') { + target[0] += 1; + }; + } else if (game.map_geometry == 'Hex') { + let start_indented = start_position[0] % 2; + if (direction == 'UPLEFT') { + target[0] -= 1; + if (!start_indented) { + target[1] -= 1; + } + } else if (direction == 'UPRIGHT') { + target[0] -= 1; + if (start_indented) { + target[1] += 1; + } + } else if (direction == 'DOWNLEFT') { + target[0] += 1; + if (!start_indented) { + target[1] -= 1; + } + } else if (direction == 'DOWNRIGHT') { + target[0] += 1; + if (start_indented) { + target[1] += 1; + } + }; + }; + if (target[0] < 0 || target[1] < 0 || + target[0] >= this.map_size[0] || target[1] >= this.map_size[1]) { + return null; + }; + return target; } } @@ -495,26 +600,14 @@ let explorer = { position: [0,0], info_db: {}, move: function(direction) { - let try_pos = [0,0]; - try_pos[0] = this.position[0]; - try_pos[1] = this.position[1]; - if (direction == 'left') { - try_pos[1] -= 1; - } else if (direction == 'right') { - try_pos[1] += 1; - } else if (direction == 'up') { - try_pos[0] -= 1; - } else if (direction == 'down') { - try_pos[0] += 1; - }; - if (!(try_pos[0] < 0) && - !(try_pos[1] < 0) && - !(try_pos[0] >= game.map_size[0]) - && !(try_pos[1] >= game.map_size[1])) { - this.position = try_pos; + let target = game.move(this.position, direction); + if (target) { + this.position = target this.query_info(); tui.full_refresh(); - } + } else { + terminal.blink_screen(); + }; }, update_info_db: function(yx, str) { this.info_db[yx] = str; @@ -591,22 +684,30 @@ tui.inputEl.addEventListener('input', (event) => { }, false); tui.inputEl.addEventListener('keydown', (event) => { if (event.key == 'Enter') { - event.preventDefault(); + event.preventDefault(); } if (tui.mode == mode_login && event.key == 'Enter') { + tui.login_name = tui.inputEl.value; server.send(['LOGIN', tui.inputEl.value]); - tui.switch_mode(mode_login); + tui.empty_input(); } else if (tui.mode == mode_portal && event.key == 'Enter') { explorer.set_portal(tui.inputEl.value); tui.switch_mode(mode_study, true); } else if (tui.mode == mode_annotate && event.key == 'Enter') { explorer.annotate(tui.inputEl.value); tui.switch_mode(mode_study, true); + } else if (tui.mode == mode_teleport && event.key == 'Enter') { + if (tui.inputEl.value == 'YES!') { + server.reconnect_to(tui.teleport_target); + } else { + tui.log_msg('@ teleport aborted'); + tui.switch_mode(mode_play); + }; } else if (tui.mode == mode_chat && event.key == 'Enter') { let [tokens, token_starts] = parser.tokenize(tui.inputEl.value); if (tokens.length > 0 && tokens[0].length > 0) { if (tui.inputEl.value[0][0] == command_char_selector.value) { - if (tokens[0].slice(1) == 'play' || tokens[0].slice(1) == 'p') { + if (tokens[0].slice(1) == 'play' || tokens[0].slice(1) == 'P') { tui.switch_mode(mode_play); } else if (tokens[0].slice(1) == 'study' || tokens[0].slice(1) == '?') { tui.switch_mode(mode_study); @@ -643,10 +744,10 @@ tui.inputEl.addEventListener('keydown', (event) => { tui.empty_input(); tui.full_refresh(); } else if (tui.mode == mode_play) { - if (event.key === 'c') { + if (event.key === 'C') { event.preventDefault(); tui.switch_mode(mode_chat); - } else if (event.key === 'e') { + } else if (event.key === 'E') { event.preventDefault(); tui.switch_mode(mode_edit); } else if (event.key === '?') { @@ -655,44 +756,32 @@ tui.inputEl.addEventListener('keydown', (event) => { tui.log_help(); } else if (event.key === 'f') { server.send(["TASK:FLATTEN_SURROUNDINGS"]); - } else if (event.key === tui.key_left) { - server.send(['TASK:MOVE', 'LEFT']); - } else if (event.key === tui.key_right) { - server.send(['TASK:MOVE', 'RIGHT']); - } else if (event.key === tui.key_up) { - server.send(['TASK:MOVE', 'UP']); - } else if (event.key === tui.key_down) { - server.send(['TASK:MOVE', 'DOWN']); + } else if (event.key in tui.movement_keys) { + server.send(['TASK:MOVE', tui.movement_keys[event.key]]); }; } else if (tui.mode == mode_study) { - if (event.key === 'c') { + if (event.key === 'C') { event.preventDefault(); tui.switch_mode(mode_chat); - } else if (event.key == 'p') { + } else if (event.key == 'P') { tui.switch_mode(mode_play); - } else if (event.key === 'P') { + } else if (event.key === 'p') { event.preventDefault(); tui.switch_mode(mode_portal); - } else if (event.key === tui.key_left) { - explorer.move('left'); - } else if (event.key === tui.key_right) { - explorer.move('right'); - } else if (event.key === tui.key_up) { - explorer.move('up'); - } else if (event.key === tui.key_down) { - explorer.move('down'); - } else if (event.key === 'e') { + } else if (event.key in tui.movement_keys) { + explorer.move(tui.movement_keys[event.key]); + } else if (event.key === 'E') { event.preventDefault(); tui.switch_mode(mode_annotate); }; } }, false); -wasd_selector.addEventListener('input', function() { +movement_keys_selector.addEventListener('input', function() { tui.init_wasd(); }, false); rows_selector.addEventListener('input', function() { - if (rows_selector.value % 2 != 0) { + if (rows_selector.value % 4 != 0) { return; } terminal.initialize(); @@ -707,7 +796,7 @@ cols_selector.addEventListener('input', function() { tui.full_refresh(); }, false); window.setInterval(function() { - if (!(['input', 'n_cols', 'n_rows', 'WASD_selector', 'command_char'].includes(document.activeElement.id))) { + if (!(['input', 'n_cols', 'n_rows', 'movement_keys', 'command_char'].includes(document.activeElement.id))) { tui.inputEl.focus(); } }, 100);