Web Dev Solutions

Catalin Mititiuc

From 165ae72ef203e65e8576bb233972d9548ec0e5f8 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sun, 28 Jul 2024 11:52:22 -0700 Subject: Handle clicks in grid-top cell --- public/assets/css/map.css | 10 +-- public/assets/images/scenario_template.svg | 5 +- src/modules/gameboard.js | 134 +++++++++++++++++++---------- 3 files changed, 98 insertions(+), 51 deletions(-) diff --git a/public/assets/css/map.css b/public/assets/css/map.css index 7e74efb..dfdc08b 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -265,9 +265,7 @@ g[data-y]:nth-child(odd) { transform: scale(var(--scale)); } -[data-x]:hover use[href="#hex"], -[data-q][data-r][data-s][data-t]:hover use[href="#hex"], -[data-q][data-r][data-s][data-t].hover use[href="#hex"] { +.grid-top:hover use[href="#hex"] { opacity: 1; fill: orange; stroke: black; @@ -512,21 +510,21 @@ g.counter use[class^="counter-"] { } [data-q][data-r][data-s][data-t] > use[class^="counter-"], -.grid-top > use[class^="counter-"] { +.grid-top .container > use[class^="counter-"] { --translateX: calc(var(--x) / 6 - 5px); --translateY: calc(var(--y) / 6 - 5px); } [data-q][data-r][data-s][data-t]:hover > g.counter ~ use[class^="counter-"], [data-q][data-r][data-s][data-t].hover > g.counter ~ use[class^="counter-"], -.grid-top > g.counter ~ use[class^="counter-"] { +.grid-top .container > g.counter ~ use[class^="counter-"] { --translateX: calc(var(--x) * 2 - 5px); --translateY: calc(var(--y) * 2 - 5px); } [data-q][data-r][data-s][data-t]:hover > use[class^="counter-"], [data-q][data-r][data-s][data-t].hover > use[class^="counter-"], -.grid-top > use[class^="counter-"] { +.grid-top .container > use[class^="counter-"] { --translateX: calc(var(--x) * 1.5 - 5px); --translateY: calc(var(--y) * 1.5 - 5px); } diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg index ad7cba3..b6595f6 100644 --- a/public/assets/images/scenario_template.svg +++ b/public/assets/images/scenario_template.svg @@ -63,6 +63,9 @@ - + + + + diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 5cf0c51..26e6c44 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -207,23 +207,71 @@ function endMove() { } } -async function returnToParent(top) { - //[...top.container.children].forEach(child => { - top.container.querySelectorAll('*:not(use[href="#hex"]').forEach(child => { - top.collection.get(child).parent.append(child); - top.collection.delete(child); - }); -} - export function start(el) { svg = el; - top.container = svg.querySelector('.grid-top'); + const gridTop = svg.querySelector('.grid-top'); + top.container = svg.querySelector('.grid-top > .container'); + const topHex = svg.querySelector('.grid-top > use[href="#hex"]'); + + gridTop.addEventListener('pointerleave', e => { + // Work around webkit bug https://bugs.webkit.org/show_bug.cgi?id=233432 + const elUnderCursor = svg.parentNode.elementFromPoint(e.clientX, e.clientY); + if (!e.target.contains(elUnderCursor)) { + console.log(['pointerleave', gridTop]); + [...top.container.children].forEach(child => { + top.collection.get(child).parent.append(child); + top.collection.delete(child); + }); + + top.cell = null; + } + }); + + topHex.addEventListener('click', clickHandler); const startingLocations = svg.querySelector('.start-locations'); startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard)); + function clickHandler(e) { + console.log('top hex click event'); + //const occupant = getCellOccupant(this); + const occupant = svg.querySelector('.grid-top .container .counter') + let toPlace = placing.pop(); + + if (isCounter(toPlace) || isMechTemplate(toPlace)) { + //getHex(this).after(toPlace); + top.collection.set(toPlace, { parent: top.cell }); + top.container.append(toPlace); + //if (isCounter(toPlace)) arrangeCounters(this); + if (isCounter(toPlace)) arrangeCounters(top.container); + removeEventListener("keydown", handleMechTemplateRotation); + } else if (toPlace && !occupant) { + //soldier.place(svg, toPlace, this); + top.collection.set(toPlace, { parent: top.cell }); + top.container.append(toPlace); + //toPlace.removeEventListener('click', selectOffBoard); + placing.push(toPlace); + //getLockedSightLine(svg) ? updateSightLine(this) : clearSightLine(); + } else if (toPlace && occupant) { + if (toPlace === occupant) { + Observable.notify('select'); + } else { + Observable.notify('select', occupant); + } + } else if (!toPlace && occupant) { + Observable.notify('select', occupant); + } else { + console.log(['removing this contents', this]); + getCellContents(this).forEach(el => el.remove()); + } + + const selected = getSelected(); + //Observable.notify('proneflag', selected && soldier.hasProne(selected)); + } + getCells(svg).forEach(cell => { cell.addEventListener('click', e => { + console.log('cell clickevent'); const occupant = getCellOccupant(cell); let toPlace = placing.pop(); @@ -293,26 +341,23 @@ export function start(el) { }); cell.addEventListener('pointerover', () => { - if (!cell.classList.contains('hover')) { - [...top.container.children].forEach(child => { - if (!cell.contains(child)) { - top.collection.get(child).parent.append(child); - top.collection.delete(child); - } - }); + console.log(['pointerenter', cell]); - top.container.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform')); + top.cell = cell; - [...cell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex').forEach(child => { - if (!top.container.contains(child)) { - top.collection.set(child, { parent: cell }); - top.container.append(child); - } - }); - svg.querySelectorAll('g.hover').forEach(el => el.classList.remove('hover')); - cell.classList.add('hover'); - } + [...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') { @@ -324,32 +369,33 @@ export function start(el) { drawSightLine(selected.parentElement, cell); } - let occupant = getCellOccupant(cell); + occupant = getCellOccupant(cell); if (occupant) { firingArc.toggleCounterVisibility(svg, occupant, true); } }); - cell.addEventListener('pointerout', e => { + //cell.addEventListener('pointerout', e => { + // console.log('pointerout'); // If pointerout was not triggered by hovering over an element on that // game hex - if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) { - [...top.container.children].forEach(child => { - top.collection.get(child).parent.append(child); - top.collection.delete(child); - }); - - cell.classList.remove('hover'); - getActiveSightLine(svg) && clearSightLine(); - - const occupant = getCellOccupant(cell); - - if (occupant) { - firingArc.toggleCounterVisibility(svg, occupant, false); - } - } - }); + //if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) { + // [...top.container.children].forEach(child => { + // top.collection.get(child).parent.append(child); + // top.collection.delete(child); + // }); + // + // cell.classList.remove('hover'); + // getActiveSightLine(svg) && clearSightLine(); + // + // const occupant = getCellOccupant(cell); + // + // if (occupant) { + // firingArc.toggleCounterVisibility(svg, occupant, false); + // } + //} + //}); }); //const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]'); -- cgit v1.2.3