Refactor buttons

js/game.js

@@ -5,7 +5,7 @@
  *****************************************************************************/
 
 /* global connectToPlayer, endTimer, playAll, stopClip */
-/* global playClipButtons, startTimerButton, helpButton, guessInput, giveUpButton, remakeButton */
+/* global playClipButtons, startTimerButton, pauseTimerButton, helpButton, guessInput, giveUpButton, remakeButton */
 /* global revealSong, revealArtist, resetStartModal, isArtistMode, fillAllBars */
 /* global unguessedClips, unguessedArtistClips, songClips */
 
@@ -132,6 +132,12 @@ async function prepareGame () {
 
         startTimerButton.disabled = false;
 
+        startTimerButton.style.display = '';
+        pauseTimerButton.style.display = 'none';
+
+        giveUpButton.style.display = '';
+        remakeButton.style.display = 'none';
+
     });
 
 }

js/guesser.js

@@ -6,6 +6,7 @@
 
 /* global songClips */
 /* global endGame, updateScore, isArtistMode, updateProgressBarUI */
+/* global remakeButton */
 
 const MAX_DISTANCE = 1;
 
@@ -282,6 +283,9 @@ giveUpButton.addEventListener('click', () => {
 
     console.log('Giving up');
 
+    giveUpButton.style.display = 'none';
+    remakeButton.style.display = '';
+
     endGame();
 
 });

js/progressBar.js

@@ -151,7 +151,7 @@ function fillAllBars () {
 
     for (let i = 0; i < progressBars.length; i++) {
 
-        progressBars[i].style.display = '';
+        progressBars[i].classList.remove('progress-bar-animated');
         progressBars[i].style.width = '100%';
         colourProgressBar(i);
 

js/timer.js

@@ -86,8 +86,8 @@ function endTimer () {
 
     clearInterval(timerInterval);
 
-    pauseTimerButton.disabled = true;
     resumeTimerButton.disabled = true;
+    pauseTimerButton.disabled = true;
 
 }
 
@@ -100,9 +100,12 @@ function startTimer () {
 
     isPaused = false;
 
-    pauseTimerButton.disabled = false;
     resumeTimerButton.disabled = false;
     startTimerButton.disabled = true;
+    pauseTimerButton.disabled = false;
+
+    startTimerButton.style.display = 'none';
+    pauseTimerButton.style.display = '';
 
     startGame();
 

play.css

@@ -14,10 +14,6 @@
     margin-left: 5px;
 }
 
-#stop-button, #resume-button {
-    width: 82px;
-}
-
 .start-modal-btn {
     width: 150px;
 }
@@ -50,3 +46,14 @@
 .progress-bar.bg-unguessed {
     background-color: #d23939 !important;
 }
+
+.button-icon {
+    width: 15px;
+    height: 15px;
+    vertical-align: initial;
+}
+
+.playback-button {
+    width: 40px;
+    height: 35px;
+}

play.html

@@ -172,31 +172,42 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Paused</h1>
     </div>
 
     <span id="timer-span">00:00</span>
-    <button class="btn btn-primary btn-timer" id="start-timer-button" disabled>Start</button>
 
-    <button class="btn btn-primary btn-timer" id="pause-timer-button" disabled>Pause</button>
+    <button class="btn btn-success btn-timer" id="start-timer-button" disabled>Start</button>
+    <button class="btn btn-secondary btn-timer" id="pause-timer-button" disabled style="display: none;">Pause</button>
 
-    <button class="btn btn-primary" id="give-up-button" disabled>Give Up</button>
+    <button class="btn btn-danger" id="give-up-button" disabled>Give Up</button>
+    <button class="btn btn-primary" id="remake-button" disabled style="display: none;">Remake</button>
 
-    <button class="btn btn-primary" id="remake-button" disabled>Remake</button>
     <br><br>
 
     <div id="progress-bar-holder" class="d-flex" style="max-width: 75%;"></div>
 
     <br><br>
 
-    <button class="btn btn-primary" id="stop-button" disabled>Stop</button>
-    <button class="btn btn-primary" id="resume-button" style="display: none;">Resume</button>
-
     <span>Playing: </span><span id="clip-info">- / -</span>
-    <button class="btn btn-primary" id="prev-button" disabled>Previous</button>
-    <button class="btn btn-primary" id="next-button" disabled>Next</button>
+
+    <button class="btn btn-primary playback-button" id="prev-button" disabled>
+        <img class="button-icon" src="../images/chevron-left.svg" alt="Bootstrap">
+    </button>
+
+    <button class="btn btn-secondary playback-button" id="stop-button" disabled>
+        <img class="button-icon" src="../images/pause.svg" alt="Bootstrap">
+    </button>
+    <button class="btn btn-secondary playback-button" id="resume-button" style="display: none;">
+        <img class="button-icon" src="../images/play-fill.svg" alt="Bootstrap">
+    </button>
+
+    <button class="btn btn-primary playback-button" id="next-button" disabled>
+        <img class="button-icon" src="../images/chevron-right.svg" alt="Bootstrap">
+    </button>
+
     <input type="checkbox" id="skip-guessed-checkbox"><label id="skip-guessed-checkbox-label" for="skip-guessed-checkbox" style="margin-left: 5px; color: grey;">Skip correct guesses</label>
     <br><br>
 
     <input id="guess-input" disabled>
     <br>
-    <span>Score: </span><span id="score-span">-</span>/<span id="max-score-span">-</span>
+    <span>Song Score: </span><span id="score-span">-</span>/<span id="max-score-span">-</span>
     <br>
     <div id="artist-score-holder" style="display: none;">
         <span>Artist Score: </span><span id="artist-score-span">-</span>/<span id="max-artist-score-span">-</span>

play.js

@@ -700,5 +700,3 @@ window.onSpotifyWebPlaybackSDKReady = authorise;
 
 // TODO: Artist score/custom scoring
 // TODO: Album mode
-
-// FIXME: Show and hide current progress bar to prevent confusion