Trigger actions from button event handlers

src/3x5.ts

@@ -1,6 +1,6 @@
 import { Button, RegisterButtonOnClick } from './lib/button';
 import { Card, CardVm, GetField } from './lib/card';
-import { Here, RegisterJumpHere } from './lib/debug';
+import { ALL as Debug, RegisterJumpHere } from './lib/debug';
 import { Expr } from './lib/expr';
 import { ALL as HTML } from './lib/html';
 import { parse } from './parser';
@@ -111,7 +111,7 @@ const COMMANDS = {
   ...HTML,
   get: GetField,
   expr: Expr,
-  here: Here,
+  ...Debug,
   button: Button,
 };
 
@@ -154,14 +154,11 @@ function triggerEvent(handlerPos: number) {
 
   const script = parse(theCard.code);
 
-  let html = "";
   if (script[0]) {
     runNoctl(vm, script[1], (word) => {});
   } else {
-    vm.output = script[1];
+    console.debug(script[1]);
   }
-  html = vm.output;
-  console.debug(html);
 
   state.textContent = JSON.stringify(theCard, null, 2);
 }

src/lib/button.ts

@@ -1,5 +1,6 @@
-import { Proc } from '../vm';
-import { AsHtml, ProcResult, SourcePos, TextPiece } from '../words';
+import { parse } from '../parser';
+import { Proc, runNoctl } from '../vm';
+import { AsHtml, AsText, ProcResult, SourcePos, TextPiece } from '../words';
 import { CardContext } from './card';
 import { getOptRaw } from './options';
 
@@ -11,6 +12,22 @@ export const Button: Proc<CardContext> = (vm, argv: TextPiece[]): ProcResult =>
       let buttonTrigger = "disabled";
       if (onClick && "pos" in onClick && onClick.pos != undefined) {
         buttonTrigger = `data-notcl-button="${onClick.pos}"`;
+
+        if (vm.mode[0] == "findingAction" && vm.mode[1] == onClick.pos) {
+          // handle event!
+          const script = parse(AsText(onClick));
+
+          if (script[0]) {
+            vm.mode = ["action"];
+            const result = runNoctl(vm, script[1], (word) =>
+              console.debug(word)
+            );
+            vm.mode = ["findingAction", onClick.pos];
+            return result;
+          } else {
+            return { error: script[1] };
+          }
+        }
       }
 
       return {

src/lib/debug.ts

@@ -29,3 +29,21 @@ export function RegisterJumpHere(textarea: HTMLTextAreaElement) {
     { passive: true }
   );
 }
+
+export function Alert(vm: CardVm, argv: TextPiece[]): ProcResult {
+  return getOpt(argv, { $min: 1, $max: 1 }, ({}, message) => {
+    if (vm.mode[0] == "action") {
+      alert(message);
+      return { text: message };
+    } else {
+      return {
+        error: "alert: You can only call alert inside an event handler",
+      };
+    }
+  });
+}
+
+export const ALL = {
+  here: Here,
+  alert: Alert,
+};