JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<div id='grid_team_1' class='grid-container'>

</div>
<div id='grid_team_2' class='grid-container'>

</div>

CSS

.grid-container {
  float: left;
}
.grid-container:not(:first-child) {
  padding-left: 20px;
}
.grid-row > span {
  width: 40px;
  height: 40px;
  border: 1px solid #666;
  display: inline-block;
  vertical-align: top;
  line-height: 40px;
  text-align: center;
  border-radius: 2px;
}

JavaScript

class Gun {
  constructor(power) {
    this.power = power;
    this._active = false;
    this.health = 0;
    
    this.buildInterval = null;
    this.healInterval = null;
  }
  build() {
    var scope = this;
    this.buildInterval = setInterval(function(){
      scope.health++;
      if(scope.health >= 100){
        scope._active = true;
        clearInterval(scope.buildInterval);
      }
    }, Math.floor(this.power / 2));
  }
  heal(){
    var scope = this;
    this.healInterval = setInterval(function(){
      scope.health++;
      if(scope.health >= 100){
        scope._active = true;
        clearInterval(scope.healInterval);
      }
    }, Math.floor(this.power / 4));
  }
  damage(power){
    this.health -= power;
    if(this.health < 0)
      delete this;
      
    return this.health;
  }
  shoot(){
    console.log('shoot');
  }
  
}

class Grid {
  constructor(el, cols, rows) {
  	this.view = el;
    this.data = [];
    this.rows = rows;
    this.cols = cols;
    // build out data array
    for(var i = 0; i < rows; i++){
    if(!this.data[i]) this.data[i] = [];
      this.data[i].push(new Array(cols));
    }
    
    var scope = this;
    setInterval(function(){
      scope.renderGrid();
    }, 50)
  }
  get(col, row){
    return this.data[row][col];
  }
  buildGun(power, col, row ){
  	this.data[row][col] = new Gun(power);
  	this.data[row][col].build();
  }
  renderGrid(){
  	this.view.innerHTML = '';
    var elem_array = [];
    var square, row_element;
    for(var r = 0; r < this.rows; r++){
    
      elem_array[r] = [];
      
      row_element = document.createElement('div');
      row_element.className = 'grid-row';
      
      for(var c = 0; c < this.cols; c++){
      
        square = this.data[r][c];
        
        elem_array[r][c] = document.createElement('span');
        elem_array[r][c].dataset.row = r;
        elem_array[r][c].dataset.col = c;

        if(square)
          elem_array[r][c].innerHTML = (square.health > 0) ?...