Convert rendering to jsx

2025-03-19 15:57:56 -04:00 · 2025-03-19 15:57:56 -04:00 · d1b632e83c
commit d1b632e83c
parent 0f72d048ee
25 changed files with 422 additions and 513 deletions
--- a/src/render/html/component/species.tsx
+++ b/src/render/html/component/species.tsx
@ -0,0 +1,91 @@
+import type { Playbill, Species } from "@proscenium/playbill";
+import { Section } from "./base/section";
+import { AbilityCard } from "./ability";
+import { HTML } from "./base/html";
+
+interface SpeciesSectionProps {
+  species: Species;
+  playbill: Playbill;
+}
+
+export function SpeciesSection({ species, playbill }: SpeciesSectionProps) {
+  const hpString = species.hp >= 0 ? `+${species.hp}` : `-${species.hp}`;
+  const apString = species.ap >= 0 ? `+${species.ap}` : `-${species.ap}`;
+  const epString = species.ep >= 0 ? `+${species.ep}` : `-${species.ep}`;
+
+  const hasAbilities = species.abilities.length > 0;
+
+  const abilitySection = hasAbilities
+    ? (<div className="species-abilities">
+      <h3>Innate Abilities</h3>
+      {species.abilities.map((abilityId) => {
+        return <AbilityCard ability={playbill.abilities[abilityId]} key={abilityId} />;
+      })}
+    </div>)
+    : "";
+
+  const sectionContent = <>
+    <div className="species-stats">
+
+      <div className="species-stat-hp">
+        <h4 className="hp species-stat-hp-title" title="Health Points">HP</h4>
+        <p className="species-stat-hp-value">{hpString}</p>
+      </div>
+
+      <div className="species-stat-ap">
+        <h4 className="ap species-stat-ap-title" title="Action Points">AP</h4>
+        <p className="species-stat-ap-value">{apString}</p>
+      </div>
+
+      <div className="species-stat-ep">
+        <h4 className="ep species-stat-ep-title" title="Exhaustion Points">EP</h4>
+        <p className="species-stat-ep-value">{epString}</p>
+      </div>
+
+    </div >
+
+    <div className="species-talents">
+
+      <div className="species-talent-muscle">
+        <h4 className="species-talent-muscle-title muscle">Muscle</h4>
+        <p className={`species-talent-muscle-value ${species.muscle}`}>{species.muscle}</p>
+      </div>
+
+      <div className="species-talent-focus">
+        <h4 className="species-talent-focus-title focus">Focus</h4>
+        <p className={`species-talent-focus-value ${species.focus}`}>{species.focus}</p>
+      </div>
+
+      <div className="species-talent-knowledge">
+        <h4 className="species-talent-knowledge-title knowledge">Knowledge</h4>
+        <p className={`species-talent-knowledge-value ${species.knowledge}`}>{species.knowledge}</p>
+      </div>
+
+      <div className="species-talent-charm">
+        <h4 className="species-talent-charm-title charm">Charm</h4>
+        <p className={`species-talent-charm-value ${species.charm}`}>{species.charm}</p>
+      </div>
+
+      <div className="species-talent-cunning">
+        <h4 className="species-talent-cunning-title cunning">Cunning</h4>
+        <p className={`species-talent-cunning-value ${species.cunning}`}>{species.cunning}</p>
+      </div>
+
+      <div className="species-talent-spark">
+        <h4 className="species-talent-spark-title spark">Spark</h4>
+        <p className={`species-talent-spark-value ${species.spark}`}>{species.spark}</p>
+      </div>
+
+    </div>
+    <HTML className="species-content" html={species.description} />
+    {abilitySection}
+  </>
+
+  return <Section
+    type="species"
+    componentId={species.id}
+    title={species.name}
+    info={<p>Species</p>}
+  >{sectionContent}</Section>
+
+}