Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-31 17:42:45 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-31 17:42:45 -0700
commit28e0188ecdc5c2dcfb37469ea089717868650e6a (patch)
tree5f8f7d19b9cad9d068be1a89f275837ea744c3bd
parentd270cd8174bafcf27fe99833165521d13e228d6f (diff)
Use pointerovers for setup/teardown; don't rely on pointerouts
Diffstat
-rw-r--r--src/index.js10
-rw-r--r--src/modules/gameboard.js105
2 files changed, 74 insertions, 41 deletions
diff --git a/src/index.js b/src/index.js
index e2b9fbb..cc4dd6d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -84,12 +84,10 @@ async function buildScenario(req) {
// recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
recordSheet.start(null, scenarioUnits);
- const [_, trooper] = gameboard.getUnits();
- Observable.notify('select', trooper);
- gameboard.setCounter('prone');
- Observable.notify('select');
-
- window.gb = gameboard;
+ //const [_, trooper] = gameboard.getUnits();
+ //Observable.notify('select', trooper);
+ //gameboard.setCounter('prone');
+ //Observable.notify('select');
}
function updateTurnCounter() {
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 7291d52..25d17e2 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -227,14 +227,17 @@ export function start(el) {
// For when the pointer leaves the window
document.querySelector('object').addEventListener('pointerout', e => {
console.log('object pointerout');
+ console.log('Left map... CLEARING HOVERS');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
- //[...frontmost.children].forEach(child => {
- // const parent = frontmostStore.get(child);
- // parent.append(child);
- // parent.classList.remove('hover');
- // firingArc.toggleCounterVisibility(svg, child, false);
- // frontmostStore.delete(child);
- //});
+
+ [...frontmost.children].forEach(child => {
+ const parent = frontmostStore.get(child);
+ parent.append(child);
+ if (child.classList.contains('counter')) {
+ firingArc.toggleCounterVisibility(svg, child, false);
+ }
+ frontmostStore.delete(child);
+ });
console.log('object', svg.querySelectorAll('.hover'));
});
@@ -259,6 +262,15 @@ export function start(el) {
if (!targetCell) {
console.log('No target cell... CLEARING HOVERS');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
+
+ [...frontmost.children].forEach(child => {
+ const parent = frontmostStore.get(child);
+ parent.append(child);
+ if (child.classList.contains('counter')) {
+ firingArc.toggleCounterVisibility(svg, child, false);
+ }
+ frontmostStore.delete(child);
+ });
}
// Pointer moves over a cell
@@ -281,6 +293,29 @@ export function start(el) {
].every(e => e)) {
console.log('Target cell missing hover... CLEARING HOVERS AND ADDING TO TARGET CELL');
svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
+
+ [...frontmost.children].forEach(child => {
+ const parent = frontmostStore.get(child);
+ parent.append(child);
+ if (child.classList.contains('counter')) {
+ firingArc.toggleCounterVisibility(svg, child, false);
+ }
+ frontmostStore.delete(child);
+ });
+
+ frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
+
+ const children = [...targetCell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex');
+ if (children.length > 0) {
+ children.forEach(child => {
+ if (child.classList.contains('counter')) {
+ firingArc.toggleCounterVisibility(svg, child, true);
+ }
+ frontmostStore.set(child, targetCell);
+ frontmost.append(child);
+ });
+ }
+
targetCell.classList.contains('frontmost') ? frontmostStore.get(e.target.closest('.frontmost > *')).classList.add('hover') : targetCell.classList.add('hover');
}
}
@@ -372,9 +407,7 @@ export function start(el) {
// console.log('frontmost contents', frontmost.children);
//});
- grid.addEventListener('click', e => {
- console.log('click', e.target);
- });
+ grid.addEventListener('click', clickHandler);
const clearHexDialog = document.querySelector('#clear-hex');
//clearHexDialog.addEventListener('close', e => {
@@ -420,19 +453,20 @@ export function start(el) {
startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard));
function clickHandler(e) {
- const occupant = svg.querySelector('.grid-top .container .counter');
+ const targetCell = e.target.closest('[data-q][data-r][data-s][data-t]') || frontmostStore.get(e.target.closest('.frontmost > *'));
+ const occupant = frontmost.querySelector('.counter');
let toPlace = placing.pop();
if (isCounter(toPlace) || isMechTemplate(toPlace)) {
- top.collection.set(toPlace, { parent: top.cell });
- top.container.append(toPlace);
- if (isCounter(toPlace)) arrangeCounters(top.container);
+ frontmostStore.set(toPlace, targetCell);
+ frontmost.append(toPlace);
+ if (isCounter(toPlace)) arrangeCounters(frontmost);
removeEventListener("keydown", handleMechTemplateRotation);
} else if (toPlace && !occupant) {
- top.collection.set(toPlace, { parent: top.cell });
- top.container.prepend(toPlace);
+ frontmostStore.set(toPlace, targetCell);
+ frontmost.prepend(toPlace);
placing.push(toPlace);
- getLockedSightLine(svg) ? updateSightLine(top.cell) : clearSightLine();
+ getLockedSightLine(svg) ? updateSightLine(targetCell) : clearSightLine();
} else if (toPlace && occupant) {
if (toPlace === occupant) {
Observable.notify('select');
@@ -496,28 +530,29 @@ export function start(el) {
// debug //
// Add a trooper counter
- const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
- const cell2 = getCell(-1, 0, 1, 0);
- frontmost.setAttributeNS(null, 'transform', cell2.getAttributeNS(null, 'transform'));
- const trooper2 = soldier.createCounter(defender, 'blazer');
- frontmostStore.set(trooper2, cell2);
- frontmost.append(trooper2);
-
- const cell = getCell(0, 0, 0, 0);
- const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
- const trooper = soldier.createCounter(attacker, 'blazer');
- soldier.place(svg, trooper, cell);
+ //const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
+ //const cell2 = getCell(-1, 0, 1, 0);
+ //frontmost.setAttributeNS(null, 'transform', cell2.getAttributeNS(null, 'transform'));
+ //const trooper2 = soldier.createCounter(defender, 'blazer');
+ //frontmostStore.set(trooper2, cell2);
+ //frontmost.append(trooper2);
+ //cell2.classList.add('hover');
+ //
+ //const cell = getCell(0, 0, 0, 0);
+ //const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
+ //const trooper = soldier.createCounter(attacker, 'blazer');
+ //soldier.place(svg, trooper, cell);
// Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0);
- const counter = document.createElementNS(svgns, 'use');
- const name = 'grenade';
- counter.setAttributeNS(null, 'href', `#counter-${name}`);
- counter.classList.add(`counter-${name}`);
- frontmostStore.set(counter, cell2);
- frontmost.append(counter);
- arrangeCounters(frontmost)
+ //const counter = document.createElementNS(svgns, 'use');
+ //const name = 'grenade';
+ //counter.setAttributeNS(null, 'href', `#counter-${name}`);
+ //counter.classList.add(`counter-${name}`);
+ //frontmostStore.set(counter, cell2);
+ //frontmost.append(counter);
+ //arrangeCounters(frontmost)
//counter.addEventListener('click', e => {
// e.stopPropagation()