Skip to content

Commit a3c36ef

Browse files
mojoaxelmojoaxel
committed
show terminal header with link to sources
1 parent 6c4af6b commit a3c36ef

File tree

15 files changed

+616
-175
lines changed

15 files changed

+616
-175
lines changed

‎00_Common/javascript/WebTerminal/HtmlTerminal.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
:root {
2+
--terminal-font: 1em "Lucida Console", "Courier New", monospace;
3+
--background-color: transparent;
4+
--text-color: var(--text);
5+
--prompt-char: '$ ';
6+
--cursor-char: '_';
7+
}
8+
9+
/* Basic terminal style.
10+
* If you wan t to overwrite them use custom properties (variables).
11+
*/
12+
.terminal {
13+
font: var(--terminal-font);
14+
background-color: var(--background-color);
15+
color: var(--text-color);
16+
17+
overflow-y: scroll;
18+
width: max-content;
19+
}
20+
21+
/* The terminal consits of multiple "line" elements
22+
* Because sometimes we want to add a simulates "prompt" at the end of a line
23+
* we need to make it an "inline" element and handle line-breaks
24+
* by adding <br> elements */
25+
.terminal pre.line {
26+
display: inline-block;
27+
font: var(--terminal-font);
28+
margin: 0;
29+
padding: 0;
30+
}
31+
32+
/* The "terminal" has one "prompt" element.
33+
* This prompt is not any kind of input, but just a simple <span>
34+
* with an id "prompt" and a
35+
*/
36+
@keyframes prompt-blink {
37+
100% {
38+
opacity: 0;
39+
}
40+
}
41+
.terminal #prompt {
42+
display: inline-block;
43+
}
44+
.terminal #prompt:before {
45+
display: inline-block;
46+
content: var(--prompt-char);
47+
font: var(--terminal-font);
48+
}
49+
.terminal #prompt:after {
50+
display: inline-block;
51+
content: var(--cursor-char);
52+
background: var(--text);
53+
animation: prompt-blink 1s steps(2) infinite;
54+
width: 0.75rem;
55+
opacity: 1;
56+
}
57+
58+
59+
/* Terminal scrollbar */
60+
::-webkit-scrollbar {
61+
width: 3px;
62+
height: 3px;
63+
}
64+
::-webkit-scrollbar-track {
65+
background: var(--background-color);
66+
}
67+
::-webkit-scrollbar-thumb {
68+
background: var(--text-color);
69+
}

