Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-26 15:11:24 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-26 15:11:24 -0700
commitaadc01376d075559725de003a769cdbe3e173c0e (patch)
treeb0675274f0f31dc4b26651899cc982e767405145
parent4be3df2bddf9466321b0785c2df15ce487a87a07 (diff)
WIP: solution to bringing active element to top?
Diffstat
-rw-r--r--public/assets/css/map.css31
-rw-r--r--src/modules/gameboard.js66
2 files changed, 59 insertions, 38 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 06fe169..f5f9dae 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -173,7 +173,7 @@ polygon.firing-arc[data-allegiance="attacker"] {
/* r: 5px;*/
/*}*/
-g.counter {
+g.counter, g.grid-top {
r: 5px;
}
@@ -196,6 +196,7 @@ g.counter.selected {
g.counter use.primary-weapon {
r: inherit;
+ pointer-events: none;
}
g.counter use.troop-number, g.counter use.squad-number {
@@ -264,12 +265,14 @@ 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-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"] {
opacity: 1;
fill: orange;
stroke: black;
}
-/**/
+
/*[data-q][data-r][data-s][data-t] g.counter,*/
/*[data-q][data-r][data-s][data-t] g.counter .troop-number,*/
/*[data-q][data-r][data-s][data-t] g.counter .squad-number {*/
@@ -497,20 +500,6 @@ text.elevation {
fill: black;
}
-.radial-icon {
- transition: cx 0.25s, cy 0.25s;
-}
-
-[data-q][data-r][data-s][data-t] .radial-icon {
- cx: calc(var(--cx) / 20);
- cy: calc(var(--cy) / 20);
-}
-
-[data-q][data-r][data-s][data-t]:hover .radial-icon {
- cx: var(--cx);
- cy: var(--cy);
-}
-
use[class^="counter-"] {
--scale: 1;
--translateX: -5px;
@@ -541,14 +530,18 @@ g.counter use[class^="counter-"] {
}
/* Counters placed on a hex */
-[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-"],
+[data-q][data-r][data-s][data-t].hover > g.counter ~ use[class^="counter-"],
+.grid-top use[class^="counter-"] {
x: calc(var(--x) * 2);
y: calc(var(--y) * 2);
--translateY: -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-"],
+[data-q][data-r][data-s][data-t].hover > use[class^="counter-"] {
x: calc(var(--x) * 1.5);
y: calc(var(--y) * 1.5);
--translateY: -5px;
}
+
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));
}
}