<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);
this.recalc_input_lines();
this.height_header = this.height_turn_line + this.height_mode_line;
this.log_msg("@ waiting for server connection ...");
- this.wasd_selector = document.getElementById("WASD_selector");
- this.wasd_selector.addEventListener('input', function() {
- if (tui.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 (tui.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 = tui.wasd_selector.value;
- }, false);
},
init_login: function() {
this.log_msg("@ please enter your username:");
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();
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.switch_mode(mode_chat);
} else if (event.key == 'p') {
tui.switch_mode(mode_play);
- } else if (event.key === 'a') {
- explorer.move('left');
} else if (event.key === tui.key_left) {
- explorer.move('right');
+ explorer.move('left');
} else if (event.key === tui.key_right) {
- explorer.move('up');
+ explorer.move('right');
} else if (event.key === tui.key_up) {
- explorer.move('down');
+ explorer.move('up');
} 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