ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: smoothe squad view

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-08-05 15:29:45 -07:00
parent 34ed6e2a9c
commit f35d716bd3
6 changed files with 230 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
public/assets/css/style.css
View File

@ -271,26 +271,35 @@ div#content {
overflow-x: hidden; overflow-x: hidden;
} }
.soldier-record { #record-sheet .records [class^="squad-"] {
transition: transform 0.125s;
}
#record-sheet .records > :not(:first-child) {
display: none; display: none;
transform: translateX(100%);
} }
#record-sheet [data-view-squad-number="1"].records .soldier-record[data-squad="1"] { /*.soldier-record {*/
display: block; /* display: none;*/
} /*}*/
#record-sheet [data-view-squad-number="2"].records .soldier-record[data-squad="2"] { /*#record-sheet [data-view-squad-number="1"].records .soldier-record[data-squad="1"] {*/
display: block; /* display: block;*/
} /*}*/
/**/
/*#record-sheet [data-view-squad-number="2"].records .soldier-record[data-squad="2"] {*/
#record-sheet [data-view-squad-number="3"].records .soldier-record[data-squad="3"] { /* display: block;*/
display: block; /*}*/
} /**/
/**/
#record-sheet [data-view-squad-number="4"].records .soldier-record[data-squad="4"] { /*#record-sheet [data-view-squad-number="3"].records .soldier-record[data-squad="3"] {*/
display: block; /* display: block;*/
} /*}*/
/**/
/*#record-sheet [data-view-squad-number="4"].records .soldier-record[data-squad="4"] {*/
/* display: block;*/
/*}*/
#record-sheet .name { #record-sheet .name {
text-transform: capitalize; text-transform: capitalize;

72
public/assets/images/map4.svg
View File

@ -4,7 +4,6 @@
<g id="building1" class="building"> <g id="building1" class="building">
<g class="footprint"> <g class="footprint">
<g data-q="0" data-r="0" data-s="0" data-left="1" data-top="3" data-right="2" data-bottom="4" data-offset="left" /> <g data-q="0" data-r="0" data-s="0" data-left="1" data-top="3" data-right="2" data-bottom="4" data-offset="left" />
<g data-q="0" data-r="0" data-s="0" data-left="1" data-top="3" data-right="4" data-bottom="4" data-offset="left" />
</g> </g>
<g class="structure"> <g class="structure">
@ -25,7 +24,7 @@
<rect id="cabinet" x="-2.5" y="-4.75" width="5" height="9.5" /> <rect id="cabinet" x="-2.5" y="-4.75" width="5" height="9.5" />
<g id="mapsheet" class="mapsheet"> <g id="mapsheet" class="mapsheet">
<g class="building1" data-q="1" data-r="-2" data-s="1"> <g class="building1" data-q="3" data-r="-5" data-s="2">
<use href="#building1"/> <use href="#building1"/>
<g class="furniture"> <g class="furniture">
<use href="#couch" transform="rotate(90,10.34,-27.66)" /> <use href="#couch" transform="rotate(90,10.34,-27.66)" />
@ -44,7 +43,6 @@
</g> </g>
<use href="counters.svg#mech-template"/> <use href="counters.svg#mech-template"/>
<use href="counters.svg#fallen-mech-template"/> <use href="counters.svg#fallen-mech-template"/>
<use href="counters.svg#standing-mech-template"/>
<use href="counters.svg#vehicle-template"/> <use href="counters.svg#vehicle-template"/>
</defs> </defs>
@ -57,22 +55,82 @@
<g class="start-locations" data-attacker-name="liao" data-defender-name="davion"> <g class="start-locations" data-attacker-name="liao" data-defender-name="davion">
<g data-edge="north" style="--i: -2"> <g data-edge="north" style="--i: -2">
<g data-x="13"> <g class="counter" data-allegiance="attacker" data-number="1" data-squad="1">
<g class="counter" data-allegiance="attacker" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/> <use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/> <use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/> <use class="squad-number" href="counters.svg#number-1"/>
</g> </g>
<g class="counter" data-allegiance="attacker" data-number="2" data-squad="1">
<use class="primary-weapon" href="counters.svg#hsplaser"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-1"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="2" data-squad="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="3" data-squad="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-3"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="3">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-3"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="4">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="2" data-squad="4">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-4"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="1" data-squad="5">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g>
<g class="counter" data-allegiance="attacker" data-number="2" data-squad="5">
<use class="primary-weapon" href="counters.svg#rifle"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-5"/>
</g> </g>
</g> </g>
<g data-edge="south" style="--i: 53"> <g data-edge="south" style="--i: 53">
<g data-x="13"> <g class="counter" data-allegiance="defender" data-number="1" data-squad="1">
<g class="counter" data-allegiance="defender" data-number="1">
<use class="primary-weapon" href="counters.svg#blazer"/> <use class="primary-weapon" href="counters.svg#blazer"/>
<use class="troop-number" href="counters.svg#number-1"/> <use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-1"/> <use class="squad-number" href="counters.svg#number-1"/>
</g> </g>
<!--<g class="counter" data-allegiance="defender" data-number="2" data-squad="1">-->
<!-- <use class="primary-weapon" href="counters.svg#hsplaser"/>-->
<!-- <use class="troop-number" href="counters.svg#number-2"/>-->
<!-- <use class="squad-number" href="counters.svg#number-1"/>-->
<!--</g>-->
<g class="counter" data-allegiance="defender" data-number="1" data-squad="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-1"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g>
<g class="counter" data-allegiance="defender" data-number="2" data-squad="2">
<use class="primary-weapon" href="counters.svg#smg"/>
<use class="troop-number" href="counters.svg#number-2"/>
<use class="squad-number" href="counters.svg#number-2"/>
</g> </g>
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 7.6 KiB

