316 lines
16 KiB
HTML
316 lines
16 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>
|
|
</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 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="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>
|
|
|
|
<div class="map-placeholder">
|
|
Loading...
|
|
</div>
|
|
|
|
<object type="image/svg+xml" data="map.svg"></object>
|
|
|
|
<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" data-troop-number="1" data-troop-allegiance="davion">
|
|
<span slot="troop-number"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>1</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>2</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>3</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>4</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>5</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>6</text></svg></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"><svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"><circle cx="0" cy="0" r="5"/><text>7</text></svg></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>
|