394 lines
15 KiB
HTML
394 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Infantry Platoon 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>
|
|
<input type='checkbox' id="grenade1" checked /><label for="grenade1"></label>
|
|
<input type='checkbox' id="grenade2" checked /><label for="grenade2"></label>
|
|
<input type='checkbox' id="grenade3" checked /><label for="grenade3"></label>
|
|
<input type='checkbox' id="grenade4" checked /><label for="grenade4"></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" title="Hide/Show tab">
|
|
<span class="open">«</span>
|
|
<span class="close">»</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="opt-toggle">
|
|
<input type="checkbox" id="toggle-grid-vis" checked />
|
|
<label for="toggle-grid-vis" title="Toggle grid visibility">
|
|
<span class="off">⬡</span><span class="on">⬢</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="opt-toggle">
|
|
<input type="checkbox" id="auto-center-map" />
|
|
<label for="auto-center-map" title="Auto-center map on selected units">
|
|
<!-- These chars have a weird height issue -->
|
|
<!-- <span class="off">⦾</span><span class="on">⦿</span> -->
|
|
<span class="off">○</span><span class="on">●</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div id="toggle-firing-arc-vis">
|
|
<input type="checkbox" data-allegiance="defender" id="defender-firing-arc-vis" />
|
|
<label style="color: red;" for="defender-firing-arc-vis"
|
|
title="Hide/show defender's placed firing arcs">
|
|
<span class="hidden">▽</span><span class="visible">▼</span>
|
|
</label>
|
|
<br/>
|
|
<input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" />
|
|
<label style="color: blue;" for="attacker-firing-arc-vis"
|
|
title="Hide/show attacker's placed firing arcs">
|
|
<span class="hidden">▽</span><span class="visible">▼</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="select-elevation">
|
|
<button class="up" title="View elevation 1 level above current">🡅</button>
|
|
<input type="radio" id="select-elevation-3" name="select-elevation" value="3" />
|
|
<label for="select-elevation-3" title="View elevation level 3">3</label>
|
|
<input type="radio" id="select-elevation-2" name="select-elevation" value="2" />
|
|
<label for="select-elevation-2" title="View elevation level 2">2</label>
|
|
<input type="radio" id="select-elevation-1" name="select-elevation" value="1" />
|
|
<label for="select-elevation-1" title="View elevation level 1">1</label>
|
|
<input type="radio" id="select-elevation-0" name="select-elevation" value="0" checked />
|
|
<label for="select-elevation-0" title="View elevation ground level">0</label>
|
|
<input type="radio" id="select-elevation-basement" name="select-elevation" value="-1" />
|
|
<label for="select-elevation-basement" title="View elevation basement
|
|
level" >-1</label>
|
|
<button class="down" title="View elevation 1 level below current">🡇</button>
|
|
</div>
|
|
|
|
<div id="dice">
|
|
<button type="button" id="roll-dice" title="Roll two six-sided 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>
|
|
|
|
<div id="status">
|
|
<span id="hex-counter">Distance: <span id="hex-count">-</span></span>
|
|
</div>
|
|
|
|
<div class="map-placeholder">
|
|
Loading...
|
|
</div>
|
|
|
|
<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" title="Turns count">0</span>
|
|
<span class="inning-top" title="1st inning">◓</span>
|
|
<span class="inning-bottom" title="2nd inning">◒</span>
|
|
</span>
|
|
<button id="show-dialog" type="button" title="Select a scenario">Scenario</button>
|
|
<button id="download-save" type="button" disabled>Save</button>
|
|
<button id="upload-save" type="button" disabled>Load</button>
|
|
<button id="fullscreen" type="button" title="Fullscreen">
|
|
<img src="assets/images/icon_full_screen.png" height="12" />
|
|
</button>
|
|
|
|
<span style="white-space: nowrap;">
|
|
<button type="button" class="set-firing-arc" data-size="small"
|
|
title="Set a small firing arc (2 MP) for selected unit">
|
|
<img src="assets/images/firing_arc_small.png" height="12" /> 2 MP
|
|
</button>
|
|
<button type="button" class="set-firing-arc" data-size="medium"
|
|
title="Set a medium firing arc (4 MP) for selected unit">
|
|
<img src="assets/images/firing_arc_medium.png" height="12" /> 4 MP
|
|
</button>
|
|
<button type="button" class="set-firing-arc" data-size="large"
|
|
title="Set a large firing arc (6 MP) for selected unit">
|
|
<img src="assets/images/firing_arc_large.png" height="12" /> 6 MP
|
|
</button>
|
|
<button type="button" class="set-mech-template" title="Place a mech
|
|
template counter (A/D keys to rotate, Q/E to torso-twist)">Mech</button>
|
|
<button type="button" class="attacker" title="Place an attacker's
|
|
counter">
|
|
<img src="assets/images/counter_attacker.svg" height="12" />
|
|
</button>
|
|
<button type="button" class="defender" title="Place a defender's
|
|
counter">
|
|
<img src="assets/images/counter_defender.svg" height="12" />
|
|
</button>
|
|
</span>
|
|
<div class="counters-list">
|
|
<button type="button" class="grenade" title="Place a grenade counter">
|
|
<img src="assets/images/icon_grenade.png" height="12" />
|
|
</button>
|
|
<button type="button" class="prone" title="Place a prone counter">
|
|
<img src="assets/images/icon_prone.png" height="12" />
|
|
</button>
|
|
<button type="button" class="basement" title="Place a basement level
|
|
counter">
|
|
<img src="assets/images/icon_basement.png" height="12" />
|
|
</button>
|
|
<button type="button" class="1st-floor" title="Place a level 1 counter">
|
|
<img src="assets/images/icon_1st_floor.png" height="12" />
|
|
</button>
|
|
<button type="button" class="2nd-floor" title="Place a level 2 counter">
|
|
<img src="assets/images/icon_2nd_floor.png" height="12" />
|
|
</button>
|
|
<button type="button" class="3rd-floor" title="Place a level 3 counter">
|
|
<img src="assets/images/icon_3rd_floor.png" height="12" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="record-sheet">
|
|
<div id="attacker-record" data-allegiance="attacker">
|
|
<!-- <img class="logo" src="logo-davion.png" /> -->
|
|
<div class="records-header">
|
|
<div><strong class="name">Attacker</strong></div>
|
|
<div><button type="button" class="end-move"
|
|
data-allegiance="attacker" title="Mark/Unmark attacker's selected
|
|
unit's turn as 'taken' and auto-select the next available unit">
|
|
End Movement
|
|
</button></div>
|
|
<div><button type="button" class="end-turn"
|
|
data-allegiance="defender" title="End attacker's turn and
|
|
auto-select defender's first available unit">
|
|
End Turn
|
|
</button></div>
|
|
<div><button type="button" class="view-squad" value="previous"
|
|
title="View previous squad"><</button></div>
|
|
<div class="squad-number" title="Current squad">
|
|
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
|
|
<text>1</text>
|
|
</svg>
|
|
</div>
|
|
<div><button type="button" class="view-squad" value="next"
|
|
title="View next squad">></button></div>
|
|
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
|
|
17th Kestral Mechanized Infantry -->
|
|
</div>
|
|
<div class="records" data-view-squad-number="1"></div>
|
|
</div>
|
|
<div id="defender-record" data-allegiance="defender">
|
|
<!-- <img class="logo" src="logo-liao.png" /> -->
|
|
<div class="records-header">
|
|
<div><strong class="name">Defender</strong></div>
|
|
<div><button type="button" class="end-move" data-allegiance="defender"
|
|
title="Mark/Unmark defender's selected
|
|
unit's turn as 'taken' and auto-select the next available unit">
|
|
End Movement
|
|
</button></div>
|
|
<div><button type="button" class="end-turn"
|
|
data-allegiance="attacker" title="End defender's turn and
|
|
auto-select attacker's first available unit">
|
|
End Turn
|
|
</button></div>
|
|
<div><button type="button" class="view-squad" value="previous"
|
|
title="View previous squad"><</button></div>
|
|
<div>
|
|
<div class="squad-number" title="Current squad">
|
|
<svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
|
|
<circle id="counter-base" r="5" cx="0" cy="0"></circle>
|
|
<text>1</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div><button type="button" class="view-squad" value="next"
|
|
title="View next squad">></button></div>
|
|
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
|
|
Aldebaran Home Guard -->
|
|
</div>
|
|
<div class="records" data-view-squad-number="1"></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="clear-hex">
|
|
<p>Clear hex contents?</p>
|
|
<div>
|
|
<form style="display: flex; flex-direction: row;">
|
|
<div style="width: 50%;">
|
|
<button
|
|
style="display: block; margin-right: auto;"
|
|
value="cancel"
|
|
formmethod="dialog"
|
|
>Cancel</button>
|
|
</div>
|
|
<div style="width: 50%;">
|
|
<button
|
|
style="display: block; margin-left: auto;"
|
|
value="confirm"
|
|
formmethod="dialog"
|
|
>Confirm</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</dialog>
|
|
|
|
<input type="file" accept="image/svg+xml" />
|
|
|
|
<div class="horz"></div>
|
|
<div class="horz"></div>
|
|
<div class="vert"></div>
|
|
<div class="vert"></div>
|
|
|
|
<script src="index.js"></script>
|
|
<script src="soldier_record_block.js"></script>
|
|
</body>
|
|
|
|
</html>
|