Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/index.js
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-17 12:52:28 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-17 13:05:47 -0700
commit143e3cdb45a96912d6791a37f64bf3893879cd93 (patch)
tree9e2b82407cb73f8f797b52e970244a8653e7847e /src/index.js
parent4229c732bca15f4563f596ca345d576984bc517a (diff)
Add callbacks for updating the UI
Diffstat (limited to 'src/index.js')
-rw-r--r--src/index.js62
1 files changed, 35 insertions, 27 deletions
diff --git a/src/index.js b/src/index.js
index fd679d2..84001d4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -55,21 +55,19 @@ const RecordSheet = new function () {
if (selected) {
selected.classList.remove('selected');
- document.getElementById('toggle-prone-counter').checked = false;
}
+
+ document.getElementById('toggle-prone-counter').checked = false;
};
this.getSelected = function () {
return document.querySelector('.soldier-record.selected');
};
- this.select = function (el) {
- let { troopNumber, troopAllegiance } = el.dataset;
- // proneStatus = svg.Counter.hasProne(troopNumber, troopAllegiance);
-
+ this.select = function (data) {
this.unSelect();
- document.querySelector(`#record-sheet .soldier-record[data-troop-number="${troopNumber}"][data-troop-allegiance="${troopAllegiance}"]`).classList.add('selected');
- // document.getElementById('toggle-prone-counter').checked = proneStatus;
+ document.querySelector(`#record-sheet .soldier-record[data-troop-number="${data.number}"][data-troop-allegiance="${data.allegiance}"]`).classList.add('selected');
+ document.getElementById('toggle-prone-counter').checked = data.prone;
};
this.endMove = function() {
@@ -92,7 +90,27 @@ window.addEventListener('load', () => {
PanZoom.start(svg);
- game.info = document.getElementById('status');
+ const distanceOutput = document.getElementById('status');
+
+ game.distanceCallback = count => {
+ const output = {
+ count: '-',
+ display: 'none'
+ }
+
+ if (count) {
+ output.count = count;
+ output.display = 'block';
+ }
+
+ distanceOutput.querySelector('#hex-count').textContent = output.count;
+ distanceOutput.style.display = output.display;
+ };
+
+ const proneToggle = document.getElementById('toggle-prone-counter');
+
+ game.proneFlagCallback = checked => proneToggle.checked = checked;
+ game.selectCallback = data => RecordSheet.select(data);
// Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
// const identityMtx = [1, 0, 0, 1, 0, 0];
@@ -142,18 +160,18 @@ window.addEventListener('load', () => {
el.addEventListener('click', e => {
if (el.classList.contains('selected')) {
el.classList.remove('selected');
+ game.unSelect();
RecordSheet.unSelect();
- // Counter.unSelect();
} else {
- RecordSheet.select(el);
- // Counter.select(el);
+ game.select(el.dataset.troopAllegiance, el.dataset.troopNumber);
}
-
- // SightLine.clear();
})
);
- document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => game.endMove()));
+ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
+ RecordSheet.endMove();
+ game.endMove();
+ }));
document.querySelectorAll('.end-turn').forEach(el =>
el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
@@ -175,14 +193,12 @@ window.addEventListener('load', () => {
turnCounter.dataset.update = '1';
}
- // qA(`#firing-arcs ${dataSelector}`).forEach(el => el.remove());
-
records
.sort((el1, el2) => el1.dataset.troopNumber > el2.dataset.troopNumber)
.forEach(el => el.classList.remove('movement-ended'));
- // RecordSheet.select(records.at(0));
- // Counter.select(records.at(0));
+ game.endTurn(allegiance);
+ game.select(records.at(0).dataset.troopAllegiance, records.at(0).dataset.troopNumber);
})
);
@@ -210,15 +226,7 @@ window.addEventListener('load', () => {
let selected = RecordSheet.getSelected();
if (selected) {
- let template = q(`g#${selected.dataset.troopAllegiance}-${selected.dataset.troopNumber}`);
-
- if (this.checked) {
- let counter = document.createElementNS(svgns, 'use');
- counter.setAttributeNS(null, 'href', '#counter-prone');
- template.appendChild(counter);
- } else {
- template.querySelector('[href="#counter-prone"]').remove();
- }
+ game.toggleProne();
}
});
});