gitea-mirror/basic-computer-games
1
0
Fork 0
mirror of https://github.com/coding-horror/basic-computer-games.git synced 2025-12-23 07:29:02 -08:00
Code Issues Packages Projects Releases Wiki Activity

[javascript] terminal emulator: max width 60em

Browse Source
This commit is contained in:
Alexander Wunschik
2022-03-29 23:07:54 +02:00
parent 7b0fc56b0d
commit 306e420869
2 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
:root { :root {
--terminal-font: 1em "Lucida Console", "Courier New", monospace; --terminal-font: 1rem "Lucida Console", "Courier New", monospace;
--background-color: transparent; --background-color: transparent;
--text-color: var(--text); --text-color: var(--text);
--prompt-char: '$ '; --prompt-char: '$ ';
@@ -10,12 +10,15 @@
* If you wan t to overwrite them use custom properties (variables). * If you wan t to overwrite them use custom properties (variables).
*/ */
.terminal { .terminal {
display: block;
font: var(--terminal-font); font: var(--terminal-font);
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
overflow-y: scroll; overflow-y: scroll;
width: max-content; width: 100%;
max-width: 60rem;
margin: 0 auto;
} }
/* The terminal consits of multiple "line" elements /* The terminal consits of multiple "line" elements

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

@@ -1,7 +1,7 @@
<html> <html>
<head> <head>
<title>Minimal node.js terminal</title> <title>Minimal node.js terminal</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=.75">
<link <link
rel="stylesheet" rel="stylesheet"
href="../../../00_Utilities/javascript/style_terminal.css" href="../../../00_Utilities/javascript/style_terminal.css"
@@ -37,7 +37,8 @@
<main id="output"></main> <main id="output"></main>
<script src="HtmlTerminal.js" type="text/javascript"></script> <script src="HtmlTerminal.js" type="text/javascript"></script>
<script> <script>
const term = new HtmlTerminal(document.getElementById("output")); const $output = document.getElementById("output");
const term = new HtmlTerminal($output);
function getGameScriptFromHash() { function getGameScriptFromHash() {
const hash = window.location.hash; const hash = window.location.hash;
@@ -93,6 +94,17 @@
document.body.append($scriptTag); document.body.append($scriptTag);
} }
/**
* Determine how much chars will fit in each terminal line.
*/
function getOutputColumns($element) {
const fontWidth = 10; //TODO: this width could be measured but it may be complicated!
const columnWidth = Math.trunc($element.clientWidth / fontWidth);
console.warn(`[terminal] document.body.clientWidth:${$element.clientWidth} fontsize:${fontWidth} columnWidth:${columnWidth}`);
return columnWidth;
}
/* Redirect stdin/stdout to the HtmlTerminal. /* Redirect stdin/stdout to the HtmlTerminal.
* This is VERY hacky and should never be done in a serious project! * This is VERY hacky and should never be done in a serious project!
* We can use this here because we know what we are doing and... * We can use this here because we know what we are doing and...
@@ -100,6 +112,7 @@
window.process = { window.process = {
stdout: { stdout: {
write: (t) => term.write(t), write: (t) => term.write(t),
columns: getOutputColumns($output)
}, },
stdin: { stdin: {
on: (event, callback) => term.input(callback), on: (event, callback) => term.input(callback),