Tweaked snippet layout

vweb/src/emulator_display.jsx

@@ -11,9 +11,9 @@ export default function({}) {
     const blah = useRef(0)
 
     const drawFrame = useCallback(() => {
-        for(let n = 0; n < 160 * 120; n++) {
+        // for(let n = 0; n < 160 * 120; n++) {
-            cpu.current.poke(0x10000 + n, Math.random() * 256)
+        //     cpu.current.poke(0x10000 + n, n % 256 /* Math.random() * 256 */)
-        }
+        // }
         display.current.draw(cpu.current, ctx.current)
         request.current = requestAnimationFrame(drawFrame)
     }, [])

vweb/src/lib.rs

@@ -178,8 +178,6 @@ impl Display {
     pub fn draw(&mut self, cpu: &WasmCPU, ctx: &CanvasRenderingContext2d) -> Result<(), JsValue> {
         display::draw(&cpu.0, self.0.as_mut());
         let image_data = ImageData::new_with_u8_clamped_array(Clamped(self.0.as_mut()), 640)?;
-        ctx.put_image_data(&image_data, 0.0, 0.0);
+        ctx.put_image_data(&image_data, 0.0, 0.0)
-        Ok(())
-
     }
 }

vweb/src/snippet_emulator.jsx

@@ -1,9 +1,9 @@
 import './snippet_emulator.css'
-import React, { useState, useCallback, useEffect } from 'react'
+import React, {useState, useCallback, useEffect, useMemo} from 'react'
 import { WasmCPU, assemble_snippet, source_map } from '../pkg/vweb.js'
 import HighlightedLine, { indent } from './highlighted_line'
 
-export default function({ children, width = 20 }) {
+export default function({ children, width = 80 }) {
     // Use this by giving it some source as a body:
     // <SnippetEmulator>
     //   {`.org 0x400
@@ -15,6 +15,7 @@ export default function({ children, width = 20 }) {
         throw 'Expects a single text node as a child'
     }
 
+    const initialLines = useMemo(() => React.Children.toArray(children)[0].split('\n').length, [children])
     const [editing, setEditing] = useState(false) // Whether we're editing the snippet or running it
     const [src, setSrc] = useState('') // The source code currently set
     const [message, setMessage] = useState('') // A status / error message
@@ -96,8 +97,8 @@ export default function({ children, width = 20 }) {
 
     if (editing) {
         return (
-            <div className='snippetEmulator' style={{ gridTemplateColumns: `${width}em` }}>
+            <div className='snippetEmulator'>
-                <textarea value={src} onChange={onChangeSrc}></textarea>
+                <textarea value={src} onChange={onChangeSrc} rows={initialLines}></textarea>
                 <div className='message'>{message}</div>
                 <div className='buttons'>
                     <a className='build' onClick={() => { rebuild(src) && setEditing(false) }}>[Build]</a>
@@ -106,7 +107,7 @@ export default function({ children, width = 20 }) {
         )
     } else {
         return (
-            <div className='snippetEmulator' style={{ gridTemplateColumns: `${width}em` }}>
+            <div className='snippetEmulator'>
                 <SourceDisplay src={src} activeLine={activeLine}/>
                 <div className='message'>{message}</div>
                 <div className='buttons'>

vweb/src/snippet_emulator_demo.html

@@ -19,12 +19,20 @@
     <div class="snippet" data-width="30">
         <pre>
 .org 0x400
-            push 0 ; A comment
+push 1
-        blah:
+loop:
+dup
+loadw sum
+add
+storew sum
 add 1
-            jmp $-1
+dup
+lt 101
+brnz @loop
+pop
+loadw sum
 hlt
-        .db "A string; \"semicolon-y\"\0"
+sum: .db 0
         </pre>
     </div>
     <p>
@@ -39,10 +47,12 @@
     <div class="snippet">
         <pre>
         .org 0x400
-        push 4
+            push 0 ; A comment
-        add 3
+        blah:
-        mul 2
+            add 1
+            jmp $-1
             hlt
+        .db "A string; \"semicolon-y\"\0"
         </pre>
     </div>
 </div>