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

Added forge emulator demo as a new page

Browse Source
This commit is contained in:
Ross Andrews
2024-04-27 23:55:41 -05:00
parent bce314cd9c
commit c7bf9fe1ec
5 changed files with 117 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vweb/build.sh
+1 -1
View File
@@ -2,4 +2,4 @@
wasm-pack build --target web wasm-pack build --target web
npm run bundle 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
vweb/esbuild.js
+1 -1
View File
@@ -1,5 +1,5 @@
require('esbuild').build({ 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, bundle: true,
minify: true, minify: true,
outdir: 'build', outdir: 'build',
vweb/src/forge_editor_demo.html
+22
View File
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forge Editor Demo</title>
<link rel="stylesheet" href="simulator.css"/>
<script type="module" src="forge_editor_demo.js"></script>
</head>
<body>
<div class="simulator">
<pre>
fn main() {
var n = 0;
while (n < 40 * 30) {
asm(72, n + 0x10000) { store }
n = n + 1;
}
}
</pre>
</div>
</body>
</html>
vweb/src/forge_editor_demo.jsx
+11
View File
@@ -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 }))
})
})
vweb/src/simulator.css
+82
View File
@@ -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 <pre>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; }