WoW Healing Sim

by Robodude

HTML

<div id="ProgresBarContainer">
            <div id="ProgressBar">
            </div>
        </div>

        <div id="Players">

        </div>

CSS

#Players
        {
            margin-top: 20px;
        }
        
        .player
        {
            height: 100px;
            width: 100px;
            border: 2px solid black;
            float: left;
            margin-right: 10px;
            position:relative;
        }
        
        .healthbar
        {
            height: 100%;
            width: 100%;
            position: absolute;
            bottom: 0px;
        }
        
        #ProgresBarContainer
        {
            width: 300px;
            height: 25px;
            border: 2px solid black;
        }
        
        #ProgressBar
        {
            background-color: Yellow;
            height: 100%;
            width: 0%;
        }

JavaScript

var players = [];
        var mh;
        var ah;
        var aoehit = true;
        var gameLoop;
        gameSpeed = 1000;

        $(document).ready(function () {

            var tank = new Tank({});
            var dps1 = new DPS({});
            var dps2 = new DPS({});
            var healer = new Healer({});
            var soaker = new Soaker({});

            players.push(tank);
            players.push(dps1);
            players.push(dps2);
            players.push(healer);
            players.push(soaker);

            Init();

            // single target main hit  every 5 seconds
            // aoe splash all - main 15 seconds (all but tank and soaker take less)
            // aoe splash 5 seconds (only hits tanks, dps dps)

            mh = setInterval(MainHit, 5000);

            if (aoehit) {
                ah = setTimeout(AoeHit1, 15000);
            }

            gameLoop = setInterval(Game, 1000);


            $(".player").live("click", function () {
                var p = $(this);
                $("#ProgressBar").animate({
                    width: "100%"
                },
                500,
                function () {
                    $("#ProgressBar").width("0px");
                    var index = p.attr("index");
                    players[index].Heal(10000);
                    $("#" + players[index].name + "_" + index + " > .healthbar").height(players[index].hpp + "%");
                    $("#" + players[index].name + "_" + index + " > .healthbar").text(players[index].hpp + "%");

                });
            });

        });

        function Init() {
            var html = "";
            for (var i = 0; i < players.length; i++) {
                var p = players[i];
                html += "<div id='"+p.name + "_" + i +"' class='player' index='" + i + "'>";

                html += "<div class='healthbar' style='height:" + p.hpp + "%; background-color: rgba("+p.Red+","+p.Green+","+p.Blue+","+p.Opacity+ ")'>";
         ...