[javascript] terminal emulator: max width 60em

mojoaxel · mojoaxel · commit 0ea943434b22 · 2022-03-29T23:07:54.000+02:00
diff --git a/00_Common/javascript/WebTerminal/HtmlTerminal.css b/00_Common/javascript/WebTerminal/HtmlTerminal.css
@@ -1,5 +1,5 @@
 :root {
-    --terminal-font: 1em "Lucida Console", "Courier New", monospace;
+    --terminal-font: 1rem "Lucida Console", "Courier New", monospace;
     --background-color: transparent;
     --text-color: var(--text);
     --prompt-char: '$ ';
@@ -10,12 +10,15 @@
  * If you wan t to overwrite them use custom properties (variables). 
  */
 .terminal {
+    display: block;
     font: var(--terminal-font);
     background-color: var(--background-color);
     color: var(--text-color);
 
     overflow-y: scroll;
-    width: max-content;
+    width: 100%;
+    max-width: 60rem;
+    margin: 0 auto;
 }
 
 /* The terminal consits of multiple "line" elements
diff --git a/00_Common/javascript/WebTerminal/terminal.html b/00_Common/javascript/WebTerminal/terminal.html
@@ -1,7 +1,7 @@
 <html>
   <head>
     <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
       rel="stylesheet"
       href="../../../00_Utilities/javascript/style_terminal.css"
@@ -37,7 +37,8 @@ <h1><a href="../../../../">BASIC Computer Games</a></h1>
     <main id="output"></main>
     <script src="HtmlTerminal.js" type="text/javascript"></script>
     <script>
-      const term = new HtmlTerminal(document.getElementById("output"));
+      const $output = document.getElementById("output");
+      const term = new HtmlTerminal($output);
 
       function getGameScriptFromHash() {
         const hash = window.location.hash;
@@ -93,13 +94,25 @@ <h1><a href="../../../../">BASIC Computer Games</a></h1>
         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.
        * 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...
        * ...it's just simple games ;-) */
       window.process = {
         stdout: {
           write: (t) => term.write(t),
+          columns: getOutputColumns($output)
         },
         stdin: {
           on: (event, callback) => term.input(callback),
