From 0114209320e58754137b27cc45c44cb235ac4675 Mon Sep 17 00:00:00 2001
From: Tangent Wantwight <tangent128@gmail.com>
Date: Mon, 20 Nov 2023 18:55:46 -0500
Subject: [PATCH] Render button

---
 src/3x5.ts        |  9 ++++++++-
 src/lib/button.ts | 11 +++++++++++
 src/lib/card.ts   | 12 +++++++-----
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/button.ts

diff --git a/src/3x5.ts b/src/3x5.ts
index 4c28943..620aa63 100644
--- a/src/3x5.ts
+++ b/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,
   };
diff --git a/src/lib/button.ts b/src/lib/button.ts
new file mode 100644
index 0000000..92c8514
--- /dev/null
+++ b/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>`,
+    };
+  });
diff --git a/src/lib/card.ts b/src/lib/card.ts
index 553596d..71d2c1c 100644
--- a/src/lib/card.ts
+++ b/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) => ({