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

@@ -1,7 +1,15 @@ 
 Module.pending_fgets = [];
 Module.pending_lines = [];
 const inputBox = document.querySelector("article input");
+const textarea = document.querySelector("article textarea");
+const upload = document.getElementById("upload");
+const eval = document.getElementById("evaluate");
 const outputBox = document.querySelector("article section section");
+
+eval.style.display = "none";
+hide.style.display = "none";
+textarea.style.display = "none";
+
 Module.print = (text) => {
   outputBox.textContent += text + "\n";
 };
@@ -10,6 +18,31 @@ Module.printErr = (text) => {
   outputBox.textContent += text + "\n";
 };
 
+eval.addEventListener("click", (e) => {
+  const data = textarea.value.replace(/;.*?\n/g, ' ').replace(/#|.*?|#/mg, '').replace(/\n/mg, ' ');
+  Module.pending_lines.push(data);
+    let resolver = Module.pending_fgets.shift();
+    resolver(Module.pending_lines.shift());
+    textarea.value = '';
+    textarea.style.display = "none";
+    eval.style.display = "none";
+    upload.style.display = "block";
+    hide.style.display = "none";
+});
+
+upload.addEventListener("click", () => {
+  upload.style.display = "none";
+  textarea.style.display = "flex";
+  eval.style.display = "block";
+  hide.style.display = "block";
+});
+hide.addEventListener("click", () => {
+  textarea.style.display = "none";
+  upload.style.display = "block";
+  eval.style.display = "none";
+  hide.style.display = "none";
+});
+
 
 inputBox.addEventListener("keydown", (e) => {
   if (e.key === "Enter") {
@@ -17,8 +50,6 @@ e.preventDefault();
     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);
   }
   if (Module.pending_fgets.length > 0 && Module.pending_lines.length > 0) {
     let resolver = Module.pending_fgets.shift();

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

@@ -147,8 +147,29 @@ display: flex;
     flex-grow: 1;
 }
 
-article input:focus {
+article textarea {
+    font-family: monospace;
+    padding: 5px;
+    border: none;
+    background-color: #222;
+    field-sizing: content;
+    color: white;
+    display: flex;
+    margin: 1rem; 
+}
+
+article input:focus, article textarea:focus {
     outline: none;
+}
+
+button {
+    font-family: monospace;
+    border: 1px solid #222;
+    color: black;
+    background-color: lime;
+    padding: 4px;
+    margin: 0.5rem auto;
+    text-align: center;
 }
 
 pre {

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

@@ -12,6 +12,10 @@ <aside>
       <span>&gt;&nbsp;</span>
       <input type="text" autofocus />
     </aside>
+    <button id="upload">Upload Program</button>
+    <textarea rows="8"></textarea>
+    <button id="evaluate">Evaluate</button>
+    <button id="hide">Hide</button>
   </section>
 </article>
 <script src="/assets/hex.js"></script>