add web-component, and use docs/ for gh-pages

notnullgames · Jul 10, 2024 · bb8f9a9 · bb8f9a9
1 parent b662f84
commit bb8f9a9
Show file tree

Hide file tree

Showing 18 changed files with 99 additions and 61 deletions.
diff --git a/docs/cart/colorbars.null0 b/docs/cart/colorbars.null0
diff --git a/docs/cart/draw.null0 b/docs/cart/draw.null0
diff --git a/docs/cart/filesystem.null0 b/docs/cart/filesystem.null0
diff --git a/docs/cart/flappybird.null0 b/docs/cart/flappybird.null0
diff --git a/docs/cart/hello.null0 b/docs/cart/hello.null0
diff --git a/docs/cart/input.null0 b/docs/cart/input.null0
diff --git a/docs/cart/justlog.null0 b/docs/cart/justlog.null0
diff --git a/docs/cart/sound.null0 b/docs/cart/sound.null0
diff --git a/docs/cart/tracker.null0 b/docs/cart/tracker.null0
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,39 @@
+<html>
+  <head>
+    <title>Null0</title>
+
+<style>
+  body {
+    margin: auto;
+    margin-top: 20px;
+    width: 1024px;
+    background: black;
+    color: white;
+    font-family: sans-serif;
+  }
+  null0-cart {
+    margin: 10px;
+  }
+</style>
+
+<script type="module">
+import './null0_wc.js'
+
+// here is how to do it without the web-component
+// import { setupCart } from './null0.js'
+// const cart = await setupCart('cart/input.null0')
+</script>
+
+  </head>
+  <body> 
+    <p>Here are some example carts:</p>
+
+    <null0-cart src="cart/input.null0"></null0-cart>
+    <null0-cart src="cart/colorbars.null0"></null0-cart>
+    <null0-cart src="cart/draw.null0"></null0-cart>
+    <!-- <null0-cart src="cart/filesystem.null0"></null0-cart> -->
+    <!-- <null0-cart src="cart/flappybird.null0"></null0-cart> -->
+    <null0-cart src="cart/hello.null0"></null0-cart>
+    <!-- <null0-cart src="cart/justlog.null0"></null0-cart> -->
+  </body> 
+</html>
diff --git a/web/null0.js → docs/null0.js b/web/null0.js → docs/null0.js
@@ -1,4 +1,4 @@
-import loadCart from '@null0/wasm'
+import loadCart from './wasm/null0.mjs'
 import wireCartToHost from './null0_wasm.js'
 
 export const Buttons = {
@@ -16,6 +16,7 @@ export const Buttons = {
   RIGHT: 2
 }
 
+// get just the null0 wasm-host (emscripten)
 export async function getHost (cartUrl, canvas = document.body.appendChild(document.createElement('canvas'))) {
   const cartname = cartUrl.split('/').pop().split('.')[0]
 
@@ -27,9 +28,24 @@ export async function getHost (cartUrl, canvas = document.body.appendChild(docum
     // for some reason it strips off .null0
     arguments: [`/${cartname}`]
   })
+
+  // read a file from inside the cart
+  host.readCartFile = (filename) => {
+    const filenamePtr = host._malloc(filename.length + 1)
+    host.stringToUTF8(filename, filenamePtr, filename.length + 1)
+    const bytesHostPtr = host._malloc(4)
+    const retPtr = host._null0_file_read(filenamePtr, bytesHostPtr)
+    const r = host.HEAPU8.slice(retPtr, retPtr + host.HEAPU32[bytesHostPtr / 4])
+    host._free(bytesHostPtr)
+    host._free(filenamePtr)
+    host._free(retPtr)
+    return r
+  }
+
   return host
 }
 
+// setup a cart with engine
 export async function setupCart (url, canvas = document.body.appendChild(document.createElement('canvas'))) {
   const host = await getHost(url, canvas)
   const out = { host }
@@ -85,20 +101,7 @@ export async function setupCart (url, canvas = document.body.appendChild(documen
     }
   }
 
-  // read a file from loaded cart
-  function getCartFile(filename) {
-    const filenamePtr = host._malloc(filename.length + 1)
-    host.stringToUTF8(filename, filenamePtr, filename.length + 1)
-    const bytesHostPtr = host._malloc(4)
-    const retPtr = host._null0_file_read(filenamePtr, bytesHostPtr)
-    const r = host.HEAPU8.slice(retPtr, retPtr + host.HEAPU32[bytesHostPtr / 4])
-    host._free(bytesHostPtr)
-    host._free(filenamePtr)
-    host._free(retPtr)
-    return r
-  }
-
-  const wasmBytes = getCartFile('main.wasm')
+  const wasmBytes = host.readCartFile('main.wasm')
   const cartMod = await WebAssembly.compile(wasmBytes)
   const { exports } = await WebAssembly.instantiate(cartMod, imports)
 

diff --git a/web/null0_wasm.js → docs/null0_wasm.js b/web/null0_wasm.js → docs/null0_wasm.js
diff --git a/docs/null0_wc.js b/docs/null0_wc.js
@@ -0,0 +1,24 @@
+// this will setup the web-component
+
+import setupCart from './null0.js'
+
+export default class Null0WebComponent extends HTMLElement {
+  constructor() {
+    super()
+    this.shadow = this.attachShadow({ mode: 'open' })
+    this.canvas = document.createElement('canvas')
+    this.shadow.appendChild(this.canvas)
+
+    if (!this.attributes?.src?.value) {
+      throw new Error('src attribute is required, and should point to your cart URL.')
+    }
+    setupCart(this.attributes.src.value, this.canvas).then(({host, cart}) => {
+      this.host = host
+      this.cart = cart
+    })
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  window.customElements.define('null0-cart', Null0WebComponent)
+})
diff --git a/docs/wasm/null0.mjs b/docs/wasm/null0.mjs
diff --git a/docs/wasm/null0.wasm b/docs/wasm/null0.wasm
diff --git a/package.json b/package.json
@@ -9,10 +9,10 @@
     "gen:wamr": "node tools/gen_wamr.js",
     "gen:funcs": "node tools/gen_funcs.js",
     "gen:web": "node tools/gen_web.js",
-    "start": "npm run build:web && npm run build:carts && live-server --mount=/wasm:./wbuild/host --mount=/cart:./build/cart/c web",
+    "start": "npm run build:web && npm run build:carts && live-server docs",
     "build:carts": "cmake -GNinja -B build -DHOST=0 -DTESTS=0 -DCARTS=1 && cmake --build build",
     "build:host": "cmake -GNinja -B build -DHOST=1 -DTESTS=0 -DCARTS=0 && cmake --build build",
-    "build:web": "emcmake cmake -DHOST=1 -DTESTS=0 -DCARTS=0 -GNinja -B wbuild && cmake --build wbuild"
+    "build:web": "emcmake cmake -DHOST=1 -DTESTS=0 -DCARTS=0 -GNinja -B wbuild && cmake --build wbuild && mkdir -p docs/wasm docs/cart && cp wbuild/host/null0.* docs/wasm && cp build/cart/c/*.null0 docs/cart"
   },
   "keywords": [],
   "author": "David Konsumer <[email protected]>",

diff --git a/tools/gen_web.js b/tools/gen_web.js
@@ -83,4 +83,4 @@ for (const cat of Object.values(api)) {
 out.push(funcs.map(f => `    ${f}`).join(',\n'))
 out.push(`  }\n}`)
 
-await writeFile('web/null0_wasm.js', out.join('\n'))
+await writeFile('docs/null0_wasm.js', out.join('\n'))
diff --git a/web/index.html b/web/index.html