‎00_Common/javascript/WebTerminal/HtmlTerminal.js

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
/**
2+
* @class HtmlTerminal
3+
*
4+
* This class is a very basic implementation of a "terminal" in the browser.
5+
* It provides simple functions like "write" and an "input" Callback.
6+
*
7+
* @license AGPL-2.0
8+
* @author Alexaner Wunschik <https://github.com/mojoaxel>
9+
*/
10+
class HtmlTerminal {
11+
12+
/**
13+
* Input callback.
14+
* If the prompt is activated by calling the input function
15+
* a callback is defined. If this member is not set this means
16+
* the prompt is not active.
17+
*
18+
* @private
19+
* @type {function}
20+
*/
21+
#inputCallback = undefined;
22+
23+
/**
24+
* A html element to show a "prompt".
25+
*
26+
* @private
27+
* @type {HTMLElement}
28+
*/
29+
#$prompt = undefined;
30+
31+
/**
32+
* Constructor
33+
* Creates a basic terminal simulation on the provided HTMLElement.
34+
*
35+
* @param {HTMLElement} $output - a dom element
36+
*/
37+
constructor($output) {
38+
// Store the output DOM element in a local variable.
39+
this.$output = $output;
40+
41+
// Clear terminal.
42+
this.clear();
43+
44+
// Add the call "terminal" to the $output element.
45+
this.$output.classList.add('terminal');
46+
47+
// Create a prompt element.
48+
// This element gets added if input is needed
49+
this.#$prompt = document.createElement("span");
50+
this.#$prompt.setAttribute("id", "prompt");
51+
this.#$prompt.innerText = "";
52+
53+
//TODO: this handler shouls be only on the propt element and only active if cursor is visible
54+
document.addEventListener("keyup", this.#handleKey.bind(this));
55+
}
56+
57+
/**
58+
* Creates a new HTMLElement with the given text content.
59+
* This element than gets added to the $output as a new "line".
60+
*
61+
* @private
62+
* @memberof MinimalTerminal
63+
* @param {String} text - text that should be displayed in the new "line".
64+
* @returns {HTMLElement} return a new DOM Element <pre class="line"></pre>
65+
*/
66+
#newLine(text) {
67+
const $lineNode = document.createElement("pre");
68+
$lineNode.classList.add("line");
69+
$lineNode.innerText = text;
70+
return $lineNode;
71+
}
72+
73+
/**
74+
* TODO
75+
*
76+
* @private
77+
* @param {*} e
78+
*/
79+
#handleKey(e) {
80+
// if no input-callback is defined
81+
if (!this.#inputCallback) {
82+
return;
83+
}
84+
85+
if (e.keyCode === 13 /* ENTER */) {
86+
// create a new line with the text input and remove the prompt
87+
const text = this.#$prompt.innerText;
88+
this.write(text + "\n");
89+
this.#$prompt.innerText = "";
90+
this.#$prompt.remove();
91+
92+
// return the inputed text
93+
this.#inputCallback(text);
94+
95+
// remove the callback and the key handler
96+
this.#inputCallback = undefined;
97+
} else if (e.keyCode === 8 /* BACKSPACE */) {
98+
this.#$prompt.innerText = this.#$prompt.innerText.slice(0, -1);
99+
} else {
100+
this.#$prompt.innerHtml = '';
101+
this.#$prompt.innerText = this.#$prompt.innerText + e.key;
102+
}
103+
}
104+
105+
/**
106+
* Clear the terminal.
107+
* Remove all lines.
108+
*
109+
* @public
110+
*/
111+
clear() {
112+
this.$output.innerText = "";
113+
}
114+
115+
/**
116+
* TODO:
117+
*
118+
* @public
119+
* @param {*} htmlContent
120+
*/
121+
inserHtml(htmlContent) {
122+
const $htmlNode = document.createElement("div");
123+
$htmlNode.innerHTML = htmlContent;
124+
this.$output.appendChild($htmlNode);
125+
document.body.scrollTo(0, document.body.scrollHeight);
126+
}
127+
128+
/**
129+
* Write a text to the terminal.
130+
* By default there is no linebreak at the end of a new line
131+
* except the line ensd with a "\n".
132+
* If the given text has multible linebreaks, multibe lines are inserted.
133+
*
134+
* @public
135+
* @param {string} text
136+
*/
137+
write(text) {
138+
if (text.match(/^\n*$/)) {
139+
// empty new line
140+
text.match(/\n/g).forEach(() => {
141+
const $br = document.createElement("br");
142+
this.$output.appendChild($br);
143+
});
144+
} else if (text && text.length && text.includes("\n")) {
145+
const lines = text.split("\n");
146+
lines.forEach((line) => {
147+
if (line.length === 0 || line.match(/^\s*$/)) {
148+
this.$output.appendChild(document.createElement("br"));
149+
} else {
150+
const $lineNode = this.#newLine(line);
151+
this.$output.appendChild($lineNode);
152+
//this.$node.appendChild(document.createElement("br"));
153+
}
154+
});
155+
} else if (text && text.length) {
156+
// simple line
157+
const $lineNode = this.#newLine(text);
158+
this.$output.appendChild($lineNode);
159+
}
160+
161+
// scroll to the buttom of the page
162+
document.body.scrollTo(0, document.body.scrollHeight);
163+
}
164+
165+
/**
166+
* Like "write" but with a newline at the end.
167+
*
168+
* @public
169+
* @param {*} text
170+
*/
171+
writeln(text) {
172+
this.write(text + "\n");
173+
}
174+
175+
/**
176+
* Query from user input.
177+
* This is done by adding a input-element at the end of the terminal,
178+
* that showes a prompt and a blinking cursor.
179+
* If a key is pressed the input is added to the prompt element.
180+
* The input ends with a linebreak.
181+
*
182+
* @public
183+
* @param {*} callback
184+
*/
185+
input(callback) {
186+
// show prompt with a blinking prompt
187+
this.$output.appendChild(this.#$prompt);
188+
this.#inputCallback = callback;
189+
}
190+
}

