Grabbed dndbeyond's source code

```
~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js
```

ddb_main/tools/js/smartComponents/DiceRollGroup/DiceRoll/DiceRoll.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback } from "react";
+
+import { RollRequest } from "@dndbeyond/dice";
+
+import LoadingPlaceholder from "../../LoadingPlaceholder";
+import { DataLoadingStatusEnum } from "../../componentConstants";
+import {
+  DiceRollActionNode,
+  DiceRollActionNodeProps,
+} from "./DiceRollActionNode";
+import { DiceRollValues, DiceRollValuesProps } from "./DiceRollValues";
+
+export interface DiceRollProps {
+  rollKey: string;
+  nextRollKey: string | null;
+  rollTotal: number | null;
+  diceRollRequest: RollRequest;
+  onChange?: (
+    key: string,
+    newValue: string | null,
+    prevValue: string | null,
+    nextRollKey: string | null,
+    rollTotal: number | null,
+    rollValues: DiceRollValuesProps["rollValues"]
+  ) => void;
+  onRoll: (
+    key: string,
+    diceRollRequest: RollRequest,
+    nextRollKey: string | null
+  ) => void;
+  rollValues: DiceRollValuesProps["rollValues"];
+  rollStatus: DiceRollActionNodeProps["rollStatus"];
+  options?: DiceRollActionNodeProps["options"];
+  assignedValue: DiceRollActionNodeProps["assignedValue"];
+  rollButtonText?: DiceRollActionNodeProps["rollButtonText"];
+  selectPlaceholderText?: DiceRollActionNodeProps["selectPlaceholderText"];
+}
+const DiceRoll: React.FunctionComponent<DiceRollProps> = ({
+  rollKey,
+  nextRollKey,
+  options,
+  rollTotal,
+  rollValues,
+  assignedValue,
+  diceRollRequest,
+  onChange,
+  onRoll,
+  rollStatus,
+  rollButtonText,
+  selectPlaceholderText,
+}) => {
+  const handleChange = useCallback(
+    (changedValue: string): void => {
+      const prevValue = assignedValue;
+      const newValue: string | null = changedValue ?? null;
+
+      if (newValue !== prevValue) {
+        if (onChange) {
+          onChange(
+            rollKey,
+            newValue,
+            prevValue,
+            nextRollKey,
+            rollTotal,
+            rollValues
+          );
+        }
+      }
+    },
+    [onChange, rollKey, assignedValue, nextRollKey, rollTotal, rollValues]
+  );
+
+  const handleRollClick = useCallback((): void => {
+    onRoll(rollKey, diceRollRequest, nextRollKey);
+  }, [onRoll, rollKey, diceRollRequest, nextRollKey]);
+
+  let contentNode: React.ReactNode = null;
+  switch (rollStatus) {
+    case DataLoadingStatusEnum.LOADING:
+      contentNode = <LoadingPlaceholder label="Rolling" />;
+      break;
+
+    default: {
+      const diceTotalClassNames: Array<string> = ["ddbc-dice-roll__total"];
+      if (rollTotal === null) {
+        diceTotalClassNames.push("ddbc-dice-roll__total--empty");
+      }
+
+      contentNode = (
+        <React.Fragment>
+          <div className={diceTotalClassNames.join(" ")}>
+            <label className="ddbc-dice-roll__total-label" htmlFor={rollKey}>
+              {rollTotal ?? "--"}
+            </label>
+          </div>
+          <div className="ddbc-dice-roll__dice">
+            <DiceRollValues rollValues={rollValues} />
+          </div>
+          <DiceRollActionNode
+            rollKey={rollKey}
+            rollStatus={rollStatus}
+            rollTotal={rollTotal}
+            assignedValue={assignedValue}
+            options={options}
+            onRoll={handleRollClick}
+            onChange={handleChange}
+            rollButtonText={rollButtonText}
+            selectPlaceholderText={selectPlaceholderText}
+          />
+        </React.Fragment>
+      );
+      break;
+    }
+  }
+
+  return <div className="ddbc-dice-roll">{contentNode}</div>;
+};
+
+export default React.memo(DiceRoll);

