<style>
</style>
</head><body>
-<pre id="terminal" style="display: inline-block; color: white; background-color: black;"></pre>
+<div>
+movement: <select id="WASD_selector" name="WASD_selector" >
+<option value="w, a, s, d" selected>w, a, s, d</option>
+<option value="arrow keys">arrow keys</option>
+</select>
+rows: <input id="n_rows" type="number" step=2 min=10 value=24 />
+cols: <input id="n_cols" type="number" step=4 min=20 value=80 />
+</div>
+<pre id="terminal" style="display: inline-block;"></pre>
<script>
"use strict";
let websocket_location = "ws://localhost:8000";
this.websocket = new WebSocket(url);
this.websocket.onopen = function(event) {
window.setInterval(function() { server.send(['PING']) }, 30000);
- tui.log_msg("@ server connected!");
+ tui.log_msg("@ server connected! :)");
tui.init_login();
};
+ this.websocket.onclose = function(event) {
+ tui.log_msg('@ server disconnected :(');
+ }
},
send: function(tokens) {
- if (this.websocket.readyState !== WebSocket.OPEN) {
- tui.log_msg('server disconnected :(');
- } else {
- this.websocket.send(unparser.untokenize(tokens));
- }
+ this.websocket.send(unparser.untokenize(tokens));
}
}
let quoted = ['"'];
for (let i = 0; i < str.length; i++) {
let c = str[i];
- if (c in ['"', '\\']) {
+ if (['"', '\\'].includes(c)) {
quoted.push('\\');
};
quoted.push(c);
height_turn_line: 1,
height_mode_line: 1,
height_input: 1,
+ key_up: 'w',
+ key_down: 's',
+ key_left: 'a',
+ key_right: 'd',
+ movement_keys_desc: 'w, a, s, d',
init: function() {
this.recalc_input_lines();
this.height_header = this.height_turn_line + this.height_mode_line;
return lines;
},
log_msg: function(msg) {
- let lines = this.msg_into_lines_of_width(msg, this.window_width);
- this.log = this.log.concat(lines);
- while (this.log.length > terminal.rows) {
+ this.log.push(msg);
+ while (this.log.length > terminal.rows * 4) {
this.log.shift();
};
this.full_refresh();
},
log_help: function() {
- this.log_msg("");
this.log_msg("HELP:");
this.log_msg("chat mode commands:");
this.log_msg(" :nick NAME - re-name yourself to NAME");
this.log_msg(" :p or :play - switch to play mode");
this.log_msg(" :? or :study - switch to study mode");
this.log_msg("commands common to study and play mode:");
- this.log_msg(" w, a, s, d - move");
+ this.log_msg(" " + this.movement_keys_desc + " - move");
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("commands specific to study mode:");
this.log_msg(" e - annotate terrain");
this.log_msg(" p - switch to play mode");
- this.log_msg("");
},
draw_map: function() {
let map_lines = [];
terminal.write(1, this.window_width, 'TURN: ' + game.turn);
},
draw_history: function() {
- if (terminal.rows <= this.height_header + this.height_input) {
- return;
- }
+ let log_display_lines = [];
+ for (let line of this.log) {
+ log_display_lines = log_display_lines.concat(this.msg_into_lines_of_width(line, this.window_width));
+ };
for (let y = terminal.rows - 1 - this.height_input,
- i = this.log.length - 1;
+ i = log_display_lines.length - 1;
y >= this.height_header && i >= 0;
y--, i--) {
- terminal.write(y, this.window_width, this.log[i]);
+ terminal.write(y, this.window_width, log_display_lines[i]);
}
},
draw_info: function() {
tui.log_msg('# ' + tokens[1], 1);
} else if (tokens[0] === 'PLAYER_ID') {
game.player_id = parseInt(tokens[1]);
- } else if (tokens[0] === 'META') {
- tui.log_msg('@ ' + tokens[1]);
} else if (tokens[0] === 'LOGIN_OK') {
server.send(['GET_GAMESTATE']);
- tui.log_msg('@ ' + tokens[1]);
tui.log_help();
- tui.switch_mode(mode_chat);
+ tui.switch_mode(mode_play);
} else if (tokens[0] === 'ANNOTATION') {
let position = parser.parse_yx(tokens[1]);
explorer.update_info_db(position, tokens[2]);
} else {
tui.log_msg('? unknown command');
}
- } else {
- server.send(['ALL', tui.input]);
+ } else {
+ server.send(['ALL', tui.input]);
}
+ } else if (tui.input.length > 0) {
+ server.send(['ALL', tui.input]);
}
tui.empty_input();
tui.full_refresh();
tui.log_help();
} else if (event.key === 'f') {
server.send(["TASK:FLATTEN_SURROUNDINGS"]);
- } else if (event.key === 'a') {
+ } else if (event.key === tui.key_left) {
server.send(['TASK:MOVE', 'LEFT']);
- } else if (event.key === 'd') {
+ } else if (event.key === tui.key_right) {
server.send(['TASK:MOVE', 'RIGHT']);
- } else if (event.key === 'w') {
+ } else if (event.key === tui.key_up) {
server.send(['TASK:MOVE', 'UP']);
- } else if (event.key === 's') {
+ } else if (event.key === tui.key_down) {
server.send(['TASK:MOVE', 'DOWN']);
};
} else if (tui.mode == mode_edit) {
tui.switch_mode(mode_chat);
} else if (event.key == 'p') {
tui.switch_mode(mode_play);
- } else if (event.key === 'a') {
+ } else if (event.key === tui.key_left) {
explorer.move('left');
- } else if (event.key === 'd') {
+ } else if (event.key === tui.key_right) {
explorer.move('right');
- } else if (event.key === 'w') {
+ } else if (event.key === tui.key_up) {
explorer.move('up');
- } else if (event.key === 's') {
+ } else if (event.key === tui.key_down) {
explorer.move('down');
} else if (event.key === 'e') {
tui.switch_mode(mode_annotate);
};
}
}, false);
+
+let wasd_selector = document.getElementById("WASD_selector");
+wasd_selector.addEventListener('input', 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';
+ };
+ tui.movement_keys_desc = wasd_selector.value;
+}, false);
+let rows_selector = document.getElementById("n_rows");
+rows_selector.addEventListener('input', function() {
+ terminal.rows = rows_selector.value;
+ terminal.initialize();
+ tui.full_refresh();
+}, false);
+let cols_selector = document.getElementById("n_cols");
+cols_selector.addEventListener('input', function() {
+ terminal.cols = cols_selector.value;
+ terminal.initialize();
+ tui.window_width = terminal.cols / 2,
+ tui.full_refresh();
+}, false);
</script>
</body></html>
projects / plomrogue2-experiments / blobdiff