Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-24 15:08:30 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-24 15:08:30 -0700
commitf215ef7920aa686276ffb2aeb24df3340774619f (patch)
tree22e1a832d789a0adc9a220c0239200e0ba2eb291
parentbdeddc71eb64c60e8a6db64cb401b6e3a5f5571a (diff)
Remove unused files
Diffstat
-rw-r--r--damage_block.css64
-rw-r--r--index.html388
-rw-r--r--index.js1171
-rw-r--r--soldier_record_block.css35
-rw-r--r--style.css437
5 files changed, 0 insertions, 2095 deletions
diff --git a/damage_block.css b/damage_block.css
deleted file mode 100644
index f050e36..0000000
--- a/damage_block.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.damage-selector, .damage-effect-indicator, label {
- width: 20px;
-}
-
-.damage-selector, .damage-effect-indicator {
- height: 30px;
-}
-
-.damage-selector {
- margin: 0;
- padding: 0;
- border: 1px solid black;
- display: inline-block;
-}
-
-.damage-effect-indicator {
- position: absolute;
- margin: 0;
- padding: 0;
- display: block;
- pointer-events: none;
- font-family: monospace;
-}
-
-.damage-selector.clear {
- background-color: white;
-}
-
-.damage-selector.bruise {
- background-color: orange;
-}
-
-.damage-selector.lethal {
- background-color: red;
-}
-
-label input[type="radio"] {
- position: absolute;
- opacity: 0;
- margin: 0;
- padding: 0;
-}
-
-label {
- display: none;
- margin: 0 auto;
- padding: 0;
-}
-
-label:first-of-type {
- display: block;
-}
-
-label:has(input:checked) {
- display: none;
-}
-
-label:has(+ label input:checked) {
- display: none;
-}
-
-label:has(input:checked) + label {
- display: block;
-}
diff --git a/index.html b/index.html
deleted file mode 100644
index a317b49..0000000
--- a/index.html
+++ /dev/null
@@ -1,388 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <title>Infantry Combat Solo Basic</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <template id="damage-block">
- <link rel="stylesheet" href="damage_block.css">
-
- <slot name="block-number"></slot>
- <span class="damage-effect-indicator">
- <slot name="firing-modifier"></slot><br>
- <slot name="movement-points"></slot>
- </span>
- <label>
- <input type="radio" name="damage" checked>
- <span class="damage-selector lethal"></span>
- </label>
- <label>
- <input type="radio" name="damage">
- <span class="damage-selector clear"></span>
- </label>
- <label>
- <input type="radio" name="damage">
- <span class="damage-selector bruise"></span>
- </label>
- </template>
-
- <template id="soldier-record-block">
- <link rel="stylesheet" href="soldier_record_block.css">
-
- <p class="physical-status-track">
- <span is="damage-block">
- <span slot="block-number">10</span>
- <span slot="movement-points">8</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">9</span>
- <span slot="movement-points">8</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">8</span>
- <span slot="movement-points">8</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">7</span>
- <span slot="movement-points">8</span>
- <span slot="firing-modifier">+1</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">6</span>
- <span slot="movement-points">7</span>
- <span slot="firing-modifier">+1</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">5</span>
- <span slot="movement-points">7</span>
- <span slot="firing-modifier">+2</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">4</span>
- <span slot="movement-points">6</span>
- <span slot="firing-modifier">+2</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">3</span>
- <span slot="movement-points">6</span>
- <span slot="firing-modifier">+2</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">2</span>
- <span slot="movement-points">5</span>
- <span slot="firing-modifier">+3</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">1</span>
- <span slot="movement-points">4</span>
- <span slot="firing-modifier">+3</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">0</span>
- <span slot="movement-points">None</span>
- <span slot="firing-modifier">0</span>
- </span>
- <span is="damage-block">
- <span slot="block-number">DEAD</span>
- </span>
- </p>
-
- <p><span>Troop Number</span> <slot name="troop-number">1</slot></p>
- <p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
- <ul>
- <li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>
- <li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li>
- <li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li>
- </ul>
- <p>
- <span>Hand Grenades</span>
- <input type="number" min="0" max="4" value="4" />
- </p>
- </template>
-
- <div id="map-container">
- <div id="toggle-firing-arc-vis">
- <div>davion</div>
- <input type="checkbox" data-allegiance="davion" />
- <div>liao</div>
- <input type="checkbox" data-allegiance="liao" />
- </div>
-
- <div id="panel">
- <fieldset name="point">
- <legend>hex</legend>
- <div>
- <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
- <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
- <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
- <label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label>
- <label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label>
- </div>
- </fieldset>
- <fieldset name="points">
- <legend>grid</legend>
- <div>
- <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
- <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
- <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
- <label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label>
- <label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label>
- </div>
- </fieldset>
- <fieldset name="map2">
- <legend>map2</legend>
- <div>
- <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
- <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
- <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
- <label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label>
- <label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label>
- </div>
- </fieldset>
- <fieldset name="map3">
- <legend>map3</legend>
- <div>
- <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
- <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
- <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
- <label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label>
- <label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label>
- </div>
- </fieldset>
- </div>
-
- <svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg">
- <defs>
- <polygon id="point" 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="davion-1" class="troop-counter"><use href="#t-1" /></g>
- <g id="davion-2" class="troop-counter"><use href="#t-2" /></g>
- <g id="davion-3" class="troop-counter"><use href="#t-3" /></g>
- <g id="davion-4" class="troop-counter"><use href="#t-4" /></g>
- <g id="davion-5" class="troop-counter"><use href="#t-5" /></g>
- <g id="davion-6" class="troop-counter"><use href="#t-6" /></g>
- <g id="davion-7" class="troop-counter"><use href="#t-7" /></g>
-
- <g id="liao-1" class="troop-counter"><use href="#t-1" /></g>
- <g id="liao-2" class="troop-counter"><use href="#t-2" /></g>
- <g id="liao-3" class="troop-counter"><use href="#t-3" /></g>
- <g id="liao-4" class="troop-counter"><use href="#t-4" /></g>
- <g id="liao-5" class="troop-counter"><use href="#t-5" /></g>
- <g id="liao-6" class="troop-counter"><use href="#t-6" /></g>
- <g id="liao-7" class="troop-counter"><use href="#t-7" /></g>
-
- <image id="counter-prone" href="counter_prone.jpg" width="10px" />
- <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="-1" y="-1" width="2287" height="3087" />
-
- <g id="image-maps">
- <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" />
- <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" />
- </g>
-
- <g id="firing-arcs">
- <g id="shapes"></g>
- <g id="lines"></g>
- </g>
-
- <g id="grid">
- <g id="points"></g>
- <g id="counters"></g>
- </g>
-
- <image href="rendered_numbers.png" x="0" y="-46" width="182" height="22" opacity="0.5" />
-
- <use href="#n1" x="1" y="-40" opacity="0.5" />
- <use href="#n2" x="19" y="-40" opacity="0.5" />
- <use href="#n3" x="36" y="-40" opacity="0.5" />
- <use href="#n4" x="54" y="-40" opacity="0.5" />
- </svg>
-
- <div id="status">
- <span id="hex-counter">Distance: <span id="hex-count">-</span></span>
- </div>
- </div>
-
- <div id="content">
- <input type="checkbox" class="visible" checked />
- <div>
- Set firing arc:
- <button type="button" class="set-firing-arc" data-size="small">
- <img src="firing_arc_small.png" height="12" /> 2 MP
- </button>
- <button type="button" class="set-firing-arc" data-size="medium">
- <img src="firing_arc_medium.png" height="12" /> 4 MP
- </button>
- <button type="button" class="set-firing-arc" data-size="large">
- <img src="firing_arc_large.png" height="12" /> 6 MP
- </button>
- <br>
- Prone: <input type="checkbox" id="toggle-prone-counter" />
- Turn:
- <span id="turn-count" data-update="0">
- <span name="count">0</span>
- <span class="inning-top">◓</span>
- <span class="inning-bottom">◒</span>
- </span>
- </div>
-
- <div id="record-sheet">
- <div>
- <!-- <img class="logo" src="logo-davion.png" /> -->
- <p>
- <strong>Davion</strong>
- <button type="button" class="end-move" data-allegiance="davion">
- End Movement
- </button>
- <button type="button" class="end-turn" data-allegiance="liao">
- End Turn
- </button>
- <br>
- <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
- 17th Kestral Mechanized Infantry -->
- </p>
- <div is="soldier-record-block" class="soldier-record selected" data-troop-number="1" data-troop-allegiance="davion">
- <span slot="troop-number">1</span>
- <span slot="primary-weapon-type">Rifle</span>
- <span slot="primary-weapon-damage">4L</span>
- <span slot="primary-weapon-range-short">1-27</span>
- <span slot="primary-weapon-range-long">28-75</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
- <span slot="troop-number">2</span>
- <span slot="primary-weapon-type">Rifle</span>
- <span slot="primary-weapon-damage">4L</span>
- <span slot="primary-weapon-range-short">1-27</span>
- <span slot="primary-weapon-range-long">28-75</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
- <span slot="troop-number">3</span>
- <span slot="primary-weapon-type">SMG</span>
- <span slot="primary-weapon-damage">3L</span>
- <span slot="primary-weapon-range-short">1-15</span>
- <span slot="primary-weapon-range-long">16-25</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="davion">
- <span slot="troop-number">4</span>
- <span slot="primary-weapon-type">SMG</span>
- <span slot="primary-weapon-damage">3L</span>
- <span slot="primary-weapon-range-short">1-15</span>
- <span slot="primary-weapon-range-long">16-25</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="davion">
- <span slot="troop-number">5</span>
- <span slot="primary-weapon-type">SMG</span>
- <span slot="primary-weapon-damage">3L</span>
- <span slot="primary-weapon-range-short">1-15</span>
- <span slot="primary-weapon-range-long">16-25</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="davion">
- <span slot="troop-number">6</span>
- <span slot="primary-weapon-type">SMG</span>
- <span slot="primary-weapon-damage">3L</span>
- <span slot="primary-weapon-range-short">1-15</span>
- <span slot="primary-weapon-range-long">16-25</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="davion">
- <span slot="troop-number">7</span>
- <span slot="primary-weapon-type">Blazer</span>
- <span slot="primary-weapon-damage">4L</span>
- <span slot="primary-weapon-range-short">1-17</span>
- <span slot="primary-weapon-range-long">18-105</span>
- </div>
- </div>
- <div>
- <!-- <img class="logo" src="logo-liao.png" /> -->
- <p>
- <strong>Liao</strong>
- <button type="button" class="end-move" data-allegiance="liao">
- End Movement
- </button>
- <button type="button" class="end-turn" data-allegiance="davion">
- End Turn
- </button>
- <br>
- <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
- Aldebaran Home Guard -->
- </p>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
- <span slot="troop-number">1</span>
- <span slot="primary-weapon-type">Rifle</span>
- <span slot="primary-weapon-damage">4L</span>
- <span slot="primary-weapon-range-short">1-27</span>
- <span slot="primary-weapon-range-long">28-75</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
- <span slot="troop-number">2</span>
- <span slot="primary-weapon-type">Rifle</span>
- <span slot="primary-weapon-damage">4L</span>
- <span slot="primary-weapon-range-short">1-27</span>
- <span slot="primary-weapon-range-long">28-75</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
- <span slot="troop-number">3</span>
- <span slot="primary-weapon-type">SMG</span>
- <span slot="primary-weapon-damage">3L</span>
- <span slot="primary-weapon-range-short">1-15</span>
- <span slot="primary-weapon-range-long">16-25</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="liao">
- <span slot="troop-number">4</span>
- <span slot="primary-weapon-type">SMG</span>
- <span slot="primary-weapon-damage">3L</span>
- <span slot="primary-weapon-range-short">1-15</span>
- <span slot="primary-weapon-range-long">16-25</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="liao">
- <span slot="troop-number">5</span>
- <span slot="primary-weapon-type">SMG</span>
- <span slot="primary-weapon-damage">3L</span>
- <span slot="primary-weapon-range-short">1-15</span>
- <span slot="primary-weapon-range-long">16-25</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="liao">
- <span slot="troop-number">6</span>
- <span slot="primary-weapon-type">SMG</span>
- <span slot="primary-weapon-damage">3L</span>
- <span slot="primary-weapon-range-short">1-15</span>
- <span slot="primary-weapon-range-long">16-25</span>
- </div>
- <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="liao">
- <span slot="troop-number">7</span>
- <span slot="primary-weapon-type">Blazer</span>
- <span slot="primary-weapon-damage">4L</span>
- <span slot="primary-weapon-range-short">1-17</span>
- <span slot="primary-weapon-range-long">18-105</span>
- </div>
- </div>
- </div>
- </div>
-
- <script src="soldier_record_block.js"></script>
- <script src="index.js"></script>
- </body>
-</html> \ No newline at end of file
diff --git a/index.js b/index.js
deleted file mode 100644
index 2b13004..0000000
--- a/index.js
+++ /dev/null
@@ -1,1171 +0,0 @@
-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;
-}
-
-let getPointCoords = (x, y) => {
- let point = document.querySelector(`[data-x="${x}"][data-y="${y}"]`);
-
- return [point.x.baseVal.value, point.y.baseVal.value]
-};
-
-function positionFiringArc(e) {
- let activeFiringArc = document.querySelector('polygon.firing-arc.active');
-
- // TODO: handle exactly horizontal and vertical lines
-
- if (activeFiringArc) {
- let activeFiringArcOutline = document.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`);
- board = document.getElementById('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);
- }
-}
-
-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;
-}
-
-const svgns = "http://www.w3.org/2000/svg",
- svg = document.querySelector('svg'),
- hex = document.getElementById('point'),
- ptGrp = document.getElementById('points'),
- cntrGrp = document.getElementById('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))
- }
-
-let prevVb = localStorage.getItem('viewBox');
-
-if (prevVb) {
- svg.setAttributeNS(null, 'viewBox', prevVb);
-}
-
-let info = document.getElementById('status');
-
-Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(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());
- });
-});
-
-function ptGrpToSvgPt(x, y) {
- let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g),
- mtx = new DOMMatrix(transProp || ''),
- pt = new DOMPoint(x, y),
- svgP = pt.matrixTransform(mtx);
-
- return svgP;
-}
-
-const grid = document.getElementById('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 = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`);
-
- if (cp) {
- cp.style.display = 'none';
- }
- },
-
- pointerOut = function() {
- let { troopNumber, troopAllegiance } = this.dataset;
- cp = document.getElementById(`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);
- document.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 !!document.querySelector(selector);
- };
-};
-
-const RecordSheet = new function() {
- let clipUnclippedFiringArcs = function() {
- let unclipped = document.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) {
- document.getElementById(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 = document.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]) => {
- var cx = x * INRADIUS * 2 + (isEven(index) ? INRADIUS : 0),
- cy = y * 3 / 2 * CIRCUMRADIUS,
- point = document.createElementNS(svgns, 'use'),
- group = document.createElementNS(svgns, 'g');
-
- cx = parseFloat(cx.toFixed(1));
- cy = parseFloat(cy.toFixed(1));
-
- point.setAttributeNS(null, 'href', `#point`);
- // point.setAttributeNS(null, 'x', cx);
- // point.setAttributeNS(null, 'y', cy);
-
- point.setAttributeNS(null, 'x', 0);
- point.setAttributeNS(null, 'y', 0);
-
- point.dataset.x = x;
- point.dataset.y = y;
-
- group.setAttributeNS(null, 'transform', `translate(${cx} ${cy})`);
- group.dataset.x = x;
- group.dataset.y = y;
-
- group.appendChild(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 = document.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(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 = document.querySelectorAll(
- `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
- );
-
- existingArcs.forEach(el => el.remove());
-
- if (counter) {
- let arcLayer = document.getElementById('shapes');
- let outlineLayer = document.getElementById('lines');
- let arcContainer = document.getElementById('firing-arcs');
-
- let [x, y] = counter.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
-
- let grid = document.getElementById('grid');
- 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 => {
- document.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 = document.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);
-});
-
-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);
-});
-
-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 debug() {
- function drawLine(x1, y1, x2, y2) {
- let start = ptGrp.querySelector(`[data-x="${x1}"][data-y="${y1}"]`);
- let end = ptGrp.querySelector(`[data-x="${x2}"][data-y="${y2}"]`);
- let [startX, startY] = [start.x.baseVal.value, start.y.baseVal.value];
- let [endX, endY] = [end.x.baseVal.value, end.y.baseVal.value];
-
- let startP = new DOMPoint(startX, startY);
- let endP = new DOMPoint(endX, endY);
-
- let tStart = startP.matrixTransform(mtx);
- let tEnd = endP.matrixTransform(mtx);
-
- let line = document.createElementNS(svgns, 'line');
- line.setAttributeNS(null, 'x1', tStart.x);
- line.setAttributeNS(null, 'y1', tStart.y);
- line.setAttributeNS(null, 'x2', tEnd.x);
- line.setAttributeNS(null, 'y2', tEnd.y);
- line.classList.add('debug');
-
- line.setAttributeNS(null, 'stroke', 'gold');
- line.setAttributeNS(null, 'stroke-width', 2);
- svg.appendChild(line);
-
- return line;
- }
-
- let transProp = getComputedStyle(ptGrp).transform.match(/-?\d+\.?\d*/g),
- mtx = new DOMMatrix(transProp || ''),
- circR = (new DOMPoint(0, 3 * CIRCUMRADIUS / 2)).matrixTransform(mtx).y * 2 / 3;
-})(); \ No newline at end of file
diff --git a/soldier_record_block.css b/soldier_record_block.css
deleted file mode 100644
index 47bf583..0000000
--- a/soldier_record_block.css
+++ /dev/null
@@ -1,35 +0,0 @@
-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/style.css b/style.css
deleted file mode 100644
index 088cde4..0000000
--- a/style.css
+++ /dev/null
@@ -1,437 +0,0 @@
-body {
- margin: 0;
- display: flex;
- overflow: hidden;
-}
-
-#map-container {
- flex-basis: 100%;
- position: relative;
- max-height: 100vh;
-}
-
-svg {
- 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