New source found from dndbeyond.com

ddb_main/subApps/sheet/components/InitiativeBox/InitiativeBox.tsx

@@ -1,34 +1,36 @@
-import { visuallyHidden } from "@mui/utils";
 import clsx from "clsx";
-import { FC, HTMLAttributes, useContext } from "react";
+import { FC, HTMLAttributes } from "react";
 import { useSelector } from "react-redux";
+
 import {
   AdvantageIcon,
   BoxBackground,
   DigitalDiceWrapper,
   InitiativeBoxSvg,
 } from "@dndbeyond/character-components/es";
-import { DiceTools, RollKind, RollType } from "@dndbeyond/dice";
-import { GameLogContext } from "@dndbeyond/game-log-components";
+import {
+  RollKinds,
+  RollTypes,
+} from "@dndbeyond/pocket-dimension-dice/constants";
+
+import { NumberDisplay } from "~/components/NumberDisplay";
 import { useCharacterTheme } from "~/contexts/CharacterTheme";
 import { useSidebar } from "~/contexts/Sidebar";
 import { useCharacterEngine } from "~/hooks/useCharacterEngine";
+import a11yStyles from "~/styles/accessibility.module.css";
 import {
   appEnvSelectors,
   characterRollContextSelectors,
 } from "~/tools/js/Shared/selectors";
-import { isNotNullOrUndefined } from "~/tools/js/Shared/utils/TypeScript/utils";
+
 import { PaneComponentEnum } from "../Sidebar/types";
 import styles from "./styles.module.css";
-import { NumberDisplay } from "~/components/NumberDisplay";
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   isMobile?: boolean;
   isTablet?: boolean;
 }
 export const InitiativeBox: FC<Props> = ({ isMobile, isTablet, ...props }) => {
-  const [{ messageTargetOptions, defaultMessageTargetOption, userId }] =
-    useContext(GameLogContext);
   const {
     pane: { paneHistoryStart },
   } = useSidebar();
@@ -40,9 +42,10 @@ export const InitiativeBox: FC<Props> = ({ isMobile, isTablet, ...props }) => {
 
   const {
     hasInitiativeAdvantage,
-    processedInitiative: initiative,
+    processedInitiative,
     characterTheme: theme,
   } = useCharacterEngine();
+  const initiative = Number(processedInitiative);
   const { isDarkMode } = useCharacterTheme();
 
   const diceEnabled = useSelector(appEnvSelectors.getDiceEnabled);
@@ -71,35 +74,32 @@ export const InitiativeBox: FC<Props> = ({ isMobile, isTablet, ...props }) => {
         {!isMobile && (
           <>
             <BoxBackground StyleComponent={InitiativeBoxSvg} theme={theme} />
-            <h2 style={visuallyHidden}>Initiative</h2>
+            <h2 className={a11yStyles.screenreaderOnly}>Initiative</h2>
           </>
         )}
-        
         <DigitalDiceWrapper
-          diceNotation={DiceTools.CustomD20(initiative)}
-          rollType={RollType.Roll}
-          rollAction={"Initiative"}
-          rollKind={hasInitiativeAdvantage ? RollKind.Advantage : RollKind.None}
-          diceEnabled={diceEnabled}
-          themeColor={theme.themeColor}
-          rollContext={rollContext}
-          rollTargetOptions={
-            messageTargetOptions?.entities
-              ? Object.values(messageTargetOptions?.entities).filter(
-                  isNotNullOrUndefined
-                )
-              : undefined
-          }
-          rollTargetDefault={defaultMessageTargetOption}
-          userId={Number(userId)}
+          diceNotation={`1d20${
+            initiative > 0
+              ? `+${initiative}`
+              : initiative !== 0
+              ? initiative
+              : ""
+          }`}
+          rollType={RollTypes.Roll}
+          action="Initiative"
+          rollKind={hasInitiativeAdvantage ? RollKinds.Advantage : undefined}
+          isDiceEnabled={diceEnabled}
+          entityId={String(rollContext.entityId)}
+          entityType={String(rollContext.entityType)}
+          name={String(rollContext.name)}
         >
           <NumberDisplay
-              number={initiative}
-              type="signed"
-              size="large"
-              className={clsx([
-                isMobile && !theme.isDarkMode && styles.numberColorOverride,
-              ])}
+            number={initiative}
+            type="signed"
+            size="large"
+            className={clsx([
+              isMobile && !theme.isDarkMode && styles.numberColorOverride,
+            ])}
           />
         </DigitalDiceWrapper>
       </div>