JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<div id="mapDiv">
<table id="chess">
</table>
</div>

CSS

table {
  border-collapse: collapse;
  background: #a2a2a2;
}
.divClass {
  color: #fff;
  width: 100%;
  height: 100%;
  text-align: center;
}
.border {
  color: #fff;
  background-color: #000;
  text-align: center;
  width: 100%;
  height: 100%;
}
table tr td {
  width: 20px;
  height: 20px;
  border: solid #000 0px;
}

table tr:nth-child(odd) td:nth-child(even) {
  background: #757575;
}
table tr:nth-child(even) td:nth-child(odd) {
  background: #757575;
}

JavaScript

// Create Numberpad
var xSize = 30,
		ySize = 30;
var table = document.getElementById("chess");
for (y=0;y<ySize;y++) {
  var row = table.insertRow();
      for (x=0;x<xSize;x++) {
        var cell = row.insertCell();
   	    if (y != 0 && x != 0) cell.innerHTML = "<div class='divClass' id=\"" + x+"_"+y + "\"  onclick='fix("+x+","+y+");' onMouseOver=\"moveIn("+x+","+y+");\" onMouseOut=\"moveOut("+x+","+y+");\"></div>";
        else if (y == 0 && x == 0) cell.innerHTML = "<div class='border'>.</div>";
        else if (y == 0) cell.innerHTML = "<div class='border'>" + x + "</div>";
        else if (x == 0) cell.innerHTML = "<div class='border'>" + y + "</div>";
      }
}

currentHighlight = [1,1];
currentMouseOver = [1,1];
highlighted = false;

function fix(x,y) {
	highlighted = !highlighted;
  moveOut(currentHighlight[0],currentHighlight[1]);
  drawLine(x,y,"");
  document.getElementById(currentHighlight[0]+"_"+currentHighlight[1]).innerHTML = "";
	currentHighlight = [x,y];
}
var radius = 4;
function moveIn(x, y) {
  if (!highlighted) {
	currentMouseOver = [x,y];
  document.getElementById(currentMouseOver[0]+"_"+currentMouseOver[1]).innerHTML = radius;
    for (xx=-radius;xx<=radius;xx++) {
      for (yy=-radius;yy<=radius;yy++) {
        var varX = parseFloat(xx)+parseFloat(x),
            varY = parseFloat(yy)+parseFloat(y);
        if (Math.sqrt(parseFloat(xx*xx)+parseFloat(yy*yy)) <= radius && varX > 0 && varY > 0 && varX < xSize && varY < ySize) {
          document.getElementById(varX+"_"+varY).style.backgroundColor = getColor(Math.sqrt(xx*xx+yy*yy));
        }
      }
    }
  }
  else {
  	var varX = (parseFloat(currentHighlight[0])-parseFloat(x)),
    		varY = (parseFloat(currentHighlight[1])-parseFloat(y)),
        dist = Math.floor(Math.sqrt(varX*varX+varY*varY));
    document.getElementById(currentHighlight[0]+"_"+currentHighlight[1]).innerHTML = dist;
    drawLine(x,y,"blue");
  }
}
function moveOut(x, y) {
  if (!highlighted) {
 ...