Clean up
This commit is contained in:
parent
42af4651c2
commit
b7b59c06df
@ -217,10 +217,6 @@ function workaroundForWebKitBug233432(listener) {
|
||||
|
||||
export function start(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 frontmost = grid.querySelector('.frontmost');
|
||||
|
||||
@ -247,20 +243,6 @@ export function start(el) {
|
||||
svg.addEventListener('pointerover', e => {
|
||||
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
|
||||
if (!targetCell) {
|
||||
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');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const selected = getSelected();
|
||||
@ -326,94 +307,10 @@ export function start(el) {
|
||||
} else {
|
||||
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);
|
||||
});
|
||||
|
||||
//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);
|
||||
|
||||
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 => {
|
||||
e.preventDefault();
|
||||
|
||||
@ -468,7 +345,6 @@ export function start(el) {
|
||||
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
|
||||
|
||||
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 occupant = frontmost.querySelector('.counter');
|
||||
let toPlace = placing.pop();
|
||||
@ -497,54 +373,6 @@ export function start(el) {
|
||||
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 //
|
||||
// Add a trooper counter
|
||||
//const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
|
||||
@ -615,7 +443,6 @@ export function setFiringArc() {
|
||||
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-q');
|
||||
|
||||
if (isOnBoard(counter)) {
|
||||
//returnToParent(top);
|
||||
firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user