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);
 }