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

WIP: trying just using pointerovers

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-07-31 16:38:36 -07:00
parent 8f77c05bd9
commit d270cd8174
2 changed files with 144 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/index.js
View File

@ -84,10 +84,12 @@ 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');
//gameboard.setCounter('1st-floor'); Observable.notify('select');
window.gb = gameboard;
} }
function updateTurnCounter() { function updateTurnCounter() {

199
src/modules/gameboard.js
View File

@ -224,21 +224,92 @@ export function start(el) {
const grid = svg.querySelector('.grid'); const grid = svg.querySelector('.grid');
const frontmost = grid.querySelector('.frontmost'); const frontmost = grid.querySelector('.frontmost');
svg.addEventListener('pointerover', e => { // For when the pointer leaves the window
//console.log('pointerover', e.target.closest('[data-q][data-r][data-s][data-t], .frontmost'), e); document.querySelector('object').addEventListener('pointerout', e => {
const targetCell = e.target.closest('[data-q][data-r][data-s][data-t]'); console.log('object pointerout');
console.log('SVG pointerover', targetCell); svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
const counter = targetCell && targetCell.querySelector('.counter'); //[...frontmost.children].forEach(child => {
//console.log('pointerover', 'targetCell', targetCell); // const parent = frontmostStore.get(child);
// parent.append(child);
// parent.classList.remove('hover');
// firingArc.toggleCounterVisibility(svg, child, false);
// frontmostStore.delete(child);
//});
console.log('object', svg.querySelectorAll('.hover'));
});
if (counter) { svg.addEventListener('pointerover', e => {
firingArc.toggleCounterVisibility(svg, counter, true); const targetCell = e.target.closest('[data-q][data-r][data-s][data-t], .frontmost');
frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
frontmostStore.set(counter, targetCell); console.log(
frontmost.append(counter); 'SVG pointerOVER ================================',
'\ne.target',
e.target,
'\ntarget closest',
targetCell,
'\ne.relatedTarget',
e.relatedTarget,
'\nrelatedTarget closest',
e.relatedTarget && e.relatedTarget.closest('[data-q][data-r][data-s][data-t]')
);
//console.log('target closest root', e.target.closest('[data-q][data-r][data-s][data-t] > *'));
// Pointer moves outside the edge of the grid
if (!targetCell) {
console.log('No target cell... CLEARING HOVERS');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
} }
targetCell && targetCell.classList.add('hover'); // Pointer moves over a cell
if (targetCell) {
//console.log(
// "targetCell.classList.contains('frontmost')", targetCell.classList.contains('frontmost'),
// "e.target.closest('.frontmost > *')", e.target.closest('.frontmost > *'),
// "frontmostStore.get(e.target.closest('.frontmost > *'))", frontmostStore.get(e.target.closest('.frontmost > *')),
// "frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover')", frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover')
//);
//if (
// !(targetCell.classList.contains('frontmost') && frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover')) && !targetCell.classList.contains('hover')
//) {
if ([
// that is not already highlighted
!targetCell.classList.contains('hover'),
// 's contents that is in frontmost, whose parent cell is not already highlighted
!(targetCell.classList.contains('frontmost') && frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover'))
].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'));
targetCell.classList.contains('frontmost') ? frontmostStore.get(e.target.closest('.frontmost > *')).classList.add('hover') : targetCell.classList.add('hover');
}
}
//const counter = targetCell && targetCell.querySelector('.counter');
//console.log('pointerover', 'targetCell', targetCell);
//if (targetCell) {
// const children = [...targetCell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex');
// if (children.length > 0) {
// frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
// children.forEach(child => {
// if (child.classList.contains('counter')) {
// firingArc.toggleCounterVisibility(svg, child, true);
// }
// frontmostStore.set(child, targetCell);
// frontmost.append(child);
// });
// }
//}
//if (counter) {
// firingArc.toggleCounterVisibility(svg, counter, true);
// frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
// frontmostStore.set(counter, targetCell);
// frontmost.append(counter);
//}
//targetCell && targetCell.classList.add('hover');
//if (targetCell && !targetCell.classList.contains('frontmost')) { //if (targetCell && !targetCell.classList.contains('frontmost')) {
// targetCell.classList.add('hover'); // targetCell.classList.add('hover');
@ -256,53 +327,50 @@ export function start(el) {
// }); // });
// } // }
//} //}
//console.log('frontmost contents', frontmost.children); console.log('frontmost contents', frontmost.children);
}); });
svg.addEventListener('pointerout', e => { //svg.addEventListener('pointerout', e => {
//const targetCell = e.target.closest('[data-q][data-r][data-s][data-t], .frontmost'); // //console.log('pointer out target', e.target);
console.log('pointer out target', e.target); // const targetCell = e.target.closest('[data-q][data-r][data-s][data-t], .frontmost');
const targetCell = e.target.closest('[data-q][data-r][data-s][data-t], .frontmost'); // console.log('SVG pointerOUT', 'e.target', e.target, 'relatedTarget', e.relatedTarget, 'closest', targetCell);
//
if (targetCell) { // if (targetCell) {
console.log('SVG pointerout', targetCell); // //console.log('SVG pointerout', targetCell);
[...frontmost.children].forEach(child => { // [...frontmost.children].forEach(child => {
//console.log('child', child, 'relatedTarget', e.relatedTarget); // //console.log('child', child, 'relatedTarget', e.relatedTarget);
//if ([ // //if ([
// !e.relatedTarget, // out of the window // // !e.relatedTarget, // out of the window
// targetCell.classList.contains('frontmost') && !e.relatedTarget.closest('.frontmost'), // from one element in frontmost to another element in frontmost // // targetCell.classList.contains('frontmost') && !e.relatedTarget.closest('.frontmost'), // from one element in frontmost to another element in frontmost
// !targetCell.classList.contains('frontmost') && frontmostStore.get(child) === targetCell, // leaving from a hex under frontmost // // !targetCell.classList.contains('frontmost') && frontmostStore.get(child) === targetCell, // leaving from a hex under frontmost
//].some(e => e)) { // //].some(e => e)) {
console.log('child', child, 'belongs to', frontmostStore.get(child)); // console.log('child', child, 'belongs to', frontmostStore.get(child));
console.log('relatedTarget', e.relatedTarget); // //console.log('relatedTarget', e.relatedTarget);
if (!e.relatedTarget || frontmostStore.get(child) !== targetCell || (e.relatedTarget !== child && !child.contains(e.relatedTarget))) { // //if (!e.relatedTarget || frontmostStore.get(child) !== targetCell || (e.relatedTarget !== child && !child.contains(e.relatedTarget))) {
//if (!e.relatedTarget || frontmostStore.get(child) !== targetCell || e.relatedTarget !== child) { // //if (!e.relatedTarget || frontmostStore.get(child) !== targetCell || e.relatedTarget !== child) {
const parent = frontmostStore.get(child); // const closest = e.relatedTarget && e.relatedTarget.closest('[data-q][data-r][data-s][data-t], .frontmost');
console.log('returning to', parent); // if (!e.relatedTarget || (closest && !closest.classList.contains('hover') && !closest.classList.contains('frontmost'))) {
//console.log('RETURNING to', parent); // const parent = frontmostStore.get(child);
parent.append(child); // console.log('returning to', parent);
// parent.append(child);
//if (child.classList.contains('.counter')) {
// firingArc.toggleCounterVisibility(svg, child, false); // firingArc.toggleCounterVisibility(svg, child, false);
//} // parent.classList.remove('hover');
// frontmostStore.delete(child);
firingArc.toggleCounterVisibility(svg, child, false); // }
parent.classList.remove('hover'); // });
frontmostStore.delete(child); // if (frontmost.children.length < 1) targetCell.classList.remove('hover');
} // } else {
}); // [...frontmost.children].forEach(child => {
//targetCell.classList.remove('hover'); // const parent = frontmostStore.get(child);
if (frontmost.children.length < 1) targetCell.classList.remove('hover'); // parent.append(child);
} else { // parent.classList.remove('hover');
[...frontmost.children].forEach(child => { // firingArc.toggleCounterVisibility(svg, child, false);
const parent = frontmostStore.get(child); // frontmostStore.delete(child);
parent.append(child); // });
parent.classList.remove('hover'); // }
frontmostStore.delete(child); // console.log('hover cells', svg.querySelectorAll('.hover'));
}); // console.log('frontmost contents', frontmost.children);
} //});
//console.log('frontmost contents', frontmost.children);
});
grid.addEventListener('click', e => { grid.addEventListener('click', e => {
console.log('click', e.target); console.log('click', e.target);
@ -428,7 +496,12 @@ 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);
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 cell = getCell(0, 0, 0, 0);
const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }}; const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
@ -437,8 +510,15 @@ export function start(el) {
// 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.classList.add(`counter-${name}`);
frontmostStore.set(counter, cell2);
frontmost.append(counter);
arrangeCounters(frontmost)
//counter.addEventListener('click', e => { //counter.addEventListener('click', e => {
// e.stopPropagation() // e.stopPropagation()
// const container = counter.parentElement; // const container = counter.parentElement;
@ -446,11 +526,6 @@ export function start(el) {
// arrangeCounters(container); // arrangeCounters(container);
//}); //});
//counter.setAttributeNS(null, 'href', `#counter-${name}`);
//counter.classList.add(`counter-${name}`);
//cell.append(counter);
//arrangeCounters(cell)
//setCounter('grenade'); //setCounter('grenade');
//setCounter('prone'); //setCounter('prone');
//setCounter('1st-floor'); //setCounter('1st-floor');