Create record sheet dynamically when map is loaded

src/modules/record_sheet.js

@@ -1,3 +1,51 @@
+function createIcon(number) {
+  const svgns = 'http://www.w3.org/2000/svg';
+  const [icon, circle, text] = ['svg', 'circle', 'text'].map(t => document.createElementNS(svgns, t));
+
+  icon.setAttributeNS(null, 'viewBox', '-5 -5 10 10')
+  icon.setAttribute('xmlns', svgns);
+
+  circle.setAttributeNS(null, 'cx', 0);
+  circle.setAttributeNS(null, 'cy', 0);
+  circle.setAttributeNS(null, 'r', 5);
+
+  text.textContent = number;
+
+  icon.appendChild(circle);
+  icon.appendChild(text);
+
+  return icon;
+}
+
+function createRecord({ dataset: { allegiance, number }}) {
+  const div = document.createElement('div', { is: 'soldier-record-block' }),
+    spans = Array(5).fill('span').map(t => document.createElement(t)),
+    [tn, pwt, pwd, pwrs, pwrl] = spans;
+
+  div.setAttribute('class', 'soldier-record');
+  div.dataset.number = number;
+  div.dataset.allegiance = allegiance;
+
+  tn.setAttribute('slot', 'troop-number');
+  tn.appendChild(createIcon(number));
+
+  pwt.setAttribute('slot', 'primary-weapon-type');
+  pwt.textContent = 'Rifle';
+
+  pwd.setAttribute('slot', 'primary-weapon-damage');
+  pwd.textContent = '4L';
+
+  pwrs.setAttribute('slot', 'primary-weapon-range-short');
+  pwrs.textContent = '1-27';
+
+  pwrl.setAttribute('slot', 'primary-weapon-range-long');
+  pwrl.textContent = '28-75';
+
+  spans.forEach(el => div.appendChild(el));
+
+  return div;
+}
+
 export function unSelect() {
   const selected = getSelected();
 
@@ -30,3 +78,22 @@ 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);
+  }
+
+  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';
+}