JSFiddle - React, Tailwind, and code Playground

by path411

HTML

<div>Skill Points Left: <span id="SkillPoints">55</span></div>
<br>
<div class="tree-title">Defender:</div> <ul id="SkillTree-Defender"></ul>
<div class="tree-title">Attacker:</div> <ul id="SkillTree-Attacker"></ul>
<div class="tree-title">Healer:</div> <ul id="SkillTree-Healer"><ul>

CSS

ul{
    clear:both;
    list-style-type:none;
}
.tree-title {
    clear:both;
}
li {
    float:left;
    width:18px;
    height:18px;
    padding:3px;
    background-color:orange;
    margin:5px;
    
}
li.selected {
    background-color:green;
}
li > span {
    display:none;
}
li > .skill-cost {
    display:block;
    color:#ffffff;
    width:100%;
    text-align:center;
}
li .skill-name {
    font-size:16px;
    color:#dddddd;
    font-weight:bold;
}
li:hover > .skill-tooltip {
    display:block;
    position:absolute;
    background-color:#666666;
    padding:12px;
}

JavaScript

(function(){

		var SkillTrees = {
			"Defender":[{"Name":"Choco Drop","Cost":1,"Desc":"Orders chocobo to deliver an attack with a potency of 150. \nAdditional Effect: Increased enmity","Type":"Weaponskill"},{"Name":"Enhanced Strength","Cost":2,"Desc":"Increases companion strength by 5%.","Type":"Trait"},{"Name":"Increased HP","Cost":3,"Desc":"Increases companion HP by 10%.","Type":"Trait"},{"Name":"Choco Kick","Cost":4,"Desc":"Orders chocobo to deliver an attack with a potency of 130. \nAdditional Effect: Slow + 20% for 12s","Type":"Weaponskill"},{"Name":"Enhanced Accuracy","Cost":5,"Desc":"Increases companion accuracy by 5%.","Type":"Trait"},{"Name":"Enhanced Critical Hit Rate","Cost":6,"Desc":"Increases companion critical hit rate by 15%.","Type":"Trait"},{"Name":"Choco Guard","Cost":7,"Desc":"Reduces damage taken by chocobo by 15% for 15s.","Type":"Weaponskill"},{"Name":"Enhanced Strength","Cost":8,"Desc":"Increases companion strength by 5%.","Type":"Trait"},{"Name":"Increased HP","Cost":9,"Desc":"Increases companion HP by 10%.","Type":"Trait"},{"Name":"Choco Strike","Cost":10,"Desc":"Orders chocobo to deliver an attack with potency of 150 to all enemies in a cone before it. \nAdditional Effect: Increased enmity","Type":"Weaponskill"}],
			"Attacker":[{"Name":"Choco Slash","Cost":1,"Desc":"Orders chocobo to deliver an attack with a potency of 150.","Type":"Weaponskill"},{"Name":"Enhanced Strength","Cost":2,"Desc":"Increases companion strength by 5%.","Type":"Trait"},{"Name":"Increased HP","Cost":3,"Desc":"Increases companion HP by 5%.","Type":"Trait"},{"Name":"Choco Beak","Cost":4,"Desc":"Orders chocobo to deliver an attack with a potency of 130. \nAdditional Effect: Damage over time with potency of 20 for 18s.","Type":"Weaponskill"},{"Name":"Enhanced Accuracy","Cost":5,"Desc":"Increases companion accuracy by 5%.","Type":"Trait"},{"Name":"Enhanced Critical Hit Rate","Cost":6,"Desc":"Increases companion critical hit rate by 15%.","Type":"Trait"},{"Name":"Choco...