| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-20 09:07:16 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-05-20 09:07:16 -0700 |
| commit | 4d133b7181241adca3867afae721eb0962e4e645 (patch) | |
| tree | 774b8bd433c0dea37d1434a59bf23704efc16373 /src/modules | |
| parent | c692bc90207c4b04771f953ce5924100a1889cae (diff) | |
Add weapon icons to record sheet
Diffstat (limited to 'src/modules')
| -rw-r--r-- | src/modules/record_sheet.js | 37 |
1 files changed, 26 insertions, 11 deletions
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js index 4abccc6..9fd5b62 100644 --- a/src/modules/record_sheet.js +++ b/src/modules/record_sheet.js @@ -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; |