diff --git a/README.md b/README.md index fc0f738..2756281 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,10 @@ const MyDiceApp = () => { const reactDice = useRef(null) + const onRoll = () => { + console.log("Rolling...") + } + const rollDone = (totalValue: number, values: number[]) => { console.log('individual die values array:', values) console.log('total dice value:', totalValue) @@ -37,6 +41,7 @@ const MyDiceApp = () => { numDice={2} ref={reactDice} rollDone={rollDone} + onRoll={onRoll} /> ) @@ -59,6 +64,7 @@ const MyDiceApp = () => { | **`outline`** | `{Bool}` | `false` | Show a 1px outline for each face of the die | | **`outlineColor`** | `{String}` | `#000000` | hex color code for outline color if outline is `true` | | **`rollDone`** | `{String/Function}` | `null` | callback returns total & individual values from dice roll | +| **`onRoll`** | `{Function}` | `null` | callback triggered when die rolls | | **`rollTime`** | `{Number}` | `2` | time in seconds for the roll animation | ## Provided functions diff --git a/lib/DiceContainer.tsx b/lib/DiceContainer.tsx index e8f766c..ecc7e49 100644 --- a/lib/DiceContainer.tsx +++ b/lib/DiceContainer.tsx @@ -16,6 +16,7 @@ export type DieContainerRef = { export interface DiceContainerProps extends Omit { numDice: number + onRoll?: () => void totalCb: (newTotalValue: number, newDiceValues: number[]) => void } diff --git a/lib/Die.tsx b/lib/Die.tsx index 62878c8..59a229f 100644 --- a/lib/Die.tsx +++ b/lib/Die.tsx @@ -14,6 +14,7 @@ export interface DieProps { dotColor?: string faceColor?: string margin?: number + onRoll?: () => void onRollDone: (value: number) => void outline?: boolean outlineColor?: string @@ -32,6 +33,7 @@ const Die = forwardRef( dotColor = '#1dff00', faceColor = '#ff00ac', margin = 15, + onRoll, onRollDone, outline = false, outlineColor = '#000000', @@ -41,7 +43,7 @@ const Die = forwardRef( ref ): JSX.Element => { const dieRef = useRef(null) - + useImperativeHandle(ref, () => ({ getValue: () => { return dieValue @@ -62,6 +64,9 @@ const Die = forwardRef( dieRef.current && (dieRef.current.className = `die`) void dieRef.current?.offsetWidth let roll = disableRandom ? dieValue : value || getRandomInt() + if (onRoll) { + onRoll() + } dieRef.current?.classList.add(`roll${roll}`) setTimeout(() => { setHasRolled(true) diff --git a/package-lock.json b/package-lock.json index 8eef3da..5f63ba5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "react-dice-complete", - "version": "2.2.0", + "version": "2.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "react-dice-complete", - "version": "2.2.0", + "version": "2.3.0", "license": "ISC", "devDependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.8", diff --git a/package.json b/package.json index c38c6e1..3d39f73 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-dice-complete", - "version": "2.2.0", + "version": "2.3.0", "description": "Create dice for any game and roll for totals. Complete UI and Logic", "main": "dist/react-dice-complete.js", "files": [ diff --git a/src/TestApp.tsx b/src/TestApp.tsx index f3c6ad3..b679edc 100644 --- a/src/TestApp.tsx +++ b/src/TestApp.tsx @@ -26,6 +26,10 @@ const TestApp = () => { setDiceTotal(value) } + const handleOnRoll = () => { + console.log('Rolling...'); + } + const rollAll = () => { reactDice.current?.rollAll() setRolling(true) @@ -54,6 +58,7 @@ const TestApp = () => { outline={outline} outlineColor={outlineColor} ref={reactDice} + onRoll={handleOnRoll} rollDone={rollDone} rollTime={rollTime} sides={sides} @@ -71,6 +76,7 @@ const TestApp = () => { numDice, outline, outlineColor, + handleOnRoll, rollDone, rollTime, sides,