| 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 /public | |
| parent | c692bc90207c4b04771f953ce5924100a1889cae (diff) | |
Add weapon icons to record sheet
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/css/soldier_record_block.css | 1 | ||||
| -rw-r--r-- | public/assets/css/style.css | 26 | ||||
| -rw-r--r-- | public/assets/images/counters.svg | 38 | ||||
| -rw-r--r-- | public/index.html | 5 |
4 files changed, 54 insertions, 16 deletions
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 @@ +<?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> 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 @@ </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> |