ddb_main/tools/js/smartComponents/DiceRollGroup/DiceRoll/DiceRollActionNode/DiceRollActionNode.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { HtmlSelectOption } from "@dndbeyond/character-rules-engine/es";
+
+import { DataLoadingStatusEnum } from "../../../componentConstants";
+import { Button } from "../../../legacy/Button";
+import { Select } from "../../../legacy/Select";
+
+export interface DiceRollActionNodeProps {
+  rollKey: string;
+  rollStatus: DataLoadingStatusEnum;
+  rollTotal: number | null;
+  assignedValue: string | null;
+  options?: Array<HtmlSelectOption>;
+  rollButtonText?: string;
+  selectPlaceholderText?: string;
+  onRoll: () => void;
+  onChange?: (newValue: string | null) => void;
+}
+const DiceRollActionNode: React.FunctionComponent<DiceRollActionNodeProps> = ({
+  rollKey,
+  rollStatus,
+  rollTotal,
+  assignedValue,
+  options,
+  onRoll,
+  onChange,
+  rollButtonText = "Roll",
+  selectPlaceholderText = "--",
+}) => {
+  if (options?.length && rollTotal !== null) {
+    return (
+      <Select
+        id={rollKey}
+        value={assignedValue}
+        options={options}
+        placeholder={selectPlaceholderText}
+        onChange={onChange}
+      />
+    );
+  }
+
+  return (
+    <Button
+      size="large"
+      // style='outline'
+      onClick={onRoll}
+    >
+      {rollButtonText}
+    </Button>
+  );
+};
+export default React.memo(DiceRollActionNode);

ddb_main/tools/js/smartComponents/DiceRollGroup/DiceRoll/DiceRollValues/DiceRollValues.tsx

@@ -0,0 +1,64 @@
+import { orderBy } from "lodash";
+import React from "react";
+
+import {
+  RollValueContract,
+  Constants,
+} from "@dndbeyond/character-rules-engine/es";
+
+//eventually use RollValueContract.dieType to display dice svgs
+export interface DiceRollValuesProps {
+  rollValues: Array<RollValueContract>;
+}
+const DiceRollValues: React.FunctionComponent<DiceRollValuesProps> = ({
+  rollValues,
+}) => {
+  if (rollValues.length === 0) {
+    return null;
+  }
+
+  const keptDiceValues = rollValues.filter(
+    (valueContract) =>
+      valueContract.excludeType === Constants.DiceRollExcludeTypeEnum.ALL
+  );
+  const discardedValues = rollValues.filter(
+    (valueContract) =>
+      valueContract.excludeType === Constants.DiceRollExcludeTypeEnum.NONE
+  );
+
+  const orderedKeptDiceValues = orderBy(
+    keptDiceValues,
+    (valueContract) => valueContract.value,
+    "desc"
+  );
+  const orderedDiscardedValues = orderBy(
+    discardedValues,
+    (valueContract) => valueContract.value,
+    "desc"
+  );
+
+  const classNames: Array<string> = ["ddbc-dice-roll__dice-value"];
+
+  return (
+    <React.Fragment>
+      {orderedKeptDiceValues.map((rollValue: RollValueContract, idx) => {
+        return (
+          <div key={idx} className={classNames.join(" ")}>
+            {rollValue.value}
+          </div>
+        );
+      })}
+      {orderedDiscardedValues.map((rollValue: RollValueContract, idx) => {
+        classNames.push("ddbc-dice-roll__dice-value--discarded");
+
+        return (
+          <div key={idx} className={classNames.join(" ")}>
+            {rollValue.value}
+          </div>
+        );
+      })}
+    </React.Fragment>
+  );
+};
+
+export default React.memo(DiceRollValues);