From 9f369424e4bddc1a3e45a5f00be07cafe4355c7c Mon Sep 17 00:00:00 2001 From: Peter Prince Date: Fri, 23 Aug 2024 10:55:18 +0100 Subject: [PATCH] Fix progress bar --- js/progressBar.js | 62 ++++++++++++++++++++++++++++++++--------------- play.css | 18 ++++++++++---- play.html | 2 +- play.js | 2 ++ 4 files changed, 58 insertions(+), 26 deletions(-) diff --git a/js/progressBar.js b/js/progressBar.js index d7c20d9..4865ec7 100644 --- 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,20 +65,18 @@ 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'); } @@ -77,9 +84,8 @@ function colourProgressBar (i) { 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 index 403d7d4..ff2c8c4 100644 --- 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; -} \ No newline at end of file +} + +.progress-bar.bg-unguessed { + background-color: #d23939 !important; +} + +.progress-bar.bg-current { + background-color: #0382b9 !important; +} diff --git a/play.html b/play.html index 8a57a50..f4e5722 100644 --- a/play.html +++ b/play.html @@ -10,7 +10,7 @@ -