Stub out reacting to a button click

This commit is contained in:
Tangent 2023-11-20 21:13:56 -05:00
parent 48c07e792d
commit d5a7033adc
3 changed files with 77 additions and 29 deletions

View file

@ -1,4 +1,4 @@
import { Button } from './lib/button';
import { Button, RegisterButtonOnClick } from './lib/button';
import { Card, CardVm, GetField } from './lib/card';
import { Here, RegisterJumpHere } from './lib/debug';
import { Expr } from './lib/expr';
@ -30,21 +30,6 @@ function parseFields(card: Card, fields: string) {
}
}
/**
* @param state VM state
* @param code Script to run
* @returns Markup to render / output
*/
function renderCard(state: CardVm, code: string) {
const script = parse(code);
if (script[0]) {
runNoctl(state, script[1], (word) => (state.output += AsHtml(word) + "\n"));
} else {
state.output = script[1];
}
return state.output;
}
/**
* Global state: a single card
*/
@ -69,6 +54,12 @@ const codeInput = document.createElement("textarea");
Object.assign(codeInput.style, TEXTAREA_STYLE, { height: "20em" });
codeInput.value = String.raw`
h1 [get title]
button disabled
button "Hello" -onClick {
alert Hiya
}
para [2 + 2]
block {
This is a paragraph of text, with one [b bold] word. Yes, this means there has to be some magic in text processing... <b>this</b> won't work.
@ -116,29 +107,65 @@ const state = document.createElement("pre");
const display = document.createElement("blockquote");
const debugDisplay = document.createElement("pre");
const COMMANDS = {
...HTML,
get: GetField,
expr: Expr,
here: Here,
button: Button,
};
function render() {
parseFields(theCard, fieldInput.value);
theCard.code = codeInput.value;
const vm: CardVm = {
mode: "render",
commands: {
...HTML,
get: GetField,
expr: Expr,
here: Here,
button: Button,
},
mode: ["render"],
commands: COMMANDS,
output: "",
card: theCard,
};
const html = renderCard(vm, theCard.code);
const script = parse(theCard.code);
let html = "";
if (script[0]) {
runNoctl(vm, script[1], (word) => (vm.output += AsHtml(word) + "\n"));
} else {
vm.output = script[1];
}
html = vm.output;
state.textContent = JSON.stringify(theCard, null, 2);
display.innerHTML = html;
debugDisplay.textContent = html;
}
function triggerEvent(handlerPos: number) {
parseFields(theCard, fieldInput.value);
theCard.code = codeInput.value;
const vm: CardVm = {
mode: ["findingAction", handlerPos],
commands: COMMANDS,
output: "",
card: theCard,
};
const script = parse(theCard.code);
let html = "";
if (script[0]) {
runNoctl(vm, script[1], (word) => {});
} else {
vm.output = script[1];
}
html = vm.output;
console.debug(html);
state.textContent = JSON.stringify(theCard, null, 2);
}
render();
document.body.append(
fieldInput,
@ -150,3 +177,4 @@ document.body.append(
);
RegisterJumpHere(codeInput);
RegisterButtonOnClick(triggerEvent);