51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import type { Item } from "@proscenium/playbill";
|
|
import { capitalize } from "lodash-es";
|
|
import { html, renderMarkdown } from "#lib";
|
|
import { Section } from "./base/section";
|
|
|
|
export async function ItemCard(item: Item): Promise<string> {
|
|
const renderedMarkdown = await renderMarkdown(item.description);
|
|
|
|
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 affinity =
|
|
item.affinity !== "none"
|
|
? html`<p class="item-affinity ${item.affinity}">${item.affinity} Affinity</p>`
|
|
: "";
|
|
|
|
const damageType = item.damage?.type === "arc" ? "Arcane" : "Physical";
|
|
const damageAmount = item.damage?.amount ?? 0;
|
|
const damageRating =
|
|
damageAmount > 0
|
|
? html`<p class="item-damage ${damageType}">${damageAmount} ${damageType} Damage</p>`
|
|
: "";
|
|
|
|
const info = html`
|
|
<div class="item-info">
|
|
${affinity}
|
|
${damageRating}
|
|
</div>
|
|
`;
|
|
|
|
return Section({
|
|
type: "item",
|
|
componentId: item.id,
|
|
title: item.name,
|
|
content: renderedMarkdown,
|
|
info,
|
|
rightCornerTag: capitalize(item.rarity),
|
|
leftCornerTag: itemTypeDescriptor,
|
|
});
|
|
}
|