home
·
contact
·
privacy
projects
/
plomrogue2
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
In web client, span invisible text input field over terminal pre.
[plomrogue2]
/
rogue_chat.html
diff --git
a/rogue_chat.html
b/rogue_chat.html
index dd8de5b783bbf835fa73d5a1b92b7c80f5901629..dfb10fe13c2dbe19491faf121a59405857308657 100644
(file)
--- a/
rogue_chat.html
+++ b/
rogue_chat.html
@@
-14,8
+14,10
@@
terminal rows: <input id="n_rows" type="number" step=4 min=24 value=24 />
/ terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
/ <a href="https://plomlompom.com/repos/?p=plomrogue2;a=summary">source code</a> (includes proper terminal/ncurses client)
</div>
/ terminal columns: <input id="n_cols" type="number" step=4 min=80 value=80 />
/ <a href="https://plomlompom.com/repos/?p=plomrogue2;a=summary">source code</a> (includes proper terminal/ncurses client)
</div>
+<div style="position: relative; display: inline-block;">
<pre id="terminal"></pre>
<pre id="terminal"></pre>
-<textarea id="input" style="opacity: 0; width: 0px;"></textarea>
+<textarea id="input" style="position: absolute; left: 0; height: 100%; width: 100%; opacity: 0"></textarea>
+</div>
<h3>button controls for hard-to-remember keybindings</h3>
<table id="move_table" style="float: left">
<tr>
<h3>button controls for hard-to-remember keybindings</h3>
<table id="move_table" style="float: left">
<tr>
@@
-970,7
+972,7
@@
let tui = {
recalc_input_lines: function() {
if (this.mode.has_input_prompt) {
let _ = null;
recalc_input_lines: function() {
if (this.mode.has_input_prompt) {
let _ = null;
- [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value, this.window_width);
+ [this.input_lines, _] = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value
+ '█'
, this.window_width);
} else {
this.input_lines = [];
}
} else {
this.input_lines = [];
}
@@
-1045,7
+1047,7
@@
let tui = {
},
pick_selectable: function(task_name) {
const i = parseInt(this.inputEl.value);
},
pick_selectable: function(task_name) {
const i = parseInt(this.inputEl.value);
- if (isNaN(
i
) || i < 0 || i >= this.selectables.length) {
+ if (isNaN(
this.inputEl.value
) || i < 0 || i >= this.selectables.length) {
tui.log_msg('? invalid index, aborted');
} else {
server.send(['TASK:' + task_name, tui.selectables[i]]);
tui.log_msg('? invalid index, aborted');
} else {
server.send(['TASK:' + task_name, tui.selectables[i]]);
@@
-1055,7
+1057,7
@@
let tui = {
},
enter_ascii_art: function(command) {
if (this.inputEl.value.length != 6) {
},
enter_ascii_art: function(command) {
if (this.inputEl.value.length != 6) {
- this.log_msg('? wrong input length, try again');
+ this.log_msg('? wrong input length,
must be 6;
try again');
return;
}
this.log_msg(' ' + this.inputEl.value);
return;
}
this.log_msg(' ' + this.inputEl.value);
@@
-1554,7
+1556,7
@@
document.onclick = function() {
};
tui.inputEl.addEventListener('keydown', (event) => {
tui.show_help = false;
};
tui.inputEl.addEventListener('keydown', (event) => {
tui.show_help = false;
- if (
event.key == 'Enter'
) {
+ if (
['Enter', 'ArrowLeft', 'ArrowRight'].includes(event.key)
) {
event.preventDefault();
}
if ((!tui.mode.is_intro && event.key == 'Escape')
event.preventDefault();
}
if ((!tui.mode.is_intro && event.key == 'Escape')