Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public/index.html
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-30 10:17:45 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-30 10:17:45 -0700
commit82d3a4b415ba920176058d615b697e84a49adabc (patch)
tree7bc250d9f332689e3dc0c4e7aec5949175a0f9fa /public/index.html
parenta4888a3e0905f3561781cb0ef4686befc0dff122 (diff)
Create record sheet dynamically when map is loaded
Diffstat (limited to 'public/index.html')
-rw-r--r--public/index.html108
1 files changed, 55 insertions, 53 deletions
diff --git a/public/index.html b/public/index.html
index 4f15e08..cdab46c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>