JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='nav-menu'>
  <div class='item clickable' id='speed-plus'>
    +
  </div>
  <div class='item clickable' id='speed-minus'>
    -
  </div>
  <div class='item'>
    Speed: <span id='current-speed'></span>
  </div>
</div>

<div id='world-cam'>
  <div id='world'>
    <div id='world-inner'>
      <div class='unit'>

      </div>
    </div>
  </div>
</div>

CSS

#world-cam {
  width: 500px;
  height: 500px;
  background-color: gray;
  overflow: hidden;
  box-shadow: 0 0 5px -2px;
  position: relative;
}

#world {
  width: 400px;
  height: 400px;
  background-color: white;
  position: absolute;
}

#world-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.unit {
  border-radius: 100%;
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background-color: blue;
  opacity: 0.3;
}

.unit.selected {
  opacity: 1;
}

.nav-menu {
  margin: 10px 0;
}

.nav-menu .item {
  display: inline-block;
  padding: 5px 10px;
  background-color: white;
  border-radius: 3px;
  border: 1px solid #ccc;
}
.nav-menu .item.clickable:hover {
  cursor: pointer;
}

JavaScript

var selectedUnit = null;
    var globalMovementHelper = new MovementHelper();
    var worldWidth = 0;
    var worldHeight = 0;
    var selectedUnitHeight = 0;
    var selectedUnitWidth = 0;
    var movementTimerIds = {
        'up': null,
      'down': null,
      'right': null,
      'left': null
    };
    var keyIsDown = {
        'up': false,
      'down': false,
      'right': false,
      'left': false
    };
    var keyCodes = {
        'left': 37,
        'up': 38,
        'right': 39,
        'down': 40
    };
    var leftClick = new handleLeftClick(globalMovementHelper);
    var rightClick = new handleRightClick(globalMovementHelper);
    var upClick = new handleUpClick(globalMovementHelper);
    var downClick = new handleDownClick(globalMovementHelper);
    var animationTimeFrame = 100;

    $(function() {
      //initialize movement helper  
      var world = $('#world');
      worldWidth = parseInt($(world).css('width'), 10);
      worldHeight = parseInt($(world).css('height'), 10);
      console.log(worldHeight);
      var navMenuFunction = {
        'speed-plus': globalMovementHelper.increaseSpeed,
        'speed-minus': globalMovementHelper.decreaseSpeed
      };
      
      $(document).keydown(function(e) {
        switch (e.which) {
          case keyCodes.left: // left
            leftClick.handleClick();
            break;
          case keyCodes.up: // up
            upClick.handleClick();
            break;
          case keyCodes.right: // right
            rightClick.handleClick();
            break;
          case keyCodes.down: // down
            downClick.handleClick();
            break;
          default:
            return;
        }
        e.preventDefault();
      });
      $(document).keyup(function(e) {
        switch (e.which) {
          case keyCodes.left: // left
            clearInterval(movementTimerIds['left']);
            keyIsDown['left'] = false;
            break;
          case keyCodes.up: // up
           ...