all repos — hex @ f69d4c8a605f788f89d26efcdf9a39232c8bdbc9

A tiny, minimalist, slightly-esoteric concatenative programming lannguage. 

Improving playground.
h3rald h3rald@h3rald.com
Mon, 02 Dec 2024 06:34:48 +0000
commit

f69d4c8a605f788f89d26efcdf9a39232c8bdbc9

parent

4ba4789d8a81829292c728028bbadf31e8b75a1f

4 files changed, 49 insertions(+), 19 deletions(-)

jump to
M web/assets/hex-playground.js → web/assets/hex-playground.js 
@@ -5,11 +5,11 @@ Module.pending_fgets = [];
 Module.pending_chars = [];
 Module.pending_lines = [];
 Module.print = (text) => {
-  document.querySelector("article section").textContent += text + '\n';
+  document.querySelector("article section section").textContent += text + '\n';
 };
 
 Module.printErr = (text) => {
-  document.querySelector("article section").textContent += text + '\n';
+  document.querySelector("article section section").textContent += text + '\n';
 };
 
 const inputBox = document.querySelector("article input");
M web/assets/styles.css → web/assets/styles.css 
@@ -65,8 +65,36 @@ li {
     margin: 0.5rem 0;
 }
 
+.prompt-wrapper {
+  whitespace: nowrap;
+  color: lime;
+}
+
+
 article section {
+    display: flex;
+    flex-direction: column;
+}
+
+article section section {
     height: 40vh;
     white-space: pre-wrap;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column-reverse;
+    scrollbar-color: black black;
+    scrollbar-width: thin;
+    margin: 1rem;
+    padding: 0.5rem;
+    border: 1px solid lime;
+}
 
+article input {
+    font-family: monospace;
+    margin: 1rem;
+    background-color: black;
+    color: white;
+    border: 1px solid lime;
+    display: flex;
+    flex-grow: 1;
 }
M web/contents/play.html → web/contents/play.html 
@@ -1,6 +1,8 @@ 
 <article>
     <h2>Playground</h2>
-    <section></section>
-    <input type="text" />
+    <section>
+      <section></section>
+      <input id="prompt" type="text" autofocus/>
+    </section>
 </article>
 <script src="/assets/hex.js"></script>
M web/templates/page.html → web/templates/page.html 
@@ -1,33 +1,33 @@ 
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>hex programming language</title>
-  <link rel="stylesheet" href="/assets/styles.css">
-</head>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0">
+    <title>hex programming language</title>
+    <link rel="stylesheet" href="/assets/styles.css">
+  </head>
 
-<body>
-  <header>
+  <body>
+    <header>
     <pre>
        _*_ _
       / \<h1><a href="/">hex</a></h1>\* programming language
      *\_/_/_/
           *
     </pre>
-  </header>
-  <nav>
+    </header>
+    <nav>
     <a href="/get-started">Get Started</a> |
     <a href="/manual">Manual</a> |
     <a href="/play">Play</a> |
     <a href="/changelog">Changelog</a> |
     <a href="/about">About</a>
-  </nav>
-  {{content}}
-  <footer>
+    </nav>
+    {{content}}
+    <footer>
     &copy; 2024 Fabio Cevasco
-  </footer>
-</body>
+    </footer>
+  </body>
 
 </html>