WIP: view squad record sheets

This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:33 -07:00
parent e3de50ceef
commit 60da021f13
3 changed files with 7 additions and 52 deletions

View File

@ -346,32 +346,6 @@ div#content {
vertical-align: middle; vertical-align: middle;
} }
#record-sheet [data-allegiance="attacker"] .squad-number.selected svg,
#record-sheet [data-allegiance="attacker"] .squad-number:hover svg {
fill: white;
background-color: blue;
}
#record-sheet [data-allegiance="defender"] .squad-number.selected svg,
#record-sheet [data-allegiance="defender"] .squad-number:hover svg {
fill: white;
background-color: red;
}
#record-sheet .squad-number.selected svg circle {
fill: white;
}
#record-sheet [data-allegiance="attacker"] .squad-number.selected svg text,
#record-sheet [data-allegiance="attacker"] .squad-number:hover svg text {
fill: blue;
}
#record-sheet [data-allegiance="defender"] .squad-number.selected svg text,
#record-sheet [data-allegiance="defender"] .squad-number:hover svg text {
fill: red;
}
.die { .die {
width: 31px; width: 31px;
height: 31px; height: 31px;

View File

@ -145,8 +145,7 @@ async function load() {
document.querySelectorAll('.end-turn').forEach(el => document.querySelectorAll('.end-turn').forEach(el =>
el.addEventListener('click', ({ target: { dataset: { allegiance: opponent }}}) => { el.addEventListener('click', ({ target: { dataset: { allegiance: opponent }}}) => {
const dataSelector = `[data-allegiance="${opponent}"]`, const dataSelector = `[data-allegiance="${opponent}"]`,
opponentRecords = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}:not(.inactive)`)), opponentRecords = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}:not(.inactive)`));
firstOpponentRecord = opponentRecords.sort((el1, el2) => el1.dataset.number > el2.dataset.number).at(0);
el.setAttribute('disabled', ''); el.setAttribute('disabled', '');
updateTurnCounter(); updateTurnCounter();
@ -155,9 +154,9 @@ document.querySelectorAll('.end-turn').forEach(el =>
gameboard.clearFiringArcs(opponent); gameboard.clearFiringArcs(opponent);
if (firstOpponentRecord) { if (opponentRecords.length > 0) {
Observable.notify('select', firstOpponentRecord); Observable.notify('select', opponentRecords.at(0));
firstOpponentRecord.scrollIntoView({ behavior: 'smooth' }); //firstOpponentRecord.scrollIntoView({ behavior: 'smooth' });
} }
}) })
); );
@ -260,25 +259,6 @@ document.querySelector('#toggle-grid-vis input').addEventListener('change', func
svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none'; svg.querySelector('#dots').style.display = this.checked ? 'inline' : 'none';
}); });
document.querySelectorAll('#record-sheet [data-allegiance]').forEach(el => {
const squadNumbers = el.querySelectorAll(`.squad-number`);
const recordContainer = el.querySelector('.records');
squadNumbers.forEach(sn =>
sn.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
recordContainer.dataset.viewSquadNumber = this.dataset.number;
console.log();
squadNumbers.forEach(sn =>
sn.classList[sn.dataset.number === this.dataset.number ? 'add' : 'remove']('selected')
);
if (el.querySelector('.soldier-record.selected')) Observable.notify('select');
}
})
);
});
document.querySelectorAll('.view-squad').forEach(b => b.addEventListener('click', e => { document.querySelectorAll('.view-squad').forEach(b => b.addEventListener('click', e => {
const currentSquad = b.closest('.records-header').querySelector('.squad-number text'); const currentSquad = b.closest('.records-header').querySelector('.squad-number text');
const currentSquadContainer = b.closest('[id$="-record"]').querySelector(`.records > .squad-${currentSquad.textContent}`); const currentSquadContainer = b.closest('[id$="-record"]').querySelector(`.records > .squad-${currentSquad.textContent}`);

View File

@ -263,13 +263,14 @@ function endMove() {
const selected = getSelected(); const selected = getSelected();
if (selected) { if (selected) {
const list = selected.closest('.records').querySelectorAll('.soldier-record:not(.movement-ended, .inactive)');
const index = [...list].findIndex(s => s === selected);
const next = list.length > 1 ? list[(index + 1) % list.length] : null;
selected.classList.toggle('movement-ended'); 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) { if (next) {
Observable.notify('select', next); Observable.notify('select', next);
next.scrollIntoView({ behavior: 'smooth' });
} }
} }
} }