JSFiddle - React, Tailwind, and code Playground

by gwwar

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="http://harvesthq.github.io/chosen/chosen.css">
<div id="user_container">
    <select id="users" name="users"></select>
</div>
<div id="hp"> <span class="bar"></span>

</div>
<div id="other"> <span><i class="lp-icon"></i> </span>
 <span id="LP"> ??? </span>
 <span><i class="gas-icon"></i> </span>
 <span id="GAS"> ??? </span>
 <span id="READ"><i class="read-icon"></i></span>
<span id="REPAIR"><i class="repair-icon"></i><span id="RP">???</span></span>
</div>
<div>
    <span>Checked Group Damage:<span id="group_dmg">???</span></span>
    <span>Checked Total RP:<span id="total_rp">???</span>
</div>
<canvas id="stats" width="500" height="500"></canvas>
<select id="compare" data-placeholder="Compare with..." style="width:350px;" multiple="">
</select>


<script 
    
src="https://spreadsheets.google.com/feeds/list/0AmjdwXdRMixFdFdtMzFRbm96SVU3RjdDbFRacTlZb0E/od5/public/basic?alt=json-in-script&callback=callback"></script>

CSS

body {
    font-family: Arial;
    font-size:13px;
    color:#444;
    background:#FFF;
}
#GAS, #LP, #RP {
    font-size:25px;
}
canvas,#compare {
    float:left;
}
#READ, #REPAIR {
    display:none;
}
#other {
    margin : 10px 0px;
}
#other span {
    margin: 5px;
}
.repair-icon {
    display:inline-block;
    width:24px;
    height:24px;
    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAB0klEQVRIS7WVvUvDQBiH766hOlj3UpzcFUEQt84hyaVIh4pgUQQ/BlFEUHc/EN1ULOiiDoJik2brLoog4p8g4l6qtNDmzrfV1lqbz9YsCSR5nnt/ee8NRj6PeDweLBTKU4Swac5RP8bonTFzwTCMTCMS++FLkhQhJAAgPFR7H2O8qWk3G808z4JoNNkdCuXuMeYDNRhjaMsw0uutFutZQCld4hzv/8DNbUhlzSoJzwJFoQ8QzXANqOtpS4aiKBM+BGoe4D1OAkVR9xDiM54Fskxz8EF77QSUxnY55ysgyHsWUKreQluOWgkkSdkhhKxW7nPO7jwLvkpHy+7am817EoiinBCEwBnAA84C/tTVFRxxLfAChwgfi8UPOZvNvrkSWMAZQuyospsBOAgVCXD9jJB5Eg6HT1OpVKlSpaNAkmKzGLND6Jz6s9AhZUJQQtO0K6eobAXtwm0r6ATcUtAKDg+XYMCNu4nFdlzD/JiDYXbQmLlf+J8KOg3/JfgPeF1gBYf+TmQy6WunVrS7j2VZHYMOv2za/iZsoqSu6+ftwKsVwA/kBU59DaCOwasCWY69QvtFvgUmY2zSMPSLdldeex+LYkwSBHbMOeEwwRfbzbx5YZ+IGdYgd8qCZQAAAABJRU5ErkJggg==');
}
.lp-icon {
    display:inline-block;
    width:24px;
    height:24px;
    background:...

JavaScript

var SCALE_STEPS, //you can override how many steps there are by setting a value here (eg. 7,8,9). This is calculated automatically otherwise
SCALE_STEP_WIDTH = 10, //each point on the web is 10pts apart
    //some static variables that will break if you change the column titles
    CHARACTER_NAME = "Character Name",
    VEHICLE_CLASS = "Vehicle Class",
    MAX_HP = "Max HP",
    HP = "HP",
    FP = "FP",
    AR = "AR",
    SP = "SP",
    TQ = "TQ",
    MV = "MV",
    EN = "EN",
    LK = "LK",
    RP = "RP",
    LI = "LI",
    GAS = "Gas",
    LP = "LP",
    INVENTORY = "Inventory Space",
    MISSION = "Mission Choice",
    LABELS = [MAX_HP, FP, AR, SP, TQ, MV, EN, LK],
    COLORS = [
        [204, 189, 88],
        [153, 144, 85],
        [255, 184, 40],
        [103, 202, 255],
        [11, 187, 204],
        [204, 112, 88],
        [153, 99, 85],
        [255, 40, 101],
        [133, 255, 103],
        [125, 204, 30],
        [180, 80, 204],
        [139, 79, 153],
        [88, 29, 255],
        [255, 255, 93],
        [204, 152, 22],
        [199, 123, 204],
        [108, 110, 153],
        [78, 179, 255],
        [255, 194, 142],
        [204, 106, 61],
        [204, 176, 166],
        [153, 55, 21],
        [255, 138, 152],
        [206, 255, 201],
        [150, 204, 109],
        [148, 204, 186],
        [130, 153, 146],
        [115, 255, 130],
        [255, 178, 240],
        [185, 90, 204]
    ];

function callback(doc) {
    // Dear Google, just return this as a json file. 
    // It is incredibly weird to pass a named function 
    // to an API call. 
    $(function () {
        //wait for document ready. Parse into a more useable object.
        var file = parseSpreadsheet(doc),
            user, $select = $("#users"),
            option, $compare = $("#compare"), text;

        //make a jQuery chosen select box
        for (var i = 0; i < file.users.length; i++) {
            user = file.users[i];
            option = $("<option/>", {
               ...