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

Clean up

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:33 -07:00
parent b7c6cc8936
commit 81851d0bde
1 changed files with 0 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
src/modules/gameboard.js
View File

@ -217,10 +217,6 @@ function workaroundForWebKitBug233432(listener) {
export function start(el) { export function start(el) {
svg = 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"]');
const grid = svg.querySelector('.grid'); const grid = svg.querySelector('.grid');
const frontmost = grid.querySelector('.frontmost'); const frontmost = grid.querySelector('.frontmost');
@ -247,20 +243,6 @@ export function start(el) {
svg.addEventListener('pointerover', e => { svg.addEventListener('pointerover', e => {
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 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 // Pointer moves outside the edge of the grid
if (!targetCell) { if (!targetCell) {
console.log('No target cell... CLEARING HOVERS'); console.log('No target cell... CLEARING HOVERS');
@ -315,7 +297,6 @@ export function start(el) {
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');
} }
} }
const selected = getSelected(); const selected = getSelected();
@ -326,94 +307,10 @@ export function start(el) {
} else { } else {
getActiveSightLine(svg) && clearSightLine(); getActiveSightLine(svg) && clearSightLine();
} }
//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')) {
// targetCell.classList.add('hover');
// const occupant = targetCell.querySelector('.counter');
//
// if (occupant) {
// firingArc.toggleCounterVisibility(svg, occupant, true);
// }
// 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 => {
// frontmostStore.set(child, targetCell);
// frontmost.append(child);
// });
// }
//}
console.log('frontmost contents', frontmost.children); console.log('frontmost contents', frontmost.children);
}); });
//svg.addEventListener('pointerout', e => {
// //console.log('pointer out target', e.target);
// 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) {
// //console.log('SVG pointerout', targetCell);
// [...frontmost.children].forEach(child => {
// //console.log('child', child, 'relatedTarget', e.relatedTarget);
// //if ([
// // !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') && frontmostStore.get(child) === targetCell, // leaving from a hex under frontmost
// //].some(e => e)) {
// console.log('child', child, 'belongs to', frontmostStore.get(child));
// //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) {
// const closest = e.relatedTarget && e.relatedTarget.closest('[data-q][data-r][data-s][data-t], .frontmost');
// if (!e.relatedTarget || (closest && !closest.classList.contains('hover') && !closest.classList.contains('frontmost'))) {
// const parent = frontmostStore.get(child);
// console.log('returning to', parent);
// parent.append(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 => {
// const parent = frontmostStore.get(child);
// parent.append(child);
// parent.classList.remove('hover');
// firingArc.toggleCounterVisibility(svg, child, false);
// frontmostStore.delete(child);
// });
// }
// console.log('hover cells', svg.querySelectorAll('.hover'));
// console.log('frontmost contents', frontmost.children);
//});
grid.addEventListener('click', clickHandler); grid.addEventListener('click', clickHandler);
const clearHexDialog = document.querySelector('#clear-hex'); const clearHexDialog = document.querySelector('#clear-hex');
@ -427,26 +324,6 @@ export function start(el) {
} }
}); });
//gridTop.addEventListener('pointerleave', workaroundForWebKitBug233432(e => {
// console.log('pointerleave top', performance.now(), top.cell);
// const occupant = svg.querySelector('.grid-top .container .counter');
//
// if (occupant) {
// firingArc.toggleCounterVisibility(svg, occupant, false);
// }
//
// [...top.container.children].forEach(child => {
// top.collection.get(child).parent.append(child);
// top.collection.delete(child);
// });
//
// top.cell = null;
//
// getActiveSightLine(svg) && clearSightLine();
//}));
//topHex.addEventListener('click', clickHandler);
grid.addEventListener('contextmenu', e => { grid.addEventListener('contextmenu', e => {
e.preventDefault(); e.preventDefault();
@ -468,7 +345,6 @@ 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 targetCell = e.target.closest('[data-q][data-r][data-s][data-t]') || frontmostStore.get(e.target.closest('.frontmost > *'));
const targetCell = grid.querySelector('.hover'); const targetCell = grid.querySelector('.hover');
const occupant = frontmost.querySelector('.counter'); const occupant = frontmost.querySelector('.counter');
let toPlace = placing.pop(); let toPlace = placing.pop();
@ -497,54 +373,6 @@ export function start(el) {
const selected = getSelected(); const selected = getSelected();
} }
//getCells(svg).forEach(cell => {
// cell.addEventListener('pointerleave', () => {
// console.log('pointerleave cell', performance.now(), cell);
// });
//
// cell.addEventListener('pointerover', () => {
// console.log('pointerenter', performance.now(), cell);
//
// top.cell = cell;
//
// [...top.container.children].forEach(child => {
// top.collection.get(child).parent.append(child);
// top.collection.delete(child);
// });
//
// top.container.parentElement.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform'));
//
// [...cell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex').forEach(child => {
// top.collection.set(child, { parent: cell });
// top.container.append(child);
// });
//
// let occupant = svg.querySelector('.grid-top .container .counter');
// const selected = getSelected();
//
// if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') {
// cell.appendChild(placing[0]);
// }
//
// if (selected && svg.querySelector('.grid').contains(selected) && !getLockedSightLine(svg) && cell !== selected.parentElement) {
// clearSightLine();
// drawSightLine(selected.parentElement, cell);
// }
//
// occupant = getCellOccupant(cell);
//
// if (occupant) {
// firingArc.toggleCounterVisibility(svg, occupant, true);
// }
// });
//});
//const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]');
//const povr = new PointerEvent('pointerover');
//const pout = new PointerEvent('pointerout');
//cell.dispatchEvent(povr);
//cell.dispatchEvent(pout);
// 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 }};
@ -615,7 +443,6 @@ export function setFiringArc() {
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-q'); isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-q');
if (isOnBoard(counter)) { if (isOnBoard(counter)) {
//returnToParent(top);
firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement)); firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));
} }
} }