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
127
128
129
|
function createIcon(number) {
const svgns = 'http://www.w3.org/2000/svg';
const [icon, circle, text] = ['svg', 'circle', 'text'].map(t => document.createElementNS(svgns, t));
icon.setAttributeNS(null, 'viewBox', '-5 -5 10 10')
icon.setAttribute('xmlns', svgns);
circle.setAttributeNS(null, 'cx', 0);
circle.setAttributeNS(null, 'cy', 0);
circle.setAttributeNS(null, 'r', 5);
text.textContent = number;
icon.appendChild(circle);
icon.appendChild(text);
return icon;
}
function createRecord({ dataset: { allegiance, number }}) {
const div = document.createElement('div', { is: 'soldier-record-block' }),
spans = Array(5).fill('span').map(t => document.createElement(t)),
[tn, pwt, pwd, pwrs, pwrl] = spans;
div.setAttribute('class', 'soldier-record');
div.dataset.number = number;
div.dataset.allegiance = allegiance;
tn.setAttribute('slot', 'troop-number');
tn.appendChild(createIcon(number));
pwt.setAttribute('slot', 'primary-weapon-type');
pwt.textContent = 'Rifle';
pwd.setAttribute('slot', 'primary-weapon-damage');
pwd.textContent = '4L';
pwrs.setAttribute('slot', 'primary-weapon-range-short');
pwrs.textContent = '1-27';
pwrl.setAttribute('slot', 'primary-weapon-range-long');
pwrl.textContent = '28-75';
spans.forEach(el => div.appendChild(el));
return div;
}
function createRecords(units) {
const grouped = Array.from(units).reduce((acc, unit) => {
acc[unit.dataset.allegiance]?.push(unit) || (acc[unit.dataset.allegiance] = [unit]);
return acc;
}, {});
for (const al in grouped) {
grouped[al] = grouped[al].map(createRecord);
}
return grouped;
}
function clear() {
document.querySelectorAll('#attacker-record > div, #defender-record > div').forEach(el => el.remove());
document.querySelector('#attacker-record .name').textContent = 'attacker';
document.querySelector('#defender-record .name').textContent = 'defender';
}
function addEventListeners(unSelectCounter, selectCounter) {
document.querySelectorAll('.soldier-record').forEach(el =>
el.addEventListener('click', () => {
if (el.classList.contains('selected')) {
el.classList.remove('selected');
unSelectCounter();
unSelect();
} else {
selectCounter(el);
}
})
);
}
export function unSelect() {
const selected = getSelected();
if (selected) {
selected.classList.remove('selected');
}
document.getElementById('toggle-prone-counter').checked = false;
}
export function getSelected() {
return document.querySelector('.soldier-record.selected');
}
export function select(data) {
const selector =
`#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`
unSelect();
document.querySelector(selector).classList.add('selected');
document.getElementById('toggle-prone-counter').checked = data.prone;
}
export function endMove() {
const selected = getSelected();
if (selected) {
selected.classList.toggle('movement-ended');
}
unSelect();
}
export function start(startLoc, units, gbUnSelect, gbSelect) {
clear();
const forces = createRecords(units);
for (const affiliation in forces) {
const container = document.querySelector(`#${affiliation}-record`);
const name = startLoc.dataset[`${affiliation}Name`];
if (name) {
container.querySelector('.name').textContent = name;
}
forces[affiliation].forEach(r => container.appendChild(r));
}
addEventListeners(gbUnSelect, gbSelect);
}
|