Web Dev Solutions

+const svgns = "http://www.w3.org/2000/svg",

+ selectedClass = 'selected';

+

+

+export default class Counter {

+ constructor(svg, container) {

+ this.svg = svg;

+ this.container = container;

+

+ this.getCounters().forEach(c => this.addEventListeners(c));

+ }

+

+ dataSelector(troopNumber, allegiance) {

+ return `[data-number="${troopNumber}"][data-allegiance="${allegiance}"]`;

+ }

+

+ selector(troopNumber, allegiance) {

+ return `use.counter${this.dataSelector(troopNumber, allegiance)}`;

+ }

+

+ position(x, y) {

+ return `g[data-x="${x}"][data-y="${y}"]`;

+ }

+

+ counterPosition(x, y) {

+ return `use.counter[data-x="${x}"][data-x="${y}"]`;

+ }

+

+ traceSelector(troopNumber, allegiance) {

+ return `polyline.move-trace${this.dataSelector(troopNumber, allegiance)}`;

+ }

+

+ getCounters() {

+ return this.svg.querySelectorAll(`use[data-allegiance][data-number]:not(.clone)`);

+ }

+

+ getClones(al, n) {

+ return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"].clone`);

+ }

+

+ getCounter(al, n) {

+ return this.svg.querySelector(`use[data-allegiance="${al}"][data-number="${n}"]:not(.clone)`);

+ }

+

+ getCounterAndClones(al, n) {

+ return this.svg.querySelectorAll(`use[data-allegiance="${al}"][data-number="${n}"]`);

+ }

+

+

+ getCellPosition(cell) {

+ let pt = new DOMPoint(0, 0),

+ transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),

+ mtx = new DOMMatrix(transform);

+ pt = pt.matrixTransform(mtx);

+

+ transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);

+ mtx = new DOMMatrix(transform);

+ pt = pt.matrixTransform(mtx);

+

+ return pt;

+ }

+

+ addEventListeners(counter) {

+ counter.addEventListener('pointerover', this.pointerOver.bind(this));

+ counter.addEventListener('pointerout', this.pointerOut.bind(this));

+ counter.addEventListener('click', this.click.bind(this));

+ // counter.addEventListener('dblclick', dblClick);

+ }

+

+ pointerOver(e) {

+ const { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset,

+ cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);

+

+ if (cp) {

+ cp.style.display = 'none';

+ }

+ }

+

+ pointerOut(e) {

+ let { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset,

+ cp = this.svg.querySelector(`#clip-path-${troopAllegiance}-${troopNumber}`);

+

+ if (cp) {

+ let isVisible =

+ document

+ .getElementById('toggle-firing-arc-vis')

+ .querySelector(`input[data-allegiance="${troopAllegiance}"]`)

+ .checked;

+

+ cp.style.display = isVisible ? 'none' : '';

+ }

+ }

+

+ click(e) {

+ if (e.target.classList.contains(selectedClass)) {

+ e.stopPropagation();

+ let { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset,

+ trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));

+

+ if (trace) {

+ let points = trace.getAttribute('points').split(' '),

+ [clonePosX, clonePosY] = points.at(-2).split(',').map(p => parseFloat(p)),

+

+ { clone } = Array

+ .from(this.getClones(troopAllegiance, troopNumber))

+ .map(c => { return { clone: c, pos: this.getCellPosition(c.parentElement) }})

+ .find(({ pos: { x, y }}) => x == clonePosX && y == clonePosY);

+

+ points.pop();

+

+ if (points.length >= 2) {

+ trace.setAttributeNS(null, 'points', points.join(' '));

+ } else {

+ trace.remove();

+ }

+

+ let sl = this.svg.querySelector('.sight-line');

+

+ if (sl) {

+ this.container.sightLine.update(clone, this.getCellPosition(clone.parentElement));

+ } else {

+ this.container.sightLine.draw(e.target.parentElement, clone.parentElement);

+ }

+

+ const proneCounter = e.target.parentElement.querySelector('[href="#counter-prone"]');

+

+ if (proneCounter) {

+ proneCounter.remove();

+ }

+

+ this.container.proneFlagCallback(!!clone.parentElement.querySelector('[href="#counter-prone"]'));

+

+ clone.parentElement.appendChild(e.target);

+ clone.remove();

+ }

+ } else {

+ e.stopPropagation();

+ this.select(e.target);

+ }

+ }

+

+ clickClone(e) {

+ e.stopPropagation();

+

+ let { number: troopNumber, allegiance: troopAllegiance } = e.target.dataset,

+ pos = this.getCellPosition(e.target.parentElement);

+

+ if (this.isSelected(troopNumber, troopAllegiance)) {

+ let trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance)),

+ points = trace.getAttribute('points').split(' ');

+

+ if (`${pos.x},${pos.y}` == points.at(0)) {

+ const counter = this.getCounter(troopAllegiance, troopNumber),

+ lockedSl = this.svg.querySelector('.sight-line:not(.active)');

+

+ counter.setAttributeNS(null, 'x', 0);

+ counter.setAttributeNS(null, 'y', 0);

+

+ if (!lockedSl) {

+ this.container.sightLine.clear();

+ } else {

+ this.container.sightLine.update(e.target, this.container.getCellPosition(e.target.parentElement));

+ }

+

+ this.container.proneFlagCallback(!!e.target.parentElement.querySelector('[href="#counter-prone"]'));

+

+ e.target.parentElement.appendChild(counter);

+ e.target.remove();

+ this.removeClones(counter);

+ trace.remove();

+ } else {

+ const proneCounter = e.target.parentElement.querySelector('[href="#counter-prone"]');

+

+ if (proneCounter) {

+ proneCounter.remove();

+ }

+

+ points = points.filter(p => p != `${pos.x},${pos.y}`).join(' ');

+ trace.setAttributeNS(null, 'points', points);

+ e.target.remove();

+ }

