| 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-01 21:51:45 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-07-01 21:51:45 -0700 |
| commit | 9f7be5d9c782f64948aa244b81a74718c53a02cf (patch) | |
| tree | d2a19144f74b5a50e841d3ed9a3cbdd74408106f /public/index.html | |
| parent | ce6cd0be50975f565e52454cfb37e142eac51fc9 (diff) | |
WIP: floating edge UI
Diffstat (limited to 'public/index.html')
| -rw-r--r-- | public/index.html | 396 |
1 files changed, 215 insertions, 181 deletions
diff --git a/public/index.html b/public/index.html index 4d32ce6..40d6e1b 100644 --- a/public/index.html +++ b/public/index.html @@ -1,106 +1,139 @@ <!DOCTYPE html> <html> - <head> - <title>Infantry Combat Solo Basic</title> - <link rel="stylesheet" href="assets/css/style.css"> - </head> - <body> - <template id="damage-block"> - <link rel="stylesheet" href="assets/css/damage_block.css"> - <slot name="block-number"></slot> - <span class="damage-effect-indicator"> - <slot name="firing-modifier"></slot><br> - <slot name="movement-points"></slot> - </span> - </template> +<head> + <title>Infantry Combat Solo Basic</title> + <link rel="stylesheet" href="assets/css/style.css"> +</head> - <template id="soldier-record-block"> - <link rel="stylesheet" href="assets/css/soldier_record_block.css"> +<body> + <template id="damage-block"> + <link rel="stylesheet" href="assets/css/damage_block.css"> - <p class="physical-status-track"> - <damage-block> - <span slot="block-number">10</span> - <span slot="movement-points">8</span> - </damage-block> - <damage-block> - <span slot="block-number">9</span> - <span slot="movement-points">8</span> - </damage-block> - <damage-block> - <span slot="block-number">8</span> - <span slot="movement-points">8</span> - </damage-block> - <damage-block> - <span slot="block-number">7</span> - <span slot="movement-points">8</span> - <span slot="firing-modifier">+1</span> - </damage-block> - <damage-block> - <span slot="block-number">6</span> - <span slot="movement-points">7</span> - <span slot="firing-modifier">+1</span> - </damage-block> - <damage-block> - <span slot="block-number">5</span> - <span slot="movement-points">7</span> - <span slot="firing-modifier">+2</span> - </damage-block> - <damage-block> - <span slot="block-number">4</span> - <span slot="movement-points">6</span> - <span slot="firing-modifier">+2</span> - </damage-block> - <damage-block> - <span slot="block-number">3</span> - <span slot="movement-points">6</span> - <span slot="firing-modifier">+2</span> - </damage-block> - <damage-block> - <span slot="block-number">2</span> - <span slot="movement-points">5</span> - <span slot="firing-modifier">+3</span> - </damage-block> - <damage-block> - <span slot="block-number">1</span> - <span slot="movement-points">4</span> - <span slot="firing-modifier">+3</span> - </damage-block> - <damage-block> - <span slot="block-number">0</span> - <span slot="movement-points">None</span> - <span slot="firing-modifier">0</span> - </damage-block> - <damage-block> - <span slot="block-number">DEAD</span> - </damage-block> - </p> + <slot name="block-number"></slot> + <span class="damage-effect-indicator"> + <slot name="firing-modifier"></slot><br> + <slot name="movement-points"></slot> + </span> + </template> - <p> - <span>Troop Number</span> <slot name="troop-number">1</slot> - <span>Squad Number</span> <slot name="squad-number">1</slot> - </p> - <p><span>Primary Weapon Type</span> <slot name="primary-weapon-type">Rifle</slot></p> - <ul> - <li><span>Damage</span> <slot name="primary-weapon-damage">4L</slot></li> - <li><span>Short</span> <slot name="primary-weapon-range-short">1-27</slot></li> - <li><span>Long</span> <slot name="primary-weapon-range-long">28-75</slot></li> - </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> - </p> - </template> + <template id="soldier-record-block"> + <link rel="stylesheet" href="assets/css/soldier_record_block.css"> + + <p class="physical-status-track"> + <damage-block> + <span slot="block-number">10</span> + <span slot="movement-points">8</span> + </damage-block> + <damage-block> + <span slot="block-number">9</span> + <span slot="movement-points">8</span> + </damage-block> + <damage-block> + <span slot="block-number">8</span> + <span slot="movement-points">8</span> + </damage-block> + <damage-block> + <span slot="block-number">7</span> + <span slot="movement-points">8</span> + <span slot="firing-modifier">+1</span> + </damage-block> + <damage-block> + <span slot="block-number">6</span> + <span slot="movement-points">7</span> + <span slot="firing-modifier">+1</span> + </damage-block> + <damage-block> + <span slot="block-number">5</span> + <span slot="movement-points">7</span> + <span slot="firing-modifier">+2</span> + </damage-block> + <damage-block> + <span slot="block-number">4</span> + <span slot="movement-points">6</span> + <span slot="firing-modifier">+2</span> + </damage-block> + <damage-block> + <span slot="block-number">3</span> + <span slot="movement-points">6</span> + <span slot="firing-modifier">+2</span> + </damage-block> + <damage-block> + <span slot="block-number">2</span> + <span slot="movement-points">5</span> + <span slot="firing-modifier">+3</span> + </damage-block> + <damage-block> + <span slot="block-number">1</span> + <span slot="movement-points">4</span> + <span slot="firing-modifier">+3</span> + </damage-block> + <damage-block> + <span slot="block-number">0</span> + <span slot="movement-points">None</span> + <span slot="firing-modifier">0</span> + </damage-block> + <damage-block> + <span slot="block-number">DEAD</span> + </damage-block> + </p> + + <p> + <span>Troop Number</span> + <slot name="troop-number">1</slot> + <span>Squad Number</span> + <slot name="squad-number">1</slot> + </p> + <p><span>Primary Weapon Type</span> + <slot name="primary-weapon-type">Rifle</slot> + </p> + <ul> + <li><span>Damage</span> + <slot name="primary-weapon-damage">4L</slot> + </li> + <li><span>Short</span> + <slot name="primary-weapon-range-short">1-27</slot> + </li> + <li><span>Long</span> + <slot name="primary-weapon-range-long">28-75</slot> + </li> + </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> + </p> + </template> + + <div id="map-container"> + <div id="edge-inputs"> + <div id="content-visibility"> + <input type="checkbox" class="visible" id="content-visibility-toggle" /> + <label for="content-visibility-toggle"> + <span class="open">«</span> + <span class="close">»</span> + </label> + </div> - <div id="map-container"> <div id="toggle-firing-arc-vis"> - <div>Defender</div> - <input type="checkbox" data-allegiance="defender"/> - <div>Attacker</div> - <input type="checkbox" data-allegiance="attacker"/> + <input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" /> + <label style="color: red;" for="defender-firing-arc-vis"> + <span class="hidden">▽</span><span class="visible">▼</span> + </label> + <input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" /> + <label for="attacker-firing-arc-vis"> + <span class="hidden">▽</span><span class="visible">▼</span> + </label> </div> <div class="select-elevation"> @@ -155,106 +188,107 @@ </div> </div> </div> + </div> - <div class="map-placeholder"> - Loading... - </div> - - <object id="map-resource" type="image/svg+xml" data="assets/images/scenario_template.svg"></object> + <div id="status"> + <span id="hex-counter">Distance: <span id="hex-count">-</span></span> + </div> - <div id="status"> - <span id="hex-counter">Distance: <span id="hex-count">-</span></span> - </div> + <div class="map-placeholder"> + Loading... </div> - <div id="content"> - <input type="checkbox" class="visible"/> - <div> - Turn: - <span id="turn-count" data-update="0"> - <span name="count">0</span> - <span class="inning-top">◓</span> - <span class="inning-bottom">◒</span> - </span> - <button id="show-dialog" type="button">Scenario</button> - <button id="download-save" type="button">Save</button> - <button id="upload-save" type="button">Load</button> - <button id="fullscreen" type="button"> - <img src="assets/images/icon_full_screen.png" height="12" /> + <object id="map-resource" type="image/svg+xml" data="assets/images/scenario_template.svg"></object> + </div> + + <div id="content"> + <div> + Turn: + <span id="turn-count" data-update="0"> + <span name="count">0</span> + <span class="inning-top">◓</span> + <span class="inning-bottom">◒</span> + </span> + <button id="show-dialog" type="button">Scenario</button> + <button id="download-save" type="button">Save</button> + <button id="upload-save" type="button">Load</button> + <button id="fullscreen" type="button"> + <img src="assets/images/icon_full_screen.png" height="12" /> + </button> + + <span style="white-space: nowrap;"> + Prone: <input type="checkbox" id="toggle-prone-counter" /> + <button type="button" class="set-firing-arc" data-size="small"> + <img src="assets/images/firing_arc_small.png" height="12" /> 2 MP + </button> + <button type="button" class="set-firing-arc" data-size="medium"> + <img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP + </button> + <button type="button" class="set-firing-arc" data-size="large"> + <img src="assets/images/firing_arc_large.png" height="12" /> 6 MP + </button> + <button type="button" class="set-grenade"> + <img src="assets/images/icon_grenade.png" height="12" /> </button> + </span> + </div> - <span style="white-space: nowrap;"> - Prone: <input type="checkbox" id="toggle-prone-counter" /> - <button type="button" class="set-firing-arc" data-size="small"> - <img src="assets/images/firing_arc_small.png" height="12" /> 2 MP + <div id="record-sheet"> + <div id="attacker-record"> + <!-- <img class="logo" src="logo-davion.png" /> --> + <p> + <strong class="name">Attacker</strong> + <button type="button" class="end-move" data-allegiance="attacker"> + End Movement </button> - <button type="button" class="set-firing-arc" data-size="medium"> - <img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP + <button type="button" class="end-turn" data-allegiance="defender"> + End Turn </button> - <button type="button" class="set-firing-arc" data-size="large"> - <img src="assets/images/firing_arc_large.png" height="12" /> 6 MP + <br> + <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br> + 17th Kestral Mechanized Infantry --> + </p> + <div class="records"></div> + </div> + <div id="defender-record"> + <!-- <img class="logo" src="logo-liao.png" /> --> + <p> + <strong class="name">Defender</strong> + <button type="button" class="end-move" data-allegiance="defender"> + End Movement </button> - <button type="button" class="set-grenade"> - <img src="assets/images/icon_grenade.png" height="12" /> + <button type="button" class="end-turn" data-allegiance="attacker"> + End Turn </button> - </span> - </div> - - <div id="record-sheet"> - <div id="attacker-record"> - <!-- <img class="logo" src="logo-davion.png" /> --> - <p> - <strong class="name">Attacker</strong> - <button type="button" class="end-move" data-allegiance="attacker"> - End Movement - </button> - <button type="button" class="end-turn" data-allegiance="defender"> - End Turn - </button> - <br> - <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br> - 17th Kestral Mechanized Infantry --> - </p> - <div class="records"></div> - </div> - <div id="defender-record"> - <!-- <img class="logo" src="logo-liao.png" /> --> - <p> - <strong class="name">Defender</strong> - <button type="button" class="end-move" data-allegiance="defender"> - End Movement - </button> - <button type="button" class="end-turn" data-allegiance="attacker"> - End Turn - </button> - <br> - <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> + <br> + <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> Aldebaran Home Guard --> - </p> - <div class="records"></div> - </div> + </p> + <div class="records"></div> </div> </div> + </div> - <dialog id="map-dialog"> - <form> - <p> - <label> - Load scenario: - <select> - </select> - </label> - </p> - <div> - <button value="cancel" formmethod="dialog">Cancel</button> - <button id="confirm-btn" value="default">Confirm</button> - </div> - </form> - </dialog> + <dialog id="map-dialog"> + <form> + <p> + <label> + Load scenario: + <select> + </select> + </label> + </p> + <div> + <button value="cancel" formmethod="dialog">Cancel</button> + <button id="confirm-btn" value="default">Confirm</button> + </div> + </form> + </dialog> + + <input type="file" accept="image/svg+xml" /> - <input type="file" accept="image/svg+xml"/> + <script src="index.js"></script> + <script src="soldier_record_block.js"></script> +</body> - <script src="index.js"></script> - <script src="soldier_record_block.js"></script> - </body> </html> |