JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div id="top">
  <ul>
    <li><a href="#">OR</a></li>
    <li><a href="#">REF</a></li>
    <li><a href="#">DIS</a></li>
    <li><a href="#">STR</a></li>
  </ul>
  <div id="user">
    <span></span>
  </div>
  <div class="ls">
    <span>0</span>
  </div>
  <div class="rs">
    <span>0</span>
  </div>
</div>

<div id="field">
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
  <div class="slot"></div>
</div>

CSS

body {
  padding: 0px;
  margin: 0px;
  font-family: "helvetica";
  color: #7e7f80;
}

a {
  color: #7e7f80;
  text-decoration: none;
}

#top,
#bottom {
  position: absolute;
  background: #fff;
  padding: 10px;
  width: 100%;
  border: solid 1px #cfd6d9;
}

#top {
  top: 0px;
}

#bottom {
  bottom: 0px;
}

#top ul,
#bottom ul {
  margin: 0px;
  padding: 0px;
}

#top ul li,
#bottom ul li {
  display: inline-block;
}

#top ul li a,
#bottom ul li a {
  padding: 10px 15px;
}

#top #user {
  position: absolute;
  right: 35px;
  bottom: 10px;
}

.ls,
.rs {
  position: absolute;
  width: 150px;
  padding: 5px 10px;
  border: solid 1px #cfd6d9;
  background: #fff;
}

.ls {
  left: 30px;
}

.rs {
  right: 50px;
}

#top .ls,
#top .rs {
  bottom: -30px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

#bottom .ls,
#bottom .rs {
  top: -30px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#field {
  position: relative;
  top: 50px;
  padding: 50px;
}

#field .slot {
  border: solid 1px #cfd6d9;
  border-radius: 4px;
  padding: 10px;
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 20px;
  vertical-align: top;
}

.oilActions {
  position: absolute;
  top: 5px;
  right: 0px;
}

JavaScript

function Player() {

  var player = this,
    util = new Util(),
    name,
    money = 100500;

  player.promptName = function(callback) {
    var name = prompt("Enter your name:");
    if (util.notEmpty(name)) {
      player.setName(name);
    } else {
      alert("You must enter a name.");
      player.promptName();
    }
    callback();
  };

  player.setName = function(n) {
    name = n;
  };

  player.getName = function() {
    return name;
  };

  player.setMoney = function(m) {
    money = m;
  };

  player.getMoney = function() {
    return money;
  };

}

function UI(manager, player, economy) {

  var ui = this,
    util = new Util(),
    builder = new Builder(manager);

  ui.setPlayer = function() {
    ui.updateName(player.getName());
    ui.updateMoney(player);
  };

  ui.updateName = function(name) {
    $('#user span').text(name);
  };

  ui.updateMoney = function() {
    $('#top .ls span').text('$' + util.formatNumber(parseFloat(player.getMoney()).toFixed(2)));
  };

  ui.updateRig = function(i, rig) {
    $('[data-rig="' + i + '"] .oil').text('Oil: ' + util.formatNumber(parseFloat(rig.getOil()).toFixed(2)) + ' Barrels @ $' + util.formatNumber(economy.getOilPrice().toFixed(2)));
    $('[data-rig="' + i + '"] .employees').text('Emp: ' + rig.getNumEmployees() + '/' + rig.getNumMaxEmployees() + ' | $' + util.formatNumber(rig.getEmployeePrice().toFixed(2)));
    $('[data-rig="' + i + '"] .managers').text('Man: ' + rig.getNumManagers() + '/' + rig.getNumMaxManagers() + ' | $' + util.formatNumber(rig.getManagerPrice().toFixed(2)));
  };

  ui.initListeners = function() {
    $('#top a').click(function() {
      ui.menuAction($(this).text());
    });
    $(document).on('click', '.slot a', function() {
      ui.menuAction($(this).text(), $(this).parents('.slot').data('rig'));
    });
  };

  ui.menuAction = function(key, i) {
    switch (key) {
      case "OR":
        var rig = builder.addRig();
        if (util.canAfford(player.getMoney(),...