Web Dev Solutions

+ "resolved": "git+ssh://git@github.com/webdevcat-me/svg-pan-zoom.git#8ea4e018b475eac05eb7ae8a067850c9bef7c2b5"

+ <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">

+</html>

+ opacity: 0;

+ stroke: black;

+/* use[href="#hex"]:hover, use[href="#hex"].hover

+} */

+ fill: teal;

+ stroke: black;

+ stroke: white;

+use.clone {

+use[data-allegiance="davion"].clone {

+use[data-allegiance="liao"].clone {

+use.selected {

+ animation: 1s selected 0.25s linear infinite;

+ stroke-width: 2px;

+ stroke: yellow;

+ r: 6px;

+}

+

+@keyframes selected {

+ 50% {

+ /* stroke: yellow; */

+ stroke-width: 0px;

+ r: 5px;

+ }

+}

+

+ fill: #008000;

+.board {

+ transform: translate(19px, 31px) scale(4);

+}

+

+ /* --scale: 0.95; */

+ opacity: 1;

+

+.buildings {

+ display: none;

+}

+ <!-- <g id="hex">

+ <polygon points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>

+ <circle cx="0" cy="0" r="1" fill="black"/>

+ </g> -->

+

+ <g id="image-maps">

+ <g class="board">

+ <g class="grid">

+ <g class="start-locations">

+ <g>

+ <!-- <use data-x="13" href="#t-1" data-allegiance="liao" data-number="1"/> -->

+ <use data-x="14" href="#t-2" data-allegiance="liao" data-number="2"/>

+ <use data-x="15" href="#t-3" data-allegiance="liao" data-number="3"/>

+ <use data-x="16" href="#t-4" data-allegiance="liao" data-number="4"/>

+ <use data-x="17" href="#t-5" data-allegiance="liao" data-number="5"/>

+ <use data-x="18" href="#t-6" data-allegiance="liao" data-number="6"/>

+ <use data-x="19" href="#t-7" data-allegiance="liao" data-number="7"/>

+ </g>

+ <g>

+ <use data-x="13" href="#t-1" data-allegiance="davion" data-number="1"/>

+ <use data-x="14" href="#t-2" data-allegiance="davion" data-number="2"/>

+ <use data-x="15" href="#t-3" data-allegiance="davion" data-number="3"/>

+ <use data-x="16" href="#t-4" data-allegiance="davion" data-number="4"/>

+ <use data-x="17" href="#t-5" data-allegiance="davion" data-number="5"/>

+ <use data-x="18" href="#t-6" data-allegiance="davion" data-number="6"/>

+ <use data-x="19" href="#t-7" data-allegiance="davion" data-number="7"/>

+ </g>

+ <g data-y="0">

+ <g data-x="0"><use href="#hex"/><use class="counter" href="#t-1" data-allegiance="liao" data-number="1"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="1">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="2">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="3">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="4">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="5">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="6">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="7">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="8">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="9">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="10">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="11">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="12">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="13">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="14">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="15">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="16">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="17">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="18">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="19">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="20">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="21">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="22">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="23">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="24">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="25">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="26">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="27">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="28">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="29">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="30">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="31">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="32">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="33">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="34">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="35">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="36">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="37">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="38">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="39">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="40">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="41">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="42">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="43">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="44">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="45">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="46">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="47">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="48">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="49">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ </g>

+ <g data-y="50">

+ <g data-x="0"><use href="#hex"/></g>

+ <g data-x="1"><use href="#hex"/></g>

+ <g data-x="2"><use href="#hex"/></g>

+ <g data-x="3"><use href="#hex"/></g>

+ <g data-x="4"><use href="#hex"/></g>

+ <g data-x="5"><use href="#hex"/></g>

+ <g data-x="6"><use href="#hex"/></g>

+ <g data-x="7"><use href="#hex"/></g>

+ <g data-x="8"><use href="#hex"/></g>

+ <g data-x="9"><use href="#hex"/></g>

+ <g data-x="10"><use href="#hex"/></g>

+ <g data-x="11"><use href="#hex"/></g>

+ <g data-x="12"><use href="#hex"/></g>

+ <g data-x="13"><use href="#hex"/></g>

+ <g data-x="14"><use href="#hex"/></g>

+ <g data-x="15"><use href="#hex"/></g>

+ <g data-x="16"><use href="#hex"/></g>

+ <g data-x="17"><use href="#hex"/></g>

+ <g data-x="18"><use href="#hex"/></g>

+ <g data-x="19"><use href="#hex"/></g>

+ <g data-x="20"><use href="#hex"/></g>

+ <g data-x="21"><use href="#hex"/></g>

+ <g data-x="22"><use href="#hex"/></g>

+ <g data-x="23"><use href="#hex"/></g>

+ <g data-x="24"><use href="#hex"/></g>

+ <g data-x="25"><use href="#hex"/></g>

+ <g data-x="26"><use href="#hex"/></g>

+ <g data-x="27"><use href="#hex"/></g>

+ <g data-x="28"><use href="#hex"/></g>

+ <g data-x="29"><use href="#hex"/></g>

+ <g data-x="30"><use href="#hex"/></g>

+ <g data-x="31"><use href="#hex"/></g>

+ <g data-x="32"><use href="#hex"/></g>

+ <g class="buildings">

+ <rect x="205" y="305" width="170" height="140"/>

+ <!-- <line class="sight-line" x1="0" y1="0" x2="0" y2="0"/> -->

+ const vb = 'viewBox';

+

+ function storeLatestViewBoxVal(svg) {

+ const observer = new MutationObserver(mutations => {

+ if (mutations.find(m => m.target == svg && m.attributeName == vb)) {

+ localStorage.setItem(vb, svg.getAttribute(vb));

+ }

+ });

+

+ observer.observe(svg, { attributes: true });

+ }

+

+ function restoreViewboxVal(svg) {

+ const storedVbVal = localStorage.getItem(vb);

+

+ if (storedVbVal) {

+ svg.setAttributeNS(null, vb, storedVbVal);

+ }

+ }

+

+ restoreViewboxVal(svg);

+

+ svg.setAttributeNS(null, vb, zoom(svg, e));

+

+ storeLatestViewBoxVal(svg);

+// const Grid = new function () {

+// let cells;

+// this.setUp = function (cellList) {

+// cells = cellList;

+// cellList.forEach(cell => {

+// cell.addEventListener('click', e => {

+// let { dataset: { x }, parentElement: { dataset: { y }}} = cell;

+// console.log(`Cell at index { x: ${x}, y: ${y} } clicked.`);

+// console.log(Board.getCellPosition(cell));

+

+// if (!Counter.getCounter(cell)) {

+// const counter = Counter.getSelected();

+

+// counter && Counter.place(counter, cell);

+// // SightLine.setSource(cell);

+// }

+// });

+

+// cell.addEventListener('pointerover', e => {

+// const counter = Counter.getSelected();

+// if (counter && Counter.isOnBoard(counter)) {

+// SightLine.setTarget(e.target.parentElement);

+// }

+// });

+// });

+// };

+

+// this.drawLine = function ({ x: sourceX, y: sourceY }, { x: targetX, y: targetY }) {

+// let lineCoords = linedraw(sourceX, sourceY, targetX, targetY);

+// // lineCoords.shift();

+// // let s = lineCoords.map(([x, y]) => `use[href="#point"][data-x="${x}"][data-y="${y}"]`).join(', ');

+

+// console.log(lineCoords);

+

+// // let list = cells.filter(c => c.dataset.x == )

+

+// // ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));

+// };

+// };

+

+// const Counter = new function () {

+// let counters;

+

+// this.setUp = function (list) {

+// counters = list;

+

+// counters.forEach(counter => counter.addEventListener('click', e => {

+// e.stopPropagation();

+

+// const { allegiance: allegiance, number: n } = counter.dataset,

+// al = allegiance.charAt(0).toUpperCase() + allegiance.slice(1);

+

+// if (counter.classList.contains('selected')) {

+// counter.classList.toggle('selected');

+// } else {

+// counters.forEach(c => c.classList.remove('selected'));

+// counter.classList.add('selected');

+

+// if (this.isOnBoard(counter)) {

+// SightLine.setSource(counter.parentElement);

+// } else {

+// SightLine.reset();

+// }

+// }

+// }));

+// };

+

+// this.getCounter = function (cell) {

+// return cell.querySelector('use[href*="#t-"]');

+// };

+

+// this.getSelected = function () {

+// return Array.from(counters).find(c => c.classList.contains('selected'));

+// };

+

+// this.place = function (counter, cell) {

+// counter.removeAttribute('data-x');

+// cell.appendChild(counter);

+// SightLine.setSource(cell);

+// };

+

+// this.isOnBoard = function (counter) {

+// return !counter.hasAttributeNS(null, 'data-x');

+// };

+// };

+

+// const SightLine = new function () {

+// let el, source, target;

+

+// this.set = function (line) {

+// el = line;

+// }

+

+// this.clear = function () {

+// // let sl = grid.querySelector('line.sight-line');

+// // let target = grid.querySelector(`use[href="#point"].sight-line-target`);

+

+// // if (sl) {

+// // sl.remove();

+// // }

+

+// // if (target) {

+// // target.classList.remove('sight-line-target');

+// // }

+

+// // this.clearHexes();

+// };

+

+// this.clearHexes = function () {

+// // ptGrp.querySelectorAll('use[href="#point"].active').forEach(el => el.classList.remove('active'));

+// };

+

+// this.reset = function () {

+// el.setAttributeNS(null, 'x1', 0);

+// el.setAttributeNS(null, 'y1', 0);

+// el.setAttributeNS(null, 'x2', 0);

+// el.setAttributeNS(null, 'y2', 0);

+// };

+

+// this.setSource = function (cell) {

+// source = target = cell;

+// const { x, y } = Board.getCellPosition(cell);

+// el.setAttributeNS(null, 'x1', x);

+// el.setAttributeNS(null, 'y1', y);

+// el.setAttributeNS(null, 'x2', x);

+// el.setAttributeNS(null, 'y2', y);

+// };

+

+// this.setTarget = function (cell) {

+// const targetPos = Board.getCellPosition(cell);

+// el.setAttributeNS(null, 'x2', targetPos.x);

+// el.setAttributeNS(null, 'y2', targetPos.y);

+

+// let sourceCoords = {

+// x: parseInt(source.dataset.x),

+// y: parseInt(source.parentElement.dataset.y)

+// }

+

+// let targetCoords = {

+// x: parseInt(cell.dataset.x),

+// y: parseInt(cell.parentElement.dataset.y)

+// }

+

+// Grid.drawLine(sourceCoords, targetCoords);

+// // console.log('target cell', target, 'source cell', source);

+// };

+

+// this.drawHexes = function (...coords) {

+// // this.clearHexes()

+

+// // info.querySelector('#hex-count').textContent = offset_distance(...coords);

+// // info.style.display = 'block';

+

+// // let lineCoords = linedraw(...coords);

+// // lineCoords.shift();

+// // let s = lineCoords.map(([x, y]) => `use[href="#point"][data-x="${x}"][data-y="${y}"]`).join(', ');

+

+// // ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));

+// };

+// };

+

+// const Board = new function () {

+// let board;

+

+// function getCells(svg) {

+// return svg.querySelectorAll('g[data-x]');

+// }

+

+// function getCounters(svg) {

+// return svg.querySelectorAll('use[href*="#t-"]');

+// }

+

+// this.setUp = function (svg) {

+// board = svg.querySelector('.board');

+// Grid.setUp(getCells(svg));

+// Counter.setUp(getCounters(svg));

+// SightLine.set(svg.querySelector('.sight-line'));

+// };

+

+// this.getCellPosition = function (cell) {

+// let pt = new DOMPoint(0, 0);

+

+// let transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g);

+// let mtx = new DOMMatrix(transform);

+// pt = pt.matrixTransform(mtx);

+

+// transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);

+// mtx = new DOMMatrix(transform);

+// pt = pt.matrixTransform(mtx);

+

+// return pt;

+// };

+// };

+

+class Game {

+ constructor(svg) {

+ this.svg = svg;

+

+ this.setUpSightLine(this);

+ this.setUpCounter(this);

+ this.setUpRecordSheet();

+ this.setUpCells();

+ }

+

+ getCells() {

+ getCell(x, y) {

+ return svg.querySelector(`g[data-y="${y}"] g[data-x="${x}"]`);

+ getHex(cell) {

+ return cell.querySelector('use[href="#hex"]');

+ }

+

+ getCounters() {

+ return svg.querySelectorAll(`use[data-allegiance][data-number]:not(.clone)`);

+ }

+

+ getCounter(al, n) {

+ return svg.querySelector(`use[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`);

+ }

+

+ getCounterAndClones(al, n) {

+ return svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"]`);

+ }

+

+ getClones(al, n) {

+ return svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"].clone`);

+ }

+

+ getSelected() {

+ return svg.querySelector(`use[data-allegiance][data-number].selected`);

+ }

+

+ getSightLine() {

+ return svg.querySelector('line.sight-line');

+ }

+

+ getExistingArcs(al, n) {

+ return svg.querySelectorAll(`#firing-arcs polygon[data-troop-number="${n}"][data-troop-allegiance="${al}"]`);

+ }

+

+ getUnclippedFiringArcs() {

+ return svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');

+ }

+

+ getGridIndex({ parentElement }) {

+ return { x: parentElement.dataset.x, y: parentElement.parentElement.dataset.y };

+ }

+

+ getBoard() {

+ return svg.querySelector('.board');

+ }

+

+ getActiveHexes() {

+ return svg.querySelectorAll('use[href="#hex"].active');

+ }

+

+ getCellPosition(cell) {

+ let pt = new DOMPoint(0, 0),

+ transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),

+ mtx = new DOMMatrix(transform);

+ pt = pt.matrixTransform(mtx);

+

+ transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);

+ mtx = new DOMMatrix(transform);

+ pt = pt.matrixTransform(mtx);

+

+ return pt;

+ }

+

+ setUpCells() {

+ this.getCells().forEach(cell => {

+ let group = cell,

+ point = this.getHex(cell);

+

+ group.addEventListener('click', e => {

+ let cl = e.target.classList,

+ sl = this.getSightLine(),

+ targetIsSomeOtherUnitCounter = cl.contains('counter') && !cl.contains('clone'),

+ selected = this.RecordSheet.getSelected();

+

+ // maybe we should start with, "are we clicking on a counter?"

+ if (sl) {

+ let { troopNumber: sTn, troopAllegiance: sTa } = selected.dataset,

+ { troopNumber: tTn, troopAllegiance: tTa } = e.target.dataset,

+ sightLineInLockedPosition = !sl.classList.contains('active'),

+ targetIsCounterOrCloneOfSelected = cl.contains('counter') && sTn == tTn && sTa == tTa;

+

+ if (sightLineInLockedPosition && targetIsCounterOrCloneOfSelected) {

+ let counterParent = Counter.get(tTn, tTa).parentElement,

+ [x, y] = counterParent.getAttribute('transform').match(/-?\d+\.?\d*/g),

+ target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),

+ { x: x1, y: y1 } = counterParent.dataset,

+ { x: x2, y: y2 } = target.dataset;

+

+ sl.setAttributeNS(null, 'x1', x);

+ sl.setAttributeNS(null, 'y1', y);

+

+ SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));

+ } else if (targetIsCounterOrCloneOfSelected || targetIsSomeOtherUnitCounter) {

+ if (targetIsSomeOtherUnitCounter) {

+ RecordSheet.select(e.target);

+ Counter.select(e.target);

+ }

+

+ SightLine.clear();

+ }

+ } else if (targetIsSomeOtherUnitCounter) {

+ this.RecordSheet.select(e.target);

+ this.Counter.select(e.target);

+ }

+ });

+

+ point.addEventListener('click', e => {

+ let selectedSoldier = document.querySelector('.soldier-record.selected');

+ let existingOccupant =

+ svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);

+

+ if (selectedSoldier && !existingOccupant) {

+ let sl = svg.querySelector('.sight-line');

+

+ this.Counter.place(selectedSoldier, point);

+

+ if (sl) {

+ if (sl.classList.contains('active')) {

+ this.SightLine.clear();

+ } else {

+ let { x, y } = this.getCellPosition(point.parentElement),

+ target = svg.querySelector(`use[href="#hex"].sight-line-target`),

+ { x: x2, y: y2 } = this.getGridIndex(target),

+ { x: x1, y: y1 } = this.getGridIndex(point);

+

+ sl.setAttributeNS(null, 'x1', x);

+ sl.setAttributeNS(null, 'y1', y);

+

+ this.SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));

+ }

+ }

+ }

+ });

+

+ group.addEventListener('contextmenu', e => {

+ e.preventDefault();

+ let sl = svg.querySelector('.sight-line');

+

+ if (sl) {

+ sl.classList.toggle('active');

+

+ if (sl.classList.contains('active')) {

+ this.SightLine.clear();

+ } else {

+ group.querySelector(`use[href="#hex"]`).classList.add('sight-line-target');

+ }

+

+ group.dispatchEvent(new MouseEvent('pointerover'));

+ }

+ });

+

+ group.addEventListener('pointerover', e => {

+ // group.classList.add('hover');

+

+ let selected = this.RecordSheet.getSelected();

+

+ if (selected) {

+ let { troopNumber: tn, troopAllegiance: ta } = selected.dataset,

+ counter = this.Counter.get(tn, ta),

+ sl = svg.querySelector('.sight-line');

+

+ if (counter && (!sl || sl.classList.contains('active'))) {

+ let sourceCell = counter.parentElement;

+

+ if (sourceCell != group) {

+ this.SightLine.draw(sourceCell, group);

+ }

+ }

+ }

+ });

+

+ group.addEventListener('pointerout', e => {

+ let sl = svg.querySelector('.sight-line.active');

+

+ if (sl && sl.classList.contains('active')) {

+ this.SightLine.clear();

+ }

+ });

+ });

