New source found from dndbeyond.com

2026-07-08 01:00:09 -07:00
parent 9a983a6d7b
commit dcefa0d2f2
2865 changed files with 222467 additions and 49053 deletions
@@ -0,0 +1,211 @@
+import { clsx } from "clsx";
+import { FC, useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+import { useSearchParams } from "react-router-dom";
+
+import CharacterSheetSvg from "@dndbeyond/fontawesome-cache/svgs/light/address-card.svg";
+import CheckMark from "@dndbeyond/fontawesome-cache/svgs/light/circle-check.svg";
+import PdfSvg from "@dndbeyond/fontawesome-cache/svgs/light/file-pdf.svg";
+
+import { Button } from "~/components/Button";
+import { usePdfExport } from "~/hooks/usePdfExport";
+import pageStyles from "~/subApps/builder/styles/page.module.css";
+import {
+  builderEnvSelectors,
+  builderSelectors,
+} from "~/tools/js/CharacterBuilder/selectors";
+import { appEnvSelectors } from "~/tools/js/Shared/selectors";
+import { ClipboardUtils, MobileMessengerUtils } from "~/tools/js/Shared/utils";
+
+import styles from "./styles.module.css";
+
+export const WhatsNext: FC = () => {
+  const characterId = useSelector(appEnvSelectors.getCharacterId);
+  const characterListingUrl = useSelector(
+    builderEnvSelectors.getProfileCharacterListingUrl
+  );
+  const characterSheetUrl = useSelector(
+    builderEnvSelectors.getCharacterSheetUrl
+  );
+  const isCharacterSheetReady = useSelector(
+    builderSelectors.checkIsCharacterSheetReady
+  );
+  const [searchParams] = useSearchParams();
+  const isVttView = searchParams.get("view") === "vtt";
+
+  const urlInput = useRef<HTMLInputElement>(null);
+
+  const { exportPdf, isLoading, isFinished, pdfUrl } = usePdfExport();
+
+  const [hasCopied, setHasCopied] = useState(false);
+
+  useEffect(() => {
+    if (pdfUrl !== null && isFinished) {
+      urlInput.current?.focus();
+      urlInput.current?.setSelectionRange(0, urlInput.current.value.length);
+    }
+  }, [isFinished, pdfUrl]);
+
+  const handleExportPdf = (evt: React.MouseEvent): void => {
+    if (isCharacterSheetReady && !isLoading && !isFinished) {
+      exportPdf();
+    }
+  };
+
+  const handleClick = (evt: React.MouseEvent): void => {
+    ClipboardUtils.copyTextToClipboard(pdfUrl === null ? "" : pdfUrl);
+    setHasCopied(true);
+  };
+
+  const handleMobileSheetShowClick = () => {
+    if (characterId !== null && isCharacterSheetReady) {
+      MobileMessengerUtils.sendMessage(
+        MobileMessengerUtils.createShowCharacterSheetMessage(characterId)
+      );
+    }
+  };
+
+  const renderPdfData = (): React.ReactNode => {
+    if (!isFinished || pdfUrl === null) {
+      return null;
+    }
+
+    return (
+      <div className={styles.pdfSection}>
+        <div className={styles.pdfInputWrapper}>
+          <label className={styles.pdfDataLabel}>
+            <PdfSvg /> PDF Generated
+          </label>
+
+          <input
+            type="text"
+            value={pdfUrl ? pdfUrl.replace(/https*:\/\//, "") : ""}
+            className={styles.pdfDataInput}
+            ref={urlInput}
+          />
+        </div>
+        <Button
+          className={styles.pdfDataClipboard}
+          size="small"
+          variant="text"
+          onClick={handleClick}
+        >
+          {hasCopied ? <>Copied! &#x2714;</> : "Click to Copy"}
+        </Button>
+        {pdfUrl !== null && (
+          <Button
+            className={styles.button}
+            href={pdfUrl}
+            size={"large"}
+            download={true}
+            variant="builder"
+          >
+            Click to Download
+          </Button>
+        )}
+      </div>
+    );
+  };
+
+  const getPdfButtonText = (): string => {
+    if (isLoading) {
+      return "Exporting PDF...";
+    } else if (isFinished) {
+      return "PDF Generated";
+    }
+    return "Export to PDF";
+  };
+
+  const ButtonLinkProps = {
+    href: characterSheetUrl,
+  };
+  return (
+    <div className={pageStyles.page}>
+      <p>
+        Once you have completed creating your character, you can view your
+        statistics on the digital character sheet or export it for printing.
+      </p>
+
+      <div className={styles.buttonWrapper}>
+        <Button
+          className={styles.button}
+          size="large"
+          variant="builder"
+          disabled={!isCharacterSheetReady}
+          onClick={handleMobileSheetShowClick}
+          {...(isCharacterSheetReady ? ButtonLinkProps : {})}
+        >
+          <CharacterSheetSvg />
+          <span className={styles.buttonText}>
+            View Character Sheet
+            {!isCharacterSheetReady && (
+              <span className={styles.buttonSubText}>
+                Unavailable - Character Incomplete
+              </span>
+            )}
+          </span>
+        </Button>
+        {!isVttView && (
+          <Button
+            className={clsx([
+              styles.button,
+              isFinished && styles.buttonComplete,
+            ])}
+            size="large"
+            variant="builder"
+            disabled={!isCharacterSheetReady}
+            onClick={handleExportPdf}
+          >
+            {!isFinished ? <PdfSvg /> : <CheckMark />}
+            {getPdfButtonText()}
+          </Button>
+        )}
+      </div>
+      {renderPdfData()}
+      {!isCharacterSheetReady && (
+        <p className={styles.returnToHomeText}>
+          If you are unable to create a character due to missing options, return
+          to the <strong>Home</strong> tab and change your source settings.
+        </p>
+      )}
+
+      <div className={styles.section}>
+        {!isVttView && (
+          <Button
+            className={styles.button}
+            variant="builder-text"
+            href={characterListingUrl}
+          >
+            View all my characters
+          </Button>
+        )}
+
+        <h2 className={pageStyles.title}>Come Together</h2>
+
+        <p>
+          Most D&amp;D characters don't work alone. Each character plays a role
+          within a party, a group of adventurers working together for a common
+          purpose. Talk to your fellow players and your DM to decide whether
+          your characters know one another, how they met, and what sorts of
+          quests the group might undertake.
+        </p>
+
+        <p>
+          A campaign is a series of adventures undertaken by your group's
+          characters. If your DM has a campaign, you can join it by visiting the
+          invite link for the campaign. You can also start your own.
+        </p>
+
+        {!isVttView && (
+          <Button
+            variant="builder-text"
+            href="/campaigns/create"
+            className={styles.button}
+          >
+            Start a new campaign
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};