| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-05 16:56:46 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-05 16:56:46 -0700 |
| commit | 7c2b441c7cea59631f6fb0588271b0fb5f10a79a (patch) | |
| tree | afe393547b0123ffef1f9b1a890c3ab98c4ef693 | |
| parent | f35d716bd38d03285fa511f6794af5d93e88f4dc (diff) | |
WIP: view squad record sheets
| -rw-r--r-- | public/assets/css/style.css | 26 | ||||
| -rw-r--r-- | src/index.js | 28 | ||||
| -rw-r--r-- | src/modules/record_sheet.js | 5 |
3 files changed, 7 insertions, 52 deletions
diff --git a/public/assets/css/style.css b/public/assets/css/style.css index bd90a4e..235fa73 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -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; diff --git a/src/index.js b/src/index.js index 62c1128..decc0f8 100644 --- a/src/index.js +++ b/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}`); diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js index 824668e..e5be4bf 100644 --- a/src/modules/record_sheet.js +++ b/src/modules/record_sheet.js @@ -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' }); } } } |