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

Handle clicks in grid-top cell

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-07-28 11:52:22 -07:00
parent 4a4efb894f
commit 165ae72ef2
3 changed files with 98 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/css/map.css
View File

@ -265,9 +265,7 @@ g[data-y]:nth-child(odd) {
transform: scale(var(--scale));
}
[data-x]:hover use[href="#hex"],
[data-q][data-r][data-s][data-t]:hover use[href="#hex"],
[data-q][data-r][data-s][data-t].hover use[href="#hex"] {
.grid-top:hover use[href="#hex"] {
opacity: 1;
fill: orange;
stroke: black;
@ -512,21 +510,21 @@ g.counter use[class^="counter-"] {
}
[data-q][data-r][data-s][data-t] > use[class^="counter-"],
.grid-top > use[class^="counter-"] {
.grid-top .container > use[class^="counter-"] {
--translateX: calc(var(--x) / 6 - 5px);
--translateY: calc(var(--y) / 6 - 5px);
}
[data-q][data-r][data-s][data-t]:hover > g.counter ~ use[class^="counter-"],
[data-q][data-r][data-s][data-t].hover > g.counter ~ use[class^="counter-"],
.grid-top > g.counter ~ use[class^="counter-"] {
.grid-top .container > g.counter ~ use[class^="counter-"] {
--translateX: calc(var(--x) * 2 - 5px);
--translateY: calc(var(--y) * 2 - 5px);
}
[data-q][data-r][data-s][data-t]:hover > use[class^="counter-"],
[data-q][data-r][data-s][data-t].hover > use[class^="counter-"],
.grid-top > use[class^="counter-"] {
.grid-top .container > use[class^="counter-"] {
--translateX: calc(var(--x) * 1.5 - 5px);
--translateY: calc(var(--y) * 1.5 - 5px);
}

5
public/assets/images/scenario_template.svg
View File

@ -63,6 +63,9 @@
</g>
<g class="grid"/>
<g class="grid-top"/>
<g class="grid-top">
<use href="#hex"/>
<g class="container"/>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

114
src/modules/gameboard.js
View File

@ -207,23 +207,71 @@ function endMove() {
}
}
async function returnToParent(top) {
//[...top.container.children].forEach(child => {
top.container.querySelectorAll('*:not(use[href="#hex"]').forEach(child => {
export function start(el) {
svg = el;
const gridTop = svg.querySelector('.grid-top');
top.container = svg.querySelector('.grid-top > .container');
const topHex = svg.querySelector('.grid-top > use[href="#hex"]');
gridTop.addEventListener('pointerleave', e => {
// Work around webkit bug https://bugs.webkit.org/show_bug.cgi?id=233432
const elUnderCursor = svg.parentNode.elementFromPoint(e.clientX, e.clientY);
if (!e.target.contains(elUnderCursor)) {
console.log(['pointerleave', gridTop]);
[...top.container.children].forEach(child => {
top.collection.get(child).parent.append(child);
top.collection.delete(child);
});
}
export function start(el) {
svg = el;
top.container = svg.querySelector('.grid-top');
top.cell = null;
}
});
topHex.addEventListener('click', clickHandler);
const startingLocations = svg.querySelector('.start-locations');
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
function clickHandler(e) {
console.log('top hex click event');
//const occupant = getCellOccupant(this);
const occupant = svg.querySelector('.grid-top .container .counter')
let toPlace = placing.pop();
if (isCounter(toPlace) || isMechTemplate(toPlace)) {
//getHex(this).after(toPlace);
top.collection.set(toPlace, { parent: top.cell });
top.container.append(toPlace);
//if (isCounter(toPlace)) arrangeCounters(this);
if (isCounter(toPlace)) arrangeCounters(top.container);
removeEventListener("keydown", handleMechTemplateRotation);
} else if (toPlace && !occupant) {
//soldier.place(svg, toPlace, this);
top.collection.set(toPlace, { parent: top.cell });
top.container.append(toPlace);
//toPlace.removeEventListener('click', selectOffBoard);
placing.push(toPlace);
//getLockedSightLine(svg) ? updateSightLine(this) : clearSightLine();
} else if (toPlace && occupant) {
if (toPlace === occupant) {
Observable.notify('select');
} else {
Observable.notify('select', occupant);
}
} else if (!toPlace && occupant) {
Observable.notify('select', occupant);
} else {
console.log(['removing this contents', this]);
getCellContents(this).forEach(el => el.remove());
}
const selected = getSelected();
//Observable.notify('proneflag', selected && soldier.hasProne(selected));
}
getCells(svg).forEach(cell => {
cell.addEventListener('click', e => {
console.log('cell clickevent');
const occupant = getCellOccupant(cell);
let toPlace = placing.pop();
@ -293,26 +341,23 @@ export function start(el) {
});
cell.addEventListener('pointerover', () => {
if (!cell.classList.contains('hover')) {
console.log(['pointerenter', cell]);
top.cell = cell;
[...top.container.children].forEach(child => {
if (!cell.contains(child)) {
top.collection.get(child).parent.append(child);
top.collection.delete(child);
}
});
top.container.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform'));
top.container.parentElement.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform'));
[...cell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex').forEach(child => {
if (!top.container.contains(child)) {
top.collection.set(child, { parent: cell });
top.container.append(child);
}
});
svg.querySelectorAll('g.hover').forEach(el => el.classList.remove('hover'));
cell.classList.add('hover');
}
let occupant = svg.querySelector('.grid-top .container .counter');
const selected = getSelected();
if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') {
@ -324,32 +369,33 @@ export function start(el) {
drawSightLine(selected.parentElement, cell);
}
let occupant = getCellOccupant(cell);
occupant = getCellOccupant(cell);
if (occupant) {
firingArc.toggleCounterVisibility(svg, occupant, true);
}
});
cell.addEventListener('pointerout', e => {
//cell.addEventListener('pointerout', e => {
// console.log('pointerout');
// If pointerout was not triggered by hovering over an element on that
// game hex
if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) {
[...top.container.children].forEach(child => {
top.collection.get(child).parent.append(child);
top.collection.delete(child);
});
cell.classList.remove('hover');
getActiveSightLine(svg) && clearSightLine();
const occupant = getCellOccupant(cell);
if (occupant) {
firingArc.toggleCounterVisibility(svg, occupant, false);
}
}
});
//if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) {
// [...top.container.children].forEach(child => {
// top.collection.get(child).parent.append(child);
// top.collection.delete(child);
// });
//
// cell.classList.remove('hover');
// getActiveSightLine(svg) && clearSightLine();
//
// const occupant = getCellOccupant(cell);
//
// if (occupant) {
// firingArc.toggleCounterVisibility(svg, occupant, false);
// }
//}
//});
});
//const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]');