New source found from dndbeyond.com
This commit is contained in:
@@ -0,0 +1,386 @@
|
||||
import clsx from "clsx";
|
||||
import {
|
||||
FC,
|
||||
HTMLAttributes,
|
||||
FocusEvent,
|
||||
ChangeEvent,
|
||||
useState,
|
||||
useEffect,
|
||||
} from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import {
|
||||
characterActions,
|
||||
PremadeInfo,
|
||||
PremadeInfoStatus,
|
||||
RuleDataUtils,
|
||||
SimpleSourcedDefinitionContract,
|
||||
} from "@dndbeyond/character-rules-engine";
|
||||
|
||||
import { RadioGroup } from "~/components/RadioGroup";
|
||||
import { Select } from "~/components/Select";
|
||||
import { Toggle } from "~/components/Toggle";
|
||||
import { useCharacterEngine } from "~/hooks/useCharacterEngine";
|
||||
import { useDispatch } from "~/hooks/useDispatch";
|
||||
import { useSource } from "~/hooks/useSource";
|
||||
import { InputField } from "~/subApps/builder/components/InputField";
|
||||
import { useModalManager } from "~/subApps/builder/contexts/ModalManager";
|
||||
import UserRoles from "~/tools/js/Shared/constants/UserRoles";
|
||||
import { appEnvSelectors } from "~/tools/js/Shared/selectors";
|
||||
|
||||
import pageStyles from "../../../styles/page.module.css";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
export interface PremadeFormProps extends HTMLAttributes<HTMLDivElement> {}
|
||||
|
||||
export const PremadeForm: FC<PremadeFormProps> = ({ className, ...props }) => {
|
||||
const dispatch = useDispatch();
|
||||
const { premadeInfo, characterId, ruleData } = useCharacterEngine();
|
||||
const userRoles = useSelector(appEnvSelectors.getUserRoles);
|
||||
const { getGroupedOptionsBySourceCategory } = useSource();
|
||||
const { createModal } = useModalManager();
|
||||
|
||||
const [premadeState, setPremadeState] = useState<PremadeInfo | null>(
|
||||
premadeInfo
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setPremadeState(premadeInfo);
|
||||
}, [premadeInfo]);
|
||||
|
||||
const canAccessPremadeForm =
|
||||
userRoles?.includes(UserRoles.LOREKEEPER) ||
|
||||
userRoles?.includes(UserRoles.ADMIN);
|
||||
|
||||
const inputAttributes = {
|
||||
disabled: !premadeState,
|
||||
} as HTMLAttributes<HTMLInputElement>;
|
||||
|
||||
const sourceOptions: Array<SimpleSourcedDefinitionContract> =
|
||||
RuleDataUtils.getSourceData(ruleData).map((sourceData) => {
|
||||
return {
|
||||
id: sourceData.id,
|
||||
name: sourceData.description,
|
||||
sources: [
|
||||
{
|
||||
pageNumber: null,
|
||||
sourceId: sourceData.id,
|
||||
sourceType: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
const premadePrimarySource = premadeState?.sources?.find(
|
||||
(source) => source.isPrimary
|
||||
);
|
||||
|
||||
const handleAddPremadeInfo = (): void => {
|
||||
const defaultData: PremadeInfo = {
|
||||
characterId: characterId,
|
||||
publishStatus: PremadeInfoStatus.DRAFT,
|
||||
sources: [],
|
||||
definition: {
|
||||
longDescription: null,
|
||||
shortDescription: null,
|
||||
imageUrl: null,
|
||||
imageAltText: null,
|
||||
mobileImageUrl: null,
|
||||
mobileImageAccessibility: null,
|
||||
themeColor: null,
|
||||
},
|
||||
};
|
||||
|
||||
dispatch(characterActions.premadeInfoAdd(defaultData));
|
||||
};
|
||||
|
||||
const handleDeletePremadeInfo = (): void => {
|
||||
dispatch(characterActions.premadeInfoDelete(characterId));
|
||||
};
|
||||
|
||||
const handlePremadeInfoChanged = (premadeInfo: PremadeInfo): void => {
|
||||
setPremadeState(premadeInfo);
|
||||
dispatch(characterActions.premadeInfoUpdate(premadeInfo));
|
||||
};
|
||||
|
||||
const handlePremadePublishStatusChange = (
|
||||
e: ChangeEvent<HTMLInputElement>,
|
||||
newValue: string,
|
||||
oldValue: string,
|
||||
accept: () => void,
|
||||
reject: () => void
|
||||
): void => {
|
||||
if (premadeState) {
|
||||
const content = (
|
||||
<div>
|
||||
<p>
|
||||
Are you sure you want to change the publish status from{" "}
|
||||
<strong>{oldValue}</strong> to <strong>{newValue}</strong>?
|
||||
</p>
|
||||
{newValue === PremadeInfoStatus.PUBLISHED && (
|
||||
<p>
|
||||
<strong>Warning:</strong> Publishing this character will make it
|
||||
publically visible to users on D&D Beyond!! Proceed with Caution!
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
createModal({
|
||||
content,
|
||||
props: {
|
||||
heading: "Confirm Premade Status Change",
|
||||
size: "fit-content",
|
||||
onConfirm: () => {
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
publishStatus: newValue as PremadeInfoStatus,
|
||||
});
|
||||
accept();
|
||||
},
|
||||
onClose: () => {
|
||||
reject();
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isReadyToPublish = (): boolean => {
|
||||
if (!premadeState) return false;
|
||||
if (premadeState.publishStatus === PremadeInfoStatus.PUBLISHED) return true;
|
||||
// check that all fields are filled out before enabling publish
|
||||
return (
|
||||
premadeState.sources.length >= 1 &&
|
||||
premadeState.definition.longDescription !== null &&
|
||||
premadeState.definition.imageUrl !== null &&
|
||||
premadeState.definition.mobileImageUrl !== null &&
|
||||
premadeState.definition.shortDescription !== null &&
|
||||
premadeState.definition.themeColor !== null
|
||||
);
|
||||
};
|
||||
|
||||
const notReadyToPublishDescription = (): string => {
|
||||
if (!premadeState) return "";
|
||||
|
||||
if (premadeState.sources.length === 0) {
|
||||
if (premadeState.publishStatus !== PremadeInfoStatus.PUBLISHED) {
|
||||
return "You must select a source before you can publish this character.";
|
||||
} else {
|
||||
return "This premade was published before sources were required. A source should be added!";
|
||||
}
|
||||
}
|
||||
|
||||
const missingFields: string[] = [];
|
||||
if (!premadeState.definition.longDescription) {
|
||||
missingFields.push("Character Description");
|
||||
}
|
||||
if (!premadeState.definition.imageUrl) {
|
||||
missingFields.push("Image Url");
|
||||
}
|
||||
if (!premadeState.definition.mobileImageUrl) {
|
||||
missingFields.push("Mobile Image Url");
|
||||
}
|
||||
if (!premadeState.definition.shortDescription) {
|
||||
missingFields.push("Mobile Description");
|
||||
}
|
||||
if (!premadeState.definition.themeColor) {
|
||||
missingFields.push("Mobile Card Theme Color");
|
||||
}
|
||||
|
||||
if (missingFields.length > 0) {
|
||||
return `The following fields are required to publish: ${missingFields.join(
|
||||
", "
|
||||
)}`;
|
||||
}
|
||||
|
||||
return "";
|
||||
};
|
||||
|
||||
return canAccessPremadeForm ? (
|
||||
<div className={clsx([styles.premadeForm, className])} {...props}>
|
||||
<h2 className={pageStyles.title}>
|
||||
Premade Character Preferences - Lorekeepers Only
|
||||
</h2>
|
||||
<div className={styles.form}>
|
||||
<div>
|
||||
<label className={styles.label} id="toggle-premade-character">
|
||||
Premade Character
|
||||
</label>
|
||||
<p className={styles.toggleDescription}>
|
||||
Toggle on to make this a premade character. You cannot disable this
|
||||
if the premade status is Published.
|
||||
</p>
|
||||
<Toggle
|
||||
onClick={(isEnabled: boolean) => {
|
||||
isEnabled ? handleAddPremadeInfo() : handleDeletePremadeInfo();
|
||||
}}
|
||||
checked={!!premadeState}
|
||||
color="secondary"
|
||||
aria-labelledby="toggle-premade-character"
|
||||
disabled={
|
||||
premadeState?.publishStatus === PremadeInfoStatus.PUBLISHED
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
{premadeState && (
|
||||
<>
|
||||
<RadioGroup
|
||||
name="premadeStatus"
|
||||
title="Publish Status"
|
||||
description="Mark this character as published when you are ready for it to be publically visible."
|
||||
initialValue={premadeState.publishStatus}
|
||||
options={[
|
||||
{ label: "Draft", value: PremadeInfoStatus.DRAFT },
|
||||
{
|
||||
label: "Published",
|
||||
value: PremadeInfoStatus.PUBLISHED,
|
||||
description: notReadyToPublishDescription(),
|
||||
disabled: !isReadyToPublish(),
|
||||
},
|
||||
{ label: "Archived", value: PremadeInfoStatus.ARCHIVED },
|
||||
]}
|
||||
disabled={!premadeState}
|
||||
onChangeConfirm={handlePremadePublishStatusChange}
|
||||
/>
|
||||
<div>
|
||||
<label className={styles.label} htmlFor="premade-source-mapping">
|
||||
Source
|
||||
</label>
|
||||
<Select
|
||||
id="premade-source-mapping"
|
||||
name="premade-source-mapping"
|
||||
options={getGroupedOptionsBySourceCategory(sourceOptions)}
|
||||
value={premadePrimarySource?.sourceId || null}
|
||||
onChange={(value) => {
|
||||
const sourceData = RuleDataUtils.getSourceDataInfo(
|
||||
Number(value),
|
||||
ruleData
|
||||
);
|
||||
const sources = sourceData
|
||||
? [
|
||||
{
|
||||
sourceId: Number(value),
|
||||
sourceName: sourceData.description || "Unknown",
|
||||
displayOrder: sourceData.premadeDisplayOrder || 1,
|
||||
isPrimary: true,
|
||||
},
|
||||
]
|
||||
: [];
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
sources,
|
||||
});
|
||||
}}
|
||||
placeholder={"-- Choose a Source --"}
|
||||
/>
|
||||
</div>
|
||||
<InputField
|
||||
label="Character Description"
|
||||
initialValue={premadeState.definition.longDescription}
|
||||
inputProps={inputAttributes}
|
||||
onBlur={(e: FocusEvent<HTMLInputElement>) => {
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
definition: {
|
||||
...premadeState.definition,
|
||||
longDescription: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Image Url"
|
||||
initialValue={premadeState.definition.imageUrl}
|
||||
inputProps={inputAttributes}
|
||||
onBlur={(e: FocusEvent<HTMLInputElement>) => {
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
definition: {
|
||||
...premadeState.definition,
|
||||
imageUrl: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Image Alt Text"
|
||||
initialValue={premadeState.definition.imageAltText}
|
||||
maxLength={150}
|
||||
inputProps={inputAttributes}
|
||||
onBlur={(e: FocusEvent<HTMLInputElement>) => {
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
definition: {
|
||||
...premadeState.definition,
|
||||
imageAltText: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<h3 className={styles.mobileHeader}>Mobile Specific Fields</h3>
|
||||
<InputField
|
||||
label="Mobile Description"
|
||||
initialValue={premadeState.definition.shortDescription}
|
||||
inputProps={inputAttributes}
|
||||
onBlur={(e: FocusEvent<HTMLInputElement>) => {
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
definition: {
|
||||
...premadeState.definition,
|
||||
shortDescription: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Mobile Image Url"
|
||||
initialValue={premadeState.definition.mobileImageUrl}
|
||||
inputProps={inputAttributes}
|
||||
onBlur={(e: FocusEvent<HTMLInputElement>) => {
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
definition: {
|
||||
...premadeState.definition,
|
||||
mobileImageUrl: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
label="Mobile Alt Text"
|
||||
initialValue={premadeState.definition.mobileImageAccessibility}
|
||||
inputProps={inputAttributes}
|
||||
maxLength={150}
|
||||
onBlur={(e: FocusEvent<HTMLInputElement>) => {
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
definition: {
|
||||
...premadeState.definition,
|
||||
mobileImageAccessibility: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<InputField
|
||||
className={styles.colorPicker}
|
||||
label="Mobile Card Theme Color"
|
||||
type="color"
|
||||
initialValue={premadeState.definition.themeColor || "#8A9BA8"} // default color provided by Mobile team
|
||||
inputProps={inputAttributes}
|
||||
onBlur={(e: FocusEvent<HTMLInputElement>) => {
|
||||
handlePremadeInfoChanged({
|
||||
...premadeState,
|
||||
definition: {
|
||||
...premadeState.definition,
|
||||
themeColor: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : null;
|
||||
};
|
||||
Reference in New Issue
Block a user