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

Make trooper counters groups

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2025-06-16 22:41:29 -07:00
parent 0c389edd4b
commit ab6faa6a0d
4 changed files with 48 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
public/map.css
View File

@@ -65,7 +65,7 @@ polyline.move-trace {
r: inherit;
}
g.troop-counter, g.troop-counter use {
g.troop-counter, g.counter, g.troop-counter use {
r: inherit;
}
@@ -94,38 +94,17 @@ g.troop-counter-template text {
transform: translate(-5px, -5px);
}
g#points g use.counter {
r: 5px;
}
g#points g.hover use[href="#point"] {
opacity: 1;
fill: orange;
}
g#points g.hover use.counter {
r: 7px;
}
g#points use.counter[data-troop-allegiance="davion"] {
fill: red;
}
g#points use.counter[data-troop-allegiance="liao"] {
fill: green;
}
use.clone {
g.clone {
stroke: white;
stroke-width: 0.5px;
stroke-dasharray: 1;
}
use[data-allegiance="davion"].clone {
g[data-allegiance="davion"].clone {
fill: rgb(255, 126, 126);
}
use[data-allegiance="liao"].clone {
g[data-allegiance="liao"].clone {
fill: rgb(130, 190, 130);
}
@@ -180,7 +159,7 @@ use[href*="#t-"] {
r: 5px;
}
use.selected {
g.selected use {
animation: 1s selected 0.25s linear infinite;
stroke-width: 2px;
stroke: yellow;
@@ -195,28 +174,23 @@ use.selected {
}
}
use[data-allegiance="liao"] {
.counter[data-allegiance="liao"] {
fill: #008000;
}
use[data-allegiance="davion"] {
.counter[data-allegiance="davion"] {
fill: red;
}
/* Counter is off the grid */
use[href*="#t-"][data-x]:hover {
--scale: 1.5;
}
.board {
transform: translate(19px, 31px) scale(4);
}
g.start-locations g:first-child {
g.start-locations > g:first-child {
--i: -2;
}
g.start-locations g:last-child {
g.start-locations > g:last-child {
--i: 52;
}

28
public/map.svg
View File

@@ -54,22 +54,22 @@
<g class="grid">
<g class="start-locations">
<g>
<use data-x="13" class="counter" href="#t-1" data-allegiance="liao" data-number="1"/>
<use data-x="14" class="counter" href="#t-2" data-allegiance="liao" data-number="2"/>
<use data-x="15" class="counter" href="#t-3" data-allegiance="liao" data-number="3"/>
<use data-x="16" class="counter" href="#t-4" data-allegiance="liao" data-number="4"/>
<use data-x="17" class="counter" href="#t-5" data-allegiance="liao" data-number="5"/>
<use data-x="18" class="counter" href="#t-6" data-allegiance="liao" data-number="6"/>
<use data-x="19" class="counter" href="#t-7" data-allegiance="liao" data-number="7"/>
<g data-x="13" class="counter" data-allegiance="liao" data-number="1"><use href="#t-1"/></g>
<g data-x="14" class="counter" data-allegiance="liao" data-number="2"><use href="#t-2"/></g>
<g data-x="15" class="counter" data-allegiance="liao" data-number="3"><use href="#t-3"/></g>
<g data-x="16" class="counter" data-allegiance="liao" data-number="4"><use href="#t-4"/></g>
<g data-x="17" class="counter" data-allegiance="liao" data-number="5"><use href="#t-5"/></g>
<g data-x="18" class="counter" data-allegiance="liao" data-number="6"><use href="#t-6"/></g>
<g data-x="19" class="counter" data-allegiance="liao" data-number="7"><use href="#t-7"/></g>
</g>
<g>
<use data-x="13" class="counter" href="#t-1" data-allegiance="davion" data-number="1"/>
<use data-x="14" class="counter" href="#t-2" data-allegiance="davion" data-number="2"/>
<use data-x="15" class="counter" href="#t-3" data-allegiance="davion" data-number="3"/>
<use data-x="16" class="counter" href="#t-4" data-allegiance="davion" data-number="4"/>
<use data-x="17" class="counter" href="#t-5" data-allegiance="davion" data-number="5"/>
<use data-x="18" class="counter" href="#t-6" data-allegiance="davion" data-number="6"/>
<use data-x="19" class="counter" href="#t-7" data-allegiance="davion" data-number="7"/>
<g data-x="13" class="counter" data-allegiance="davion" data-number="1"><use href="#t-1"/></g>
<g data-x="14" class="counter" data-allegiance="davion" data-number="2"><use href="#t-2"/></g>
<g data-x="15" class="counter" data-allegiance="davion" data-number="3"><use href="#t-3"/></g>
<g data-x="16" class="counter" data-allegiance="davion" data-number="4"><use href="#t-4"/></g>
<g data-x="17" class="counter" data-allegiance="davion" data-number="5"><use href="#t-5"/></g>
<g data-x="18" class="counter" data-allegiance="davion" data-number="6"><use href="#t-6"/></g>
<g data-x="19" class="counter" data-allegiance="davion" data-number="7"><use href="#t-7"/></g>
</g>
</g>
<g data-y="0">
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB