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
2025-07-16 01:00:16 -07:00
parent 151590af7a
commit f9f8dd0e7a
25 changed files with 886 additions and 1299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ddb_main/subApps/sheet/components/Sidebar/helpers/getActiveEntryComponent.ts
+1 -1
View File
@@ -1,5 +1,6 @@
import { CreaturePane } from "~/subApps/sheet/components/Sidebar/panes/CreaturePane";
import { GameLogPane } from "~/subApps/sheet/components/Sidebar/panes/GameLogPane";
import { SpeciesTraitPane } from "~/subApps/sheet/components/Sidebar/panes/SpeciesTraitPane";
import BlessingPane from "~/tools/js/Shared/containers/panes/BlessingPane";
import CharacterSpellPane from "~/tools/js/Shared/containers/panes/CharacterSpellPane";
import ClassSpellPane from "~/tools/js/Shared/containers/panes/ClassSpellPane";
@@ -34,7 +35,6 @@ import { ShareUrlPane } from "~/tools/js/Shared/containers/panes/ShareUrlPane";
import ShortRestPane from "~/tools/js/Shared/containers/panes/ShortRestPane";
import SkillPane from "~/tools/js/Shared/containers/panes/SkillPane";
import SkillsPane from "~/tools/js/Shared/containers/panes/SkillsPane";
import SpeciesTraitPane from "~/tools/js/Shared/containers/panes/SpeciesTraitPane";
import SpeedManagePane from "~/tools/js/Shared/containers/panes/SpeedManagePane";
import SpellManagePane from "~/tools/js/Shared/containers/panes/SpellManagePane";
import StartingEquipmentPane from "~/tools/js/Shared/containers/panes/StartingEquipmentPane";
ddb_main/subApps/sheet/components/Sidebar/panes/ClassFeaturePane/ClassFeaturePane.tsx
+13 -174
View File
@@ -1,45 +1,27 @@
import {
FC,
HTMLAttributes,
useContext,
useEffect,
useRef,
useState,
} from "react";
import { FC, HTMLAttributes, useContext } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
ApiAdapterUtils,
FeatManager,
} from "@dndbeyond/character-rules-engine";
import { FeatManager } from "@dndbeyond/character-rules-engine";
import { FeatureChoice } from "~/components/FeatureChoice";
import { BuilderChoiceTypeEnum } from "~/constants";
import { FeatureChoices } from "~/components/FeatureChoices";
import { useSidebar } from "~/contexts/Sidebar";
import { useCharacterEngine } from "~/hooks/useCharacterEngine";
import { Header } from "~/subApps/sheet/components/Sidebar/components/Header";
import { Preview } from "~/subApps/sheet/components/Sidebar/components/Preview";
import DataLoadingStatusEnum from "~/tools/js/Shared/constants/DataLoadingStatusEnum";
import { ClassFeatureSnippet } from "~/tools/js/CharacterSheet/components/FeatureSnippet";
import { CharacterFeaturesManagerContext } from "~/tools/js/Shared/managers/CharacterFeaturesManagerContext";
import { apiCreatorSelectors } from "~/tools/js/Shared/selectors";
import { AppLoggerUtils, PaneIdentifierUtils } from "~/tools/js/Shared/utils";
import LoadingPlaceholder from "~/tools/js/smartComponents/LoadingPlaceholder";
import { appEnvSelectors } from "~/tools/js/Shared/selectors";
import { PaneIdentifierUtils } from "~/tools/js/Shared/utils";
import {
Action,
CharClass,
ClassDefinitionContract,
ClassFeature,
Feat,
InfusionChoice,
Spell,
} from "~/types";
import { ClassFeatureSnippet } from "../../../../../../tools/js/CharacterSheet/components/FeatureSnippet";
import { appEnvSelectors } from "../../../../../../tools/js/Shared/selectors";
import { Heading } from "../../components/Heading";
import { PaneInitFailureContent } from "../../components/PaneInitFailureContent";
import { PaneComponentEnum, PaneIdentifiersClassFeature } from "../../types";
import styles from "./styles.module.css";
interface Props extends HTMLAttributes<HTMLDivElement> {
identifiers: PaneIdentifiersClassFeature | null;
@@ -61,8 +43,6 @@ export const ClassFeaturePane: FC<Props> = ({ identifiers, ...props }) => {
proficiencyBonus,
originRef: dataOriginRefData,
characterTheme: theme,
choiceUtils,
featUtils,
helperUtils,
} = useCharacterEngine();
@@ -76,23 +56,6 @@ export const ClassFeaturePane: FC<Props> = ({ identifiers, ...props }) => {
const isReadonly = useSelector(appEnvSelectors.getIsReadonly);
const loadAvailableFeats = useSelector(
apiCreatorSelectors.makeLoadAvailableFeats
);
const loadAvailableSubclasses = useSelector(
apiCreatorSelectors.makeLoadAvailableSubclasses
);
const [subclassData, setSubclassData] = useState<
Array<ClassDefinitionContract>
>([]);
const [featsData, setFeatsData] = useState<Array<Feat>>([]);
const [featLoadingStatus, setFeatLoadingStatus] =
useState<DataLoadingStatusEnum>(DataLoadingStatusEnum.NOT_INITIALIZED);
const [subclassLoadingStatus, setSubclassLoadingStatus] =
useState<DataLoadingStatusEnum>(DataLoadingStatusEnum.NOT_INITIALIZED);
const currentCharClass = useRef<CharClass | null>(null);
const charClass = identifiers?.classMappingId
? classes.find(
(charClass) =>
@@ -105,98 +68,6 @@ export const ClassFeaturePane: FC<Props> = ({ identifiers, ...props }) => {
(feature) => identifiers?.id === classFeatureUtils.getId(feature)
) ?? null;
const featureChoices = classFeature
? classFeatureUtils.getChoices(classFeature)
: [];
const hasFeatChoice = featureChoices.some(
(choice) =>
choiceUtils.getType(choice) === BuilderChoiceTypeEnum.FEAT_CHOICE_OPTION
);
const hasSubclassChoice = featureChoices.some(
(choice) =>
choiceUtils.getType(choice) === BuilderChoiceTypeEnum.SUB_CLASS_OPTION
);
useEffect(() => {
const isSameClass = (
c1: CharClass | null,
c2: CharClass | null
): boolean => {
if (!c1 || !c2) return false;
return classUtils.getId(c1) === classUtils.getId(c2);
};
if (
hasFeatChoice &&
featLoadingStatus === DataLoadingStatusEnum.NOT_INITIALIZED
) {
setFeatLoadingStatus(DataLoadingStatusEnum.LOADING);
loadAvailableFeats({
// cancelToken: new axios.CancelToken((c) => {
// this.loadFeatsCanceler = c;
// }),
})
.then((response) => {
let featsData: Array<Feat> = [];
const data = ApiAdapterUtils.getResponseData(response);
if (data !== null) {
featsData = data.map((definition) =>
featUtils.simulateFeat(definition)
);
}
setFeatsData(featsData);
setFeatLoadingStatus(DataLoadingStatusEnum.LOADED);
// this.loadFeatsCanceler = null;
})
.catch(AppLoggerUtils.handleAdhocApiError);
}
if (
charClass &&
!isSameClass(charClass, currentCharClass.current) && // Only pull data if the class has changed from previous fetch
hasSubclassChoice &&
subclassLoadingStatus !== DataLoadingStatusEnum.LOADING // Check if its not already fetching data
) {
currentCharClass.current = charClass; //Update ref of fetched class
setSubclassLoadingStatus(DataLoadingStatusEnum.LOADING);
loadAvailableSubclasses(classUtils.getId(charClass), {
// cancelToken: new axios.CancelToken((c) => {
// this.loadSubclassesCanceler = c;
// }),
})
.then((response) => {
let subclassData: Array<ClassDefinitionContract> = [];
const data = ApiAdapterUtils.getResponseData(response);
if (data !== null) {
subclassData = data;
}
setSubclassData(subclassData);
setSubclassLoadingStatus(DataLoadingStatusEnum.LOADED);
// this.loadSubclassesCanceler = null;
})
.catch(AppLoggerUtils.handleAdhocApiError);
}
}, [
hasFeatChoice,
hasSubclassChoice,
subclassLoadingStatus,
featLoadingStatus,
charClass,
classUtils,
featUtils,
loadAvailableFeats,
loadAvailableSubclasses,
currentCharClass,
]);
const handleInfusionChoiceShow = (infusionChoice: InfusionChoice): void => {
const choiceKey = infusionChoiceUtils.getKey(infusionChoice);
if (choiceKey !== null) {
@@ -302,21 +173,6 @@ export const ClassFeaturePane: FC<Props> = ({ identifiers, ...props }) => {
);
};
const isDataLoaded = (): boolean => {
if (hasSubclassChoice) {
if (subclassLoadingStatus !== DataLoadingStatusEnum.LOADED) {
return false;
}
}
if (hasFeatChoice) {
if (featLoadingStatus !== DataLoadingStatusEnum.LOADED) {
return false;
}
}
return true;
};
if (!charClass || !classFeature) {
return <PaneInitFailureContent />;
}
@@ -356,30 +212,13 @@ export const ClassFeaturePane: FC<Props> = ({ identifiers, ...props }) => {
onFeatClick={handleFeatShow}
featuresManager={characterFeaturesManager}
/>
{!isReadonly && featureChoices.length > 0 && (
<>
<Heading className={styles.heading}>{`Option${
featureChoices.length > 1 ? "s" : ""
}`}</Heading>
{isDataLoaded() ? (
featureChoices.map((choice) => (
<FeatureChoice
charClass={charClass}
choice={choice}
feature={classFeature}
featsData={featsData}
subclassData={subclassData}
className={styles.choice}
key={choiceUtils.getId(choice)}
onChoiceChange={handleChoiceChange}
collapseDescription={true}
/>
))
) : (
<LoadingPlaceholder />
)}
</>
)}
<FeatureChoices
choices={classFeatureUtils.getChoices(classFeature)}
charClass={charClass}
onChoiceChange={handleChoiceChange}
collapseDescription={true}
showHeading={true}
/>
</div>
);
};
ddb_main/subApps/sheet/components/Sidebar/panes/FeatPane/FeatPane.tsx
+42 -5
View File
@@ -1,18 +1,17 @@
import { FC, HTMLAttributes, useContext } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Accordion } from "~/components/Accordion";
import { ChoiceUtils } from "@dndbeyond/character-rules-engine";
import { Button } from "~/components/Button";
import { HelperTextAccordion } from "~/components/HelperTextAccordion";
import { HtmlContent } from "~/components/HtmlContent";
import { useSidebar } from "~/contexts/Sidebar";
import { useCharacterEngine } from "~/hooks/useCharacterEngine";
import { FeatFeatureSnippet } from "~/tools/js/CharacterSheet/components/FeatureSnippet";
import { DetailChoiceFeat } from "~/tools/js/Shared/containers/DetailChoice";
import { DetailChoice } from "~/tools/js/Shared/containers/DetailChoice";
import { CharacterFeaturesManagerContext } from "~/tools/js/Shared/managers/CharacterFeaturesManagerContext";
import { appEnvSelectors } from "~/tools/js/Shared/selectors";
import { PaneIdentifierUtils } from "~/tools/js/Shared/utils";
import { DdbBadgeSvg } from "~/tools/js/smartComponents/Svg";
import { Action, Spell } from "~/types";
import { Header } from "../../components/Header";
@@ -38,6 +37,8 @@ export const FeatPane: FC<Props> = ({ identifiers, ...props }) => {
originRef: dataOriginRefData,
characterTheme: theme,
entityUtils,
entityRestrictionData,
choiceInfo,
} = useCharacterEngine();
const { characterFeaturesManager } = useContext(
@@ -115,6 +116,18 @@ export const FeatPane: FC<Props> = ({ identifiers, ...props }) => {
}
};
const handleChoiceChange = (
id: string | null,
type: number,
value: any
): void => {
if (feat && id !== null) {
dispatch(
characterActions.featChoiceSetRequest(feat.getId(), type, id, value)
);
}
};
if (feat === null) {
return <PaneInitFailureContent />;
}
@@ -163,7 +176,31 @@ export const FeatPane: FC<Props> = ({ identifiers, ...props }) => {
/>
{!isReadonly && feat.getChoices().length > 0 && (
<div className={styles.choices}>
<DetailChoiceFeat featId={feat.getId()} />
{feat.getChoices().map((choice) => {
const id = ChoiceUtils.getId(choice);
const { description, options: featChoiceOptions } =
ChoiceUtils.getSortedChoiceOptionsForFeatsInfo(
feat.getId(),
choice,
ruleData,
entityRestrictionData
);
return (
<DetailChoice
{...choice}
label={choice.label}
choice={choice}
key={id !== null ? id : ""}
options={featChoiceOptions}
onChange={handleChoiceChange}
choiceInfo={choiceInfo}
showBackgroundProficiencyOptions={true}
description={description}
/>
);
})}
</div>
)}
{!feat.isHiddenFeat() &&
ddb_main/subApps/sheet/components/Sidebar/panes/FeatsManagePane/FeatDetail/FeatDetail.tsx
+52 -3
View File
@@ -1,9 +1,15 @@
import { FC, HTMLAttributes } from "react";
import { useDispatch } from "react-redux";
import { FeatManager } from "@dndbeyond/character-rules-engine/es";
import {
characterActions,
ChoiceUtils,
FeatManager,
} from "@dndbeyond/character-rules-engine/es";
import { HtmlContent } from "~/components/HtmlContent";
import { DetailChoiceFeat } from "~/tools/js/Shared/containers/DetailChoice";
import { useCharacterEngine } from "~/hooks/useCharacterEngine";
import { DetailChoice } from "~/tools/js/Shared/containers/DetailChoice";
import styles from "./styles.module.css";
@@ -12,9 +18,28 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
}
export const FeatDetail: FC<Props> = ({ featManager, className, ...props }) => {
const dispatch = useDispatch();
const { ruleData, entityRestrictionData, choiceInfo } = useCharacterEngine();
const prerequisiteDescription = featManager.getPrerequisiteDescription();
const featDescription = featManager.getDescription();
const handleChoiceChange = (
id: string | null,
type: number,
value: any
): void => {
if (featManager && id !== null) {
dispatch(
characterActions.featChoiceSetRequest(
featManager.getId(),
type,
id,
value
)
);
}
};
return (
<div className={className} {...props}>
{prerequisiteDescription && (
@@ -27,7 +52,31 @@ export const FeatDetail: FC<Props> = ({ featManager, className, ...props }) => {
)}
{featManager.getChoices().length > 0 && (
<div className={styles.choices}>
<DetailChoiceFeat featId={featManager.getId()} />
{featManager.getChoices().map((choice) => {
const id = ChoiceUtils.getId(choice);
const { description, options: featChoiceOptions } =
ChoiceUtils.getSortedChoiceOptionsForFeatsInfo(
featManager.getId(),
choice,
ruleData,
entityRestrictionData
);
return (
<DetailChoice
{...choice}
label={choice.label}
choice={choice}
key={id !== null ? id : ""}
options={featChoiceOptions}
onChange={handleChoiceChange}
choiceInfo={choiceInfo}
showBackgroundProficiencyOptions={true}
description={description}
/>
);
})}
</div>
)}
</div>
ddb_main/subApps/sheet/components/Sidebar/panes/SpeciesTraitPane/SpeciesTraitPane.tsx
+193
View File
@@ -0,0 +1,193 @@
import { FC, HTMLAttributes, useContext } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
Action,
ActionUtils,
characterActions,
FeatManager,
HelperUtils,
RaceUtils,
RacialTrait,
RacialTraitUtils,
Spell,
SpellUtils,
} from "@dndbeyond/character-rules-engine";
import { FeatureChoices } from "~/components/FeatureChoices";
import { useSidebar } from "~/contexts/Sidebar";
import { useCharacterEngine } from "~/hooks/useCharacterEngine";
import { Header } from "~/subApps/sheet/components/Sidebar/components/Header";
import { Preview } from "~/subApps/sheet/components/Sidebar/components/Preview";
import {
PaneComponentEnum,
PaneIdentifiersRacialTrait,
} from "~/subApps/sheet/components/Sidebar/types";
import { SpeciesTraitFeatureSnippet } from "~/tools/js/CharacterSheet/components/FeatureSnippet";
import { CharacterFeaturesManagerContext } from "~/tools/js/Shared/managers/CharacterFeaturesManagerContext";
import { appEnvSelectors } from "~/tools/js/Shared/selectors";
import { PaneIdentifierUtils } from "~/tools/js/Shared/utils";
import { PaneInitFailureContent } from "../../components/PaneInitFailureContent";
interface Props extends HTMLAttributes<HTMLDivElement> {
identifiers: PaneIdentifiersRacialTrait | null;
}
export const SpeciesTraitPane: FC<Props> = ({ identifiers, ...props }) => {
const dispatch = useDispatch();
const {
race: species,
feats,
snippetData,
ruleData,
abilityLookup,
originRef: dataOriginRefData,
proficiencyBonus,
characterTheme: theme,
} = useCharacterEngine();
const { characterFeaturesManager } = useContext(
CharacterFeaturesManagerContext
);
const isReadonly = useSelector(appEnvSelectors.getIsReadonly);
const {
pane: { paneHistoryPush, paneHistoryStart },
} = useSidebar();
const speciesTrait = species
? RaceUtils.getVisibleRacialTraits(species).find(
(trait) => identifiers?.id === RacialTraitUtils.getId(trait)
)
: null;
const handleActionUseSet = (action: Action, uses: number): void => {
const id = ActionUtils.getId(action);
const entityTypeId = ActionUtils.getEntityTypeId(action);
if (id !== null && entityTypeId !== null) {
dispatch(
characterActions.actionUseSet(
id,
entityTypeId,
uses,
ActionUtils.getDataOriginType(action)
)
);
}
};
const handleSpellUseSet = (spell: Spell, uses: number): void => {
const mappingId = SpellUtils.getMappingId(spell);
const mappingEntityTypeId = SpellUtils.getMappingEntityTypeId(spell);
if (mappingId !== null && mappingEntityTypeId !== null) {
dispatch(
characterActions.spellUseSet(
mappingId,
mappingEntityTypeId,
uses,
SpellUtils.getDataOriginType(spell)
)
);
}
};
const handleSpellDetailShow = (spell: Spell): void => {
const mappingId = SpellUtils.getMappingId(spell);
if (mappingId !== null) {
paneHistoryPush(
PaneComponentEnum.CHARACTER_SPELL_DETAIL,
PaneIdentifierUtils.generateCharacterSpell(mappingId)
);
}
};
const handleSpeciesTraitShow = (speciesTrait: RacialTrait): void => {
paneHistoryStart(
PaneComponentEnum.SPECIES_TRAIT_DETAIL,
PaneIdentifierUtils.generateRacialTrait(
RacialTraitUtils.getId(speciesTrait)
)
);
};
const handleActionShow = (action: Action): void => {
const mappingId = ActionUtils.getMappingId(action);
const mappingEntityTypeId = ActionUtils.getMappingEntityTypeId(action);
if (mappingId !== null && mappingEntityTypeId !== null) {
paneHistoryPush(
PaneComponentEnum.ACTION,
PaneIdentifierUtils.generateAction(mappingId, mappingEntityTypeId)
);
}
};
const handleFeatShow = (feat: FeatManager): void => {
paneHistoryPush(
PaneComponentEnum.FEAT_DETAIL,
PaneIdentifierUtils.generateFeat(feat.getId())
);
};
const handleChoiceChange = (
choiceId: string,
type: number,
value: any
): void => {
if (!species || !speciesTrait) {
return;
}
dispatch(
characterActions.racialTraitChoiceSetRequest(
RacialTraitUtils.getId(speciesTrait),
type,
choiceId,
HelperUtils.parseInputInt(value)
)
);
};
if (species === null || !speciesTrait) {
return <PaneInitFailureContent />;
}
const portrait = RaceUtils.getPortraitAvatarUrl(species);
return (
<div key={RacialTraitUtils.getId(speciesTrait)} {...props}>
<Header
parent={RaceUtils.getFullName(species)}
preview={portrait && <Preview imageUrl={portrait} />}
>
{RacialTraitUtils.getName(speciesTrait)}
</Header>
<SpeciesTraitFeatureSnippet
speciesTrait={speciesTrait}
onActionUseSet={handleActionUseSet}
onActionClick={handleActionShow}
onSpellUseSet={handleSpellUseSet}
onSpellClick={handleSpellDetailShow}
onFeatureClick={handleSpeciesTraitShow}
showHeader={false}
showDescription={true}
feats={feats}
snippetData={snippetData}
ruleData={ruleData}
abilityLookup={abilityLookup}
dataOriginRefData={dataOriginRefData}
isReadonly={isReadonly}
proficiencyBonus={proficiencyBonus}
theme={theme}
onFeatClick={handleFeatShow}
featuresManager={characterFeaturesManager}
/>
<FeatureChoices
choices={RacialTraitUtils.getChoices(speciesTrait)}
onChoiceChange={handleChoiceChange}
collapseDescription={true}
showHeading={true}
/>
</div>
);
};