JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<a href="#" id="playNext">Next season</a>
<div id="game">
    <div id="standings" class="data-table">
        <div class="data-table-header">
            <div>
                #
            </div>
            <div>
                Rating
            </div>
            <div>
                Name
            </div>
            <div>
                Age
            </div>
            <div>
                Skill
            </div>
            <div>
                Health
            </div>
            <div>
                Matches
            </div>
            <div>
                W
            </div>
            <div>
                D
            </div>
            <div>
                L
            </div>
        </div>
    </div>
</div>

CSS

.data-table {
  display: table;
  border-collapse: collapse;
}
.data-table>div {
  display: table-row;
}
.data-table>div>div {
  display: table-cell;
  border: 1px solid gray;
  padding: 2px;
}
.data-table-header {
  background-color: gray;
  color: #fff;
}

JavaScript

'use strict';

var controller = (function(contextId) {
  var fighters = [];
  var $context = $('#' + contextId);
  var columns = ['position', 'rating', 'name', 'age', 'skill', 'health', 'matches', 'wins', 'draws', 'losses'];
  var gaussRandom = function() {return ((Math.random() + Math.random() + Math.random() + Math.random() + Math.random() + Math.random())) / 6};
  var sortFighters = function() {
    fighters = fighters.sort(function (a,b) {
      if (a.rating < b.rating)
        return 1;
      else if (a.rating > b.rating)
        return -1;
      else 
        return 0;
    });
  };
  var module = {
    'printFighters': function() {console.log(fighters);},
    'generateFighters': function(callback) {
      $.ajax({
        url: 'https://randomuser.me/api/?gender=male&results=500&nat=gb',
        dataType: 'json',
        success: function(data){
          //console.log('fighters', fighters, 'data', data);
          for (var k in data.results) {
            //console.log('pushing..', data.results[k]['user']['name']['first']);
            fighters.push({
              'name': data.results[k]['user']['name']['first'] + ' ' + data.results[k]['user']['name']['last'],
              'age': Math.round(19 + Math.random() * 7),
              'height': Math.round(Math.random() * 200),
              'skill': Math.round(gaussRandom() * 200),
              'health': 100,
              'position': k,
              'matches': 0,
              'wins': 0,
              'draws': 0,
              'losses': 0,
              'rating': 2000,
            });
          }
          //console.log('new fighters:', fighters);
          callback();
        }
      });
    },
    'drawTable': function() {
      sortFighters();
      var output = '';
      for (var k in fighters) {
        var nodeHtml = '<div>';
        for (var kk in columns)
          nodeHtml += '<div>' + fighters[k][ columns[kk] ] + '</div>';
        output += nodeHtml +'</div>';
      }
     ...