+ }

+

+ setUpRecordSheet() {

+ const Counter = this.Counter,

+ svg = this;

+

+ this.RecordSheet = new function () {

+ let clipUnclippedFiringArcs = function () {

+ let unclipped = svg.getUnclippedFiringArcs();

+

+ unclipped.forEach(el => {

+ let { troopNumber, troopAllegiance } = el.dataset,

+ clipPathId = `clip-path-${troopAllegiance}-${troopNumber}`;

+

+ let isVisible =

+ document

+ .getElementById('toggle-firing-arc-vis')

+ .querySelector(`input[data-allegiance="${troopAllegiance}"]`)

+ .checked;

+

+ if (isVisible) {

+ svg.querySelector(`#${clipPathId}`).style.display = 'none';

+ }

+

+ el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);

+ });

+ };

+

+ this.unSelect = function () {

+ let selected = this.getSelected();

+

+ if (selected) {

+ selected.classList.remove('selected');

+ document.getElementById('toggle-prone-counter').checked = false;

+ }

+

+ clipUnclippedFiringArcs();

+ Counter.unSelect();

+ };

+

+ this.getSelected = function () {

+ return document.querySelector('.soldier-record.selected');

+ };

+

+ this.select = function (el) {

+ let { number: troopNumber, allegiance: troopAllegiance } = el.dataset,

+ proneStatus = Counter.hasProne(troopNumber, troopAllegiance);

+

+ this.unSelect();

+ document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');

+ document.getElementById('toggle-prone-counter').checked = proneStatus;

+ let existingArcs = svg.getExistingArcs(troopAllegiance, troopNumber);

+ existingArcs.forEach(el => el.removeAttribute('clip-path'));

+ };

+ };

