krugd/dndbeyond_src
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New source found from dndbeyond.com

Browse Source
This commit is contained in:
David Kruger
2026-07-08 01:00:09 -07:00
parent 9a983a6d7b
commit dcefa0d2f2
2865 changed files with 222467 additions and 49053 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ddb_main/tools/js/Shared/components/ActionDetail/ActionDetail.tsx
+36 -65
View File
@@ -3,7 +3,6 @@ import React from "react";
import {
Collapsible,
DamageTypeIcon,
MarketplaceCta,
AoeTypeIcon,
ComponentConstants,
} from "@dndbeyond/character-components/es";
@@ -33,6 +32,7 @@ import {
import { HtmlContent } from "~/components/HtmlContent";
import { InfoItem } from "~/components/InfoItem";
import { MarketplaceCta } from "~/components/MarketplaceCta";
import { NumberDisplay } from "~/components/NumberDisplay";
import EditorBox from "../EditorBox";
@@ -77,8 +77,6 @@ export const ActionDetail = ({
theme,
inventoryLookup,
}: Props) => {
const infoItemProps = { role: "listItem", inline: true };
const handleRemoveCustomizations = () => {
if (onCustomizationsRemove) {
onCustomizationsRemove();
@@ -250,10 +248,10 @@ export const ActionDetail = ({
if (rangeInfo.range) {
rangeAreas.push(
<React.Fragment>
<>
<NumberDisplay type="distanceInFt" number={rangeInfo.range} />
{rangeInfo.longRange && <span>({rangeInfo.longRange})</span>}
</React.Fragment>
</>
);
}
@@ -263,7 +261,7 @@ export const ActionDetail = ({
aoeType = RuleDataUtils.getAoeType(rangeInfo.aoeType, ruleData);
}
rangeAreas.push(
<React.Fragment>
<>
<NumberDisplay type="distanceInFt" number={rangeInfo.aoeSize} />
{aoeType !== null && (
<span className={styles.rangeShape}>
@@ -278,7 +276,7 @@ export const ActionDetail = ({
/>
</span>
)}
</React.Fragment>
</>
);
}
}
@@ -300,14 +298,12 @@ export const ActionDetail = ({
}
return (
<React.Fragment>
<>
{damageDisplay !== null && (
<InfoItem label="Damage:" {...infoItemProps}>
{damageDisplay}
</InfoItem>
<InfoItem label="Damage:">{damageDisplay}</InfoItem>
)}
{damage.type !== null && damage.type.name !== null && (
<InfoItem label="Damage Type:" {...infoItemProps}>
<InfoItem label="Damage Type:">
<DamageTypeIcon
theme={theme}
type={
@@ -319,7 +315,7 @@ export const ActionDetail = ({
{damage.type.name}
</InfoItem>
)}
</React.Fragment>
</>
);
};
@@ -340,35 +336,35 @@ export const ActionDetail = ({
rangeAreas = getRangedInfoData();
} else {
rangeAreas.push(
<React.Fragment>
<>
<NumberDisplay
type="distanceInFt"
number={ActionUtils.getReach(action)}
/>{" "}
Reach
</React.Fragment>
</>
);
}
return (
<div className={styles.properties} role="list">
{activation !== null && activation.activationType && (
<InfoItem label="Action Type:" {...infoItemProps}>
<InfoItem label="Action Type:">
{ActivationUtils.renderActivation(activation, ruleData)}
</InfoItem>
)}
{attackSubtypeId && (
<InfoItem label="Attack Type:" {...infoItemProps}>
<InfoItem label="Attack Type:">
{ActionUtils.getAttackSubtypeName(action)}
</InfoItem>
)}
{requiresAttackRoll && (
<InfoItem label="To Hit:" {...infoItemProps}>
<InfoItem label="To Hit:">
<NumberDisplay type="signed" number={toHit} />
</InfoItem>
)}
{requiresSavingThrow && (
<InfoItem label="Attack/Save:" {...infoItemProps}>
<InfoItem label="Attack/Save:">
{saveStateId !== null
? RuleDataUtils.getStatNameById(saveStateId, ruleData)
: ""}{" "}
@@ -377,14 +373,14 @@ export const ActionDetail = ({
)}
{renderDamageProperties()}
{requiresAttackRoll && (
<InfoItem label="Stat:" {...infoItemProps}>
<InfoItem label="Stat:">
{statId === null
? "--"
: RuleDataUtils.getStatNameById(statId, ruleData)}
</InfoItem>
)}
{rangeAreas.length > 0 && (
<InfoItem label="Range/Area:" {...infoItemProps}>
<InfoItem label="Range/Area:">
{rangeAreas.map((node, idx) => (
<React.Fragment key={idx}>
{node}
@@ -393,16 +389,8 @@ export const ActionDetail = ({
))}
</InfoItem>
)}
{isProficient && (
<InfoItem label="Proficient:" {...infoItemProps}>
Yes
</InfoItem>
)}
{notes && (
<InfoItem label="Notes:" {...infoItemProps}>
{notes}
</InfoItem>
)}
{isProficient && <InfoItem label="Proficient:">Yes</InfoItem>}
{notes && <InfoItem label="Notes:">{notes}</InfoItem>}
</div>
);
};
@@ -422,22 +410,22 @@ export const ActionDetail = ({
return (
<div className={styles.properties} role="list">
{activation !== null && activation.activationType && (
<InfoItem label="Casting Time:" {...infoItemProps}>
<InfoItem label="Casting Time:">
{ActivationUtils.renderActivation(activation, ruleData)}
</InfoItem>
)}
{attackSubtypeId && (
<InfoItem label="Attack Type:" {...infoItemProps}>
<InfoItem label="Attack Type:">
{ActionUtils.getAttackSubtypeName(action)}
</InfoItem>
)}
{requiresAttackRoll && (
<InfoItem label="To Hit:" {...infoItemProps}>
<InfoItem label="To Hit:">
<NumberDisplay type="signed" number={toHit} />
</InfoItem>
)}
{requiresSavingThrow && (
<InfoItem label="Attack/Save:" {...infoItemProps}>
<InfoItem label="Attack/Save:">
{saveStateId !== null
? RuleDataUtils.getStatNameById(saveStateId, ruleData)
: ""}{" "}
@@ -446,14 +434,14 @@ export const ActionDetail = ({
)}
{renderDamageProperties()}
{requiresAttackRoll && (
<InfoItem label="Stat:" {...infoItemProps}>
<InfoItem label="Stat:">
{statId === null
? "--"
: RuleDataUtils.getStatNameById(statId, ruleData)}
</InfoItem>
)}
{rangeAreas.length > 0 && (
<InfoItem label="Range/Area:" {...infoItemProps}>
<InfoItem label="Range/Area:">
{rangeAreas.map((node, idx) => (
<React.Fragment key={idx}>
{node}
@@ -462,16 +450,8 @@ export const ActionDetail = ({
))}
</InfoItem>
)}
{isProficient && (
<InfoItem label="Proficient:" {...infoItemProps}>
Yes
</InfoItem>
)}
{notes && (
<InfoItem label="Notes:" {...infoItemProps}>
{notes}
</InfoItem>
)}
{isProficient && <InfoItem label="Proficient:">Yes</InfoItem>}
{notes && <InfoItem label="Notes:">{notes}</InfoItem>}
</div>
);
};
@@ -492,30 +472,30 @@ export const ActionDetail = ({
rangeAreas = getRangedInfoData();
} else {
rangeAreas.push(
<React.Fragment>
<>
<NumberDisplay
type="distanceInFt"
number={ActionUtils.getReach(action)}
/>{" "}
Reach
</React.Fragment>
</>
);
}
return (
<div className={styles.properties} role="list">
{activation !== null && activation.activationType && (
<InfoItem label={"Action Type:"} {...infoItemProps}>
<InfoItem label={"Action Type:"}>
{ActivationUtils.renderActivation(activation, ruleData)}
</InfoItem>
)}
{requiresAttackRoll && (
<InfoItem label="To Hit:" {...infoItemProps}>
<InfoItem label="To Hit:">
<NumberDisplay type="signed" number={toHit} />
</InfoItem>
)}
{requiresSavingThrow && (
<InfoItem label="Attack/Save:" {...infoItemProps}>
<InfoItem label="Attack/Save:">
{saveStateId !== null
? RuleDataUtils.getStatNameById(saveStateId, ruleData)
: ""}{" "}
@@ -524,14 +504,14 @@ export const ActionDetail = ({
)}
{renderDamageProperties()}
{requiresAttackRoll && (
<InfoItem label="Stat:" {...infoItemProps}>
<InfoItem label="Stat:">
{statId === null
? "--"
: RuleDataUtils.getStatNameById(statId, ruleData)}
</InfoItem>
)}
{rangeAreas.length > 0 && (
<InfoItem label="Range/Area:" {...infoItemProps}>
<InfoItem label="Range/Area:">
{rangeAreas.map((node, idx) => (
<React.Fragment key={idx}>
{node}
@@ -540,16 +520,8 @@ export const ActionDetail = ({
))}
</InfoItem>
)}
{isProficient && (
<InfoItem label="Proficient:" {...infoItemProps}>
Yes
</InfoItem>
)}
{notes && (
<InfoItem label="Notes:" {...infoItemProps}>
{notes}
</InfoItem>
)}
{isProficient && <InfoItem label="Proficient:">Yes</InfoItem>}
{notes && <InfoItem label="Notes:">{notes}</InfoItem>}
</div>
);
};
@@ -621,7 +593,6 @@ export const ActionDetail = ({
return (
<div className={styles.marketplaceCta}>
<MarketplaceCta
showImage={false}
sourceName={sourceName}
description={
"To unlock this infusion, check out the Marketplace to view purchase options."