Position hexes with CSS; move map styles into separate file

public/map.css

@@ -0,0 +1,226 @@
+image {
+  image-rendering: pixelated;
+}
+
+image.map-scans {
+  image-rendering: auto;
+}
+
+text {
+  user-select: none;
+}
+
+use[href="#point"], use[href="#hex"] {
+  opacity: 1;
+  fill: teal;
+  fill-opacity: 0.2;
+  stroke-width: 0.5px;
+}
+
+use[href="#point"]:hover,
+use[href="#point"].hover,
+use[href="#hex"]:hover,
+use[href="#hex"].hover {
+  opacity: 1;
+  fill: orange;
+  stroke: orangered;
+}
+
+use[href="#point"].active, use[href="#hex"].active {
+  opacity: 0.2;
+}
+
+use[href="#point"].sight-line-target, use[href="#hex"].sight-line-target {
+  opacity: 1;
+  stroke: orangered;
+  fill-opacity: 0.04;
+}
+
+polyline.move-trace {
+  stroke: gray;
+  stroke-dasharray: 2;
+  fill: none;
+}
+
+#background {
+  fill: #bacae3;
+}
+
+g#grid {
+  transform: translate(19px, 31px) scale(4);
+}
+
+#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-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.counter[data-troop-allegiance="davion"] {
+  fill: red;
+}
+
+g#points use.counter[data-troop-allegiance="liao"] {
+  fill: green;
+}
+
+g#points use.clone {
+  stroke: white;
+  stroke-width: 0.5px;
+  stroke-dasharray: 1;
+}
+
+g#points use[data-troop-allegiance="davion"].clone {
+  fill: rgb(255, 126, 126);
+}
+
+g#points use[data-troop-allegiance="liao"].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-troop-allegiance="davion"] {
+  fill: red;
+}
+
+polygon.firing-arc[data-troop-allegiance="liao"] {
+  fill: green;
+}
+
+#shapes {
+  opacity: 0.1;
+}
+
+#shapes polygon {
+  stroke: none;
+}
+
+#lines polygon {
+  fill: none;
+  stroke: black;
+}
+
+.sight-line {
+  stroke: orangered;
+  stroke-width: 0.5px;
+  pointer-events: none;
+}
+
+defs #point, #hex {
+  fill: inherit;
+  fill-opacity: inherit;
+  stroke: inherit;
+  stroke-width: inherit;
+  stroke-opacity: inherit;
+}
+
+use[href="#davion-1"] {
+  r: 5px;
+  fill: red;
+}
+
+use[href="#davion-1"]:hover {
+  transform: scale(2);
+}
+
+g.col:hover {
+  --scale: 0.97;
+}
+
+g.col:hover use[href="#hex"] {
+  fill: orange;
+  stroke: orangered;
+}
+
+g.col:hover use[href="#davion-1"] {
+  transform: scale(1.5);
+}
+
+.grid {
+  --inradius: 8.66px;
+  --circumradius: 10px;
+  --x-step: calc(var(--inradius) * 2);
+  --y-step: calc((3 / 2) * var(--circumradius));
+  transform: translate(19px, 31px) scale(4);
+}
+
+g.row {
+  --translateX: 0;
+  transform: translate(var(--translateX), calc(var(--y-step) * (var(--n) - 1)));
+}
+
+g.row:nth-child(odd) {
+  --translateX: calc(var(--inradius));
+}
+
+g.row:nth-child(1) { --n: 1; }
+g.row:nth-child(2) { --n: 2; }
+g.row:nth-child(3) { --n: 3; }
+g.row:nth-child(4) { --n: 4; }
+
+g.col {
+  --scale: 1;
+  transform: translateX(calc(var(--x-step) * (var(--n) - 1))) scale(var(--scale));
+}
+
+g.col:nth-child(1) { --n: 1; }
+g.col:nth-child(2) { --n: 2; }
+g.col:nth-child(3) { --n: 3; }
+g.col:nth-child(4) { --n: 4; }

public/style.css

@@ -49,7 +49,7 @@ div#status {
 
 div#content {
   display: flex;
-  /* display: none; */
+  display: none;
   border-left: 1px solid gray;
   flex-basis: 0;
   /* overflow: scroll; */

src/index.js

@@ -704,9 +704,10 @@ window.addEventListener('load', () => {
 
       ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));
     };
-  }
+  };
 
-  POINTS.forEach((row, index) => row.forEach(([x, y]) => {
+  // POINTS.forEach((row, index) => row.forEach(([x, y]) => {
+  [].forEach(() => row.forEach(([x, y]) => {
     let group = svg.querySelector(`g[data-x="${x}"][data-y="${y}"]`);
     let point = group.querySelector(`use[href="#point"]`);
 
@@ -1100,19 +1101,4 @@ window.addEventListener('load', () => {
       }
     }
   });
-
-  function save(filename, data) {
-    const blob = new Blob([data], {type: 'text/csv'});
-    if(window.navigator.msSaveOrOpenBlob) {
-        window.navigator.msSaveBlob(blob, filename);
-    }
-    else{
-        const elem = window.document.createElement('a');
-        elem.href = window.URL.createObjectURL(blob);
-        elem.download = filename;
-        document.body.appendChild(elem);
-        elem.click();
-        document.body.removeChild(elem);
-    }
-  }
 });