Web Dev Solutions

Catalin Mititiuc

From 4d133b7181241adca3867afae721eb0962e4e645 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Mon, 20 May 2024 09:07:16 -0700 Subject: Add weapon icons to record sheet --- public/assets/css/soldier_record_block.css | 1 - public/assets/css/style.css | 26 ++++++++++---------- public/assets/images/counters.svg | 38 ++++++++++++++++++++++++++++++ public/index.html | 5 +++- src/modules/record_sheet.js | 37 ++++++++++++++++++++--------- 5 files changed, 80 insertions(+), 27 deletions(-) create mode 100644 public/assets/images/counters.svg diff --git a/public/assets/css/soldier_record_block.css b/public/assets/css/soldier_record_block.css index fb1d322..217ef6d 100644 --- a/public/assets/css/soldier_record_block.css +++ b/public/assets/css/soldier_record_block.css @@ -27,7 +27,6 @@ ul { ul li { display: inline; - margin-left: 1em; } p { diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 9d5afb5..3e6842f 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -196,8 +196,10 @@ g#grid { transform: rotate(180deg); } -#counter-base { - r: inherit; +.weapon-symbol :not(use[href="#counter-base"]) { + stroke: white; + stroke-width: 0.75; + fill: none; } g.troop-counter-template, g.troop-counter-template use { @@ -306,22 +308,26 @@ button.set-firing-arc img { background-color: white; } -.soldier-record[data-allegiance="attacker"] [slot="troop-number"] svg { +.soldier-record span[slot] { + margin-right: .4em; +} + +.soldier-record[data-allegiance="attacker"] svg { fill: blue; } -.soldier-record[data-allegiance="defender"] [slot="troop-number"] svg { +.soldier-record[data-allegiance="defender"] svg { fill: red; } -.soldier-record [slot="troop-number"] svg { +.soldier-record svg { width: 20px; height: 20px; background-color: initial; vertical-align: middle; } -.soldier-record [slot="troop-number"] svg text { +.soldier-record svg text { fill: white; text-anchor: middle; font-size: 10px; @@ -330,14 +336,6 @@ button.set-firing-arc img { font-family: monospace; } -.soldier-record[data-allegiance="defender"] [slot="troop-number"] img { - fill: red; -} - -.soldier-record[data-allegiance="attacker"] [slot="troop-number"] img { - fill: blue; -} - .soldier-record.selected { background-color: khaki; } diff --git a/public/assets/images/counters.svg b/public/assets/images/counters.svg new file mode 100644 index 0000000..aab06a8 --- /dev/null +++ b/public/assets/images/counters.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/index.html b/public/index.html index c0c44a9..0a27b61 100644 --- a/public/index.html +++ b/public/index.html @@ -76,7 +76,10 @@

-

Troop Number 1

+

+ Troop Number 1 + Squad Number 1 +

Primary Weapon Type Rifle

  • Damage 4L
  • 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; -- cgit v1.2.3