Recolour progress bars

pcprince · Aug 23, 2024 · 09d91d6 · 09d91d6
1 parent 9f36942
commit 09d91d6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 32 deletions.
diff --git a/js/progressBar.js b/js/progressBar.js
@@ -9,12 +9,10 @@
 
 const progressBarHolder = document.getElementById('progress-bar-holder');
 let progressBars = [];
-let currentProgressBars = [];
 
 function createProgressBars (onClick) {
 
     progressBars = [];
-    currentProgressBars = [];
     progressBarHolder.innerHTML = '';
 
     const w = progressBarHolder.offsetWidth / songClips.length;
@@ -33,13 +31,6 @@ function createProgressBars (onClick) {
         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);
@@ -61,6 +52,12 @@ function createProgressBars (onClick) {
 
 function colourProgressBar (i) {
 
+    if (i !== currentClipIndex) {
+
+        progressBars[i].classList.remove('progress-bar-animated');
+
+    }
+
     if (isArtistMode()) {
 
         if (isGuessed(i) && isArtistGuessed(i)) {
@@ -97,25 +94,16 @@ function updateProgressBarUI () {
 
     for (let i = 0; i < progressBars.length; i++) {
 
-        if (i < currentClipIndex) {
+        colourProgressBar(i);
 
-            currentProgressBars[i].style.display = 'none';
+        if (i < currentClipIndex) {
 
-            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%';
 
-        } else {
-
-            progressBars[i].style.display = 'none';
-
         }
 
         const parent = progressBars[i].parentElement;
@@ -163,8 +151,6 @@ function fillAllBars () {
 
     for (let i = 0; i < progressBars.length; i++) {
 
-        currentProgressBars[i].style.display = 'none';
-
         progressBars[i].style.display = '';
         progressBars[i].style.width = '100%';
         colourProgressBar(i);
@@ -175,17 +161,16 @@ function fillAllBars () {
 
 function fillBar (percentage) {
 
-    currentProgressBars[currentClipIndex].style.width = percentage + '%';
+    progressBars[currentClipIndex].style.width = percentage + '%';
 
     if (percentage >= 100) {
 
-        currentProgressBars[currentClipIndex].style.width = '100%';
+        progressBars[currentClipIndex].style.width = '100%';
 
     }
 
-    currentProgressBars[currentClipIndex].style.display = '';
-    progressBars[currentClipIndex].style.display = 'none';
-
-    colourProgressBar(currentClipIndex);
+    progressBars[currentClipIndex].classList.add('progress-bar-animated');
 
 }
+
+// TODO: Change it so current bar is the same colour but animates
diff --git a/play.css b/play.css
@@ -50,7 +50,3 @@
 .progress-bar.bg-unguessed {
     background-color: #d23939 !important;
 }
-
-.progress-bar.bg-current {
-    background-color: #0382b9 !important;
-}