Clear hover on pointerout?

This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:33 -07:00
parent 1132ab4c53
commit 07af5d6ea7

View File

@ -222,8 +222,6 @@ export function start(el) {
const startingLocations = svg.querySelector('.start-locations'); const startingLocations = svg.querySelector('.start-locations');
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard)); startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
svg.addEventListener('pointerout', e => console.log('pointerout svg'));
getCells(svg).forEach(cell => { getCells(svg).forEach(cell => {
cell.addEventListener('click', e => { cell.addEventListener('click', e => {
const occupant = getCellOccupant(cell); const occupant = getCellOccupant(cell);
@ -333,8 +331,16 @@ export function start(el) {
} }
}); });
cell.addEventListener('pointerout', () => { cell.addEventListener('pointerout', e => {
console.log('pointerout cell', cell); // 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(); getActiveSightLine(svg) && clearSightLine();
const occupant = getCellOccupant(cell); const occupant = getCellOccupant(cell);
@ -342,6 +348,7 @@ export function start(el) {
if (occupant) { if (occupant) {
firingArc.toggleCounterVisibility(svg, occupant, false); firingArc.toggleCounterVisibility(svg, occupant, false);
} }
}
}); });
}); });
@ -353,14 +360,14 @@ export function start(el) {
// debug // // debug //
// Add a trooper counter // Add a trooper counter
const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }}; //const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
// const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }}; // const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
const cell = getCell(0, 0, 0, 0); //const cell = getCell(0, 0, 0, 0);
const trooper = soldier.createCounter(attacker, 'blazer'); //const trooper = soldier.createCounter(attacker, 'blazer');
//const trooperSack = document.createElementNS(svgns, 'g'); //const trooperSack = document.createElementNS(svgns, 'g');
//trooperSack.classList.add('cell-contents'); //trooperSack.classList.add('cell-contents');
//trooperSack.append(trooper); //trooperSack.append(trooper);
soldier.place(svg, trooper, cell); //soldier.place(svg, trooper, cell);
// Add some counters in an unoccupied cell // Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0); //const countersCell = getCell(-1, 1, 0, 0);