</style>
</head><body>
<div>
-rows: <input id="n_rows" type="number" step=4 min=8 value=24 />
-cols: <input id="n_cols" type="number" step=4 min=20 value=80 />
+terminal rows: <input id="n_rows" type="number" step=4 min=8 value=24 />
+terminal columns: <input id="n_cols" type="number" step=4 min=20 value=80 />
</div>
<pre id="terminal" style="display: inline-block;"></pre>
<textarea id="input" style="opacity: 0; width: 0px;"></textarea>
<div>
-keys:<br />
-square_move_up: <input id="key_square_move_up" type="text" value="w" /> (hint: ArrowUp)<br />
-square_move_left: <input id="key_square_move_left" type="text" value="a" /> (hint: ArrowLeft)<br />
-square_move_down: <input id="key_square_move_down" type="text" value="s" /> (hint: ArrowDown)<br />
-square_move_right: <input id="key_square_move_right" type="text" value="d" /> (hint: ArrowRight)<br />
-hex_move_upleft: <input id="key_hex_move_upleft" type="text" value="w" /><br />
-hex_move_upright: <input id="key_hex_move_upright" type="text" value="e" /><br />
-hex_move_right: <input id="key_hex_move_right" type="text" value="d" /><br />
-hex_move_downright: <input id="key_hex_move_downright" type="text" value="x" /><br />
-hex_move_downleft: <input id="key_hex_move_downleft" type="text" value="y" /><br />
-hex_move_left: <input id="key_hex_move_left" type="text" value="a" /><br />
-flatten_: <input id="key_flatten" type="text" value="F" /><br />
-switch_to_chat: <input id="key_switch_to_chat" type="text" value="t" /><br />
-switch_to_play: <input id="key_switch_to_play" type="text" value="p" /><br />
-switch_to_annotate: <input id="key_switch_to_annotate" type="text" value="m" /><br />
-switch_to_portal: <input id="key_switch_to_portal" type="text" value="P" /><br />
-switch_to_study: <input id="key_switch_to_study" type="text" value="?" /><br />
-switch_to_edit: <input id="key_switch_to_edit" type="text" value="m" /><br />
+keys (see <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values">here</a> for non-obvious available values):<br />
+move up (square grid): <input id="key_square_move_up" type="text" value="w" /> (hint: ArrowUp)<br />
+move left (square grid): <input id="key_square_move_left" type="text" value="a" /> (hint: ArrowLeft)<br />
+move down (square grid): <input id="key_square_move_down" type="text" value="s" /> (hint: ArrowDown)<br />
+move right (square grid): <input id="key_square_move_right" type="text" value="d" /> (hint: ArrowRight)<br />
+move up-left (hex grid): <input id="key_hex_move_upleft" type="text" value="w" /><br />
+move up-right (hex grid): <input id="key_hex_move_upright" type="text" value="e" /><br />
+move right (hex grid): <input id="key_hex_move_right" type="text" value="d" /><br />
+move down-right (hex grid): <input id="key_hex_move_downright" type="text" value="x" /><br />
+move down-left (hex grid): <input id="key_hex_move_downleft" type="text" value="y" /><br />
+move left (hex grid): <input id="key_hex_move_left" type="text" value="a" /><br />
+flatten surroundings: <input id="key_flatten" type="text" value="F" /><br />
+switch to chat mode: <input id="key_switch_to_chat" type="text" value="t" /><br />
+switch to play mode: <input id="key_switch_to_play" type="text" value="p" /><br />
+switch to study mode: <input id="key_switch_to_study" type="text" value="?" /><br />
+edit terrain (from play mode): <input id="key_switch_to_edit" type="text" value="m" /><br />
+annotate terrain (from study mode): <input id="key_switch_to_annotate" type="text" value="m" /><br />
+annotate portal (from study mode): <input id="key_switch_to_portal" type="text" value="P" /><br />
</div>
<script>
"use strict";
let cols_selector = document.getElementById("n_cols");
let key_selectors = document.querySelectorAll('[id^="key_"]');
+function restore_selector_value(selector) {
+ let stored_selection = window.localStorage.getItem(selector.id);
+ if (stored_selection) {
+ selector.value = stored_selection;
+ }
+}
+restore_selector_value(rows_selector);
+restore_selector_value(cols_selector);
+for (let key_selector of key_selectors) {
+ restore_selector_value(key_selector);
+}
+
let terminal = {
foreground: 'white',
background: 'black',
tui.log_msg("@ server disconnected :(");
tui.log_msg("@ hint: try the '/reconnect' command");
};
- this.websocket.onmessage = this.handle_event;
- },
+ this.websocket.onmessage = this.handle_event;
+ },
reconnect: function() {
- this.reconnect_to(this.url);
+ this.reconnect_to(this.url);
},
reconnect_to: function(url) {
this.websocket.close();
let [tokens, token_starts] = parser.tokenize(tui.inputEl.value);
if (tokens.length > 0 && tokens[0].length > 0) {
if (tui.inputEl.value[0][0] == '/') {
- if (tokens[0].slice(1) == 'play' || tokens[0].slice(1) == 'P') {
+ if (tokens[0].slice(1) == 'play' || tokens[0][1] == tui.keys.switch_to_play) {
tui.switch_mode(mode_play);
- } else if (tokens[0].slice(1) == 'study' || tokens[0].slice(1) == '?') {
+ } else if (tokens[0].slice(1) == 'study' || tokens[0][1] == tui.keys.switch_to_study) {
tui.switch_mode(mode_study);
} else if (tokens[0].slice(1) == 'help') {
tui.log_help();
if (rows_selector.value % 4 != 0) {
return;
}
+ window.localStorage.setItem(rows_selector.id, rows_selector.value);
terminal.initialize();
tui.full_refresh();
}, false);
if (cols_selector.value % 4 != 0) {
return;
}
+ window.localStorage.setItem(cols_selector.id, cols_selector.value);
terminal.initialize();
tui.window_width = terminal.cols / 2,
tui.full_refresh();
}, false);
for (let key_selector of key_selectors) {
key_selector.addEventListener('input', function() {
+ window.localStorage.setItem(key_selector.id, key_selector.value);
tui.init_keys();
}, false);
}