ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove selected counter when double-clicked

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-24 13:58:45 -07:00
parent 3f3af09f2b
commit 525ab34237
3 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/map.css
View File

@ -128,11 +128,11 @@ text.counter, #troop-counter text {
user-select: none;
}
polygon.firing-arc[data-troop-allegiance="davion"] {
polygon.firing-arc[data-allegiance="davion"] {
fill: red;
}
polygon.firing-arc[data-troop-allegiance="liao"] {
polygon.firing-arc[data-allegiance="liao"] {
fill: green;
}

22
src/modules/firingArc.js
View File

@ -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());

27
src/modules/game.js
View File

@ -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.