JSFiddle - React, Tailwind, and code Playground

by flutterby8244

HTML

<div id='something0' player="0" class='foobar'>
    <img src="http://img13.deviantart.net/606d/i/2014/073/c/6/bow_and_arrow_by_juciely-d7a67vu.png" alt="Mountain View" >
</div>
<div id='something1' player="1" class='foobar'>
    <img src="https://upload.wikimedia.org/wikipedia/commons/5/54/Tigress_at_Jim_Corbett_National_Park.jpg" alt="Mountain View" >
</div>
<div id='something2' player="2" class='foobar'>
    <img src="http://gifgifs.com/animations/jobs-people/farmers-and-gardeners/Peasant.gif" alt="Mountain View" >
</div>
<div id='something3' player="3" class='foobar'>
    <img src="http://www.rabbwater.com/wp-content/uploads/layerslider/Home-page-slider/water-splashing.jpg" alt="Mountain View">   
</div>
<div id='something4' player="4" class='foobar'>
    <img src="http://www.easymix.com.au/images/2014articles/FIREGENB.jpg" alt="Mountain View" > </div>

<div id='pwned'><div id='you' class='texty'>You</div> <div id='stuff' class='texty'>VS</div> <div id='computer' class='texty'>Them</div></div>

CSS

#pwned
{
    display: none;
padding: 50px;
padding-top: 150px;
}

.texty{
	display: inline-block;
font-size: 100px;
margin: 20px;
}

#pwned.won {
    display:block;
}

#something {

    background-color: blue;
}
.foobar {
    background-color:#0FF548;
    border-style: solid;
    border-color: #000001;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 15px;
    margin-left: 80px;
    border-width: 2px;
    font-style: bold;
    width: 200px;
    height: 200px;
    display: inline-block;
    cursor: pointer;
}

.foobar img
{
width: 100%;
height: 100%;
}

#leaning_post {
    position: absolute;
    display: box;
    top: 600px;
    margin-right: auto;
    margin-left: auto;
    font-style: bold;
    background-color:#0FF548;
    border-style: solid;
    border-color: #000066;
} 

body{
    background-color: #000000;   
    background-image: url("http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: white;
}

/* inisitally hidden */
#pwned {
    display: none;
    background-color: #8FCBF2;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5000;
    top: 0;
    left: 0;
    color: #FA00F2;
}

/* when javascript says the game is won, this will be applied */
#pwned.won{
    color: green;
    background-image: url("http://s3-ec.buzzfed.com/static/2014-07/8/12/enhanced/webdr04/anigif_enhanced-26760-1404838637-30.gif");
}

#pwned.lost{
    color: red;
    background-image: url("http://i.imgur.com/1HWQIPa.gif");
}

#pwned.draw{
    color: yellow;
    background-image: url("http://img.pandawhale.com/81101-alright-well-call-it-a-draw-gi-JonN.gif");
}

.battle_over {
    display: block !important;
}

JavaScript

// wait until the page is finished loading
$(document).ready(function() {

    var nameArray = ["Bow & Arrow", "Tiger", "Human", "Water", "Fire"];
    
    var BOW = 0;
    var TIGER = 1;
    var HUMAN = 2;
    var WATER = 3;
    var FIRE = 4;
    
    var WON = 0;
    var DRAW = 1;
    var LOST = 2;
    
    function move(){
    	var player1 = parseInt($(this).attr('player'));
        var player2 = getRandomInt(0,4);  
        
                       
        
        var outcome = battle(player1, player2);
        
        $('#you').text(getName(player1));
        $('#computer').text(getName(player2));
        $('#stuff').text(getOutcomeText(outcome));

	$("#pwned").addClass("battle_over"); 

        switch(outcome){
            case WON:  $("#pwned").addClass("won"); 
                	   break;
            case LOST: $("#pwned").addClass("lost"); 
                	   break;
            case DRAW: $("#pwned").addClass("draw"); 
                	   break;
                
        }
    }
    
    function getOutcomeText(outcome)
    {
        switch(outcome){
            case WON:  return "won against";
            case LOST: return "lost against";
            case DRAW: return "had a draw";
        }
    }
  
  	function battle(player1, player2){
   		//alert(getName(player1) + " vs " + getName(player2));
 		// if the computer generated the same, then we have a draw
        if(player1 == player2) return DRAW;
        
        // did we win or lose?
        switch(player1){
            case BOW:
                if(player2 == TIGER || player2 == HUMAN) return WON;
                return LOST;
           
            case TIGER: 
                if(player2 == HUMAN || player2 == WATER) return WON;
                return LOST; 
                
            case HUMAN:
                if(player2 == WATER || player2 == FIRE) return WON;
                return LOST; 
                
            case WATER:
                if(player2 == FIRE || player2 == BOW) return...