‎00_Common/javascript/WebTerminal/terminal.html

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
<html>
2+
<head>
3+
<title>Minimal node.js terminal</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<link
6+
rel="stylesheet"
7+
href="../../../00_Utilities/javascript/style_terminal.css"
8+
/>
9+
<link rel="stylesheet" href="HtmlTerminal.css" />
10+
<style>
11+
header {
12+
position: sticky;
13+
top: 0;
14+
left: 0;
15+
right: 0;
16+
border-bottom: 1px solid var(--text);
17+
padding: 0.25rem 0.5rem;
18+
margin: 0;
19+
margin-bottom: 1rem;
20+
background: black;
21+
display: flex;
22+
justify-content: space-between;
23+
}
24+
header h1 {
25+
font-size: small;
26+
color: var(--text),
27+
}
28+
header div {
29+
font-size: small;
30+
}
31+
</style>
32+
</head>
33+
<body>
34+
<header>
35+
<h1><a href="../../../../">BASIC Computer Games</a></h1>
36+
</header>
37+
<main id="output"></main>
38+
<script src="HtmlTerminal.js" type="text/javascript"></script>
39+
<script>
40+
const term = new HtmlTerminal(document.getElementById("output"));
41+
42+
function getGameScriptFromHash() {
43+
const hash = window.location.hash;
44+
45+
// if no game-script was provided redirect to the overview.
46+
if (!hash) {
47+
// show error message and link back to the index.html
48+
console.debug("[HtmlTerminal] No game script found!");
49+
term.writeln(`no game script found :-(\n`);
50+
term.inserHtml(`<a href="/">>> Back to game overview!</a>`);
51+
return;
52+
}
53+
54+
// remove the hash
55+
const gameFile = hash.replace("#", "");
56+
return gameFile;
57+
}
58+
59+
function addGitHubLink(gameFile) {
60+
const gameFolder = gameFile.split("/")[0];
61+
62+
$gitHubLink = document.createElement("a");
63+
$gitHubLink.href = `https://github.com/coding-horror/basic-computer-games/tree/main/${gameFolder}`;
64+
$gitHubLink.innerText = `show source-code`;
65+
66+
var $gitHubBanner = document.createElement("div");
67+
$gitHubBanner.classList.add("githublink");
68+
$gitHubBanner.appendChild($gitHubLink);
69+
70+
const $header = document.getElementsByTagName('header')[0];
71+
$header.append($gitHubBanner);
72+
}
73+
74+
function loadGameScript(gameFile) {
75+
// clear terminal
76+
term.clear();
77+
78+
// load game-script
79+
console.debug("[HtmlTerminal] Game script found: ", gameFile);
80+
const gameScript = `../../../${gameFile}`;
81+
var $scriptTag = document.createElement("script");
82+
$scriptTag.async = "async";
83+
$scriptTag.type = "module";
84+
$scriptTag.src = gameScript;
85+
$scriptTag.onerror = () => {
86+
term.clear();
87+
term.writeln(`Error loading game-script "${gameFile}" :-(\n`);
88+
term.inserHtml(`<a href="/">>> Back to game overview!</a>`);
89+
};
90+
$scriptTag.addEventListener("load", function () {
91+
console.log("[HtmlTerminal] Game script loaded!");
92+
});
93+
document.body.append($scriptTag);
94+
}
95+
96+
/* Redirect stdin/stdout to the HtmlTerminal.
97+
* This is VERY hacky and should never be done in a serious project!
98+
* We can use this here because we know what we are doing and...
99+
* ...it's just simple games ;-) */
100+
window.process = {
101+
stdout: {
102+
write: (t) => term.write(t),
103+
},
104+
stdin: {
105+
on: (event, callback) => term.input(callback),
106+
},
107+
exit: (code) => {},
108+
};
109+
110+
// let's play 🚀
111+
const gameFile = getGameScriptFromHash();
112+
addGitHubLink(gameFile);
113+
loadGameScript(gameFile);
114+
</script>
115+
</body>
116+
</html>

0 commit comments

Comments
 (0)