Use new playbill updates

src/render/html/component/glossary.tsx

@@ -1,15 +1,15 @@
 import { Section } from "./base/section";
 
 interface GlossaryTableProps {
-  glossary: Record<string, string[]>;
+  terms: [string, string[]][];
 }
 
-export function GlossaryTable({ glossary }: GlossaryTableProps) {
+export function GlossaryTable({ terms }: GlossaryTableProps) {
   return (
     <Section type="glossary" componentId="glossary" title="Glossary">
       <div className="glossary-content">
         <dl>
-          {Object.entries(glossary).map(([term, defs]) => {
+          {terms.map(([term, defs]) => {
             return (
               <div key={term}>
                 <dt>{term}</dt>

src/render/html/component/method.tsx

@@ -17,7 +17,12 @@ export function MethodSection({ method, playbill }: MethodSectionProps) {
         <h3>Rank {i + 1}</h3>
         <div className="method-rank-content" style={{ gridTemplateColumns }}>
           {rank.map((abilityId) => {
-            const ability = playbill.abilities[abilityId];
+            const ability = playbill.getAbility(abilityId);
+
+            if (ability === null) {
+              throw new Error(`Ability not found: ${abilityId}`);
+            }
+
             return <AbilityCard ability={ability} key={abilityId} />;
           })}
         </div>

src/render/html/index.tsx

@@ -1,5 +1,4 @@
 import { Playbill } from "@proscenium/playbill";
-import sortBy from "lodash-es/sortBy";
 import { compileMarkdownInPlaybill, type BoundPlaybill } from "#lib";
 import { GlossaryTable } from "./component/glossary";
 import { PageHeader } from "./component/header";
@@ -19,9 +18,6 @@ export async function renderPlaybillToHTML(
   const playbill = Playbill.fromSerialized(boundPlaybill.playbill.serialize());
   await compileMarkdownInPlaybill(boundPlaybill);
 
-  // Soprt rules by their order prop
-  const rulesByOrder = sortBy(Object.values(playbill.rules), "order");
-
   // Prepare stylesheet
   const cssParts: string[] = [];
 
@@ -38,7 +34,7 @@ export async function renderPlaybillToHTML(
   const body = renderToString(
     <>
       <article id="species" className="view">
-        {Object.values(playbill.species).map((species) => (
+        {playbill.allSpecies.map((species) => (
           <SpeciesSection
             key={species.id}
             species={species}
@@ -48,29 +44,29 @@ export async function renderPlaybillToHTML(
       </article>
 
       <article id="methods" className="view" style={{ display: "none" }}>
-        {Object.values(playbill.methods).map((method) => (
+        {playbill.allMethods.map((method) => (
           <MethodSection key={method.id} method={method} playbill={playbill} />
         ))}
       </article>
 
       <article id="items" className="view" style={{ display: "none" }}>
-        {Object.values(playbill.items).map((item) => (
+        {playbill.allItems.map((item) => (
           <ItemCard key={item.id} item={item} />
         ))}
       </article>
 
       <article id="rules" className="view" style={{ display: "none" }}>
-        {rulesByOrder.map((rule) => (
+        {playbill.allRules.map((rule) => (
           <RuleSection key={rule.id} rule={rule} />
         ))}
       </article>
 
       <article id="glossary" className="view" style={{ display: "none" }}>
-        {<GlossaryTable glossary={playbill.glossary} />}
+        {<GlossaryTable terms={playbill.allDefinitions} />}
       </article>
 
       <article id="resources" className="view" style={{ display: "none" }}>
-        {Object.values(playbill.resources).map((resource) => (
+        {playbill.allResources.map((resource) => (
           <ResourceSection key={resource.id} resource={resource} />
         ))}
       </article>