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

Use pointerovers for setup/teardown; don't rely on pointerouts

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:33 -07:00
parent 67602d664e
commit e4d88c3ebe
2 changed files with 74 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/index.js
View File

@ -84,12 +84,10 @@ async function buildScenario(req) {
// recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits()); // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
recordSheet.start(null, scenarioUnits); recordSheet.start(null, scenarioUnits);
const [_, trooper] = gameboard.getUnits(); //const [_, trooper] = gameboard.getUnits();
Observable.notify('select', trooper); //Observable.notify('select', trooper);
gameboard.setCounter('prone'); //gameboard.setCounter('prone');
Observable.notify('select'); //Observable.notify('select');
window.gb = gameboard;
} }
function updateTurnCounter() { function updateTurnCounter() {

105
src/modules/gameboard.js
View File

@ -227,14 +227,17 @@ export function start(el) {
// For when the pointer leaves the window // For when the pointer leaves the window
document.querySelector('object').addEventListener('pointerout', e => { document.querySelector('object').addEventListener('pointerout', e => {
console.log('object pointerout'); console.log('object pointerout');
console.log('Left map... CLEARING HOVERS');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover')); svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
//[...frontmost.children].forEach(child => {
// const parent = frontmostStore.get(child); [...frontmost.children].forEach(child => {
// parent.append(child); const parent = frontmostStore.get(child);
// parent.classList.remove('hover'); parent.append(child);
// firingArc.toggleCounterVisibility(svg, child, false); if (child.classList.contains('counter')) {
// frontmostStore.delete(child); firingArc.toggleCounterVisibility(svg, child, false);
//}); }
frontmostStore.delete(child);
});
console.log('object', svg.querySelectorAll('.hover')); console.log('object', svg.querySelectorAll('.hover'));
}); });
@ -259,6 +262,15 @@ export function start(el) {
if (!targetCell) { if (!targetCell) {
console.log('No target cell... CLEARING HOVERS'); console.log('No target cell... CLEARING HOVERS');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover')); svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
[...frontmost.children].forEach(child => {
const parent = frontmostStore.get(child);
parent.append(child);
if (child.classList.contains('counter')) {
firingArc.toggleCounterVisibility(svg, child, false);
}
frontmostStore.delete(child);
});
} }
// Pointer moves over a cell // Pointer moves over a cell
@ -281,6 +293,29 @@ export function start(el) {
].every(e => e)) { ].every(e => e)) {
console.log('Target cell missing hover... CLEARING HOVERS AND ADDING TO TARGET CELL'); console.log('Target cell missing hover... CLEARING HOVERS AND ADDING TO TARGET CELL');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover')); svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
[...frontmost.children].forEach(child => {
const parent = frontmostStore.get(child);
parent.append(child);
if (child.classList.contains('counter')) {
firingArc.toggleCounterVisibility(svg, child, false);
}
frontmostStore.delete(child);
});
frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
const children = [...targetCell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex');
if (children.length > 0) {
children.forEach(child => {
if (child.classList.contains('counter')) {
firingArc.toggleCounterVisibility(svg, child, true);
}
frontmostStore.set(child, targetCell);
frontmost.append(child);
});
}
targetCell.classList.contains('frontmost') ? frontmostStore.get(e.target.closest('.frontmost > *')).classList.add('hover') : targetCell.classList.add('hover'); targetCell.classList.contains('frontmost') ? frontmostStore.get(e.target.closest('.frontmost > *')).classList.add('hover') : targetCell.classList.add('hover');
} }
} }
@ -372,9 +407,7 @@ export function start(el) {
// console.log('frontmost contents', frontmost.children); // console.log('frontmost contents', frontmost.children);
//}); //});
grid.addEventListener('click', e => { grid.addEventListener('click', clickHandler);
console.log('click', e.target);
});
const clearHexDialog = document.querySelector('#clear-hex'); const clearHexDialog = document.querySelector('#clear-hex');
//clearHexDialog.addEventListener('close', e => { //clearHexDialog.addEventListener('close', e => {
@ -420,19 +453,20 @@ export function start(el) {
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard)); startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
function clickHandler(e) { function clickHandler(e) {
const occupant = svg.querySelector('.grid-top .container .counter'); const targetCell = e.target.closest('[data-q][data-r][data-s][data-t]') || frontmostStore.get(e.target.closest('.frontmost > *'));
const occupant = frontmost.querySelector('.counter');
let toPlace = placing.pop(); let toPlace = placing.pop();
if (isCounter(toPlace) || isMechTemplate(toPlace)) { if (isCounter(toPlace) || isMechTemplate(toPlace)) {
top.collection.set(toPlace, { parent: top.cell }); frontmostStore.set(toPlace, targetCell);
top.container.append(toPlace); frontmost.append(toPlace);
if (isCounter(toPlace)) arrangeCounters(top.container); if (isCounter(toPlace)) arrangeCounters(frontmost);
removeEventListener("keydown", handleMechTemplateRotation); removeEventListener("keydown", handleMechTemplateRotation);
} else if (toPlace && !occupant) { } else if (toPlace && !occupant) {
top.collection.set(toPlace, { parent: top.cell }); frontmostStore.set(toPlace, targetCell);
top.container.prepend(toPlace); frontmost.prepend(toPlace);
placing.push(toPlace); placing.push(toPlace);
getLockedSightLine(svg) ? updateSightLine(top.cell) : clearSightLine(); getLockedSightLine(svg) ? updateSightLine(targetCell) : clearSightLine();
} else if (toPlace && occupant) { } else if (toPlace && occupant) {
if (toPlace === occupant) { if (toPlace === occupant) {
Observable.notify('select'); Observable.notify('select');
@ -496,28 +530,29 @@ export function start(el) {
// debug // // debug //
// Add a trooper counter // Add a trooper counter
const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }}; //const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
const cell2 = getCell(-1, 0, 1, 0); //const cell2 = getCell(-1, 0, 1, 0);
frontmost.setAttributeNS(null, 'transform', cell2.getAttributeNS(null, 'transform')); //frontmost.setAttributeNS(null, 'transform', cell2.getAttributeNS(null, 'transform'));
const trooper2 = soldier.createCounter(defender, 'blazer'); //const trooper2 = soldier.createCounter(defender, 'blazer');
frontmostStore.set(trooper2, cell2); //frontmostStore.set(trooper2, cell2);
frontmost.append(trooper2); //frontmost.append(trooper2);
//cell2.classList.add('hover');
const cell = getCell(0, 0, 0, 0); //
const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }}; //const cell = getCell(0, 0, 0, 0);
const trooper = soldier.createCounter(attacker, 'blazer'); //const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
soldier.place(svg, trooper, cell); //const trooper = soldier.createCounter(attacker, 'blazer');
//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);
const counter = document.createElementNS(svgns, 'use'); //const counter = document.createElementNS(svgns, 'use');
const name = 'grenade'; //const name = 'grenade';
counter.setAttributeNS(null, 'href', `#counter-${name}`); //counter.setAttributeNS(null, 'href', `#counter-${name}`);
counter.classList.add(`counter-${name}`); //counter.classList.add(`counter-${name}`);
frontmostStore.set(counter, cell2); //frontmostStore.set(counter, cell2);
frontmost.append(counter); //frontmost.append(counter);
arrangeCounters(frontmost) //arrangeCounters(frontmost)
//counter.addEventListener('click', e => { //counter.addEventListener('click', e => {
// e.stopPropagation() // e.stopPropagation()