91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
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>
|
|
|
|
}
|