<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);
}
This Pen doesn't use any external CSS resources.