btroops/index.html
2024-03-27 16:38:50 -07:00

278 lines
12 KiB
HTML

<!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>
<svg viewbox="-100 -100 3400 4500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="1in" height="2in" fill="black" />
<rect x="1in" y="0" width="1in" height="2in" fill="white" />
</pattern>
<pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
<linearGradient id="gradient" gradientTransform="rotate(45)">
<stop offset="50%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
<!-- <circle id="point" cx="0" cy="0" r="0.07in" /> -->
<circle id="point" cx="0" cy="0" r="0.5in" />
<polygon id="hex" points="0,121.32 184.152,15.544 368.312,121.32 368.312,332.864 184.152,438.64 0,332.864 "/>
<text id="asterisk" x="-0.06in" y="0.22in">*</text>
</defs>
<line class="ruler" x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
<line class="ruler" x1="-0.25in" y1="0" x2="-0.25in" y2="23in" stroke="url(#vert)" />
<!-- <image id="img1" href="map1.png" height="6.428in" width="9.971in" /> -->
<!-- <image id="img2" href="scans/map1.jpg" width="2284" height="1518" /> -->
<image class="map-scans" href="scans/map2.jpg" width="2284" height="1518" />
<image class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="0" y="1550" />
<g id="firing-arcs"></g>
<rect id="map" x="0" y="0" width="33in" height="45in" />
<!-- <rect id="debug-view-box" x="-100" y="-100" width="3400" height="4500" /> -->
</svg>
<div id="content">
<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>
</div>
<div id="record-sheet">
<div>
<!-- <img class="logo" src="logo-davion.png" /> -->
<p>
<button type="button" class="clear-firing-arcs" data-allegiance="davion">
Clear Firing Arcs
</button>
<strong>Davion</strong>
<br>
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry -->
</p>
<div is="soldier-record-block" class="soldier-record" 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>
<button type="button" class="clear-firing-arcs" data-allegiance="liao">
Clear Firing Arcs
</button>
<strong>Liao</strong>
<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>