@agot/card-preview 1.0.0

package/dist/index.mjs

@@ -0,0 +1,707 @@
+// src/components/cardComponents.tsx
+import classNames2 from "classnames";
+
+// ../common/models/cards.ts
+var challengeIcons = ["military", "intrigue", "power"];
+var DefaultDeckLimit = /* @__PURE__ */ ((DefaultDeckLimit2) => {
+  DefaultDeckLimit2[DefaultDeckLimit2["character"] = 3] = "character";
+  DefaultDeckLimit2[DefaultDeckLimit2["attachment"] = 3] = "attachment";
+  DefaultDeckLimit2[DefaultDeckLimit2["location"] = 3] = "location";
+  DefaultDeckLimit2[DefaultDeckLimit2["event"] = 3] = "event";
+  DefaultDeckLimit2[DefaultDeckLimit2["plot"] = 2] = "plot";
+  DefaultDeckLimit2[DefaultDeckLimit2["agenda"] = 1] = "agenda";
+  return DefaultDeckLimit2;
+})(DefaultDeckLimit || {});
+
+// src/components/autoSize.tsx
+import { useEffect, useRef } from "react";
+
+// src/utils.ts
+var px = (value) => `${value}px`;
+var em = (value) => `${value}em`;
+
+// src/components/autoSize.tsx
+import { jsx } from "react/jsx-runtime";
+var AutoSize = ({ children, className, style, height, rate = 0.01, minimum = 0.4 }) => {
+  const contentRef = useRef(null);
+  const dependencies = Array.isArray(children) ? children : [children];
+  const elements = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) {
+      return;
+    }
+    let multiplier = 1;
+    const baseSizes = elements.current;
+    for (const [element, baseSize] of [...baseSizes.entries()]) {
+      element.style.fontSize = px(baseSize);
+      baseSizes.delete(element);
+    }
+    const shrink = (el) => {
+      if (el.style.fontSize) {
+        if (!baseSizes.has(el)) {
+          const currentSize = parseFloat(el.style.fontSize);
+          baseSizes.set(el, currentSize);
+        }
+        const baseSize = baseSizes.get(el);
+        el.style.fontSize = px(baseSize * multiplier);
+      }
+      for (const child of el.children) {
+        if (child.nodeType === Node.ELEMENT_NODE) {
+          shrink(child);
+        }
+      }
+    };
+    const isOverflowing = () => content.scrollWidth > content.clientWidth || content.scrollHeight > content.clientHeight;
+    while (multiplier > minimum && isOverflowing()) {
+      content.style.fontSize = content.style.fontSize || window.getComputedStyle(content).fontSize;
+      multiplier -= rate;
+      shrink(content);
+    }
+  }, [...dependencies, minimum, rate]);
+  return /* @__PURE__ */ jsx("div", { ref: contentRef, className, style: { ...style, height: px(height) }, children });
+};
+var autoSize_default = AutoSize;
+
+// src/components/cardComponents.tsx
+import { memo, useMemo } from "react";
+
+// ../client/src/components/thronesIcon.tsx
+import classNames from "classnames";
+
+// ../common/utils.ts
+var thronesColors = {
+  "baratheon": "#e3d852",
+  "greyjoy": "#1d7a99",
+  "lannister": "#c00106",
+  "martell": "#e89521",
+  "thenightswatch": "#7a7a7a",
+  "stark": "#cfcfcf",
+  "targaryen": "#1c1c1c",
+  "tyrell": "#509f16",
+  "neutral": "#a99560",
+  "income": "#ffd240",
+  "initiative": "#bb9570",
+  "claim": "#afafaf",
+  "reserve": "#f0623f"
+};
+var abilityIcons = {
+  military: "\uE605",
+  intrigue: "\uE602",
+  power: "\uE607",
+  baratheon: "\uE600",
+  greyjoy: "\uE601",
+  lannister: "\uE603",
+  martell: "\uE604",
+  thenightswatch: "\uE606",
+  stark: "\uE608",
+  targaryen: "\uE609",
+  tyrell: "\uE60A"
+};
+var thronesIcons = {
+  ...abilityIcons,
+  neutral: "\uE612",
+  unique: "\uE60B",
+  character: "\uE60F",
+  location: "\uE60E",
+  attachment: "\uE60D",
+  event: "\uE610",
+  plot: "\uE60C",
+  agenda: "\uE611"
+};
+
+// ../client/src/components/thronesIcon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ThronesIcon = ({ name, className, style, visible = true }) => {
+  return /* @__PURE__ */ jsx2("span", { className: classNames("font-thronesdb leading-none", { invisible: !visible, "leading-relaxed": name === "unique" }, className), style, children: thronesIcons[name] });
+};
+var thronesIcon_default = ThronesIcon;
+
+// src/components/cardComponents.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var defaultOrientation = (type) => type === "plot" ? "horizontal" : "vertical";
+var Card = memo(({ children, card, orientation = defaultOrientation(card.type), scale = 1, rounded = true, className, classNames: classGroups, style, styles: styleGroups, ...props }) => {
+  const width = 240;
+  const height = 333;
+  const wrapperWidth = orientation === "horizontal" ? height : width;
+  const wrapperHeight = orientation === "horizontal" ? width : height;
+  const innerWidth = card.type === "plot" ? height : width;
+  const innerHeight = card.type === "plot" ? width : height;
+  const rotate = orientation !== defaultOrientation(card.type);
+  const innerStyle = useMemo(() => {
+    const style2 = {
+      borderColor: card.faction ? thronesColors[card.faction] : "white",
+      background: "white",
+      color: "black",
+      fontFamily: "Open Sans, sans-serif",
+      ...scale !== 1 && { scale },
+      ...(scale !== 1 || rotate) && { transformOrigin: "top left" },
+      ...rotate && { position: "relative", rotate: "270deg", top: "100%" },
+      ...styleGroups?.inner
+    };
+    return style2;
+  }, [card.faction, rotate, scale, styleGroups?.inner]);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: classNames2(className, classGroups?.wrapper),
+      style: {
+        overflow: "hidden",
+        width: px(wrapperWidth * scale),
+        height: px(wrapperHeight * scale),
+        ...rounded && { borderRadius: px(12) },
+        ...style,
+        ...styleGroups?.wrapper
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: classGroups?.inner,
+          style: {
+            width: px(innerWidth),
+            height: px(innerHeight),
+            borderWidth: px(12),
+            ...innerStyle
+          },
+          children
+        }
+      )
+    }
+  );
+});
+var Type = memo(({ children: type, className, style }) => {
+  return /* @__PURE__ */ jsx3("div", { className, style: { position: "relative", top: px(-5), left: px(2), fontSize: px(8), ...style }, children: type });
+});
+var Cost = memo(({ children, className, style }) => {
+  return /* @__PURE__ */ jsx3(
+    autoSize_default,
+    {
+      height: 35,
+      className,
+      style: {
+        top: px(-7.5),
+        left: px(-7.5),
+        width: px(35),
+        lineHeight: px(30),
+        fontSize: px(24),
+        borderWidth: px(2),
+        position: "relative",
+        borderRadius: "100%",
+        borderColor: "black",
+        borderStyle: "solid",
+        background: "white",
+        textAlign: "center",
+        ...style
+      },
+      children
+    }
+  );
+});
+var ChallengeIcons = memo(({ children: icons = [], className, style }) => {
+  return /* @__PURE__ */ jsx3("div", { className, style: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    ...style
+  }, children: challengeIcons.map(
+    (icon) => /* @__PURE__ */ jsx3("span", { style: {
+      display: "flex",
+      flexDirection: "column",
+      flexGrow: 1,
+      justifyContent: "center",
+      alignItems: "center"
+    }, children: /* @__PURE__ */ jsx3(
+      thronesIcon_default,
+      {
+        name: icon,
+        style: {
+          height: "calc(1/3 * 100%)",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          fontSize: px(20)
+        },
+        visible: icons.includes(icon)
+      }
+    ) }, icon)
+  ) });
+});
+var Loyalty = memo(({ children: loyal, className, style }) => {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: px(35),
+        height: px(15),
+        fontSize: px(10),
+        ...style
+      },
+      children: loyal && "Loyal"
+    }
+  );
+});
+var Strength = memo(({ children: strength, className, style }) => {
+  return /* @__PURE__ */ jsx3(
+    autoSize_default,
+    {
+      height: 35,
+      className,
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "cneter",
+        boxSizing: "border-box",
+        backgroundColor: "#e5e7eb",
+        borderColor: "black",
+        borderWidth: px(2),
+        width: px(35),
+        fontSize: px(22),
+        ...style
+      },
+      children: strength
+    }
+  );
+});
+var Name = memo(({ unique, height, children: name, className, style }) => {
+  return /* @__PURE__ */ jsxs(
+    autoSize_default,
+    {
+      height: height ?? 35,
+      className,
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        fontSize: px(14),
+        paddingLeft: px(2),
+        paddingRight: px(2),
+        gap: px(2),
+        ...style
+      },
+      children: [
+        unique && /* @__PURE__ */ jsx3(thronesIcon_default, { name: "unique" }),
+        /* @__PURE__ */ jsx3("span", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: name })
+      ]
+    }
+  );
+});
+var Faction = memo(({ children: faction, className, style }) => {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSizing: "border-box",
+        borderColor: "black",
+        width: px(35),
+        height: px(35),
+        fontSize: px(22),
+        borderWidth: px(2),
+        ...style
+      },
+      children: faction && /* @__PURE__ */ jsx3(thronesIcon_default, { name: faction })
+    }
+  );
+});
+var Traits = memo(({ children: traits = [], className, style }) => {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className,
+      style: {
+        fontStyle: "italic",
+        fontWeight: "700",
+        textAlign: "center",
+        height: px(16),
+        fontSize: px(12),
+        ...style
+      },
+      children: traits.map((trait) => `${trait}.`).join(" ")
+    }
+  );
+});
+var TextBox = memo(({ children, className, style }) => {
+  return /* @__PURE__ */ jsx3("div", { className, style: {
+    display: "flex",
+    flexDirection: "column",
+    fontFamily: "Crimson Text, serif",
+    fontSize: px(12),
+    lineHeight: 1.1,
+    padding: `${px(5)} ${px(10)}`,
+    ...style
+  }, children });
+});
+var Ability = memo(({ children: text, className, style }) => {
+  const convertToHtml = (htmlString) => {
+    const raw = htmlString.replace(/(?<=\n?)([^\n]+)(?=\n?)/g, "<p>$1</p>").replace(/\[([^\]]+)\]/g, '<icon name="$1"></icon>').replace(/<p>((?:\s*[+-]\d+ (?:Income|Initiative|Claim|Reserve)\.?\s*)+)<\/p>/gi, "<plotModifiers>$1</plotModifiers>").replace(/\s*([+-])(\d+) (Income|Initiative|Claim|Reserve)\.?\s*/gi, (_, modifier, value, plotStat) => `<plotModifier name="${plotStat.toLowerCase()}" modifier="${modifier}">${value}</plotModifier>`).replace(/((?:<p>-.*<\/p>\s*)+)/g, "<ul>$1</ul>").replace(/<p>-\s*(.*?)<\/p>/g, "<li>$1</li>").replace(/\n/g, "");
+    const parser = new DOMParser();
+    const body = parser.parseFromString(raw, "text/html").body;
+    const transformNode = (node, key) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        return node.textContent;
+      }
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const el = node;
+        const children = Array.from(el.childNodes).map((child, i) => transformNode(child, i));
+        switch (el.tagName.toLowerCase()) {
+          case "p":
+            return /* @__PURE__ */ jsx3("span", { children }, key);
+          case "b":
+            return /* @__PURE__ */ jsx3("b", { style: { fontWeight: "700" }, children }, key);
+          case "i":
+            return /* @__PURE__ */ jsx3("i", { style: { fontStyle: "italic", fontWeight: "700" }, children }, key);
+          case "ul":
+            return /* @__PURE__ */ jsx3("ul", { style: { listStyleType: "disc", marginBlockStart: em(0.25), marginBlockEnd: em(0.25), paddingInlineStart: em(2) }, children }, key);
+          case "li":
+            return /* @__PURE__ */ jsx3("li", { style: { paddingTop: em(0.1), paddingBottom: em(0.1) }, children }, key);
+          case "icon":
+            return /* @__PURE__ */ jsx3(thronesIcon_default, { name: el.getAttribute("name") }, key);
+          case "plotmodifiers":
+            return /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexGrow: 1, justifyContent: "center", alignItems: "center", gap: em(0.25) }, children }, key);
+          case "plotmodifier":
+            return /* @__PURE__ */ jsx3(PlotModifier, { type: el.getAttribute("name"), modifier: el.getAttribute("modifier"), inline: true, children: parseInt(children[0]) }, key);
+          default:
+            return /* @__PURE__ */ jsx3("span", { children }, key);
+        }
+      }
+      return null;
+    };
+    return body ? Array.from(body.childNodes).map((node, i) => transformNode(node, i)) : [];
+  };
+  return /* @__PURE__ */ jsx3("div", { className, style: { display: "flex", flexDirection: "column", flexGrow: 1, gap: em(0.25), ...style }, children: text && convertToHtml(text) });
+});
+var Designer = memo(({ children: designer, className, style }) => {
+  return designer && /* @__PURE__ */ jsx3("div", { className, style: { flexGrow: 1, fontWeight: "700", fontSize: px(11), paddingTop: em(0.5), ...style }, children: designer });
+});
+var PlotModifier = memo(({ className, style, type, modifier, children: value }) => {
+  const actualValue = `${modifier}${value}`;
+  return value && /* @__PURE__ */ jsx3(PlotStat, { className, style, type, children: actualValue });
+});
+var PlotStat = memo(({ className, style, type, children: value }) => {
+  const getClipPath = () => {
+    switch (type) {
+      case "income":
+        return "circle(50%)";
+      case "initiative":
+        return "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)";
+      case "claim":
+        return "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)";
+      case "reserve":
+        return "polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)";
+    }
+  };
+  const clipPath = getClipPath();
+  return /* @__PURE__ */ jsx3(
+    autoSize_default,
+    {
+      height: 30,
+      className,
+      style: {
+        backgroundColor: thronesColors[type],
+        position: "relative",
+        textAlign: "center",
+        fontFamily: "Open sans, sans-serif",
+        width: px(30),
+        lineHeight: 1.35,
+        padding: em(0.15),
+        fontSize: px(18),
+        clipPath,
+        ...style
+      },
+      children: value
+    }
+  );
+});
+var DeckLimit = memo(({ type, alignment = "left", children: limit, className, style }) => {
+  if (!type || limit === DefaultDeckLimit[type]) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className,
+      style: {
+        textAlign: "center",
+        ...alignment === "left" && { rotate: "180deg" },
+        fontSize: px(8),
+        padding: px(5),
+        writingMode: "vertical-rl",
+        ...style
+      },
+      children: limit && `Deck Limit: ${limit}`
+    }
+  );
+});
+var Watermark = memo(({ children: watermark, className, style }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        flexGrow: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        textAlign: "center",
+        color: "#e5e7eb",
+        fontWeight: "700",
+        fontSize: px(14),
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx3("span", { children: watermark?.top }),
+        /* @__PURE__ */ jsx3("span", { style: { fontSize: px(36), lineHeight: 1 }, children: watermark?.middle }),
+        /* @__PURE__ */ jsx3("span", { children: watermark?.bottom })
+      ]
+    }
+  );
+});
+
+// src/cardtypes/character.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var Character = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ jsxs2(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexGrow: 1 }, children: [
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", position: "relative", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ jsx4(Cost, { children: card.cost }),
+        /* @__PURE__ */ jsx4(Type, { children: "Character" }),
+        /* @__PURE__ */ jsx4(ChallengeIcons, { children: Object.entries(card.icons || {}).filter(([, value]) => value).map(([icon]) => icon) })
+      ] }),
+      /* @__PURE__ */ jsx4(Watermark, { children: card.watermark }),
+      /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end" }, children: [
+        /* @__PURE__ */ jsx4(DeckLimit, { type: card.type, style: { flexGrow: 1 }, alignment: "right", children: card.deckLimit }),
+        /* @__PURE__ */ jsx4(Loyalty, { children: card.loyal })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx4(Strength, { children: card.strength }),
+      /* @__PURE__ */ jsx4(Name, { unique: card.unique, style: {
+        alignSelf: "flex-end",
+        flexGrow: 1,
+        borderColor: "black",
+        fontSize: px(14),
+        lineHeight: "1.4",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: px(30),
+        borderTopWidth: px(2),
+        borderBottomWidth: px(2)
+      }, children: card.name }),
+      /* @__PURE__ */ jsx4(Faction, { children: card.faction })
+    ] }),
+    /* @__PURE__ */ jsxs2(TextBox, { children: [
+      /* @__PURE__ */ jsx4(Traits, { children: card.traits }),
+      /* @__PURE__ */ jsxs2(autoSize_default, { height: 95, style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsx4(Ability, { children: card.text }),
+        /* @__PURE__ */ jsx4(Designer, { children: card.designer })
+      ] })
+    ] })
+  ] });
+};
+var character_default = Character;
+
+// src/cardtypes/location.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var Location = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ jsxs3(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "row" } }, style, ...props, children: [
+    /* @__PURE__ */ jsxs3("div", { style: { position: "relative", display: "flex", flexDirection: "column", width: px(35) }, children: [
+      /* @__PURE__ */ jsx5(Cost, { children: card.cost }),
+      /* @__PURE__ */ jsx5(Type, { children: "Location" }),
+      /* @__PURE__ */ jsx5(Name, { unique: card.unique, height: 150, style: {
+        width: px(35),
+        borderBottomWidth: px(2),
+        borderLeftWidth: px(2),
+        borderRightWidth: px(2),
+        borderStyle: "solid",
+        borderColor: "black",
+        rotate: "180deg",
+        paddingTop: px(5),
+        paddingBottom: px(5),
+        writingMode: "vertical-lr"
+      }, children: card.name }),
+      /* @__PURE__ */ jsx5(Faction, { children: card.faction }),
+      /* @__PURE__ */ jsx5(Loyalty, { children: card.loyal })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsxs3("div", { style: { position: "relative", display: "flex", flexDirection: "column", flexGrow: 1 }, children: [
+        /* @__PURE__ */ jsx5(DeckLimit, { type: card.type, style: { position: "absolute", alignSelf: "self-end", height: "100%" }, alignment: "right", children: card.deckLimit }),
+        /* @__PURE__ */ jsx5(Watermark, { children: card.watermark })
+      ] }),
+      /* @__PURE__ */ jsxs3(TextBox, { children: [
+        /* @__PURE__ */ jsx5(Traits, { children: card.traits }),
+        /* @__PURE__ */ jsxs3(autoSize_default, { height: 130, style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx5(Ability, { children: card.text }),
+          /* @__PURE__ */ jsx5(Designer, { children: card.designer })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+var location_default = Location;
+
+// src/cardtypes/attachment.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var Attachment = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ jsxs4(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexGrow: 1 }, children: [
+      /* @__PURE__ */ jsxs4("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ jsx6(Cost, { children: card.cost }),
+        /* @__PURE__ */ jsx6(Type, { children: "Attachment" }),
+        /* @__PURE__ */ jsx6(DeckLimit, { type: card.type, style: { flexGrow: 1 }, children: card.deckLimit })
+      ] }),
+      /* @__PURE__ */ jsx6(Watermark, { style: { marginRight: px(35) }, children: card.watermark })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: { position: "relative", display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ jsxs4(TextBox, { style: { width: "100%", paddingBottom: px(10) }, children: [
+        /* @__PURE__ */ jsx6(Traits, { children: card.traits }),
+        /* @__PURE__ */ jsxs4(autoSize_default, { height: 90, style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ jsx6(Ability, { children: card.text }),
+          /* @__PURE__ */ jsx6(Designer, { children: card.designer })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx6(Loyalty, { style: { position: "absolute", bottom: px(0) }, children: card.loyal })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ jsx6(Name, { unique: card.unique, style: {
+        flexGrow: 1,
+        borderTopWidth: px(2),
+        borderBottomWidth: px(2),
+        borderLeftWidth: px(2)
+      }, children: card.name }),
+      /* @__PURE__ */ jsx6(Faction, { children: card.faction })
+    ] })
+  ] });
+};
+var attachment_default = Attachment;
+
+// src/cardtypes/event.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var Event = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ jsxs5(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
+    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexGrow: 1 }, children: [
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ jsx7(Cost, { children: card.cost }),
+        /* @__PURE__ */ jsx7(Type, { children: "Event" }),
+        /* @__PURE__ */ jsx7(DeckLimit, { type: card.type, style: { flexGrow: 1 }, children: card.deckLimit })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: [
+        /* @__PURE__ */ jsx7(Name, { style: {
+          borderTopWidth: px(2),
+          borderBottomWidth: px(2),
+          borderLeftWidth: px(2)
+        }, children: card.name }),
+        /* @__PURE__ */ jsx7(Watermark, { style: { flexGrow: 1 }, children: card.watermark })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ jsx7(Faction, { children: card.faction }),
+        /* @__PURE__ */ jsx7(Loyalty, { children: card.loyal })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5(TextBox, { children: [
+      /* @__PURE__ */ jsx7(Traits, { children: card.traits }),
+      /* @__PURE__ */ jsxs5(autoSize_default, { height: 130, style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsx7(Ability, { children: card.text }),
+        /* @__PURE__ */ jsx7(Designer, { children: card.designer })
+      ] })
+    ] })
+  ] });
+};
+var event_default = Event;
+
+// src/cardtypes/plot.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var Plot = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ jsxs6(Card, { scale, card, orientation, rounded, className, style, ...props, children: [
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", height: px(40) }, children: [
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: px(4), width: px(110) }, children: [
+        /* @__PURE__ */ jsx8(PlotStat, { type: "income", children: card.plotStats?.income }),
+        /* @__PURE__ */ jsx8(PlotStat, { type: "initiative", children: card.plotStats?.initiative }),
+        /* @__PURE__ */ jsx8(PlotStat, { type: "claim", children: card.plotStats?.claim })
+      ] }),
+      /* @__PURE__ */ jsx8(Name, { style: { display: "flex", flexGrow: 1, fontSize: px(18) }, children: card.name })
+    ] }),
+    /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexGrow: 1 }, children: [
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ jsx8(Type, { children: "Plot" }),
+        /* @__PURE__ */ jsx8(DeckLimit, { type: card.type, style: { flexGrow: 1 }, children: card.deckLimit })
+      ] }),
+      /* @__PURE__ */ jsx8(Watermark, { children: card.watermark }),
+      /* @__PURE__ */ jsxs6("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: px(35), paddingRight: px(5) }, children: [
+        /* @__PURE__ */ jsx8(Faction, { style: { borderColor: "transparent" }, children: card.faction }),
+        /* @__PURE__ */ jsx8(Loyalty, { children: card.loyal }),
+        /* @__PURE__ */ jsx8(PlotStat, { type: "reserve", children: card.plotStats?.reserve })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs6(TextBox, { style: { paddingBottom: px(0) }, children: [
+      /* @__PURE__ */ jsx8(Traits, { children: card.traits }),
+      /* @__PURE__ */ jsxs6(autoSize_default, { height: 60, style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsx8(Ability, { children: card.text }),
+        /* @__PURE__ */ jsx8(Designer, { children: card.designer })
+      ] })
+    ] })
+  ] });
+};
+var plot_default = Plot;
+
+// src/cardtypes/agenda.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var Agenda = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ jsxs7(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
+    /* @__PURE__ */ jsxs7("div", { children: [
+      /* @__PURE__ */ jsx9(Name, { children: card.name }),
+      /* @__PURE__ */ jsx9(Type, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: "Agenda" })
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { style: { flexGrow: 1, position: "relative", display: "flex" }, children: [
+      /* @__PURE__ */ jsx9(DeckLimit, { type: card.type, style: { position: "absolute", height: "100%" }, children: card.deckLimit }),
+      /* @__PURE__ */ jsx9(Watermark, { children: card.watermark })
+    ] }),
+    /* @__PURE__ */ jsxs7(TextBox, { children: [
+      /* @__PURE__ */ jsx9(Traits, { children: card.traits }),
+      /* @__PURE__ */ jsxs7(autoSize_default, { height: 130, style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ jsx9(Ability, { children: card.text }),
+        /* @__PURE__ */ jsx9(Designer, { children: card.designer })
+      ] })
+    ] })
+  ] });
+};
+var agenda_default = Agenda;
+
+// src/index.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var CardPreview = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  const CardComponent = useMemo2(() => {
+    switch (card.type) {
+      case "character":
+        return character_default;
+      case "location":
+        return location_default;
+      case "attachment":
+        return attachment_default;
+      case "event":
+        return event_default;
+      case "plot":
+        return plot_default;
+      case "agenda":
+        return agenda_default;
+      default:
+        return Card;
+    }
+  }, [card.type]);
+  return /* @__PURE__ */ jsx10(CardComponent, { card, scale, orientation, rounded, className, style, ...props });
+};
+var index_default = CardPreview;
+export {
+  index_default as default
+};