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-06-18 01:00:16 -07:00
parent 451d940294
commit 0b403376c5
30 changed files with 496 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ddb_main/tools/js/CharacterBuilder/containers/pages/DescriptionManage/DescriptionManage.tsx
+43 -38
View File
@@ -1,6 +1,6 @@
import axios, { Canceler } from "axios";
import { orderBy } from "lodash";
import React, { HTMLAttributes, useContext } from "react";
import React, { FocusEvent, HTMLAttributes, useContext } from "react";
import { DispatchProp } from "react-redux";
import { LoadingPlaceholder, Select } from "@dndbeyond/character-components/es";
@@ -52,12 +52,12 @@ import { HtmlContent } from "~/components/HtmlContent";
import { Link } from "~/components/Link";
import { useSource } from "~/hooks/useSource";
import { EditorWithDialog } from "~/subApps/builder/components/EditorWithDialog";
import { InputField } from "~/subApps/builder/components/InputField";
import { RouteKey } from "~/subApps/builder/constants";
import {
ModalData,
useModalManager,
} from "~/subApps/builder/contexts/ModalManager";
import { FormInputField } from "~/tools/js/Shared/components/common/FormInputField";
import { DetailChoice } from "~/tools/js/Shared/containers/DetailChoice";
import { toastMessageActions } from "../../../../Shared/actions";
@@ -195,7 +195,7 @@ class CustomBackgroundManager extends React.PureComponent<
<div className="custom-background-property-value">
<input
type="text"
defaultValue={name ? name : ""}
defaultValue={name || ""}
onBlur={this.handleTextInputBlur.bind(this, "name")}
/>
</div>
@@ -204,7 +204,7 @@ class CustomBackgroundManager extends React.PureComponent<
<div className="custom-background-property custom-background-property-textarea">
<div className="custom-background-property-value">
<textarea
defaultValue={description ? description : ""}
defaultValue={description || ""}
onBlur={this.handleTextInputBlur.bind(this, "description")}
/>
</div>
@@ -471,35 +471,35 @@ class DescriptionManage extends React.PureComponent<Props, State> {
dispatch(characterActions.traitSet(traitType, content));
};
handleHairChange = (value: string): void => {
handleHairChange = (e: FocusEvent<HTMLInputElement>): void => {
const { dispatch } = this.props;
dispatch(characterActions.hairSet(value));
dispatch(characterActions.hairSet(e.target.value));
};
handleSkinChange = (value: string): void => {
handleSkinChange = (e: FocusEvent<HTMLInputElement>): void => {
const { dispatch } = this.props;
dispatch(characterActions.skinSet(value));
dispatch(characterActions.skinSet(e.target.value));
};
handleEyesChange = (value: string): void => {
handleEyesChange = (e: FocusEvent<HTMLInputElement>): void => {
const { dispatch } = this.props;
dispatch(characterActions.eyesSet(value));
dispatch(characterActions.eyesSet(e.target.value));
};
handleHeightChange = (value: string): void => {
handleHeightChange = (e: FocusEvent<HTMLInputElement>): void => {
const { dispatch } = this.props;
dispatch(characterActions.heightSet(value));
dispatch(characterActions.heightSet(e.target.value));
};
handleWeightChange = (value: string): void => {
handleWeightChange = (e: FocusEvent<HTMLInputElement>): void => {
const { dispatch } = this.props;
let parsedValue = HelperUtils.parseInputInt(value);
let parsedValue = this.handleTransformValueToNumberOnBlur(e.target.value);
dispatch(characterActions.weightSet(parsedValue));
};
handleAgeChange = (value: string): void => {
handleAgeChange = (e: FocusEvent<HTMLInputElement>): void => {
const { dispatch } = this.props;
let parsedValue = HelperUtils.parseInputInt(value);
let parsedValue = this.handleTransformValueToNumberOnBlur(e.target.value);
dispatch(characterActions.ageSet(parsedValue));
};
@@ -517,9 +517,9 @@ class DescriptionManage extends React.PureComponent<Props, State> {
return clampedValue;
};
handleGenderChange = (value: string): void => {
handleGenderChange = (e: FocusEvent<HTMLInputElement>): void => {
const { dispatch } = this.props;
dispatch(characterActions.genderSet(value));
dispatch(characterActions.genderSet(e.target.value));
};
handleBackgroundChangePromise = (
@@ -608,9 +608,9 @@ class DescriptionManage extends React.PureComponent<Props, State> {
dispatch(characterActions.lifestyleSet(HelperUtils.parseInputInt(value)));
};
handleFaithChange = (value: string): void => {
handleFaithChange = (e: FocusEvent<HTMLInputElement>): void => {
const { dispatch } = this.props;
dispatch(characterActions.faithSet(value));
dispatch(characterActions.faithSet(e.target.value));
};
handleCustomBackgroundSave = (properties: any): void => {
@@ -716,7 +716,7 @@ class DescriptionManage extends React.PureComponent<Props, State> {
<DetailChoice
{...choice}
choice={choice}
key={choiceId ? choiceId : ""}
key={choiceId || ""}
options={availableOptions}
onChange={this.handleChoiceChange}
choiceInfo={choiceInfo}
@@ -1035,7 +1035,7 @@ class DescriptionManage extends React.PureComponent<Props, State> {
) : (
<HtmlContent
className="description-manage-background-description"
html={shortDescription ? shortDescription : ""}
html={shortDescription || ""}
withoutTooltips
/>
)}
@@ -1325,17 +1325,17 @@ class DescriptionManage extends React.PureComponent<Props, State> {
{alignmentDescriptionNode}
</div>
<div className="description-manage-faith">
<FormInputField
<InputField
label="Faith"
initialValue={faith}
onBlur={this.handleFaithChange}
inputAttributes={
maxLength={512}
inputProps={
{
spellCheck: false,
autoComplete: "off",
} as HTMLAttributes<HTMLInputElement>
}
maxLength={512}
/>
</div>
<div className="description-manage-lifestyle">
@@ -1367,47 +1367,52 @@ class DescriptionManage extends React.PureComponent<Props, State> {
]}
variant="paper"
>
<FormInputField
<InputField
className={styles.inputField}
label="Hair"
initialValue={hair}
onBlur={this.handleHairChange}
maxLength={50}
/>
<FormInputField
<InputField
className={styles.inputField}
label="Skin"
initialValue={skin}
onBlur={this.handleSkinChange}
maxLength={50}
/>
<FormInputField
<InputField
className={styles.inputField}
label="Eyes"
initialValue={eyes}
onBlur={this.handleEyesChange}
maxLength={50}
/>
<FormInputField
<InputField
className={styles.inputField}
label="Height"
initialValue={height}
onBlur={this.handleHeightChange}
maxLength={50}
/>
<FormInputField
<InputField
className={styles.inputField}
label="Weight (lbs)"
type={"number"}
type="number"
initialValue={weight}
onBlur={this.handleWeightChange}
transformValueOnBlur={this.handleTransformValueToNumberOnBlur}
inputAttributes={numberInputAttributes}
inputProps={numberInputAttributes}
/>
<FormInputField
<InputField
className={styles.inputField}
label="Age (Years)"
type={"number"}
type="number"
initialValue={age}
onBlur={this.handleAgeChange}
transformValueOnBlur={this.handleTransformValueToNumberOnBlur}
inputAttributes={numberInputAttributes}
inputProps={numberInputAttributes}
/>
<FormInputField
<InputField
className={styles.inputField}
label="Gender"
initialValue={gender}
onBlur={this.handleGenderChange}
ddb_main/tools/js/CharacterBuilder/containers/pages/HomeBasicInfo/HomeBasicInfo.tsx
+36 -30
View File
@@ -1,5 +1,10 @@
import { Typography } from "@mui/material";
import React, { ChangeEvent, HTMLAttributes, ReactNode } from "react";
import React, {
ChangeEvent,
FocusEvent,
HTMLAttributes,
ReactNode,
} from "react";
import { DispatchProp } from "react-redux";
import {
@@ -24,12 +29,12 @@ import {
import { Dice } from "@dndbeyond/dice";
import { SourceCategoryDescription } from "~/constants";
import { InputField } from "~/subApps/builder/components/InputField";
import { RouteKey } from "~/subApps/builder/constants";
import {
ModalData,
useModalManager,
} from "~/subApps/builder/contexts/ModalManager";
import { FormInputField } from "~/tools/js/Shared/components/common/FormInputField";
import UserRoles from "~/tools/js/Shared/constants/UserRoles";
import PrivacyTypeRadio from "~/tools/js/smartComponents/PrivacyTypeRadio";
@@ -723,66 +728,67 @@ class HomeBasicInfo extends React.PureComponent<Props> {
this.forceUpdate();
}}
/>
<FormInputField
<InputField
label="Long Description"
initialValue={premadeInfo.definition.longDescription}
inputAttributes={inputAttributes}
onBlur={(value: string) => {
premadeInfo.definition.longDescription = value;
inputProps={inputAttributes}
onBlur={(e: FocusEvent<HTMLInputElement>) => {
premadeInfo.definition.longDescription = e.target.value;
this.handlePremadeInfoChanged(premadeInfo);
}}
/>
<FormInputField
<InputField
label="Short Description"
initialValue={premadeInfo.definition.shortDescription}
inputAttributes={inputAttributes}
onBlur={(value: string) => {
premadeInfo.definition.shortDescription = value;
inputProps={inputAttributes}
onBlur={(e: FocusEvent<HTMLInputElement>) => {
premadeInfo.definition.shortDescription = e.target.value;
this.handlePremadeInfoChanged(premadeInfo);
}}
/>
<FormInputField
<InputField
label="Image Url"
initialValue={premadeInfo.definition.imageUrl}
inputAttributes={inputAttributes}
onBlur={(value: string) => {
premadeInfo.definition.imageUrl = value;
inputProps={inputAttributes}
onBlur={(e: FocusEvent<HTMLInputElement>) => {
premadeInfo.definition.imageUrl = e.target.value;
this.handlePremadeInfoChanged(premadeInfo);
}}
/>
<FormInputField
<InputField
label="Image Alt Text"
initialValue={premadeInfo.definition.imageAltText}
inputAttributes={inputAttributes}
onBlur={(value: string) => {
premadeInfo.definition.imageAltText = value;
inputProps={inputAttributes}
onBlur={(e: FocusEvent<HTMLInputElement>) => {
premadeInfo.definition.imageAltText = e.target.value;
this.handlePremadeInfoChanged(premadeInfo);
}}
/>
<FormInputField
<InputField
label="Mobile Image Url"
initialValue={premadeInfo.definition.mobileImageUrl}
inputAttributes={inputAttributes}
onBlur={(value: string) => {
premadeInfo.definition.mobileImageUrl = value;
inputProps={inputAttributes}
onBlur={(e: FocusEvent<HTMLInputElement>) => {
premadeInfo.definition.mobileImageUrl = e.target.value;
this.handlePremadeInfoChanged(premadeInfo);
}}
/>
<FormInputField
<InputField
label="Mobile Image Accessibility"
initialValue={premadeInfo.definition.mobileImageAccessibility}
inputAttributes={inputAttributes}
onBlur={(value: string) => {
premadeInfo.definition.mobileImageAccessibility = value;
inputProps={inputAttributes}
onBlur={(e: FocusEvent<HTMLInputElement>) => {
premadeInfo.definition.mobileImageAccessibility =
e.target.value;
this.handlePremadeInfoChanged(premadeInfo);
}}
/>
<FormInputField
<InputField
label="Theme Color Hex Code"
initialValue={premadeInfo.definition.themeColor}
inputAttributes={inputAttributes}
onBlur={(value: string) => {
premadeInfo.definition.themeColor = value;
inputProps={inputAttributes}
onBlur={(e: FocusEvent<HTMLInputElement>) => {
premadeInfo.definition.themeColor = e.target.value;
this.handlePremadeInfoChanged(premadeInfo);
}}
/>