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