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>
<div id="main">
    <canvas id="stats" width="500" height="500"></canvas>
    <div id="users"></div>
</div>
<div> <a href="#" id="clear">Deselect All</a>

</div>
<textarea id="file"></textarea>
<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:14px;
}
#main {
    width:100%;
    overflow:none;
}
#file {
    width:500px;
    height:50px;
}
#stats {
    float:left;
}
#users {
    float:left;
    width:150px;
}

JavaScript

//some static variables that will break if you change the column titles
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 appart
    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);

        //make some labels!
        for (var i = 0; i < file.users.length; i++) {
            var label = $("<label/>", {
                "for": file.users[i]
            });
            label.text(file.users[i]);
            var container = $("<div/>").append($("<input/>",...