M web/assets/hex-playground.js → web/assets/hex-playground.js

@@ -1,24 +1,21 @@ 
-
-
-
 Module.pending_fgets = [];
-Module.pending_chars = [];
 Module.pending_lines = [];
+const inputBox = document.querySelector("article input");
+const outputBox = document.querySelector("article section section");
 Module.print = (text) => {
-  document.querySelector("article section section").textContent += text + '\n';
+  outputBox.textContent += text + "\n";
 };
 
 Module.printErr = (text) => {
-  document.querySelector("article section section").textContent += text + '\n';
+  outputBox.textContent += text + "\n";
 };
 
-const inputBox = document.querySelector("article input");
 
 inputBox.addEventListener("keydown", (e) => {
-  if (e.key === 'Enter') {
+  if (e.key === "Enter") {
     e.preventDefault();
-    Module.pending_lines.push(Module.pending_chars.join(''));
-    Module.pending_chars = [];
+    Module.pending_lines.push(inputBox.value);
+    outputBox.textContent += "> " + inputBox.value + "\n";
     inputBox.value = '';
   } else if (e.key.length === 1) {
     Module.pending_chars.push(e.key);

M web/assets/styles.css → web/assets/styles.css

@@ -89,9 +89,13 @@ padding: 0.5rem;
     border: 1px solid lime;
 }
 
+aside {
+    display: flex;
+    margin: 0 1rem;
+}
+
 article input {
     font-family: monospace;
-    margin: 1rem;
     background-color: black;
     color: white;
     border: 1px solid lime;

M web/contents/play.html → web/contents/play.html

@@ -2,7 +2,10 @@ <article>
     <h2>Playground</h2>
     <section>
       <section></section>
-      <input id="prompt" type="text" autofocus/>
+      <aside>
+        <span>&gt;&nbsp;</span>
+        <input id="prompt" type="text" autofocus placeholder="Enter hex code here..."/>
+      </aside>
     </section>
 </article>
 <script src="/assets/hex.js"></script>