Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat (limited to 'src/modules')
-rw-r--r--src/modules/counter.js61
-rw-r--r--src/modules/game.js12
2 files changed, 30 insertions, 43 deletions
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)) {