diff --git a/vweb/build.sh b/vweb/build.sh index 2826551..fe24bf7 100755 --- a/vweb/build.sh +++ b/vweb/build.sh @@ -2,4 +2,4 @@ wasm-pack build --target web npm run bundle -cp pkg/vweb_bg.wasm src/index.html src/snippet_emulator_demo.html src/basics.html build +cp pkg/vweb_bg.wasm src/index.html src/snippet_emulator_demo.html src/basics.html src/forge_editor_demo.html src/simulator.css build diff --git a/vweb/esbuild.js b/vweb/esbuild.js index 2f408e8..56eb73f 100644 --- a/vweb/esbuild.js +++ b/vweb/esbuild.js @@ -1,5 +1,5 @@ require('esbuild').build({ - entryPoints: ['src/app.js', 'src/snippet_emulator_demo.jsx'], + entryPoints: ['src/app.js', 'src/snippet_emulator_demo.jsx', 'src/forge_editor_demo.jsx'], bundle: true, minify: true, outdir: 'build', diff --git a/vweb/src/forge_editor_demo.html b/vweb/src/forge_editor_demo.html new file mode 100644 index 0000000..8e36059 --- /dev/null +++ b/vweb/src/forge_editor_demo.html @@ -0,0 +1,22 @@ + + + + + Forge Editor Demo + + + + +
+ 
+        fn main() {
+          var n = 0;
+          while (n < 40 * 30) {
+            asm(72, n + 0x10000) { store }
+            n = n + 1;
+          }
+        }
+
+
+ + \ No newline at end of file diff --git a/vweb/src/forge_editor_demo.jsx b/vweb/src/forge_editor_demo.jsx new file mode 100644 index 0000000..fac2041 --- /dev/null +++ b/vweb/src/forge_editor_demo.jsx @@ -0,0 +1,11 @@ +import { createRoot } from 'react-dom/client' +import React from 'react' +import ForgeSimulator from './forge_simulator' +import init, { WasmCPU, assemble_snippet } from '../pkg/vweb.js' + +document.addEventListener('DOMContentLoaded', () => { + init().then(() => { + const root = document.querySelector('.simulator') + createRoot(root).render(React.createElement(ForgeSimulator, { src: root.innerText })) + }) +}) \ No newline at end of file diff --git a/vweb/src/simulator.css b/vweb/src/simulator.css new file mode 100644 index 0000000..dd75cdc --- /dev/null +++ b/vweb/src/simulator.css @@ -0,0 +1,82 @@ +/* Basic night-mode and mono styling */ +body { + background-color: #333333; + color: #dddddd; + font-family: monospace; +} +a { color: #cccccc; } + +/* The simulator container itself, with the grid */ +.simulator { + display: grid; + grid-template: + "tab" 1em + "btns" 1em + "content" 1fr + "status" 1em / 1fr; + row-gap: 0.3em; +} + +/* Setting where things go in the grid */ +.tabbar { grid-area: tab } +.buttons { grid-area: btns } +.content { grid-area: content } +.status { grid-area: status } + +/* Make the content fill the remainder of the screen */ +.content { + height: calc(100vh - 5em); + width: 100%; + overflow: auto; +} + +/* Some styling to the 
s in the content */
+.content pre {
+    margin: 0;
+}
+
+/* Make the textarea look presentable (TODO: replace with CodeMirror) */
+.content textarea {
+    height: 100%;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    background: #000000;
+    color: #a0a0a0;
+    border: none;
+    resize: none;
+    outline: none;
+}
+
+.forge-editor textarea:focus {
+    border: none;
+    outline: none;
+}
+
+/* Status, btns, tabs all look right */
+.status, .buttons, .tabbar { font-weight: bold; }
+.tabbar a, .buttons a { cursor: pointer; }
+
+/* Make the display the right size by centering the canvas in a rectangle*/
+.display {
+    height: 100%;
+    display: grid;
+    grid-template:
+        "lt top rt" 1fr
+        "lt screen rt" calc(480px + 4em)
+        "lt btm rt" 1fr / 1fr calc(640px + 4em) 1fr;
+}
+
+/* The beige monitor border around the screen */
+.display { background-color: #0f0f0f }
+.display canvas {
+    grid-area: screen;
+    border: 2em solid #bb9;
+    border-radius: 2em;
+}
+
+/* Colors of tabs and buttons */
+.tabbar a.active { background-color: #686868; }
+.buttons .run { color: #66bb66 }
+.buttons .stop { color: #bb6666 }
+.buttons .build { color: #aaaaff; }
\ No newline at end of file