Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-31 16:38:36 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-31 16:38:36 -0700
commitd270cd8174bafcf27fe99833165521d13e228d6f (patch)
tree13646081faa13fa6d27da6d8fea8eaec5134f79f
parent8f77c05bd94635da047069e118c9e62c0c2e3e34 (diff)
WIP: trying just using pointerovers
Diffstat
-rw-r--r--src/index.js10
-rw-r--r--src/modules/gameboard.js199
2 files changed, 143 insertions, 66 deletions
diff --git a/src/index.js b/src/index.js
index 2e2e306..e2b9fbb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -84,10 +84,12 @@ 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');
- //gameboard.setCounter('1st-floor');
+ const [_, trooper] = gameboard.getUnits();
+ Observable.notify('select', trooper);
+ gameboard.setCounter('prone');
+ Observable.notify('select');
+
+ window.gb = gameboard;
}
function updateTurnCounter() {
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 3f02784..7291d52 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -224,21 +224,92 @@ export function start(el) {
const grid = svg.querySelector('.grid');
const frontmost = grid.querySelector('.frontmost');
+ // For when the pointer leaves the window
+ document.querySelector('object').addEventListener('pointerout', e => {
+ console.log('object pointerout');
+ 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);
+ //});
+ console.log('object', svg.querySelectorAll('.hover'));
+ });
+
svg.addEventListener('pointerover', e => {
- //console.log('pointerover', e.target.closest('[data-q][data-r][data-s][data-t], .frontmost'), e);
- const targetCell = e.target.closest('[data-q][data-r][data-s][data-t]');
- console.log('SVG pointerover', targetCell);
- const counter = targetCell && targetCell.querySelector('.counter');
- //console.log('pointerover', 'targetCell', targetCell);
+ const targetCell = e.target.closest('[data-q][data-r][data-s][data-t], .frontmost');
+
+ console.log(
+ 'SVG pointerOVER ================================',
+ '\ne.target',
+ e.target,
+ '\ntarget closest',
+ targetCell,
+ '\ne.relatedTarget',
+ e.relatedTarget,
+ '\nrelatedTarget closest',
+ e.relatedTarget && e.relatedTarget.closest('[data-q][data-r][data-s][data-t]')
+ );
+
+ //console.log('target closest root', e.target.closest('[data-q][data-r][data-s][data-t] > *'));
+
+ // Pointer moves outside the edge of the grid
+ if (!targetCell) {
+ console.log('No target cell... CLEARING HOVERS');
+ svg.querySelectorAll('.hover').forEach(el => el.classList.remove('hover'));
+ }
- if (counter) {
- firingArc.toggleCounterVisibility(svg, counter, true);
- frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
- frontmostStore.set(counter, targetCell);
- frontmost.append(counter);
+ // Pointer moves over a cell
+ if (targetCell) {
+ //console.log(
+ // "targetCell.classList.contains('frontmost')", targetCell.classList.contains('frontmost'),
+ // "e.target.closest('.frontmost > *')", e.target.closest('.frontmost > *'),
+ // "frontmostStore.get(e.target.closest('.frontmost > *'))", frontmostStore.get(e.target.closest('.frontmost > *')),
+ // "frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover')", frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover')
+ //);
+
+ //if (
+ // !(targetCell.classList.contains('frontmost') && frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover')) && !targetCell.classList.contains('hover')
+ //) {
+ if ([
+ // that is not already highlighted
+ !targetCell.classList.contains('hover'),
+ // 's contents that is in frontmost, whose parent cell is not already highlighted
+ !(targetCell.classList.contains('frontmost') && frontmostStore.get(e.target.closest('.frontmost > *')).classList.contains('hover'))
+ ].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'));
+ targetCell.classList.contains('frontmost') ? frontmostStore.get(e.target.closest('.frontmost > *')).classList.add('hover') : targetCell.classList.add('hover');
+ }
}
- targetCell && targetCell.classList.add('hover');
+ //const counter = targetCell && targetCell.querySelector('.counter');
+ //console.log('pointerover', 'targetCell', targetCell);
+
+ //if (targetCell) {
+ // const children = [...targetCell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex');
+ // if (children.length > 0) {
+ // frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
+ // children.forEach(child => {
+ // if (child.classList.contains('counter')) {
+ // firingArc.toggleCounterVisibility(svg, child, true);
+ // }
+ // frontmostStore.set(child, targetCell);
+ // frontmost.append(child);
+ // });
+ // }
+ //}
+
+ //if (counter) {
+ // firingArc.toggleCounterVisibility(svg, counter, true);
+ // frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
+ // frontmostStore.set(counter, targetCell);
+ // frontmost.append(counter);
+ //}
+
+ //targetCell && targetCell.classList.add('hover');
//if (targetCell && !targetCell.classList.contains('frontmost')) {
// targetCell.classList.add('hover');
@@ -256,53 +327,50 @@ export function start(el) {
// });
// }
//}
- //console.log('frontmost contents', frontmost.children);
+ console.log('frontmost contents', frontmost.children);
});
- svg.addEventListener('pointerout', e => {
- //const targetCell = e.target.closest('[data-q][data-r][data-s][data-t], .frontmost');
- console.log('pointer out target', e.target);
- const targetCell = e.target.closest('[data-q][data-r][data-s][data-t], .frontmost');
-
- if (targetCell) {
- console.log('SVG pointerout', targetCell);
- [...frontmost.children].forEach(child => {
- //console.log('child', child, 'relatedTarget', e.relatedTarget);
- //if ([
- // !e.relatedTarget, // out of the window
- // targetCell.classList.contains('frontmost') && !e.relatedTarget.closest('.frontmost'), // from one element in frontmost to another element in frontmost
- // !targetCell.classList.contains('frontmost') && frontmostStore.get(child) === targetCell, // leaving from a hex under frontmost
- //].some(e => e)) {
- console.log('child', child, 'belongs to', frontmostStore.get(child));
- console.log('relatedTarget', e.relatedTarget);
- if (!e.relatedTarget || frontmostStore.get(child) !== targetCell || (e.relatedTarget !== child && !child.contains(e.relatedTarget))) {
- //if (!e.relatedTarget || frontmostStore.get(child) !== targetCell || e.relatedTarget !== child) {
- const parent = frontmostStore.get(child);
- console.log('returning to', parent);
- //console.log('RETURNING to', parent);
- parent.append(child);
-
- //if (child.classList.contains('.counter')) {
- // firingArc.toggleCounterVisibility(svg, child, false);
- //}
-
- firingArc.toggleCounterVisibility(svg, child, false);
- parent.classList.remove('hover');
- frontmostStore.delete(child);
- }
- });
- //targetCell.classList.remove('hover');
- if (frontmost.children.length < 1) targetCell.classList.remove('hover');
- } else {
- [...frontmost.children].forEach(child => {
- const parent = frontmostStore.get(child);
- parent.append(child);
- parent.classList.remove('hover');
- frontmostStore.delete(child);
- });
- }
- //console.log('frontmost contents', frontmost.children);
- });
+ //svg.addEventListener('pointerout', e => {
+ // //console.log('pointer out target', e.target);
+ // const targetCell = e.target.closest('[data-q][data-r][data-s][data-t], .frontmost');
+ // console.log('SVG pointerOUT', 'e.target', e.target, 'relatedTarget', e.relatedTarget, 'closest', targetCell);
+ //
+ // if (targetCell) {
+ // //console.log('SVG pointerout', targetCell);
+ // [...frontmost.children].forEach(child => {
+ // //console.log('child', child, 'relatedTarget', e.relatedTarget);
+ // //if ([
+ // // !e.relatedTarget, // out of the window
+ // // targetCell.classList.contains('frontmost') && !e.relatedTarget.closest('.frontmost'), // from one element in frontmost to another element in frontmost
+ // // !targetCell.classList.contains('frontmost') && frontmostStore.get(child) === targetCell, // leaving from a hex under frontmost
+ // //].some(e => e)) {
+ // console.log('child', child, 'belongs to', frontmostStore.get(child));
+ // //console.log('relatedTarget', e.relatedTarget);
+ // //if (!e.relatedTarget || frontmostStore.get(child) !== targetCell || (e.relatedTarget !== child && !child.contains(e.relatedTarget))) {
+ // //if (!e.relatedTarget || frontmostStore.get(child) !== targetCell || e.relatedTarget !== child) {
+ // const closest = e.relatedTarget && e.relatedTarget.closest('[data-q][data-r][data-s][data-t], .frontmost');
+ // if (!e.relatedTarget || (closest && !closest.classList.contains('hover') && !closest.classList.contains('frontmost'))) {
+ // const parent = frontmostStore.get(child);
+ // console.log('returning to', parent);
+ // parent.append(child);
+ // firingArc.toggleCounterVisibility(svg, child, false);
+ // parent.classList.remove('hover');
+ // frontmostStore.delete(child);
+ // }
+ // });
+ // if (frontmost.children.length < 1) targetCell.classList.remove('hover');
+ // } else {
+ // [...frontmost.children].forEach(child => {
+ // const parent = frontmostStore.get(child);
+ // parent.append(child);
+ // parent.classList.remove('hover');
+ // firingArc.toggleCounterVisibility(svg, child, false);
+ // frontmostStore.delete(child);
+ // });
+ // }
+ // console.log('hover cells', svg.querySelectorAll('.hover'));
+ // console.log('frontmost contents', frontmost.children);
+ //});
grid.addEventListener('click', e => {
console.log('click', e.target);
@@ -428,7 +496,12 @@ export function start(el) {
// debug //
// Add a trooper counter
- // const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
+ 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 }};
@@ -437,8 +510,15 @@ export function start(el) {
// 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)
+
//counter.addEventListener('click', e => {
// e.stopPropagation()
// const container = counter.parentElement;
@@ -446,11 +526,6 @@ export function start(el) {
// arrangeCounters(container);
//});
- //counter.setAttributeNS(null, 'href', `#counter-${name}`);
- //counter.classList.add(`counter-${name}`);
- //cell.append(counter);
- //arrangeCounters(cell)
-
//setCounter('grenade');
//setCounter('prone');
//setCounter('1st-floor');