Fix progress bar

pcprince · Aug 23, 2024 · 9f36942 · 9f36942
1 parent 84f80a2
commit 9f36942
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 26 deletions.
diff --git a/js/progressBar.js b/js/progressBar.js
@@ -9,10 +9,12 @@
 
 const progressBarHolder = document.getElementById('progress-bar-holder');
 let progressBars = [];
+let currentProgressBars = [];
 
 function createProgressBars (onClick) {
 
     progressBars = [];
+    currentProgressBars = [];
     progressBarHolder.innerHTML = '';
 
     const w = progressBarHolder.offsetWidth / songClips.length;
@@ -25,12 +27,19 @@ function createProgressBars (onClick) {
         progressBarOuter.style = 'width: ' + w + 'px;';
 
         const progressBar = document.createElement('div');
-        progressBar.classList.add('progress-bar', 'progress-bar-striped');
+        progressBar.classList.add('progress-bar', 'progress-bar-striped', 'bg-unguessed');
         progressBar.style = 'width: 0%; transition: none;';
 
         progressBars.push(progressBar);
         progressBarOuter.appendChild(progressBar);
 
+        const currentProgressBar = document.createElement('div');
+        currentProgressBar.classList.add('progress-bar', 'progress-bar-striped', 'progress-bar-animated', 'bg-current');
+        currentProgressBar.style = 'width: 0%; transition: none; display: none;';
+
+        currentProgressBars.push(currentProgressBar);
+        progressBarOuter.appendChild(currentProgressBar);
+
         const progressBarLabel = document.createElement('small');
         progressBarLabel.classList.add('justify-content-center', 'd-flex', 'position-absolute');
         progressBarLabel.innerText = (index + 1);
@@ -56,30 +65,27 @@ function colourProgressBar (i) {
 
         if (isGuessed(i) && isArtistGuessed(i)) {
 
-            progressBars[i].classList.remove('progress-bar-animated', 'bg-current');
-
-            progressBars[i].classList.add('bg-correct');
-            progressBars[i].classList.remove('bg-half');
+            progressBars[i].classList.add('bg-guessed');
+            progressBars[i].classList.remove('bg-half-guessed', 'bg-unguessed');
 
         } else if (isGuessed(i) !== isArtistGuessed(i)) {
 
-            progressBars[i].classList.remove('progress-bar-animated', 'bg-current');
-
-            progressBars[i].classList.add('bg-half');
+            progressBars[i].classList.add('bg-half-guessed');
+            progressBars[i].classList.remove('bg-unguessed', 'bg-guessed');
 
         } else {
 
-            progressBars[i].classList.remove('bg-correct', 'bg-half');
+            progressBars[i].classList.add('bg-unguessed');
+            progressBars[i].classList.remove('bg-guessed', 'bg-half-guessed');
 
         }
 
     } else {
 
         if (isGuessed(i)) {
 
-            progressBars[i].classList.remove('progress-bar-animated', 'bg-current');
-
-            progressBars[i].classList.add('bg-correct');
+            progressBars[i].classList.add('bg-guessed');
+            progressBars[i].classList.remove('bg-unguessed');
 
         }
 
@@ -93,13 +99,22 @@ function updateProgressBarUI () {
 
         if (i < currentClipIndex) {
 
+            currentProgressBars[i].style.display = 'none';
+
+            progressBars[i].style.display = '';
             progressBars[i].style.width = '100%';
             colourProgressBar(i);
 
         } else if (i > currentClipIndex) {
 
+            currentProgressBars[i].style.display = 'none';
+
+            progressBars[i].style.display = '';
             progressBars[i].style.width = '0%';
-            progressBars[i].classList.remove('progress-bar-animated', 'bg-current');
+
+        } else {
+
+            progressBars[i].style.display = 'none';
 
         }
 
@@ -110,16 +125,17 @@ function updateProgressBarUI () {
             if (isArtistGuessed(i) && isGuessed(i)) {
 
                 parent.classList.add('guessed');
-                parent.classList.remove('half-guessed');
+                parent.classList.remove('half-guessed', 'unguessed');
 
             } else if (isArtistGuessed(i) !== isGuessed(i)) {
 
                 parent.classList.add('half-guessed');
+                parent.classList.remove('guessed', 'unguessed');
 
             } else {
 
-                parent.classList.remove('guessed');
-                parent.classList.remove('half-guessed');
+                parent.classList.add('unguessed');
+                parent.classList.remove('half-guessed', 'guessed');
 
             }
 
@@ -128,9 +144,11 @@ function updateProgressBarUI () {
             if (isGuessed(i)) {
 
                 parent.classList.add('guessed');
+                parent.classList.remove('unguessed');
 
             } else {
 
+                parent.classList.add('unguessed');
                 parent.classList.remove('guessed');
 
             }
@@ -145,8 +163,10 @@ function fillAllBars () {
 
     for (let i = 0; i < progressBars.length; i++) {
 
+        currentProgressBars[i].style.display = 'none';
+
+        progressBars[i].style.display = '';
         progressBars[i].style.width = '100%';
-        progressBars[i].classList.remove('progress-bar-animated', 'bg-current');
         colourProgressBar(i);
 
     }
@@ -155,15 +175,17 @@ function fillAllBars () {
 
 function fillBar (percentage) {
 
-    progressBars[currentClipIndex].style.width = percentage + '%';
-    progressBars[currentClipIndex].classList.add('progress-bar-animated', 'bg-current');
+    currentProgressBars[currentClipIndex].style.width = percentage + '%';
 
     if (percentage >= 100) {
 
-        progressBars[currentClipIndex].style.width = '100%';
+        currentProgressBars[currentClipIndex].style.width = '100%';
 
     }
 
+    currentProgressBars[currentClipIndex].style.display = '';
+    progressBars[currentClipIndex].style.display = 'none';
+
     colourProgressBar(currentClipIndex);
 
 }
diff --git a/play.css b/play.css
@@ -35,14 +35,22 @@
     background-color: #fbc19d !important;
 }
 
-.progress-bar.bg-current {
-    background-color: #d23939 !important;
+.progress.unguessed {
+    background-color: #fb9d9d !important;
 }
 
-.progress-bar.bg-correct {
+.progress-bar.bg-guessed {
     background-color: #36a853 !important;
 }
 
-.progress-bar.bg-half {
+.progress-bar.bg-half-guessed {
     background-color: #f0820d !important;
-}
+}
+
+.progress-bar.bg-unguessed {
+    background-color: #d23939 !important;
+}
+
+.progress-bar.bg-current {
+    background-color: #0382b9 !important;
+}
diff --git a/play.html b/play.html
@@ -10,7 +10,7 @@
 </head>
 <body>
     <!-- Playlist selection modal -->
-    <div class="modal modal-lg fade" id="start-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal modal-xl fade" id="start-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered">
                 <!-- Modal content home -->
                 <div class="modal-content" id="start-modal-content-home">

diff --git a/play.js b/play.js
@@ -700,3 +700,5 @@ window.onSpotifyWebPlaybackSDKReady = authorise;
 
 // TODO: Artist score/custom scoring
 // TODO: Album mode
+
+// FIXME: Show and hide current progress bar to prevent confusion
Original file line number	Diff line number	Diff line change
Expand Up		@@ -700,3 +700,5 @@ window.onSpotifyWebPlaybackSDKReady = authorise;

		// TODO: Artist score/custom scoring
		// TODO: Album mode

		// FIXME: Show and hide current progress bar to prevent confusion