adamtyler / react-dice-complete Goto Github PK

View Code? Open in Web Editor NEW

76.0 2.0 26.0 10.12 MB

Complete dice rolling functionality and animations

Home Page: http://adam-tyler.com/react-dice-complete

License: ISC License

HTML 15.38% JavaScript 11.16% SCSS 18.40% TypeScript 55.05%

dice react javscript react-dice roll-dice css3-animations react-component

react-dice-complete's Introduction

React Dice 🎲

Library for creating multisided dice and rolling them. Check out the demo here.

Installation

npm install react-dice-complete

Usage

import React, { useRef } from 'react'
import ReactDice, { ReactDiceRef } from 'react-dice-complete'

const MyDiceApp = () => {

  const reactDice = useRef<ReactDiceRef>(null)

  const rollDone = (totalValue: number, values: number[]) => {
    console.log('individual die values array:', values)
    console.log('total dice value:', totalValue)
  }

  const rollAll = () => {
    reactDice.current?.rollAll()
  }

  return (
    <ReactDice
      numDice={2}
      ref={reactDice}
      rollDone={rollDone}
    />
  )

}

Available Options

Name	Type	Default	Description
`defaultRoll`	`{Number}`	`6`	The number you want displayed before a roll
`dieCornerRadius`	`{Number}`	`5`	Rounded radius to use for each die
`dieSize`	`{Number}`	`60`	px width/height of each dice face
`disableIndividual`	`{Bool}`	`false`	disable clicks on die to roll each individually
`disabbleRandom`	`{Bool}`	`false`	disable random die chance and reuses current value
`dotColor`	`{String}`	`#1eff00`	hex color code for the dots on the die
`faceColor`	`{String}`	`#ff00ac`	hex color code for the face of the die
`margin`	`{Number}`	`15`	margin between each die
`numDice`	`{Number}`	`4`	The number of dice you wish to have
`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
`rollTime`	`{Number}`	`2`	time in seconds for the roll animation

Provided functions

rollAll([values]): rolls all die and calls rollDone with total from roll. You can preset the values you would like the outcome to be by passing array of numbers, if not result will be random.

react-dice-complete's People

Contributors

Stargazers

Watchers

react-dice-complete's Issues

RollDone() doesnt run after rolling the dices for a second time

Hi Adam!

I'm having an issue where, after I decrease the numDice number and roll the dices a second time, it doesnt run the RollDone() callback. You can test it in the demo.

Steps:
-Choose a dice number and roll it
-Decrease the dice number and roll it again

You will see that the rollDone() callback wont be called

Problem window NextjJS

error development react dice complete in nextjs
https://prnt.sc/1slqry6

Functional component example

Hi!
I'd like to see example code for functional component :D

Need react-dice-complete Library for React Native

Can you please provide react-dice-complete library for react native.

Thanks

Setting default values for multiple dice

How can we specify values for individual dice by default?

[enhancement]Increasing Number of Sides

Hi, great project!

How could I go about increasing the number of sides on the dice..? Perhaps to 10
Would it be a matter of increasing the number of f(num)Style and changing sides: to e.g 10
Thanks in advance.

React native support road map

Will it support react native?
Any future plans for this in road map?

Setting up next rolled value

Is there any way to set up different value before every roll? I want to get random value from server and send it to react component.

Enable user to specify that the corners of dice should be rounded.

change default value from 6

I would like to change the default (unrolled) value of the dice from 6 to something else via props (and leave it to 6 if no default value is present in props). demo of my game

an even nicer feature would be to change the default face of the dice to something custom (question mark, text 'push', clicking finger, ...) so that users are pushed to click it.

do you plan such enhancement? thanks

Typescript support

Hi Guys,

Thanks for maintaining this component. is there any change you guys add Typescript support?

Related issue: #66

Thanks...

Blinking colors across entire page issue

I get the colors of the dice face flashing all across the page in rays while the dice are rolling. This is only in Chrome 87...I'm unable to replicate in Firefox. Ubuntu 20.04 for both.

Here is an Imgur link to a GIF I made. I rolled the dice 4 times, and it only did it on the second and fourth rolls. It seems to be intermittent.

https://imgur.com/H9Ute1Y

Hi, I've just upgraded my project to React 18 and found the dice has broken. Everything works except the value returned on the rollDone callback doesn't match the value of the face of the dice. Any possibility this could get fixed? Thanks.

Edit: it looks like the value being returned is the previous rolled value.

Support for react native

Will it support react native?
Any future plans for this in road map?

coming previous values as current value on roll dice done

how to get the value of the dice individually

how to get the value of the dice individually when they are thrown together and not the sum of them

react-dice-complete vs react-dice

npm install react-dice-complete
or
npm install react-dice

What's the difference?
Caused me bit of confusion before. Unblocked myself but thought it would be worth submitting some feedback!

PropTypes Deprecation

Greetings, thanks for the work on this, made life easier :-)

React is complaining about the deprecated internal PropTypes (replaced by the separate 'prop-types' package) in Die.js and ReactDice.js

I'd rather not fork it for my current project but will if you don't want to change the master?

Dice become invisible on IPhone/IPad

while rolling the dice on IPhone or IPad the dice vanished

Dice rolling automatically on render

This seems to have cropped up from nowhere. It used to be that it wouldn't roll on render, but suddenly everywhere I try it the dice is automatically rolling with the value 4.

I was able to reproduce it in Sandbox, but it's weird because I'm not getting the same behaviour on my main production branch, using the same version and I can't figure out why.

https://codesandbox.io/s/busy-keldysh-oefwf?file=/src/App.js

Can't resolve 'react-dice-complete/dist/react-dice-complete.css

Hi Guys,

Thanks for working on the changes for React 18 and Typescript. I was testing version 2.1.0 and seems like the package is failing when compiling the app.

`
import React, { useRef } from 'react'
import ReactDice, { ReactDiceRef } from 'react-dice-complete'

const MyDiceApp = () => {

const reactDice = useRef(null)

const rollDone = (totalValue: number, values: number[]) => {
console.log('individual die values array:', values)
console.log('total dice value:', totalValue)
}

const rollAll = () => {
reactDice.current?.rollAll()
}

render() {
return (

)
}

}

`
React: 18.2.0
Typescript: 4.9.5

Error:

`Module not found: Error: Can't resolve 'react-dice-complete/dist/react-dice-complete.css'

Thanks...

rollDoneCallback called on render of dice

I've noticed that the rollDoneCallback is called on render of the dice at the default state (6).

With the example in the readme

  rollDoneCallback(num) {
    console.log(`You rolled a ${num}`)
  }

Upon refreshing, I noticed that I received a 'You rolled a 12'

Is this behaviour expected?

Preventing default roll

Hi,
is it possible to prevent the default roll of the dice when first renders, and just keep the roll-on-click behavior?

thanks,
Nektarios