From 143d61e49b2d835de560aa6239889ebd0ccfac6e Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Thu, 11 Apr 2024 17:04:28 -0700
Subject: Position hexes with CSS; move map styles into separate file
---
public/map.css | 226 +++++++
public/map.svg | 1888 +-----------------------------------------------------
public/style.css | 2 +-
src/index.js | 20 +-
4 files changed, 261 insertions(+), 1875 deletions(-)
create mode 100644 public/map.css
diff --git a/public/map.css b/public/map.css
new file mode 100644
index 0000000..7001821
--- /dev/null
+++ b/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; }
\ No newline at end of file
diff --git a/public/map.svg b/public/map.svg
index d977609..3f869ce 100644
--- a/public/map.svg
+++ b/public/map.svg
@@ -2,180 +2,10 @@
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index a1f8da5..d63bdb9 100644
--- a/public/style.css
+++ b/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; */
diff --git a/src/index.js b/src/index.js
index 66e554f..20a0623 100644
--- a/src/index.js
+++ b/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);
- }
- }
});
\ No newline at end of file
--
cgit v1.2.3