From e8f0dde6da3deb07b507cd34663b815754a98da1 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 5 Apr 2024 16:19:30 -0700
Subject: Select soldier by clicking on their counter; allow locking on another
counter vs the hex
---
index.js | 56 ++++++++++++++++++++++++++++----------------------------
style.css | 2 +-
2 files changed, 29 insertions(+), 29 deletions(-)
diff --git a/index.js b/index.js
index a36291b..80fdd4f 100644
--- a/index.js
+++ b/index.js
@@ -459,15 +459,11 @@ const Counter = new function() {
this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
this.unSelect();
- let counterAndClones = container.querySelectorAll(selector(troopNumber, troopAllegiance));
+ let counter = container.querySelector(`${selector(troopNumber, troopAllegiance)}:not(.clone)`);
- counterAndClones.forEach(el => {
- el.style.pointerEvents = 'auto';
-
- if (!el.classList.contains('clone')) {
- el.classList.add(selectedClass);
- }
- });
+ if (counter) {
+ counter.classList.add(selectedClass);
+ }
};
this.unSelect = function() {
@@ -633,9 +629,8 @@ const RecordSheet = new function() {
let { troopNumber, troopAllegiance } = el.dataset,
proneStatus = Counter.hasProne(troopNumber, troopAllegiance);
- this.unSelect();
-
- el.classList.add('selected');
+ 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'));
@@ -667,15 +662,19 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
group.appendChild(point);
- group.addEventListener('pointerover', e => {
- // console.log('group pointer over')
- group.classList.add('hover');
- });
-
group.addEventListener('pointerout', e => {
group.classList.remove('hover');
});
+ group.addEventListener('click', e => {
+ let cl = e.target.classList;
+
+ if (cl.contains('counter') && !cl.contains('clone')) {
+ RecordSheet.select(e.target);
+ Counter.select(e.target);
+ }
+ });
+
point.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected');
let existingOccupant =
@@ -694,7 +693,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
}
});
- point.addEventListener('contextmenu', e => {
+ group.addEventListener('contextmenu', e => {
e.preventDefault();
let sl = svg.querySelector('.sight-line');
@@ -708,8 +707,9 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
}
});
- point.addEventListener('pointerover', e => {
- // console.log('pointerover', this);
+ group.addEventListener('pointerover', e => {
+ group.classList.add('hover');
+
let selected = RecordSheet.getSelected();
if (selected) {
@@ -796,16 +796,16 @@ document.querySelectorAll('.soldier-record').forEach(el =>
})
);
-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');
+// 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'));
- }
-});
+// 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();
diff --git a/style.css b/style.css
index 438ad62..4a06a9c 100644
--- a/style.css
+++ b/style.css
@@ -238,12 +238,12 @@ g#points g.hover use[href="#point"] {
}
g#points g.hover use.counter {
- stroke-width: 2px;
r: 7px;
}
g#points g.hover use.counter:not(.clone) {
stroke: orange;
+ stroke-width: 2px;
}
g#points use.counter[data-troop-allegiance="davion"] {
--
cgit v1.2.3