1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
const selectedClass = 'selected';
function dataSelector({ dataset: { allegiance, number }}) {
return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
}
function traceSelector(counter) {
return `polyline.move-trace${dataSelector(counter)}`;
}
function 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;
}
function getClones(svg, counter) {
return svg.querySelectorAll(`.counter.clone${dataSelector(counter)}`);
}
export function getAllCounters(container) {
return container.querySelectorAll('g.counter[data-allegiance][data-number]');
}
export function getCounter(svg, selected) {
return svg.querySelector(`.counter${dataSelector(selected)}:not(.clone)`);
}
export function getTrace(svg, counter) {
return svg.querySelector(traceSelector(counter));
}
export function place(svg, selected, cell) {
if (svg.querySelector('.grid').contains(selected)) {
let trace = svg.querySelector(traceSelector(selected));
let prevCoords = [
selected.parentElement.dataset.x,
selected.parentElement.parentElement.dataset.y
]
let clone = selected.cloneNode(true);
clone.classList.remove(selectedClass);
clone.classList.add('clone');
selected.dataset.previous = prevCoords;
selected.parentElement.appendChild(clone);
cell.appendChild(selected);
selected.childNodes.forEach(n => {
if (n.classList.contains('removed')) {
n.remove();
} else if ('preexisting' in n.dataset) {
delete n.dataset.preexisting;
}
});
let previous = getCellPosition(clone.parentElement),
current = getCellPosition(selected.parentElement),
points;
if (!trace) {
trace = document.createElementNS(svgns, 'polyline');
points = `${previous.x},${previous.y} ${current.x},${current.y}`;
trace.dataset.number = selected.dataset.number;
trace.dataset.allegiance = selected.dataset.allegiance;
trace.classList.add('move-trace');
svg.querySelector('.gameboard').prepend(trace);
} else {
points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
}
trace.setAttributeNS(null, 'points', points);
} else {
selected.removeAttribute('data-x');
cell.appendChild(selected);
}
}
export function removeClones(svg, counter) {
getClones(svg, counter).forEach(c => c.remove());
}
export function endMove(svg, counter) {
const proneCounter = counter.querySelector('[href="#counter-prone"]');
if (proneCounter) {
proneCounter.dataset.preexisting = '';
}
svg.querySelector(traceSelector(counter))?.remove();
delete counter.dataset.previous;
removeClones(svg, counter);
}
export function hasProne(counter) {
return !!counter.querySelector('[href="#counter-prone"]');
}
export function toggleProne(counter) {
let proneCounter = counter.querySelector('[href="#counter-prone"]');
if (!proneCounter) {
proneCounter = document.createElementNS(svgns, 'use');
proneCounter.setAttributeNS(null, 'href', '#counter-prone');
counter.appendChild(proneCounter);
} else if ('preexisting' in proneCounter.dataset) {
proneCounter.classList.toggle('removed');
} else {
proneCounter.remove();
}
}
export function getSelectedClass() {
return selectedClass;
}
|