48
public/index.html
View File

@ -263,7 +263,7 @@
<div id="record-sheet"> <div id="record-sheet">
<div id="attacker-record" data-allegiance="attacker"> <div id="attacker-record" data-allegiance="attacker">
<!-- <img class="logo" src="logo-davion.png" /> --> <!-- <img class="logo" src="logo-davion.png" /> -->
<div> <div class="records-header">
<div><strong class="name">Attacker</strong></div> <div><strong class="name">Attacker</strong></div>
<div><button type="button" class="end-move" data-allegiance="attacker"> <div><button type="button" class="end-move" data-allegiance="attacker">
End Movement End Movement
@ -271,30 +271,14 @@
<div><button type="button" class="end-turn" data-allegiance="defender"> <div><button type="button" class="end-turn" data-allegiance="defender">
End Turn End Turn
</button></div> </button></div>
<div class="squad-number selected" data-number="1"> <div><button type="button" class="view-squad" value="previous">&lt;</button></div>
<div class="squad-number">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle> <circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>1</text> <text>1</text>
</svg> </svg>
</div> </div>
<div class="squad-number" data-number="2"> <div><button type="button" class="view-squad" value="next">&gt;</button></div>
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>2</text>
</svg>
</div>
<div class="squad-number" data-number="3">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>3</text>
</svg>
</div>
<div class="squad-number" data-number="4">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>4</text>
</svg>
</div>
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br> <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry --> 17th Kestral Mechanized Infantry -->
</div> </div>
@ -302,7 +286,7 @@
</div> </div>
<div id="defender-record" data-allegiance="defender"> <div id="defender-record" data-allegiance="defender">
<!-- <img class="logo" src="logo-liao.png" /> --> <!-- <img class="logo" src="logo-liao.png" /> -->
<div> <div class="records-header">
<div><strong class="name">Defender</strong></div> <div><strong class="name">Defender</strong></div>
<div><button type="button" class="end-move" data-allegiance="defender"> <div><button type="button" class="end-move" data-allegiance="defender">
End Movement End Movement
@ -310,30 +294,16 @@
<div><button type="button" class="end-turn" data-allegiance="attacker"> <div><button type="button" class="end-turn" data-allegiance="attacker">
End Turn End Turn
</button></div> </button></div>
<div class="squad-number selected" data-number="1"> <div><button type="button" class="view-squad" value="previous">&lt;</button></div>
<div>
<div class="squad-number">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle> <circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>1</text> <text>1</text>
</svg> </svg>
</div> </div>
<div class="squad-number" data-number="2">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>2</text>
</svg>
</div>
<div class="squad-number" data-number="3">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>3</text>
</svg>
</div>
<div class="squad-number" data-number="4">
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
<text>4</text>
</svg>
</div> </div>
<div><button type="button" class="view-squad" value="next">&gt;</button></div>
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard --> Aldebaran Home Guard -->
</div> </div>

