endeavorance/muse
1
Fork 0
Code Issues Pull requests Releases Packages 1 Activity

Convert rendering to jsx

Browse source
This commit is contained in:
Endeavorance 2025-03-19 15:57:56 -04:00
parent 0f72d048ee
commit d1b632e83c
25 changed files with 422 additions and 513 deletions
Download patch file Download diff file Expand all files Collapse all files

53
src/render/html/component/item.tsx Normal file
View file

@ -0,0 +1,53 @@
import type { Item } from "@proscenium/playbill";
import { capitalize } from "lodash-es";
import { Section } from "./base/section";
import { HTML } from "./base/html";
interface ItemSectionProps {
item: Item;
}
export function ItemCard({ item }: ItemSectionProps) {
let itemTypeDescriptor = "";
switch (item.type) {
case "wielded":
itemTypeDescriptor = `Wielded (${item.hands} ${item.hands === 1 ? "Hand" : "Hands"})`;
break;
case "worn":
itemTypeDescriptor = `Worn (${item.slot})`;
break;
case "trinket":
itemTypeDescriptor = "Trinket";
break;
}
const infoParts: React.ReactNode[] = [];
if (item.affinity !== "none") {
infoParts.push(
<p key="affinity" className={`item-affinity ${item.affinity}`}>
{item.affinity} Affinity
</p>
);
}
if (item.damage !== null && item.damage.amount > 0) {
infoParts.push(
<p key="damage" className={`item-damage ${item.damage.type}`}>
{item.damage.amount} {capitalize(item.damage.type)} Damage
</p>
);
}
return <Section
type="item"
componentId={item.id}
title={item.name}
info={<div className="item-info">{infoParts}</div>}
rightCornerTag={capitalize(item.rarity)}
leftCornerTag={itemTypeDescriptor}
>
<HTML html={item.description} />
</Section>
}