New source found from dndbeyond.com

ddb_main/tools/js/smartComponents/CampaignSummary/CampaignSummary.tsx

@@ -1,5 +1,6 @@
 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";
@@ -8,23 +9,25 @@ import {
   CampaignUtils,
   CharacterTheme,
 } from "@dndbeyond/character-rules-engine/es";
-import D6 from "@dndbeyond/fontawesome-cache/svgs/regular/dice-d6.svg";
+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;
+  campaign: CampaignDataContract | null;
   onCampaignShow?: () => void;
   className?: string;
   gameLog?: GameLogState;
   theme: CharacterTheme;
+  isDesktop?: boolean;
 }
 
 const CampaignSummary: React.FC<Props> = ({
@@ -33,10 +36,12 @@ const CampaignSummary: React.FC<Props> = ({
   className = "",
   gameLog,
   theme,
+  isDesktop,
 }) => {
   const {
     pane: { paneHistoryStart },
   } = useSidebar();
+  const isReadonly = useSelector(appEnvSelectors.getIsReadonly);
 
   const handleClick = (evt: React.MouseEvent): void => {
     evt.nativeEvent.stopImmediatePropagation();
@@ -54,55 +59,66 @@ const CampaignSummary: React.FC<Props> = ({
     paneHistoryStart(PaneComponentEnum.GAME_LOG);
   };
 
+  if (isReadonly) return null;
+
   return (
     <div className={clsx(styles.container)}>
-      <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="maps"
-          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>
-      <GameLogNotificationWrapper
-        themeColor={theme.themeColor}
-        gameLogIsOpen={gameLog?.isOpen ?? false}
-        notificationOnClick={handleGameLogClick}
-      >
-        <Tooltip title="Game Log" isDarkMode={theme.isDarkMode}>
+      {campaign && (
+        <>
           <div
-            role="button"
-            aria-roledescription="Game Log"
-            className={clsx(styles.campaignButtonGroup)}
-            onClick={handleGameLogClick}
+            className={clsx(styles.campaignSummary)}
+            onClick={handleClick}
+            data-testid="campaign-summary"
           >
-            <div className={clsx(styles.campaignButton)}>
-              <D6 className={clsx(styles.campaignButtonIcon)} />
-            </div>
+            <span className={clsx(styles.summaryLabel)}>Campaign:</span>
+            <span className={clsx(styles.summaryName)}>
+              {CampaignUtils.getName(campaign)}
+            </span>
           </div>
-        </Tooltip>
-      </GameLogNotificationWrapper>
+          <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>
   );
 };