| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-04-05 09:27:46 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-04-05 09:27:46 -0700 |
| commit | 9dbb0a5369bbe9a2adb2725e864b684bbea179a6 (patch) | |
| tree | 5376721c8415d5a79be59e4b0bd8f3d4fe15fe66 | |
| parent | 8bd67fbee2575bbcc83a4cf7f03f2c4aa5828b92 (diff) | |
Enlarge counter radius on pointer hover
| -rw-r--r-- | index.html | 4 | ||||
| -rw-r--r-- | style.css | 59 |
2 files changed, 22 insertions, 41 deletions
@@ -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> @@ -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; |