New source found from dndbeyond.com

ddb_main/tools/js/smartComponents/CombatAttack/CombatSpellAttack/CombatSpellAttack.tsx

@@ -13,7 +13,7 @@ import {
   RuleData,
   CharacterTheme,
 } from "@dndbeyond/character-rules-engine/es";
-import { Dice, DiceEvent, IRollContext } from "@dndbeyond/dice";
+import { RollContext } from "@dndbeyond/pocket-dimension-dice/types";
 
 import { NumberDisplay } from "~/components/NumberDisplay";
 import { SpellName } from "~/components/SpellName";
@@ -36,7 +36,7 @@ interface Props {
   className: string;
   diceEnabled: boolean;
   theme: CharacterTheme;
-  rollContext: IRollContext;
+  rollContext: RollContext;
   dataOriginRefData: DataOriginRefData;
   proficiencyBonus: number;
 }
@@ -49,6 +49,7 @@ export default class CombatSpellAttack extends React.PureComponent<
   Props,
   State
 > {
+  private elementRef = React.createRef<React.ReactNode>();
   diceEventHandler: (eventData: any) => void;
 
   constructor(props: Props) {
@@ -65,17 +66,6 @@ export default class CombatSpellAttack extends React.PureComponent<
     diceEnabled: false,
   };
 
-  componentDidMount = () => {
-    this.diceEventHandler = DiceComponentUtils.setupResetCritStateOnRoll(
-      SpellUtils.getName(this.props.spell),
-      this
-    );
-  };
-
-  componentWillUnmount = () => {
-    Dice.removeEventListener(DiceEvent.ROLL, this.diceEventHandler);
-  };
-
   handleClick = (): void => {
     const { onClick, attack } = this.props;
 
@@ -220,7 +210,10 @@ export default class CombatSpellAttack extends React.PureComponent<
       saveDcValue = attackSaveValue;
       saveDcLabel = SpellUtils.getSaveDcAbilityShortName(spell, ruleData);
     }
-    let attackClassNames: Array<string> = ["ddbc-combat-attack--spell", className];
+    let attackClassNames: Array<string> = [
+      "ddbc-combat-attack--spell",
+      className,
+    ];
 
     if (isCriticalHit) {
       attackClassNames.push("ddbc-combat-attack--crit");
@@ -263,6 +256,11 @@ export default class CombatSpellAttack extends React.PureComponent<
             theme={theme}
             isCriticalHit={isCriticalHit}
             rollContext={rollContext}
+            rollCallback={() => {
+              if (isCriticalHit) {
+                this.setState({ isCriticalHit: false });
+              }
+            }}
           />
         }
         onClick={this.handleClick}