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
|
import * as panzoom from './modules/pan-zoom.js';
import * as gameboard from './modules/gameboard.js';
import * as recordSheet from './modules/record_sheet.js';
globalThis.svgns = "http://www.w3.org/2000/svg";
const mapPlaceholder = document.querySelector('.map-placeholder'),
distanceOutput = document.getElementById('status'),
proneToggle = document.getElementById('toggle-prone-counter'),
object = document.querySelector('object');
object.addEventListener('load', function () {
mapPlaceholder.remove();
this.style.opacity = 1;
const svg = this.contentDocument.querySelector('svg');
panzoom.start(svg);
gameboard.start(svg);
});
gameboard.setDistanceCallback((count = '-') => {
distanceOutput.querySelector('#hex-count').textContent = count;
distanceOutput.style.display = count === '-' ? 'none' : 'block';
});
gameboard.setProneFlagCallback(checked => proneToggle.checked = checked);
gameboard.setSelectCallback(data => recordSheet.select(data));
document.querySelectorAll('.soldier-record').forEach(el =>
el.addEventListener('click', () => {
if (el.classList.contains('selected')) {
el.classList.remove('selected');
gameboard.unSelect();
recordSheet.unSelect();
} else {
gameboard.select(el);
}
})
);
document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
recordSheet.endMove();
gameboard.endMove();
}));
document.querySelectorAll('.end-turn').forEach(el =>
el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
const dataSelector = `[data-allegiance="${allegiance}"]`,
records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)),
turnCounter = document.getElementById('turn-count'),
{ dataset: { update }} = turnCounter;
el.setAttribute('disabled', '');
document
.querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
.removeAttribute('disabled');
if (update === '1') {
turnCounter.children.namedItem('count').textContent++
turnCounter.dataset.update = '0';
} else {
turnCounter.dataset.update = '1';
}
records
.sort((el1, el2) => el1.dataset.number > el2.dataset.number)
.forEach(el => el.classList.remove('movement-ended'));
gameboard.endTurn(allegiance);
gameboard.select(records.at(0));
})
);
document.querySelectorAll('.set-firing-arc').forEach(el =>
el.addEventListener('click', gameboard.setFiringArc)
);
document.querySelector('.set-grenade').addEventListener('click', gameboard.setGrenade);
document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el =>
el.addEventListener('input', gameboard.toggleFiringArcVisibility)
);
document.getElementById('toggle-prone-counter').addEventListener('input', function () {
const selected = recordSheet.getSelected();
selected && gameboard.toggleProne();
});
object.data = `${localStorage.getItem('map') || 'map1'}.svg`;
document
.querySelector('#content input[type="checkbox"].visible')
.addEventListener('input', function () {
const divs = document.querySelectorAll('#content div');
divs.forEach(d => {
if (this.checked) {
d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
} else {
d.style.display = 'none';
}
});
});
const showButton = document.getElementById('show-dialog'),
mapDialog = document.getElementById('map-dialog'),
selectEl = mapDialog.querySelector('select'),
confirmBtn = mapDialog.querySelector('#confirm-btn');
mapDialog.querySelectorAll('option').forEach(option =>
option.value === localStorage.getItem('map') && (option.selected = true)
);
showButton.addEventListener('click', () => {
mapDialog.showModal();
});
selectEl.addEventListener('change', () => {
confirmBtn.value = selectEl.value;
});
confirmBtn.addEventListener('click', e => {
e.preventDefault();
localStorage.removeItem('pan-zoom');
localStorage.setItem('map', selectEl.value);
document.querySelector('object').data = `${selectEl.value}.svg`;
mapDialog.close();
});
|