I have an issue with my JavaScript. I'm trying to write a highlight function which highlights a circle of hexagons around a clicked hexagon at a given radius. Initially, I was able to get it to do, first a cross, followed by a square, and now I've got an oval happening.
I understand that it's due to the offsets of the hexagons that seems to be the most likely cause of the problem. As of yet, I have been unable to solve my ovular problem; however, at least it's a step beyond square. Well, at least a bit more round. While at larger sizes the oval is livable for now, it is most definitely not desired. Any help with pointing me in the right direction to solve this issue would most appreciated. My code follows.
map.php: the hexagon grid.
<div id="gamecontent">
<div id="main">
<div id="container">
<div id='0' name='0,0' value='0,-11,11' class='space axis'>0,0</div>
<div id='1' name='1,0' value='1,-11,10' class='space'>1,0</div>
<div id='2' name='2,0' value='2,-11,9' class='space'>2,0</div>
<div id='3' name='3,0' value='3,-11,8' class='space'>3,0</div>
<div id='4' name='4,0' value='4,-11,7' class='space'>4,0</div>
<div id='5' name='5,0' value='5,-11,6' class='space'>5,0</div>
<div id='6' name='6,0' value='6,-11,5' class='space'>6,0</div>
<div id='7' name='7,0' value='7,-11,4' class='space'>7,0</div>
<div id='8' name='8,0' value='8,-11,3' class='space'>8,0</div>
<div id='9' name='9,0' value='9,-11,2' class='space'>9,0</div>
<div id='10' name='10,0' value='10,-11,1' class='space'>10,0</div>
<div id='11' name='11,0' value='11,-11,0' class='space axis'>11,0</div>
<br />
<div id='12' name='0,1' value='0,-10,10' class='space axis'>0,1</div>
<div id='13' name='1,1' value='1,-10,9' class='space'>1,1</div>
<div id='14' name='2,1' value='2,-10,8' class='space'>2,1</div>
<div id='15' name='3,1' value='3,-10,7' class='space'>3,1</div>
<div id='16' name='4,1' value='4,-10,6' class='space'>4,1</div>
<div id='17' name='5,1' value='5,-10,5' class='space'>5,1</div>
<div id='18' name='6,1' value='6,-10,4' class='space'>6,1</div>
<div id='19' name='7,1' value='7,-10,3' class='space'>7,1</div>
<div id='20' name='8,1' value='8,-10,2' class='space'>8,1</div>
<div id='21' name='9,1' value='9,-10,1' class='space'>9,1</div>
<div id='22' name='10,1' value='10,-10,0' class='space axis'>10,1</div>
<div id='23' name='11,1' value='11,-10,-1' class='space'>11,1</div>
<br />
<div id='24' name='0,2' value='0,-9,9' class='space axis'>0,2</div>
<div id='25' name='1,2' value='1,-9,8' class='space'>1,2</div>
<div id='26' name='2,2' value='2,-9,7' class='space'>2,2</div>
<div id='27' name='3,2' value='3,-9,6' class='space'>3,2</div>
<div id='28' name='4,2' value='4,-9,5' class='space'>4,2</div>
<div id='29' name='5,2' value='5,-9,4' class='space'>5,2</div>
<div id='30' name='6,2' value='6,-9,3' class='space'>6,2</div>
<div id='31' name='7,2' value='7,-9,2' class='space'>7,2</div>
<div id='32' name='8,2' value='8,-9,1' class='space'>8,2</div>
<div id='33' name='9,2' value='9,-9,0' class='space axis'>9,2</div>
<div id='34' name='10,2' value='10,-9,-1' class='space'>10,2</div>
<div id='35' name='11,2' value='11,-9,-2' class='space'>11,2</div>
<br />
<div id='36' name='0,3' value='0,-8,8' class='space axis'>0,3</div>
<div id='37' name='1,3' value='1,-8,7' class='space'>1,3</div>
<div id='38' name='2,3' value='2,-8,6' class='space'>2,3</div>
<div id='39' name='3,3' value='3,-8,5' class='space'>3,3</div>
<div id='40' name='4,3' value='4,-8,4' class='space'>4,3</div>
<div id='41' name='5,3' value='5,-8,3' class='space'>5,3</div>
<div id='42' name='6,3' value='6,-8,2' class='space'>6,3</div>
<div id='43' name='7,3' value='7,-8,1' class='space'>7,3</div>
<div id='44' name='8,3' value='8,-8,0' class='space axis'>8,3</div>
<div id='45' name='9,3' value='9,-8,-1' class='space'>9,3</div>
<div id='46' name='10,3' value='10,-8,-2' class='space'>10,3</div>
<div id='47' name='11,3' value='11,-8,-3' class='space'>11,3</div>
<br />
<div id='48' name='0,4' value='0,-7,7' class='space axis'>0,4</div>
<div id='49' name='1,4' value='1,-7,6' class='space'>1,4</div>
<div id='50' name='2,4' value='2,-7,5' class='space'>2,4</div>
<div id='51' name='3,4' value='3,-7,4' class='space'>3,4</div>
<div id='52' name='4,4' value='4,-7,3' class='space'>4,4</div>
<div id='53' name='5,4' value='5,-7,2' class='space'>5,4</div>
<div id='54' name='6,4' value='6,-7,1' class='space'>6,4</div>
<div id='55' name='7,4' value='7,-7,0' class='space axis'>7,4</div>
<div id='56' name='8,4' value='8,-7,-1' class='space'>8,4</div>
<div id='57' name='9,4' value='9,-7,-2' class='space'>9,4</div>
<div id='58' name='10,4' value='10,-7,-3' class='space'>10,4</div>
<div id='59' name='11,4' value='11,-7,-4' class='space'>11,4</div>
<br />
<div id='60' name='0,5' value='0,-6,6' class='space axis'>0,5</div>
<div id='61' name='1,5' value='1,-6,5' class='space'>1,5</div>
<div id='62' name='2,5' value='2,-6,4' class='space'>2,5</div>
<div id='63' name='3,5' value='3,-6,3' class='space'>3,5</div>
<div id='64' name='4,5' value='4,-6,2' class='space'>4,5</div>
<div id='65' name='5,5' value='5,-6,1' class='space'>5,5</div>
<div id='66' name='6,5' value='6,-6,0' class='space axis'>6,5</div>
<div id='67' name='7,5' value='7,-6,-1' class='space'>7,5</div>
<div id='68' name='8,5' value='8,-6,-2' class='space'>8,5</div>
<div id='69' name='9,5' value='9,-6,-3' class='space'>9,5</div>
<div id='70' name='10,5' value='10,-6,-4' class='space'>10,5</div>
<div id='71' name='11,5' value='11,-6,-5' class='space'>11,5</div>
<br />
<div id='72' name='0,6' value='0,-5,5' class='space axis'>0,6</div>
<div id='73' name='1,6' value='1,-5,4' class='space'>1,6</div>
<div id='74' name='2,6' value='2,-5,3' class='space'>2,6</div>
<div id='75' name='3,6' value='3,-5,2' class='space'>3,6</div>
<div id='76' name='4,6' value='4,-5,1' class='space'>4,6</div>
<div id='77' name='5,6' value='5,-5,0' class='space axis'>5,6</div>
<div id='78' name='6,6' value='6,-5,-1' class='space'>6,6</div>
<div id='79' name='7,6' value='7,-5,-2' class='space'>7,6</div>
<div id='80' name='8,6' value='8,-5,-3' class='space'>8,6</div>
<div id='81' name='9,6' value='9,-5,-4' class='space'>9,6</div>
<div id='82' name='10,6' value='10,-5,-5' class='space'>10,6</div>
<div id='83' name='11,6' value='11,-5,-6' class='space'>11,6</div>
<br />
<div id='84' name='0,7' value='0,-4,4' class='space axis'>0,7</div>
<div id='85' name='1,7' value='1,-4,3' class='space'>1,7</div>
<div id='86' name='2,7' value='2,-4,2' class='space'>2,7</div>
<div id='87' name='3,7' value='3,-4,1' class='space'>3,7</div>
<div id='88' name='4,7' value='4,-4,0' class='space axis'>4,7</div>
<div id='89' name='5,7' value='5,-4,-1' class='space'>5,7</div>
<div id='90' name='6,7' value='6,-4,-2' class='space'>6,7</div>
<div id='91' name='7,7' value='7,-4,-3' class='space'>7,7</div>
<div id='92' name='8,7' value='8,-4,-4' class='space'>8,7</div>
<div id='93' name='9,7' value='9,-4,-5' class='space'>9,7</div>
<div id='94' name='10,7' value='10,-4,-6' class='space'>10,7</div>
<div id='95' name='11,7' value='11,-4,-7' class='space'>11,7</div>
<br />
<div id='96' name='0,8' value='0,-3,3' class='space axis'>0,8</div>
<div id='97' name='1,8' value='1,-3,2' class='space'>1,8</div>
<div id='98' name='2,8' value='2,-3,1' class='space'>2,8</div>
<div id='99' name='3,8' value='3,-3,0' class='space axis'>3,8</div>
<div id='100' name='4,8' value='4,-3,-1' class='space'>4,8</div>
<div id='101' name='5,8' value='5,-3,-2' class='space'>5,8</div>
<div id='102' name='6,8' value='6,-3,-3' class='space'>6,8</div>
<div id='103' name='7,8' value='7,-3,-4' class='space'>7,8</div>
<div id='104' name='8,8' value='8,-3,-5' class='space'>8,8</div>
<div id='105' name='9,8' value='9,-3,-6' class='space'>9,8</div>
<div id='106' name='10,8' value='10,-3,-7' class='space'>10,8</div>
<div id='107' name='11,8' value='11,-3,-8' class='space'>11,8</div>
<br />
<div id='108' name='0,9' value='0,-2,2' class='space axis'>0,9</div>
<div id='109' name='1,9' value='1,-2,1' class='space'>1,9</div>
<div id='110' name='2,9' value='2,-2,0' class='space axis'>2,9</div>
<div id='111' name='3,9' value='3,-2,-1' class='space'>3,9</div>
<div id='112' name='4,9' value='4,-2,-2' class='space'>4,9</div>
<div id='113' name='5,9' value='5,-2,-3' class='space'>5,9</div>
<div id='114' name='6,9' value='6,-2,-4' class='space'>6,9</div>
<div id='115' name='7,9' value='7,-2,-5' class='space'>7,9</div>
<div id='116' name='8,9' value='8,-2,-6' class='space'>8,9</div>
<div id='117' name='9,9' value='9,-2,-7' class='space'>9,9</div>
<div id='118' name='10,9' value='10,-2,-8' class='space'>10,9</div>
<div id='119' name='11,9' value='11,-2,-9' class='space'>11,9</div>
<br />
</div>
</div>
</div>
map.css: the css for the grid.
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:default;
}
#gamecontent {
border:1px solid #000000;
background-color:#000000;
position:fixed;
color:#a6a6a6;
top:11.5%;
left:50%;
border-radius:30px;
transform:translateX(-50%);
width:88%;
height:86%;
overflow:hidden;
z-index:100;
visibility:visible;
}
#main {
border:0px solid steelblue;
color:#afafaf;
position: fixed;
top:0;
left:50%;
border-radius:30px;
transform:translateX(-50%);
width:100%;
height:100%;
overflow:hidden;
border-bottom:none;
visibility:visible;
z-index:99999;
}
#container {
--s: 26px;
--m: 1.5px;
--f: calc(1.732 * var(--s) + 12 * var(--m) - 13px);
position: relative;
margin-left:auto;
margin-right:auto;
width:100%;
height:100%;
border:0px solid cyan;
font-size: 0;
z-index:300;
overflow:hidden;
padding:1%;
padding-left:1.8%;
padding-top:1.5%;
}
#container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 110%;
shape-outside: repeating-linear-gradient(
#0000 0 calc(var(--f) - 10px),
#000 0 var(--f));
}
.space {
/* left:-6%; */
transform:translateX(6%);
text-align: center;
line-height:20px;
font-size:xx-small;
width: var(--s);
margin: var(--m);
height: calc(var(--s)*1.1547);
display: inline-block;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background-color: rgba(69, 69, 69, 0.50);
margin-bottom: calc(var(--m) - var(--s)*0.2885);
z-index:300;
}
map.js: my current JavaScript with the oval problem.
var spacetiles = document.getElementsByClassName("space");
var totaltiles=spacetiles.length;
var size=3;
var i=0;
var lrow=getrowlength(spacetiles);
var srow=lrow-1;
var highlightcolor="rgba(85,136,238,0.50)";
var spacecolor="rgba(85, 85, 85, 0.5)";
var ycount=size-1;
var xcount=size-1;
for (i = 0; i < totaltiles; i++) {
spacetiles[i].addEventListener('click', function() {
highlight(this,size);
}, false);
}
function getrowlength(spacetiles) {
var tilecount=0;
while (parseInt(spacetiles[i].getAttribute("name").split(",")[1])<1) {
tilecount=tilecount+1;
i=i+1;
}
return tilecount;
}
function clearselect() {
for (i = 0; i < this.totaltiles; i++) {
if (this.spacetiles[i].classList.contains("space")) {
this.spacetiles[i].style.backgroundColor=spacecolor;
}
}
}
function highlight(tile,size) {
clearselect();
var centerX=parseInt(tile.getAttribute("name").split(",")[0]);
var centerY=parseInt(tile.getAttribute("name").split(",")[1]);
for (i=0;i<totaltiles;i++) {
var currentTile=spacetiles[i];
var x=parseInt(currentTile.getAttribute("name").split(",")[0]);
var y=parseInt(currentTile.getAttribute("name").split(",")[1]);
if (Math.max(Math.abs(x-centerX),Math.abs(y-centerY),Math.abs(x+y-centerX-centerY))<=size) {
currentTile.style.backgroundColor=highlightcolor;
}
}
}
A CodePen with my most current code can be found here:
Thanks for taking the time to view this. I look forward to any responses.
The presented code is a progression of attempts to get a circular highlight. First, I managed a cross. Then a square; now and oval. I hope to remedy this issue soon.
I'll use names of coordinates systems and formulas from this article.
From your code, it looks like you're trying to calculate distances with x and y (in offset coordinates) using formula for axial coordinates. You need to convert those to axial coordinates first.
Moreover, the value attributes seem to be an attempt at cube coordinates, but it's all wrong and useless now. And so is the axis class. You probably need to fix the code that generated this HTML. If the cube coordinates are correct, it'll be easier to calculate distances and a lot of other things.
Lastly you should move the background colors to CSS and only change tiles' class in JS.
var spacetiles = document.getElementsByClassName("space");
var totaltiles = spacetiles.length;
var size = 1;
var i = 0;
var lrow = getrowlength(spacetiles);
var srow = lrow - 1;
var highlightcolor = "rgba(85,136,238,0.50)";
var spacecolor = "rgba(85, 85, 85, 0.5)";
var ycount = size - 1;
for (i = 0; i < totaltiles; i++) {
spacetiles[i].addEventListener(
"click",
function() {
highlight(this, size);
},
false
);
}
function getrowlength(spacetiles) {
var tilecount = 0;
while (parseInt(spacetiles[i].getAttribute("name").split(",")[1]) < 1) {
tilecount = tilecount + 1;
i = i + 1;
}
return tilecount;
}
function clearselect() {
ycount = size;
for (i = 0; i < this.totaltiles; i++) {
if (this.spacetiles[i].classList.contains("space")) {
this.spacetiles[i].style.backgroundColor = spacecolor;
}
}
}
function highlight(tile, size) {
clearselect();
/* Convert offset to axial */
var centerX = parseInt(tile.getAttribute("name").split(",")[0]);
var centerY = parseInt(tile.getAttribute("name").split(",")[1]);
var centerQ = centerX - (centerY - (centerY&1)) / 2;
for (i = 0; i < totaltiles; i++) {
var currentTile = spacetiles[i];
var x = parseInt(currentTile.getAttribute("name").split(",")[0]);
var y = parseInt(currentTile.getAttribute("name").split(",")[1]);
var q = x - (y - (y&1)) / 2;
if (
Math.max(
Math.abs(y - centerY),
Math.abs(q - centerQ),
Math.abs(q + y - centerQ - centerY)
) <= size
) {
currentTile.style.backgroundColor = highlightcolor;
}
}
}* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
#gamecontent {
border: 1px solid #000000;
background-color: #000000;
position: fixed;
color: #a6a6a6;
top: 11.5%;
left: 50%;
border-radius: 30px;
transform: translateX(-50%);
width: 88%;
height: 86%;
overflow: hidden;
z-index: 100;
visibility: visible;
}
#main {
border: 0px solid steelblue;
color: #afafaf;
position: fixed;
top: 0;
left: 50%;
border-radius: 30px;
transform: translateX(-50%);
width: 100%;
height: 100%;
overflow: hidden;
border-bottom: none;
visibility: visible;
z-index: 99999;
}
#container {
--s: 26px;
--m: 1.5px;
--f: calc(1.732 * var(--s) + 12 * var(--m) - 13px);
position: relative;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
border: 0px solid cyan;
font-size: 0;
z-index: 300;
overflow: hidden;
padding: 1%;
padding-left: 1.8%;
padding-top: 1.5%;
}
#container::before {
content: "";
width: calc(var(--s)/2 + var(--m));
float: left;
height: 110%;
shape-outside: repeating-linear-gradient( #0000 0 calc(var(--f) - 10px), #000 0 var(--f));
}
.space {
/* left:-6%; */
transform: translateX(6%);
text-align: center;
line-height: 20px;
font-size: xx-small;
width: var(--s);
margin: var(--m);
height: calc(var(--s)*1.1547);
display: inline-block;
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
background-color: rgba(69, 69, 69, 0.50);
margin-bottom: calc(var(--m) - var(--s)*0.2885);
z-index: 300;
}<div id="gamecontent">
<div id="main">
<div id="container">
<div id='0' name='0,0' value='0,-11,11' class='space axis'>0,0</div>
<div id='1' name='1,0' value='1,-11,10' class='space'>1,0</div>
<div id='2' name='2,0' value='2,-11,9' class='space'>2,0</div>
<div id='3' name='3,0' value='3,-11,8' class='space'>3,0</div>
<div id='4' name='4,0' value='4,-11,7' class='space'>4,0</div>
<div id='5' name='5,0' value='5,-11,6' class='space'>5,0</div>
<div id='6' name='6,0' value='6,-11,5' class='space'>6,0</div>
<div id='7' name='7,0' value='7,-11,4' class='space'>7,0</div>
<div id='8' name='8,0' value='8,-11,3' class='space'>8,0</div>
<div id='9' name='9,0' value='9,-11,2' class='space'>9,0</div>
<div id='10' name='10,0' value='10,-11,1' class='space'>10,0</div>
<div id='11' name='11,0' value='11,-11,0' class='space axis'>11,0</div>
<br />
<div id='12' name='0,1' value='0,-10,10' class='space axis'>0,1</div>
<div id='13' name='1,1' value='1,-10,9' class='space'>1,1</div>
<div id='14' name='2,1' value='2,-10,8' class='space'>2,1</div>
<div id='15' name='3,1' value='3,-10,7' class='space'>3,1</div>
<div id='16' name='4,1' value='4,-10,6' class='space'>4,1</div>
<div id='17' name='5,1' value='5,-10,5' class='space'>5,1</div>
<div id='18' name='6,1' value='6,-10,4' class='space'>6,1</div>
<div id='19' name='7,1' value='7,-10,3' class='space'>7,1</div>
<div id='20' name='8,1' value='8,-10,2' class='space'>8,1</div>
<div id='21' name='9,1' value='9,-10,1' class='space'>9,1</div>
<div id='22' name='10,1' value='10,-10,0' class='space axis'>10,1</div>
<div id='23' name='11,1' value='11,-10,-1' class='space'>11,1</div>
<br />
<div id='24' name='0,2' value='0,-9,9' class='space axis'>0,2</div>
<div id='25' name='1,2' value='1,-9,8' class='space'>1,2</div>
<div id='26' name='2,2' value='2,-9,7' class='space'>2,2</div>
<div id='27' name='3,2' value='3,-9,6' class='space'>3,2</div>
<div id='28' name='4,2' value='4,-9,5' class='space'>4,2</div>
<div id='29' name='5,2' value='5,-9,4' class='space'>5,2</div>
<div id='30' name='6,2' value='6,-9,3' class='space'>6,2</div>
<div id='31' name='7,2' value='7,-9,2' class='space'>7,2</div>
<div id='32' name='8,2' value='8,-9,1' class='space'>8,2</div>
<div id='33' name='9,2' value='9,-9,0' class='space axis'>9,2</div>
<div id='34' name='10,2' value='10,-9,-1' class='space'>10,2</div>
<div id='35' name='11,2' value='11,-9,-2' class='space'>11,2</div>
<br />
<div id='36' name='0,3' value='0,-8,8' class='space axis'>0,3</div>
<div id='37' name='1,3' value='1,-8,7' class='space'>1,3</div>
<div id='38' name='2,3' value='2,-8,6' class='space'>2,3</div>
<div id='39' name='3,3' value='3,-8,5' class='space'>3,3</div>
<div id='40' name='4,3' value='4,-8,4' class='space'>4,3</div>
<div id='41' name='5,3' value='5,-8,3' class='space'>5,3</div>
<div id='42' name='6,3' value='6,-8,2' class='space'>6,3</div>
<div id='43' name='7,3' value='7,-8,1' class='space'>7,3</div>
<div id='44' name='8,3' value='8,-8,0' class='space axis'>8,3</div>
<div id='45' name='9,3' value='9,-8,-1' class='space'>9,3</div>
<div id='46' name='10,3' value='10,-8,-2' class='space'>10,3</div>
<div id='47' name='11,3' value='11,-8,-3' class='space'>11,3</div>
<br />
<div id='48' name='0,4' value='0,-7,7' class='space axis'>0,4</div>
<div id='49' name='1,4' value='1,-7,6' class='space'>1,4</div>
<div id='50' name='2,4' value='2,-7,5' class='space'>2,4</div>
<div id='51' name='3,4' value='3,-7,4' class='space'>3,4</div>
<div id='52' name='4,4' value='4,-7,3' class='space'>4,4</div>
<div id='53' name='5,4' value='5,-7,2' class='space'>5,4</div>
<div id='54' name='6,4' value='6,-7,1' class='space'>6,4</div>
<div id='55' name='7,4' value='7,-7,0' class='space axis'>7,4</div>
<div id='56' name='8,4' value='8,-7,-1' class='space'>8,4</div>
<div id='57' name='9,4' value='9,-7,-2' class='space'>9,4</div>
<div id='58' name='10,4' value='10,-7,-3' class='space'>10,4</div>
<div id='59' name='11,4' value='11,-7,-4' class='space'>11,4</div>
<br />
<div id='60' name='0,5' value='0,-6,6' class='space axis'>0,5</div>
<div id='61' name='1,5' value='1,-6,5' class='space'>1,5</div>
<div id='62' name='2,5' value='2,-6,4' class='space'>2,5</div>
<div id='63' name='3,5' value='3,-6,3' class='space'>3,5</div>
<div id='64' name='4,5' value='4,-6,2' class='space'>4,5</div>
<div id='65' name='5,5' value='5,-6,1' class='space'>5,5</div>
<div id='66' name='6,5' value='6,-6,0' class='space axis'>6,5</div>
<div id='67' name='7,5' value='7,-6,-1' class='space'>7,5</div>
<div id='68' name='8,5' value='8,-6,-2' class='space'>8,5</div>
<div id='69' name='9,5' value='9,-6,-3' class='space'>9,5</div>
<div id='70' name='10,5' value='10,-6,-4' class='space'>10,5</div>
<div id='71' name='11,5' value='11,-6,-5' class='space'>11,5</div>
<br />
<div id='72' name='0,6' value='0,-5,5' class='space axis'>0,6</div>
<div id='73' name='1,6' value='1,-5,4' class='space'>1,6</div>
<div id='74' name='2,6' value='2,-5,3' class='space'>2,6</div>
<div id='75' name='3,6' value='3,-5,2' class='space'>3,6</div>
<div id='76' name='4,6' value='4,-5,1' class='space'>4,6</div>
<div id='77' name='5,6' value='5,-5,0' class='space axis'>5,6</div>
<div id='78' name='6,6' value='6,-5,-1' class='space'>6,6</div>
<div id='79' name='7,6' value='7,-5,-2' class='space'>7,6</div>
<div id='80' name='8,6' value='8,-5,-3' class='space'>8,6</div>
<div id='81' name='9,6' value='9,-5,-4' class='space'>9,6</div>
<div id='82' name='10,6' value='10,-5,-5' class='space'>10,6</div>
<div id='83' name='11,6' value='11,-5,-6' class='space'>11,6</div>
<br />
<div id='84' name='0,7' value='0,-4,4' class='space axis'>0,7</div>
<div id='85' name='1,7' value='1,-4,3' class='space'>1,7</div>
<div id='86' name='2,7' value='2,-4,2' class='space'>2,7</div>
<div id='87' name='3,7' value='3,-4,1' class='space'>3,7</div>
<div id='88' name='4,7' value='4,-4,0' class='space axis'>4,7</div>
<div id='89' name='5,7' value='5,-4,-1' class='space'>5,7</div>
<div id='90' name='6,7' value='6,-4,-2' class='space'>6,7</div>
<div id='91' name='7,7' value='7,-4,-3' class='space'>7,7</div>
<div id='92' name='8,7' value='8,-4,-4' class='space'>8,7</div>
<div id='93' name='9,7' value='9,-4,-5' class='space'>9,7</div>
<div id='94' name='10,7' value='10,-4,-6' class='space'>10,7</div>
<div id='95' name='11,7' value='11,-4,-7' class='space'>11,7</div>
<br />
<div id='96' name='0,8' value='0,-3,3' class='space axis'>0,8</div>
<div id='97' name='1,8' value='1,-3,2' class='space'>1,8</div>
<div id='98' name='2,8' value='2,-3,1' class='space'>2,8</div>
<div id='99' name='3,8' value='3,-3,0' class='space axis'>3,8</div>
<div id='100' name='4,8' value='4,-3,-1' class='space'>4,8</div>
<div id='101' name='5,8' value='5,-3,-2' class='space'>5,8</div>
<div id='102' name='6,8' value='6,-3,-3' class='space'>6,8</div>
<div id='103' name='7,8' value='7,-3,-4' class='space'>7,8</div>
<div id='104' name='8,8' value='8,-3,-5' class='space'>8,8</div>
<div id='105' name='9,8' value='9,-3,-6' class='space'>9,8</div>
<div id='106' name='10,8' value='10,-3,-7' class='space'>10,8</div>
<div id='107' name='11,8' value='11,-3,-8' class='space'>11,8</div>
<br />
<div id='108' name='0,9' value='0,-2,2' class='space axis'>0,9</div>
<div id='109' name='1,9' value='1,-2,1' class='space'>1,9</div>
<div id='110' name='2,9' value='2,-2,0' class='space axis'>2,9</div>
<div id='111' name='3,9' value='3,-2,-1' class='space'>3,9</div>
<div id='112' name='4,9' value='4,-2,-2' class='space'>4,9</div>
<div id='113' name='5,9' value='5,-2,-3' class='space'>5,9</div>
<div id='114' name='6,9' value='6,-2,-4' class='space'>6,9</div>
<div id='115' name='7,9' value='7,-2,-5' class='space'>7,9</div>
<div id='116' name='8,9' value='8,-2,-6' class='space'>8,9</div>
<div id='117' name='9,9' value='9,-2,-7' class='space'>9,9</div>
<div id='118' name='10,9' value='10,-2,-8' class='space'>10,9</div>
<div id='119' name='11,9' value='11,-2,-9' class='space'>11,9</div>
<br />
</div>
</div>
</div>