JSFiddle - React, Tailwind, and code Playground

by Elliot Franford

HTML

Score: <span id="score"></span><br />
<button id="btnRock">Rock</button>
<button id="btnPaper">Paper</button>
<button id="btnScissors">Scissors</button><br />
<div id="resultsMessage" style="width:100%;height:100%"></div>

JavaScript

/*** Player Input ***/
var score = 100;
var playerChoice = "";

var rock = $("#btnRock");
var paper = $("#btnPaper");
var scissors = $("#btnScissors");
var resultsOutput = $("#resultsMessage");

rock.click(function(){
    setPlayerChoice("rock")
});
paper.click(function(){
    setPlayerChoice("paper")
});
scissors.click(function(){
    setPlayerChoice("scissors")
});

function setPlayerChoice(choice){
    playerChoice = choice;    
    doTurn();
}

function doTurn(){
    resultsOutput.html('');
    disableButtons();
    var computerChoice = doComputerTurn();
    compare(playerChoice, computerChoice);
    $("#score").html(score);
    enableButtons();
}

function disableButtons (){
    rock.attr("disabled", "disabled");
    paper.attr("disabled", "disabled");
    scissors.attr("disabled", "disabled");
}

function enableButtons(){
    rock.removeAttr("disabled");
    paper.removeAttr("disabled");
    scissors.removeAttr("disabled");
}

function doComputerTurn(){
    var numbz = Math.random();
    var computerChoice = "";
    if (numbz < 0.34) {
        computerChoice = "rock";
    } else if(numbz < 0.67) {
        computerChoice = "paper";
    } else if(numbz <0.99){
        computerChoice = "scissors";
    } else {
        computerChoice = "haxxorz";
    }
    return computerChoice;
}

function compare(choice1,choice2) {
    if(choice1 === "haxxorz") {
        resultsOutput.html("Secret get!!! Player used haxxorz. It was super effective!");
        score +=score;
    }
    else if(choice2 === "haxxorz") {
        resultsOutput.html("Computer used haxxorz. It was super effective!");
        score = 1;
    }
    else if(choice1 === choice2){
        resultsOutput.html("The result is a tie!");
    }
    else if(choice1 === "rock") {
        if(choice2 === "scissors") {
            resultsOutput.html("Rock wins! Crushed it!");
            score += 1;
        }
        else {
            resultsOutput.html("Paper wins... somehow... I guess it blinded your rock or...