Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-05-20 09:07:16 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-05-20 09:07:16 -0700
commit4d133b7181241adca3867afae721eb0962e4e645 (patch)
tree774b8bd433c0dea37d1434a59bf23704efc16373 /public/assets
parentc692bc90207c4b04771f953ce5924100a1889cae (diff)
Add weapon icons to record sheet
Diffstat (limited to 'public/assets')
-rw-r--r--public/assets/css/soldier_record_block.css1
-rw-r--r--public/assets/css/style.css26
-rw-r--r--public/assets/images/counters.svg38
3 files changed, 50 insertions, 15 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>