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/tools/js/Shared/components/ItemDetail/ItemDetail.tsx
+29 -9
View File
@@ -383,18 +383,38 @@ export class ItemDetail extends React.PureComponent<Props> {
/>
</div>
)}
{replacementWeaponStats.map((statId) => (
<div className="ct-item-detail__class-customize-item" key={statId}>
{replacementWeaponStats.map((replacementInfo) => (
<div
className="ct-item-detail__class-customize-item"
key={`${replacementInfo.statId}-${replacementInfo.dataOrigin.primary.definition.id}`}
>
<Checkbox
enabled={appliedWeaponReplacementStats.includes(statId)}
enabled={appliedWeaponReplacementStats.includes(
replacementInfo.statId
)}
onChange={(enabled) =>
this.handleReplaceAbilityStatChange(enabled, statId)
this.handleReplaceAbilityStatChange(
enabled,
replacementInfo.statId
)
}
label={
<>
Use{" "}
{RuleDataUtils.getStatNameById(
replacementInfo.statId,
ruleData,
true
)}{" "}
<span className={styles.origin}>
(<span className={styles.originLabel}>From</span>
<span className={styles.originName}>
{replacementInfo.dataOrigin.primary.definition.name}
</span>
)
</span>
</>
}
label={`Use ${RuleDataUtils.getStatNameById(
statId,
ruleData,
true
)}`}
/>
</div>
))}
ddb_main/tools/js/Shared/containers/DetailChoice/DetailChoice.tsx
+16 -15
View File
@@ -1,3 +1,4 @@
import clsx from "clsx";
import { FC, ReactNode } from "react";
import {
@@ -18,6 +19,7 @@ import Collapsible from "~/tools/js/smartComponents/Collapsible";
import { Select } from "~/tools/js/smartComponents/legacy";
// TODO this needs to not extend builder contract and options typing needs to be fixed
// TODO scss to styles.module.css
interface Props extends Omit<BuilderChoiceContract, "options"> {
choice: Choice;
description?: string;
@@ -31,7 +33,6 @@ interface Props extends Omit<BuilderChoiceContract, "options"> {
onChange?: (
id: string,
type: number,
subType: number | null,
value: any,
parentChoiceId: string | null
) => void;
@@ -61,12 +62,17 @@ export const DetailChoice: FC<Props> = ({
const { entityRestrictionData, ruleData } = useCharacterEngine();
const { languages } = useRuleData();
const hasTodo =
(ChoiceUtils.isInfinite(choice) && !ChoiceUtils.isOptionSelected(choice)) ||
ChoiceUtils.isTodo(choice);
const handleChoiceChange = (value: string): void => {
if (onChange && id !== null) {
onChange(id, type, subType, value, parentChoiceId);
onChange(id, type, value, parentChoiceId);
}
};
//Don't render the choice if hideWhenOnlyDefaultSelected is true and the choice is only default selected.
if (
hideWhenOnlyDefaultSelected &&
ChoiceUtils.isOnlyDefaultSelected(choice)
@@ -74,14 +80,6 @@ export const DetailChoice: FC<Props> = ({
return null;
}
let classNames: Array<string> = ["detail-choice", className];
if (
(ChoiceUtils.isInfinite(choice) && !ChoiceUtils.isOptionSelected(choice)) ||
ChoiceUtils.isTodo(choice)
) {
classNames.push("detail-choice--todo");
}
// Use the description prop or, if a chosenOption is found and a description wasn't passed in, use the chosenOption description instead.
let choiceDescription = description;
@@ -94,10 +92,6 @@ export const DetailChoice: FC<Props> = ({
choiceDescription = description || chosenOption["description"];
}
if (parentChoiceId !== null) {
classNames.push("detail-choice--child");
}
let choiceNode: ReactNode;
if (choiceDescription) {
switch (type) {
@@ -142,7 +136,14 @@ export const DetailChoice: FC<Props> = ({
}
return (
<div className={classNames.join(" ")}>
<div
className={clsx([
"detail-choice",
hasTodo && "detail-choice--todo",
parentChoiceId !== null && "detail-choice--child",
className,
])}
>
<Select
className="detail-choice-input"
options={ChoiceUtils.getSortedRenderOptions(
ddb_main/tools/js/Shared/containers/DetailChoice/DetailChoiceFeat/DetailChoiceFeat.tsx
-77
View File
@@ -1,77 +0,0 @@
import { FC } from "react";
import { useDispatch } from "react-redux";
import {
characterActions,
ChoiceUtils,
FeatUtils,
} from "@dndbeyond/character-rules-engine/es";
import { useCharacterEngine } from "~/hooks/useCharacterEngine";
import { DetailChoice } from "../DetailChoice";
//This component is a wrapper for DetailChoice that is specifically for Feats
//given a featId, it will render the choices for that feat
//used in FeatDetail, FeatPane and FeatureChoice (for feats that are given by Class Features, Species Traits and Backgrounds)
export interface Props {
featId: number;
}
export const DetailChoiceFeat: FC<Props> = ({ featId }) => {
const dispatch = useDispatch();
const { entityRestrictionData, choiceInfo, feats, ruleData } =
useCharacterEngine();
const handleChoiceChange = (
id: string | null,
type: number,
subType: number | null,
value: any
): void => {
if (id !== null) {
dispatch(characterActions.featChoiceSetRequest(featId, type, id, value));
}
};
const feat = feats.find((feat) => FeatUtils.getId(feat) === featId);
if (!feat) {
return null;
}
const choices = FeatUtils.getChoices(feat);
if (choices.length === 0) {
return null;
}
return (
<div className="ct-detail-choice-feat">
{choices.map((choice) => {
const id = ChoiceUtils.getId(choice);
const { description, options: featChoiceOptions } =
ChoiceUtils.getSortedChoiceOptionsInfo(
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>
);
};
ddb_main/tools/js/Shared/containers/panes/SpeciesTraitPane/SpeciesTraitPane.tsx
-267
View File
@@ -1,267 +0,0 @@
import React, { useContext } from "react";
import { connect, DispatchProp } from "react-redux";
import {
AbilityLookup,
Action,
ActionUtils,
BaseFeat,
characterActions,
CharacterFeaturesManager,
CharacterTheme,
DataOriginRefData,
FeatManager,
Race,
RaceUtils,
RacialTrait,
RacialTraitUtils,
RuleData,
rulesEngineSelectors,
SnippetData,
Spell,
SpellUtils,
} from "@dndbeyond/character-rules-engine/es";
import { useSidebar } from "~/contexts/Sidebar";
import { PaneInfo } from "~/contexts/Sidebar/Sidebar";
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 { PaneInitFailureContent } from "../../../../../../subApps/sheet/components/Sidebar/components/PaneInitFailureContent";
import { SpeciesTraitFeatureSnippet } from "../../../../CharacterSheet/components/FeatureSnippet";
import { CharacterFeaturesManagerContext } from "../../../managers/CharacterFeaturesManagerContext";
import { appEnvSelectors } from "../../../selectors";
import { SharedAppState } from "../../../stores/typings";
import { PaneIdentifierUtils } from "../../../utils";
interface Props extends DispatchProp {
species: Race | null;
identifiers: PaneIdentifiersRacialTrait | null;
feats: Array<BaseFeat>;
snippetData: SnippetData;
ruleData: RuleData;
abilityLookup: AbilityLookup;
dataOriginRefData: DataOriginRefData;
isReadonly: boolean;
proficiencyBonus: number;
theme: CharacterTheme;
characterFeaturesManager: CharacterFeaturesManager;
paneContext: PaneInfo;
}
interface State {
speciesTrait: RacialTrait | null;
}
class SpeciesTraitPane extends React.PureComponent<Props, State> {
constructor(props) {
super(props);
this.state = this.generateStateData(props);
}
componentDidUpdate(
prevProps: Readonly<Props>,
prevState: Readonly<State>
): void {
const { species, identifiers } = this.props;
if (
species !== prevProps.species ||
identifiers !== prevProps.identifiers
) {
this.setState(this.generateStateData(this.props));
}
}
generateStateData = (props: Props): State => {
const { species, identifiers } = props;
let foundSpeciesTrait: RacialTrait | null | undefined = null;
if (species !== null && identifiers !== null) {
foundSpeciesTrait = RaceUtils.getVisibleRacialTraits(species).find(
(speciesTrait) =>
identifiers.id === RacialTraitUtils.getId(speciesTrait)
);
}
return {
speciesTrait: foundSpeciesTrait ? foundSpeciesTrait : null,
};
};
handleActionUseSet = (action: Action, uses: number): void => {
const { dispatch } = this.props;
const id = ActionUtils.getId(action);
const entityTypeId = ActionUtils.getEntityTypeId(action);
if (id !== null && entityTypeId !== null) {
dispatch(
characterActions.actionUseSet(
id,
entityTypeId,
uses,
ActionUtils.getDataOriginType(action)
)
);
}
};
handleSpellUseSet = (spell: Spell, uses: number): void => {
const { dispatch } = this.props;
const mappingId = SpellUtils.getMappingId(spell);
const mappingEntityTypeId = SpellUtils.getMappingEntityTypeId(spell);
if (mappingId !== null && mappingEntityTypeId !== null) {
dispatch(
characterActions.spellUseSet(
mappingId,
mappingEntityTypeId,
uses,
SpellUtils.getDataOriginType(spell)
)
);
}
};
handleSpellDetailShow = (spell: Spell): void => {
const {
paneContext: { paneHistoryPush },
} = this.props;
const mappingId = SpellUtils.getMappingId(spell);
if (mappingId !== null) {
paneHistoryPush(
PaneComponentEnum.CHARACTER_SPELL_DETAIL,
PaneIdentifierUtils.generateCharacterSpell(mappingId)
);
}
};
handleSpeciesTraitShow = (speciesTrait: RacialTrait): void => {
const {
paneContext: { paneHistoryStart },
} = this.props;
paneHistoryStart(
PaneComponentEnum.SPECIES_TRAIT_DETAIL,
PaneIdentifierUtils.generateRacialTrait(
RacialTraitUtils.getId(speciesTrait)
)
);
};
handleActionShow = (action: Action): void => {
const {
paneContext: { paneHistoryPush },
} = this.props;
const mappingId = ActionUtils.getMappingId(action);
const mappingEntityTypeId = ActionUtils.getMappingEntityTypeId(action);
if (mappingId !== null && mappingEntityTypeId !== null) {
paneHistoryPush(
PaneComponentEnum.ACTION,
PaneIdentifierUtils.generateAction(mappingId, mappingEntityTypeId)
);
}
};
handleFeatShow = (feat: FeatManager): void => {
const {
paneContext: { paneHistoryPush },
} = this.props;
paneHistoryPush(
PaneComponentEnum.FEAT_DETAIL,
PaneIdentifierUtils.generateFeat(feat.getId())
);
};
render() {
const { speciesTrait } = this.state;
const {
species,
feats,
abilityLookup,
snippetData,
ruleData,
dataOriginRefData,
isReadonly,
proficiencyBonus,
theme,
characterFeaturesManager,
} = this.props;
if (species === null || speciesTrait === null) {
return <PaneInitFailureContent />;
}
let fullName = RaceUtils.getFullName(species);
let portrait = RaceUtils.getPortraitAvatarUrl(species);
return (
<div
className="ct-racial-trait-pane"
key={RacialTraitUtils.getId(speciesTrait)}
>
<Header
parent={fullName}
preview={portrait && <Preview imageUrl={portrait} />}
>
{RacialTraitUtils.getName(speciesTrait)}
</Header>
<SpeciesTraitFeatureSnippet
speciesTrait={speciesTrait}
onActionUseSet={this.handleActionUseSet}
onActionClick={this.handleActionShow}
onSpellUseSet={this.handleSpellUseSet}
onSpellClick={this.handleSpellDetailShow}
onFeatureClick={this.handleSpeciesTraitShow}
showHeader={false}
showDescription={true}
feats={feats}
snippetData={snippetData}
ruleData={ruleData}
abilityLookup={abilityLookup}
dataOriginRefData={dataOriginRefData}
isReadonly={isReadonly}
proficiencyBonus={proficiencyBonus}
theme={theme}
onFeatClick={this.handleFeatShow}
featuresManager={characterFeaturesManager}
/>
</div>
);
}
}
function mapStateToProps(state: SharedAppState) {
return {
species: rulesEngineSelectors.getRace(state),
feats: rulesEngineSelectors.getBaseFeats(state),
snippetData: rulesEngineSelectors.getSnippetData(state),
ruleData: rulesEngineSelectors.getRuleData(state),
abilityLookup: rulesEngineSelectors.getAbilityLookup(state),
dataOriginRefData: rulesEngineSelectors.getDataOriginRefData(state),
isReadonly: appEnvSelectors.getIsReadonly(state),
proficiencyBonus: rulesEngineSelectors.getProficiencyBonus(state),
};
}
const SpeciesTraitPaneWrapper = (props) => {
const { characterFeaturesManager } = useContext(
CharacterFeaturesManagerContext
);
const { pane } = useSidebar();
return (
<SpeciesTraitPane
characterFeaturesManager={characterFeaturesManager}
paneContext={pane}
{...props}
/>
);
};
export default connect(mapStateToProps)(SpeciesTraitPaneWrapper);
ddb_main/tools/js/Shared/containers/panes/SpeciesTraitPane/index.ts
-4
View File
@@ -1,4 +0,0 @@
import SpeciesTraitPane from "./SpeciesTraitPane";
export default SpeciesTraitPane;
export { SpeciesTraitPane };