WIP: very rough armor

src/modules/gameboard.js

@@ -379,17 +379,17 @@ export function start(el) {
   //cell2.classList.add('hover');
   //
 
-  soldier.place(
-    svg,
-    soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 1 }}, 'hsplaser'),
-    getCell(-2, 3, -1, 0)
-  );
-
-  soldier.place(
-    svg,
-    soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 5 }}, 'rifle'),
-    getCell(-3, 3, 0, 0)
-  );
+  //soldier.place(
+  //  svg,
+  //  soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 1 }}, 'hsplaser'),
+  //  getCell(-2, 3, -1, 0)
+  //);
+  //
+  //soldier.place(
+  //  svg,
+  //  soldier.createCounter({ dataset: { allegiance: 'attacker', number: 2, squad: 5 }}, 'rifle'),
+  //  getCell(-3, 3, 0, 0)
+  //);
 
   // Add some counters in an unoccupied cell
   //const countersCell = getCell(-1, 1, 0, 0);

src/modules/record_sheet.js

@@ -38,11 +38,17 @@ const weapons = {
     shortRange: '1-44',
     longRange: '45-108'
   },
-  gl: {
+  smggl: {
     name: 'SMG w/Grenade Launcher',
     damage: '4/2/1 L',
     shortRange: '1-10',
     longRange: '11-24'
+  },
+  riflegl: {
+    name: 'Rifle w/Grenade Launcher',
+    damage: '4/2/1 L',
+    shortRange: '1-10',
+    longRange: '11-24'
   }
 }
 
@@ -121,6 +127,48 @@ function createRecord(unit) {
 
   spans.forEach(el => div.appendChild(el));
 
+  if (unit.dataset.armor) {
+    const s = `damage-block:nth-of-type(n + 1):nth-of-type(-n + ${unit.dataset.armor})`;
+    const armorBlocks = div.shadowRoot.querySelectorAll(s);
+
+    armorBlocks.forEach(el => {
+      el.classList.add('armor');
+    });
+
+    const ls = 'damage-block:nth-child(1 of .armor):not(:first-child)';
+    const rs = 'damage-block:nth-last-child(1 of .armor):not(:last-child)';
+    const moveArmorEl = div.shadowRoot.querySelectorAll(`${ls}, ${rs}`);
+
+    function moveArmorHandler(e) {
+      e.stopPropagation();
+
+      this.removeEventListener('click', moveArmorHandler);
+      if (!this.previousElementSibling.classList.contains('armor')) {
+        this.previousElementSibling.classList.add('armor');
+        this.previousElementSibling.addEventListener('click', moveArmorHandler);
+        let current = this.nextElementSibling;
+        while (current.nextElementSibling && current.nextElementSibling.classList.contains('armor')) {
+          current = current.nextElementSibling;
+        }
+        current.classList.remove('armor');
+        current.removeEventListener('click', moveArmorHandler);
+        current.previousElementSibling.addEventListener('click', moveArmorHandler);
+      } else if (!this.nextElementSibling.classList.contains('armor')) {
+        this.nextElementSibling.classList.add('armor');
+        this.nextElementSibling.addEventListener('click', moveArmorHandler);
+        let current = this.previousElementSibling;
+        while (current.previousElementSibling && current.previousElementSibling.classList.contains('armor')) {
+          current = current.previousElementSibling;
+        }
+        current.classList.remove('armor');
+        current.removeEventListener('click', moveArmorHandler);
+        current.nextElementSibling.addEventListener('click', moveArmorHandler);
+      }
+    }
+
+    moveArmorEl.forEach(el => el.addEventListener('click', moveArmorHandler));
+  }
+
   function makeInactiveDivider(parent) {
     const div = document.createElement('div');
     div.classList.add('inactive-divider');