From da43d21acd7ea5b04148772410a1d0772d8e901f Mon Sep 17 00:00:00 2001
From: Catalin Constantin Mititiuc <webdevcat@proton.me>
Date: Thu, 24 Jul 2025 16:38:20 -0700
Subject: [PATCH] Add title property to UI elements

---
 public/index.html | 77 +++++++++++++++++++++++++++++------------------
 1 file changed, 48 insertions(+), 29 deletions(-)

diff --git a/public/index.html b/public/index.html
index 5da933c..1d4f441 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>