Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/modules
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-30 16:58:12 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-30 16:58:12 -0700
commitd393934679290ab4e16aa0b4a73408273eb26596 (patch)
tree3b660a79ee2c9e062675b87f7bda9afa4a06f8ca /src/modules
parent9c67c4a4a538c44fe8365536fa3dc4b1cc973b4b (diff)
Refactor index.js
Diffstat (limited to 'src/modules')
-rw-r--r--src/modules/gameboard.js2
-rw-r--r--src/modules/map_select_dialog.js42
-rw-r--r--src/modules/record_sheet.js60
3 files changed, 88 insertions, 16 deletions
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 3c932d9..b7ef148 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -296,7 +296,7 @@ export function endMove() {
}
}
-export function endTurn(allegiance) {
+export function clearFiringArcs(allegiance) {
firingArc.clear(svg, allegiance);
}
diff --git a/src/modules/map_select_dialog.js b/src/modules/map_select_dialog.js
new file mode 100644
index 0000000..a9f8bc8
--- /dev/null
+++ b/src/modules/map_select_dialog.js
@@ -0,0 +1,42 @@
+export function init() {
+ const showButton = document.getElementById('show-dialog'),
+ mapDialog = document.getElementById('map-dialog'),
+ selectEl = mapDialog.querySelector('select'),
+ confirmBtn = mapDialog.querySelector('#confirm-btn');
+
+ return {
+ selectCurrentOptionOnPageLoad() {
+ mapDialog.querySelectorAll('option').forEach(option =>
+ option.value === localStorage.getItem('map') && (option.selected = true)
+ );
+
+ return this;
+ },
+
+ showOnClick() {
+ showButton.addEventListener('click', () => {
+ mapDialog.showModal();
+ });
+
+ return this;
+ },
+
+ updateValueOnSelection() {
+ selectEl.addEventListener('change', () => {
+ confirmBtn.value = selectEl.value;
+ });
+
+ return this;
+ },
+
+ changeMapOnConfirm() {
+ confirmBtn.addEventListener('click', e => {
+ e.preventDefault();
+ localStorage.removeItem('pan-zoom');
+ localStorage.setItem('map', selectEl.value);
+ document.querySelector('object').data = `${selectEl.value}.svg`;
+ mapDialog.close();
+ });
+ }
+ };
+}
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 88c8e15..736ffb2 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -46,6 +46,39 @@ function createRecord({ dataset: { allegiance, number }}) {
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();
@@ -79,21 +112,18 @@ export function endMove() {
unSelect();
}
-export function createRecords(units, { content }) {
- 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);
+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));
}
- return grouped;
-}
-
-export 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';
+ addEventListeners(gbUnSelect, gbSelect);
}