369 lines
13 KiB
HTML
369 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>BTroops - 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>
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<span class="hidden">▽</span><span class="visible">▼</span>
|
|
</label>
|
|
<input type="checkbox" data-allegiance="attacker" id="attacker-firing-arc-vis" />
|
|
<label style="color: blue;" for="attacker-firing-arc-vis">
|
|
<span class="hidden">▽</span><span class="visible">▼</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="select-elevation">
|
|
<button class="up">🡅</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 class="down">🡇</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>
|
|
|
|
<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">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;">
|
|
<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-mech-template">Mech</button>
|
|
<button type="button" class="attacker">
|
|
<img src="assets/images/counter_attacker.svg" height="12" />
|
|
</button>
|
|
<button type="button" class="defender">
|
|
<img src="assets/images/counter_defender.svg" height="12" />
|
|
</button>
|
|
</span>
|
|
<div class="counters-list">
|
|
<button type="button" class="grenade">
|
|
<img src="assets/images/icon_grenade.png" height="12" />
|
|
</button>
|
|
<button type="button" class="prone">
|
|
<img src="assets/images/icon_prone.png" height="12" />
|
|
</button>
|
|
<button type="button" class="basement">
|
|
<img src="assets/images/icon_basement.png" height="12" />
|
|
</button>
|
|
<button type="button" class="1st-floor">
|
|
<img src="assets/images/icon_1st_floor.png" height="12" />
|
|
</button>
|
|
<button type="button" class="2nd-floor">
|
|
<img src="assets/images/icon_2nd_floor.png" height="12" />
|
|
</button>
|
|
<button type="button" class="3rd-floor">
|
|
<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">
|
|
End Movement
|
|
</button></div>
|
|
<div><button type="button" class="end-turn" data-allegiance="defender">
|
|
End Turn
|
|
</button></div>
|
|
<div><button type="button" class="view-squad" value="previous"><</button></div>
|
|
<div class="squad-number">
|
|
<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">></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">
|
|
End Movement
|
|
</button></div>
|
|
<div><button type="button" class="end-turn" data-allegiance="attacker">
|
|
End Turn
|
|
</button></div>
|
|
<div><button type="button" class="view-squad" value="previous"><</button></div>
|
|
<div>
|
|
<div class="squad-number">
|
|
<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">></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>
|