js cleanup, output formatting

diff --git a/forth.js b/forth.js
index 27804d0..eb25ced 100644 (file)
--- a/forth.js
+++ b/forth.js
@@ -12,8 +12,8 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>. */
 'use strict'
 const initialize = Promise.all([
-  fetch('forth.forth').then((re) => re.text()),
-  fetch('forth.wasm').then(re => re.arrayBuffer())
+  fetch('forth.forth', {credentials: 'include', headers:{'content-type':'text/plain'}}).then((re) => re.text()),
+  fetch('forth.wasm', {credentials: 'include', headers:{'content-type':'application/wasm'}}).then(re => re.arrayBuffer())
 ])
 window.onload = () => {
   const simstack = []
@@ -22,13 +22,13 @@ window.onload = () => {
   let forthdiv = document.getElementById("forth")
   if (forthdiv === null) {
     forthdiv = document.createElement("div")
-    forthdiv.setAttribute("style","height:100%;margin:auto;width:80%;")
+    forthdiv.setAttribute("style","height:100%;margin:auto;width:100%;overflow-x:hidden;")
     document.body.appendChild(forthdiv)
   }
   const outframe = document.createElement("div")
-  outframe.setAttribute("style", "background-color:black;padding-left:6px;padding-right:6px;color:chartreuse;height:256px;resize:vertical;display:flex;align-items:flex-end;")
+  outframe.setAttribute("style", "background-color:black;padding-left:6px;padding-right:6px;color:chartreuse;height:256px;resize:vertical;display:flex;align-items:flex-end;flex-flow:row")
   const stackview = document.createElement("pre")
-  stackview.setAttribute("style", "white-space:pre-wrap;flex:0 1 8%;")
+  stackview.setAttribute("style", "white-space:pre-wrap;flex:0 0 8%;")
   outframe.appendChild(stackview)
   const txtoutput = document.createElement("pre")
   txtoutput.setAttribute("style", "white-space:pre-wrap;overflow-y:scroll;flex:1 0 342px;")
@@ -37,13 +37,14 @@ window.onload = () => {
   rstackview.setAttribute("style", "white-space:pre-wrap;flex:0 1 8%;")
   outframe.appendChild(rstackview)
   const memview = document.createElement("pre")
-  memview.setAttribute("style", "white-space:pre-wrap;flex:0 0 356px;")
+  memview.setAttribute("style", "white-space:pre-wrap;flex:0 0 8%;")
   outframe.appendChild(memview)
   const txtinput = document.createElement("textarea")
   txtinput.setAttribute("autofocus", "true")
-  txtinput.setAttribute("rows", "1")
-  txtinput.setAttribute("style", "white-space:pre;margin-left:8%;width:60%;")
-  txtinput.oninput = () => txtinput.rows = (txtinput.value.match(/[\n]/g) || [1]).length;
+  txtinput.setAttribute("wrap", "hard")
+  txtinput.setAttribute("style", "resize:none;white-space:pre;margin-left:8%;width:60%;")
+  txtinput.oninput = () => txtinput.rows = (txtinput.value.match(/[\n]/g) || [1]).length + 1;
+  txtinput.oninput()
   forthdiv.appendChild(outframe)
   forthdiv.appendChild(txtinput)
   let wasmMem
@@ -55,18 +56,16 @@ window.onload = () => {
     stackview.textContent = simstack.join('\n')
     rstackview.textContent = rstack.join('\n')
     let cnt = 0;
-    const maxBytes = 256
+    const maxBytes = 12
     let here = new DataView(wasmMem.buffer, 14340 /* here */, 4).getUint32(0,true)
     memview.textContent = Array.from(new Uint8Array(wasmMem.buffer, here - maxBytes, maxBytes), (v) => {
       cnt++;
       v = ('0' + (v & 0xFF).toString(16)).slice(-2)
       if (cnt === maxBytes)
         return v
-      if ((cnt % 16) === 0)
-        return v + '\n'
       if ((cnt % 4) === 0)
-        return v + ', '
-      return v + ' '
+        return v + '\n==\n'
+      return v + '\n'
     }).join('')
     outframe.scrollTop = outframe.scrollHeight
   }
@@ -76,7 +75,12 @@ window.onload = () => {
     switch (event.key) {
     case "Enter":
       if (event.ctrlKey) {
-        txtinput.value += '\n'
+        const endPos = txtinput.selectionStart + 1
+        txtinput.value =
+          txtinput.value.substring(0, txtinput.selectionStart) +
+          '\n' +
+          txtinput.value.substring(txtinput.selectionEnd, txtinput.value.length)
+        txtinput.setSelectionRange(endPos, endPos)
         txtinput.oninput()
       }
       else {