@agot/card-preview 1.0.0

package/dist/index.js

@@ -0,0 +1,740 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/cardComponents.tsx
+var import_classnames2 = __toESM(require("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
+var import_react = require("react");
+
+// src/utils.ts
+var px = (value) => `${value}px`;
+var em = (value) => `${value}em`;
+
+// src/components/autoSize.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AutoSize = ({ children, className, style, height, rate = 0.01, minimum = 0.4 }) => {
+  const contentRef = (0, import_react.useRef)(null);
+  const dependencies = Array.isArray(children) ? children : [children];
+  const elements = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react.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__ */ (0, import_jsx_runtime.jsx)("div", { ref: contentRef, className, style: { ...style, height: px(height) }, children });
+};
+var autoSize_default = AutoSize;
+
+// src/components/cardComponents.tsx
+var import_react2 = require("react");
+
+// ../client/src/components/thronesIcon.tsx
+var import_classnames = __toESM(require("classnames"), 1);
+
+// ../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
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ThronesIcon = ({ name, className, style, visible = true }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: (0, import_classnames.default)("font-thronesdb leading-none", { invisible: !visible, "leading-relaxed": name === "unique" }, className), style, children: thronesIcons[name] });
+};
+var thronesIcon_default = ThronesIcon;
+
+// src/components/cardComponents.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var defaultOrientation = (type) => type === "plot" ? "horizontal" : "vertical";
+var Card = (0, import_react2.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 = (0, import_react2.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__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className: (0, import_classnames2.default)(className, classGroups?.wrapper),
+      style: {
+        overflow: "hidden",
+        width: px(wrapperWidth * scale),
+        height: px(wrapperHeight * scale),
+        ...rounded && { borderRadius: px(12) },
+        ...style,
+        ...styleGroups?.wrapper
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          className: classGroups?.inner,
+          style: {
+            width: px(innerWidth),
+            height: px(innerHeight),
+            borderWidth: px(12),
+            ...innerStyle
+          },
+          children
+        }
+      )
+    }
+  );
+});
+var Type = (0, import_react2.memo)(({ children: type, className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: { position: "relative", top: px(-5), left: px(2), fontSize: px(8), ...style }, children: type });
+});
+var Cost = (0, import_react2.memo)(({ children, className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    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 = (0, import_react2.memo)(({ children: icons = [], className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: {
+    display: "flex",
+    flexDirection: "column",
+    flexGrow: 1,
+    ...style
+  }, children: challengeIcons.map(
+    (icon) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: {
+      display: "flex",
+      flexDirection: "column",
+      flexGrow: 1,
+      justifyContent: "center",
+      alignItems: "center"
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      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 = (0, import_react2.memo)(({ children: loyal, className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: px(35),
+        height: px(15),
+        fontSize: px(10),
+        ...style
+      },
+      children: loyal && "Loyal"
+    }
+  );
+});
+var Strength = (0, import_react2.memo)(({ children: strength, className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    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 = (0, import_react2.memo)(({ unique, height, children: name, className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(thronesIcon_default, { name: "unique" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: name })
+      ]
+    }
+  );
+});
+var Faction = (0, import_react2.memo)(({ children: faction, className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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__ */ (0, import_jsx_runtime3.jsx)(thronesIcon_default, { name: faction })
+    }
+  );
+});
+var Traits = (0, import_react2.memo)(({ children: traits = [], className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "div",
+    {
+      className,
+      style: {
+        fontStyle: "italic",
+        fontWeight: "700",
+        textAlign: "center",
+        height: px(16),
+        fontSize: px(12),
+        ...style
+      },
+      children: traits.map((trait) => `${trait}.`).join(" ")
+    }
+  );
+});
+var TextBox = (0, import_react2.memo)(({ children, className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("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 = (0, import_react2.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__ */ (0, import_jsx_runtime3.jsx)("span", { children }, key);
+          case "b":
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("b", { style: { fontWeight: "700" }, children }, key);
+          case "i":
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", { style: { fontStyle: "italic", fontWeight: "700" }, children }, key);
+          case "ul":
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { style: { listStyleType: "disc", marginBlockStart: em(0.25), marginBlockEnd: em(0.25), paddingInlineStart: em(2) }, children }, key);
+          case "li":
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { style: { paddingTop: em(0.1), paddingBottom: em(0.1) }, children }, key);
+          case "icon":
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(thronesIcon_default, { name: el.getAttribute("name") }, key);
+          case "plotmodifiers":
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", flexGrow: 1, justifyContent: "center", alignItems: "center", gap: em(0.25) }, children }, key);
+          case "plotmodifier":
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlotModifier, { type: el.getAttribute("name"), modifier: el.getAttribute("modifier"), inline: true, children: parseInt(children[0]) }, key);
+          default:
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children }, key);
+        }
+      }
+      return null;
+    };
+    return body ? Array.from(body.childNodes).map((node, i) => transformNode(node, i)) : [];
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: { display: "flex", flexDirection: "column", flexGrow: 1, gap: em(0.25), ...style }, children: text && convertToHtml(text) });
+});
+var Designer = (0, import_react2.memo)(({ children: designer, className, style }) => {
+  return designer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, style: { flexGrow: 1, fontWeight: "700", fontSize: px(11), paddingTop: em(0.5), ...style }, children: designer });
+});
+var PlotModifier = (0, import_react2.memo)(({ className, style, type, modifier, children: value }) => {
+  const actualValue = `${modifier}${value}`;
+  return value && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlotStat, { className, style, type, children: actualValue });
+});
+var PlotStat = (0, import_react2.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__ */ (0, import_jsx_runtime3.jsx)(
+    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 = (0, import_react2.memo)(({ type, alignment = "left", children: limit, className, style }) => {
+  if (!type || limit === DefaultDeckLimit[type]) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    "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 = (0, import_react2.memo)(({ children: watermark, className, style }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)("span", { children: watermark?.top }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: px(36), lineHeight: 1 }, children: watermark?.middle }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: watermark?.bottom })
+      ]
+    }
+  );
+});
+
+// src/cardtypes/character.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Character = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexGrow: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", position: "relative", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Cost, { children: card.cost }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Type, { children: "Character" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChallengeIcons, { children: Object.entries(card.icons || {}).filter(([, value]) => value).map(([icon]) => icon) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Watermark, { children: card.watermark }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", justifyContent: "flex-end" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DeckLimit, { type: card.type, style: { flexGrow: 1 }, alignment: "right", children: card.deckLimit }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Loyalty, { children: card.loyal })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Strength, { children: card.strength }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime4.jsx)(Faction, { children: card.faction })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(TextBox, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Traits, { children: card.traits }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(autoSize_default, { height: 95, style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Ability, { children: card.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Designer, { children: card.designer })
+      ] })
+    ] })
+  ] });
+};
+var character_default = Character;
+
+// src/cardtypes/location.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Location = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "row" } }, style, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", display: "flex", flexDirection: "column", width: px(35) }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Cost, { children: card.cost }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Type, { children: "Location" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(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__ */ (0, import_jsx_runtime5.jsx)(Faction, { children: card.faction }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Loyalty, { children: card.loyal })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1, justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", display: "flex", flexDirection: "column", flexGrow: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DeckLimit, { type: card.type, style: { position: "absolute", alignSelf: "self-end", height: "100%" }, alignment: "right", children: card.deckLimit }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Watermark, { children: card.watermark })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(TextBox, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Traits, { children: card.traits }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(autoSize_default, { height: 130, style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Ability, { children: card.text }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Designer, { children: card.designer })
+        ] })
+      ] })
+    ] })
+  ] });
+};
+var location_default = Location;
+
+// src/cardtypes/attachment.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Attachment = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexGrow: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Cost, { children: card.cost }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Type, { children: "Attachment" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DeckLimit, { type: card.type, style: { flexGrow: 1 }, children: card.deckLimit })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Watermark, { style: { marginRight: px(35) }, children: card.watermark })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { position: "relative", display: "flex", flexDirection: "column", alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(TextBox, { style: { width: "100%", paddingBottom: px(10) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Traits, { children: card.traits }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(autoSize_default, { height: 90, style: { display: "flex", flexDirection: "column" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Ability, { children: card.text }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Designer, { children: card.designer })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loyalty, { style: { position: "absolute", bottom: px(0) }, children: card.loyal })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: { display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Name, { unique: card.unique, style: {
+        flexGrow: 1,
+        borderTopWidth: px(2),
+        borderBottomWidth: px(2),
+        borderLeftWidth: px(2)
+      }, children: card.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Faction, { children: card.faction })
+    ] })
+  ] });
+};
+var attachment_default = Attachment;
+
+// src/cardtypes/event.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Event = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexGrow: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Cost, { children: card.cost }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Type, { children: "Event" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DeckLimit, { type: card.type, style: { flexGrow: 1 }, children: card.deckLimit })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", flexGrow: 1 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Name, { style: {
+          borderTopWidth: px(2),
+          borderBottomWidth: px(2),
+          borderLeftWidth: px(2)
+        }, children: card.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Watermark, { style: { flexGrow: 1 }, children: card.watermark })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Faction, { children: card.faction }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Loyalty, { children: card.loyal })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(TextBox, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Traits, { children: card.traits }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(autoSize_default, { height: 130, style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Ability, { children: card.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Designer, { children: card.designer })
+      ] })
+    ] })
+  ] });
+};
+var event_default = Event;
+
+// src/cardtypes/plot.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Plot = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Card, { scale, card, orientation, rounded, className, style, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "row", alignItems: "center", height: px(40) }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: px(4), width: px(110) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlotStat, { type: "income", children: card.plotStats?.income }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlotStat, { type: "initiative", children: card.plotStats?.initiative }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlotStat, { type: "claim", children: card.plotStats?.claim })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Name, { style: { display: "flex", flexGrow: 1, fontSize: px(18) }, children: card.name })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexGrow: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", width: px(35) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Type, { children: "Plot" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DeckLimit, { type: card.type, style: { flexGrow: 1 }, children: card.deckLimit })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Watermark, { children: card.watermark }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", width: px(35), paddingRight: px(5) }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Faction, { style: { borderColor: "transparent" }, children: card.faction }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Loyalty, { children: card.loyal }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PlotStat, { type: "reserve", children: card.plotStats?.reserve })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(TextBox, { style: { paddingBottom: px(0) }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Traits, { children: card.traits }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(autoSize_default, { height: 60, style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Ability, { children: card.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Designer, { children: card.designer })
+      ] })
+    ] })
+  ] });
+};
+var plot_default = Plot;
+
+// src/cardtypes/agenda.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Agenda = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Card, { scale, card, orientation, rounded, className, styles: { inner: { display: "flex", flexDirection: "column" } }, style, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Name, { children: card.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Type, { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: "Agenda" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { style: { flexGrow: 1, position: "relative", display: "flex" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DeckLimit, { type: card.type, style: { position: "absolute", height: "100%" }, children: card.deckLimit }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Watermark, { children: card.watermark })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(TextBox, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Traits, { children: card.traits }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(autoSize_default, { height: 130, style: { display: "flex", flexDirection: "column" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Ability, { children: card.text }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Designer, { children: card.designer })
+      ] })
+    ] })
+  ] });
+};
+var agenda_default = Agenda;
+
+// src/index.tsx
+var import_react3 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CardPreview = ({ card, scale, orientation, rounded, className, style, ...props }) => {
+  const CardComponent = (0, import_react3.useMemo)(() => {
+    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__ */ (0, import_jsx_runtime10.jsx)(CardComponent, { card, scale, orientation, rounded, className, style, ...props });
+};
+var index_default = CardPreview;