WIP: view squad record sheets
This commit is contained in:
parent
f35d716bd3
commit
7c2b441c7c
@ -346,32 +346,6 @@ div#content {
|
||||
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 {
|
||||
width: 31px;
|
||||
height: 31px;
|
||||
|
28
src/index.js
28
src/index.js
@ -145,8 +145,7 @@ async function load() {
|
||||
document.querySelectorAll('.end-turn').forEach(el =>
|
||||
el.addEventListener('click', ({ target: { dataset: { allegiance: opponent }}}) => {
|
||||
const dataSelector = `[data-allegiance="${opponent}"]`,
|
||||
opponentRecords = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}:not(.inactive)`)),
|
||||
firstOpponentRecord = opponentRecords.sort((el1, el2) => el1.dataset.number > el2.dataset.number).at(0);
|
||||
opponentRecords = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}:not(.inactive)`));
|
||||
|
||||
el.setAttribute('disabled', '');
|
||||
updateTurnCounter();
|
||||
@ -155,9 +154,9 @@ document.querySelectorAll('.end-turn').forEach(el =>
|
||||
|
||||
gameboard.clearFiringArcs(opponent);
|
||||
|
||||
if (firstOpponentRecord) {
|
||||
Observable.notify('select', firstOpponentRecord);
|
||||
firstOpponentRecord.scrollIntoView({ behavior: 'smooth' });
|
||||
if (opponentRecords.length > 0) {
|
||||
Observable.notify('select', opponentRecords.at(0));
|
||||
//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';
|
||||
});
|
||||
|
||||
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 => {
|
||||
const currentSquad = b.closest('.records-header').querySelector('.squad-number text');
|
||||
const currentSquadContainer = b.closest('[id$="-record"]').querySelector(`.records > .squad-${currentSquad.textContent}`);
|
||||
|
@ -263,13 +263,14 @@ function endMove() {
|
||||
const selected = getSelected();
|
||||
|
||||
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');
|
||||
const next = selected.parentElement.querySelector(`.soldier-record[data-squad="${selected.dataset.squad}"]:not(.movement-ended, .inactive)`);
|
||||
deselect();
|
||||
|
||||
if (next) {
|
||||
Observable.notify('select', next);
|
||||
next.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user