Multiple copies of the emulator on a page

2023-01-28 22:29:37 -06:00
parent c825e6d727
commit 7e969f1469
4 changed files with 57 additions and 16 deletions
@@ -1,6 +1,7 @@
 require('esbuild').build({
    entryPoints: ['src/app.js', 'src/snippet_emulator_demo.jsx'],
    bundle: true,
+    minify: true,
    outdir: 'build',
    format: 'esm',
    loader: {
@@ -1,13 +1,24 @@
 body {
    display: grid;
-    grid-template-columns: 1fr auto 1fr;
+    grid-template-columns: 1fr 50% 1fr;
    grid-template-rows: 2em auto;
    background: #777777;
 }
-.react-root {
+
+.main {
    grid-area: 2 / 2 / 3 / 3;
 }

+.main .snippet {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: 1fr auto 1fr;
+}
+
+.snippet .snippetEmulator {
+    grid-area: 1 / 2 / 2 / 3;
+}
+
 .snippetEmulator {
    display: grid;
    grid-template-rows: 10em 1em 1em 2em;
@@ -8,6 +8,40 @@
    <script type="module" src="snippet_emulator_demo.js"></script>
 </head>
 <body>
-    <div class="react-root"></div>
+<div class="main">
+    <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu diam orci. Aliquam quis pharetra erat.
+        Nullam nec erat vehicula, consectetur est in, iaculis nisl. Vestibulum nec dignissim purus, nec pharetra neque.
+        Quisque tristique diam et purus sagittis, posuere pharetra orci egestas. Praesent imperdiet sapien vel fermentum
+        pulvinar. Nulla ac tortor laoreet, fringilla tellus nec, ullamcorper mi.
+    </p>
+    <div class="snippet">
+        <pre>
+        .org 0x400
+        push 0
+        blah: add 1
+        jmp $-1
+        hlt
+        </pre>
+    </div>
+    <p>
+        Nulla ullamcorper dui lacus. Vivamus sagittis elit non tellus sodales, tempus bibendum magna dapibus. Aliquam
+        erat volutpat. Aliquam erat volutpat. Proin finibus nibh quis neque accumsan, porttitor convallis leo elementum.
+        Mauris semper mi nulla, in cursus felis faucibus non. Vestibulum suscipit, ante eget porta vulputate, lacus ex
+        sodales quam, faucibus tincidunt augue dui ac velit. Etiam ultricies ligula eu est accumsan, eget lobortis massa
+        fermentum. Quisque mattis bibendum tortor quis porttitor. In lobortis diam a diam tincidunt, eu viverra odio
+        volutpat. Suspendisse sed elit mattis, pretium nunc et, ullamcorper mauris. Vivamus mattis tellus at magna
+        congue laoreet. Pellentesque varius porttitor sem, in consectetur libero auctor nec.
+    </p>
+    <div class="snippet">
+        <pre>
+        .org 0x400
+        push 4
+        add 3
+        mul 2
+        hlt
+        </pre>
+    </div>
+</div>
 </body>
 </html>
@@ -1,17 +1,12 @@
 import { createRoot } from 'react-dom/client'
-import React from "react";
-import SnippetEmulator from "./snippet_emulator";
+import React from 'react'
+import SnippetEmulator from './snippet_emulator'
 import init, { WasmCPU, assemble_snippet } from '../pkg/vweb.js'

-init().then(async () => {
-    createRoot(document.getElementsByClassName('react-root')[0])
-        .render(
-            <SnippetEmulator>
-                {`.org 0x400
-                push 2
-                add 3
-                mul 4
-                hlt`}
-            </SnippetEmulator>
-        )
+document.addEventListener('DOMContentLoaded', () => {
+    init().then(() => {
+        document.querySelectorAll('.snippet').forEach((el) => {
+            createRoot(el).render(React.createElement(SnippetEmulator, { children: el.innerText }))
+        })
+    })
 })