Create record sheet dynamically when map is loaded

src/index.js

@@ -16,6 +16,35 @@ object.addEventListener('load', function (e) {
   const svg = this.contentDocument.querySelector('svg');
   panzoom.start(svg);
   gameboard.start(svg);
+
+  recordSheet.clear();
+
+  const recordTemplate = document.querySelector('template#soldier-record-block');
+  const startLoc = svg.querySelector('.start-locations');
+  const forces = recordSheet.createRecords(gameboard.getUnits(), recordTemplate);
+
+  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));
+  }
+
+  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);
+      }
+    })
+  );
+
+  window.game = gameboard;
 });
 
 gameboard.setDistanceCallback((count = '-') => {
@@ -26,18 +55,6 @@ gameboard.setDistanceCallback((count = '-') => {
 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();