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(null, scenarioUnits);
const [_, trooper] = gameboard.getUnits();
Observable.notify('select', trooper);
gameboard.setCounter('prone');
Observable.notify('select');
window.gb = gameboard;
//const [_, trooper] = gameboard.getUnits();
//Observable.notify('select', trooper);
//gameboard.setCounter('prone');
//Observable.notify('select');
}
function updateTurnCounter() {

105
src/modules/gameboard.js
View File

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