+ }

+

+ setUpCounter(container) {

+ this.Counter = new function () {

+ let selectedClass = 'selected',

+ svgns = "http://www.w3.org/2000/svg",

+

+ dataSelector = function (troopNumber, allegiance) {

+ return `[data-number="${troopNumber}"][data-allegiance="${allegiance}"]`;

+ },

+

+ selector = function (troopNumber, allegiance) {

+ return `use.counter${dataSelector(troopNumber, allegiance)}`;

+ },

+

+ position = function (x, y) {

+ return `g[data-x="${x}"][data-y="${y}"]`;

+ },

+

+ counterPosition = function (x, y) {

+ return `use.counter[data-x="${x}"][data-x="${y}"]`;

+ },

+

+ traceSelector = function (troopNumber, allegiance) {

+ return `polyline.move-trace${dataSelector(troopNumber, allegiance)}`;

+ },

+

+ clickClone = function (e) {

+ e.stopPropagation();

+

+ let { number: troopNumber, allegiance: troopAllegiance } = this.dataset,

+ pos = container.getCellPosition(this.parentElement);

+

+ if (container.Counter.isSelected(troopNumber, troopAllegiance)) {

+ let trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance)),

+ points = trace.getAttribute('points').split(' ');

+

+ if (`${pos.x},${pos.y}` == points.at(0)) {

+ let counter = container.getCounter(troopAllegiance, troopNumber);

+ counter.setAttributeNS(null, 'x', 0);

+ counter.setAttributeNS(null, 'y', 0);

+ this.parentElement.appendChild(counter);

+

+ container.Counter.removeClones(counter);

+ trace.remove();

+ container.SightLine.clear();

+ } else {

+ points = points.filter(p => p != `${pos.x},${pos.y}`).join(' ');

+ trace.setAttributeNS(null, 'points', points);

+ }

+

+ this.remove();

+ }

+ },

