react-dice

Physics driven, 3D dice rolling in React 🎲

Inspired by dndbeyond. Powered by react-three-fiber and use-cannon

🚧 Currently Under Contruction 🚧

Not at all in a working state right now. See current progress here

Useage

Eventual usage should look something like this:

import { DiceProvider, useDice } from 'react-dice'

const App = (): React.FC => (
  <DiceProvider>
    {/* All other components */}
    <RollMe />
  </DiceProvider>
)

const RollMe = (): React.FC => {
  const roll = useDice(
    // specify which dice you're rolling (in this case 3d20s)
    { d20: 3 },
    (result) => {
      // do something with result of roll
    },
    {
      // override config values
      shader: myShader,
      physics: myPhysics
    }
  )

  return <button onClick={roll}>Roll Me!</button>
}

TODO

A brain dump of what i'll be doing.

• Hello world

  • Repo boilerplate and setup
  • Basic proof of concept

• P1: Make it work

  • Figure out exact api (opinionated but a little bit configurable, physics, size, shaders etc)
  • Support all common dice: d4, d6, d8, d10, d12, d20, d100
  • Canvas, camera and bounding box should responsively adapt to screen size and changes
  • Publish first release

• P2: Make it random (Lean on physics not animation)

  • Randomise starting orientation
  • Randomise inital force vector (always directed towards center of screen?)
  • Noisify force magnitude (around some settable mean value)
  • Noisy inital torque (to further randomize collisions)

• P3: Make it look cool:

  • Add actual numbers to dice faces (deltahedron)
  • Add numbers to non-deltahedra
  • Make number patterns match real dice
  • Add some preset shaders/materials (wood, plastic, metal)
  • Add examples of custom shaders
  • Add examples of custom materials using lamina

• Tech debt

  • perhaps use zustand for state managment?
  • debounce/throttle resizes
  • general cleanup/reorg of code