From: Christian Heller <c.heller@plomlompom.de> Date: Sat, 31 Oct 2020 09:29:57 +0000 (+0100) Subject: Use hidden textarea for text input. X-Git-Url: https://plomlompom.com/repos/%7B%7Bdb.prefix%7D%7D/static/%7B%7Bprefix%7D%7D/todo?a=commitdiff_plain;h=a2dcbcdd5f233cea4287812f7e897e927b7bfde3;p=plomrogue2-experiments Use hidden textarea for text input. --- diff --git a/new2/rogue_chat_nocanvas_monochrome.html b/new2/rogue_chat_nocanvas_monochrome.html index 0ec2394..89e4025 100644 --- a/new2/rogue_chat_nocanvas_monochrome.html +++ b/new2/rogue_chat_nocanvas_monochrome.html @@ -12,6 +12,7 @@ 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> +<textarea id="input" style="opacity: 1; width: 10px;"></textarea> <script> "use strict"; let websocket_location = "ws://localhost:8000"; @@ -189,7 +190,6 @@ let tui = { mode: mode_waiting_for_server, log: [], input_prompt: '> ', - input: '', input_lines: [], window_width: terminal.cols / 2, height_turn_line: 1, @@ -201,6 +201,8 @@ let tui = { key_right: 'd', movement_keys_desc: 'w, a, s, d', init: function() { + this.inputEl = document.getElementById("input"); + this.inputEl.focus(); this.recalc_input_lines(); this.height_header = this.height_turn_line + this.height_mode_line; this.log_msg("@ waiting for server connection ..."); @@ -218,40 +220,24 @@ let tui = { if (mode == mode_annotate && explorer.position in explorer.info_db) { let info = explorer.info_db[explorer.position]; if (info != "(none)") { - this.add_to_input(explorer.info_db[explorer.position]); + this.inputEl.value = explorer.info_db[explorer.position]; + this.recalc_input_lines(); } } this.full_refresh(); }, empty_input: function(str) { - this.input = ""; + this.inputEl.value = ""; if (this.mode.has_input_prompt) { this.recalc_input_lines(); } else { this.height_input = 0; } }, - add_to_input: function(str) { - if (this.input_prompt.length + this.input.length + str.length > this.window_width * terminal.rows) { - return; - } - this.input += str; - this.recalc_input_lines(); - this.full_refresh(); - }, recalc_input_lines: function() { - this.input_lines = this.msg_into_lines_of_width(this.input_prompt + this.input, this.window_width); + this.input_lines = this.msg_into_lines_of_width(this.input_prompt + this.inputEl.value, this.window_width); this.height_input = this.input_lines.length; }, - shorten_input: function() { - if (this.input.length == 0) { - terminal.blink_screen(); - } else { - this.input = tui.input.slice(0, -1); - this.recalc_input_lines(); - this.full_refresh(); - } - }, msg_into_lines_of_width: function(msg, width) { let chunk = ""; let lines = []; @@ -490,19 +476,31 @@ let explorer = { } } -document.addEventListener('keydown', (event) => { - if (tui.mode.has_input_prompt && event.key.length === 1) { - tui.add_to_input(event.key); - } else if (tui.mode.has_input_prompt && event.key == 'Backspace') { - tui.shorten_input(); - } else if (tui.mode == mode_login && event.key == 'Enter') { - server.send(['LOGIN', tui.input]); +tui.inputEl.addEventListener('input', (event) => { + if (tui.mode.has_input_prompt) { + let max_length = tui.window_width * terminal.rows - tui.input_prompt.length; + if (tui.inputEl.value.length > max_length) { + tui.inputEl.value = tui.inputEl.value.slice(0, max_length); + }; + tui.recalc_input_lines(); + tui.full_refresh(); + } else if (tui.mode == mode_edit && tui.inputEl.value.length > 0) { + server.send(["TASK:WRITE", tui.inputEl.value[0]]); + tui.switch_mode(mode_play); + } +}, false); +tui.inputEl.addEventListener('keydown', (event) => { + if (event.key == 'Enter') { + event.preventDefault(); + } + if (tui.mode == mode_login && event.key == 'Enter') { + server.send(['LOGIN', tui.inputEl.value]); tui.switch_mode(mode_login); } else if (tui.mode == mode_annotate && event.key == 'Enter') { - explorer.annotate(tui.input); + explorer.annotate(tui.inputEl.value); tui.switch_mode(mode_study, true); } else if (tui.mode == mode_chat && event.key == 'Enter') { - let [tokens, token_starts] = parser.tokenize(tui.input); + let [tokens, token_starts] = parser.tokenize(tui.inputEl.value); if (tokens.length > 0 && tokens[0].length > 0) { if (tokens[0][0] == ':') { if (tokens[0] == ':play' || tokens[0] == ':p') { @@ -519,7 +517,7 @@ document.addEventListener('keydown', (event) => { } } else if (tokens[0] == ':msg') { if (tokens.length > 2) { - let msg = tui.input.slice(token_starts[2]); + let msg = tui.inputEl.value.slice(token_starts[2]); server.send(['QUERY', tokens[1], msg]); } else { tui.log_msg('? need message target and message'); @@ -528,17 +526,19 @@ document.addEventListener('keydown', (event) => { tui.log_msg('? unknown command'); } } else { - server.send(['ALL', tui.input]); + server.send(['ALL', tui.inputEl.value]); } - } else if (tui.input.length > 0) { - server.send(['ALL', tui.input]); + } else if (tui.inputEl.valuelength > 0) { + server.send(['ALL', tui.inputEl.value]); } tui.empty_input(); tui.full_refresh(); } else if (tui.mode == mode_play) { if (event.key === 'c') { + event.preventDefault(); tui.switch_mode(mode_chat); } else if (event.key === 'e') { + event.preventDefault(); tui.switch_mode(mode_edit); } else if (event.key === '?') { tui.switch_mode(mode_study); @@ -555,11 +555,6 @@ document.addEventListener('keydown', (event) => { } else if (event.key === tui.key_down) { server.send(['TASK:MOVE', 'DOWN']); }; - } else if (tui.mode == mode_edit) { - if (event.key != "Shift" && event.key.length == 1) { - server.send(["TASK:WRITE", event.key]); - tui.switch_mode(mode_play); - } } else if (tui.mode == mode_study) { if (event.key === 'c') { tui.switch_mode(mode_chat); @@ -574,6 +569,7 @@ document.addEventListener('keydown', (event) => { } else if (event.key === tui.key_down) { explorer.move('down'); } else if (event.key === 'e') { + event.preventDefault(); tui.switch_mode(mode_annotate); }; } @@ -607,5 +603,10 @@ cols_selector.addEventListener('input', function() { tui.window_width = terminal.cols / 2, tui.full_refresh(); }, false); +window.setInterval(function() { + if (!(['input', 'n_cols', 'n_rows', 'WASD_selector'].includes(document.activeElement.id))) { + tui.inputEl.focus(); + } +}, 100); </script> </body></html>