Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-05-02 11:02:10 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-05-02 11:04:09 -0700
commita69623b0ab6baff9f968e126c25d7e961e9dde53 (patch)
treed1f84b493cb3cbf1f2ba8df61f9ff8bd6099277f /public/assets
parent9ac571cc244ef02a32679f3fb47ffee5f7e0fd7c (diff)
Organize public directory contents into assets folders
Diffstat (limited to 'public/assets')
-rw-r--r--public/assets/css/damage_block.css18
-rw-r--r--public/assets/css/map.css369
-rw-r--r--public/assets/css/soldier_record_block.css55
-rw-r--r--public/assets/css/style.css411
-rw-r--r--public/assets/images/column.jpgbin0 -> 12461 bytes
-rw-r--r--public/assets/images/counter_grenade.jpgbin0 -> 6649 bytes
-rw-r--r--public/assets/images/counter_prone.jpgbin0 -> 5909 bytes
-rw-r--r--public/assets/images/firing_arc_large.pngbin0 -> 23506 bytes
-rw-r--r--public/assets/images/firing_arc_medium.pngbin0 -> 18803 bytes
-rw-r--r--public/assets/images/firing_arc_small.pngbin0 -> 11412 bytes
-rw-r--r--public/assets/images/icon_grenade.pngbin0 -> 3252 bytes
-rw-r--r--public/assets/images/logo-davion.pngbin0 -> 32008 bytes
-rw-r--r--public/assets/images/logo-liao.pngbin0 -> 17419 bytes
-rw-r--r--public/assets/images/map1.svg1918
-rw-r--r--public/assets/images/map2.svg97
-rw-r--r--public/assets/images/map3.svg94
-rw-r--r--public/assets/images/map4.svg49
-rw-r--r--public/assets/images/rendered_numbers.pngbin0 -> 7735 bytes
-rw-r--r--public/assets/images/row.jpgbin0 -> 25889 bytes
-rw-r--r--public/assets/images/scans/countersheet1.jpgbin0 -> 386563 bytes
-rw-r--r--public/assets/images/scans/countersheet2.jpgbin0 -> 374895 bytes
-rw-r--r--public/assets/images/scans/countersheet3.jpgbin0 -> 411155 bytes
-rw-r--r--public/assets/images/scans/countersheet4.jpgbin0 -> 377347 bytes
-rw-r--r--public/assets/images/scans/map1.jpgbin0 -> 232699 bytes
-rw-r--r--public/assets/images/scans/map2.jpgbin0 -> 277055 bytes
-rw-r--r--public/assets/images/scans/map3.jpgbin0 -> 279581 bytes
-rw-r--r--public/assets/images/scans/map4.jpgbin0 -> 187591 bytes
-rw-r--r--public/assets/images/test.svg6
28 files changed, 3017 insertions, 0 deletions
diff --git a/public/assets/css/damage_block.css b/public/assets/css/damage_block.css
new file mode 100644
index 0000000..cc7e4dc
--- /dev/null
+++ b/public/assets/css/damage_block.css
@@ -0,0 +1,18 @@
+.damage-effect-indicator.bruise {
+ background-color: orange;
+}
+
+.damage-effect-indicator.lethal {
+ background-color: red;
+}
+
+.damage-effect-indicator {
+ width: 20px;
+ height: 30px;
+ margin: 0 auto;
+ padding: 0;
+ border: 1px solid black;
+ display: block;
+ user-select: none;
+ font-family: monospace;
+}
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
new file mode 100644
index 0000000..0c2fed9
--- /dev/null
+++ b/public/assets/css/map.css
@@ -0,0 +1,369 @@
+svg {
+ overflow: hidden;
+}
+
+image {
+ image-rendering: pixelated;
+}
+
+image.map-scans {
+ image-rendering: auto;
+}
+
+text {
+ user-select: none;
+}
+
+use[href="#hex"] {
+ opacity: 0;
+ fill: transparent;
+ fill-opacity: 0.5;
+ stroke-width: 0.5px;
+ stroke: black;
+}
+
+use[href="#hex"].active {
+ opacity: 0.2;
+ fill: teal;
+ stroke: black;
+}
+
+.sight-line-target use[href="#hex"] {
+ opacity: 1;
+ stroke: orangered;
+ fill-opacity: 0.04;
+}
+
+polyline {
+ fill: none;
+}
+
+polyline.move-trace {
+ stroke: white;
+ stroke-dasharray: 2;
+}
+
+#background {
+ fill: #bacae3;
+}
+
+#map2 {
+ transform-origin: 0px 0px;
+ transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
+}
+
+#map3 {
+ transform-origin: 0px 0px;
+ transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
+}
+
+#counter-base {
+ r: inherit;
+}
+
+g.troop-counter, g.counter, g.troop-counter use {
+ r: inherit;
+}
+
+g.troop-counter-template, g.troop-counter-template use {
+ r: inherit;
+}
+
+g.weapon-symbol {
+ stroke: white;
+ stroke-width: 0.5px;
+}
+
+g.troop-counter-template text {
+ fill: white;
+ font-size: 12px;
+ font-weight: bold;
+ font-family: monospace;
+ cursor: default;
+ text-anchor: middle;
+ pointer-events: none;
+ user-select: none;
+ transform: translateY(4px);
+ stroke: none;
+}
+
+[href="#counter-prone"] {
+ transform: translate(-5px, 6px);
+}
+
+[href="#counter-grenade"] {
+ transform: translate(-5px, -5px);
+}
+
+g.clone {
+ stroke: white;
+ stroke-width: 0.5px;
+ stroke-dasharray: 1;
+}
+
+g.clone [href="#counter-prone"] {
+ opacity: 0.5;
+}
+
+.removed[href="#counter-prone"] {
+ opacity: 0.5;
+}
+
+g[data-allegiance="defender"].clone {
+ fill: rgb(255, 126, 126);
+}
+
+g[data-allegiance="attacker"].clone {
+ fill: rgb(130, 190, 130);
+}
+
+text.counter, #troop-counter text {
+ font-size: 12px;
+ font-weight: bold;
+ fill: white;
+ font-family: sans-serif;
+ cursor: default;
+ text-anchor: middle;
+ transform: translateY(4px);
+ pointer-events: none;
+ user-select: none;
+}
+
+polygon.firing-arc[data-allegiance="defender"] {
+ fill: red;
+}
+
+polygon.firing-arc[data-allegiance="attacker"] {
+ fill: green;
+}
+
+#shapes {
+ opacity: 0.1;
+}
+
+#shapes polygon {
+ stroke: none;
+}
+
+#lines polyline, #lines line {
+ fill: none;
+ stroke: black;
+ stroke-width: 0.5;
+}
+
+#lines line {
+ stroke-opacity: 0.2;
+}
+
+#lines line {
+ pointer-events: none;
+}
+
+.sight-line {
+ stroke: orangered;
+ stroke-width: 0.5px;
+ pointer-events: none;
+}
+
+#hex {
+ fill: inherit;
+ fill-opacity: inherit;
+ stroke: inherit;
+ stroke-width: inherit;
+ stroke-opacity: inherit;
+}
+
+g.counter use, use[href*="#t-"] {
+ r: 5px;
+}
+
+g.selected use {
+ animation: 1s selected 0.25s linear infinite;
+ stroke-width: 2px;
+ stroke: yellow;
+ r: 6px;
+}
+
+@keyframes selected {
+ 50% {
+ /* stroke: yellow; */
+ stroke-width: 0px;
+ r: 5px;
+ }
+}
+
+.counter[data-allegiance="attacker"] {
+ fill: green;
+}
+
+.counter[data-allegiance="defender"] {
+ fill: red;
+}
+
+.gameboard {
+ transform: translate(19px, 31px) scale(4);
+}
+
+/* Inradius and circumradius values come from the hexagon */
+.grid, g.start-locations {
+ --inradius: 8.66px;
+ --circumradius: 10px;
+ --x-step: calc(var(--inradius) * 2);
+ --y-step: calc((3 / 2) * var(--circumradius));
+}
+
+g[data-y], g.start-locations > g {
+ --translateX: 0;
+ transform: translate(var(--translateX), calc(var(--y-step) * var(--i)));
+}
+
+g[data-y]:nth-child(odd) {
+ --translateX: calc(var(--inradius));
+}
+
+[data-x] use[href="#hex"] {
+ --scale: 1;
+ transform: scale(var(--scale));
+}
+
+[data-x]:hover use[href="#hex"] {
+ /* --scale: 0.95; */
+ opacity: 1;
+ fill: orange;
+ stroke: black;
+}
+
+[data-x]:hover use[href*="#t-"] {
+ transform: scale(1.5);
+}
+
+[data-x] {
+ --scale: 1;
+ transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
+}
+
+g[data-y="0"] { --i: 0; }
+g[data-y="1"] { --i: 1; }
+g[data-y="2"] { --i: 2; }
+g[data-y="3"] { --i: 3; }
+g[data-y="4"] { --i: 4; }
+g[data-y="5"] { --i: 5; }
+g[data-y="6"] { --i: 6; }
+g[data-y="7"] { --i: 7; }
+g[data-y="8"] { --i: 8; }
+g[data-y="9"] { --i: 9; }
+g[data-y="10"] { --i: 10; }
+g[data-y="11"] { --i: 11; }
+g[data-y="12"] { --i: 12; }
+g[data-y="13"] { --i: 13; }
+g[data-y="14"] { --i: 14; }
+g[data-y="15"] { --i: 15; }
+g[data-y="16"] { --i: 16; }
+g[data-y="17"] { --i: 17; }
+g[data-y="18"] { --i: 18; }
+g[data-y="19"] { --i: 19; }
+g[data-y="20"] { --i: 20; }
+g[data-y="21"] { --i: 21; }
+g[data-y="22"] { --i: 22; }
+g[data-y="23"] { --i: 23; }
+g[data-y="24"] { --i: 24; }
+g[data-y="25"] { --i: 25; }
+g[data-y="26"] { --i: 26; }
+g[data-y="27"] { --i: 27; }
+g[data-y="28"] { --i: 28; }
+g[data-y="29"] { --i: 29; }
+g[data-y="30"] { --i: 30; }
+g[data-y="31"] { --i: 31; }
+g[data-y="32"] { --i: 32; }
+g[data-y="33"] { --i: 33; }
+g[data-y="34"] { --i: 34; }
+g[data-y="35"] { --i: 35; }
+g[data-y="36"] { --i: 36; }
+g[data-y="37"] { --i: 37; }
+g[data-y="38"] { --i: 38; }
+g[data-y="39"] { --i: 39; }
+g[data-y="40"] { --i: 40; }
+g[data-y="41"] { --i: 41; }
+g[data-y="42"] { --i: 42; }
+g[data-y="43"] { --i: 43; }
+g[data-y="44"] { --i: 44; }
+g[data-y="45"] { --i: 45; }
+g[data-y="46"] { --i: 46; }
+g[data-y="47"] { --i: 47; }
+g[data-y="48"] { --i: 48; }
+g[data-y="49"] { --i: 49; }
+g[data-y="50"] { --i: 50; }
+g[data-y="51"] { --i: 51; }
+g[data-y="52"] { --i: 52; }
+g[data-y="53"] { --i: 53; }
+g[data-y="54"] { --i: 54; }
+g[data-y="55"] { --i: 55; }
+g[data-y="56"] { --i: 56; }
+g[data-y="57"] { --i: 57; }
+g[data-y="58"] { --i: 58; }
+g[data-y="59"] { --i: 59; }
+g[data-y="60"] { --i: 60; }
+g[data-y="61"] { --i: 61; }
+g[data-y="62"] { --i: 62; }
+g[data-y="63"] { --i: 63; }
+g[data-y="64"] { --i: 64; }
+g[data-y="65"] { --i: 65; }
+g[data-y="66"] { --i: 66; }
+g[data-y="67"] { --i: 67; }
+g[data-y="68"] { --i: 68; }
+g[data-y="69"] { --i: 69; }
+g[data-y="70"] { --i: 70; }
+g[data-y="71"] { --i: 71; }
+g[data-y="72"] { --i: 72; }
+g[data-y="73"] { --i: 73; }
+g[data-y="74"] { --i: 74; }
+g[data-y="75"] { --i: 75; }
+g[data-y="76"] { --i: 76; }
+
+[data-x="0"] { --i: 0; }
+[data-x="1"] { --i: 1; }
+[data-x="2"] { --i: 2; }
+[data-x="3"] { --i: 3; }
+[data-x="4"] { --i: 4; }
+[data-x="5"] { --i: 5; }
+[data-x="6"] { --i: 6; }
+[data-x="7"] { --i: 7; }
+[data-x="8"] { --i: 8; }
+[data-x="9"] { --i: 9; }
+[data-x="10"] { --i: 10; }
+[data-x="11"] { --i: 11; }
+[data-x="12"] { --i: 12; }
+[data-x="13"] { --i: 13; }
+[data-x="14"] { --i: 14; }
+[data-x="15"] { --i: 15; }
+[data-x="16"] { --i: 16; }
+[data-x="17"] { --i: 17; }
+[data-x="18"] { --i: 18; }
+[data-x="19"] { --i: 19; }
+[data-x="20"] { --i: 20; }
+[data-x="21"] { --i: 21; }
+[data-x="22"] { --i: 22; }
+[data-x="23"] { --i: 23; }
+[data-x="24"] { --i: 24; }
+[data-x="25"] { --i: 25; }
+[data-x="26"] { --i: 26; }
+[data-x="27"] { --i: 27; }
+[data-x="28"] { --i: 28; }
+[data-x="29"] { --i: 29; }
+[data-x="30"] { --i: 30; }
+[data-x="31"] { --i: 31; }
+[data-x="32"] { --i: 32; }
+
+.buildings {
+ display: none;
+}
+
+#test-arcs line, #test-arcs polyline {
+ stroke: black;
+ fill: none;
+}
+
+#test-arcs rect, #test-arcs polygon {
+ fill: black;
+ fill-opacity: 0.2;
+}
diff --git a/public/assets/css/soldier_record_block.css b/public/assets/css/soldier_record_block.css
new file mode 100644
index 0000000..fb1d322
--- /dev/null
+++ b/public/assets/css/soldier_record_block.css
@@ -0,0 +1,55 @@
+span {
+ font-size: smaller;
+ font-family: monospace;
+ margin-right: 1em;
+}
+
+.physical-status-track {
+ text-align: center;
+}
+
+.physical-status-track span {
+ margin: 0;
+ padding: 0;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.physical-status-track span[slot="block-number"] {
+ font-family: serif;
+ font-size: unset;
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+}
+
+ul li {
+ display: inline;
+ margin-left: 1em;
+}
+
+p {
+ margin: 0;
+}
+
+.grenades input {
+ display: none;
+}
+
+.grenades svg {
+ width: 14px;
+ height: 14px;
+ vertical-align: bottom;
+}
+
+.grenades svg circle {
+ fill: none;
+ stroke: black;
+ stroke-width: 2px;
+}
+
+.grenades input:checked + svg circle {
+ fill: gray;
+}
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
new file mode 100644
index 0000000..a973630
--- /dev/null
+++ b/public/assets/css/style.css
@@ -0,0 +1,411 @@
+body {
+ margin: 0;
+ display: flex;
+ overflow: hidden;
+}
+
+#map-container {
+ flex-basis: 100%;
+ position: relative;
+ height: 100vh;
+}
+
+svg, object {
+ background-color: darkgray;
+ width: 100%;
+ height: 100%;
+}
+
+object {
+ opacity: 0;
+ transition: opacity 0.25s;
+}
+
+svg image {
+ image-rendering: pixelated;
+}
+
+svg image.map-scans {
+ image-rendering: auto;
+}
+
+svg text {
+ user-select: none;
+}
+
+div#status {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ margin: 3px;
+ display: none;
+ user-select: none;
+}
+
+#hex-counter {
+ padding: 2px;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-radius: 2px;
+}
+
+#hex-count {
+ font-family: monospace;
+}
+
+div#content {
+ display: flex;
+ border-left: 1px solid gray;
+ flex-basis: 0;
+ /* overflow: scroll; */
+ max-height: 100vh;
+ flex-direction: column;
+ /* padding: 2px; */
+ position: relative;
+}
+
+#content > div:first-of-type {
+ padding: 2px;
+ border-bottom: 1px solid gray;
+}
+
+#content #buttons {
+ line-height: 1.5em;
+}
+
+#content input[type="checkbox"].visible {
+ position: absolute;
+ right: 0;
+}
+
+#record-sheet {
+ /* max-height: 100%; */
+ overflow-y: auto;
+ display: flex;
+ flex-direction: column;
+ /* display: none; */
+ background-color: gray;
+}
+
+#record-sheet .name {
+ text-transform: capitalize;
+}
+
+#record-sheet > div {
+ /* padding: 0 2px; */
+ overflow-y: auto;
+ /* border: 1px solid black; */
+}
+
+#record-sheet > div > p {
+ margin: 0;
+ margin-top: 0px;
+ margin-bottom: 1px;
+ padding: 6px 2px;
+ background-color: lightgray;
+}
+
+#record-sheet > div > div {
+ /* border: 1px solid black; */
+ margin-bottom: 1px;
+ padding: 6px 4px;
+ /* border-radius: 4px; */
+}
+
+#record-sheet > div:last-of-type {
+ margin-top: 2px;
+}
+
+#record-sheet > div > div:last-of-type {
+ margin-bottom: 0;
+}
+
+svg > defs > #point {
+ fill: inherit;
+ fill-opacity: inherit;
+ stroke: inherit;
+ stroke-width: inherit;
+ stroke-opacity: inherit;
+}
+
+use[href="#point"] {
+ opacity: 0;
+ fill: teal;
+ fill-opacity: 0.2;
+ stroke: black;
+ stroke-width: 0.5px;
+}
+
+use[href="#point"]:hover, use[href="#point"].hover {
+ opacity: 1;
+ fill: orange;
+}
+
+use[href="#point"].active {
+ opacity: 0.2;
+}
+
+polyline.move-trace {
+ stroke: gray;
+ stroke-dasharray: 2;
+ fill: none;
+}
+
+g#grid {
+ transform: translate(19px, 31px) scale(4);
+}
+
+#background {
+ fill: #bacae3;
+}
+
+#map2 {
+ transform-origin: 0px 0px;
+ transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
+}
+
+#map3 {
+ transform-origin: 0px 0px;
+ /* transform: translateY(1518px); */
+ transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
+}
+
+#panel {
+ display: none;
+ position: absolute;
+ right: 0;
+ background-color: white;
+ border: 1px solid black;
+ padding: 2px;
+}
+
+#panel fieldset label {
+ display: block;
+ text-align: right;
+}
+
+#toggle-firing-arc-vis {
+ position: absolute;
+ right: 0;
+ padding-top: 20px;
+}
+
+#toggle-firing-arc-vis div {
+ margin-top: 10px;
+ writing-mode: vertical-lr;
+ transform: rotate(180deg);
+}
+
+#counter-base {
+ r: inherit;
+}
+
+g.troop-counter-template, g.troop-counter-template use {
+ r: inherit;
+}
+
+g.troop-counter, g.troop-counter use {
+ r: inherit;
+}
+
+g.troop-counter-template text {
+ fill: white;
+ font-size: 12px;
+ font-weight: bold;
+ font-family: monospace;
+ cursor: default;
+ text-anchor: middle;
+ pointer-events: none;
+ user-select: none;
+ transform: translateY(4px);
+ stroke: none;
+}
+
+g.troop-counter [href="#counter-prone"] {
+ transform: translate(-5px, 6px);
+}
+
+g#points g use.counter {
+ r: 5px;
+}
+
+g#points g.hover use[href="#point"] {
+ opacity: 1;
+ fill: orange;
+}
+
+g#points g.hover use.counter {
+ r: 7px;
+}
+
+g#points use.clone {
+ stroke: white;
+ stroke-width: 0.5px;
+ stroke-dasharray: 1;
+}
+
+g#points use[data-allegiance="defender"].clone {
+ fill: rgb(255, 126, 126);
+}
+
+g#points use[data-allegiance="attacker"].clone {
+ fill: rgb(130, 190, 130);
+}
+
+text.counter, #troop-counter text {
+ font-size: 12px;
+ font-weight: bold;
+ /* stroke: black; */
+ fill: white;
+ /* stroke-width: 0.5px; */
+ font-family: sans-serif;
+ cursor: default;
+ text-anchor: middle;
+ /* transform: translateY(25%); */
+ transform: translateY(4px);
+ pointer-events: none;
+ user-select: none;
+}
+
+polygon.firing-arc[data-allegiance="defender"] {
+ fill: red;
+}
+
+polygon.firing-arc[data-allegiance="attacker"] {
+ fill: green;
+}
+
+#shapes {
+ opacity: 0.1;
+}
+
+#shapes polygon {
+ stroke: none;
+}
+
+#lines polygon {
+ fill: none;
+ stroke: black;
+}
+
+button.set-firing-arc img {
+ vertical-align: middle;
+ pointer-events: none;
+}
+
+.sight-line {
+ stroke: orangered;
+ stroke-width: 0.5px;
+ pointer-events: none;
+}
+
+.soldier-record {
+ display: inline-block;
+ position: relative;
+ white-space: nowrap;
+ background-color: white;
+}
+
+.soldier-record[data-allegiance="attacker"] [slot="troop-number"] svg {
+ fill: green;
+}
+
+.soldier-record[data-allegiance="defender"] [slot="troop-number"] svg {
+ fill: red;
+}
+
+.soldier-record [slot="troop-number"] svg {
+ width: 20px;
+ height: 20px;
+ background-color: initial;
+ vertical-align: middle;
+}
+
+.soldier-record [slot="troop-number"] svg text {
+ fill: white;
+ text-anchor: middle;
+ font-size: 10px;
+ font-weight: bold;
+ transform: translateY(3.5px);
+ font-family: monospace;
+}
+
+.soldier-record[data-allegiance="defender"] [slot="troop-number"] img {
+ fill: red;
+}
+
+.soldier-record[data-allegiance="attacker"] [slot="troop-number"] img {
+ fill: green;
+}
+
+.soldier-record.selected {
+ background-color: khaki;
+}
+
+.soldier-record.movement-ended {
+ background-color: none;
+ opacity: 0.5;
+}
+
+.wall {
+ fill: none;
+ stroke: red;
+ stroke-width: 7px;
+ opacity: 0.7;
+}
+
+#asterisk {
+ font-size: 30;
+}
+
+img.logo {
+ width: 100px;
+ margin: 0 auto;
+ display: block;
+}
+
+#turn-count[data-update="0"] span.inning-bottom {
+ display: none;
+}
+
+#turn-count[data-update="1"] span.inning-top {
+ display: none;
+}
+
+#map-dialog {
+ border: 1px solid black;
+}
+
+.map-placeholder {
+ position: absolute;
+}
+
+@media (width >= 1800px) {
+ #record-sheet {
+ flex-direction: row;
+ /* gap: 2px; */
+ }
+
+ #record-sheet > div > p {
+ margin-top: 0;
+ }
+
+ #record-sheet > div {
+ /* max-height: unset; */
+ overflow-y: unset;
+ height: min-content;
+ }
+
+ #record-sheet div:last-of-type {
+ margin-top: 0;
+ }
+
+ #record-sheet > div:first-of-type > div {
+ /* margin-left: 1px; */
+ margin-right: 1px;
+ }
+
+ #record-sheet > div:last-of-type > div {
+ margin-left: 1px;
+ /* margin-right: 1px; */
+ }
+}
diff --git a/public/assets/images/column.jpg b/public/assets/images/column.jpg
new file mode 100644
index 0000000..df86414
--- /dev/null
+++ b/public/assets/images/column.jpg
Binary files differ
diff --git a/public/assets/images/counter_grenade.jpg b/public/assets/images/counter_grenade.jpg
new file mode 100644
index 0000000..45d25f0
--- /dev/null
+++ b/public/assets/images/counter_grenade.jpg
Binary files differ
diff --git a/public/assets/images/counter_prone.jpg b/public/assets/images/counter_prone.jpg
new file mode 100644
index 0000000..a8e9b46
--- /dev/null
+++ b/public/assets/images/counter_prone.jpg
Binary files differ
diff --git a/public/assets/images/firing_arc_large.png b/public/assets/images/firing_arc_large.png
new file mode 100644
index 0000000..c787537
--- /dev/null
+++ b/public/assets/images/firing_arc_large.png
Binary files differ
diff --git a/public/assets/images/firing_arc_medium.png b/public/assets/images/firing_arc_medium.png
new file mode 100644
index 0000000..6cc69ce
--- /dev/null
+++ b/public/assets/images/firing_arc_medium.png
Binary files differ
diff --git a/public/assets/images/firing_arc_small.png b/public/assets/images/firing_arc_small.png
new file mode 100644
index 0000000..80afcb0
--- /dev/null
+++ b/public/assets/images/firing_arc_small.png
Binary files differ
diff --git a/public/assets/images/icon_grenade.png b/public/assets/images/icon_grenade.png
new file mode 100644
index 0000000..7642556
--- /dev/null
+++ b/public/assets/images/icon_grenade.png
Binary files differ
diff --git a/public/assets/images/logo-davion.png b/public/assets/images/logo-davion.png
new file mode 100644
index 0000000..c4f8b5f
--- /dev/null
+++ b/public/assets/images/logo-davion.png
Binary files differ
diff --git a/public/assets/images/logo-liao.png b/public/assets/images/logo-liao.png
new file mode 100644
index 0000000..e441313
--- /dev/null
+++ b/public/assets/images/logo-liao.png
Binary files differ
diff --git a/public/assets/images/map1.svg b/public/assets/images/map1.svg
new file mode 100644
index 0000000..fe64a5e
--- /dev/null
+++ b/public/assets/images/map1.svg
@@ -0,0 +1,1918 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="-18 -150 2320 3360" 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; }
+ </style>
+ <defs>
+ <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+
+ <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+ <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+ <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+ <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+ <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+ <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+ <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+ <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>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" class="weapon-symbol">
+ <use href="#semi-auto"/>
+ <line x1="0" y1="-5" x2="0" y2="5"/>
+ <polyline points="-2,-3.5 0,-5 2,-3.5"/>
+ </g>
+
+ <g id="smg" class="weapon-symbol">
+ <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" class="weapon-symbol">
+ <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"/>
+ <image id="numbers" href="rendered_numbers.png" width="182" height="22"/>
+
+ <symbol id="n1" viewBox="1 0 17 22" width="17" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n2" viewBox="19 0 16 22" width="16" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n3" viewBox="36 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n4" viewBox="54 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n5" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n6" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n7" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n8" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n9" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+ <symbol id="n0" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers"/></symbol>
+ </defs>
+
+ <rect id="background" x="-18" y="-10" width="2320" height="3106"/>
+
+ <g id="image-maps">
+ <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
+ <image class="map-scans" href="row.jpg" width="2284" height="55" y="1505" />
+ <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518"/>
+ </g>
+
+ <g class="gameboard">
+ <g id="firing-arcs">
+ <g id="shapes"/>
+ <g id="lines"/>
+ </g>
+ <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
+ <g data-edge="north">
+ <g data-x="13">
+ <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="attacker" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="attacker" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="attacker" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="attacker" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="attacker" data-number="7"><use href="#t-7"/></g>
+ </g>
+ </g>
+ <g data-edge="south">
+ <g data-x="13">
+ <g class="counter" data-allegiance="defender" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="defender" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="defender" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="defender" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="defender" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="defender" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="defender" data-number="7"><use href="#t-7"/></g>
+ </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>
+</svg>
diff --git a/public/assets/images/map2.svg b/public/assets/images/map2.svg
new file mode 100644
index 0000000..542d8f0
--- /dev/null
+++ b/public/assets/images/map2.svg
@@ -0,0 +1,97 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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>
+ #image-maps image {
+ transform: none;
+ }
+
+ g[data-edge="north"] { --i: -2; }
+ g[data-edge="south"] { --i: 78; }
+ </style>
+ <defs>
+ <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+
+ <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+ <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+ <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+ <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+ <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+ <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+ <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+ <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></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"/>
+
+ <g id="image-maps">
+ <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518"/>
+ <image class="map-scans" href="row.jpg" width="2284" height="55" y="1505" />
+ <image id="map1" class="map-scans" href="scans/map1.jpg" width="2284" height="1518" y="1565"/>
+ <image class="map-scans" href="row.jpg" width="2284" height="55" y="3065" />
+ <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" y="3125"/>
+ </g>
+
+ <g class="gameboard">
+ <g id="firing-arcs">
+ <g id="shapes"/>
+ <g id="lines"/>
+ </g>
+ <g class="start-locations">
+ <g data-edge="north">
+ <g data-x="13">
+ <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="attacker" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="attacker" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="attacker" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="attacker" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="attacker" data-number="7"><use href="#t-7"/></g>
+ </g>
+ </g>
+ <g data-edge="south">
+ <g data-x="13">
+ <g class="counter" data-allegiance="defender" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="defender" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="defender" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="defender" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="defender" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="defender" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="defender" data-number="7"><use href="#t-7"/></g>
+ </g>
+ </g>
+ </g>
+ <g class="grid"/>
+ </g>
+ <script href="../../map.js" data-cols="33" data-rows="77"></script>
+</svg>
diff --git a/public/assets/images/map3.svg b/public/assets/images/map3.svg
new file mode 100644
index 0000000..9545a47
--- /dev/null
+++ b/public/assets/images/map3.svg
@@ -0,0 +1,94 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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>
+ #image-maps image {
+ transform: translate(-10px, 0px);
+ }
+
+ g[data-edge="north"] { --i: -2; }
+ g[data-edge="south"] { --i: 26; }
+ </style>
+ <defs>
+ <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+
+ <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+ <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+ <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+ <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+ <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+ <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+ <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+ <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></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"/>
+
+ <g id="image-maps">
+ <image id="map4" class="map-scans" href="scans/map4.jpg" width="2284" height="1518"/>
+ <image id="map4" class="map-scans" href="column.jpg" width="24" height="1518" x="2268"/>
+ </g>
+
+ <g class="gameboard">
+ <g id="firing-arcs">
+ <g id="shapes"/>
+ <g id="lines"/>
+ </g>
+ <g class="start-locations">
+ <g data-edge="north">
+ <g data-x="13">
+ <g class="counter" data-allegiance="attacker" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="attacker" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="attacker" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="attacker" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="attacker" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="attacker" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="attacker" data-number="7"><use href="#t-7"/></g>
+ </g>
+ </g>
+ <g data-edge="south">
+ <g data-x="13">
+ <g class="counter" data-allegiance="defender" data-number="1"><use href="#t-1"/></g>
+ </g>
+ <g data-x="14">
+ <g class="counter" data-allegiance="defender" data-number="2"><use href="#t-2"/></g>
+ </g>
+ <g data-x="15">
+ <g class="counter" data-allegiance="defender" data-number="3"><use href="#t-3"/></g>
+ </g>
+ <g data-x="16">
+ <g class="counter" data-allegiance="defender" data-number="4"><use href="#t-4"/></g>
+ </g>
+ <g data-x="17">
+ <g class="counter" data-allegiance="defender" data-number="5"><use href="#t-5"/></g>
+ </g>
+ <g data-x="18">
+ <g class="counter" data-allegiance="defender" data-number="6"><use href="#t-6"/></g>
+ </g>
+ <g data-x="19">
+ <g class="counter" data-allegiance="defender" data-number="7"><use href="#t-7"/></g>
+ </g>
+ </g>
+ </g>
+ <g class="grid"/>
+ </g>
+ <script href="../../map.js" data-cols="33" data-rows="25"></script>
+</svg>
diff --git a/public/assets/images/map4.svg b/public/assets/images/map4.svg
new file mode 100644
index 0000000..e0ce981
--- /dev/null
+++ b/public/assets/images/map4.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<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"/>
+ <defs>
+ <polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5"/>
+
+ <circle id="counter-base" cx="0" cy="0" r="5"/>
+
+ <g id="t-1" class="troop-counter-template"><use href="#counter-base"/><text>1</text></g>
+ <g id="t-2" class="troop-counter-template"><use href="#counter-base"/><text>2</text></g>
+ <g id="t-3" class="troop-counter-template"><use href="#counter-base"/><text>3</text></g>
+ <g id="t-4" class="troop-counter-template"><use href="#counter-base"/><text>4</text></g>
+ <g id="t-5" class="troop-counter-template"><use href="#counter-base"/><text>5</text></g>
+ <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
+ <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></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"/>
+
+ <foreignObject width="100%" height="100%">
+ <!--
+ In the context of SVG embedded in an HTML document, the XHTML
+ namespace could be omitted, but it is mandatory in the
+ context of an SVG document
+ -->
+
+ <div style="background-color: orange" xmlns="http://www.w3.org/1999/xhtml">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
+ mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
+ imperdiet eros. Aliquam erat volutpat.
+ <img src="test.svg" width="10" height="10"/>
+ </div>
+ </foreignObject>
+
+ <g class="gameboard">
+ <g id="firing-arcs">
+ <g id="shapes"/>
+ <g id="lines"/>
+ </g>
+ <g class="grid"/>
+ </g>
+
+ <script href="../../map.js" data-cols="33" data-rows="25"></script>
+</svg>
diff --git a/public/assets/images/rendered_numbers.png b/public/assets/images/rendered_numbers.png
new file mode 100644
index 0000000..8672434
--- /dev/null
+++ b/public/assets/images/rendered_numbers.png
Binary files differ
diff --git a/public/assets/images/row.jpg b/public/assets/images/row.jpg
new file mode 100644
index 0000000..110bb35
--- /dev/null
+++ b/public/assets/images/row.jpg
Binary files differ
diff --git a/public/assets/images/scans/countersheet1.jpg b/public/assets/images/scans/countersheet1.jpg
new file mode 100644
index 0000000..659070e
--- /dev/null
+++ b/public/assets/images/scans/countersheet1.jpg
Binary files differ
diff --git a/public/assets/images/scans/countersheet2.jpg b/public/assets/images/scans/countersheet2.jpg
new file mode 100644
index 0000000..7a4d3ad
--- /dev/null
+++ b/public/assets/images/scans/countersheet2.jpg
Binary files differ
diff --git a/public/assets/images/scans/countersheet3.jpg b/public/assets/images/scans/countersheet3.jpg
new file mode 100644
index 0000000..dfe4696
--- /dev/null
+++ b/public/assets/images/scans/countersheet3.jpg
Binary files differ
diff --git a/public/assets/images/scans/countersheet4.jpg b/public/assets/images/scans/countersheet4.jpg
new file mode 100644
index 0000000..028b216
--- /dev/null
+++ b/public/assets/images/scans/countersheet4.jpg
Binary files differ
diff --git a/public/assets/images/scans/map1.jpg b/public/assets/images/scans/map1.jpg
new file mode 100644
index 0000000..8f6bc46
--- /dev/null
+++ b/public/assets/images/scans/map1.jpg
Binary files differ
diff --git a/public/assets/images/scans/map2.jpg b/public/assets/images/scans/map2.jpg
new file mode 100644
index 0000000..82cd528
--- /dev/null
+++ b/public/assets/images/scans/map2.jpg
Binary files differ
diff --git a/public/assets/images/scans/map3.jpg b/public/assets/images/scans/map3.jpg
new file mode 100644
index 0000000..08232e4
--- /dev/null
+++ b/public/assets/images/scans/map3.jpg
Binary files differ
diff --git a/public/assets/images/scans/map4.jpg b/public/assets/images/scans/map4.jpg
new file mode 100644
index 0000000..8fa25dc
--- /dev/null
+++ b/public/assets/images/scans/map4.jpg
Binary files differ
diff --git a/public/assets/images/test.svg b/public/assets/images/test.svg
new file mode 100644
index 0000000..0e257ce
--- /dev/null
+++ b/public/assets/images/test.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+ "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
+ <circle r="5" fill="purple"/>
+</svg>