Render button

src/3x5.ts

@@ -1,3 +1,4 @@
+import { Button } from './lib/button';
 import { Card, CardVm, GetField } from './lib/card';
 import { Here, RegisterJumpHere } from './lib/debug';
 import { Expr } from './lib/expr';
@@ -121,7 +122,13 @@ function render() {
 
   const vm: CardVm = {
     mode: "render",
-    commands: { ...HTML, get: GetField, expr: Expr, here: Here },
+    commands: {
+      ...HTML,
+      get: GetField,
+      expr: Expr,
+      here: Here,
+      button: Button,
+    },
     output: "",
     card: theCard,
   };

src/lib/button.ts

@@ -0,0 +1,11 @@
+import { Proc } from '../vm';
+import { AsHtml, ProcResult, TextPiece } from '../words';
+import { CardContext } from './card';
+import { getOptRaw } from './options';
+
+export const Button: Proc<CardContext> = (vm, argv: TextPiece[]): ProcResult =>
+  getOptRaw(argv, { $min: 1, $max: 1 }, (_opts, [label]) => {
+    return {
+      html: `<button>${AsHtml(label)}</button>`,
+    };
+  });

src/lib/card.ts

@@ -1,6 +1,6 @@
-import { Vm } from "../vm";
-import { ProcResult, TextPiece } from "../words";
-import { getOpt } from "./options";
+import { Vm } from '../vm';
+import { ProcResult, TextPiece } from '../words';
+import { getOpt } from './options';
 
 /**
  * Basic unit of information, also an "actor" in the programming system
@@ -14,9 +14,11 @@ export type Card = {
   code: string;
 };
 
-export type CardVm = Vm<{
+export type CardContext = {
   card: Card;
-}>;
+};
+
+export type CardVm = Vm<CardContext>;
 
 export function GetField(vm: CardVm, argv: TextPiece[]): ProcResult {
   return getOpt(argv, { $min: 1, $max: 1 }, ({}, fieldName) => ({