¿Cómo crear una aplicación para tirar dados usando ReactJS?

Supongamos que hay dos dados y un botón para tirar los dados. Cuando hacemos clic en el botón, ambos dados se sacuden y generan un nuevo número que se muestra en la cara superior de los dados (en forma de puntos como un dado estándar). Los números que se muestran en la cara superior se generan aleatoriamente cada vez que lanzamos los dados.

Hay dos componentes Die y RollDice . El componente Dado es responsable de mostrar un Dado individual. Es un componente sin estado. Utiliza la biblioteca font-awesome para mostrar los puntos estándar en la cara superior de los dados. El componente RollDice contiene toda la lógica para generar números aleatorios para mostrar en la cara superior de los dados, tira cada dado al hacer clic en el botón de tirada. Hay dos estados involucrados en el componente RollDice llamados ‘die1’ y ‘die2’. Cada uno se ha inicializado con el valor uno, es decir, cada dado muestra uno (un punto) cuando se inicia la aplicación por primera vez. 

Ahora, configuramos el controlador de eventos de clic en el botón de tirada de dados y cuando alguien hace clic en el botón, cambiamos el estado de die1 y die2 a algún número aleatorio usando setState de uno a seis (usamos un número como palabra desde fuente- impresionante biblioteca trata con el número de palabras para mostrar el número exacto de puntos). También nos aseguramos de que cuando los dados estén rodando, el usuario no pueda volver a hacer clic en el botón. Para este propósito, usamos un estado ‘lanzamiento’ inicialmente establecido en falso y cuando los dados están rodando, establezca rodar en verdadero e inicie un temporizador de un segundo. Después de un segundo, vuelva a establecer el estado de balanceo en falso’. Deshabilite el botón cuando un estado variable se establece en verdadero.

Esta es una descripción general aproximada de la aplicación. Vamos a implementarlo para entenderlo mejor.

Módulos requeridos

npm i --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

Ejemplo:

índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
  
ReactDOM.render(<App />, document.querySelector('#root'))

App.js: el componente de la aplicación representa un solo componente RollDice

import React from 'react';
import RollDice from './RollDice'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)
  
function App() {
  return (
    <div>
      <RollDice />
    </div>
  );
}
  
export default App;

RollDice.js: contiene todo lo que hay detrás de la lógica. El controlador de eventos de configuración, que actualiza todos los estados de acuerdo con el componente Die de procesamiento de interacción del usuario. Este archivo tiene que ser creado por usted.

import React,{ Component } from 'react'
import './RollDice.css'
import Die from './Die'
  
class RollDice extends Component{
  
  // Face numbers passes as default props
  static defaultProps = {
    sides : ['one', 'two', 'three', 
             'four', 'five', 'six']
  }
  constructor(props){
    super(props)
      
    // States
    this.state = {
      die1 : 'one',
      die2 : 'one',
      rolling: false
    }
    this.roll = this.roll.bind(this)
  }
  roll(){
    const {sides} = this.props
    this.setState({
      
      // Changing state upon click
      die1 : sides[Math.floor(Math.random() * sides.length)],
      die2 : sides[Math.floor(Math.random() * sides.length)],
      rolling:true
    })
      
    // Start timer of one sec when rolling start
    setTimeout(() => {
      
      // Set rolling to false again when time over
      this.setState({rolling:false})
    },1000)
  }
  
  render(){
    const handleBtn = this.state.rolling ? 
                      'RollDice-rolling' : ''
    const {die1, die2, rolling} = this.state
    return(
      <div className='RollDice'>
        <div className='RollDice-container'>
          <Die face={die1} rolling={rolling}/>
          <Die face={die2} rolling={rolling}/>
        </div>
        <button className={handleBtn}
                disabled={this.state.rolling} 
                onClick={this.roll}>
          {this.state.rolling ? 'Rolling' : 'Roll Dice!'}
        </button>
      </div>
    )
  }
}
  
export default RollDice

Die.js: responsable de mostrar el componente de un solo dado solo con la cara del número punteado correcta según lo comunicado por el componente principal RollDice. Este archivo tiene que ser creado por usted.

import React, {Component} from 'react'
import React, {Component} from 'react'
import './Die.css'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  
class Die extends Component{
render(){
    const {face, rolling} = this.props
      
    // Using font awesome icon to show
    // the exactnumber of dots
    return (
            <div>
                <FontAwesomeIcon icon={['fas', `fa-dice-${face}`]} className={`Die 
                ${rolling && 'Die-shaking'}`} />
            </div >
        )
}
}
  
export default Die

RollDice.css: estilo del contenido del componente RollDice

.RollDice{
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}
  
/* Shows each dice in one row */
.RollDice-container{
  display: flex;
  justify-content: center;
  align-content: center;
}
/* Styling rolldice button */
.RollDice button{
  width:15em;
  padding:1.5em;
  border: 0px;
  border-radius: 10px;
  color:white;
  background-color:black;
  margin-top: 3em;
  align-self: center;
}
  
/* Setting hover effect on button */
.RollDice button:hover{
  cursor: pointer;
}
  
.RollDice-rolling{
  border: 0px;
  border-radius: 10px;
  background-color:darkslateblue !important;
  opacity:0.7
}

Die.css: diseña cada componente del dado y configura el efecto de animación.

/* Styling each Die */
.Die{
  font-size:10em;
  padding:0.25em;
  color:slateblue;
}
  
/* Applying Animation */
.Die-shaking{
  animation-name:wobble;
  animation-duration: 1s;
}
  
/* Setting Animation effect to the 
   dice using css keyframe */
@keyframes wobble {
  from {
    transform: translate3d(0, 0, 0);
  }
  15% {
    transform: translate3d(-25%, 0, 0) 
               rotate3d(0, 0, 1, -5deg);
  }
  30% {
    transform: translate3d(20%, 0, 0) 
               rotate3d(0, 0, 1, 3deg);
  }
  45% {
    transform: translate3d(-15%, 0, 0)
               rotate3d(0, 0, 1, -3deg);
  }
  60% {
    transform: translate3d(10%, 0, 0) 
               rotate3d(0, 0, 1, 2deg);
  }
  75% {
    transform: translate3d(-5%, 0, 0) 
               rotate3d(0, 0, 1, -1deg);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

Producción :