Oac Talent tree

by JoshuaIRL

CSS

.trees { border:1px solid #000; }
.tree1 { float: left; }
.tree2 { float: Left; display:none; }
.tier { float:left; width: 20px; border-left:1px solid #555; }

JavaScript

var maxLvl = 60;
var ptsStartLvl = 4;
var maxPts = maxLvl - ptsStartLvl;
var tiers = 8;
var ptsPerTier = 5;
var maxPtsPerTree = tiers * ptsPerTier;

var datas = [
    {
        class:'warrior',
        trees:[
            { name:'Battle' },
            { name:'Guardian' }
            ]
    },
    {
        class:'ranger',
        trees:[
            { name:'Archer' },
            { name:'Assassin' }
            ]
    },
    {
        class:'mage',
        trees:[
            { name:'Battle' },
            { name:'Guardian' }
            ]
    },
    {
        class:'monk',
        trees:[
            { name:'Battle' },
            { name:'Guardian' }
            ]
    }
    ];

$(document).ready(function() {
    var $trees = $("<div/>").addClass("trees");
    var $tree1 = $("<div/>").addClass("tree").addClass("tree1").appendTo($trees);
    var $tree2 = $("<div/>").addClass("tree").addClass("tree2").appendTo($trees);
    var $tiers1 = [];
    var $tiers2 = [];
    
    for(i=0;i<=tiers-1;i++) {
        $tiers1[i] = $("<div/>")
                        .addClass("tier")
                        .addClass("tier" + i)
                        .html('tier ' + (i+1))
                        .appendTo($tree1);
    
        $tiers2[i] = $("<div/>")
                        .addClass("tier")
                        .addClass("tier" + i)
                        .html('tier ' + (i+1))
                        .appendTo($tree2);
    }
    $trees.appendTo("body");
        
    for(i=1;i<=tiers;i++) {
    
    }
        
});