From 9e653d068141fa2a969bdc440a1b0a1a63c620c6 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Thu, 4 Apr 2024 09:04:05 -0700
Subject: Add prone counters
---
index.js | 43 ++++++++++++++++++++++++++++++++++++-------
1 file changed, 36 insertions(+), 7 deletions(-)
(limited to 'index.js')
diff --git a/index.js b/index.js
index 38ca8c6..dd6599e 100644
--- a/index.js
+++ b/index.js
@@ -444,12 +444,15 @@ const Counter = new function() {
this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
this.unSelect();
- let queriedCounter = container.querySelector(selector(troopNumber, troopAllegiance));
+ let counterAndClones = container.querySelectorAll(selector(troopNumber, troopAllegiance));
- if (queriedCounter) {
- queriedCounter.classList.add(selectedClass);
- queriedCounter.style.pointerEvents = 'auto';
- }
+ counterAndClones.forEach(el => {
+ el.style.pointerEvents = 'auto';
+
+ if (!el.classList.contains('clone')) {
+ el.classList.add(selectedClass);
+ }
+ });
};
this.unSelect = function() {
@@ -524,7 +527,7 @@ const Counter = new function() {
} else {
counter = document.createElementNS(svgns, 'use'),
- counter.setAttributeNS(null, 'href', `#t-${troopNumber}`);
+ 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'));
@@ -563,6 +566,12 @@ const Counter = new function() {
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() {
@@ -580,6 +589,7 @@ const RecordSheet = new function() {
if (selected) {
selected.classList.remove('selected');
+ document.getElementById('toggle-prone-counter').checked = false;
}
clipUnclippedFiringArcs();
@@ -591,10 +601,13 @@ const RecordSheet = new function() {
};
this.select = function(el) {
- let { troopNumber, troopAllegiance } = el.dataset;
+ let { troopNumber, troopAllegiance } = el.dataset,
+ proneStatus = Counter.hasProne(troopNumber, troopAllegiance);
+
this.unSelect();
el.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'));
};
@@ -934,6 +947,22 @@ document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEv
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}"]`);
--
cgit v1.2.3