Playbill: ${playbill.name}

import type { Playbill } from "@proscenium/playbill"; import sortBy from "lodash-es/sortBy"; import { html } from "#lib"; import { GlossaryTable } from "./component/glossary"; import { PageHeader } from "./component/header"; import { ItemCard } from "./component/item"; import { MethodSection } from "./component/method"; import { ResourceSection } from "./component/resource"; import { RuleSection } from "./component/rule"; import { SpeciesSection } from "./component/species"; interface HTMLRenderOptions { styles?: string; } export async function renderPlaybillToHTML( playbill: Playbill, opts: HTMLRenderOptions = {}, ): Promise { // Render various resources const resources = ( await Promise.all(Object.values(playbill.resources).map(ResourceSection)) ).join("\n"); const methods = ( await Promise.all( Object.values(playbill.methods).map((method) => { return MethodSection(method, playbill); }), ) ).join("\n"); const species = ( await Promise.all( Object.values(playbill.species).map((species) => { return SpeciesSection(species, playbill); }), ) ).join("\n"); const items = ( await Promise.all( Object.values(playbill.items).map((item) => { return ItemCard(item); }), ) ).join("\n"); const rulesByOrder = sortBy(Object.values(playbill.rules), "order"); const rules = (await Promise.all(rulesByOrder.map(RuleSection))).join("\n"); const glossaryHTML = await GlossaryTable(playbill.glossary); // Prepare stylesheet const css = opts.styles ? html`` : ""; // Main document const doc = html` Playbill: ${playbill.name} ${css} ${await PageHeader(playbill)}

${playbill.description}

${species}

${methods}

${items}

${rules}

${glossaryHTML}

${resources}

`; return doc; }