New source found from dndbeyond.com
This commit is contained in:
+90
-74
@@ -1,5 +1,8 @@
|
||||
import React from "react";
|
||||
import clsx from "clsx";
|
||||
import React, { FC } from "react";
|
||||
import { connect, DispatchProp } from "react-redux";
|
||||
import { useSearchParams } from "react-router-dom";
|
||||
import { AnyAction } from "redux";
|
||||
|
||||
import { Tooltip } from "@dndbeyond/character-common-components/es";
|
||||
import {
|
||||
@@ -22,20 +25,26 @@ import {
|
||||
RuleData,
|
||||
rulesEngineSelectors,
|
||||
} from "@dndbeyond/character-rules-engine/es";
|
||||
import ListTimeline from "@dndbeyond/fontawesome-cache/svgs/light/list-timeline.svg";
|
||||
import { GameLogNotificationWrapper } from "@dndbeyond/game-log-components";
|
||||
|
||||
import { Link } from "~/components/Link";
|
||||
import { useSidebar } from "~/contexts/Sidebar";
|
||||
import { PaneInfo } from "~/contexts/Sidebar/Sidebar";
|
||||
import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
|
||||
import { WatchTourDialog } from "~/subApps/sheet/components/WatchTourDialog";
|
||||
import { GameLogState } from "~/tools/js/Shared/stores/typings";
|
||||
|
||||
import { appEnvSelectors } from "../../../Shared/selectors";
|
||||
import StatusSummaryMobile from "../../components/StatusSummaryMobile";
|
||||
import WatchTourDialog from "../../components/WatchTourDialog";
|
||||
import { sheetAppSelectors } from "../../selectors";
|
||||
import { SheetAppState } from "../../typings";
|
||||
import { CharacterHeaderInfo } from "../CharacterHeaderInfo";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
interface Props extends DispatchProp {
|
||||
// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
|
||||
// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
|
||||
interface Props extends DispatchProp<AnyAction> {
|
||||
hitPointInfo: HitPointInfo;
|
||||
fails: number;
|
||||
successes: number;
|
||||
@@ -50,84 +59,67 @@ interface Props extends DispatchProp {
|
||||
theme: CharacterTheme;
|
||||
status: CharacterStatusSlug | null;
|
||||
paneHistoryStart: PaneInfo["paneHistoryStart"];
|
||||
gameLog?: GameLogState;
|
||||
}
|
||||
class CharacterHeaderTablet extends React.PureComponent<Props> {
|
||||
handleCampaignShow = (): void => {
|
||||
const { paneHistoryStart } = this.props;
|
||||
const CharacterHeaderTablet: FC<Props> = ({
|
||||
paneHistoryStart,
|
||||
isReadonly,
|
||||
dispatch,
|
||||
inspiration,
|
||||
items,
|
||||
hitPointInfo,
|
||||
fails,
|
||||
successes,
|
||||
deathCause,
|
||||
builderUrl,
|
||||
preferences,
|
||||
ruleData,
|
||||
theme,
|
||||
status,
|
||||
gameLog,
|
||||
campaign,
|
||||
}) => {
|
||||
const [searchParams] = useSearchParams();
|
||||
const isVttView = searchParams.get("view") === "vtt";
|
||||
const handleCampaignShow = (): void => {
|
||||
paneHistoryStart(PaneComponentEnum.CAMPAIGN);
|
||||
};
|
||||
|
||||
handleShortResetClick = (evt: React.MouseEvent): void => {
|
||||
const { paneHistoryStart } = this.props;
|
||||
|
||||
const handleShortResetClick = (evt: React.MouseEvent): void => {
|
||||
evt.stopPropagation();
|
||||
evt.nativeEvent.stopImmediatePropagation();
|
||||
|
||||
paneHistoryStart(PaneComponentEnum.SHORT_REST);
|
||||
};
|
||||
|
||||
handleGameLogClick = (evt: React.MouseEvent): void => {
|
||||
const { paneHistoryStart } = this.props;
|
||||
|
||||
const handleGameLogClick = (evt: React.MouseEvent): void => {
|
||||
evt.stopPropagation();
|
||||
evt.nativeEvent.stopImmediatePropagation();
|
||||
|
||||
paneHistoryStart(PaneComponentEnum.GAME_LOG);
|
||||
};
|
||||
|
||||
handleLongResetClick = (evt: React.MouseEvent): void => {
|
||||
const { paneHistoryStart } = this.props;
|
||||
|
||||
const handleLongResetClick = (evt: React.MouseEvent): void => {
|
||||
evt.stopPropagation();
|
||||
evt.nativeEvent.stopImmediatePropagation();
|
||||
|
||||
paneHistoryStart(PaneComponentEnum.LONG_REST);
|
||||
};
|
||||
|
||||
handleShareClick = (evt: React.MouseEvent): void => {
|
||||
const { paneHistoryStart } = this.props;
|
||||
|
||||
const handleShareClick = (evt: React.MouseEvent): void => {
|
||||
evt.stopPropagation();
|
||||
evt.nativeEvent.stopImmediatePropagation();
|
||||
|
||||
paneHistoryStart(PaneComponentEnum.SHARE_URL);
|
||||
};
|
||||
|
||||
handleHealthSummaryClick = (): void => {
|
||||
const { paneHistoryStart, isReadonly } = this.props;
|
||||
|
||||
const handleHealthSummaryClick = (): void => {
|
||||
if (!isReadonly) {
|
||||
paneHistoryStart(PaneComponentEnum.HEALTH_MANAGE);
|
||||
}
|
||||
};
|
||||
|
||||
handleInspirationClick = (): void => {
|
||||
const { inspiration, dispatch } = this.props;
|
||||
|
||||
const handleInspirationClick = (): void => {
|
||||
dispatch(characterActions.inspirationSet(!inspiration));
|
||||
};
|
||||
|
||||
hasMagicItem = (): boolean => {
|
||||
const { items } = this.props;
|
||||
|
||||
const hasMagicItem = (): boolean => {
|
||||
return !!items.find((item) => ItemUtils.isMagic(item));
|
||||
};
|
||||
|
||||
renderSideContent = (): React.ReactNode => {
|
||||
const {
|
||||
hitPointInfo,
|
||||
fails,
|
||||
successes,
|
||||
deathCause,
|
||||
inspiration,
|
||||
builderUrl,
|
||||
preferences,
|
||||
isReadonly,
|
||||
ruleData,
|
||||
theme,
|
||||
status,
|
||||
} = this.props;
|
||||
|
||||
const renderSideContent = (): React.ReactNode => {
|
||||
if (isReadonly) {
|
||||
if (status === CharacterStatusSlug.PREMADE) {
|
||||
return (
|
||||
@@ -137,7 +129,7 @@ class CharacterHeaderTablet extends React.PureComponent<Props> {
|
||||
);
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<>
|
||||
<div className="ct-character-header-tablet__group ct-character-header-tablet__group--summary">
|
||||
<StatusSummaryMobile
|
||||
hitPointInfo={hitPointInfo}
|
||||
@@ -146,24 +138,24 @@ class CharacterHeaderTablet extends React.PureComponent<Props> {
|
||||
inspiration={inspiration}
|
||||
ruleData={ruleData}
|
||||
deathCause={deathCause}
|
||||
onHealthClick={this.handleHealthSummaryClick}
|
||||
onInspirationClick={this.handleInspirationClick}
|
||||
onHealthClick={handleHealthSummaryClick}
|
||||
onInspirationClick={handleInspirationClick}
|
||||
isInteractive={!isReadonly}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<>
|
||||
{preferences !== null &&
|
||||
preferences.privacyType ===
|
||||
Constants.PreferencePrivacyTypeEnum.PUBLIC && (
|
||||
<div className="ct-character-header-tablet__group ct-character-header-tablet__group--share">
|
||||
<div
|
||||
className="ct-character-header-tablet__button"
|
||||
onClick={this.handleShareClick}
|
||||
onClick={handleShareClick}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
@@ -176,10 +168,16 @@ class CharacterHeaderTablet extends React.PureComponent<Props> {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="ct-character-header-tablet__group ct-character-header-tablet__group--short-rest">
|
||||
<div
|
||||
className={clsx([
|
||||
"ct-character-header-tablet__group",
|
||||
"ct-character-header-tablet__group--short-rest",
|
||||
styles.shortRest,
|
||||
])}
|
||||
>
|
||||
<div
|
||||
className="ct-character-header-tablet__button"
|
||||
onClick={this.handleShortResetClick}
|
||||
onClick={handleShortResetClick}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
@@ -194,7 +192,7 @@ class CharacterHeaderTablet extends React.PureComponent<Props> {
|
||||
<div className="ct-character-header-tablet__group ct-character-header-tablet__group--long-rest">
|
||||
<div
|
||||
className="ct-character-header-tablet__button"
|
||||
onClick={this.handleLongResetClick}
|
||||
onClick={handleLongResetClick}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
@@ -206,6 +204,26 @@ class CharacterHeaderTablet extends React.PureComponent<Props> {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{!isVttView && (
|
||||
<div className={styles.campaignButtonContainer}>
|
||||
<GameLogNotificationWrapper
|
||||
themeColor={theme.themeColor}
|
||||
gameLogIsOpen={gameLog?.isOpen ?? false}
|
||||
notificationOnClick={handleGameLogClick}
|
||||
>
|
||||
<div
|
||||
role="button"
|
||||
aria-roledescription="Game Log"
|
||||
className={clsx(styles.campaignButtonGroup)}
|
||||
onClick={handleGameLogClick}
|
||||
>
|
||||
<div className={clsx(styles.campaignButton)}>
|
||||
<ListTimeline className={clsx(styles.campaignButtonIcon)} />
|
||||
</div>
|
||||
</div>
|
||||
</GameLogNotificationWrapper>
|
||||
</div>
|
||||
)}
|
||||
<div className="ct-character-header-tablet__group ct-character-header-tablet__group--builder">
|
||||
<Tooltip
|
||||
isDarkMode={theme.isDarkMode}
|
||||
@@ -215,7 +233,7 @@ class CharacterHeaderTablet extends React.PureComponent<Props> {
|
||||
<Link
|
||||
href={builderUrl}
|
||||
className="ct-character-header-tablet__builder-link"
|
||||
useRouter
|
||||
userouter
|
||||
>
|
||||
<LightBuilderSvg />
|
||||
</Link>
|
||||
@@ -229,27 +247,24 @@ class CharacterHeaderTablet extends React.PureComponent<Props> {
|
||||
deathCause={deathCause}
|
||||
inspiration={inspiration}
|
||||
ruleData={ruleData}
|
||||
onHealthClick={this.handleHealthSummaryClick}
|
||||
onInspirationClick={this.handleInspirationClick}
|
||||
onHealthClick={handleHealthSummaryClick}
|
||||
onInspirationClick={handleInspirationClick}
|
||||
isInteractive={!isReadonly}
|
||||
/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="ct-character-header-tablet">
|
||||
<div className="ct-character-header-tablet__group ct-character-header-tablet__group-tidbits">
|
||||
<CharacterHeaderInfo />
|
||||
</div>
|
||||
<div className="ct-character-header-tablet__group ct-character-header-tablet__group--gap" />
|
||||
{this.renderSideContent()}
|
||||
return (
|
||||
<div className="ct-character-header-tablet">
|
||||
<div className="ct-character-header-tablet__group ct-character-header-tablet__group-tidbits">
|
||||
<CharacterHeaderInfo />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
{renderSideContent()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function mapStateToProps(state: SheetAppState) {
|
||||
return {
|
||||
@@ -266,6 +281,7 @@ function mapStateToProps(state: SheetAppState) {
|
||||
deathCause: rulesEngineSelectors.getDeathCause(state),
|
||||
theme: rulesEngineSelectors.getCharacterTheme(state),
|
||||
status: characterSelectors.getStatusSlug(state),
|
||||
gameLog: appEnvSelectors.getGameLog(state),
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user