ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change troop-number and troop-allegiance references to just number and allegiance

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 22:41:29 -07:00
parent 714b08a8ee
commit 5eadfa0c87
5 changed files with 63 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/index.js
View File

@@ -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));
})
);

61
src/modules/counter.js
View File

@@ -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)}`;
traceSelector(counter) {
return `polyline.move-trace${this.dataSelector(counter)}`;
}
getCounters() {
return this.svg.querySelectorAll(`.counter[data-allegiance][data-number]:not(.clone)`);
getClones(counter) {
return this.svg.querySelectorAll(`.counter.clone${this.dataSelector(counter)}`);
}
getClones(al, n) {
return this.svg.querySelectorAll(`.counter.clone[data-allegiance="${al}"][data-number="${n}"]`);
getCounter(selected) {
return this.svg.querySelector(`.counter${this.dataSelector(selected)}:not(.clone)`);
}
getCounter(al, n) {
return this.svg.querySelector(`.counter[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`);
getCounterAndClones(counter) {
return this.svg.querySelectorAll(`.counter${this.dataSelector(counter)}`);
}
getCounterAndClones(al, n) {
return this.svg.querySelectorAll(`.counter[data-allegiance="${al}"][data-number="${n}"]`);
}
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) {

12
src/modules/game.js
View File

@@ -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)) {