135 lines
3.5 KiB
JavaScript
135 lines
3.5 KiB
JavaScript
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) {
|
|
unSelect();
|
|
|
|
if (!data) {
|
|
return;
|
|
}
|
|
|
|
const { allegiance: al, number: n } = data,
|
|
selector = `.soldier-record[data-number="${n}"][data-allegiance="${al}"]`;
|
|
|
|
document.querySelector(selector).classList.add('selected');
|
|
document.querySelector('#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);
|
|
}
|