JSFiddle - React, Tailwind, and code Playground

by Nathan Piper

HTML

<div>
     <h1>You Rock Paper Scissor!</h1>

    <div id="playArea">
        <div id="player" class="playArea">
             <h2>You</h2>

            <div class="item rock"></div>
            <div class="item paper"></div>
            <div class="item scissor"></div>
        </div>
        <div id="computer" class="playArea">
             <h2>Computer</h2>

            <div class="item rock off"></div>
            <div class="item paper off"></div>
            <div class="item scissor off"></div>
        </div>
    </div>
    <div>
        <div id="gameRules">
            <p>Select an item</p>
        </div>
        <div id="postGame">
            <p id="gameResults"></p>
            <button id="reset">Play Again</button>
        </div>
    </div>
</div>

CSS

#playArea {
    border: 1px solid #000000;
    overflow: auto;
    width: 100%
}
.playArea {
    width: 50%;
    float: left;
}
.item {
    background-image: url(http://www-static.weddingbee.com/wp-content/uploads/2009/07/20/rock-pa.jpg);
    width: 200px;
    height: 126px;
}
.item.off {
    display: none;
}
.rock {
    background-position: center 0;
}
.paper {
    background-position: center 127px;
}
.scissor {
    background-position: center 254px;
}
#player .item {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter:"FlipH";
}
#player.running .item {
    cursor: pointer;
}
#postGame {
    display: none;
}

JavaScript

var
computerChoice,
userChoice,
$player,
resetGame = function () {
    $player.addClass('running');
    $('#gameRules').show();
    $('#postGame').hide();
    $('#computer .item').addClass('off');
    $('#player .item').removeClass('off');
    computerChoice = userChoice = '';
},
setComputerChoice = function () {
    var computerChoiceNumber = Math.random();
    if (computerChoiceNumber < 0.34) {
        computerChoice = "rock";
    } else if (computerChoiceNumber <= 0.67) {
        computerChoice = "paper";
    } else {
        computerChoice = "scissor";
    }
    $('#computer .' + computerChoice).removeClass('off');
},
showWin = function () {
    $('#gameResults').text('you win! ' + userChoice + ' beats ' + computerChoice);
},
showLose = function () {
    $('#gameResults').text('sorry, you suck. ' + computerChoice + ' beats ' + userChoice);
},
compare = function () {
    if (userChoice === computerChoice) {
        $('#gameResults').text('Sorry, tie.');
    } else if (userChoice === "rock") {
        if (computerChoice === "scissor") {
            showWin();
        } else {
            showLose();
        }
    } else if (userChoice === "scissor") {
        if (computerChoice === "paper") {
            showWin();
        } else {
            showLose();
        }
    } else if (userChoice === "paper") {
        if (computerChoice === "rock") {
            showWin()
        } else {
            showLose()
        }
    }
},
userPicks = function () {
    var
    $this = $(this);
    if ($this.hasClass('rock')) {
        userChoice = 'rock';
    } else if ($this.hasClass('paper')) {
        userChoice = 'paper';
    } else if ($this.hasClass('scissor')) {
        userChoice = 'scissor';
    }
    $player.removeClass('running')
        .find('.item:not(.' + userChoice + ')').addClass('off');
    setComputerChoice();
    $('#gameRules').hide();
    $('#postGame').show();
    compare();
};

$(function () {
    // HTML is loaded and ready for your code
    $player =...