Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-08-01 16:10:21 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-08-01 16:10:21 -0700
commitb7b59c06df23551f5ff6a496a3c912256fc20f68 (patch)
tree36aa95c878b4dd54df25bd3c2b1f1f9b83a710d2
parent42af4651c2f1227b4fe9c4917a233afda7dd397d (diff)
Clean up
Diffstat
-rw-r--r--src/modules/gameboard.js175
1 files changed, 1 insertions, 174 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index b1e28fa..c486eae 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -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));
}
}