4prakt

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import App from './App';

class Dice extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      faceValue: 0,
      face: "⚀",
      rollCount: 1,
      isRolling: false,
    };
    this.DiceRoll = this.DiceRoll.bind(this);
    this.HandleDiceThrow = this.HandleDiceThrow.bind(this);
    this.rez = 1;

  }

  GenerateRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  DiceRoll() {
    let faceValue = this.GenerateRandomInt(0, 5);
    this.setState({
      rollCount: this.state.rollCount - 1,
      isRolling: (this.state.rollCount > 0),
      faceValue: faceValue,
      face: "&#x" + String(2680 + faceValue) + ";"

    });
    console.log(this.state);
  }

  HandleDiceThrow(){
    if (this.state.isRolling)return;
    let val = this.GenerateRandomInt(5,15);
    this.setState({rollCount: val});
    for (let i = 0; i <= val; i++){
      setTimeout(this.DiceRoll, 50 * i);

    }
    this.rez = this.state.faceValue;

  }

  render() {
    return (
      <div>

        <div onClick={this.HandleDiceThrow} id="diceFace" dangerouslySetInnerHTML={{ __html: `${this.state.face}` }}></div>
        <span>Dice Value: {this.state.faceValue + 1}</span>  <br/>
        <span>Roll: {this.state.rollCount}</span> <br/>
        {this.rez+1} abc
      </div>
    );
  }
}

ReactDOM.render(
  <Dice />,
  document.getElementById('app')
)