261 lines
9.3 KiB
HTML
261 lines
9.3 KiB
HTML
<!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>
|
|
|
|
<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="toggle-firing-arc-vis">
|
|
<div>Defender</div>
|
|
<input type="checkbox" data-allegiance="defender"/>
|
|
<div>Attacker</div>
|
|
<input type="checkbox" data-allegiance="attacker"/>
|
|
</div>
|
|
|
|
<div class="select-elevation">
|
|
<button>🡅</button>
|
|
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
|
|
<label for="select-elevation-3">3</label>
|
|
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
|
|
<label for="select-elevation-2">2</label>
|
|
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
|
|
<label for="select-elevation-1">1</label>
|
|
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
|
|
<label for="select-elevation-0">0</label>
|
|
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
|
|
<label for="select-elevation-basement">-1</label>
|
|
<button>🡇</button>
|
|
</div>
|
|
|
|
<div id="dice">
|
|
<button type="button" id="roll-dice">Roll</button>
|
|
<div class="die">
|
|
<div>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<div>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<div>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
</div>
|
|
<div class="die">
|
|
<div>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<div>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</div>
|
|
<div>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
<span class="dot"></span>
|
|
</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>
|
|
|
|
<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" />
|
|
</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>
|
|
|
|
<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>
|
|
Aldebaran Home Guard -->
|
|
</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>
|
|
|
|
<input type="file" accept="image/svg+xml"/>
|
|
|
|
<script src="index.js"></script>
|
|
<script src="soldier_record_block.js"></script>
|
|
</body>
|
|
</html>
|