WOD Health Bar & Bloodpool

Health Bar, Bloodpool & Quintessence editors for WOD.

by Troy Alford

HTML

<healthbar>
    <box class="healthy"></box>
    <box class="bruised"></box>
    <box class="lethal"></box>
    <box class="aggravated"></box>
    <box class="aggravated"></box>
</healthbar>
<bloodpool Generation="13"></bloodpool>
<quintessence><box class="filled"></box><box class="filled"></box><box class="filled"></box><box></box><box></box><box></box><box></box><box></box><box></box><box></box></quintessence>
<paradox><box class="filled"></box><box class="filled"></box><box class="filled"></box><box></box><box></box><box></box><box></box><box></box><box></box><box></box></paradox>

SCSS

healthbar {
    display: inline-block;
    background: #eee;
    border: 1px solid #ddd;
    margin: 5px;
    padding: 5px;
    height: 16px;
    
    box:before { 
        content: "";
        display: block;
        height: 7px;
        width: 7px;
        margin: 1px;
    }
    box {
        background: #fff;
        border: 1px solid #000;
        cursor: pointer;
        display: inline-block;
        position: relative;
        height: 9px;
        width: 9px; top: -2px;
        border-radius: 2px;
    
        &.healthy:before { background: white; }
        &.bruised:before { background: gold; }
        &.lethal:before { background: red; }
        &.aggravated { border: none; }
        &.aggravated:before { 
            content: "\2620"; 
            line-height: 7px;
            position: absolute;
            left: -5px; top: -1px;
            font-size: 24px;
        }
        
    }
}

bloodpool {
    display: inline-block;
    background: #eee;
    border: 1px solid #ddd;
    margin: 5px;
    padding: 5px;
    
    row {
        display: block;
        height: 16px;
        margin: 0;
    
        box {
            background: #fff;
            border: 1px solid #666;
    
            border-radius: 2px;
    
            cursor: pointer;
            display: inline-block;
            height: 9px;
            margin: 1px;
            width: 9px; 
    
            &.spent {
                background: #fff url(http://jqueryui.com/themeroller/images/?new=454545&w=256&h=240&f=png&fltr[]=rcd|256&fltr[]=mask|icons/icons.png) no-repeat -84px -132px;
            }
        }
    }
}

quintessence, paradox {
    display: block;
    line-height: 1px;
    position: relative;
    
    box {
        border: 1px solid #666;
        border-radius: 2px;
        cursor: pointer;
        display: inline-block;
        margin: 1px;
        height: 9px; width: 9px;
    }
}
quintessence { margin-top: 50px; }
quintessence > box {
    position: absolute;
    
    @for $i...

JavaScript

$(function () {
    
    var $pool = $('bloodpool');
    var gen = parseInt($pool.attr('Generation'), 10);
    gen = (gen > 15) ? 15 : (gen < 3) ? 3 : gen;
    
    var max = (gen >= 8) ? 23 - gen : 10 * (9 - gen);
    
    var rows = Math.ceil(max / 10);
    
    for (var y = 0; y < rows; y++) {
        var $row = $('<row />').appendTo($pool);
        var boxes = (y == rows - 1) ? max % 10 || 10 : 10;
        for (var x = 0; x < boxes; x++) {
            var $box = $('<box />').appendTo($row);
        }
    }
    
    $('bloodpool box').live('click', function (ev) {
        var $box = $(ev.target);
        var $boxes = $('bloodpool box');
        var index = $.inArray(ev.target, $boxes);
        
        for (var i = 0; i < $boxes.length; i++) {
            var $current = $($boxes[i]);
            
            if (i < index)
                $current.addClass('spent');
            else if (i == index) {
                if (!$current.next().is('.spent'))
                    $current.toggleClass('spent');
            } else if (i > index)
                $current.removeClass('spent');
        }
    });
    
    $('quintessence box, paradox box').live('click', function (ev) {
        var $box = $(ev.target);
        var $boxes = $box.parent().children('box');
        var index = $.inArray(ev.target, $boxes);
        console.log($box, $boxes, index);
        
        for (var i = 0; i < $boxes.length; i++) {
            var $current = $($boxes[i]);
            
            if (i < index)
                $current.addClass('filled');
            else if (i == index) {
                if (!$current.next().is('.filled'))
                    $current.toggleClass('filled');
            } else if (i > index)
                $current.removeClass('filled');
        }
    });
    
});