35
src/index.js
View File

@ -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.addEventListener('input', toggleContentVis);
contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false'); contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
toggleContentVis(); toggleContentVis();

16
src/modules/gameboard.js
View File

@ -378,10 +378,18 @@ export function start(el) {
//frontmost.append(trooper2); //frontmost.append(trooper2);
//cell2.classList.add('hover'); //cell2.classList.add('hover');
// //
//const cell = getCell(0, 0, 0, 0);
//const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }}; soldier.place(
//const trooper = soldier.createCounter(attacker, 'blazer'); svg,
//soldier.place(svg, trooper2, cell2); 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 // Add some counters in an unoccupied cell
//const countersCell = getCell(-1, 1, 0, 0); //const countersCell = getCell(-1, 1, 0, 0);

89
src/modules/record_sheet.js
View File

@ -38,12 +38,6 @@ const weapons = {
shortRange: '1-44', shortRange: '1-44',
longRange: '45-108' longRange: '45-108'
}, },
lmg: {
name: 'Light MG',
damage: '5L',
shortRange: '1-30',
longRange: '31-84'
},
gl: { gl: {
name: 'SMG w/Grenade Launcher', name: 'SMG w/Grenade Launcher',
damage: '4/2/1 L', 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) { function createIcon(number) {
const [icon, use, text] = ['svg', 'use', 'text'].map(t => document.createElementNS(svgns, t)); const [icon, use, text] = ['svg', 'use', 'text'].map(t => document.createElementNS(svgns, t));
@ -172,16 +164,18 @@ function createRecord(unit) {
} }
function createRecords(units) { function createRecords(units) {
const grouped = Array.from(units).reduce((acc, unit) => { return Array.from(units).reduce((acc, unit) => {
acc[unit.dataset.allegiance]?.push(unit) || (acc[unit.dataset.allegiance] = [unit]); const record = createRecord(unit),
return acc; { allegiance, squad } = unit.dataset;
}, {});
for (const al in grouped) { if (acc[allegiance]) {
grouped[al] = grouped[al].map(createRecord); 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 }}) { function getRecord({ dataset: { allegiance: al, number: n, squad: s }}) {
@ -199,7 +193,12 @@ function deselect() {
} }
function clear() { 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('#attacker-record .name').textContent = 'attacker';
//document.querySelector('#defender-record .name').textContent = 'defender'; //document.querySelector('#defender-record .name').textContent = 'defender';
} }
@ -212,8 +211,52 @@ function select(data) {
if (isSelected || !data) return; if (isSelected || !data) return;
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.classList.add('selected');
record.scrollIntoView({ behavior: 'smooth' }); 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() { function endMove() {
@ -254,12 +297,16 @@ export function start(startLoc, units) {
for (const affiliation in forces) { for (const affiliation in forces) {
const container = document.querySelector(`#${affiliation}-record`); const container = document.querySelector(`#${affiliation}-record`);
const records = container.querySelector('.records'); const records = container.querySelector('.records');
// const name = startLoc?.dataset[`${affiliation}Name`]; const viewSquadIndicator = container.querySelector('.squad-number svg text');
// if (name) { for (const squadNumber in forces[affiliation]) {
// container.querySelector('.name').textContent = name; const squadContainer = document.createElement('div');
// } squadContainer.classList.add(`squad-${squadNumber}`);
forces[affiliation].forEach(r => records.appendChild(r)); forces[affiliation][squadNumber].forEach(r => squadContainer.append(r));
records.append(squadContainer);
}
viewSquadIndicator.textContent = Object.keys(forces[affiliation])[0];
} }
document.querySelectorAll('.soldier-record').forEach(el => document.querySelectorAll('.soldier-record').forEach(el =>