index : btroops | |
Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
aboutsummaryrefslogtreecommitdiff |
diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/index.js | 12 | ||||
-rw-r--r-- | src/modules/counter.js | 61 | ||||
-rw-r--r-- | src/modules/game.js | 12 |
3 files changed, 35 insertions, 50 deletions
diff --git a/src/index.js b/src/index.js index b4216be..d6204e8 100644 --- a/src/index.js +++ b/src/index.js @@ -18,7 +18,7 @@ const RecordSheet = new function () { this.select = function (data) { this.unSelect(); - document.querySelector(`#record-sheet .soldier-record[data-troop-number="${data.number}"][data-troop-allegiance="${data.allegiance}"]`).classList.add('selected'); + document.querySelector(`#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`).classList.add('selected'); document.getElementById('toggle-prone-counter').checked = data.prone; }; @@ -121,8 +121,7 @@ window.addEventListener('load', () => { game.unSelect(); RecordSheet.unSelect(); } else { - const { troopAllegiance: allegiance, troopNumber: number } = el.dataset; - game.select({ dataset: { allegiance, number }}); + game.select(el); } }) ); @@ -134,7 +133,7 @@ window.addEventListener('load', () => { document.querySelectorAll('.end-turn').forEach(el => el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => { - let dataSelector = `[data-troop-allegiance="${allegiance}"]`, + let dataSelector = `[data-allegiance="${allegiance}"]`, records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)), turnCounter = document.getElementById('turn-count'), { textContent: count, dataset: { update }} = turnCounter; @@ -153,12 +152,11 @@ window.addEventListener('load', () => { } records - .sort((el1, el2) => el1.dataset.troopNumber > el2.dataset.troopNumber) + .sort((el1, el2) => el1.dataset.number > el2.dataset.number) .forEach(el => el.classList.remove('movement-ended')); game.endTurn(allegiance); - const { troopAllegiance, troopNumber } = records.at(0).dataset; - game.select({ dataset: { allegiance: troopAllegiance, number: troopNumber }}); + game.select(records.at(0)); }) ); diff --git a/src/modules/counter.js b/src/modules/counter.js index f7b1d56..591f09b 100644 --- a/src/modules/counter.js +++ b/src/modules/counter.js @@ -7,12 +7,8 @@ export default class Counter { this.selectedClass = 'selected'; } - dataSelector(troopNumber, allegiance) { - return `[data-number="${troopNumber}"][data-allegiance="${allegiance}"]`; - } - - selector(troopNumber, allegiance) { - return `.counter${this.dataSelector(troopNumber, allegiance)}`; + dataSelector({ dataset: { allegiance, number }}) { + return `[data-number="${number}"][data-allegiance="${allegiance}"]`; } position(x, y) { @@ -23,28 +19,24 @@ export default class Counter { return `.counter[data-x="${x}"][data-x="${y}"]`; } - traceSelector(troopNumber, allegiance) { - return `polyline.move-trace${this.dataSelector(troopNumber, allegiance)}`; - } - - getCounters() { - return this.svg.querySelectorAll(`.counter[data-allegiance][data-number]:not(.clone)`); + traceSelector(counter) { + return `polyline.move-trace${this.dataSelector(counter)}`; } - getClones(al, n) { - return this.svg.querySelectorAll(`.counter.clone[data-allegiance="${al}"][data-number="${n}"]`); + getClones(counter) { + return this.svg.querySelectorAll(`.counter.clone${this.dataSelector(counter)}`); } - getCounter(al, n) { - return this.svg.querySelector(`.counter[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`); + getCounter(selected) { + return this.svg.querySelector(`.counter${this.dataSelector(selected)}:not(.clone)`); } - getCounterAndClones(al, n) { - return this.svg.querySelectorAll(`.counter[data-allegiance="${al}"][data-number="${n}"]`); + getCounterAndClones(counter) { + return this.svg.querySelectorAll(`.counter${this.dataSelector(counter)}`); } - getTrace({ dataset: { allegiance, number } }) { - return this.svg.querySelector(this.traceSelector(number, allegiance)); + getTrace(counter) { + return this.svg.querySelector(this.traceSelector(counter)); } getCellPosition(cell) { @@ -65,13 +57,13 @@ export default class Counter { } place(selected, cell) { - const { allegiance: troopAllegiance, number: troopNumber } = selected.dataset; - let points, - counterNodeList = this.getCounterAndClones(troopAllegiance, troopNumber); + counterNodeList = this.getCounterAndClones(selected); + + console.log(selected, counterNodeList); if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) { - let trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance)); + let trace = this.svg.querySelector(this.traceSelector(selected)); let prevCoords = [ selected.parentElement.dataset.x, @@ -102,8 +94,8 @@ export default class Counter { points = `${previous.x},${previous.y} ${current.x},${current.y}`; - trace.dataset.number = troopNumber; - trace.dataset.allegiance = troopAllegiance; + trace.dataset.number = selected.dataset.number; + trace.dataset.allegiance = selected.dataset.allegiance; trace.classList.add('move-trace'); this.getBoard().prepend(trace); @@ -118,28 +110,25 @@ export default class Counter { } } - removeClones({ dataset: { allegiance, number }}) { - this.getClones(allegiance, number).forEach(el => { - el.remove() - }); + removeClones(counter) { + this.getClones(counter).forEach(c => c.remove()); } - endMove(el) { - const { number, allegiance } = el.dataset, - trace = this.svg.querySelector(this.traceSelector(number, allegiance)), - proneCounter = el.querySelector('[href="#counter-prone"]'); + endMove(counter) { + const trace = this.svg.querySelector(this.traceSelector(counter)), + proneCounter = counter.querySelector('[href="#counter-prone"]'); if (trace) { trace.remove(); } - delete el.dataset.previous; + delete counter.dataset.previous; if (proneCounter) { proneCounter.dataset.preexisting = ''; } - this.removeClones(el); + this.removeClones(counter); } hasProne(counter) { diff --git a/src/modules/game.js b/src/modules/game.js index d6059ae..2810fba 100644 --- a/src/modules/game.js +++ b/src/modules/game.js @@ -50,8 +50,8 @@ export default class Game { return this.svg.querySelector('line.sight-line'); } - getExistingArcs(al, n) { - return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${n}"][data-allegiance="${al}"]`); + getExistingArcs({ dataset: { allegiance, number }}) { + return this.svg.querySelectorAll(`#firing-arcs polygon[data-number="${number}"][data-allegiance="${allegiance}"]`); } getUnclippedFiringArcs() { @@ -99,14 +99,14 @@ export default class Game { } } - select({ dataset: { allegiance, number } }) { - const counter = this.counter.getCounter(allegiance, number); + select(selected) { + const counter = this.counter.getCounter(selected); if (counter) { this.unSelect(); this.placing.push(counter); counter.classList.add(this.counter.selectedClass); - this.getExistingArcs(allegiance, number).forEach(el => el.removeAttribute('clip-path')); + this.getExistingArcs(counter).forEach(el => el.removeAttribute('clip-path')); this.selectCallback({ prone: this.counter.hasProne(counter), ...counter.dataset }); } } @@ -185,8 +185,6 @@ export default class Game { contents: this.getCellContents(cell) }; - console.log(state); - let toPlace = this.placing.pop(); if (isGrenade(toPlace)) { |