Change troop-number and troop-allegiance references to just number and allegiance
This commit is contained in:
parent
714b08a8ee
commit
5eadfa0c87
@ -194,49 +194,49 @@
|
||||
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
|
||||
17th Kestral Mechanized Infantry -->
|
||||
</p>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="davion">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="davion">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
|
||||
<span slot="primary-weapon-type">Rifle</span>
|
||||
<span slot="primary-weapon-damage">4L</span>
|
||||
<span slot="primary-weapon-range-short">1-27</span>
|
||||
<span slot="primary-weapon-range-long">28-75</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="davion">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
|
||||
<span slot="primary-weapon-type">Rifle</span>
|
||||
<span slot="primary-weapon-damage">4L</span>
|
||||
<span slot="primary-weapon-range-short">1-27</span>
|
||||
<span slot="primary-weapon-range-long">28-75</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="3" data-allegiance="davion">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></span>
|
||||
<span slot="primary-weapon-type">SMG</span>
|
||||
<span slot="primary-weapon-damage">3L</span>
|
||||
<span slot="primary-weapon-range-short">1-15</span>
|
||||
<span slot="primary-weapon-range-long">16-25</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="davion">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="4" data-allegiance="davion">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></span>
|
||||
<span slot="primary-weapon-type">SMG</span>
|
||||
<span slot="primary-weapon-damage">3L</span>
|
||||
<span slot="primary-weapon-range-short">1-15</span>
|
||||
<span slot="primary-weapon-range-long">16-25</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="davion">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="5" data-allegiance="davion">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></span>
|
||||
<span slot="primary-weapon-type">SMG</span>
|
||||
<span slot="primary-weapon-damage">3L</span>
|
||||
<span slot="primary-weapon-range-short">1-15</span>
|
||||
<span slot="primary-weapon-range-long">16-25</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="davion">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="6" data-allegiance="davion">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></span>
|
||||
<span slot="primary-weapon-type">SMG</span>
|
||||
<span slot="primary-weapon-damage">3L</span>
|
||||
<span slot="primary-weapon-range-short">1-15</span>
|
||||
<span slot="primary-weapon-range-long">16-25</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="davion">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="7" data-allegiance="davion">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
|
||||
<span slot="primary-weapon-type">Blazer</span>
|
||||
<span slot="primary-weapon-damage">4L</span>
|
||||
@ -258,49 +258,49 @@
|
||||
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
|
||||
Aldebaran Home Guard -->
|
||||
</p>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="liao">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></span>
|
||||
<span slot="primary-weapon-type">Rifle</span>
|
||||
<span slot="primary-weapon-damage">4L</span>
|
||||
<span slot="primary-weapon-range-short">1-27</span>
|
||||
<span slot="primary-weapon-range-long">28-75</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="2" data-allegiance="liao">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></span>
|
||||
<span slot="primary-weapon-type">Rifle</span>
|
||||
<span slot="primary-weapon-damage">4L</span>
|
||||
<span slot="primary-weapon-range-short">1-27</span>
|
||||
<span slot="primary-weapon-range-long">28-75</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="3" data-allegiance="liao">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></span>
|
||||
<span slot="primary-weapon-type">SMG</span>
|
||||
<span slot="primary-weapon-damage">3L</span>
|
||||
<span slot="primary-weapon-range-short">1-15</span>
|
||||
<span slot="primary-weapon-range-long">16-25</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="liao">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="4" data-allegiance="liao">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></span>
|
||||
<span slot="primary-weapon-type">SMG</span>
|
||||
<span slot="primary-weapon-damage">3L</span>
|
||||
<span slot="primary-weapon-range-short">1-15</span>
|
||||
<span slot="primary-weapon-range-long">16-25</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="liao">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="5" data-allegiance="liao">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></span>
|
||||
<span slot="primary-weapon-type">SMG</span>
|
||||
<span slot="primary-weapon-damage">3L</span>
|
||||
<span slot="primary-weapon-range-short">1-15</span>
|
||||
<span slot="primary-weapon-range-long">16-25</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="liao">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="6" data-allegiance="liao">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></span>
|
||||
<span slot="primary-weapon-type">SMG</span>
|
||||
<span slot="primary-weapon-damage">3L</span>
|
||||
<span slot="primary-weapon-range-short">1-15</span>
|
||||
<span slot="primary-weapon-range-long">16-25</span>
|
||||
</div>
|
||||
<div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="liao">
|
||||
<div is="soldier-record-block" class="soldier-record" data-number="7" data-allegiance="liao">
|
||||
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></span>
|
||||
<span slot="primary-weapon-type">Blazer</span>
|
||||
<span slot="primary-weapon-damage">4L</span>
|
||||
|
||||
@ -245,11 +245,11 @@ g#points g.hover use.counter:not(.clone) {
|
||||
/* stroke-width: 2px; */
|
||||
}
|
||||
|
||||
g#points use.counter[data-troop-allegiance="davion"] {
|
||||
g#points use.counter[data-allegiance="davion"] {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
g#points use.counter[data-troop-allegiance="liao"] {
|
||||
g#points use.counter[data-allegiance="liao"] {
|
||||
fill: green;
|
||||
}
|
||||
|
||||
@ -259,11 +259,11 @@ g#points use.clone {
|
||||
stroke-dasharray: 1;
|
||||
}
|
||||
|
||||
g#points use[data-troop-allegiance="davion"].clone {
|
||||
g#points use[data-allegiance="davion"].clone {
|
||||
fill: rgb(255, 126, 126);
|
||||
}
|
||||
|
||||
g#points use[data-troop-allegiance="liao"].clone {
|
||||
g#points use[data-allegiance="liao"].clone {
|
||||
fill: rgb(130, 190, 130);
|
||||
}
|
||||
|
||||
@ -284,11 +284,11 @@ g#counters use:hover {
|
||||
r: 8px;
|
||||
} */
|
||||
|
||||
/* g#counters use[data-troop-allegiance="davion"] {
|
||||
/* g#counters use[data-allegiance="davion"] {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
g#counters use[data-troop-allegiance="liao"] {
|
||||
g#counters use[data-allegiance="liao"] {
|
||||
fill: green;
|
||||
} */
|
||||
|
||||
@ -298,11 +298,11 @@ g#counters use[data-troop-allegiance="liao"] {
|
||||
stroke-dasharray: 1;
|
||||
}
|
||||
|
||||
g#counters use[data-troop-allegiance="davion"].clone {
|
||||
g#counters use[data-allegiance="davion"].clone {
|
||||
fill: rgb(255, 126, 126);
|
||||
}
|
||||
|
||||
g#counters use[data-troop-allegiance="liao"].clone {
|
||||
g#counters use[data-allegiance="liao"].clone {
|
||||
fill: rgb(130, 190, 130);
|
||||
} */
|
||||
|
||||
@ -321,11 +321,11 @@ text.counter, #troop-counter text {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
polygon.firing-arc[data-troop-allegiance="davion"] {
|
||||
polygon.firing-arc[data-allegiance="davion"] {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
polygon.firing-arc[data-troop-allegiance="liao"] {
|
||||
polygon.firing-arc[data-allegiance="liao"] {
|
||||
fill: green;
|
||||
}
|
||||
|
||||
@ -360,11 +360,11 @@ button.set-firing-arc img {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] svg {
|
||||
.soldier-record[data-allegiance="liao"] [slot="troop-number"] svg {
|
||||
fill: green;
|
||||
}
|
||||
|
||||
.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] svg {
|
||||
.soldier-record[data-allegiance="davion"] [slot="troop-number"] svg {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
@ -384,11 +384,11 @@ button.set-firing-arc img {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.soldier-record[data-troop-allegiance="davion"] [slot="troop-number"] img {
|
||||
.soldier-record[data-allegiance="davion"] [slot="troop-number"] img {
|
||||
fill: red;
|
||||
}
|
||||
|
||||
.soldier-record[data-troop-allegiance="liao"] [slot="troop-number"] img {
|
||||
.soldier-record[data-allegiance="liao"] [slot="troop-number"] img {
|
||||
fill: green;
|
||||
}
|
||||
|
||||
|
||||
12
src/index.js
12
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));
|
||||
})
|
||||
);
|
||||
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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)) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user