Add ability to deactivate/reactivate soldier records; make hex clearing work with right-click and add a confirmation modal dialog

src/modules/record_sheet.js

@@ -99,6 +99,45 @@ function createRecord(unit) {
 
   spans.forEach(el => div.appendChild(el));
 
+  function makeInactiveDivider(parent) {
+    const div = document.createElement('div');
+    div.classList.add('inactive-divider');
+    div.textContent = 'Inactive';
+    parent.append(div);
+    return div;
+  }
+
+  div.addEventListener('contextmenu', e => {
+    e.preventDefault();
+
+    if (!div.classList.contains('inactive')) {
+      const inactiveDivider = div.parentElement.querySelector('.inactive-divider') || makeInactiveDivider(div.parentElement);
+
+      div.addEventListener('transitionend', e => {
+        inactiveDivider.after(div);
+        inactiveDivider.scrollIntoView({ behavior: 'smooth' });
+      });
+
+      div.classList.add('inactive');
+      div.setAttributeNS(null, 'style', 'transform: scale(0.9);');
+    } else {
+      const squadRecords = div.parentElement.querySelectorAll(`.soldier-record:not(.inactive)[data-squad="${div.dataset.squad}"]`);
+      const sorted = [...squadRecords, div].sort(({dataset: { number: a }}, {dataset: { number: b }}) => +a > +b);
+      const index = sorted.findIndex(record => record === div);
+
+      if (index === 0)
+        div.parentElement.prepend(div);
+      else if (index === sorted.length - 1)
+        sorted[sorted.length - 2].after(div)
+      else
+        sorted[index - 1].after(div)
+
+      div.classList.remove('inactive');
+      div.removeAttributeNS(null, 'style');
+      div.scrollIntoView({ behavior: 'smooth' });
+    }
+  });
+
   return div;
 }
 
@@ -144,6 +183,7 @@ function select(data) {
   if (isSelected || !data) return;
 
   record.classList.add('selected');
+  record.scrollIntoView({ behavior: 'smooth' });
 }
 
 function endMove() {
@@ -151,9 +191,14 @@ function endMove() {
 
   if (selected) {
     selected.classList.toggle('movement-ended');
-  }
+    const next = selected.parentElement.querySelector(`.soldier-record[data-squad="${selected.dataset.squad}"]:not(.movement-ended, .inactive)`);
+    deselect();
 
-  deselect();
+    if (next) {
+      Observable.notify('select', next);
+      next.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
 }
 
 export function extractWeaponFromRecord(recordEl) {