ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add weapon icons to record sheet

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:30 -07:00
parent e4c1aaaf4f
commit 142d472e06
5 changed files with 80 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/css/soldier_record_block.css
View File

@ -27,7 +27,6 @@ ul {
ul li {
display: inline;
margin-left: 1em;
}
p {

26
public/assets/css/style.css
View File

@ -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;
}

38
public/assets/images/counters.svg Normal file
View File

@ -0,0 +1,38 @@
<?xml version="1.0" standalone="no"?>
<svg viewBox="-6 -6 12 24" xmlns="http://www.w3.org/2000/svg">
<defs>
<circle id="counter-base" cx="0" cy="0" r="6"/>
<g id="semi-auto">
<line x1="-2" y1="1" x2="2" y2="1"/>
<line x1="-2" y1="2" x2="2" y2="2"/>
</g>
<g id="auto">
<line x1="-2" y1="0" x2="2" y2="0"/>
<line x1="-2" y1="1" x2="2" y2="1"/>
<line x1="-2" y1="2" x2="2" y2="2"/>
</g>
</defs>
<g id="rifle" class="weapon-symbol">
<use href="#counter-base"/>
<use href="#semi-auto"/>
<line x1="0" y1="-5" x2="0" y2="5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
<g id="smg" class="weapon-symbol">
<use href="#counter-base"/>
<use href="#auto"/>
<line x1="0" y1="-5" x2="0" y2="4.5"/>
<line x1="-2" y1="4.5" x2="2" y2="4.5"/>
</g>
<g id="blazer" class="weapon-symbol">
<use href="#counter-base"/>
<use href="#auto"/>
<polyline points="0,-5 0,-3 -3,-2.5 3,-1.5 0,-1 0,2.5 -3,3, 3,4 0,4.5 0,5"/>
<polyline points="-2,-3.5 0,-5 2,-3.5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

5
public/index.html
View File

@ -76,7 +76,10 @@
</span>
</p>
<p><span>Troop Number</span> <slot name="troop-number">1</slot></p>
<p>
<span>Troop Number</span> <slot name="troop-number">1</slot>
<span>Squad Number</span> <slot name="squad-number">1</slot>
</p>
<p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p>
<ul>
<li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li>

37
src/modules/record_sheet.js
View File

@ -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;