+

+ pointerOver = function () {

+ let { troopNumber, troopAllegiance } = this.dataset;

+ cp = svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);

+

+ if (cp) {

+ cp.style.display = 'none';

+ }

+ },

+

+ pointerOut = function () {

+ let { troopNumber, troopAllegiance } = this.dataset;

+ cp = svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);

+

+ if (cp) {

+ let isVisible =

+ document

+ .getElementById('toggle-firing-arc-vis')

+ .querySelector(`input[data-allegiance="${troopAllegiance}"]`)

+ .checked;

+

+ cp.style.display = isVisible ? 'none' : '';

+ }

+ },

+

+ click = function (e) {

+ if (this.classList.contains(selectedClass)) {

+ e.stopPropagation();

+ let { number: troopNumber, allegiance: troopAllegiance } = this.dataset,

+ trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance));

+

+ if (trace) {

+ let points = trace.getAttribute('points').split(' '),

+ [clonePosX, clonePosY] = points.at(-2).split(',').map(p => parseFloat(p)),

+

+ { clone } = Array

+ .from(container.getClones(troopAllegiance, troopNumber))

+ .map(c => { return { clone: c, pos: container.getCellPosition(c.parentElement) }})

+ .find(({ pos: { x, y }}) => x == clonePosX && y == clonePosY);

+

+ points.pop();

+

+ if (points.length >= 2) {

+ trace.setAttributeNS(null, 'points', points.join(' '));

+ } else {

+ trace.remove();

+ }

+

+ let sl = container.svg.querySelector('.sight-line');

+

+ if (sl) {

+ const target = container.svg.querySelector('.sight-line-target').parentElement,

+ { x, y } = container.getCellPosition(clone.parentElement),

+ x1 = clone.parentElement.dataset.x,

+ y1 = clone.parentElement.parentElement.dataset.y,

+ x2 = target.dataset.x,

+ y2 = target.parentElement.dataset.y;

+

+ sl.setAttributeNS(null, 'x1', x);

+ sl.setAttributeNS(null, 'y1', y);

+

+ container.SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));

