JSFiddle - React, Tailwind, and code Playground

by FlameTrap

HTML

<button id="1">Rock</button>
<button id="2">Paper</button>
<button id="3">Scissors</button>
<br><br>
<span style="float: left;">$</span><div id="money">1</div>
<span style="float: left;">Round:&nbsp;</span><div id="rounds">0</div><br>
<div id="clear">
<div id="final" style="clear:both"></div>
<div id="score"></div>
<div id="result"></div>
</div>

CSS

392

JavaScript

function refresh() {
    $('#money').html('1');
    $('#rounds').html('0');
    $('button').removeAttr('disabled');
    $('#clear div').empty();
}
$('button').on('click', function() {
    var array = ["RPS","Rock","Paper","Scissors"];
    var user = $(this).attr('id');
    var com = Math.floor((Math.random()*3)+1);
    var money = parseInt($('#money').html(), 10);
    var rounds = parseInt($('#rounds').html(), 10)+1;
    var ternary;
    if(rounds>1){ternary='s';}else{ternary='';}
    var result;
    if(user==com){result='It\'s a Draw';}
    if(user==1&&com==2){result='You Lose';money-=1;}
    if(user==1&&com==3){result='You Win';money+=1;}
    if(user==2&&com==1){result='You Win';money+=1;}
    if(user==2&&com==3){result='You Lose';money-=1;}
    if(user==3&&com==1){result='You Lose';money-=1;}
    if(user==3&&com==2){result='You Win';money+=1;}
    $('#score').html(array[user]+' vs '+array[com]);
    $('#result').html(result);
    $('#rounds').html(rounds);
    if(money=='0'){$('#final').html('Well done! You lasted '+$('#rounds').html()+' round'+ternary+'!');$('button').attr('disabled','disabled');}
    if(rounds=='200'){$('button').attr('disabled','disabled');$('#final').html('Well done! You completed the game! <a href="#" onclick="refresh();return true;">Play Again</a>!');}
    $('#money').html(money);
});