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; user-select: none;
} }
polygon.firing-arc[data-troop-allegiance="davion"] { polygon.firing-arc[data-allegiance="davion"] {
fill: red; fill: red;
} }
polygon.firing-arc[data-troop-allegiance="liao"] { polygon.firing-arc[data-allegiance="liao"] {
fill: green; fill: green;
} }

22
src/modules/firingArc.js
View File

@ -56,7 +56,7 @@ function position(e) {
// TODO: handle exactly horizontal and vertical lines // TODO: handle exactly horizontal and vertical lines
if (activeFiringArc) { 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'), board = this.querySelector('#image-maps'),
{ width, height } = board.getBBox(), { width, height } = board.getBBox(),
pt = new DOMPoint(e.clientX, e.clientY), pt = new DOMPoint(e.clientX, e.clientY),
@ -169,11 +169,11 @@ export default class FiringArc {
this.svg = svg; this.svg = svg;
} }
set(size, troopAllegiance, troopNumber, { x, y }) { set(size, allegiance, number, { x, y }) {
const svgns = "http://www.w3.org/2000/svg"; const svgns = "http://www.w3.org/2000/svg";
let existingArcs = this.svg.querySelectorAll( 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()); existingArcs.forEach(el => el.remove());
@ -193,13 +193,13 @@ export default class FiringArc {
let firingArcOutline = document.createElementNS(svgns, 'polygon'); let firingArcOutline = document.createElementNS(svgns, 'polygon');
firingArc.classList.add('firing-arc', 'active'); firingArc.classList.add('firing-arc', 'active');
firingArc.dataset.troopNumber = troopNumber; firingArc.dataset.number = number;
firingArc.dataset.troopAllegiance = troopAllegiance; firingArc.dataset.allegiance = allegiance;
firingArc.dataset.size = size; firingArc.dataset.size = size;
firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`); firingArc.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
firingArcOutline.dataset.troopNumber = troopNumber; firingArcOutline.dataset.number = number;
firingArcOutline.dataset.troopAllegiance = troopAllegiance; firingArcOutline.dataset.allegiance = allegiance;
firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`); firingArcOutline.setAttributeNS(null, 'points', `${pivotPoint} ${pivotPoint} ${pivotPoint}`);
let clipShape = document.createElementNS(svgns, 'circle'); let clipShape = document.createElementNS(svgns, 'circle');
@ -208,9 +208,9 @@ export default class FiringArc {
clipShape.setAttributeNS(null, 'r', 100); clipShape.setAttributeNS(null, 'r', 100);
let clipPath = document.createElementNS(svgns, 'clipPath'); let clipPath = document.createElementNS(svgns, 'clipPath');
clipPath.setAttributeNS(null, 'id', `clip-path-${troopAllegiance}-${troopNumber}`); clipPath.setAttributeNS(null, 'id', `clip-path-${allegiance}-${number}`);
clipPath.dataset.troopNumber = troopNumber; clipPath.dataset.number = number;
clipPath.dataset.troopAllegiance = troopAllegiance; clipPath.dataset.allegiance = allegiance;
clipPath.appendChild(clipShape); clipPath.appendChild(clipShape);
arcContainer.appendChild(clipPath); arcContainer.appendChild(clipPath);
@ -232,7 +232,7 @@ export default class FiringArc {
firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement); firingArc.removeEventListener('contextmenu', cancelFiringArcPlacement);
let existingArcs = this.svg.querySelectorAll( 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()); existingArcs.forEach(el => el.remove());

27
src/modules/game.js
View File

@ -51,7 +51,7 @@ export default class Game {
} }
getExistingArcs(al, n) { 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() { getUnclippedFiringArcs() {
@ -109,7 +109,7 @@ export default class Game {
} }
endTurn(allegiance) { 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()); this.svg.querySelectorAll(selector).forEach(el => el.remove());
} }
@ -119,7 +119,7 @@ export default class Game {
toggleFiringArcVisibility(allegiance) { toggleFiringArcVisibility(allegiance) {
const vis = this.#firingArcVisibility[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' : ''); clipPaths.forEach(cp => cp.style.display = !vis ? 'none' : '');
this.#firingArcVisibility[allegiance] = !vis; this.#firingArcVisibility[allegiance] = !vis;
@ -129,9 +129,9 @@ export default class Game {
let unclipped = this.getUnclippedFiringArcs(); let unclipped = this.getUnclippedFiringArcs();
unclipped.forEach(el => { unclipped.forEach(el => {
const { troopNumber, troopAllegiance } = el.dataset, const { number, allegiance } = el.dataset,
clipPathId = `clip-path-${troopAllegiance}-${troopNumber}`, clipPathId = `clip-path-${allegiance}-${number}`,
isVisible = this.#firingArcVisibility[troopAllegiance]; isVisible = this.#firingArcVisibility[allegiance];
if (isVisible) { if (isVisible) {
this.svg.querySelector(`#${clipPathId}`).style.display = 'none'; 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: // Logic for this event:
// If there's a locked sightline, unlock it. Otherwise, if there's an // If there's a locked sightline, unlock it. Otherwise, if there's an
// active sightline, lock it. // active sightline, lock it.