+ } else {

+ container.SightLine.draw(this.parentElement, clone.parentElement);

+ }

+

+ clone.parentElement.appendChild(this);

+ clone.remove();

+ }

+ }

+ },

+

+ dblClick = function () {

+ if (this.classList.contains(selectedClass)) {

+ let { troopNumber, troopAllegiance } = this.dataset,

+ trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));

+

+ if (!trace) {

+ Counter.remove(this);

+ svg.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());

+ }

+ }

+ };

+

+ this.get = function (troopNumber, allegiance) {

+ return container.getCounter(allegiance, troopNumber);

+ };

+

+ this.getAt = function (x, y) {

+ return container.querySelector(`${counterPosition(x, y)}:not(.clone)`);

+ };

+

+ this.select = function ({ dataset: { allegiance, number }}) {

+ this.unSelect();

+

+ let counter = container.getCounter(allegiance, number);

+

+ if (counter) {

+ counter.classList.add(selectedClass);

+ }

+ };

+

+ this.unSelect = function () {

+ let selected = container.getSelected();

+

+ if (selected) {

+ let { troopNumber, troopAllegiance } = selected.dataset;

+

+ selected.classList.remove(selectedClass);

+ selected.removeAttribute('style');

+

+ container

+ .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)

+ .forEach(el => el.removeAttribute('style'));

+ }

