JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<table id="minion_wave"  width=500px height=500px>
    <tr>
        <td colspan="3">
            <div id="aa">
                <center>AA Animation Bar</center>
            </div>
        </td>
    </tr>
    <tr>   
        <td>
            <div id="0_minion_wrapper" class="minion_wrapper">
                <div id="hp"></div>
                <img id="minion_src"></img>
            </div>
        </td>
        <td>
            <div id="1_minion_wrapper" class="minion_wrapper">
                <div id="hp"></div>
                <img id="minion_src"></img>
            </div>
        </td>
        <td>
           <div id="2_minion_wrapper" class="minion_wrapper">
                <div id="hp"></div>
                <img id="minion_src"></img>
            </div>
        </td>
    </tr>
        <tr>   
        <td>
            <div id="3_minion_wrapper" class="minion_wrapper">
                <div id="hp"></div>
                <img id="minion_src"></img>
            </div>
        </td>
        <td>
            <div id="4_minion_wrapper" class="minion_wrapper">
                <div id="hp"></div>
                <img id="minion_src"></img>
            </div>
        </td>
        <td>
           <div id="5_minion_wrapper" class="minion_wrapper">
                <div id="hp"></div>
                <img id="minion_src"></img>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan=3>
            <div id="adc">
            </div>
        </td>
    </tr>
</table>

CSS

td {
    text-align:center;
    height:137px;
}
#minion_src{
    content:url("http://iconizer.net/files/Web_Design_Creatives/orig/Circle.png");
    height:45px;
    width:45px;
}
#adc{
    width: 40px;
    height:40px;
    margin: 0 auto;
    border:1px solid black;
}
#hp{
    
    background-color:green;
    height:5px;
    width:60px;
}
.minion_wrapper{
    /*center  */
    width: 60px;
    margin: 0 auto;
}
#aa{
    background-color:green;
    height:60px;
    width:500px;
}

JavaScript

var game;

$(function(){
    game = new GameHelper();
    game.StartNewGame();
});

function GameHelper(){
    var me = this;
    var numOfMinions = 6;
    this.MinionArray;
    
    this.StartNewGame = function(){
        this.MakeMinions();
        this.StartMinionAttacks();
    }
    
    this.ResetMinionFocus = function(){
        //Use this after a minion has died.
        //reset numOfMinions;
        
        this.StopMinionAttacks();
        numOfMinions=0;
        //-----------
        var totalOtherMinions=6;
        for(var i =0;i< 6; i++){
            if(me.MinionArray[i].bAlive){
                numOfMinions++;
                 me.MinionArray[i].nFocused = getRandomInt(0,totalOtherMinions);
                 totalOtherMinions = totalOtherMinions - me.MinionArray[i].nFocused;
                 me.MinionArray.push(me.MinionArray[i]);
            } else {
                // me.MinionArray[i].Destroy();   
            }
        }
        //-----------
         
        //-----------
        this.StartMinionAttacks();
    }
    
    this.StopMinionAttacks = function(){
        for(var i =0;i< numOfMinions; i++){
            me.MinionArray[i].StopMinionAnimation();   
        }
    }
    
    this.StartMinionAttacks = function(){
        
        for(var i =0;i< numOfMinions; i++){
            if(me.MinionArray[i].bAlive){
                me.MinionArray[i].StartMinionAnimation();   
            }
        }
    }
    
    this.MakeMinions = function(){
        me.MinionArray = [];
        var totalOtherMinions = 6;
        for(var i =0;i< numOfMinions; i++){
         var type = "melee";
         if(i<=2){
             type="ranged";   
         }
         var m = new Minion(i,type); 
         m.nFocused = getRandomInt(0,totalOtherMinions);
         totalOtherMinions = totalOtherMinions - m.nFocused;
         me.MinionArray.push(m);
        }
    }
    
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
   ...