JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='demo'>

</div>

JavaScript

var blockarray = ['12-6','13-6','14-6','15-6','12-7','13-7','14-7','15-7','12-8','13-8','12-9','13-9','12-10','13-10','7-6','8-6','9-6','7-5','8-5','9-5','7-4','8-4'];

var gx = 10; var gy = 10; var newblock = ['0-0']; 
var temp = '';

var blocklength = blockarray.length;
for (var i = 0; i < blocklength; i++) {
	 var theblock = blockarray[i];
   var block = theblock.split("-");
   var bx = block[0]; var by = block[1];
   bx = Number(bx); by = Number(by);
  $(".demo").append(bx+','+by+' .... ');
  
  //newblock.push(x1+','+y1+'<br>');
  
  if(bx > gx){ // further across
  if(by > gy){  // lower
newblock.push(bx+'-'+(by + 1)); 
newblock.push(bx+'-'+(by + 2)); 
newblock.push(bx+'-'+(by + 3));
newblock.push((bx + 1)+'-'+by); 
newblock.push((bx + 2)+'-'+by); 
newblock.push((bx + 3)+'-'+by); 
newblock.push((bx + 1)+'-'+(by + 1)); 
newblock.push((bx + 2)+'-'+(by + 1)); 
newblock.push((bx + 3)+'-'+(by + 1)); 
newblock.push((bx + 1)+'-'+(by + 2)); 
newblock.push((bx + 2)+'-'+(by + 2)); 
newblock.push((bx + 3)+'-'+(by + 2)); 
newblock.push((bx + 1)+'-'+(by + 3)); 
newblock.push((bx + 2)+'-'+(by + 3)); 
newblock.push((bx + 3)+'-'+(by + 3)); 
  }else if(by < gy){  // higher
newblock.push(bx+'-'+(by - 1)); 
newblock.push(bx+'-'+(by - 2)); 
newblock.push(bx+'-'+(by - 3));
newblock.push((bx + 1)+'-'+by); 
newblock.push((bx + 2)+'-'+by); 
newblock.push((bx + 3)+'-'+by); 
newblock.push((bx + 1)+'-'+(by - 1)); 
newblock.push((bx + 2)+'-'+(by - 1)); 
newblock.push((bx + 3)+'-'+(by - 1)); 
newblock.push((bx + 1)+'-'+(by - 2)); 
newblock.push((bx + 2)+'-'+(by - 2)); 
newblock.push((bx + 3)+'-'+(by - 2)); 
newblock.push((bx + 1)+'-'+(by - 3)); 
newblock.push((bx + 2)+'-'+(by - 3)); 
newblock.push((bx + 3)+'-'+(by - 3)); 
  }else{ // same height
newblock.push((bx + 1)+'-'+by); 
newblock.push((bx + 2)+'-'+by); 
newblock.push((bx + 3)+'-'+by); 
  }
  
}else if(bx < gx){ // back
  if(by > gy){  // lower
newblock.push(bx+'-'+(by + 1)); 
newblock.push(bx+'-'+(by + 2));...