WIP: view squad record sheets
This commit is contained in:
parent
e3de50ceef
commit
60da021f13
@ -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;
|
||||||
|
28
src/index.js
28
src/index.js
@ -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}`);
|
||||||
|
@ -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' });
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user