From 525ab3423728a0485c6b64cca00eed59990ddcfc Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 24 Apr 2024 13:58:45 -0700
Subject: Remove selected counter when double-clicked
---
src/modules/firingArc.js | 22 +++++++++++-----------
src/modules/game.js | 27 +++++++++++++++++++++------
2 files changed, 32 insertions(+), 17 deletions(-)
(limited to 'src/modules')
diff --git a/src/modules/firingArc.js b/src/modules/firingArc.js
index b319427..109e04f 100644
--- a/src/modules/firingArc.js
+++ b/src/modules/firingArc.js
@@ -56,7 +56,7 @@ function position(e) {
// TODO: handle exactly horizontal and vertical lines
if (activeFiringArc) {
- let activeFiringArcOutline = this.querySelector(`#lines polygon[data-troop-number="${activeFiringArc.dataset.troopNumber}"][data-troop-allegiance="${activeFiringArc.dataset.troopAllegiance}"]`),
+ let activeFiringArcOutline = this.querySelector(`#lines polygon[data-number="${activeFiringArc.dataset.number}"][data-allegiance="${activeFiringArc.dataset.allegiance}"]`),
board = this.querySelector('#image-maps'),
{ width, height } = board.getBBox(),
pt = new DOMPoint(e.clientX, e.clientY),
@@ -169,11 +169,11 @@ export default class FiringArc {
this.svg = svg;
}
- set(size, troopAllegiance, troopNumber, { x, y }) {
+ set(size, allegiance, number, { x, y }) {
const svgns = "http://www.w3.org/2000/svg";
let existingArcs = this.svg.querySelectorAll(
- `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+ `#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"]`
);
existingArcs.forEach(el => el.remove());
@@ -193,13 +193,13 @@ export default class FiringArc {
let firingArcOutline = document.createElementNS(svgns, 'polygon');
firingArc.classList.add('firing-arc', 'active');
- firingArc.dataset.troopNumber = troopNumber;
- firingArc.dataset.troopAllegiance = troopAllegiance;
+ firingArc.dataset.number = number;
+ firingArc.dataset.allegiance = allegiance;
firingArc.dataset.size = size;
firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
- firingArcOutline.dataset.troopNumber = troopNumber;
- firingArcOutline.dataset.troopAllegiance = troopAllegiance;
+ firingArcOutline.dataset.number = number;
+ firingArcOutline.dataset.allegiance = allegiance;
firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
let clipShape = document.createElementNS(svgns, 'circle');
@@ -208,9 +208,9 @@ export default class FiringArc {
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.setAttributeNS(null, 'id', `clip-path-${allegiance}-${number}`);
+ clipPath.dataset.number = number;
+ clipPath.dataset.allegiance = allegiance;
clipPath.appendChild(clipShape);
arcContainer.appendChild(clipPath);
@@ -232,7 +232,7 @@ export default class FiringArc {
firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
let existingArcs = this.svg.querySelectorAll(
- `#firing-arcs [data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`
+ `#firing-arcs [data-number="${number}"][data-allegiance="${allegiance}"]`
);
existingArcs.forEach(el => el.remove());
diff --git a/src/modules/game.js b/src/modules/game.js
index 237e346..e40a8a2 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -51,7 +51,7 @@ export default class Game {
}
getExistingArcs(al, n) {
- return this.svg.querySelectorAll(`#firing-arcs polygon[data-troop-number="${n}"][data-troop-allegiance="${al}"]`);
+ return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${n}"][data-allegiance="${al}"]`);
}
getUnclippedFiringArcs() {
@@ -109,7 +109,7 @@ export default class Game {
}
endTurn(allegiance) {
- const selector = `#firing-arcs [data-troop-allegiance="${allegiance}"]`;
+ const selector = `#firing-arcs [data-allegiance="${allegiance}"]`;
this.svg.querySelectorAll(selector).forEach(el => el.remove());
}
@@ -119,7 +119,7 @@ export default class Game {
toggleFiringArcVisibility(allegiance) {
const vis = this.#firingArcVisibility[allegiance],
- clipPaths = this.svg.querySelectorAll(`clipPath[data-troop-allegiance="${allegiance}"]`);
+ clipPaths = this.svg.querySelectorAll(`clipPath[data-allegiance="${allegiance}"]`);
clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
this.#firingArcVisibility[allegiance] = !vis;
@@ -129,9 +129,9 @@ export default class Game {
let unclipped = this.getUnclippedFiringArcs();
unclipped.forEach(el => {
- const { troopNumber, troopAllegiance } = el.dataset,
- clipPathId = `clip-path-${troopAllegiance}-${troopNumber}`,
- isVisible = this.#firingArcVisibility[troopAllegiance];
+ const { number, allegiance } = el.dataset,
+ clipPathId = `clip-path-${allegiance}-${number}`,
+ isVisible = this.#firingArcVisibility[allegiance];
if (isVisible) {
this.svg.querySelector(`#${clipPathId}`).style.display = 'none';
@@ -254,6 +254,21 @@ export default class Game {
}
});
+
+ cell.addEventListener('dblclick', e => {
+ const toPlace = this.placing.pop(),
+ occupant = this.getCellOccupant(cell);
+
+ if (toPlace == occupant) {
+ const { number, allegiance } = toPlace.dataset,
+ selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`;
+
+ this.svg.querySelectorAll(selector).forEach(el => el.remove());
+ }
+
+ this.unSelect();
+ });
+
// Logic for this event:
// If there's a locked sightline, unlock it. Otherwise, if there's an
// active sightline, lock it.
--
cgit v1.2.3