From 82d3a4b415ba920176058d615b697e84a49adabc Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Tue, 30 Apr 2024 10:17:45 -0700
Subject: Create record sheet dynamically when map is loaded
---
src/modules/record_sheet.js | 67 +++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 67 insertions(+)
(limited to 'src/modules/record_sheet.js')
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index e5e8de6..88c8e15 100644
--- a/src/modules/record_sheet.js
+++ b/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';
+}
--
cgit v1.2.3