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

Enlarge counter radius on pointer hover

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:28 -07:00
parent 6a0ab60dc2
commit c9026bb05d
2 changed files with 22 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -156,9 +156,7 @@
<defs>
<polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
<symbol id="counter-base" viewBox="-6 -6 12 12" width="12" height="12">
<circle cx="0" cy="0" r="5" />
</symbol>
<circle id="counter-base" cx="0" cy="0" r="5" />
<g id="t-1" class="troop-counter-template"><use href="#counter-base" /><text>1</text></g>
<g id="t-2" class="troop-counter-template"><use href="#counter-base" /><text>2</text></g>

59
style.css
View File

@ -145,7 +145,7 @@ use[href="#point"]:hover, use[href="#point"].hover {
}
use[href="#point"].active {
opacity: 1;
opacity: 0.2;
}
polyline.move-trace {
@ -199,8 +199,16 @@ g#grid {
transform: rotate(180deg);
}
g.troop-counter-template use[href="#counter-base"] {
transform: translate(-6px, -6px);
#counter-base {
r: inherit;
}
g.troop-counter-template, g.troop-counter-template use {
r: inherit;
}
g.troop-counter, g.troop-counter use {
r: inherit;
}
g.troop-counter-template text {
@ -224,6 +232,16 @@ g#counters {
pointer-events: none;
}
g#counters use {
r: 5px;
}
g#counters use:hover {
stroke: orange;
stroke-width: 2px;
r: 8px;
}
g#counters use[data-troop-allegiance="davion"] {
fill: red;
}
@ -287,11 +305,6 @@ button.set-firing-arc img {
pointer-events: none;
}
line.firing-arc {
stroke: blue;
opacity: 0.1;
}
.sight-line {
stroke: orangered;
stroke-width: 0.5px;
@ -314,11 +327,6 @@ line.firing-arc {
opacity: 0.5;
}
image#img1 {
transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */
}
.wall {
fill: none;
stroke: red;
@ -336,31 +344,6 @@ img.logo {
display: block;
}
rect#debug-view-box {
/* stroke: red;
stroke-width: 20px; */
fill: blue;
fill-opacity: 0.2;
}
#troop-counter > .outer {
fill: inherit;
}
#troop-counter > .inner {
fill: red;
}
use[href="#troop-counter"] {
transform: translate(-7.5px, -7.5px);
fill: transparent;
/* fill: orange; */
}
use[href="#troop-counter"]:hover {
fill: orange;
}
@media (width >= 1800px) {
#record-sheet {
flex-direction: row;