+ };

+

+ this.isSelected = function (troopNumber, allegiance) {

+ return container.svg.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null;

+ };

+

+ this.place = function ({ dataset: { troopNumber, troopAllegiance }}, point) {

+ let counter, points,

+ counterNodeList = container.getCounterAndClones(troopAllegiance, troopNumber);

+

+ if (counterNodeList.length > 0) {

+ let counters = Array.from(counterNodeList),

+ original = counters.find(el => !el.classList.contains('clone')),

+ trace = container.svg.querySelector(traceSelector(troopNumber, troopAllegiance));

+

+ counter = original.cloneNode();

+ counter.setAttributeNS(null, 'x', 0);

+ counter.setAttributeNS(null, 'y', 0);

+ counter.classList.remove(selectedClass);

+ counter.classList.add('clone');

+

+ original.setAttributeNS(null, 'x', 0);

+ original.setAttributeNS(null, 'y', 0);

+

+ original.parentElement.appendChild(counter);

+ point.parentElement.appendChild(original);

+

+ let previous = container.getCellPosition(counter.parentElement),

+ current = container.getCellPosition(original.parentElement);

+

+ if (!trace) {

+ trace = document.createElementNS(svgns, 'polyline');

+

+ points = `${previous.x},${previous.y} ${current.x},${current.y}`;

+

+ trace.dataset.number = troopNumber;

+ trace.dataset.allegiance = troopAllegiance;

+ trace.classList.add('move-trace');

+

+ container.getBoard().prepend(trace);

+ } else {

+ points = `${trace.getAttribute('points')} ${current.x},${current.y}`;

+ }

+

+ trace.setAttributeNS(null, 'points', points);

+ counter.addEventListener('click', clickClone);

+ } else {

+ counter = document.createElementNS(svgns, 'use'),

+

+ counter.setAttributeNS(null, 'href', `#${troopAllegiance}-${troopNumber}`);

+ counter.classList.add('counter', 'selected');

+ counter.setAttributeNS(null, 'x', point.getAttribute('x'));

+ counter.setAttributeNS(null, 'y', point.getAttribute('y'));

+ counter.dataset.troopNumber = troopNumber;

+ counter.dataset.troopAllegiance = troopAllegiance;

+ counter.dataset.x = point.dataset.x;

+ counter.dataset.y = point.dataset.y;

+ counter.style.pointerEvents = 'auto';

+

+ counter.addEventListener('pointerover', pointerOver);

+ counter.addEventListener('pointerout', pointerOut);

+ counter.addEventListener('click', click);

+ counter.addEventListener('dblclick', dblClick);

+ }

+

+ // container.querySelector(`g[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`).appendChild(counter);

+ // container.getCell(counter.dataset.x, counter.dataset.y).appendChild(counter);

+ };

