ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: solution to bringing active element to top?

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-07-26 15:11:24 -07:00
parent 4be3df2bdd
commit aadc01376d
2 changed files with 59 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/assets/css/map.css
View File

@ -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;
}

66
src/modules/gameboard.js
View File

@ -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));
}
}