Add the recognise count

Author: Drawk05

index.html

@@ -12,6 +12,9 @@
   <!-- Timestamp Display for Debugging -->
   <div id="timestampDisplay" class="timestamp-display">0.00s</div>
 
+  <!-- Recognition Counter Display -->
+  <div id="recogniseCounter" class="recognise-counter">Recognize: 0 words</div>
+  
   <div class="outside-notes">
     <div class="floating-note">🎵</div>
     <div class="floating-note">🎶</div>
@@ -161,6 +164,28 @@ <h3>🎵 Audio Tracks</h3>
   // Audio MIME type constant (all songs are MP3)
   const AUDIO_MIME_TYPE = 'audio/mpeg';
 
+  // Function to count and update recognition words display
+  function updateRecogniseCounter() {
+    let recogniseCount = 0;
+    
+    // Count all words with recognise: true in the lyrics data
+    if (window.lyricsData && window.lyricsData.sentences) {
+      window.lyricsData.sentences.forEach(sentence => {
+        sentence.words.forEach(word => {
+          if (word.recognise === true) {
+            recogniseCount++;
+          }
+        });
+      });
+    }
+    
+    // Update the counter display
+    const counterElement = document.getElementById('recogniseCounter');
+    if (counterElement) {
+      counterElement.textContent = `0/${recogniseCount}`;
+    }
+  }
+
   // Initialize when DOM is loaded
   document.addEventListener('DOMContentLoaded', function () {
     // Get references to audio elements
@@ -191,6 +216,9 @@ <h3>🎵 Audio Tracks</h3>
       timestampDisplay: document.getElementById('timestampDisplay')
     });
 
+    // Update recognition counter display
+    updateRecogniseCounter();
+
     // Reset when songs end
     song1.addEventListener('ended', () => {
       song1.currentTime = 0;

style.css

@@ -27,6 +27,23 @@ body {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
+/* Recognition Counter Display */
+.recognise-counter {
+    position: fixed;
+    top: 20px;
+    left: 20px;
+    background: rgba(147, 51, 234, 0.9);
+    color: white;
+    font-size: 12pt;
+    font-family: 'Courier New', monospace;
+    padding: 8px 12px;
+    border-radius: 6px;
+    border: 1px solid #9333ea;
+    z-index: 1000;
+    box-shadow: 0 2px 8px rgba(147, 51, 234, 0.3);
+    font-weight: bold;
+}
+
 @keyframes gradientShift {
     0%, 100% { background-position: 0% 50%; }
     50% { background-position: 100% 50%; }