WIP: smoothe squad view

src/index.js

@@ -279,6 +279,41 @@ document.querySelectorAll('#record-sheet [data-allegiance]').forEach(el => {
   );
 });
 
+document.querySelectorAll('.view-squad').forEach(b => b.addEventListener('click', e => {
+  const currentSquad = b.closest('.records-header').querySelector('.squad-number text');
+  const currentSquadContainer = b.closest('[id$="-record"]').querySelector(`.records > .squad-${currentSquad.textContent}`);
+
+  if (b.value === 'next') {
+    //const toSquad = currentSquadContainer.nextElementSibling || b.closest('[id$="-record"]').querySelector('.records > :first-child');
+    const toSquad = currentSquadContainer.nextElementSibling;
+    if (!toSquad) return;
+    currentSquad.textContent = +toSquad.className.match(/\d+/);
+
+    currentSquadContainer.addEventListener('transitionend', e => {
+      console.log('transitionend', 'current', currentSquadContainer, 'next', toSquad);
+      currentSquadContainer.style.display = 'none';
+      toSquad.style.display = 'block';
+      b.closest('[id$="-record"]').querySelector('.records').scrollTo(0, 0);
+      toSquad.style.transform = 'translateX(0)';
+    }, { once: true });
+
+    currentSquadContainer.style.transform = 'translateX(-100%)';
+  } else {
+    const toSquad = currentSquadContainer.previousElementSibling;
+    if (!toSquad) return;
+    currentSquad.textContent = +toSquad.className.match(/\d+/);
+
+    currentSquadContainer.addEventListener('transitionend', e => {
+      currentSquadContainer.style.display = 'none';
+      toSquad.style.display = 'block';
+      b.closest('[id$="-record"]').querySelector('.records').scrollTo(0, 0);
+      toSquad.style.transform = 'translateX(0)';
+    }, { once: true });
+
+    currentSquadContainer.style.transform = 'translateX(100%)';
+  }
+}));
+
 contentVisToggleEl.addEventListener('input', toggleContentVis);
 contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
 toggleContentVis();

src/modules/gameboard.js

@@ -378,10 +378,18 @@ export function start(el) {
   //frontmost.append(trooper2);
   //cell2.classList.add('hover');
   //
-  //const cell = getCell(0, 0, 0, 0);
-  //const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
-  //const trooper = soldier.createCounter(attacker, 'blazer');
-  //soldier.place(svg, trooper2, cell2);
+
+  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,12 +38,6 @@ const weapons = {
     shortRange: '1-44',
     longRange: '45-108'
   },
-  lmg: {
-    name: 'Light MG',
-    damage: '5L',
-    shortRange: '1-30',
-    longRange: '31-84'
-  },
   gl: {
     name: 'SMG w/Grenade Launcher',
     damage: '4/2/1 L',
@@ -52,8 +46,6 @@ const weapons = {
   }
 }
 
-const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');
-
 function createIcon(number) {
   const [icon, use, text] = ['svg', 'use', 'text'].map(t => document.createElementNS(svgns, t));
 
@@ -172,16 +164,18 @@ function createRecord(unit) {
 }
 
 function createRecords(units) {
-  const grouped = Array.from(units).reduce((acc, unit) => {
-    acc[unit.dataset.allegiance]?.push(unit) || (acc[unit.dataset.allegiance] = [unit]);
+  return Array.from(units).reduce((acc, unit) => {
+    const record = createRecord(unit),
+      { allegiance, squad } = unit.dataset;
+
+    if (acc[allegiance]) {
+      acc[allegiance][squad]?.push(record) || (acc[allegiance][squad] = [record])
+    } else {
+      acc[allegiance] = { [squad]: [record] }
+    }
+
     return acc;
   }, {});
-
-  for (const al in grouped) {
-    grouped[al] = grouped[al].map(createRecord);
-  }
-
-  return grouped;
 }
 
 function getRecord({ dataset: { allegiance: al, number: n, squad: s }}) {
@@ -199,7 +193,12 @@ function deselect() {
 }
 
 function clear() {
-  document.querySelectorAll('#record-sheet .soldier-record').forEach(el => el.remove());
+  document.querySelectorAll('#record-sheet > *').forEach(el => {
+    //el.querySelectorAll('.squad-number').forEach(sn => sn.remove());
+    const records = el.querySelector('.records');
+    records.dataset.viewSquadNumber = 1;
+    [...records.children].forEach(c => c.remove());
+  });
   //document.querySelector('#attacker-record .name').textContent = 'attacker';
   //document.querySelector('#defender-record .name').textContent = 'defender';
 }
@@ -212,8 +211,52 @@ function select(data) {
 
   if (isSelected || !data) return;
 
-  record.classList.add('selected');
-  record.scrollIntoView({ behavior: 'smooth' });
+  const currentSquadView = document.querySelector(`#record-sheet #${record.dataset.allegiance}-record .records-header .squad-number text`);
+  const records = document.querySelector(`#record-sheet #${record.dataset.allegiance}-record .records`);
+  const target = records.querySelector(`.squad-${record.dataset.squad}`);
+  const currentSquad = records.querySelector(`.squad-${currentSquadView.textContent}`);
+
+  let direction;
+  let next = prev = currentSquad;
+
+  while (!direction && (next || prev)) {
+    next = next?.nextElementSibling;
+    prev = prev?.previousElementSibling;
+    if (next === target) direction = 'next';
+    else if (prev === target) direction = 'previous';
+  }
+
+  function showSquad(current, target, direction) {
+    current.addEventListener('transitionend', e => {
+      const toSquad = current[`${direction}ElementSibling`];
+      currentSquadView.textContent = +toSquad.className.match(/\d+/);
+      current.style.display = 'none';
+
+      // There needs to be a delay between making it visible and the
+      // transformation. ScrollTo seems to create enough delay.
+      toSquad.style.display = 'block';
+      records.scrollTo(0, 0);
+      if (toSquad[`${direction}ElementSibling`] && toSquad !== target) {
+        showSquad(toSquad, target, direction);
+      } else {
+        toSquad.style.transform = 'translateX(0)';
+
+        toSquad.addEventListener('transitionend', e => {
+          record.classList.add('selected');
+          record.scrollIntoView({ behavior: 'smooth' });
+        }, { once: true });
+      }
+    }, { once: true });
+
+    current.style.transform = `translateX(${direction === 'next' ? '-' : ''}100%)`;
+  }
+
+  if (currentSquad !== target)
+    showSquad(currentSquad, target, direction);
+  else {
+    record.classList.add('selected');
+    record.scrollIntoView({ behavior: 'smooth' });
+  }
 }
 
 function endMove() {
@@ -254,12 +297,16 @@ export function start(startLoc, units) {
   for (const affiliation in forces) {
     const container = document.querySelector(`#${affiliation}-record`);
     const records = container.querySelector('.records');
-    // const name = startLoc?.dataset[`${affiliation}Name`];
+    const viewSquadIndicator = container.querySelector('.squad-number svg text');
 
-    // if (name) {
-    //   container.querySelector('.name').textContent = name;
-    // }
-    forces[affiliation].forEach(r => records.appendChild(r));
+    for (const squadNumber in forces[affiliation]) {
+      const squadContainer = document.createElement('div');
+      squadContainer.classList.add(`squad-${squadNumber}`);
+      forces[affiliation][squadNumber].forEach(r => squadContainer.append(r));
+      records.append(squadContainer);
+    }
+
+    viewSquadIndicator.textContent = Object.keys(forces[affiliation])[0];
   }
 
   document.querySelectorAll('.soldier-record').forEach(el =>