ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create record sheet dynamically when map is loaded

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2024-04-30 10:17:45 -07:00
parent a4888a3e09
commit 82d3a4b415
14 changed files with 426 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
public/index.html
View File

@@ -94,10 +94,10 @@
<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>Defender</div>
<input type="checkbox" data-allegiance="defender"/>
<div>Attacker</div>
<input type="checkbox" data-allegiance="attacker"/>
</div>
<div class="map-placeholder">
@@ -114,64 +114,46 @@
<div id="content">
<input type="checkbox" class="visible"/>
<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>
Prone: <input type="checkbox" id="toggle-prone-counter" />
<button type="button" class="set-grenade">
<img src="icon_grenade.png" height="12" />
</button>
Turn:
<span id="turn-count" data-update="0">
<span name="count">0</span>
<span class="inning-top">◓</span>
<span class="inning-bottom">◒</span>
</span>
<dialog id="map-dialog">
<form>
<p>
<label>
Map:
<select>
<option value="map1">Map1</option>
<option value="map2">Map2</option>
<option value="map3">Map3</option>
</select>
</label>
</p>
<div>
<button value="cancel" formmethod="dialog">Cancel</button>
<button id="confirm-btn" value="default">Confirm</button>
</div>
</form>
</dialog>
<button id="show-dialog">Change map</button>
<button id="show-dialog">Change scenario</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="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>
<button type="button" class="set-grenade">
<img src="icon_grenade.png" height="12" />
</button>
</span>
</div>
<div id="record-sheet">
<div>
<div id="attacker-record">
<!-- <img class="logo" src="logo-davion.png" /> -->
<p>
<strong>Davion</strong>
<button type="button" class="end-move" data-allegiance="davion">
<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="liao">
<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 is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="davion">
<!-- <div is="soldier-record-block" class="soldier-record" data-number="1" data-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>
@@ -219,30 +201,30 @@
<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>
<div id="defender-record">
<!-- <img class="logo" src="logo-liao.png" /> -->
<p>
<strong>Liao</strong>
<button type="button" class="end-move" data-allegiance="liao">
<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="davion">
<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 is="soldier-record-block" class="soldier-record" data-number="1" data-allegiance="liao">
<!-- <div is="soldier-record-block" class="soldier-record" data-number="1" data-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-number="2" data-allegiance="liao">
</div> -->
<!-- <div is="soldier-record-block" class="soldier-record" data-number="2" data-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>
@@ -283,12 +265,32 @@
<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>
</div>
<script src="soldier_record_block.js"></script>
<dialog id="map-dialog">
<form>
<p>
<label>
Scenario:
<select>
<option value="map1">Scenario 1: Side Show</option>
<option value="map2">Scenario 2: Dragon Hunting</option>
<option value="map3">Scenario 3: Race Against Time</option>
<option value="map4">Test</option>
</select>
</label>
</p>
<div>
<button value="cancel" formmethod="dialog">Cancel</button>
<button id="confirm-btn" value="default">Confirm</button>
</div>
</form>
</dialog>
<script src="index.js"></script>
<script src="soldier_record_block.js"></script>
</body>
</html>