JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<div id="plane">
  <div class="tile tile3" block-id="1" style-id="3" floor="1" style="left:50px; top:50px;"></div>
  <div class="tile tile1" block-id="2" style-id="1" floor="1" style="left:150px; top:100px;"></div>
  <div class="tile tile2" block-id="3" style-id="2" floor="1" style="left:50px; top:150px;"></div>
  <div class="tile tile4" block-id="4" style-id="3" floor="2" style="left:200px; top:150px;"></div> 
   <div class="tile tile4" block-id="5" style-id="3" floor="2" style="left:50px; top:200px;"></div>
</div>

CSS

.tile {
    background-color: gray;
    width: 100px;
    height: 100px;
    position: absolute;
}
.tile4 {
    background-color: green;
}

.tile.ss {
    background-color: red;
}

JavaScript

var tiles = $('.tile');
tiles.click(function(){
  var clickedBlock = $(this); //To save a few lookups
  /*Read out the top and left attributes, remove 'px' to 
  get the numeric part and force them to be numbers using the + (not really needed)*/
  var myLeft = +clickedBlock.css('left').replace('px', '');
  var myTop = +clickedBlock.css('top').replace('px', '');
  var leftFree = true, rightFree = true; //Assume both sides are free to begin with
  tiles.not(clickedBlock).each(function(){
    if(!leftFree && !rightFree){
      return; //No need processing any more boxes
    }
    var clickedBlock = $(this); //To save a few lookups
    var left = +clickedBlock.css('left').replace('px', '');
    var top = +clickedBlock.css('top').replace('px', '');
    if(top < myTop-100 || top > myTop+100){
      return; //This box is completely above or below the clicked box
    }
    if(left == myLeft-100){
      leftFree = false;
      return;
    }
    if(left == myLeft+100){
      rightFree = false;
      return;
    }
  });
  if(leftFree || rightFree){
    clickedBlock.addClass('ss'); //In this scope me still refers to the clicked box
  }
});