Add weapon icons to record sheet
This commit is contained in:
@@ -20,31 +20,42 @@ const weapons = {
|
||||
}
|
||||
|
||||
function createIcon(number) {
|
||||
const svgns = 'http://www.w3.org/2000/svg';
|
||||
const [icon, circle, text] = ['svg', 'circle', 'text'].map(t => document.createElementNS(svgns, t));
|
||||
const [icon, use, text] = ['svg', 'use', 'text'].map(t => document.createElementNS(svgns, t));
|
||||
|
||||
icon.setAttributeNS(null, 'viewBox', '-5 -5 10 10')
|
||||
icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
|
||||
icon.setAttribute('xmlns', svgns);
|
||||
|
||||
circle.setAttributeNS(null, 'cx', 0);
|
||||
circle.setAttributeNS(null, 'cy', 0);
|
||||
circle.setAttributeNS(null, 'r', 5);
|
||||
use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
|
||||
|
||||
text.textContent = number;
|
||||
|
||||
icon.appendChild(circle);
|
||||
icon.appendChild(use);
|
||||
icon.appendChild(text);
|
||||
|
||||
return icon;
|
||||
}
|
||||
|
||||
function createWeaponIcon(type) {
|
||||
const [icon, use] = ['svg', 'use'].map(t => document.createElementNS(svgns, t));
|
||||
|
||||
icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
|
||||
icon.setAttribute('xmlns', svgns);
|
||||
icon.classList.add('weapon-icon');
|
||||
|
||||
use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);
|
||||
|
||||
icon.appendChild(use);
|
||||
|
||||
return icon;
|
||||
}
|
||||
|
||||
function createRecord(unit) {
|
||||
const { dataset: { allegiance, number }} = unit,
|
||||
const { dataset: { allegiance, number, squad }} = unit,
|
||||
primaryWeapon = unit.querySelector('.primary-weapon'),
|
||||
pw = primaryWeapon?.getAttribute('href').replace('#', '') || 'rifle',
|
||||
div = document.createElement('div', { is: 'soldier-record-block' }),
|
||||
spans = Array(5).fill('span').map(t => document.createElement(t)),
|
||||
[tn, pwt, pwd, pwrs, pwrl] = spans;
|
||||
spans = Array(6).fill('span').map(t => document.createElement(t)),
|
||||
[tn, sn, pwt, pwd, pwrs, pwrl] = spans;
|
||||
|
||||
div.setAttribute('class', 'soldier-record');
|
||||
div.dataset.number = number;
|
||||
@@ -53,8 +64,12 @@ function createRecord(unit) {
|
||||
tn.setAttribute('slot', 'troop-number');
|
||||
tn.appendChild(createIcon(number));
|
||||
|
||||
sn.setAttribute('slot', 'squad-number');
|
||||
sn.appendChild(createIcon(squad || 1));
|
||||
|
||||
pwt.setAttribute('slot', 'primary-weapon-type');
|
||||
pwt.textContent = weapons[pw].name;
|
||||
pwt.textContent = ' ' + weapons[pw].name;
|
||||
pwt.prepend(createWeaponIcon(pw));
|
||||
|
||||
pwd.setAttribute('slot', 'primary-weapon-damage');
|
||||
pwd.textContent = weapons[pw].damage;
|
||||
|
||||
Reference in New Issue
Block a user