index : btroops | |
Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
aboutsummaryrefslogtreecommitdiff |
diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/modules/gameboard.js | 134 |
1 files changed, 90 insertions, 44 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 5cf0c51..26e6c44 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -207,23 +207,71 @@ function endMove() { } } -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 gridTop = svg.querySelector('.grid-top'); + top.container = svg.querySelector('.grid-top > .container'); + const topHex = svg.querySelector('.grid-top > use[href="#hex"]'); + + gridTop.addEventListener('pointerleave', e => { + // Work around webkit bug https://bugs.webkit.org/show_bug.cgi?id=233432 + const elUnderCursor = svg.parentNode.elementFromPoint(e.clientX, e.clientY); + if (!e.target.contains(elUnderCursor)) { + console.log(['pointerleave', gridTop]); + [...top.container.children].forEach(child => { + top.collection.get(child).parent.append(child); + top.collection.delete(child); + }); + + top.cell = null; + } + }); + + topHex.addEventListener('click', clickHandler); const startingLocations = svg.querySelector('.start-locations'); startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard)); + function clickHandler(e) { + console.log('top hex click event'); + //const occupant = getCellOccupant(this); + const occupant = svg.querySelector('.grid-top .container .counter') + let toPlace = placing.pop(); + + if (isCounter(toPlace) || isMechTemplate(toPlace)) { + //getHex(this).after(toPlace); + top.collection.set(toPlace, { parent: top.cell }); + top.container.append(toPlace); + //if (isCounter(toPlace)) arrangeCounters(this); + if (isCounter(toPlace)) arrangeCounters(top.container); + removeEventListener("keydown", handleMechTemplateRotation); + } else if (toPlace && !occupant) { + //soldier.place(svg, toPlace, this); + top.collection.set(toPlace, { parent: top.cell }); + top.container.append(toPlace); + //toPlace.removeEventListener('click', selectOffBoard); + placing.push(toPlace); + //getLockedSightLine(svg) ? updateSightLine(this) : clearSightLine(); + } else if (toPlace && occupant) { + if (toPlace === occupant) { + Observable.notify('select'); + } else { + Observable.notify('select', occupant); + } + } else if (!toPlace && occupant) { + Observable.notify('select', occupant); + } else { + console.log(['removing this contents', this]); + getCellContents(this).forEach(el => el.remove()); + } + + const selected = getSelected(); + //Observable.notify('proneflag', selected && soldier.hasProne(selected)); + } + getCells(svg).forEach(cell => { cell.addEventListener('click', e => { + console.log('cell clickevent'); const occupant = getCellOccupant(cell); let toPlace = placing.pop(); @@ -293,26 +341,23 @@ export function start(el) { }); cell.addEventListener('pointerover', () => { - 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); - } - }); + console.log(['pointerenter', cell]); - top.container.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform')); + top.cell = cell; - [...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'); - } + [...top.container.children].forEach(child => { + top.collection.get(child).parent.append(child); + top.collection.delete(child); + }); + + top.container.parentElement.setAttributeNS(null, 'transform', cell.getAttributeNS(null, 'transform')); + + [...cell.children].filter(c => c.getAttributeNS(null, 'href') !== '#hex').forEach(child => { + top.collection.set(child, { parent: cell }); + top.container.append(child); + }); + let occupant = svg.querySelector('.grid-top .container .counter'); const selected = getSelected(); if (placing[0]?.getAttributeNS(null, 'class') == 'mech-template') { @@ -324,32 +369,33 @@ export function start(el) { drawSightLine(selected.parentElement, cell); } - let occupant = getCellOccupant(cell); + occupant = getCellOccupant(cell); if (occupant) { firingArc.toggleCounterVisibility(svg, occupant, true); } }); - cell.addEventListener('pointerout', e => { + //cell.addEventListener('pointerout', e => { + // console.log('pointerout'); // If pointerout was not triggered by hovering over an element on that // game hex - if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) { - [...top.container.children].forEach(child => { - top.collection.get(child).parent.append(child); - top.collection.delete(child); - }); - - cell.classList.remove('hover'); - getActiveSightLine(svg) && clearSightLine(); - - const occupant = getCellOccupant(cell); - - if (occupant) { - firingArc.toggleCounterVisibility(svg, occupant, false); - } - } - }); + //if (!e.relatedTarget || top.collection.get(e.relatedTarget)?.parent !== cell) { + // [...top.container.children].forEach(child => { + // top.collection.get(child).parent.append(child); + // top.collection.delete(child); + // }); + // + // cell.classList.remove('hover'); + // getActiveSightLine(svg) && clearSightLine(); + // + // const occupant = getCellOccupant(cell); + // + // if (occupant) { + // firingArc.toggleCounterVisibility(svg, occupant, false); + // } + //} + //}); }); //const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]'); |