Rock, Scissor, Paper Game

index.html

<div id="root"></div>

rock-scissor-paper-game.markdown

Rock, Scissor, Paper Game

A Pen by Alexio Vay on CodePen.

License.

script.babel

class Game extends React.Component {  
  constructor(props) {
    super(props);
    
    // Prevent losing data through browser refresh:
    let wins = 0;
    let loses = 0;
    if (sessionStorage.getItem("wins")) wins = sessionStorage.getItem("wins");
    if (sessionStorage.getItem("loses")) loses = sessionStorage.getItem("loses");
    
    this.state = {
      wins: wins,
      loses: loses,
      active: false,
      weapons: { rock: '✊🏻', paper: '✋🏻', scissor: '✌🏻' }
    };
    this.changeState = this.changeState.bind(this);    
  }  
  
  resetGame = () => {
    this.setState({ wins: 0, loses: 0 });  
    // Clear sessionStorage if available:
    if (sessionStorage.getItem("wins") && sessionStorage.getItem("loses"))
      sessionStorage.clear();
    if (window.pcRound)
      clearInterval(window.pcRound);
  }   
  
  pcVsPc = () => {
    window.pcRound = setInterval(() => { 
      let elements = ['rock', 'paper', 'scissor'];
      let item = elements[Math.floor(Math.random()*elements.length)];
      let link = document.getElementById(item);
      link.click();
    }, 1000);
  }      
  
  changeState = () => {    
    let min = Math.ceil(1);
    let max = Math.floor(3);
    let rand = Math.floor(Math.random() * (max - min + 1)) + min; 
    let myChoice = event.target.id + ' ' + this.state.weapons[event.target.id];
    let pcChoice;
    let enemyResponse = myChoice + " vs. ";
    let addWins = this.state.wins;
    let addLoses = this.state.loses;
    let calcResult;
    
    // Enemy Response:
    switch (rand) {
      case 1: // Rock
        pcChoice = this.state.weapons['rock'] + ' rock';
        if (event.target.id === 'rock') calcResult = 'draw';
        else if (event.target.id === 'scissor') calcResult = 'lose';
        else calcResult = 'win';
      break; 
      case 2: // Scissor
        pcChoice = this.state.weapons['scissor'] + ' scissor';
        if (event.target.id === 'rock') calcResult = 'win';
        else if (event.target.id === 'scissor') calcResult = 'draw';
        else calcResult = 'lose';        
      break; 
      case 3: // Paper
        pcChoice = this.state.weapons['paper'] + ' paper';
        if (event.target.id === 'rock') calcResult = 'lose';
        else if (event.target.id === 'scissor') calcResult = 'win';
        else calcResult = 'draw';        
    }
    enemyResponse = enemyResponse + pcChoice;
    console.log(calcResult + ': ' + enemyResponse);    
    
    // Only change results when 'win' or 'lose', not when 'draw':
    if (calcResult === 'win') {
      addWins = parseInt(this.state.wins) + 1;
    } else if (calcResult === 'lose') {
      addLoses = parseInt(this.state.loses) + 1;
    } 
    sessionStorage.setItem("wins", addWins);
    sessionStorage.setItem("loses", addLoses); 
    
    this.setState({ 
      id: event.target.id,
      active: true,
      enemy: enemyResponse,
      result: calcResult,
      wins: addWins,
      loses: addLoses,
      });  
    }
      
    renderGame(i) {
      return <Game />;
    }

  render() {    
    return (
      <div className="game">
        <div id="result" className={this.state.result}>{this.state.result}</div>        
        <div class="status">{this.state.wins}:{this.state.loses}</div>        
        <ul class="weapons">
          <li id="rock" onClick={this.changeState} 
            className={this.state.id == "rock" ? 'fadeIn' : 'fadeOut'}>{this.state.weapons['rock']}</li>
          <li id="scissor" onClick={this.changeState} 
            className={this.state.id == "scissor" ? 'fadeIn': 'fadeOut'}>{this.state.weapons['scissor']}</li>
          <li id="paper" onClick={this.changeState} 
            className={this.state.id == "paper" ? 'fadeIn': 'fadeOut'}>{this.state.weapons['paper']}</li>
        </ul>
        <ul class="enemy">
          <li className={this.changeState ? 'fadeIn': 'fadeOut'}>{this.state.enemy}</li>
        </ul>      
        <button onClick={this.pcVsPc}>PC vs. PC</button> <button onClick={this.resetGame}>reset</button>
      </div> 
    );
  }
}

ReactDOM.render(<Game />, document.getElementById('root'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>

style.css

body {
  font: 20px "Century Gothic", Futura, sans-serif;
  font-weight: bold;
  margin: 0;
  width: 100%;
}
ul {
  width: 100%;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#result {
  text-align: center;
  font-size: 25px;
  font-family: Courier;
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.status {
  width: 100%;
  font-size: 40px;
  padding-top: 60px;
  text-align: center;
  display: block;
}
.weapons {
  font-size: 54px;
  padding: 20px 0;
  text-align: center;
}
.weapons:hover {
  cursor: pointer;
}
.weapons li {
  display: inline;
     -moz-user-select: none;
      -ms-user-select: none;
   -khtml-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;  
}
.enemy li {
  width: 100%;
  border-top: 1px dotted #ccc;
  padding: 20px 0 35px;
  text-align: center;
  font-size: 30px;
}
.fadeOut {
  opacity:0.3;
  transition: all .5s;
}
.fadeIn {
  opacity:1;
  transition: all .5s;
}
button {
  width: 100px;
  height: 35px;
  background: #ccc;
  border: none;
  border-radius: 8px;
  font-family: Courier;
}
.game {
  text-align: center;
}
.win {
  color: green;
}
.draw {
  color: orange;
}
.lose {
  color: red;
}