From f35d716bd38d03285fa511f6794af5d93e88f4dc Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Mon, 5 Aug 2024 15:29:45 -0700
Subject: WIP: smoothe squad view
---
src/index.js | 35 +++++++++++++++++
src/modules/gameboard.js | 16 ++++++--
src/modules/record_sheet.js | 95 +++++++++++++++++++++++++++++++++------------
3 files changed, 118 insertions(+), 28 deletions(-)
(limited to 'src')
diff --git a/src/index.js b/src/index.js
index e6a8802..62c1128 100644
--- a/src/index.js
+++ b/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();
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 74e5582..8cb6af1 100644
--- a/src/modules/gameboard.js
+++ b/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);
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 01a9051..824668e 100644
--- a/src/modules/record_sheet.js
+++ b/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 acc;
- }, {});
+ return Array.from(units).reduce((acc, unit) => {
+ const record = createRecord(unit),
+ { allegiance, squad } = unit.dataset;
- for (const al in grouped) {
- grouped[al] = grouped[al].map(createRecord);
- }
+ if (acc[allegiance]) {
+ acc[allegiance][squad]?.push(record) || (acc[allegiance][squad] = [record])
+ } else {
+ acc[allegiance] = { [squad]: [record] }
+ }
- return grouped;
+ return acc;
+ }, {});
}
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');
+
+ 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);
+ }
- // if (name) {
- // container.querySelector('.name').textContent = name;
- // }
- forces[affiliation].forEach(r => records.appendChild(r));
+ viewSquadIndicator.textContent = Object.keys(forces[affiliation])[0];
}
document.querySelectorAll('.soldier-record').forEach(el =>
--
cgit v1.2.3