| 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-09 15:38:12 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-09 15:38:12 -0700 |
| commit | b14c070373dadc8a16afec7a0797a53c9515ccc2 (patch) | |
| tree | 9266d971d9c5f793d7d834fe2c6e57be8793c2fc | |
| parent | 90fe01caaf5b8e0488aef15eb5c76f1e87145797 (diff) | |
Change elevation level when revealing counter on map
| -rw-r--r-- | src/index.js | 23 | ||||
| -rw-r--r-- | src/modules/gameboard.js | 18 |
2 files changed, 22 insertions, 19 deletions
diff --git a/src/index.js b/src/index.js index ec652b3..2963a06 100644 --- a/src/index.js +++ b/src/index.js @@ -58,6 +58,7 @@ let scenarioTemplate; async function buildScenario(req) { gameboard.stop(); recordSheet.stop(); + Observable.notify('viewElevation', 0); const map = document.querySelector('object').contentDocument.querySelector('svg'); const template = scenarioTemplate.querySelector('svg').cloneNode(true); @@ -146,6 +147,12 @@ function roll(die) { return numsAsWords[getRandomIntInclusive(0, numsAsWords.length - 1)]; } +function viewElevation(elevationLevel) { + const id = elevationLevel >= 0 ? elevationLevel : 'basement'; + document.querySelector(`#select-elevation-${id}`).checked = true; + document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = elevationLevel; +} + async function load() { const svg = this.contentDocument.querySelector('svg'), startLocs = svg.querySelector('.start-locations') @@ -172,7 +179,10 @@ document.querySelectorAll('.end-turn').forEach(el => gameboard.clearFiringArcs(opponent); if (opponentRecords.length > 0) { - Observable.notify('select', opponentRecords.at(0), { revealCounter: true, revealRecord: true }); + Observable.notify('select', opponentRecords.at(0), { + revealCounter: true, + revealRecord: true + }); } }) ); @@ -256,17 +266,11 @@ document.querySelectorAll('.select-elevation button').forEach(el => el.addEventL next = next[siblingMethod]; } while (next !== null && !next.matches('input')); - if (next) { - next.checked = true; - const event = new Event('change', { value: next.value }); - next.dispatchEvent(event); - } + if (next) Observable.notify('viewElevation', next.value); })); document.querySelectorAll('[name="select-elevation"]').forEach(el => { - el.addEventListener('change', function (e) { - document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = this.value; - }); + el.addEventListener('change', e => Observable.notify('viewElevation', el.value)); }); document.querySelector('#toggle-grid-vis').addEventListener('change', function () { @@ -347,3 +351,4 @@ dice.forEach(el => { }); Observable.subscribe('distance', distance); +Observable.subscribe('viewElevation', viewElevation); diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 4407577..0bde2df 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -182,10 +182,16 @@ function selectOffBoard() { Observable.notify('select', this, { revealRecord: true }); } +function viewElevation(elevationLevel) { + const gb = svg.querySelector('.gameboard'); + gb.dataset.viewElevation = elevationLevel; +} + function panMapToCounter(counter) { const gb = svg.querySelector('.gameboard'); if (gb.contains(counter)) { + Observable.notify('viewElevation', counter.parentElement.dataset.t); const counterRect = counter.getBoundingClientRect(); const mapRect = svg.parentNode.defaultView.frameElement.getBoundingClientRect(); @@ -400,8 +406,6 @@ export function start(el) { // const trooper1 = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }}, 'blazer'); - - soldier.place(svg, trooper1, getCell(-3, 9, -6, 0)); soldier.place( @@ -410,14 +414,6 @@ export function start(el) { getCell(1, -8, 7, 0) ); - const t1Rect = trooper1.getBoundingClientRect(); - - setTimeout(() => { - const t1Rect = trooper1.getBoundingClientRect(); - console.log('trooper', trooper1, trooper1.getBoundingClientRect()); - - }, 10); - // Add some counters in an unoccupied cell //const countersCell = getCell(-1, 1, 0, 0); @@ -447,6 +443,7 @@ export function start(el) { Observable.subscribe('select', select); Observable.subscribe('endmove', endMove); + Observable.subscribe('viewElevation', viewElevation); console.log('gameboard.js loaded'); } @@ -454,6 +451,7 @@ export function start(el) { export function stop() { Observable.unsubscribe('select', select); Observable.unsubscribe('endmove', endMove); + Observable.unsubscribe('viewElevation', viewElevation); } export function getUnits() { |