randrews/vulcan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Multiple copies of the emulator on a page

Browse Source
This commit is contained in:
Ross Andrews
2023-01-28 22:29:37 -06:00
parent c825e6d727
commit 7e969f1469
4 changed files with 57 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vweb/esbuild.js
+1
View File
@@ -1,6 +1,7 @@
require('esbuild').build({ require('esbuild').build({
entryPoints: ['src/app.js', 'src/snippet_emulator_demo.jsx'], entryPoints: ['src/app.js', 'src/snippet_emulator_demo.jsx'],
bundle: true, bundle: true,
minify: true,
outdir: 'build', outdir: 'build',
format: 'esm', format: 'esm',
loader: { loader: {
vweb/src/snippet_emulator.css
+13 -2
View File
@@ -1,13 +1,24 @@
body { body {
display: grid; display: grid;
grid-template-columns: 1fr auto 1fr; grid-template-columns: 1fr 50% 1fr;
grid-template-rows: 2em auto; grid-template-rows: 2em auto;
background: #777777; background: #777777;
} }
.react-root {
.main {
grid-area: 2 / 2 / 3 / 3; 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 { .snippetEmulator {
display: grid; display: grid;
grid-template-rows: 10em 1em 1em 2em; grid-template-rows: 10em 1em 1em 2em;
vweb/src/snippet_emulator_demo.html
+35 -1
View File
@@ -8,6 +8,40 @@
<script type="module" src="snippet_emulator_demo.js"></script> <script type="module" src="snippet_emulator_demo.js"></script>
</head> </head>
<body> <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> </body>
</html> </html>
vweb/src/snippet_emulator_demo.jsx
+8 -13
View File
@@ -1,17 +1,12 @@
import { createRoot } from 'react-dom/client' import { createRoot } from 'react-dom/client'
import React from "react"; import React from 'react'
import SnippetEmulator from "./snippet_emulator"; import SnippetEmulator from './snippet_emulator'
import init, { WasmCPU, assemble_snippet } from '../pkg/vweb.js' import init, { WasmCPU, assemble_snippet } from '../pkg/vweb.js'
init().then(async () => { document.addEventListener('DOMContentLoaded', () => {
createRoot(document.getElementsByClassName('react-root')[0]) init().then(() => {
.render( document.querySelectorAll('.snippet').forEach((el) => {
<SnippetEmulator> createRoot(el).render(React.createElement(SnippetEmulator, { children: el.innerText }))
{`.org 0x400 })
push 2 })
add 3
mul 4
hlt`}
</SnippetEmulator>
)
}) })