WIP: trying just using pointerovers
This commit is contained in:
parent
8f77c05bd9
commit
d270cd8174
10
src/index.js
10
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() {
|
||||
|
||||
@ -224,21 +224,92 @@ export function start(el) {
|
||||
const grid = svg.querySelector('.grid');
|
||||
const frontmost = grid.querySelector('.frontmost');
|
||||
|
||||
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);
|
||||
// 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'));
|
||||
});
|
||||
|
||||
if (counter) {
|
||||
firingArc.toggleCounterVisibility(svg, counter, true);
|
||||
frontmost.setAttributeNS(null, 'transform', targetCell.getAttributeNS(null, 'transform'));
|
||||
frontmostStore.set(counter, targetCell);
|
||||
frontmost.append(counter);
|
||||
svg.addEventListener('pointerover', e => {
|
||||
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'));
|
||||
}
|
||||
|
||||
targetCell && targetCell.classList.add('hover');
|
||||
// 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');
|
||||
}
|
||||
}
|
||||
|
||||
//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');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user