From 181f662459b160b0866694c5f41c4861974c0970 Mon Sep 17 00:00:00 2001
From: Peter Prince <github@pcprince.co.uk>
Date: Fri, 23 Aug 2024 13:56:14 +0100
Subject: [PATCH] Refactor buttons

---
 images/chevron-left.svg  |  3 +++
 images/chevron-right.svg |  3 +++
 images/pause.svg         |  3 +++
 images/play-fill.svg     |  3 +++
 js/game.js               |  8 +++++++-
 js/guesser.js            |  4 ++++
 js/progressBar.js        |  2 +-
 js/timer.js              |  7 +++++--
 play.css                 | 15 +++++++++++----
 play.html                | 31 +++++++++++++++++++++----------
 play.js                  |  2 --
 11 files changed, 61 insertions(+), 20 deletions(-)
 create mode 100644 images/chevron-left.svg
 create mode 100644 images/chevron-right.svg
 create mode 100644 images/pause.svg
 create mode 100644 images/play-fill.svg

diff --git a/images/chevron-left.svg b/images/chevron-left.svg
new file mode 100644
index 0000000..5bcc1bb
--- /dev/null
+++ b/images/chevron-left.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
+</svg>
\ No newline at end of file
diff --git a/images/chevron-right.svg b/images/chevron-right.svg
new file mode 100644
index 0000000..ab39af8
--- /dev/null
+++ b/images/chevron-right.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
+</svg>
\ No newline at end of file
diff --git a/images/pause.svg b/images/pause.svg
new file mode 100644
index 0000000..7bfde2c
--- /dev/null
+++ b/images/pause.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause" viewBox="0 0 16 16">
+  <path d="M6 3.5a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5m4 0a.5.5 0 0 1 .5.5v8a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5"/>
+</svg>
\ No newline at end of file
diff --git a/images/play-fill.svg b/images/play-fill.svg
new file mode 100644
index 0000000..e538083
--- /dev/null
+++ b/images/play-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
+  <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393"/>
+</svg>
\ No newline at end of file
diff --git a/js/game.js b/js/game.js
index cf02246..383eef3 100644
--- a/js/game.js
+++ b/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';
+
     });
 
 }
diff --git a/js/guesser.js b/js/guesser.js
index 7e6b4b4..9845a19 100644
--- a/js/guesser.js
+++ b/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();
 
 });
diff --git a/js/progressBar.js b/js/progressBar.js
index 923ca89..9373d5a 100644
--- a/js/progressBar.js
+++ b/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);
 
diff --git a/js/timer.js b/js/timer.js
index 61d99f8..2633db7 100644
--- a/js/timer.js
+++ b/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();
 
diff --git a/play.css b/play.css
index ff9b262..0d55ba1 100644
--- a/play.css
+++ b/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;
+}
diff --git a/play.html b/play.html
index f4e5722..f5b48c0 100644
--- a/play.html
+++ b/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>
diff --git a/play.js b/play.js
index 1e55334..e1a58d6 100644
--- a/play.js
+++ b/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