| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-28 14:36:56 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-28 14:36:56 -0700 |
| commit | e746cfb216836e26a6c060558278d724bd3ed5d5 (patch) | |
| tree | 394bc3919bab295f9a22128d8aee39555a35f3aa /src/modules | |
| parent | d75fb0b37c7dbfb58b14f563b1dc3fb2a73305b7 (diff) | |
Add clear hex contents dialog
Diffstat (limited to 'src/modules')
| -rw-r--r-- | src/modules/gameboard.js | 79 | ||||
| -rw-r--r-- | src/modules/pan-zoom.js | 6 |
2 files changed, 36 insertions, 49 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 44146f2..7c22dce 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -211,6 +211,16 @@ export function start(el) { top.container = svg.querySelector('.grid-top > .container'); const topHex = svg.querySelector('.grid-top > use[href="#hex"]'); + const clearHexDialog = document.querySelector('#clear-hex'); + clearHexDialog.addEventListener('close', e => { + if (clearHexDialog.returnValue === 'confirm') { + [...top.container.children].forEach(child => { + top.collection.delete(child); + child.remove(); + }); + } + }); + 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); @@ -227,6 +237,11 @@ export function start(el) { topHex.addEventListener('click', clickHandler); + topHex.addEventListener('contextmenu', e => { + e.preventDefault(); + getSelected() ? sightLine.toggleLock(top.cell) : clearHexDialog.showModal(); + }); + const startingLocations = svg.querySelector('.start-locations'); startingLocations && getUnits(startingLocations).forEach(unit => unit.addEventListener('click', selectOffBoard)); @@ -237,10 +252,8 @@ export function start(el) { 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) { @@ -249,7 +262,7 @@ export function start(el) { top.container.prepend(toPlace); //toPlace.removeEventListener('click', selectOffBoard); placing.push(toPlace); - //getLockedSightLine(svg) ? updateSightLine(this) : clearSightLine(); + getLockedSightLine(svg) ? updateSightLine(top.cell) : clearSightLine(); } else if (toPlace && occupant) { if (toPlace === occupant) { Observable.notify('select'); @@ -316,25 +329,18 @@ export function start(el) { const selected = getSelected(); }); - cell.addEventListener('dblclick', e => { - const toPlace = placing.pop(), - occupant = getCellOccupant(cell); - - if (toPlace && occupant && toPlace === occupant) { - const { number, allegiance } = toPlace.dataset, - selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`; - - svg.querySelectorAll(selector).forEach(el => el.remove()); - Observable.notify('select'); - } - }); - - cell.addEventListener('contextmenu', e => { - e.preventDefault(); - - sightLine.toggleLock(cell); - cell.dispatchEvent(new MouseEvent('pointerover')); - }); + //cell.addEventListener('dblclick', e => { + // const toPlace = placing.pop(), + // occupant = getCellOccupant(cell); + // + // if (toPlace && occupant && toPlace === occupant) { + // const { number, allegiance } = toPlace.dataset, + // selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`; + // + // svg.querySelectorAll(selector).forEach(el => el.remove()); + // Observable.notify('select'); + // } + //}); cell.addEventListener('pointerover', () => { console.log(['pointerenter', cell]); @@ -371,27 +377,6 @@ export function start(el) { firingArc.toggleCounterVisibility(svg, occupant, true); } }); - - //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); - // } - //} - //}); }); //const cell = document.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]'); @@ -402,14 +387,14 @@ export function start(el) { // 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, trooper, cell); + //soldier.place(svg, trooper, cell); // Add some counters in an unoccupied cell //const countersCell = getCell(-1, 1, 0, 0); diff --git a/src/modules/pan-zoom.js b/src/modules/pan-zoom.js index 11471f6..d13c90f 100644 --- a/src/modules/pan-zoom.js +++ b/src/modules/pan-zoom.js @@ -14,8 +14,10 @@ function restorePanZoomVal(el) { function addEventListeners(svg, el) { svg.addEventListener('wheel', e => zoom(el, e, zoomFactor), { passive: false }); svg.addEventListener('pointerdown', e => { - e.target.setPointerCapture(e.pointerId); - pan(svg, el, e), { passive: false }; + if (e.button === 0) { + e.target.setPointerCapture(e.pointerId); + pan(svg, el, e), { passive: false }; + } }); } |