| 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-04-24 11:22:42 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-04-24 12:21:35 -0700 |
| commit | b73217c5c45e2c23ac14e70346036cf4477a6ebe (patch) | |
| tree | c66cb1b18eba1db7b25611ff779cb361dc7da813 /public | |
| parent | 3d2d5cad852a8dc5bd8f4f619b85775a3d1a09f6 (diff) | |
Make trooper counters groups
Diffstat (limited to 'public')
| -rw-r--r-- | public/map.css | 44 | ||||
| -rw-r--r-- | public/map.svg | 28 |
2 files changed, 23 insertions, 49 deletions
diff --git a/public/map.css b/public/map.css index 71dfe79..cc95931 100644 --- a/public/map.css +++ b/public/map.css @@ -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; } diff --git a/public/map.svg b/public/map.svg index f4774c0..d647e97 100644 --- a/public/map.svg +++ b/public/map.svg @@ -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"> |
