| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-01 11:31:35 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-01 11:31:58 -0700 |
| commit | e8fae51b32b6ebc4ec4e16338467b7fcc41edd11 (patch) | |
| tree | baf01092df986019346c4cc606cce2584577eed5 | |
| parent | 9a4fec27daed58272c71e163df7df216a4252127 (diff) | |
WIP: use scenario template to build scenarios client-side
| -rw-r--r-- | public/assets/images/scenario-dragon_hunting.svg | 75 | ||||
| -rw-r--r-- | public/assets/images/scenario-race_against_time.svg | 71 | ||||
| -rw-r--r-- | public/assets/images/scenario-side_show.svg | 1859 | ||||
| -rw-r--r-- | public/assets/images/scenario_template.svg | 60 | ||||
| -rw-r--r-- | public/index.html | 2 | ||||
| -rw-r--r-- | src/index.js | 246 | ||||
| -rw-r--r-- | test/integration/fixtures/scenario-test.svg | 130 |
7 files changed, 300 insertions, 2143 deletions
diff --git a/public/assets/images/scenario-dragon_hunting.svg b/public/assets/images/scenario-dragon_hunting.svg index e456f27..878c667 100644 --- a/public/assets/images/scenario-dragon_hunting.svg +++ b/public/assets/images/scenario-dragon_hunting.svg @@ -1,69 +1,12 @@ -<?xml version="1.0" standalone="no"?> -<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg"> - <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" /> - <style> - g[data-edge="north"] { --i: -2; } - g[data-edge="south"] { --i: 78; } - - #background { - stroke: #304b75; - fill: #bacae3; - } - - pattern use { - stroke: black; - stroke-width: 0.3px; - } - - .cw-60-deg { - transform: rotate(60deg); - } - - .ccw-60-deg { - transform: rotate(-60deg); - } - </style> - <defs> - <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> - - <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/> - - <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse"> - <use y="-15" href="#ast-line"/> - <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/> - <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/> - <use y="15" href="#ast-line"/> - <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/> - <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/> - - <use x="8.66" href="#ast-line"/> - <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/> - <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/> - <use x="-8.66" href="#ast-line"/> - <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/> - <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/> - </pattern> - - <image id="counter-prone" href="counter_prone.jpg" width="10"/> - <image id="counter-grenade" href="counter_grenade.jpg" width="10"/> - </defs> - - <rect id="background"/> - +<?xml version="1.0" standalone="yes"?> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300"> <g class="gameboard"> - <use href="mapsheets.svg#map2"/> - <use href="mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/> - <use href="mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/> - - <rect id="dots" fill="url(#asterisk)"/> - - <g id="firing-arcs"> - <g id="shapes"/> - <g id="lines"/> - </g> + <use class="mapsheet" href="mapsheets.svg#map2"/> + <use class="mapsheet" href="mapsheets.svg#map1" style="transform: translate(0, 390.25px);"/> + <use class="mapsheet" href="mapsheets.svg#map3" style="transform: translate(0, 780.5px);"/> <g class="start-locations" data-attacker-name="liao" data-defender-name="davion"> - <g data-edge="north"> + <g data-edge="north" style="--i: -2"> <g data-x="13"> <g class="counter" data-allegiance="attacker" data-number="1"> <use class="primary-weapon" href="counters.svg#blazer"/> @@ -114,7 +57,7 @@ </g> </g> </g> - <g data-edge="south"> + <g data-edge="south" style="--i: 78"> <g data-x="13"> <g class="counter" data-allegiance="defender" data-number="1"> <use class="primary-weapon" href="#blazer"/> @@ -166,9 +109,7 @@ </g> </g> </g> - - <g class="grid"/> </g> - <script data-cols="33" data-rows="77" href="../../map.js"/> + <script data-cols="33" data-rows="77"/> </svg> diff --git a/public/assets/images/scenario-race_against_time.svg b/public/assets/images/scenario-race_against_time.svg index 8a1cc04..e542ce5 100644 --- a/public/assets/images/scenario-race_against_time.svg +++ b/public/assets/images/scenario-race_against_time.svg @@ -1,67 +1,10 @@ -<?xml version="1.0" standalone="no"?> -<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg"> - <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" /> - <style> - g[data-edge="north"] { --i: -2; } - g[data-edge="south"] { --i: 26; } - - #background { - stroke: #304b75; - fill: #bacae3; - } - - pattern use { - stroke: black; - stroke-width: 0.3px; - } - - .cw-60-deg { - transform: rotate(60deg); - } - - .ccw-60-deg { - transform: rotate(-60deg); - } - </style> - <defs> - <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> - - <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/> - - <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse"> - <use y="-15" href="#ast-line"/> - <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/> - <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/> - <use y="15" href="#ast-line"/> - <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/> - <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/> - - <use x="8.66" href="#ast-line"/> - <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/> - <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/> - <use x="-8.66" href="#ast-line"/> - <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/> - <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/> - </pattern> - - <image id="counter-prone" href="counter_prone.jpg" width="10"/> - <image id="counter-grenade" href="counter_grenade.jpg" width="10"/> - </defs> - - <rect id="background"/> - +<?xml version="1.0" standalone="yes"?> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300"> <g class="gameboard"> - <use href="mapsheets.svg#map4"/> - - <rect id="dots" fill="url(#asterisk)"/> - - <g id="firing-arcs"> - <g id="shapes"/> - <g id="lines"/> - </g> + <use class="mapsheet" href="mapsheets.svg#map4"/> <g class="start-locations" data-attacker-name="liao" data-defender-name="davion"> - <g data-edge="north"> + <g data-edge="north" style="--i: -2"> <g data-x="13"> <g class="counter" data-allegiance="attacker" data-number="1"> <use class="primary-weapon" href="counters.svg#blazer"/> @@ -112,7 +55,7 @@ </g> </g> </g> - <g data-edge="south"> + <g data-edge="south" style="--i: 26"> <g data-x="13"> <g class="counter" data-allegiance="defender" data-number="1"> <use class="primary-weapon" href="#blazer"/> @@ -164,9 +107,7 @@ </g> </g> </g> - - <g class="grid"/> </g> - <script data-cols="33" data-rows="25" href="../../map.js"/> + <script data-cols="33" data-rows="25"/> </svg> diff --git a/public/assets/images/scenario-side_show.svg b/public/assets/images/scenario-side_show.svg index 1041bd1..70e8df3 100644 --- a/public/assets/images/scenario-side_show.svg +++ b/public/assets/images/scenario-side_show.svg @@ -1,68 +1,11 @@ -<?xml version="1.0" standalone="no"?> -<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg"> - <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" /> - <style> - g[data-edge="north"] { --i: -2; } - g[data-edge="south"] { --i: 52; } - - #background { - stroke: #304b75; - fill: #bacae3; - } - - pattern use { - stroke: black; - stroke-width: 0.3px; - } - - .cw-60-deg { - transform: rotate(60deg); - } - - .ccw-60-deg { - transform: rotate(-60deg); - } - </style> - <defs> - <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> - - <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/> - - <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse"> - <use y="-15" href="#ast-line"/> - <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/> - <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/> - <use y="15" href="#ast-line"/> - <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/> - <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/> - - <use x="8.66" href="#ast-line"/> - <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/> - <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/> - <use x="-8.66" href="#ast-line"/> - <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/> - <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/> - </pattern> - - <image id="counter-prone" href="counter_prone.jpg" width="10"/> - <image id="counter-grenade" href="counter_grenade.jpg" width="10"/> - </defs> - - <rect id="background"/> - +<?xml version="1.0" standalone="yes"?> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300"> <g class="gameboard"> - <use href="mapsheets.svg#map2"/> - <use href="mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/> - - <rect id="dots" fill="url(#asterisk)"/> - - <g id="firing-arcs"> - <g id="shapes"/> - <g id="lines"/> - </g> + <use class="mapsheet" href="mapsheets.svg#map3" style="transform: translate(0, 390.25px);"/> + <use class="mapsheet" href="mapsheets.svg#map2"/> <g class="start-locations" data-attacker-name="liao" data-defender-name="davion"> - <g data-edge="north"> + <g data-edge="north" style="--i: -2"> <g data-x="13"> <g class="counter selected" data-allegiance="attacker" data-number="1"> <use class="primary-weapon" href="counters.svg#blazer"/> @@ -113,7 +56,7 @@ </g> </g> </g> - <g data-edge="south"> + <g data-edge="south" style="--i: 53"> <g data-x="13"> <g class="counter" data-allegiance="defender" data-number="1"> <use class="primary-weapon" href="#blazer"/> @@ -165,1795 +108,7 @@ </g> </g> </g> - - <g class="grid"> - <g data-y="0"> - <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="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> - </g> </g> - <script href="../../map.js"/> + <script data-cols="33" data-rows="52"/> </svg> diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg new file mode 100644 index 0000000..8f8b5f7 --- /dev/null +++ b/public/assets/images/scenario_template.svg @@ -0,0 +1,60 @@ +<?xml version="1.0" standalone="no"?> +<svg viewBox="-10 -10 200 300" xmlns="http://www.w3.org/2000/svg"> + <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" /> + <style> + #background { + stroke: #304b75; + fill: #bacae3; + } + + pattern use { + stroke: black; + stroke-width: 0.3px; + } + + .cw-60-deg { + transform: rotate(60deg); + } + + .ccw-60-deg { + transform: rotate(-60deg); + } + </style> + <defs> + <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> + + <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/> + + <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse"> + <use y="-15" href="#ast-line"/> + <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/> + <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/> + <use y="15" href="#ast-line"/> + <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/> + <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/> + + <use x="8.66" href="#ast-line"/> + <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/> + <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/> + <use x="-8.66" href="#ast-line"/> + <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/> + <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/> + </pattern> + + <image id="counter-prone" href="counter_prone.jpg" width="10"/> + <image id="counter-grenade" href="counter_grenade.jpg" width="10"/> + </defs> + + <rect id="background"/> + + <g class="gameboard"> + <rect id="dots" fill="url(#asterisk)"/> + + <g id="firing-arcs"> + <g id="shapes"/> + <g id="lines"/> + </g> + + <g class="grid"/> + </g> +</svg> diff --git a/public/index.html b/public/index.html index 0307115..df3fc65 100644 --- a/public/index.html +++ b/public/index.html @@ -145,7 +145,7 @@ Loading... </div> - <object type="image/svg+xml"></object> + <object type="image/svg+xml" data="assets/images/scenario_template.svg"></object> <div id="status"> <span id="hex-counter">Distance: <span id="hex-count">-</span></span> diff --git a/src/index.js b/src/index.js index 992366a..e638910 100644 --- a/src/index.js +++ b/src/index.js @@ -40,16 +40,134 @@ const mapPlaceholder = document.querySelector('.map-placeholder'), let mapResourceEl = document.querySelector('object'); +async function requestScenario(url) { + return new Promise((res, rej) => { + const request = new XMLHttpRequest(); + request.open('GET', url, true); + request.responseType = 'document'; + + request.onload = function() { + if (request.status === 200) { + res(request.response); + } else { + rej(Error('Image didn\'t load successfully; error code:' + request.statusText)); + } + }; + request.onerror = function() { + rej(Error('There was a network error.')); + }; + + request.send(); + }); +} + +const scenarioRequest = requestScenario(map); + function loadScenario(data) { - const current = document.querySelector('object'); - const next = document.createElement('object'); - next.setAttribute('type', 'image/svg+xml'); - next.style.opacity = 0; - next.addEventListener('load', load); - mapPlaceholder.style.opacity = 1; - next.data = data; - mapPlaceholder.after(next); - current.remove(); + // const current = document.querySelector('object'); + // const next = document.createElement('object'); + // next.setAttribute('type', 'image/svg+xml'); + // next.style.opacity = 0; + // next.addEventListener('load', load); + // mapPlaceholder.style.opacity = 1; + // next.data = data; + // mapPlaceholder.after(next); + // current.remove(); + + buildScenario(requestScenario(data)); +} + +async function buildScenario(req) { + console.log('req', req); + + const svg = scenarioTemplate.querySelector('svg').cloneNode(true); + document.querySelector('object').contentDocument.querySelector('svg').replaceWith(svg); + + const startLocs = svg.querySelector('.start-locations'); + const scenario = await req; + + console.log(scenario); + + const gb = svg.querySelector('.gameboard'); + const grid = svg.querySelector('.grid'); + + const externalResourceEls = Array.from(scenario.querySelectorAll('use[href*=".svg"')); + + const refs = externalResourceEls.reduce((acc, el) => { + const href = el.getAttributeNS(null, 'href'); + const [filename] = href.match(/.+\.svg/); + const fragmentIdentifier = href.split('.svg').pop(); + + (acc[filename] ??= new Set()).add(fragmentIdentifier); + el.setAttributeNS(null, 'href', fragmentIdentifier); + + return acc; + }, {}); + + await Promise.all( + Object.keys(refs).map(filename => requestScenario(`assets/images/${filename}`)) + ).then(result => { + const defs = svg.querySelector('defs'); + + Object.keys(refs).forEach((filename, index) => { + const external = result[index]; + + refs[filename].forEach(fragmentIdentifier => { + external + .querySelectorAll(`${fragmentIdentifier} use`) + .forEach(el => refs[filename].add(el.getAttributeNS(null, 'href'))); + }); + + const refsQuery = [...refs[filename]].join(', '); + external.querySelectorAll(refsQuery).forEach(node => defs.append(node)); + }); + }); + + scenario.querySelectorAll('use.mapsheet').forEach(el => gb.prepend(el)); + grid.before(scenario.querySelector('.start-locations')); + + const scenarioGrid = scenario.querySelector('.grid'); + + console.log('scenarioGrid', scenarioGrid); + + if (scenarioGrid) { + grid.replaceWith(svg.ownerDocument.importNode(scenarioGrid, true)); + } + + async function loadScript() { + return new Promise((resolve, reject) => { + const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script'); + // const scriptEl = svg.ownerDocument.importNode(scenario.querySelector('script')); + + scriptEl.onload = () => { + console.log('map.js loaded'); + resolve(); + }; + + scriptEl.onerror = () => { + reject(Error('Script failed to load.')); + }; + + const oldScript = scenario.querySelector('script'); + + if ('cols' in oldScript.dataset && 'rows' in oldScript.dataset) { + scriptEl.dataset.rows = oldScript.dataset.rows; + scriptEl.dataset.cols = oldScript.dataset.cols; + } + + scriptEl.setAttributeNS(null, 'href', '../../map.js'); + svg.append(scriptEl); + }); + } + + await loadScript(); + + // this.style.opacity = 1; + // mapPlaceholder.style.opacity = 0; + + panzoom.start(svg); + gameboard.start(svg); + recordSheet.start(startLocs, gameboard.getUnits()); } function updateTurnCounter() { @@ -91,23 +209,82 @@ function roll(die) { return numsAsWords[getRandomIntInclusive(0, numsAsWords.length - 1)]; } -function load() { +let scenarioTemplate; + +async function load() { const svg = this.contentDocument.querySelector('svg'), startLocs = svg.querySelector('.start-locations') // , scriptEl = this.contentDocument.querySelector('script') ; + scenarioTemplate = this.contentDocument.cloneNode(svg); + buildScenario(scenarioRequest); + // const scenario = await scenarioRequest; + // const gb = svg.querySelector('.gameboard'); + // const grid = svg.querySelector('.grid'); + + // const externalResourceEls = Array.from(scenario.querySelectorAll('use[href*=".svg"')); + + // const refs = externalResourceEls.reduce((acc, el) => { + // const href = el.getAttributeNS(null, 'href'); + // const [filename] = href.match(/.+\.svg/); + // const fragmentIdentifier = href.split('.svg').pop(); + + // (acc[filename] ??= new Set()).add(fragmentIdentifier); + // el.setAttributeNS(null, 'href', fragmentIdentifier); + + // return acc; + // }, {}); + + // await Promise.all( + // Object.keys(refs).map(filename => requestScenario(`assets/images/${filename}`)) + // ).then(result => { + // const defs = svg.querySelector('defs'); - // const useEls = svg.querySelectorAll('use[href*=".svg"]'); + // Object.keys(refs).forEach((filename, index) => { + // const external = result[index]; - // console.log(useEls); + // refs[filename].forEach(fragmentIdentifier => { + // external + // .querySelectorAll(`${fragmentIdentifier} use`) + // .forEach(el => refs[filename].add(el.getAttributeNS(null, 'href'))); + // }); - // [...new Set([...useEls].map(el => el.getAttributeNS(null, 'href').match(/^(.*?)\.svg/g).at(0)))].forEach(f => { - // const name = `../assets/images/${f}`; - // import(name); - // console.log(f); + // const refsQuery = [...refs[filename]].join(', '); + // external.querySelectorAll(refsQuery).forEach(node => defs.append(node)); + // }); // }); + // scenario.querySelectorAll('use.mapsheet').forEach(el => gb.prepend(el)); + // grid.before(scenario.querySelector('.start-locations')); + + // async function loadScript() { + // return new Promise((resolve, reject) => { + // const scriptEl = document.createElementNS("http://www.w3.org/2000/svg", 'script'); + // // const scriptEl = svg.ownerDocument.importNode(scenario.querySelector('script')); + + // scriptEl.onload = () => { + // console.log('map.js loaded'); + // resolve(); + // }; + + // scriptEl.onerror = () => { + // reject(Error('Script failed to load.')); + // }; + + // scriptEl.dataset.rows = scenario.querySelector('script').dataset.rows; + // scriptEl.dataset.cols = scenario.querySelector('script').dataset.cols; + // scriptEl.setAttributeNS(null, 'href', '../../map.js'); + // svg.append(scriptEl); + // }); + // } + + // await loadScript(); + + this.style.opacity = 1; + mapPlaceholder.style.opacity = 0; + // URL.revokeObjectURL(this.data); + // const linkEl = document.createElement('link'); // linkEl.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); // linkEl.setAttribute('rel', 'stylesheet'); @@ -116,25 +293,13 @@ function load() { // linkEl.onload = function (e) { // console.log('map.css loaded'); - - // if (scriptEl) { - // scriptEl.onload = function () { - // console.log('map.js loaded'); - - // }; - // scriptEl.setAttribute('href', '../../map.js'); - // } // }; // svg.prepend(linkEl); - this.style.opacity = 1; - mapPlaceholder.style.opacity = 0; - URL.revokeObjectURL(this.data); - - panzoom.start(svg); - gameboard.start(svg); - recordSheet.start(startLocs, gameboard.getUnits()); + // panzoom.start(svg); + // gameboard.start(svg); + // recordSheet.start(startLocs, gameboard.getUnits()); } document.querySelectorAll('.end-turn').forEach(el => @@ -199,7 +364,19 @@ document.querySelector('#upload-save').addEventListener('click', () => { document.querySelector('input[type="file"]').addEventListener('change', e => { const [file] = fileInputEl.files; - loadScenario(URL.createObjectURL(file)) + + + let reader = new FileReader(); + reader.onload = function () { + const parser = new DOMParser(); + const doc = parser.parseFromString(reader.result, "image/svg+xml"); + + buildScenario(doc); + }; + + reader.readAsText(file); + + // loadScenario(URL.createObjectURL(file)); }); document.querySelector('#roll-dice').addEventListener('click', () => { @@ -221,8 +398,9 @@ mapSelectDialog .changeMapOnConfirm(loadScenario); mapResourceEl.addEventListener('load', load); -mapResourceEl.data = map; -mapResourceEl = null; +// mapResourceEl.data = map; +// mapResourceEl = null; + dice.forEach(el => { el.classList.add(roll(d6)); diff --git a/test/integration/fixtures/scenario-test.svg b/test/integration/fixtures/scenario-test.svg index 9c31cd7..77afd6b 100644 --- a/test/integration/fixtures/scenario-test.svg +++ b/test/integration/fixtures/scenario-test.svg @@ -1,124 +1,6 @@ -<?xml version="1.0" standalone="no"?> -<svg viewBox="-150 -150 600 800" xmlns="http://www.w3.org/2000/svg"> - <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="../css/map.css" type="text/css" /> - <style> - g[data-edge="north"] { --i: -2; } - g[data-edge="south"] { --i: 52; } - - #background { - stroke: #304b75; - fill: #bacae3; - } - - pattern use { - stroke: black; - stroke-width: 0.3px; - } - - .cw-60-deg { - transform: rotate(60deg); - } - - .ccw-60-deg { - transform: rotate(-60deg); - } - </style> - <defs> - <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/> - - <line id="ast-line" x1="-1.2" y1="0" x2="1.2" y2="0"/> - - <pattern id="asterisk" viewBox="-8.66 -15 17.32 30" width="17.32" height="30" patternUnits="userSpaceOnUse"> - <use y="-15" href="#ast-line"/> - <use y="-15" style="transform-origin: 0 -15px;" class="cw-60-deg" href="#ast-line"/> - <use y="-15" style="transform-origin: 0 -15px;" class="ccw-60-deg" href="#ast-line"/> - <use y="15" href="#ast-line"/> - <use y="15" style="transform-origin: 0 15px;" class="cw-60-deg" href="#ast-line"/> - <use y="15" style="transform-origin: 0 15px;" class="ccw-60-deg" href="#ast-line"/> - - <use x="8.66" href="#ast-line"/> - <use x="8.66" style="transform-origin: 8.66px 0;" class="cw-60-deg" href="#ast-line"/> - <use x="8.66" style="transform-origin: 8.66px 0;" class="ccw-60-deg" href="#ast-line"/> - <use x="-8.66" href="#ast-line"/> - <use x="-8.66" style="transform-origin: -8.66px 0;" class="cw-60-deg" href="#ast-line"/> - <use x="-8.66" style="transform-origin: -8.66px 0;" class="ccw-60-deg" href="#ast-line"/> - </pattern> - - <circle id="counter-base" style="r: inherit;" cx="0" cy="0" r="5"/> - - <g style="r: inherit;" id="number-1"> - <use style="r: inherit;" href="#counter-base"/> - <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">1</text> - </g> - <g style="r: inherit;" id="number-2"> - <use style="r: inherit;" href="#counter-base"/> - <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">2</text> - </g> - <g style="r: inherit;" id="number-3"> - <use style="r: inherit;" href="#counter-base"/> - <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">3</text> - </g> - <g style="r: inherit;" id="number-4"> - <use style="r: inherit;" href="#counter-base"/> - <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">4</text> - </g> - <g style="r: inherit;" id="number-5"> - <use style="r: inherit;" href="#counter-base"/> - <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">5</text> - </g> - <g style="r: inherit;" id="number-6"> - <use style="r: inherit;" href="#counter-base"/> - <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">6</text> - </g> - <g style="r: inherit;" id="number-7"> - <use style="r: inherit;" href="#counter-base"/> - <text style="fill: var(--text-fill); transform: translateY(var(--translateY))">7</text> - </g> - - <g id="semi-auto"> - <line x1="-2" y1="1" x2="2" y2="1"/> - <line x1="-2" y1="2" x2="2" y2="2"/> - </g> - - <g id="auto"> - <line x1="-2" y1="0" x2="2" y2="0"/> - <line x1="-2" y1="1" x2="2" y2="1"/> - <line x1="-2" y1="2" x2="2" y2="2"/> - </g> - - <g id="rifle" style="r: inherit;" class="weapon-symbol"> - <use style="r: inherit;" href="#counter-base"/> - <use href="#semi-auto"/> - <line x1="0" y1="-5" x2="0" y2="5"/> - <polyline style="fill: none;" points="-2,-3.5 0,-5 2,-3.5"/> - </g> - - <g id="smg" style="r: inherit;" class="weapon-symbol"> - <use style="r: inherit;" href="#counter-base"/> - <use href="#auto"/> - <line x1="0" y1="-5" x2="0" y2="4.5"/> - <line x1="-2" y1="4.5" x2="2" y2="4.5"/> - </g> - - <g id="blazer" style="r: inherit;" class="weapon-symbol"> - <use style="r: inherit;" href="#counter-base"/> - <use href="#auto"/> - <polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/> - <polyline points="-2,-3.5 0,-5 2,-3.5"/> - </g> - - <image id="counter-prone" href="counter_prone.jpg" width="10"/> - <image id="counter-grenade" href="counter_grenade.jpg" width="10"/> - </defs> - <rect id="background"/> - +<?xml version="1.0" standalone="yes"?> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 200 300"> <g class="gameboard"> - <rect id="dots" fill="url(#asterisk)"/> - - <g id="firing-arcs"> - <g id="shapes"/> - <g id="lines"/> - </g> <g class="grid"> <g data-y="0"> <g data-x="0"><use href="#hex"/></g> @@ -129,9 +11,9 @@ <g data-x="0"><use href="#hex"/></g> <g data-x="1"><use href="#hex"/> <g class="counter" data-allegiance="attacker" data-number="1"> - <use class="primary-weapon" href="#rifle"/> - <use class="troop-number" href="#number-1"/> - <use class="squad-number" href="#number-1"/> + <use class="primary-weapon" href="counters.svg#rifle"/> + <use class="troop-number" href="counters.svg#number-1"/> + <use class="squad-number" href="counters.svg#number-1"/> </g> </g> <g data-x="2"><use href="#hex"/></g> @@ -144,5 +26,5 @@ </g> </g> - <script href="../../map.js"></script> + <script/> </svg> |
