<ul id="moves">
  <li data-move="rock">
    <span class="fa fa-fw fa-hand-rock-o"></span>
    <span class="text">Rock</span>
  </li>
  <li data-move="paper">
    <span class="fa fa-fw fa-hand-paper-o"></span>
    <span class="text">Paper</span>
  </li>
  <li data-move="scissors">
    <span class="fa fa-fw fa-hand-scissors-o"></span>
    <span class="text">Scissors</span>
  </li>
</ul>
<div class="scoreboard">
  <table>
    <thead>
      <td>Player</td>
      <td>Computer</td>
    </thead>
    <tbody>
      <tr>
        <td class="Player-count">0</td>
        <td class="Computer-count">0</td>
      </tr>
    </tbody>
  </table>
</div>
// Observify Colours
$light-blue: #edf0f9;
$dark-blue: #151e28;
$blue: #019cdf;
$green: #35b197;
$red: #e94d5a;
$orange: #f66e3a;
$pink: #f583b6;
$purple: #7e4894;
$black: #000000;
$white: #ffffff;

// Variables
$body-bg: $dark-blue;
$color: $light-blue;
$font: 'Open Sans', sans-serif;
$font-size: 16px;

@keyframes icon-animation {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); }
  60% { opacity: 0;} 
  80% { transform: scale(0.5); }
  90% { opacity: 0; }
}

body {
  background-color: $body-bg;
  color: $color;
  font-family: $font;
  font-size: $font-size;
}

// Put your prototype code here
#moves {
  list-style: none;
  width: 100%;
  padding: 0;
  display: flex;
  
  li {
    background: $green;
    width: 33.33%;
    margin: 1em;
    
    &:hover {
      background: lighten($green, 10);
    }

    &:active {
      background: $orange;
    }
    
    .fa {
      display: block;
      font-size: 48px;
      text-align: center;
      width: 100%;
      padding: 1em;
      box-sizing: border-box;
      
      &.animating {
        animation: icon-animation 2s 1;
      }
    }

    .text {
      text-align: center;
      width: 100%;
      display: block;
      padding-bottom: 2em;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      font-weight: 600;
      font-size: 11px;
    }
  }
}

.scoreboard {
  width: 100%;
  
  table {
    width: 100%;
    background: lighten($body-bg, 3);
    
    td {
      padding: .5em;
      box-sizing: border-box;
      text-align: center;
      text-transform: uppercase;
    }

    thead {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.2em;
      
      td {
        padding-top: 2em;
      }
    }

    tbody {
      td {
        font-size: 96px;
        font-weight: 900;
        line-height: 1em;
      }
    }
  }
}
View Compiled
$(window).load(function() {
  
  var movesContainer = $('#moves'),
      playerCount = $('.Player-count'),
      computerCount = $('.Computer-count');
  
  $('#moves li').on("click", function() {
    var yourMove = $(this).data('move');
    processMoves(yourMove);
    
    var icon = $(this).find('.fa');
    icon.addClass('animating');
    
    var s = setTimeout(function(icon) {
      $('#moves li .fa').removeClass('animating');
      clearTimeout();
    }, 5000);
  });
  
});

function processMoves(yourMove) {
  var opponentMove = generateRandomOpponentMove();
  calculateWinner(yourMove,opponentMove);
}

function generateRandomOpponentMove() {
  var availableMoves = ['rock','paper','scissors'],
      randomNumber = Math.floor(Math.random() * availableMoves.length),
      opponentMove = availableMoves[randomNumber];
  
  return opponentMove;
}

function calculateWinner(yourMove, opponentMove) {
  switch(yourMove) {
    case 'rock':
      if(opponentMove === 'rock') {
        return 'draw';
      } else if (opponentMove === 'scissors') {
        youWin();
      } else {
        youLose();
      }
      break;
    case 'paper':
      if(opponentMove === 'paper') {
        return 'draw';
      } else if (opponentMove === 'rock') {
        youWin();
      } else {
        youLose();
      }
      break;
    case 'scissors':
      if(opponentMove === 'scissors') {
        return 'draw';
      } else if (opponentMove === 'paper') {
        youWin();
      } else {
        youLose();
      }
      break;
  }
}

function youWin() {
  var playerScore = $('.Player-count');
  var playerScoreUpdated = parseInt(playerScore.text()) + 1;
  playerScore.text(playerScoreUpdated);
}

function youLose() {
  var computerScore = $('.Computer-count');
  var computerScoreUpdated = parseInt(computerScore.text()) + 1;
  computerScore.text(computerScoreUpdated);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js