Add turn counter and inning indicator

index.html

@@ -242,6 +242,12 @@
         </button>
         <br>
         Prone: <input type="checkbox" id="toggle-prone-counter" />
+        Turn:
+        <span id="turn-count" data-update="0">
+          <span name="count">0</span>
+          <span class="inning-top">◓</span>
+          <span class="inning-bottom">◒</span>
+        </span>
       </div>
 
       <div id="record-sheet">

index.js

@@ -915,7 +915,22 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
 document.querySelectorAll('.end-turn').forEach(el =>
   el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
     let dataSelector = `[data-troop-allegiance="${allegiance}"]`,
-        records = Array.from(qA(`.soldier-record${dataSelector}`));
+        records = Array.from(qA(`.soldier-record${dataSelector}`)),
+        turnCounter = document.getElementById('turn-count'),
+        { textContent: count, dataset: { update }} = turnCounter;
+
+    el.setAttribute('disabled', '');
+
+    document
+      .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
+      .removeAttribute('disabled');
+
+    if (update == '1') {
+      turnCounter.children.namedItem('count').textContent++
+      turnCounter.dataset.update = '0';
+    } else {
+      turnCounter.dataset.update = '1';
+    }
 
     qA(`#firing-arcs ${dataSelector}`).forEach(el => el.remove());
 

style.css

@@ -400,6 +400,14 @@ img.logo {
   display: block;
 }
 
+#turn-count[data-update="0"] span.inning-bottom {
+  display: none;
+}
+
+#turn-count[data-update="1"] span.inning-top {
+  display: none;
+}
+
 @media (width >= 1800px) {
   #record-sheet {
     flex-direction: row;