| 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-06-04 15:55:37 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-06-04 16:19:58 -0700 |
| commit | 71f972142b37e4bbe6062ae84272ba1790b415ad (patch) | |
| tree | eb27649cb1663d5bb1674028fa984149e338b28f /public | |
| parent | 71f34e930c5164e921e9faa7ef3ab4eda49dcd35 (diff) | |
Don't use custom built-in elements because they are not supported in webkit
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/css/damage_block.css | 5 | ||||
| -rw-r--r-- | public/assets/css/soldier_record_block.css | 10 | ||||
| -rw-r--r-- | public/index.html | 58 |
3 files changed, 41 insertions, 32 deletions
diff --git a/public/assets/css/damage_block.css b/public/assets/css/damage_block.css index cc7e4dc..4bad577 100644 --- a/public/assets/css/damage_block.css +++ b/public/assets/css/damage_block.css @@ -16,3 +16,8 @@ user-select: none; font-family: monospace; } + +span { + margin: 0; + font-size: smaller; +} diff --git a/public/assets/css/soldier_record_block.css b/public/assets/css/soldier_record_block.css index ed9d18e..5fb8c7c 100644 --- a/public/assets/css/soldier_record_block.css +++ b/public/assets/css/soldier_record_block.css @@ -1,5 +1,5 @@ span { - font-size: smaller; + font-size: 10px; font-family: monospace; margin-right: 1em; } @@ -8,18 +8,22 @@ span { text-align: center; } -.physical-status-track span { +.physical-status-track damage-block { margin: 0; padding: 0; display: inline-block; vertical-align: middle; } -.physical-status-track span[slot="block-number"] { +.physical-status-track damage-block[slot="block-number"] { font-family: serif; font-size: unset; } +.physical-status-track damage-block span { + margin: 0; +} + ul { margin: 0; padding: 0; diff --git a/public/index.html b/public/index.html index b78df5b..1471cdc 100644 --- a/public/index.html +++ b/public/index.html @@ -3,6 +3,11 @@ <head> <title>Infantry Combat Solo Basic</title> <link rel="stylesheet" href="assets/css/style.css"> + <script> + const source = new EventSource('/esbuild'); + source.addEventListener('change', () => location.reload()); + // source.addEventListener('message', (e) => console.log(e)); + </script> </head> <body> <template id="damage-block"> @@ -19,61 +24,61 @@ <link rel="stylesheet" href="assets/css/soldier_record_block.css"> <p class="physical-status-track"> - <span is="damage-block"> + <damage-block> <span slot="block-number">10</span> <span slot="movement-points">8</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">9</span> <span slot="movement-points">8</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">8</span> <span slot="movement-points">8</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">7</span> <span slot="movement-points">8</span> <span slot="firing-modifier">+1</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">6</span> <span slot="movement-points">7</span> <span slot="firing-modifier">+1</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">5</span> <span slot="movement-points">7</span> <span slot="firing-modifier">+2</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">4</span> <span slot="movement-points">6</span> <span slot="firing-modifier">+2</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">3</span> <span slot="movement-points">6</span> <span slot="firing-modifier">+2</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">2</span> <span slot="movement-points">5</span> <span slot="firing-modifier">+3</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">1</span> <span slot="movement-points">4</span> <span slot="firing-modifier">+3</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">0</span> <span slot="movement-points">None</span> <span slot="firing-modifier">0</span> - </span> - <span is="damage-block"> + </damage-block> + <damage-block> <span slot="block-number">DEAD</span> - </span> + </damage-block> </p> <p> @@ -243,11 +248,6 @@ <input type="file" accept="image/svg+xml"/> - <script> - const source = new EventSource('/esbuild'); - source.addEventListener('change', () => location.reload()); - // source.addEventListener('message', (e) => console.log(e)); - </script> <script src="index.js"></script> <script src="soldier_record_block.js"></script> </body> |