<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";
}
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);
-let mode_study = new Mode('study', false, true);
-let mode_edit = new Mode('edit', false, false);
+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 tui = {
mode: mode_waiting_for_server,
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;
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(" f - flatten surroundings");
this.log_msg(" ? - switch to study mode");
this.log_msg("commands specific to study mode:");
- this.log_msg(" A - annotate terrain");
+ this.log_msg(" e - annotate terrain");
this.log_msg(" p - switch to play mode");
- this.log_msg("");
},
draw_map: function() {
let map_lines = [];
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 === 'A') {
+ } 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