Add clear hex contents dialog

public/index.html

@@ -358,6 +358,16 @@
     </form>
   </dialog>
 
+  <dialog id="clear-hex">
+    <p>Clear hex contents?</p>
+    <div>
+      <form>
+        <button value="cancel" formmethod="dialog">Cancel</button>
+        <button value="confirm" formmethod="dialog">Confirm</button>
+      </form>
+    </div>
+  </dialog>
+
   <input type="file" accept="image/svg+xml" />
 
   <script src="index.js"></script>

src/index.js

@@ -84,10 +84,10 @@ async function buildScenario(req) {
   // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
   recordSheet.start(null, scenarioUnits);
 
-  const [trooper] = gameboard.getUnits();
+  //const [trooper] = gameboard.getUnits();
-  Observable.notify('select', trooper);
+  //Observable.notify('select', trooper);
-  gameboard.setCounter('prone');
+  //gameboard.setCounter('prone');
-  gameboard.setCounter('1st-floor');
+  //gameboard.setCounter('1st-floor');
 }
 
 function updateTurnCounter() {

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 => {
+    //cell.addEventListener('dblclick', e => {
-      const toPlace = placing.pop(),
+    //  const toPlace = placing.pop(),
-        occupant = getCellOccupant(cell);
+    //    occupant = getCellOccupant(cell);
-
+    //
-      if (toPlace && occupant && toPlace === occupant) {
+    //  if (toPlace && occupant && toPlace === occupant) {
-        const { number, allegiance } = toPlace.dataset,
+    //    const { number, allegiance } = toPlace.dataset,
-          selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`;
+    //      selector = `[data-allegiance="${allegiance}"][data-number="${number}"]`;
-
+    //
-        svg.querySelectorAll(selector).forEach(el => el.remove());
+    //    svg.querySelectorAll(selector).forEach(el => el.remove());
-        Observable.notify('select');
+    //    Observable.notify('select');
-      }
+    //  }
-    });
+    //});
-
-    cell.addEventListener('contextmenu', e => {
-      e.preventDefault();
-
-      sightLine.toggleLock(cell);
-      cell.dispatchEvent(new MouseEvent('pointerover'));
-    });
 
     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 cell = getCell(0, 0, 0, 0);
-  const trooper = soldier.createCounter(attacker, 'blazer');
+  //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);

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);
+    if (e.button === 0) {
-    pan(svg, el, e), { passive: false };
+      e.target.setPointerCapture(e.pointerId);
+      pan(svg, el, e), { passive: false };
+    }
   });
 }