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="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<div id="user_container">
    <select id="users" name="users">
    </select>
</div>
<div id="hp">
    <span class="bar"></span>
</div>
<div id="other">
    <span> LP </span>
    <span id="LP"> ??? </span>
    <span> Gas </span>
    <span id="GAS"> ??? </span>
</div>
<canvas id="stats" width="500" height="500"></canvas>
<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;
}
#other {
    margin : 10px 5px;
}

#user_container {
    width:100%;
    overflow:none;
    margin:10px 0;
}
#users {
    width:500px;
}
#hp {
    width:498px;
    background:#EEEEEE;
    height:25px;
    border:1px solid #CCCCCC;
}

#hp .bar {
    display:inline-block;
    width:100%;
    height:100%;
    line-height:25px;
    text-indent:5px;
    background:green;
    color:white;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

#hp .bar.green {
    background: #4A7F47;
}

#hp .bar.red {
    background : #E82C0C;
}

#hp .bar.yellow {
    background : #FFF264;
}

#file {
    width:500px;
    height:50px;
}

/** chosen css */
/* @group Base */
.chosen-container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: 13px;
  zoom: 1;
  *display: inline;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.chosen-container .chosen-drop {
  position: absolute;
  top: 100%;
  left: -9999px;
  z-index: 1010;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #aaa;
  border-top: 0;
  background: #fff;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
}
.chosen-container.chosen-with-drop .chosen-drop {
  left: 0;
}
.chosen-container a {
  cursor: pointer;
}

/* @end */
/* @group Single Chosen */
.chosen-container-single .chosen-single {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 0 0 8px;
  height: 23px;
  border: 1px solid #aaa;
  border-radius: 5px;
  background-color: #fff;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4));
  background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%);
  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

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