New source found from dndbeyond.com

2026-07-08 01:00:09 -07:00
parent 9a983a6d7b
commit dcefa0d2f2
2865 changed files with 222467 additions and 49053 deletions
@@ -0,0 +1,135 @@
+import clsx from "clsx";
+import { FC, HTMLAttributes, MouseEvent } from "react";
+
+import {
+  characterActions,
+  Item,
+  ItemPlan,
+  ItemPlanUtils,
+  ItemUtils,
+} from "@dndbeyond/character-rules-engine";
+
+import { Button } from "~/components/Button";
+import { useSidebar } from "~/contexts/Sidebar";
+import { useCharacterEngine } from "~/hooks/useCharacterEngine";
+import { useDispatch } from "~/hooks/useDispatch";
+import { PaneIdentifierUtils } from "~/tools/js/Shared/utils";
+import ItemPreview from "~/tools/js/smartComponents/ItemPreview";
+
+import { PaneComponentEnum } from "../Sidebar/types";
+import styles from "./styles.module.css";
+
+export interface MagicItemPlansProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const MagicItemPlans: FC<MagicItemPlansProps> = ({
+  className,
+  ...props
+}) => {
+  const { characterTheme, itemPlans, maxReplicatedItemsCount } =
+    useCharacterEngine();
+  const {
+    pane: { paneHistoryStart },
+  } = useSidebar();
+  const dispatch = useDispatch();
+
+  const itemPlanWithMappingsCount = itemPlans.filter((plan) =>
+    ItemPlanUtils.getItem(plan)
+  ).length;
+
+  const atMax =
+    maxReplicatedItemsCount !== null &&
+    itemPlanWithMappingsCount >= maxReplicatedItemsCount;
+
+  const handleItemPlansManagePaneShow = (
+    e: MouseEvent<HTMLButtonElement>
+  ): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    paneHistoryStart(PaneComponentEnum.ITEM_PLANS_MANAGE);
+  };
+
+  const handleItemClick = (item: Item): void => {
+    const inventoryMappingId = ItemUtils.getMappingId(item);
+
+    if (inventoryMappingId) {
+      paneHistoryStart(
+        PaneComponentEnum.ITEM_DETAIL,
+        PaneIdentifierUtils.generateItem(inventoryMappingId)
+      );
+    }
+  };
+
+  const handleReplicateItem = (itemPlan: ItemPlan): void => {
+    const itemDefinitionKey = ItemPlanUtils.getItemDefinitionKey(itemPlan);
+    const itemPlanOriginDefinitionKey =
+      ItemPlanUtils.getOriginDefinitionKey(itemPlan);
+
+    if (itemDefinitionKey) {
+      dispatch(
+        characterActions.itemPlanInventoryMappingCreate(
+          itemDefinitionKey,
+          1,
+          itemPlanOriginDefinitionKey
+        )
+      );
+    }
+  };
+
+  return (
+    <div className={clsx([styles.magicItemPlans, className])} {...props}>
+      {itemPlans.length > 0 ? (
+        itemPlans.map((plan) => {
+          const planOriginDefinitionKey =
+            ItemPlanUtils.getOriginDefinitionKey(plan);
+          const planName = ItemPlanUtils.getItemName(plan);
+          const itemDefinitionKey = ItemPlanUtils.getItemDefinitionKey(plan);
+          const item = ItemPlanUtils.getItem(plan);
+          const planDescription = ItemPlanUtils.getDescription(plan);
+
+          return itemDefinitionKey ? (
+            <div className={styles.itemPlan} key={planOriginDefinitionKey}>
+              <div className={styles.planHeader}>
+                <p className={styles.planName}>{planName}</p>
+                <p className={styles.description}>{planDescription}</p>
+              </div>
+              <div className={styles.itemContent}>
+                {item ? (
+                  <div className={styles.itemPreview}>
+                    <ItemPreview
+                      theme={characterTheme}
+                      item={item}
+                      onClick={() => handleItemClick(item)}
+                    />
+                  </div>
+                ) : (
+                  <Button
+                    className={styles.replicateButton}
+                    themed
+                    size="xx-small"
+                    onClick={() => handleReplicateItem(plan)}
+                    disabled={atMax}
+                  >
+                    {atMax ? "At Max Replicated Items" : "Replicate Item"}
+                  </Button>
+                )}
+              </div>
+            </div>
+          ) : null;
+        })
+      ) : (
+        <div className={styles.empty}>
+          No Magic Item plans have been selected for this character
+          <Button
+            className={styles.emptyButton}
+            themed
+            size="x-small"
+            onClick={handleItemPlansManagePaneShow}
+          >
+            Add Magic Item Plans
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};