cohost/html/dialogue.tsx
2023-07-09 13:21:24 -04:00

50 lines
1.2 KiB
TypeScript

import { Html, render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";
type DOption = [Html, Dialogue];
type Dialogue = Html | [Html, ...DOption[]];
function not_empty<T>(arr: T[]): arr is [T, ...T[]] {
return arr.length > 0;
}
function reify_dialogue(d: Dialogue): Html {
if (!Array.isArray(d)) return d;
const [r, ...rest] = d;
if (rest.length == 0) {
return r;
} else {
return (
<div class="dialogue">
{r}
{...rest.map(([r, d]) => {
return (
<details>
<summary class="option">{r}</summary>
<div class="response">{reify_dialogue(d)}</div>
</details>
);
})}
</div>
);
}
}
const rd = reify_dialogue([
"Hi!",
["Hello!", "How are you!"],
[
"Bye",
[
":(",
["Sorry", <span class="blue">:D</span>],
["Not sorry", <span class="red">D:</span>],
],
],
]);
console.log(rd);
console.log(render(rd));
console.log(render(rd, "mini"));