127 lines
3.8 KiB
TypeScript
127 lines
3.8 KiB
TypeScript
import clsx from "clsx";
|
|
import * as React from "react";
|
|
import { useSelector } from "react-redux";
|
|
|
|
import { Tooltip } from "@dndbeyond/character-common-components/es";
|
|
import { ThemedPlayButtonSvg } from "@dndbeyond/character-components/es";
|
|
import {
|
|
CampaignDataContract,
|
|
CampaignUtils,
|
|
CharacterTheme,
|
|
} 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 { PaneComponentEnum } from "../../../../subApps/sheet/components/Sidebar/types";
|
|
import { appEnvSelectors } from "../../Shared/selectors";
|
|
import { GameLogState } from "../../Shared/stores/typings";
|
|
import { NavigationUtils } from "../../Shared/utils";
|
|
import styles from "./styles.module.css";
|
|
|
|
interface Props {
|
|
campaign: CampaignDataContract | null;
|
|
onCampaignShow?: () => void;
|
|
className?: string;
|
|
gameLog?: GameLogState;
|
|
theme: CharacterTheme;
|
|
isDesktop?: boolean;
|
|
}
|
|
|
|
const CampaignSummary: React.FC<Props> = ({
|
|
campaign,
|
|
onCampaignShow,
|
|
className = "",
|
|
gameLog,
|
|
theme,
|
|
isDesktop,
|
|
}) => {
|
|
const {
|
|
pane: { paneHistoryStart },
|
|
} = useSidebar();
|
|
const isReadonly = useSelector(appEnvSelectors.getIsReadonly);
|
|
|
|
const handleClick = (evt: React.MouseEvent): void => {
|
|
evt.nativeEvent.stopImmediatePropagation();
|
|
evt.stopPropagation();
|
|
|
|
if (onCampaignShow) {
|
|
onCampaignShow();
|
|
}
|
|
};
|
|
|
|
const handleGameLogClick = (evt: React.MouseEvent): void => {
|
|
evt.stopPropagation();
|
|
evt.nativeEvent.stopImmediatePropagation();
|
|
// Assuming dispatch is available in props or context
|
|
paneHistoryStart(PaneComponentEnum.GAME_LOG);
|
|
};
|
|
|
|
if (isReadonly) return null;
|
|
|
|
return (
|
|
<div className={clsx(styles.container)}>
|
|
{campaign && (
|
|
<>
|
|
<div
|
|
className={clsx(styles.campaignSummary)}
|
|
onClick={handleClick}
|
|
data-testid="campaign-summary"
|
|
>
|
|
<span className={clsx(styles.summaryLabel)}>Campaign:</span>
|
|
<span className={clsx(styles.summaryName)}>
|
|
{CampaignUtils.getName(campaign)}
|
|
</span>
|
|
</div>
|
|
<Tooltip title="Launch Game" isDarkMode={theme.isDarkMode}>
|
|
<Link
|
|
href={NavigationUtils.getLaunchGameUrl(campaign)}
|
|
target="_blank"
|
|
aria-label="Launch Game"
|
|
>
|
|
<div className={clsx(styles.campaignButtonGroup)}>
|
|
<div className={clsx(styles.campaignButton)}>
|
|
<ThemedPlayButtonSvg
|
|
className={clsx([
|
|
styles.campaignButtonIcon,
|
|
styles.campaignPlayButtonIcon,
|
|
])}
|
|
theme={theme}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</Tooltip>
|
|
</>
|
|
)}
|
|
{isDesktop && (
|
|
<GameLogNotificationWrapper
|
|
themeColor={theme.themeColor}
|
|
gameLogIsOpen={gameLog?.isOpen ?? false}
|
|
notificationOnClick={handleGameLogClick}
|
|
>
|
|
<Tooltip title="Game Log" isDarkMode={theme.isDarkMode}>
|
|
<div
|
|
role="button"
|
|
aria-roledescription="Game Log"
|
|
className={clsx([
|
|
styles.campaignButtonGroup,
|
|
styles.soloGameLogButton,
|
|
])}
|
|
onClick={handleGameLogClick}
|
|
>
|
|
<div className={clsx(styles.campaignButton)}>
|
|
<ListTimeline className={clsx(styles.campaignButtonIcon)} />
|
|
</div>
|
|
</div>
|
|
</Tooltip>
|
|
</GameLogNotificationWrapper>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CampaignSummary;
|