+ }

+ }

+

+ dblClick(e) {

+ if (e.target.classList.contains(selectedClass)) {

+ let { troopNumber, troopAllegiance } = e.target.dataset,

+ trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));

+

+ if (!trace) {

+ e.target.remove();

+ this.svg.querySelectorAll(`#firing-arcs ${this.dataSelector(troopNumber, troopAllegiance)}`).forEach(el => el.remove());

+ }

+ }

+ }

+

+ select({ dataset: { allegiance, number }}) {

+ this.unSelect();

+

+ let counter = this.getCounter(allegiance, number);

+

+ if (counter) {

+ this.container.placing.push(counter);

+ counter.classList.add(selectedClass);

+ let existingArcs = this.container.getExistingArcs(allegiance, number);

+ existingArcs.forEach(el => el.removeAttribute('clip-path'));

+ this.container.selectCallback({ prone: this.hasProne(counter), ...counter.dataset });

+ }

+ }

+

+ unSelect() {

+ let selected = this.container.getSelected();

+ this.container.placing = [];

+

+ if (selected) {

+ let { troopNumber, troopAllegiance } = selected.dataset;

+

+ selected.classList.remove(selectedClass);

+ selected.removeAttribute('style');

+ this.container.sightLine.clear();

+

+ this

+ .svg

+ .querySelectorAll(`${this.selector(troopNumber, troopAllegiance)}.clone`)

+ .forEach(el => el.removeAttribute('style'));

+ }

+

+ this.container.clipFiringArcs();

+ }

+

+ get(troopNumber, allegiance) {

+ return this.container.getCounter(allegiance, troopNumber);

+ }

+

+ getAt(x, y) {

+ return this.container.querySelector(`${counterPosition(x, y)}:not(.clone)`);

+ }

+

+ isSelected(troopNumber, allegiance) {

+ return this.container.svg.querySelector(`${this.selector(troopNumber, allegiance)}.${selectedClass}`) !== null;

+ }

+

+ place(point) {

+ const selected = this.container.getSelected(),

+ troopAllegiance = selected.dataset.allegiance,

+ troopNumber = selected.dataset.number;

+

+ let counter, points,

+ counterNodeList = this.getCounterAndClones(troopAllegiance, troopNumber);

+

+ if (counterNodeList.length > 0 && selected.parentElement.hasAttribute('data-x')) {

+ let counters = Array.from(counterNodeList),

+ original = counters.find(el => !el.classList.contains('clone')),

+ trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));

+

+ counter = original.cloneNode();

+ counter.setAttributeNS(null, 'x', 0);

+ counter.setAttributeNS(null, 'y', 0);

+ counter.classList.remove(selectedClass);

+ counter.classList.add('clone');

+

+ original.setAttributeNS(null, 'x', 0);

+ original.setAttributeNS(null, 'y', 0);

+

+ original.parentElement.appendChild(counter);

+ point.parentElement.appendChild(original);

+

+ if (counter.parentElement.querySelector('[href="#counter-prone"]')) {

+ this.toggleProne();

+ }

+

+ let previous = this.getCellPosition(counter.parentElement),

+ current = this.getCellPosition(original.parentElement);

+

+ if (!trace) {

+ trace = document.createElementNS(svgns, 'polyline');

+

+ points = `${previous.x},${previous.y} ${current.x},${current.y}`;

+

+ trace.dataset.number = troopNumber;

+ trace.dataset.allegiance = troopAllegiance;

+ trace.classList.add('move-trace');

+

+ this.container.getBoard().prepend(trace);

+ } else {

+ points = `${trace.getAttribute('points')} ${current.x},${current.y}`;

+ }

+

+ trace.setAttributeNS(null, 'points', points);

+ counter.addEventListener('click', this.clickClone.bind(this));

+ } else {

+ selected.removeAttribute('data-x');

+ point.parentElement.appendChild(selected);

+ }

+ }

+

+ remove({ dataset: { troopNumber, troopAllegiance }}) {

+ this.container

+ .querySelectorAll(dataSelector(troopNumber, troopAllegiance))

+ .forEach(el => el.remove());

+ }

+

+ removeClones({ dataset: { allegiance, number }}) {

+ this.getClones(allegiance, number).forEach(el => {

+ const proneCounter = el.parentElement.querySelector('[href="#counter-prone"]');

+

+ if (proneCounter) {

+ proneCounter.remove();

+ }

+

+ el.remove()

+ });

+ }

+

+ endMove(el) {

+ let { number: troopNumber, allegiance: troopAllegiance } = el.dataset;

+ let trace = this.svg.querySelector(this.traceSelector(troopNumber, troopAllegiance));

+

+ if (trace) {

+ trace.remove();

+ }

+

+ this.removeClones(el);

+ this.unSelect();

+ }

+

+ hasProne(counter) {

+ const isOnBoard = counter.parentElement.hasAttribute('data-x');

+

+ if (isOnBoard) {

+ return !!counter.parentElement.querySelector('[href="#counter-prone"]');

+ }

+

+ return false;

+ }

+

+ toggleProne() {

+ const selected = this.container.getSelected(),

+ isOnBoard = selected && selected.parentElement.hasAttribute('data-x');

+

+ if (selected && isOnBoard) {

+ const proneCounter = selected.parentElement.querySelector('[href="#counter-prone"]');

+

+ if (proneCounter) {

+ proneCounter.remove();

+ } else {

+ const counter = document.createElementNS(svgns, 'use');

+ counter.setAttributeNS(null, 'href', '#counter-prone');

+ selected.parentElement.appendChild(counter);

+ }

+ }

+ }

+}