gitea-mirror/basic-computer-games
1
0
Fork 0
mirror of https://github.com/coding-horror/basic-computer-games.git synced 2025-12-05 20:40:25 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix(#700): fix terminal emulator on mobile

Browse Source
This commit is contained in:
Alexander Wunschik
2022-04-13 22:16:46 +02:00
parent 235e6484de
commit 1f02b11c74
5 changed files with 37 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
00_Common/javascript/WebTerminal/HtmlTerminal.css
View File

@@ -17,7 +17,7 @@
overflow-y: scroll;
width: 100%;
max-width: 60rem;
max-width: 640px;
margin: 0 auto;
}
@@ -32,10 +32,7 @@
padding: 0;
}
/* The "terminal" has one "prompt" element.
* This prompt is not any kind of input, but just a simple <span>
* with an id "prompt" and a
*/
/* The "terminal" has one "prompt" input-element. */
@keyframes prompt-blink {
100% {
opacity: 0;
@@ -57,6 +54,15 @@
width: 0.75rem;
opacity: 1;
}
.terminal input#prompt {
text-transform: uppercase;
background: none;
border: none;
outline: none;
caret-color: var(--text);
color: var(--text);
font: var(--terminal-font);
}
/* Terminal scrollbar */

53
00_Common/javascript/WebTerminal/HtmlTerminal.js
View File

@@ -26,7 +26,7 @@ class HtmlTerminal {
* @private
* @type {HTMLElement}
*/
#$prompt = undefined;
#$prompt;
/**
* Constructor
@@ -45,13 +45,18 @@ class HtmlTerminal {
this.$output.classList.add('terminal');
// Create a prompt element.
// This element gets added if input is needed
this.#$prompt = document.createElement("span");
// This element gets added if input is needed.
this.#$prompt = document.createElement("input");
this.#$prompt.setAttribute("id", "prompt");
this.#$prompt.innerText = "";
this.#$prompt.setAttribute("type", "text");
this.#$prompt.setAttribute("length", "50");
this.#$prompt.addEventListener("keydown", this.#handleKey.bind(this));
//TODO: this handler shouls be only on the propt element and only active if cursor is visible
document.addEventListener("keyup", this.#handleKey.bind(this));
// Force focus on the promt on each click.
// This is needed for mobile support.
document.body.addEventListener('click', () => {
this.#$prompt.focus();
});
}
/**
@@ -77,37 +82,16 @@ class HtmlTerminal {
* @param {*} e
*/
#handleKey(e) {
// if no input-callback is defined
// if no input-callback is defined just return
if (!this.#inputCallback) {
return;
}
if (e.keyCode === 13 /* ENTER */) {
// create a new line with the text input and remove the prompt
const text = this.#$prompt.innerText;
this.write(text + "\n");
this.#$prompt.innerText = "";
if (e.keyCode == 13) {
const text = this.#$prompt.value;
this.#$prompt.value = '';
this.#$prompt.remove();
// return the inputed text
this.#inputCallback(text);
// remove the callback and the key handler
this.#inputCallback = undefined;
} else if (e.keyCode === 8 /* BACKSPACE */) {
this.#$prompt.innerText = this.#$prompt.innerText.slice(0, -1);
} else if (
e.keyCode == 16 // "Shift"
|| e.keyCode == 17 // "Control"
|| e.keyCode == 20 // "CapsLock"
|| !e.key.match(/^[a-z0-9!"§#$%&'()*+,.\/:;<=>?@\[\] ^_`{|}~-]$/i)
) {
// ignore non-visible characters
return e;
} else {
this.#$prompt.innerHtml = '';
const key = e.shiftKey ? e.key.toUpperCase() : e.key;
this.#$prompt.innerText = this.#$prompt.innerText + key;
this.#inputCallback(text + '\n');
}
}
@@ -122,7 +106,7 @@ class HtmlTerminal {
}
/**
* TODO:
* Create a new div and add html content.
*
* @public
* @param {*} htmlContent
@@ -189,7 +173,8 @@ class HtmlTerminal {
*/
input(callback) {
// show prompt with a blinking prompt
this.$output.appendChild(this.#$prompt);
this.#inputCallback = callback;
this.$output.appendChild(this.#$prompt);
this.#$prompt.focus();
}
}

2
00_Common/javascript/WebTerminal/terminal.html
View File

@@ -1,7 +1,7 @@
<html>
<head>
<title>Minimal node.js terminal</title>
<meta name="viewport" content="width=device-width, initial-scale=.75">
<meta name="viewport" content="width=640, initial-scale=1">
<link
rel="stylesheet"
href="../../../00_Utilities/javascript/style_terminal.css"

6
00_Common/javascript/common.mjs
View File

@@ -57,9 +57,13 @@ export async function input(message = '') {
* First we need to convert it into a string. */
const data = input.toString();
/* add input to terminal
* The data should end with a newline! */
process.stdout.write(data);
/* The result fo onData is a string ending with an `\n`.
* We just need the actual content so let's remove the newline at the end: */
const content = data[data.length] === '\n' ? data.slice(0, -1) : data;
const content = data.endsWith('\n') ? data.slice(0, -1) : data;
resolve(content);
});

2
index.html
View File

File diff suppressed because one or more lines are too long