Add title property to UI elements

This commit is contained in:
Catalin Constantin Mititiuc 2025-07-24 16:38:20 -07:00
parent 6775d76e38
commit da43d21acd

View File

@ -219,52 +219,59 @@
<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 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">Scenario</button>
<button id="download-save" type="button">Save</button>
<button id="upload-save" type="button">Load</button>
<button id="fullscreen" type="button">
<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">
<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">
<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">
<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">Mech</button>
<button type="button" class="attacker">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<button type="button" class="3rd-floor" title="Place a level 3 counter">
<img src="assets/images/icon_3rd_floor.png" height="12" />
</button>
</div>
@ -275,20 +282,26 @@
<!-- <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">
<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">
<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">&lt;</button></div>
<div class="squad-number">
<div><button type="button" class="view-squad" value="previous"
title="View previous squad">&lt;</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">&gt;</button></div>
<div><button type="button" class="view-squad" value="next"
title="View next squad">&gt;</button></div>
<!-- 1st Squad, 3rd Platoon, Bravo Company, 2nd Battalion<br>
17th Kestral Mechanized Infantry -->
</div>
@ -298,22 +311,28 @@
<!-- <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">
<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">
<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">&lt;</button></div>
<div><button type="button" class="view-squad" value="previous"
title="View previous squad">&lt;</button></div>
<div>
<div class="squad-number">
<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">&gt;</button></div>
<div><button type="button" class="view-squad" value="next"
title="View next squad">&gt;</button></div>
<!-- 2nd Squad, 1st Platoon, 3rd Company, 2nd Battalion<br>
Aldebaran Home Guard -->
</div>