JSFiddle - React, Tailwind, and code Playground

by Robodude

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/keypress/2.1.4/keypress.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="screen">

</div>

CSS

.box{
  height: 50px;
  width: 50px;
  border: 1px solid black;
  position: absolute;
}

.selected{
  background-color: red;
}

JavaScript

var data = [
{x: 1, y: 1}, 
{x: 2, y: 2}, 
{x: 3, y: 2}, 
{x: 3, y: 3}, 
{x: 4, y: 3}, 
{x: 1, y: 5}, 
{x: 2, y: 5}];

var arrayWithMeMissing = function(pos, arr){

	var copy = JSON.parse(JSON.stringify(arr));

	var thingsToCheck = [];

	var index = copy.findIndex(function(d){
  	return d.x === pos.x && d.y === pos.y;
  });

	if (index > -1) {
    copy.splice(index, 1);
	}

	return copy;
};

var getEverythingInDirection = function(pos, stuff, dir, map){

	return stuff.filter(function(d){
  
  		if (dir === 0){
      	return true;
      }
  
  		if (dir !== 1){
      	return pos  >= map(d)
      }
  
  	 return  pos  <= map(d); 
  });

};

var move = function(pos, dirX, dirY){

	var xMap = (d)=>{return d.x};
  var yMap = (d)=>{return d.y};

	var copy = arrayWithMeMissing(pos, data);

	var xStuff = getEverythingInDirection(pos.x, copy, dirX, xMap);

	var sortedByX = xStuff.sort(function(a, b){
  	return xMap(a) - xMap(b);
  });

  var yStuff = getEverythingInDirection(pos.y, sortedByX, dirY, yMap);
  
  var sortedByY = yStuff.sort(function(a, b){
  	return yMap(a) - yMap(b);
  });
  
  return sortedByY[0];
};

var m1 = move(data[0], 1, 0);
console.log(m1);
var m2 = move(m1, 1, 0);
console.log(m2);
var m3 = move(m2, 1, 0);
console.log(m3);