| 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-07-23 15:05:58 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-23 15:05:58 -0700 |
| commit | 5fc598cdd15be3d8dd856997af2b1f68f774162c (patch) | |
| tree | ad964b16b065e859a5c71e7ff294c86f14ad77e4 /public/assets/css/map.css | |
| parent | 9d44de5f114cacd915661ef5b2af3e5098fee3b8 (diff) | |
WIP: counters
Diffstat (limited to 'public/assets/css/map.css')
| -rw-r--r-- | public/assets/css/map.css | 122 |
1 files changed, 98 insertions, 24 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css index cd7ea6a..e6a25aa 100644 --- a/public/assets/css/map.css +++ b/public/assets/css/map.css @@ -82,10 +82,6 @@ g.troop-counter-template text { transform: translate(-5px, 6px); } -[href="#counter-grenade"] { - transform: translate(-5px, -5px); -} - g.clone { stroke: white; stroke-width: 0.5px; @@ -173,10 +169,35 @@ polygon.firing-arc[data-allegiance="attacker"] { stroke-opacity: inherit; } -g.counter use { +/*g.counter use {*/ +/* r: 5px;*/ +/*}*/ + +g.counter { r: 5px; } +[data-q][data-r][data-s][data-t]:hover g.counter { + /*transform: scale(3);*/ +} + +g.counter:hover { + /*transform: scale(3);*/ + /*r: 20px;*/ +} + +/*g.counter:hover * {*/ +/* r: 20px;*/ +/*}*/ + +g.counter.selected { + r: 6px; +} + +g.counter use.primary-weapon { + r: inherit; +} + g.counter use.troop-number, g.counter use.squad-number { --scale: 0.25; } @@ -197,7 +218,8 @@ g.selected use.primary-weapon { animation: 1s selected 0.25s linear infinite; stroke-width: 2px; stroke: yellow; - r: 6px; + /*r: 6px;*/ + r: inherit; } pattern use { @@ -247,23 +269,42 @@ g[data-y]:nth-child(odd) { fill: orange; stroke: black; } - -[data-x]:hover g.counter, -[data-q][data-r][data-s][data-t]:hover g.counter { - transform: scale(1.5); -} - -[data-x]:hover g.counter .troop-number, -[data-q][data-r][data-s][data-t]:hover g.counter .troop-number { - --translateX: -5px; - --scale: 0.5; -} - -[data-x]:hover g.counter .squad-number, -[data-q][data-r][data-s][data-t]:hover g.counter .squad-number { - --translateX: 5px; - --scale: 0.5; -} +/**/ +/*[data-q][data-r][data-s][data-t] g.counter,*/ +/*[data-q][data-r][data-s][data-t] g.counter .troop-number,*/ +/*[data-q][data-r][data-s][data-t] g.counter .squad-number {*/ +/* transition: transform 0.25s;*/ +/*}*/ + +/*[data-q][data-r][data-s][data-t]:hover g.counter {*/ +/* transform: scale(2);*/ +/*}*/ + +/*[data-q][data-r][data-s][data-t]:hover use[href="#hex"] {*/ +/* scale: 0.5;*/ +/*}*/ + + + +/*[data-x]:hover g.counter,*/ +/*[data-q][data-r][data-s][data-t]:hover g.counter {*/ +/* transform: scale(1.5);*/ +/* transition: transform 0.25s;*/ +/*}*/ +/**/ +/*[data-x]:hover g.counter .troop-number,*/ +/*[data-q][data-r][data-s][data-t]:hover g.counter .troop-number {*/ +/* --translateX: -5px;*/ +/* --scale: 0.5;*/ +/* transition: transform 0.25s;*/ +/*}*/ +/**/ +/*[data-x]:hover g.counter .squad-number,*/ +/*[data-q][data-r][data-s][data-t]:hover g.counter .squad-number {*/ +/* --translateX: 5px;*/ +/* --scale: 0.5;*/ +/* transition: transform 0.25s;*/ +/*}*/ [data-x] { --scale: 1; @@ -462,10 +503,43 @@ text.elevation { [data-q][data-r][data-s][data-t] .radial-icon { cx: calc(var(--cx) / 20); - cy: calc(var(--cy) / 20) + cy: calc(var(--cy) / 20); } [data-q][data-r][data-s][data-t]:hover .radial-icon { cx: var(--cx); cy: var(--cy); } + +use[class^="counter-"] { + --scale: 1; + --translateX: -5px; + --translateY: -5px; + transform: scale(var(--scale)) translate(var(--translateX), var(--translateY)); + /*transform: translate(var(--translateX), var(--translateY)) scale(var(--scale));*/ +} + +use[class^="counter-"] { + transition: x 0.25s, y 0.25s; + --scale: 0.5; + /*--translateY: 0px;*/ +} + +.counter use[href^="#counter"] { + /*transform: scale(0.5);*/ +} + +g.counter use[class^="counter-"] { + x: calc(var(--x) * 1.25); + y: calc(var(--y) * 1.25); + /*y: 10px;*/ + /*x: var(--x);*/ + /*y: var(--y);*/ +} + +[data-q][data-r][data-s][data-t]:hover use[class^="counter-"], + x: calc(var(--x) * 1.5); + y: calc(var(--y) * 1.5); + /*--scale: 1;*/ + --translateY: -5px; +} |