+

+ this.remove = function ({ dataset: { troopNumber, troopAllegiance }}) {

+ container

+ .querySelectorAll(dataSelector(troopNumber, troopAllegiance))

+ .forEach(el => el.remove());

+ };

+

+ this.removeClones = function ({ dataset: { allegiance, number }}) {

+ container.getClones(allegiance, number).forEach(el => el.remove());

+ };

+

+ this.endMove = function (el) {

+ let { troopNumber, troopAllegiance } = el.dataset;

+ let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));

+

+ if (trace) {

+ trace.remove();

+ }

+

+ Counter.removeClones(el);

+ };

+

+ this.hasProne = function (troopNumber, troopAllegiance) {

+ let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`;

+

+ return !!svg.querySelector(selector);

+ };

+

+ this.addEventListeners = function (counter) {

+ // counter.addEventListener('pointerover', pointerOver);

+ // counter.addEventListener('pointerout', pointerOut);

+ counter.addEventListener('click', click);

+ // counter.addEventListener('dblclick', dblClick);

+ };

+ };

+

+ this.getCounters().forEach(c => this.Counter.addEventListeners(c));

+ }

+

+ setUpSightLine(ptGrp) {

+ const svgns = "http://www.w3.org/2000/svg",

+ grid = svg.querySelector('.board');

+

+ this.SightLine = new function() {

+ this.clear = function() {

+ let sl = grid.querySelector('line.sight-line');

+ let target = grid.querySelector(`use[href="#hex"].sight-line-target`);

+

+ if (sl) {

+ sl.remove();

+ }

+

+ if (target) {

+ target.classList.remove('sight-line-target');

+ }

+

+ this.clearHexes();

+ };

+

+ this.clearHexes = function() {

+ ptGrp.getActiveHexes().forEach(el => el.classList.remove('active'));

+ };

+

+ this.draw = function(source, target) {

+ ptGrp.SightLine.clear();

+

+ let pt = new DOMPoint(0, 0),

+ transform = getComputedStyle(source).transform.match(/-?\d+\.?\d*/g),

+ mtx = new DOMMatrix(transform);

+

+ pt = pt.matrixTransform(mtx);

+

+ transform = getComputedStyle(source.parentElement).transform.match(/-?\d+\.?\d*/g);

+ mtx = new DOMMatrix(transform);

+ pt = pt.matrixTransform(mtx);

+

+ let slX1 = pt.x,

+ slY1 = pt.y;

+

+ pt = new DOMPoint(0, 0);

+ transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g);

+ mtx = new DOMMatrix(transform);

+

+ pt = pt.matrixTransform(mtx);

+

+ transform = getComputedStyle(target.parentElement).transform.match(/-?\d+\.?\d*/g);

+ mtx = new DOMMatrix(transform);

+ pt = pt.matrixTransform(mtx);

+

+ let slX2 = pt.x,

+ slY2 = pt.y;

+

+ let sightLine = document.createElementNS(svgns, 'line');

+

+ sightLine.classList.add('sight-line');

+ sightLine.classList.add('active');

+ sightLine.setAttributeNS(null, 'x1', slX1);

+ sightLine.setAttributeNS(null, 'y1', slY1);

+ sightLine.setAttributeNS(null, 'x2', slX2);

+ sightLine.setAttributeNS(null, 'y2', slY2);

+

+ ptGrp.getBoard().appendChild(sightLine);

+

+ let coords = [

+ source.dataset.x,

+ source.parentElement.dataset.y,

+ target.dataset.x,

+ target.parentElement.dataset.y

+ ].map(n => parseInt(n));

+

+ this.drawHexes(...coords);

+ };

+

+ this.drawHexes = function(...coords) {

+ this.clearHexes()

+

+ // info.querySelector('#hex-count').textContent = offset_distance(...coords);

+ // info.style.display = 'block';

+

+ let lineCoords = linedraw(...coords);

+

+ let s = lineCoords

+ .map(([x, y]) => `g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)

+ .join(', ');

+

+ ptGrp.svg.querySelectorAll(s).forEach(p => p.classList.add('active'));

+ };

+ }

+ }

+}

+ const svg = document.querySelector('object').contentDocument.querySelector('svg');

+

+ window.svg = svg;

+ window.G = new Game(svg);

+

+ const HORZ_POINT_DISTANCE = 1.005,

+ FIRING_ARC_SIZE = {

+ el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {

+ { textContent: count, dataset: { update }} = turnCounter;