From aadc01376d075559725de003a769cdbe3e173c0e Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 26 Jul 2024 15:11:24 -0700
Subject: WIP: solution to bringing active element to top?
---
src/modules/gameboard.js | 66 ++++++++++++++++++++++++++++++++++--------------
1 file changed, 47 insertions(+), 19 deletions(-)
(limited to 'src/modules/gameboard.js')
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 693c783..f909d1f 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -6,6 +6,10 @@ import { Observable } from "./observable";
let svg,
placing = [];
+const top = {
+ collection: new Map()
+};
+
function getCellContents(cell) {
return cell.querySelectorAll('*:not(use[href="#hex"])');
}
@@ -19,7 +23,7 @@ function getHex(cell) {
}
function getCellOccupant(cell) {
- return cell.querySelector('.counter');
+ return cell.querySelector('.counter') || svg.querySelector('.grid-top .counter');
}
function getCells(svg) {
@@ -203,23 +207,22 @@ function endMove() {
}
}
-function returnPieces(top) {
- [...top.container.children].forEach(piece => {
- top.collection.get(piece).parent.append(piece);
- top.collection.delete(piece);
+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 startingLocations = svg.querySelector('.start-locations');
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
- const top = {
- container: svg.querySelector('.grid-top'),
- collection: new Map()
- };
+ svg.addEventListener('pointerout', e => console.log('pointerout svg'));
getCells(svg).forEach(cell => {
cell.addEventListener('click', e => {
@@ -227,8 +230,11 @@ export function start(el) {
let toPlace = placing.pop();
if (isCounter(toPlace) || isMechTemplate(toPlace)) {
- getHex(cell).after(toPlace);
- if (isCounter(toPlace)) arrangeCounters(cell);
+ //getHex(cell).after(toPlace);
+ top.collection.set(toPlace, { parent: cell });
+ top.container.append(toPlace);
+ //if (isCounter(toPlace)) arrangeCounters(cell);
+ if (isCounter(toPlace)) arrangeCounters(top.container);
removeEventListener("keydown", handleMechTemplateRotation);
} else if (toPlace && !occupant) {
soldier.place(svg, toPlace, cell);
@@ -289,10 +295,24 @@ export function start(el) {
});
cell.addEventListener('pointerover', () => {
- if (!top.container.contains(cell)) {
- returnPieces(top);
- top.collection.set(cell, { parent: cell.parentElement });
- top.container.append(cell);
+ 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);
+ }
+ });
+
+ top.container.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform'));
+
+ [...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');
}
const selected = getSelected();
@@ -314,6 +334,7 @@ export function start(el) {
});
cell.addEventListener('pointerout', () => {
+ console.log('pointerout cell', cell);
getActiveSightLine(svg) && clearSightLine();
const occupant = getCellOccupant(cell);
@@ -324,16 +345,22 @@ export function start(el) {
});
});
+ //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 attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
+ const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
// const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
- //const cell = getCell(0, 0, 0, 0);
- //const trooper = soldier.createCounter(attacker, 'blazer');
+ const cell = getCell(0, 0, 0, 0);
+ const trooper = soldier.createCounter(attacker, 'blazer');
//const trooperSack = document.createElementNS(svgns, 'g');
//trooperSack.classList.add('cell-contents');
//trooperSack.append(trooper);
- //soldier.place(svg, trooperSack, cell);
+ soldier.place(svg, trooper, cell);
// Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0);
@@ -379,6 +406,7 @@ 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));
}
}
--
cgit v1.2.3