+
+ + 10 + 8 + + + 9 + 8 + + + 8 + 8 + + + 7 + 8 + +1 + + + 6 + 7 + +1 + + + 5 + 7 + +2 + + + 4 + 6 + +2 + + + 3 + 6 + +2 + + + 2 + 5 + +3 + + + 1 + 4 + +3 + + + 0 + None + 0 + + + DEAD + +
+ +Troop Number
Primary Weapon Type
-
+
- Damage
4L
+ - Short
1-27
+ - Long
28-75
+
+ Hand Grenades + +
+ + +
+
+
+
+
+
+ davion
+
+ liao
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Distance: -
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/map.svg b/public/map.svg
new file mode 100644
index 0000000..d977609
--- /dev/null
+++ b/public/map.svg
@@ -0,0 +1,1920 @@
+
+
+
\ No newline at end of file
diff --git a/public/rendered_numbers.png b/public/rendered_numbers.png
new file mode 100644
index 0000000..8672434
Binary files /dev/null and b/public/rendered_numbers.png differ
diff --git a/public/scans/countersheet1.jpg b/public/scans/countersheet1.jpg
new file mode 100644
index 0000000..659070e
Binary files /dev/null and b/public/scans/countersheet1.jpg differ
diff --git a/public/scans/countersheet2.jpg b/public/scans/countersheet2.jpg
new file mode 100644
index 0000000..7a4d3ad
Binary files /dev/null and b/public/scans/countersheet2.jpg differ
diff --git a/public/scans/countersheet3.jpg b/public/scans/countersheet3.jpg
new file mode 100644
index 0000000..dfe4696
Binary files /dev/null and b/public/scans/countersheet3.jpg differ
diff --git a/public/scans/countersheet4.jpg b/public/scans/countersheet4.jpg
new file mode 100644
index 0000000..028b216
Binary files /dev/null and b/public/scans/countersheet4.jpg differ
diff --git a/public/scans/map1-less-mem.jpg b/public/scans/map1-less-mem.jpg
new file mode 100644
index 0000000..322948b
Binary files /dev/null and b/public/scans/map1-less-mem.jpg differ
diff --git a/public/scans/map1-photo.jpg b/public/scans/map1-photo.jpg
new file mode 100644
index 0000000..a13d14e
Binary files /dev/null and b/public/scans/map1-photo.jpg differ
diff --git a/public/scans/map1.jpg b/public/scans/map1.jpg
new file mode 100644
index 0000000..8f6bc46
Binary files /dev/null and b/public/scans/map1.jpg differ
diff --git a/public/scans/map1.png b/public/scans/map1.png
new file mode 100644
index 0000000..87232fc
Binary files /dev/null and b/public/scans/map1.png differ
diff --git a/public/scans/map2.jpg b/public/scans/map2.jpg
new file mode 100644
index 0000000..82cd528
Binary files /dev/null and b/public/scans/map2.jpg differ
diff --git a/public/scans/map3.jpg b/public/scans/map3.jpg
new file mode 100644
index 0000000..08232e4
Binary files /dev/null and b/public/scans/map3.jpg differ
diff --git a/public/scans/map4.jpg b/public/scans/map4.jpg
new file mode 100644
index 0000000..8fa25dc
Binary files /dev/null and b/public/scans/map4.jpg differ
diff --git a/public/soldier_record_block.css b/public/soldier_record_block.css
new file mode 100644
index 0000000..47bf583
--- /dev/null
+++ b/public/soldier_record_block.css
@@ -0,0 +1,35 @@
+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;
+}
diff --git a/public/soldier_record_block.js b/public/soldier_record_block.js
new file mode 100644
index 0000000..b2465ab
--- /dev/null
+++ b/public/soldier_record_block.js
@@ -0,0 +1,40 @@
+class SoldierRecordBlock extends HTMLDivElement {
+ constructor() {
+ super();
+
+ let template = document.getElementById('soldier-record-block');
+ let templateContent = template.content;
+
+ const shadowRoot = this.attachShadow({ mode: "open" });
+ shadowRoot.appendChild(templateContent.cloneNode(true));
+
+ // console.log(shadowRoot)
+
+ // this.shadowRoot
+ // .querySelectorAll('p:has(input[type="number"]), .physical-status-track')
+ // .forEach(el => el.addEventListener('click', e => e.stopPropagation()))
+ // ;
+ }
+}
+
+customElements.define(
+ 'damage-block',
+ class extends HTMLSpanElement {
+ constructor() {
+ super();
+
+ let template = document.getElementById('damage-block');
+ let templateContent = template.content;
+
+ const shadowRoot = this.attachShadow({ mode: "open" });
+ shadowRoot.appendChild(templateContent.cloneNode(true));
+ }
+ },
+ { extends: 'span' }
+);
+
+customElements.define(
+ 'soldier-record-block',
+ SoldierRecordBlock,
+ { extends: 'div'}
+);
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..a1f8da5
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,437 @@
+body {
+ margin: 0;
+ display: flex;
+ overflow: hidden;
+}
+
+#map-container {
+ flex-basis: 100%;
+ position: relative;
+ max-height: 100vh;
+}
+
+svg, object {
+ background-color: darkgray;
+ width: 100%;
+ height: 100%;
+}
+
+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;
+ /* display: none; */
+ 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 > 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;
+}
+
+use[href="#point"].sight-line-target {
+ opacity: 1;
+ stroke: orangered;
+ /* stroke-width: 1px; */
+ fill-opacity: 0.04;
+}
+
+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 g.hover use.counter:not(.clone) {
+ /* stroke: orange; */
+ /* stroke-width: 2px; */
+}
+
+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);
+}
+
+
+/* ======================================================= */
+
+/* g#counters {
+ pointer-events: none;
+} */
+
+/* g#counters use {
+ r: 5px;
+}
+
+g#counters use:hover {
+ stroke: orange;
+ stroke-width: 2px;
+ r: 8px;
+} */
+
+/* g#counters use[data-troop-allegiance="davion"] {
+ fill: red;
+}
+
+g#counters use[data-troop-allegiance="liao"] {
+ fill: green;
+} */
+
+/* g#counters use.clone {
+ stroke: white;
+ stroke-width: 0.5px;
+ stroke-dasharray: 1;
+}
+
+g#counters use[data-troop-allegiance="davion"].clone {
+ fill: rgb(255, 126, 126);
+}
+
+g#counters use[data-troop-allegiance="liao"].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-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;
+}
+
+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 [slot="troop-number"] {
+ color: white;
+ font-weight: bold;
+ border-radius: 10px;
+ padding: 0 4px;
+}
+
+.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] {
+ background-color: red;
+}
+
+.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] {
+ background-color: 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;
+}
+
+@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; */
+ }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..66e554f
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,1118 @@
+function isEven(n) {
+ return n % 2 === 0;
+}
+
+function radToDeg(radians) {
+ return radians * 180 / Math.PI;
+}
+
+function calculateAngle(xDiff, yDiff) {
+ yDiff = -yDiff;
+ let angle = Math.abs(Math.atan(yDiff / xDiff));
+
+ if (xDiff < 0 && yDiff > 0) {
+ angle = Math.PI - angle;
+ } else if (xDiff < 0 && yDiff < 0) {
+ angle = Math.PI + angle;
+ } else if (xDiff > 0 && yDiff < 0) {
+ angle = 2 * Math.PI - angle;
+ }
+
+ return angle;
+}
+
+function edgePoint(x1, y1, x2, y2, maxX, maxY) {
+ let pointCoords,
+ xDiff = x2 - x1,
+ yDiff = y2 - y1,
+ xIntercept = y => (y - y1) * xDiff / yDiff + x1,
+ yIntercept = x => (x - x1) * yDiff / xDiff + y1;
+
+ if (xDiff > 0 && yDiff > 0) {
+ let x = xIntercept(maxY);
+
+ pointCoords = x <= maxX ? [x, maxY] : [maxX, yIntercept(maxX)];
+ } else if (xDiff > 0 && yDiff < 0) {
+ let y = yIntercept(maxX);
+
+ pointCoords = y >= 0 ? [maxX, y] : [xIntercept(0), 0];
+ } else if (xDiff < 0 && yDiff < 0) {
+ let x = xIntercept(0);
+
+ pointCoords = x >= 0 ? [x, 0] : [0, yIntercept(0)];
+ } else {
+ let y = yIntercept(0);
+
+ pointCoords = y <= maxY ? [0, y] : [xIntercept(maxY), maxY];
+ }
+
+ return pointCoords;
+}
+
+function evenr_to_axial(x, y) {
+ return {q: x - (y + (y & 1)) / 2, r: y};
+}
+
+function axial_to_evenr(q, r) {
+ return {x: q + (r + (r & 1)) / 2, y: r};
+}
+
+function axial_distance(q1, r1, q2, r2) {
+ return (Math.abs(q1 - q2) + Math.abs(q1 + r1 - q2 - r2) + Math.abs(r1 - r2)) / 2;
+}
+
+function offset_distance(x1, y1, x2, y2) {
+ let { q: q1, r: r1 } = evenr_to_axial(x1, y1),
+ { q: q2, r: r2 } = evenr_to_axial(x2, y2);
+
+ return axial_distance(q1, r1, q2, r2);
+}
+
+function cube_to_axial(q, r, s) {
+ return { q: q, r: r };
+}
+
+function axial_to_cube(q, r) {
+ return { q: q, r: r, s: -q - r};
+}
+
+function cube_round(q, r, s) {
+ rQ = Math.round(q);
+ rR = Math.round(r);
+ rS = Math.round(s);
+
+ let q_diff = Math.abs(rQ - q),
+ r_diff = Math.abs(rR - r),
+ s_diff = Math.abs(rS - s);
+
+ if (q_diff > r_diff && q_diff > s_diff) {
+ rQ = -rR - rS;
+ } else if (r_diff > s_diff) {
+ rR = -rQ - rS;
+ } else {
+ rS = -rQ - rR;
+ }
+
+ return {q: rQ, r: rR, s: rS};
+}
+
+function axial_round(q, r) {
+ let cube = axial_to_cube(q, r),
+ round = cube_round(cube.q, cube.r, cube.s),
+ axial = cube_to_axial(round.q, round.r, round.s);
+
+ return {q: axial.q, r: axial.r};
+}
+
+function lerp(a, b, t) {
+ return a + (b - a) * t;
+}
+
+function axial_lerp(q1, r1, q2, r2, t) {
+ return { q: lerp(q1, q2, t), r: lerp(r1, r2, t) };
+}
+
+function linedraw(x1, y1, x2, y2) {
+ let axial1 = evenr_to_axial(x1, y1),
+ axial2 = evenr_to_axial(x2, y2),
+ n = offset_distance(x1, y1, x2, y2),
+ results = [];
+
+ for (let i = 0; i <= n; i++) {
+ let lerp = axial_lerp(axial1.q, axial1.r, axial2.q, axial2.r, 1.0 / n * i),
+ round = axial_round(lerp.q, lerp.r),
+ { x, y } = axial_to_evenr(round.q, round.r);
+
+ results.push([x, y]);
+ }
+
+ return results;
+}
+
+window.addEventListener('load', () => {
+ const svgns = "http://www.w3.org/2000/svg",
+ // svg = document.querySelector('svg'),
+ svg = document.querySelector('object').contentDocument.querySelector('svg'),
+ hex = svg.querySelector('#point'),
+ ptGrp = svg.querySelector('#points'),
+ cntrGrp = svg.querySelector('#counters'),
+ settingsPanel = document.getElementById('panel'),
+ recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
+
+ const q = s => document.querySelector(s),
+ qA = s => document.querySelectorAll(s);
+
+ const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } =
+ svg.viewBox.baseVal;
+
+ const COLUMN_COUNT = 33,
+ ROW_COUNT = 51,
+ // const COLUMN_COUNT = 20,
+ // ROW_COUNT = 20,
+ HORZ_POINT_DISTANCE = 1.005,
+ VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2,
+ ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2,
+ CIRCUMRADIUS = Math.max(...[...new Set(Object.values(hex.points).flatMap(({x, y}) => [x, y]))]),
+ INRADIUS = CIRCUMRADIUS * Math.sqrt(3) / 2,
+ [COLUMNS, ROWS] = [COLUMN_COUNT, ROW_COUNT].map(n => [...Array(n).keys()]),
+ POINTS = ROWS.map(y => COLUMNS.map(x => [x, y]));
+
+ const FIRING_ARC_SIZE = {
+ 'small': Math.atan(HORZ_POINT_DISTANCE / (6 * VERT_POINT_DISTANCE)),
+ 'medium': Math.atan((HORZ_POINT_DISTANCE / 2) / VERT_POINT_DISTANCE),
+ 'large': Math.atan((21 * HORZ_POINT_DISTANCE) / (6 * VERT_POINT_DISTANCE))
+ };
+
+ function positionFiringArc(e) {
+ let activeFiringArc = svg.querySelector('polygon.firing-arc.active');
+
+ // TODO: handle exactly horizontal and vertical lines
+
+ if (activeFiringArc) {
+ let activeFiringArcOutline = svg.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`);
+ board = svg.querySelector('#image-maps'),
+ { width, height } = board.getBBox(),
+ pt = new DOMPoint(e.clientX, e.clientY),
+ { x: pointerX, y: pointerY } = pt.matrixTransform(board.getScreenCTM().inverse()),
+ [maxXpx, maxYpx] = [width, height],
+ {x: x1px, y: y1px} = activeFiringArc.points[0];
+
+ let [x2px, y2px] = [
+ pointerX / width * maxXpx,
+ pointerY / height * maxYpx
+ ];
+
+ let xDiff = x2px - x1px;
+ let yDiff = y2px - y1px;
+ let angle = calculateAngle(xDiff, yDiff);
+
+ let arcAngle = FIRING_ARC_SIZE[activeFiringArc.dataset.size];
+ let distance = Math.sqrt((x2px - x1px)**2 + (y2px - y1px)**2);
+ let yDelta = distance * Math.cos(angle) * Math.tan(arcAngle);
+ let xDelta = distance * Math.sin(angle) * Math.tan(arcAngle);
+
+ let [newY1, newX1] = [y2px + yDelta, x2px + xDelta];
+ let [newY2, newX2] = [y2px - yDelta, x2px - xDelta];
+
+ [newX1, newY1] = edgePoint(x1px, y1px, newX1, newY1, maxXpx, maxYpx);
+ [newX2, newY2] = edgePoint(x1px, y1px, newX2, newY2, maxXpx, maxYpx);
+
+ let oppositeEdgeConditions = [
+ newX1 == 0 && newX2 == maxXpx,
+ newX2 == 0 && newX1 == maxXpx,
+ newY1 == 0 && newY2 == maxYpx,
+ newY2 == 0 && newY1 == maxYpx
+ ]
+
+ let orthogonalEdgeConditions = [
+ (newX1 == 0 || newX1 == maxXpx) && (newY2 == 0 || newY2 == maxYpx),
+ (newX2 == 0 || newX2 == maxXpx) && (newY1 == 0 || newY1 == maxYpx),
+ ]
+
+ let points;
+
+ if (oppositeEdgeConditions.some(e => e)) {
+ let cornerPoints;
+
+ if (xDiff > 0 && yDiff > 0) {
+ if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+ cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
+ } else {
+ cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
+ }
+ } else if (xDiff > 0 && yDiff < 0) {
+ if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+ cornerPoints = [[maxXpx, 0], [maxXpx, maxYpx]];
+ } else {
+ cornerPoints = [[0, 0], [maxXpx, 0]];
+ }
+
+ } else if (xDiff < 0 && yDiff > 0) {
+ if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+ cornerPoints = [[0, maxYpx], [0, 0]];
+ } else {
+ cornerPoints = [[maxXpx, maxYpx], [0, maxYpx]];
+ }
+
+ } else {
+ if ((newY1 == 0 && newY2 == maxYpx) || (newY1 == maxYpx && newY2 == 0)) {
+ cornerPoints = [[0, maxYpx], [0, 0]];
+ } else {
+ cornerPoints = [[0, 0], [maxXpx, 0]];
+ }
+
+ }
+ points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints[1]} ${cornerPoints[0]} ${newX2},${newY2}`;
+ } else if (orthogonalEdgeConditions.some(e => e)) {
+ let cornerPoints = [];
+ let cp1, cp2;
+
+ if (newX1 == 0 || newX1 == maxXpx) {
+ cp1 = [newX1, yDiff > 0 ? maxYpx : 0];
+ } else {
+ cp1 = [xDiff > 0 ? maxXpx : 0, newY1];
+ }
+
+ if (newX2 == 0 || newX2 == maxXpx) {
+ cp2 = [newX2, yDiff > 0 ? maxYpx : 0];
+ } else {
+ cp2 = [xDiff > 0 ? maxXpx : 0, newY2];
+ }
+
+ if (cp1[0] == cp2[0] && cp1[1] == cp2[1]) {
+ cornerPoints.push(cp1);
+ } else {
+ cornerPoints.push(cp1);
+ cornerPoints.push([xDiff > 0 ? maxXpx : 0, yDiff > 0 ? maxYpx : 0])
+ cornerPoints.push(cp2);
+ }
+
+ points = `${x1px},${y1px} ${newX1},${newY1} ${cornerPoints.join(' ')} ${newX2},${newY2}`;
+ } else {
+ points = `${x1px},${y1px} ${newX1},${newY1} ${newX2},${newY2}`;
+ }
+
+ activeFiringArcOutline.setAttributeNS(null, 'points', points);
+ activeFiringArc.setAttributeNS(null, 'points', points);
+ }
+ }
+
+ let prevVb = localStorage.getItem('viewBox');
+
+ if (prevVb) {
+ svg.setAttributeNS(null, 'viewBox', prevVb);
+ }
+
+ let info = document.getElementById('status');
+
+ // Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
+ // const identityMtx = [1, 0, 0, 1, 0, 0];
+ // const target = document.getElementById(fieldset.name);
+ // const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g) || identityMtx;
+ // const inputs = fieldset.querySelectorAll('input');
+
+ // if (transform) {
+ // const [a, b, c, d, e, f] = transform.map(n => parseFloat(n));
+
+ // // a c e
+ // // b d f
+
+ // const scaleX = Math.sqrt(a**2 + c**2);
+ // const scaleY = Math.sqrt(b**2 + d**2);
+
+ // let values = {
+ // scaleX: Math.round(scaleX * 1000) / 1000,
+ // scaleY: Math.round(scaleY * 1000) / 1000,
+ // translateX: e,
+ // translateY: f,
+ // rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10
+ // }
+
+ // inputs.forEach(input => input.value = values[input.name]);
+ // }
+
+ // inputs.forEach(input => {
+ // input.addEventListener('pointerenter', e => e.target.focus());
+
+ // input.addEventListener('input', e => {
+ // let { translateX, translateY, rotate, scaleX, scaleY } =
+ // Object.values(inputs).reduce((acc, input) => {
+ // acc[input.name] = input.value;
+ // return acc;
+ // }, {});
+
+ // let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;
+ // target.style.transform = transform;
+ // });
+
+ // input.addEventListener('pointerleave', () => document.activeElement.blur());
+ // });
+ // });
+
+ const grid = svg.querySelector('#grid');
+
+ const Counter = new function() {
+ let container = ptGrp,
+ selectedClass = 'selected',
+
+ dataSelector = function(troopNumber, allegiance) {
+ return `[data-troop-number="${troopNumber}"][data-troop-allegiance="${allegiance}"]`;
+ },
+
+ selector = function(troopNumber, allegiance) {
+ return `use.counter${dataSelector(troopNumber, allegiance)}`;
+ },
+
+ position = function(x, y) {
+ return `g[data-x="${x}"][data-y="${y}"]`;
+ },
+
+ counterPosition = function(x, y) {
+ return `use.counter[data-x="${x}"][data-x="${y}"]`;
+ },
+
+ traceSelector = function(troopNumber, allegiance) {
+ return `polyline.move-trace${dataSelector(troopNumber, allegiance)}`;
+ },
+
+ clickClone = function() {
+ let { troopNumber, troopAllegiance, x, y } = this.dataset,
+ [xAttr, yAttr] = this.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
+
+ if (Counter.isSelected(troopNumber, troopAllegiance)) {
+ let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)),
+ points = trace.getAttribute('points').split(' ');
+
+ if (`${xAttr},${yAttr}` == points.at(0)) {
+ let counter = Counter.get(troopNumber, troopAllegiance);
+ counter.setAttributeNS(null, 'x', 0);
+ counter.setAttributeNS(null, 'y', 0);
+ counter.dataset.x = x;
+ counter.dataset.y = y;
+ container.querySelector(`g[data-x="${x}"][data-y="${y}"]`).appendChild(counter);
+
+ Counter.removeClones(this);
+ trace.remove();
+ } else {
+ points = points.filter(p => p != `${xAttr},${yAttr}`).join(' ');
+
+ trace.setAttributeNS(null, 'points', points);
+ }
+
+ this.remove();
+ }
+ },
+
+ pointerOver = function() {
+ let { troopNumber, troopAllegiance } = this.dataset;
+ cp = svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);
+
+ if (cp) {
+ cp.style.display = 'none';
+ }
+ },
+
+ pointerOut = function() {
+ let { troopNumber, troopAllegiance } = this.dataset;
+ cp = svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);
+
+ if (cp) {
+ let isVisible =
+ document
+ .getElementById('toggle-firing-arc-vis')
+ .querySelector(`input[data-allegiance="${troopAllegiance}"]`)
+ .checked;
+
+ cp.style.display = isVisible ? 'none' : '';
+ }
+ },
+
+ click = function() {
+ if (this.classList.contains(selectedClass)) {
+ let { troopNumber, troopAllegiance } = this.dataset,
+ trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+ if (trace) {
+ let points = trace.getAttribute('points').split(' '),
+ [xAttr, yAttr] = points.at(-2).split(','),
+ clone = container.querySelector(`g[transform="translate(${xAttr} ${yAttr})"] ${dataSelector(troopNumber, troopAllegiance)}.clone`);
+
+ points.pop();
+
+ if (points.length >= 2) {
+ trace.setAttributeNS(null, 'points', points.join(' '));
+ } else {
+ trace.remove();
+ }
+
+ this.setAttributeNS(null, 'x', clone.getAttribute('x'));
+ this.setAttributeNS(null, 'y', clone.getAttribute('y'));
+ this.dataset.x = clone.dataset.x;
+ this.dataset.y = clone.dataset.y;
+
+ container.querySelector(`g[data-x="${this.dataset.x}"][data-y="${this.dataset.y}"]`).appendChild(this);
+
+ clone.remove();
+ }
+ }
+ },
+
+ dblClick = function() {
+ if (this.classList.contains(selectedClass)) {
+ let { troopNumber, troopAllegiance } = this.dataset,
+ trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+ if (!trace) {
+ Counter.remove(this);
+ svg.querySelectorAll(`#firing-arcs ${dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());
+ }
+ }
+ };
+
+ this.get = function(troopNumber, allegiance) {
+ return container.querySelector(`${selector(troopNumber, allegiance)}:not(.clone)`);
+ };
+
+ this.getAt = function(x, y) {
+ return container.querySelector(`${counterPosition(x, y)}:not(.clone)`);
+ };
+
+ this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
+ this.unSelect();
+
+ let counter = container.querySelector(`${selector(troopNumber, troopAllegiance)}:not(.clone)`);
+
+ if (counter) {
+ counter.classList.add(selectedClass);
+ }
+ };
+
+ this.unSelect = function() {
+ let selected = container.querySelector(`.${selectedClass}`);
+
+ if (selected) {
+ let { troopNumber, troopAllegiance } = selected.dataset;
+
+ selected.classList.remove(selectedClass);
+ selected.removeAttribute('style');
+
+ container
+ .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)
+ .forEach(el => el.removeAttribute('style'));
+ }
+ };
+
+ this.isSelected = function(troopNumber, allegiance) {
+ return container.querySelector(`${selector(troopNumber, allegiance)}.${selectedClass}`) !== null;
+ };
+
+ this.place = function({ dataset: { troopNumber, troopAllegiance }}, point) {
+ let counter, points,
+ counterNodeList = container.querySelectorAll(selector(troopNumber, troopAllegiance));
+
+ if (counterNodeList.length > 0) {
+ let counters = Array.from(counterNodeList),
+ original = counters.find(el => !el.classList.contains('clone')),
+ trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+ // let ptContainers = counters.map(c => ptGrp.querySelector(position(c.dataset.x, c.dataset.y)));
+
+ let current = {
+ x: point.dataset.x,
+ y: point.dataset.y,
+ // xAttr: point.getAttribute('x'),
+ // yAttr: point.getAttribute('y'),
+ transform: container.querySelector(position(point.dataset.x, point.dataset.y)).getAttribute('transform')
+ },
+ previous = {
+ x: original.dataset.x,
+ y: original.dataset.y,
+ // xAttr: original.getAttribute('x'),
+ // yAttr: original.getAttribute('y'),
+ transform: container.querySelector(position(original.dataset.x, original.dataset.y)).getAttribute('transform')
+ };
+
+ [current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g);
+ [previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g);
+
+ counter = original.cloneNode();
+ counter.setAttributeNS(null, 'x', 0);
+ counter.setAttributeNS(null, 'y', 0);
+ counter.dataset.x = previous.x;
+ counter.dataset.y = previous.y;
+ counter.classList.remove(selectedClass);
+ counter.classList.add('clone');
+
+ original.setAttributeNS(null, 'x', 0);
+ original.setAttributeNS(null, 'y', 0);
+ original.dataset.x = current.x;
+ original.dataset.y = current.y;
+
+ container.querySelector(`g[data-x="${current.x}"][data-y="${current.y}"]`).appendChild(original);
+
+ if (!trace) {
+ trace = document.createElementNS(svgns, 'polyline');
+ points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`;
+
+ trace.dataset.troopNumber = troopNumber;
+ trace.dataset.troopAllegiance = troopAllegiance;
+ trace.classList.add('move-trace');
+
+ grid.prepend(trace)
+ // container.prepend(trace);
+ } else {
+ points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;
+ }
+
+ trace.setAttributeNS(null, 'points', points);
+ counter.addEventListener('click', clickClone);
+ } else {
+ counter = document.createElementNS(svgns, 'use'),
+
+ counter.setAttributeNS(null, 'href', `#${troopAllegiance}-${troopNumber}`);
+ counter.classList.add('counter', 'selected');
+ counter.setAttributeNS(null, 'x', point.getAttribute('x'));
+ counter.setAttributeNS(null, 'y', point.getAttribute('y'));
+ counter.dataset.troopNumber = troopNumber;
+ counter.dataset.troopAllegiance = troopAllegiance;
+ counter.dataset.x = point.dataset.x;
+ counter.dataset.y = point.dataset.y;
+ counter.style.pointerEvents = 'auto';
+
+ counter.addEventListener('pointerover', pointerOver);
+ counter.addEventListener('pointerout', pointerOut);
+ counter.addEventListener('click', click);
+ counter.addEventListener('dblclick', dblClick);
+ }
+
+ container.querySelector(`g[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`).appendChild(counter);
+
+ // container.appendChild(counter);
+ };
+
+ this.remove = function({ dataset: { troopNumber, troopAllegiance }}) {
+ container
+ .querySelectorAll(dataSelector(troopNumber, troopAllegiance))
+ .forEach(el => el.remove());
+ };
+
+ this.removeClones = function({ dataset: { troopNumber, troopAllegiance }}) {
+ container
+ .querySelectorAll(`${selector(troopNumber, troopAllegiance)}.clone`)
+ .forEach(el => el.remove());
+ };
+
+ this.endMove = function(el) {
+ let { troopNumber, troopAllegiance } = el.dataset;
+ let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+ if (trace) {
+ trace.remove();
+ }
+
+ Counter.removeClones(el);
+ };
+
+ this.hasProne = function(troopNumber, troopAllegiance) {
+ let selector = `g#${troopAllegiance}-${troopNumber} use[href="#counter-prone"]`;
+
+ return !!svg.querySelector(selector);
+ };
+ };
+
+ const RecordSheet = new function() {
+ let clipUnclippedFiringArcs = function() {
+ let unclipped = svg.querySelectorAll('#firing-arcs polygon:not([clip-path])');
+
+ unclipped.forEach(el => {
+ let { troopNumber, troopAllegiance } = el.dataset,
+ clipPathId = `clip-path-${troopAllegiance}-${troopNumber}`;
+
+ let isVisible =
+ document
+ .getElementById('toggle-firing-arc-vis')
+ .querySelector(`input[data-allegiance="${troopAllegiance}"]`)
+ .checked;
+
+ if (isVisible) {
+ svg.querySelector(`#${clipPathId}`).style.display = 'none';
+ }
+
+ el.setAttributeNS(null, 'clip-path', `url(#${clipPathId})`);
+ });
+ };
+
+ this.unSelect = function() {
+ let selected = this.getSelected();
+
+ if (selected) {
+ selected.classList.remove('selected');
+ document.getElementById('toggle-prone-counter').checked = false;
+ }
+
+ clipUnclippedFiringArcs();
+ Counter.unSelect();
+ };
+
+ this.getSelected = function() {
+ return document.querySelector('.soldier-record.selected');
+ };
+
+ this.select = function(el) {
+ let { troopNumber, troopAllegiance } = el.dataset,
+ proneStatus = Counter.hasProne(troopNumber, troopAllegiance);
+
+ RecordSheet.unSelect();
+ document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');
+ document.getElementById('toggle-prone-counter').checked = proneStatus;
+ existingArcs = svg.querySelectorAll(`#firing-arcs polygon[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`);
+ existingArcs.forEach(el => el.removeAttribute('clip-path'));
+ };
+ };
+
+ const SightLine = new function() {
+ this.clear = function() {
+ let sl = grid.querySelector('line.sight-line');
+ let target = grid.querySelector(`use[href="#point"].sight-line-target`);
+
+ if (sl) {
+ sl.remove();
+ }
+
+ if (target) {
+ target.classList.remove('sight-line-target');
+ }
+
+ this.clearHexes();
+ };
+
+ this.clearHexes = function() {
+ ptGrp.querySelectorAll('use[href="#point"].active').forEach(el => el.classList.remove('active'));
+ };
+
+ this.draw = function(x1, y1, x2, y2) {
+ let source = ptGrp.querySelector(`g[data-x="${x1}"][data-y="${y1}"]`),
+ target = ptGrp.querySelector(`g[data-x="${x2}"][data-y="${y2}"]`),
+
+ [slX1, slY1] = source.getAttribute('transform').match(/-?\d+\.?\d*/g),
+ [slX2, slY2] = target.getAttribute('transform').match(/-?\d+\.?\d*/g),
+
+ sightLine = document.createElementNS(svgns, 'line');
+
+ sightLine.classList.add('sight-line');
+ sightLine.classList.add('active');
+ sightLine.setAttributeNS(null, 'x1', slX1);
+ sightLine.setAttributeNS(null, 'y1', slY1);
+ sightLine.setAttributeNS(null, 'x2', slX2);
+ sightLine.setAttributeNS(null, 'y2', slY2);
+
+ grid.appendChild(sightLine);
+
+ let coords = [x1, y1, x2, y2];
+ this.drawHexes(...coords);
+ };
+
+ this.drawHexes = function(...coords) {
+ this.clearHexes()
+
+ info.querySelector('#hex-count').textContent = offset_distance(...coords);
+ info.style.display = 'block';
+
+ let lineCoords = linedraw(...coords);
+ lineCoords.shift();
+ let s = lineCoords.map(([x, y]) => `use[href="#point"][data-x="${x}"][data-y="${y}"]`).join(', ');
+
+ ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));
+ };
+ }
+
+ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
+ let group = svg.querySelector(`g[data-x="${x}"][data-y="${y}"]`);
+ let point = group.querySelector(`use[href="#point"]`);
+
+ group.addEventListener('pointerout', e => {
+ group.classList.remove('hover');
+ });
+
+ group.addEventListener('click', e => {
+ let cl = e.target.classList,
+ sl = grid.querySelector('line.sight-line'),
+ targetIsSomeOtherUnitCounter = cl.contains('counter') && !cl.contains('clone'),
+ selected = RecordSheet.getSelected();
+
+ // maybe we should start with, "are we clicking on a counter?"
+ if (sl) {
+ let { troopNumber: sTn, troopAllegiance: sTa} = selected.dataset,
+ { troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset,
+ sightLineInLockedPosition = !sl.classList.contains('active'),
+ targetIsCounterOrCloneOfSelected = cl.contains('counter') && sTn == tTn && sTa == tTa;
+
+ if (sightLineInLockedPosition && targetIsCounterOrCloneOfSelected) {
+ let counterParent = Counter.get(tTn, tTa).parentElement,
+ [x, y] = counterParent.getAttribute('transform').match(/-?\d+\.?\d*/g),
+ target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),
+ { x: x1, y: y1 } = counterParent.dataset,
+ { x: x2, y: y2 } = target.dataset;
+
+ sl.setAttributeNS(null, 'x1', x);
+ sl.setAttributeNS(null, 'y1', y);
+
+ SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
+ } else if (targetIsCounterOrCloneOfSelected || targetIsSomeOtherUnitCounter) {
+ if (targetIsSomeOtherUnitCounter) {
+ RecordSheet.select(e.target);
+ Counter.select(e.target);
+ }
+
+ SightLine.clear();
+ }
+ } else if (targetIsSomeOtherUnitCounter) {
+ RecordSheet.select(e.target);
+ Counter.select(e.target);
+ }
+ });
+
+ point.addEventListener('click', e => {
+ let selectedSoldier = document.querySelector('.soldier-record.selected');
+ let existingOccupant =
+ svg.querySelector(`.counter[data-x="${point.dataset.x}"][data-y="${point.dataset.y}"]`);
+
+ if (selectedSoldier && !existingOccupant) {
+ let sl = svg.querySelector('.sight-line');
+
+ Counter.place(selectedSoldier, point);
+
+ if (sl) {
+ if (sl.classList.contains('active')) {
+ SightLine.clear();
+ } else {
+ let [x, y] = point.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g),
+ target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),
+ { x: x1, y: y1 } = point.dataset,
+ { x: x2, y: y2 } = target.dataset;
+
+ sl.setAttributeNS(null, 'x1', x);
+ sl.setAttributeNS(null, 'y1', y);
+
+ SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
+ }
+ }
+ }
+ });
+
+ group.addEventListener('contextmenu', e => {
+ e.preventDefault();
+
+ let sl = svg.querySelector('.sight-line');
+
+ if (sl) {
+ sl.classList.toggle('active');
+
+ if (sl.classList.contains('active')) {
+ SightLine.clear();
+ } else {
+ group.querySelector(`use[href="#point"]`).classList.add('sight-line-target');
+ }
+
+ group.dispatchEvent(new MouseEvent('pointerover'));
+ }
+ });
+
+ group.addEventListener('pointerover', e => {
+ group.classList.add('hover');
+
+ let selected = RecordSheet.getSelected();
+
+ if (selected) {
+ let { troopNumber: tn, troopAllegiance: ta } = selected.dataset,
+ counter = Counter.get(tn, ta),
+ sl = svg.querySelector('line.sight-line');
+
+ if (counter && (!sl || sl.classList.contains('active'))) {
+ if (counter.dataset.x !== e.target.dataset.x || counter.dataset.y !== e.target.dataset.y) {
+ let coords = [
+ counter.dataset.x,
+ counter.dataset.y,
+ e.target.dataset.x,
+ e.target.dataset.y
+ ].map(n => parseInt(n));
+
+ SightLine.draw(...coords);
+ }
+ }
+ }
+ });
+
+ group.addEventListener('pointerout', e => {
+ let sl = svg.querySelector('.sight-line.active');
+
+ if (sl && sl.classList.contains('active')) {
+ SightLine.clear();
+ }
+ });
+
+ // ptGrp.appendChild(document.createTextNode('\n '));
+ // ptGrp.appendChild(group);
+ }));
+
+ document.querySelectorAll('.soldier-record').forEach(el =>
+ el.addEventListener('click', e => {
+ if (el.classList.contains('selected')) {
+ el.classList.remove('selected');
+ RecordSheet.unSelect();
+ Counter.unSelect();
+ } else {
+ RecordSheet.select(el);
+ Counter.select(el);
+ }
+
+ SightLine.clear();
+ })
+ );
+
+ // document.querySelector('#grid').addEventListener('click', e => {
+ // let point = ptGrp.querySelector(`[data-x="${e.target.dataset.x}"][data-y="${e.target.dataset.y}"]`),
+ // sl = svg.querySelector('.sight-line');
+
+ // if (sl) {
+ // sl.classList.add('active');
+ // point.dispatchEvent(new MouseEvent('mouseout'));
+ // point.dispatchEvent(new MouseEvent('pointerover'));
+ // }
+ // });
+
+ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
+ let selected = RecordSheet.getSelected();
+
+ if (selected) {
+ Counter.endMove(selected);
+ RecordSheet.unSelect();
+ selected.classList.toggle('movement-ended');
+ }
+ }));
+
+ document.querySelectorAll('.end-turn').forEach(el =>
+ el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
+ let dataSelector = `[data-troop-allegiance="${allegiance}"]`,
+ records = Array.from(qA(`.soldier-record${dataSelector}`)),
+ turnCounter = document.getElementById('turn-count'),
+ { textContent: count, dataset: { update }} = turnCounter;
+
+ el.setAttribute('disabled', '');
+
+ document
+ .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
+ .removeAttribute('disabled');
+
+ if (update == '1') {
+ turnCounter.children.namedItem('count').textContent++
+ turnCounter.dataset.update = '0';
+ } else {
+ turnCounter.dataset.update = '1';
+ }
+
+ qA(`#firing-arcs ${dataSelector}`).forEach(el => el.remove());
+
+ records
+ .sort((el1, el2) => el1.dataset.troopNumber > el2.dataset.troopNumber)
+ .forEach(el => el.classList.remove('movement-ended'));
+
+ RecordSheet.select(records.at(0));
+ Counter.select(records.at(0));
+ })
+ );
+
+ document.querySelectorAll('.set-firing-arc').forEach(el => el.addEventListener('click', e => {
+ let selectedSoldier = document.querySelector('.soldier-record.selected');
+
+ if (selectedSoldier) {
+ let {troopNumber, troopAllegiance} = selectedSoldier.dataset,
+ counter = Counter.get(troopNumber, troopAllegiance);
+
+ let existingArcs = svg.querySelectorAll(
+ `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+ );
+
+ existingArcs.forEach(el => el.remove());
+
+ if (counter) {
+ let arcLayer = svg.querySelector('#shapes');
+ let outlineLayer = svg.querySelector('#lines');
+ let arcContainer = svg.querySelector('#firing-arcs');
+
+ let [x, y] = counter.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
+
+ const transform = getComputedStyle(grid).transform.match(/-?\d+\.?\d*/g);
+ const pt = new DOMPoint(x, y);
+ const mtx = new DOMMatrix(transform);
+ let tPt = pt.matrixTransform(mtx);
+
+ let pivotPoint = [tPt.x, tPt.y];
+ let firingArc = document.createElementNS(svgns, 'polygon');
+ let firingArcOutline = document.createElementNS(svgns, 'polygon');
+
+ firingArc.classList.add('firing-arc', 'active');
+ firingArc.dataset.troopNumber = troopNumber;
+ firingArc.dataset.troopAllegiance = troopAllegiance;
+ firingArc.dataset.size = e.target.dataset.size;
+ firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
+ firingArcOutline.dataset.troopNumber = troopNumber;
+ firingArcOutline.dataset.troopAllegiance = troopAllegiance;
+ firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
+
+ let clipShape = document.createElementNS(svgns, 'circle');
+ clipShape.setAttributeNS(null, 'cx', tPt.x);
+ clipShape.setAttributeNS(null, 'cy', tPt.y);
+ clipShape.setAttributeNS(null, 'r', 100);
+
+ let clipPath = document.createElementNS(svgns, 'clipPath');
+ clipPath.setAttributeNS(null, 'id', `clip-path-${troopAllegiance}-${troopNumber}`);
+ clipPath.dataset.troopNumber = troopNumber;
+ clipPath.dataset.troopAllegiance = troopAllegiance;
+ clipPath.appendChild(clipShape);
+
+ arcContainer.appendChild(clipPath);
+ arcLayer.appendChild(firingArc);
+ outlineLayer.appendChild(firingArcOutline);
+
+ let firingArcPlacementListener = e => {
+ svg.querySelectorAll('.firing-arc.active').forEach(el => el.classList.remove('active'));
+ ptGrp.removeAttribute('style');
+ svg.removeEventListener('mousemove', positionFiringArc);
+ firingArc.removeEventListener('click', firingArcPlacementListener);
+ firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
+ };
+
+ let cancelFiringArcPlacement = e => {
+ e.preventDefault();
+
+ firingArc.removeEventListener('click', firingArcPlacementListener);
+ firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
+
+ let existingArcs = svg.querySelectorAll(
+ `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+ );
+
+ existingArcs.forEach(el => el.remove());
+
+ ptGrp.removeAttribute('style');
+ svg.removeEventListener('mousemove', positionFiringArc);
+ };
+
+ ptGrp.style.pointerEvents = 'none';
+ svg.addEventListener('mousemove', positionFiringArc);
+ firingArc.addEventListener('click', firingArcPlacementListener);
+ firingArc.addEventListener('contextmenu', cancelFiringArcPlacement);
+ }
+ }
+ }));
+
+ svg.addEventListener('wheel', e => {
+ e.preventDefault();
+
+ const pt = new DOMPoint(e.clientX, e.clientY),
+ svgP = pt.matrixTransform(svg.getScreenCTM().inverse());
+
+ let { x, y, width, height } = svg.viewBox.baseVal,
+
+ widthDelta = width * 0.25,
+ heightDelta = height * 0.25,
+
+ xChange = (svgP.x - x) / width * widthDelta,
+ yChange = (svgP.y - y) / height * heightDelta,
+
+ widthChange = (1 - ((svgP.x - x) / width)) * widthDelta,
+ heightChange = (1 - ((svgP.y - y) / height)) * heightDelta,
+
+ newX = parseInt(e.deltaY < 0 ? x + xChange : x - xChange),
+ newWidth = parseInt(e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange),
+
+ newY = parseInt(e.deltaY < 0 ? y + yChange : y - yChange),
+ newHeight = parseInt(e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange);
+
+ let vb = `${newX} ${newY} ${newWidth} ${newHeight}`
+
+ // TODO attribute change event?
+ localStorage.setItem('viewBox', vb);
+ svg.setAttributeNS(null, 'viewBox', vb);
+ }, { passive: false });
+
+ svg.addEventListener('pointerdown', e => {
+ e.preventDefault();
+
+ const minPanDistanceThreshold = 5;
+
+ let dist, ctm,
+ pan = false,
+ { x, y, width, height } = svg.viewBox.baseVal,
+ startPt = new DOMPoint(e.clientX, e.clientY),
+ movePt = new DOMPoint();
+
+ function pointerMove(e) {
+ movePt.x = e.clientX;
+ movePt.y = e.clientY;
+
+ if (!pan) {
+ dist = Math.sqrt((movePt.x - startPt.x)**2 + (movePt.y - startPt.y)**2);
+
+ if (dist >= minPanDistanceThreshold) {
+ pan = true;
+ svg.setPointerCapture(e.pointerId);
+ startPt.x = e.clientX;
+ startPt.y = e.clientY;
+ }
+ }
+
+ if (pan) {
+ ctm = svg.getScreenCTM().inverse();
+
+ const [svgStartPt, svgMovePt] = [startPt, movePt].map(p => p.matrixTransform(ctm)),
+ moveX = parseInt(svgStartPt.x - svgMovePt.x + x),
+ moveY = parseInt(svgStartPt.y - svgMovePt.y + y);
+
+ let vb = `${moveX} ${moveY} ${width} ${height}`;
+
+ localStorage.setItem('viewBox', vb);
+ svg.setAttributeNS(null, 'viewBox', vb);
+ }
+ }
+
+ function pointerUp(e) {
+ svg.removeEventListener('pointermove', pointerMove);
+ svg.removeEventListener('pointerup', pointerUp);
+ }
+
+ svg.addEventListener('pointermove', pointerMove);
+ svg.addEventListener('pointerup', pointerUp);
+ }, { passive: false });
+
+ recordSheetVisibility.addEventListener('input', e => {
+ let divs = document.querySelectorAll('#content div');
+
+ divs.forEach(d => {
+ if (recordSheetVisibility.checked) {
+ d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
+ } else {
+ d.style.display = 'none';
+ }
+ });
+ });
+
+ document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {
+ let clipPaths = svg.querySelectorAll(`clipPath[data-troop-allegiance="${el.dataset.allegiance}"]`);
+
+ clipPaths.forEach(cp => cp.style.display = el.checked ? 'none' : '');
+ }));
+
+ document.getElementById('toggle-prone-counter').addEventListener('input', function(e) {
+ let selected = RecordSheet.getSelected();
+
+ if (selected) {
+ let template = q(`g#${selected.dataset.troopAllegiance}-${selected.dataset.troopNumber}`);
+
+ if (this.checked) {
+ let counter = document.createElementNS(svgns, 'use');
+ counter.setAttributeNS(null, 'href', '#counter-prone');
+ template.appendChild(counter);
+ } else {
+ template.querySelector('[href="#counter-prone"]').remove();
+ }
+ }
+ });
+
+ 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
+ Set firing arc:
+
+
+
+
+ Prone: + Turn: + + 0 + ◓ + ◒ + +
+
+ + Prone: + Turn: + + 0 + ◓ + ◒ + +
+
+
+
+
+
+ Davion
+
+
+
+
+
+ 1
+ Rifle
+ 4L
+ 1-27
+ 28-75
+
+
+ 2
+ Rifle
+ 4L
+ 1-27
+ 28-75
+
+
+ 3
+ SMG
+ 3L
+ 1-15
+ 16-25
+
+
+ 4
+ SMG
+ 3L
+ 1-15
+ 16-25
+
+
+ 5
+ SMG
+ 3L
+ 1-15
+ 16-25
+
+
+ 6
+ SMG
+ 3L
+ 1-15
+ 16-25
+
+
+ 7
+ Blazer
+ 4L
+ 1-17
+ 18-105
+
+
+
+
+
+ Liao
+
+
+
+
+
+ 1
+ Rifle
+ 4L
+ 1-27
+ 28-75
+
+
+ 2
+ Rifle
+ 4L
+ 1-27
+ 28-75
+
+
+ 3
+ SMG
+ 3L
+ 1-15
+ 16-25
+
+
+ 4
+ SMG
+ 3L
+ 1-15
+ 16-25
+
+
+ 5
+ SMG
+ 3L
+ 1-15
+ 16-25
+
+
+ 6
+ SMG
+ 3L
+ 1-15
+ 16-25
+
+
+ 7
+ Blazer
+ 4L
+ 1-17
+ 18-105
+
+