| 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-11 12:46:26 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-04-11 13:15:41 -0700 |
| commit | b192fc0790a4815703afa6ccc782f2b573c64722 (patch) | |
| tree | dcc0f3b3aca30447a1ad71a45d1193aadc92f59d /public/index.html | |
| parent | 35a82e94e85c5b4f068e6e4d3d807dfc3c05379d (diff) | |
Import map svg in an object; add a dev server
Diffstat (limited to 'public/index.html')
| -rw-r--r-- | public/index.html | 390 |
1 files changed, 390 insertions, 0 deletions
diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..063797f --- /dev/null +++ b/public/index.html @@ -0,0 +1,390 @@ +<!DOCTYPE html> +<html> + <head> + <title>Infantry Combat Solo Basic</title> + <link rel="stylesheet" href="style.css"> + </head> + <body> + <template id="damage-block"> + <link rel="stylesheet" href="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> + <label> + <input type="radio" name="damage" checked> + <span class="damage-selector lethal"></span> + </label> + <label> + <input type="radio" name="damage"> + <span class="damage-selector clear"></span> + </label> + <label> + <input type="radio" name="damage"> + <span class="damage-selector bruise"></span> + </label> + </template> + + <template id="soldier-record-block"> + <link rel="stylesheet" href="soldier_record_block.css"> + + <p class="physical-status-track"> + <span is="damage-block"> + <span slot="block-number">10</span> + <span slot="movement-points">8</span> + </span> + <span is="damage-block"> + <span slot="block-number">9</span> + <span slot="movement-points">8</span> + </span> + <span is="damage-block"> + <span slot="block-number">8</span> + <span slot="movement-points">8</span> + </span> + <span is="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"> + <span slot="block-number">6</span> + <span slot="movement-points">7</span> + <span slot="firing-modifier">+1</span> + </span> + <span is="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"> + <span slot="block-number">4</span> + <span slot="movement-points">6</span> + <span slot="firing-modifier">+2</span> + </span> + <span is="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"> + <span slot="block-number">2</span> + <span slot="movement-points">5</span> + <span slot="firing-modifier">+3</span> + </span> + <span is="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"> + <span slot="block-number">0</span> + <span slot="movement-points">None</span> + <span slot="firing-modifier">0</span> + </span> + <span is="damage-block"> + <span slot="block-number">DEAD</span> + </span> + </p> + + <p><span>Troop Number</span> <slot name="troop-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> + <span>Hand Grenades</span> + <input type="number" min="0" max="4" value="4" /> + </p> + </template> + + <div id="map-container"> + <div id="toggle-firing-arc-vis"> + <div>davion</div> + <input type="checkbox" data-allegiance="davion" /> + <div>liao</div> + <input type="checkbox" data-allegiance="liao" /> + </div> + + <div id="panel"> + <fieldset name="point"> + <legend>hex</legend> + <div> + <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label> + <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label> + <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label> + <label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label> + <label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label> + </div> + </fieldset> + <fieldset name="points"> + <legend>grid</legend> + <div> + <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label> + <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label> + <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label> + <label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label> + <label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label> + </div> + </fieldset> + <fieldset name="map2"> + <legend>map2</legend> + <div> + <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label> + <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label> + <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label> + <label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label> + <label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label> + </div> + </fieldset> + <fieldset name="map3"> + <legend>map3</legend> + <div> + <label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label> + <label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label> + <label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label> + <label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label> + <label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label> + </div> + </fieldset> + </div> + + <object type="image/svg+xml" data="map.svg"></object> + + <!-- <svg viewbox="-49 -40 2390 3163" xmlns="http://www.w3.org/2000/svg"> + <defs> + <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" /> + + <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> + <g id="t-3" class="troop-counter-template"><use href="#counter-base" /><text>3</text></g> + <g id="t-4" class="troop-counter-template"><use href="#counter-base" /><text>4</text></g> + <g id="t-5" class="troop-counter-template"><use href="#counter-base" /><text>5</text></g> + <g id="t-6" class="troop-counter-template"><use href="#counter-base" /><text>6</text></g> + <g id="t-7" class="troop-counter-template"><use href="#counter-base" /><text>7</text></g> + + <g id="davion-1" class="troop-counter"><use href="#t-1" /></g> + <g id="davion-2" class="troop-counter"><use href="#t-2" /></g> + <g id="davion-3" class="troop-counter"><use href="#t-3" /></g> + <g id="davion-4" class="troop-counter"><use href="#t-4" /></g> + <g id="davion-5" class="troop-counter"><use href="#t-5" /></g> + <g id="davion-6" class="troop-counter"><use href="#t-6" /></g> + <g id="davion-7" class="troop-counter"><use href="#t-7" /></g> + + <g id="liao-1" class="troop-counter"><use href="#t-1" /></g> + <g id="liao-2" class="troop-counter"><use href="#t-2" /></g> + <g id="liao-3" class="troop-counter"><use href="#t-3" /></g> + <g id="liao-4" class="troop-counter"><use href="#t-4" /></g> + <g id="liao-5" class="troop-counter"><use href="#t-5" /></g> + <g id="liao-6" class="troop-counter"><use href="#t-6" /></g> + <g id="liao-7" class="troop-counter"><use href="#t-7" /></g> + + <image id="counter-prone" href="counter_prone.jpg" width="10px" /> + <image id="numbers" href="rendered_numbers.png" width="182" height="22" /> + + <symbol id="n1" viewBox="1 0 17 22" width="17" height="22"><use href="#numbers" /></symbol> + <symbol id="n2" viewBox="19 0 16 22" width="16" height="22"><use href="#numbers" /></symbol> + <symbol id="n3" viewBox="36 0 18 22" width="18" height="22"><use href="#numbers" /></symbol> + <symbol id="n4" viewBox="54 0 18 22" width="18" height="22"><use href="#numbers" /></symbol> + <symbol id="n5" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol> + <symbol id="n6" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol> + <symbol id="n7" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol> + <symbol id="n8" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol> + <symbol id="n9" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol> + <symbol id="n0" viewBox="0 0 18 22" width="18" height="22"><use href="#numbers" /></symbol> + </defs> + + <rect id="background" x="-1" y="-1" width="2287" height="3087" /> + + <g id="image-maps"> + <image id="map2" class="map-scans" href="scans/map2.jpg" width="2284" height="1518" /> + <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518" /> + </g> + + <g id="firing-arcs"> + <g id="shapes"></g> + <g id="lines"></g> + </g> + + <g id="grid"> + <g id="points"></g> + <g id="counters"></g> + </g> + + <image href="rendered_numbers.png" x="0" y="-46" width="182" height="22" opacity="0.5" /> + + <use href="#n1" x="1" y="-40" opacity="0.5" /> + <use href="#n2" x="19" y="-40" opacity="0.5" /> + <use href="#n3" x="36" y="-40" opacity="0.5" /> + <use href="#n4" x="54" y="-40" opacity="0.5" /> + </svg> --> + + <div id="status"> + <span id="hex-counter">Distance: <span id="hex-count">-</span></span> + </div> + </div> + + <div id="content"> + <input type="checkbox" class="visible" checked /> + <div> + Set firing arc: + <button type="button" class="set-firing-arc" data-size="small"> + <img src="firing_arc_small.png" height="12" /> 2 MP + </button> + <button type="button" class="set-firing-arc" data-size="medium"> + <img src="firing_arc_medium.png" height="12" /> 4 MP + </button> + <button type="button" class="set-firing-arc" data-size="large"> + <img src="firing_arc_large.png" height="12" /> 6 MP + </button> + <br> + Prone: <input type="checkbox" id="toggle-prone-counter" /> + Turn: + <span id="turn-count" data-update="0"> + <span name="count">0</span> + <span class="inning-top">◓</span> + <span class="inning-bottom">◒</span> + </span> + </div> + + <div id="record-sheet"> + <div> + <!-- <img class="logo" src="logo-davion.png" /> --> + <p> + <strong>Davion</strong> + <button type="button" class="end-move" data-allegiance="davion"> + End Movement + </button> + <button type="button" class="end-turn" data-allegiance="liao"> + End Turn + </button> + <br> + <!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br> + 17th Kestral Mechanized Infantry --> + </p> + <div is="soldier-record-block" class="soldier-record selected" data-troop-number="1" data-troop-allegiance="davion"> + <span slot="troop-number">1</span> + <span slot="primary-weapon-type">Rifle</span> + <span slot="primary-weapon-damage">4L</span> + <span slot="primary-weapon-range-short">1-27</span> + <span slot="primary-weapon-range-long">28-75</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="davion"> + <span slot="troop-number">2</span> + <span slot="primary-weapon-type">Rifle</span> + <span slot="primary-weapon-damage">4L</span> + <span slot="primary-weapon-range-short">1-27</span> + <span slot="primary-weapon-range-long">28-75</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="davion"> + <span slot="troop-number">3</span> + <span slot="primary-weapon-type">SMG</span> + <span slot="primary-weapon-damage">3L</span> + <span slot="primary-weapon-range-short">1-15</span> + <span slot="primary-weapon-range-long">16-25</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="davion"> + <span slot="troop-number">4</span> + <span slot="primary-weapon-type">SMG</span> + <span slot="primary-weapon-damage">3L</span> + <span slot="primary-weapon-range-short">1-15</span> + <span slot="primary-weapon-range-long">16-25</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="davion"> + <span slot="troop-number">5</span> + <span slot="primary-weapon-type">SMG</span> + <span slot="primary-weapon-damage">3L</span> + <span slot="primary-weapon-range-short">1-15</span> + <span slot="primary-weapon-range-long">16-25</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="davion"> + <span slot="troop-number">6</span> + <span slot="primary-weapon-type">SMG</span> + <span slot="primary-weapon-damage">3L</span> + <span slot="primary-weapon-range-short">1-15</span> + <span slot="primary-weapon-range-long">16-25</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="davion"> + <span slot="troop-number">7</span> + <span slot="primary-weapon-type">Blazer</span> + <span slot="primary-weapon-damage">4L</span> + <span slot="primary-weapon-range-short">1-17</span> + <span slot="primary-weapon-range-long">18-105</span> + </div> + </div> + <div> + <!-- <img class="logo" src="logo-liao.png" /> --> + <p> + <strong>Liao</strong> + <button type="button" class="end-move" data-allegiance="liao"> + End Movement + </button> + <button type="button" class="end-turn" data-allegiance="davion"> + End Turn + </button> + <br> + <!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br> + Aldebaran Home Guard --> + </p> + <div is="soldier-record-block" class="soldier-record" data-troop-number="1" data-troop-allegiance="liao"> + <span slot="troop-number">1</span> + <span slot="primary-weapon-type">Rifle</span> + <span slot="primary-weapon-damage">4L</span> + <span slot="primary-weapon-range-short">1-27</span> + <span slot="primary-weapon-range-long">28-75</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="2" data-troop-allegiance="liao"> + <span slot="troop-number">2</span> + <span slot="primary-weapon-type">Rifle</span> + <span slot="primary-weapon-damage">4L</span> + <span slot="primary-weapon-range-short">1-27</span> + <span slot="primary-weapon-range-long">28-75</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="3" data-troop-allegiance="liao"> + <span slot="troop-number">3</span> + <span slot="primary-weapon-type">SMG</span> + <span slot="primary-weapon-damage">3L</span> + <span slot="primary-weapon-range-short">1-15</span> + <span slot="primary-weapon-range-long">16-25</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="4" data-troop-allegiance="liao"> + <span slot="troop-number">4</span> + <span slot="primary-weapon-type">SMG</span> + <span slot="primary-weapon-damage">3L</span> + <span slot="primary-weapon-range-short">1-15</span> + <span slot="primary-weapon-range-long">16-25</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="5" data-troop-allegiance="liao"> + <span slot="troop-number">5</span> + <span slot="primary-weapon-type">SMG</span> + <span slot="primary-weapon-damage">3L</span> + <span slot="primary-weapon-range-short">1-15</span> + <span slot="primary-weapon-range-long">16-25</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="6" data-troop-allegiance="liao"> + <span slot="troop-number">6</span> + <span slot="primary-weapon-type">SMG</span> + <span slot="primary-weapon-damage">3L</span> + <span slot="primary-weapon-range-short">1-15</span> + <span slot="primary-weapon-range-long">16-25</span> + </div> + <div is="soldier-record-block" class="soldier-record" data-troop-number="7" data-troop-allegiance="liao"> + <span slot="troop-number">7</span> + <span slot="primary-weapon-type">Blazer</span> + <span slot="primary-weapon-damage">4L</span> + <span slot="primary-weapon-range-short">1-17</span> + <span slot="primary-weapon-range-long">18-105</span> + </div> + </div> + </div> + </div> + + <script src="soldier_record_block.js"></script> + <script src="index.js"></script> + </body> +</html>
\ No newline at end of file |