JSFiddle - React, Tailwind, and code Playground
HTML
<select id="stat_select" size="8"></select>
<div id="drop_zone">Drop files here</div>
<button id="clear" type="button">Clear</button>
<output id="list"></output>
CSS
#drop_zone {
border: 2px dashed #bbb;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 25px;
text-align: center;
font: 20pt bold 'Vollkorn';
color: #bbb;
}
#stat_select {
width: 50%;
}
JavaScript
var supportedStats= [
"DamageHealedStat",
"WeldingPointsStat",
"ShotgunDamageStat",
"HeadshotKillsStat",
"StalkerKillsStat",
"BullpupDamageStat",
"MeleeDamageStat",
"FlameThrowerDamageStat",
"SelfHealsStat",
"SoleSurvivorWavesStat",
"CashDonatedStat",
"FeedingKillsStat",
"BurningCrowwbowkKillsStat",
"GibbedFleshpoundsStat",
"BloatKillsStat",
"SirenKillsStat",
"KillsStat",
"ExplosiveDamageStat",
"TotalPlayTime",
"WinsCount",
"LostsCount",
];
// http://stackoverflow.com/a/12452845
function parseINIString(data){
var regex = {
section: /^\s*\[\s*([^\]]*)\s*\]\s*$/,
param: /^\s*([\w\.\-\_]+)\s*=\s*(.*?)\s*$/,
comment: /^\s*;.*$/
};
var value = {};
var lines = data.split(/\r\n|\r|\n/);
var section = null;
lines.forEach(function(line){
if(regex.comment.test(line)){
return;
}else if(regex.param.test(line)){
var match = line.match(regex.param);
if(section){
value[section][match[1]] = match[2];
}else{
value[match[1]] = match[2];
}
}else if(regex.section.test(line)){
var match = line.match(regex.section);
value[match[1]] = {};
section = match[1];
}else if(line.length == 0 && section){
section = null;
};
});
return value;
}
var stats = {};
var displayedStats = [];
function updateDisplayedStats() {
document.getElementById("list").innerHTML = "";
var highlightedStat = document.getElementById("stat_select").value;
displayedStats = [];
// populate displayedStats
for (var statId in stats) {
var player = {};
player['SteamId'] = statId;
player['HighlightedStat'] = stats[statId][highlightedStat];
displayedStats.push(player);
} ...