RTS

by wrxsti85

HTML

<div id="board">
  <div class="base"></div>
  <div class="unit"></div>
  <div class="unit"></div>
  <div class="unit"></div>
</div>
<div id="task-bar">
  
</div>

CSS

body {
  background: #fff;
  padding: 0px;
}

.base {
  background: #e5e5e5;
  width: 20px;
  height: 20px;
}

.unit {
  background: #e5e5e5;
  width: 15px;
  height: 15px;
  border-radius: 15px;
}

.selected {
  border: solid 1px #a1a1a1;
}

.selection-marquee {
  border: solid 1px #a1a1a1;
}

JavaScript

var units = {};
var controls = {
  select: function(ob){
    $('.selected').removeClass('selected');
    $.each(ob, function(k, v){
      $(v).addClass('selected');
    });
  }
};

$(document).on('click', '#board *', function(e){
  e.preventDefault();
  controls.select(this);
});