| 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-08-07 19:46:17 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-07 19:46:17 -0700 |
| commit | d2dba237863c0cf681677a1d6044be3f602e0d6e (patch) | |
| tree | 31d422fde4e2d2448ea54eabad386222b945f76c | |
| parent | 4e4daa9e767ddaee9d662a6e1a9e213f15384680 (diff) | |
Style grenade indicators without svg
| -rw-r--r-- | public/assets/css/soldier_record_block.css | 53 | ||||
| -rw-r--r-- | public/index.html | 16 | ||||
| -rw-r--r-- | src/modules/gameboard.js | 1 |
3 files changed, 27 insertions, 43 deletions
diff --git a/public/assets/css/soldier_record_block.css b/public/assets/css/soldier_record_block.css index 096a1b2..4dfb1fd 100644 --- a/public/assets/css/soldier_record_block.css +++ b/public/assets/css/soldier_record_block.css @@ -45,52 +45,45 @@ p { display: none; } -.grenades svg { - width: 14px; - height: 14px; - vertical-align: bottom; +.grenades input + label { + display: inline-block; + width: 0.75em; + height: 0.75em; + border: 1px solid black; + border-radius: 50%; + vertical-align: middle; } -.grenades svg circle { - fill: none; - stroke: black; - stroke-width: 2px; +.grenades input:checked + label { + background-color: gray; } -.grenades input:checked + svg circle { - fill: gray; +.grenades input + label:hover { + background-color: lightgray; +} + +.grenades input:checked + label:hover { + background-color: darkgray; } [slot="block-number"]:not(:last-of-type) { display: inline-block; width: 1.3em; + margin-bottom: 2px; } -damage-block.armor span[slot="block-number"] { - border: 1px solid black; +damage-block span[slot="block-number"] { + border: 1px solid transparent; padding: 2px; border-radius: 50%; position: relative; } -.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover { - border: 1px solid orangered; - cursor: pointer; -} - -.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover::before { - content: '🡄'; /*<⇽⭠⮈🠈 🠜 🡄*/ - position: absolute; - margin-left: -1.5em; +damage-block.preview span[slot="block-number"] { + border-color: gray; + background-color: silver; } -.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover { - border: 1px solid orangered; - cursor: pointer; -} - -.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover::after { - content: '🡆'; /* 🠊 🡆 */ - position: absolute; - margin-left: 1em; +damage-block.armor span[slot="block-number"] { + border-color: black; } diff --git a/public/index.html b/public/index.html index c3a1c75..33d7085 100644 --- a/public/index.html +++ b/public/index.html @@ -100,18 +100,10 @@ </ul> <p class="grenades"> <span>Hand Grenades</span> - <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"> - <circle cx="0" cy="0" r="5" /> - </svg></label> - <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"> - <circle cx="0" cy="0" r="5" /> - </svg></label> - <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"> - <circle cx="0" cy="0" r="5" /> - </svg></label> - <label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"> - <circle cx="0" cy="0" r="5" /> - </svg></label> + <input type='checkbox' id="grenade1" checked /><label for="grenade1"></label> + <input type='checkbox' id="grenade2" checked /><label for="grenade2"></label> + <input type='checkbox' id="grenade3" checked /><label for="grenade3"></label> + <input type='checkbox' id="grenade4" checked /><label for="grenade4"></label> </p> </template> diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js index 3741ad2..b28f188 100644 --- a/src/modules/gameboard.js +++ b/src/modules/gameboard.js @@ -229,7 +229,6 @@ export function start(el) { }); getActiveSightLine(svg) && clearSightLine(); - console.log('object', svg.querySelectorAll('.hover')); }); svg.addEventListener('pointerover', e => { |