Add Bootstrap and make more playable

pcprince · Aug 7, 2024 · 4d2e43c · 4d2e43c
1 parent 31f4003
commit 4d2e43c
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 79 deletions.
diff --git a/index.html b/index.html
@@ -4,11 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Spotify Clip Quiz</title>
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <body>
-    <button id="authorise-button">Authorise</button>
+    <button class="btn btn-primary" id="authorise-button">Authorise</button>
 </body>
 
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+
 <script src="js/pkce.js"></script>
 <script src="index.js"></script>
 

diff --git a/js/game.js b/js/game.js
@@ -4,8 +4,8 @@
  * July 2024
  *****************************************************************************/
 
-/* global populateClipList, connectToPlayer, endTimer */
-/* global playAllButton, playClipButtons, startTimerButton, stopButton, resumeButton, prevButton, nextButton */
+/* global populateClipList, connectToPlayer, endTimer, playAll */
+/* global playClipButtons, startTimerButton */
 /* global guessInput, giveUpButton, unguessedClips, revealSong */
 /* global songClips */
 
@@ -16,6 +16,12 @@ function updateScore () {
 
     scoreSpan.innerText = songClips.length - unguessedClips.length;
 
+    if (unguessedClips.length === 0) {
+
+        endGame();
+
+    }
+
 }
 
 function initialiseScore () {
@@ -33,7 +39,7 @@ function startGame () {
 
     }
 
-    playAllButton.disabled = false;
+    playAll();
 
     guessInput.disabled = false;
     giveUpButton.disabled = false;
@@ -42,23 +48,13 @@ function startGame () {
 
 function endGame () {
 
-    for (let i = 0; i < playClipButtons.length; i++) {
-
-        playClipButtons[i].disabled = true;
-
-    }
-
     for (let i = 0; i < unguessedClips.length; i++) {
 
         revealSong(i, 'red');
 
     }
 
-    playAllButton.disabled = true;
-    stopButton.disabled = true;
-    resumeButton.disabled = true;
-    prevButton.disabled = true;
-    nextButton.disabled = true;
+    stopClip();
 
     guessInput.disabled = true;
     giveUpButton.disabled = true;

diff --git a/js/pkce.js b/js/pkce.js
@@ -63,7 +63,7 @@ async function redirect () {
 
 }
 
-async function authorise () {
+async function authorise (successCallback) {
 
     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get('code');
@@ -97,7 +97,11 @@ async function authorise () {
 
         token = response.access_token;
 
-        prepareGame();
+        if (successCallback) {
+
+            successCallback();
+
+        }
 
     } else {
 

diff --git a/js/player.js b/js/player.js
@@ -8,7 +8,6 @@
 /* global token, songClips, updateGuessUI */
 
 // Define browser elements at the top of the script
-const playAllButton = document.getElementById('play-button');
 const stopButton = document.getElementById('stop-button');
 const resumeButton = document.getElementById('resume-button');
 const prevButton = document.getElementById('prev-button');
@@ -29,6 +28,26 @@ function playSpecificClip (index) {
 
 }
 
+function setStopResumeShown (stopShown) {
+
+    stopButton.style.display = stopShown ? '' : 'none';
+    resumeButton.style.display = stopShown ? 'none' : '';
+
+}
+
+function playAll () {
+
+    playClipsSequentially(songClips);
+
+    stopButton.disabled = false;
+    resumeButton.disabled = true;
+    setStopResumeShown(true);
+
+    prevButton.disabled = false;
+    nextButton.disabled = false;
+
+}
+
 function connectToPlayer (readyCallback) {
 
     player = new Spotify.Player({
@@ -59,43 +78,11 @@ function connectToPlayer (readyCallback) {
 
         resetUI();
 
-        playAllButton.addEventListener('click', () => {
-
-            playClipsSequentially(songClips);
-            stopButton.disabled = false;
-            resumeButton.disabled = true;
-            prevButton.disabled = false;
-            nextButton.disabled = false;
-
-        });
-
-        stopButton.addEventListener('click', () => {
+        stopButton.addEventListener('click', stopClip);
+        resumeButton.addEventListener('click', resumeClip);
 
-            stopClip();
-            stopButton.disabled = true;
-            resumeButton.disabled = false;
-
-        });
-
-        resumeButton.addEventListener('click', () => {
-
-            resumeClip();
-            stopButton.disabled = false;
-            resumeButton.disabled = true;
-
-        });
-
-        prevButton.addEventListener('click', () => {
-
-            previousClip();
-
-        });
-
-        nextButton.addEventListener('click', () => {
-
-            nextClip();
-
-        });
+        prevButton.addEventListener('click', previousClip);
+        nextButton.addEventListener('click', nextClip);
 
         readyCallback();
 
@@ -109,6 +96,7 @@ function playClip (trackUri, startTime, clipLength) {
 
     stopButton.disabled = false;
     resumeButton.disabled = true;
+    setStopResumeShown(true);
 
     console.log('Playing:', currentClipIndex);
 
@@ -191,6 +179,10 @@ function stopClip () {
 
     }
 
+    stopButton.disabled = true;
+    resumeButton.disabled = false;
+    setStopResumeShown(false);
+
     clearTimeout(clipTimeout);
 
     fetch(`https://api.spotify.com/v1/me/player/pause?device_id=${deviceId}`, {
@@ -210,6 +202,10 @@ function resumeClip () {
 
     if (isStopped) {
 
+        stopButton.disabled = false;
+        resumeButton.disabled = true;
+        setStopResumeShown(true);
+
         playNextClip();
 
     }
@@ -244,11 +240,11 @@ function updateClipInfo () {
 
     if (currentClipIndex === -1) {
 
-        clipInfo.textContent = 'Clip: -';
+        clipInfo.textContent = '-';
 
     } else {
 
-        clipInfo.textContent = `Clip: ${currentClipIndex + 1} / ${songClips.length}`;
+        clipInfo.textContent = `${currentClipIndex + 1} / ${songClips.length}`;
 
     }
 
@@ -267,9 +263,9 @@ function resetUI () {
 
     stopButton.disabled = true;
     resumeButton.disabled = true;
+    setStopResumeShown(false);
+
     prevButton.disabled = true;
     nextButton.disabled = true;
 
 }
-
-// https://developer.spotify.com/dashboard
diff --git a/js/songClips.js b/js/songClips.js
@@ -164,14 +164,14 @@ function createSongUI () {
 
         const playClipButton = document.createElement('button');
         playClipButton.textContent = `Play ${index + 1}`;
-        playClipButton.classList.add('play-button');
+        playClipButton.classList.add('play-button', 'btn', 'btn-secondary');
         playClipButton.id = `play-clip-button${index}`;
         playClipButton.disabled = true;
 
         playClipButton.addEventListener('click', () => {
 
-            stopButton.disabled = false;
-            resumeButton.disabled = true;
+            stopButton.style.display = '';
+            resumeButton.style.display = 'none';
             prevButton.disabled = false;
             nextButton.disabled = false;
 

diff --git a/play.css b/play.css
@@ -0,0 +1,9 @@
+.btn-timer {
+    width: 80px;
+    height: 40px;
+}
+
+.play-button {
+    width: 69px;
+    font-size: small !important;
+}
diff --git a/play.html b/play.html
@@ -5,30 +5,31 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Spotify Clip Quiz</title>
     <script src="https://sdk.scdn.co/spotify-player.js"></script>
+    <link href="play.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <body>
     <span id="timer-span">00:00</span>
-    <button id="start-timer-button" disabled>Start</button>
-    <button id="pause-timer-button" style="width: 60px;" disabled>Pause</button>
-    <button id="resume-timer-button" style="width: 60px; display: none;">Resume</button>
+    <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-primary btn-timer" id="resume-timer-button" style="display: none;">Resume</button>
+    <button class="btn btn-primary" id="give-up-button" disabled>Give Up</button>
     <br><br>
-    <button id="play-button" disabled>Play Clips</button>
-    <button id="stop-button" disabled>Stop</button>
-    <button id="resume-button" disabled>Resume</button>
-    <button id="prev-button" disabled>Previous</button>
-    <button id="next-button" disabled>Next</button>
+    <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>
     <br><br>
-    <span id="score-span">-</span>/<span id="max-score-span">-</span>
-    <br><br>
-    <span id="clip-info">Clip: -</span>
-    <br><br>
-    <div id="song-ui-container"></div>
-    <br>
     <input id="guess-input" disabled>
+    <br>
+    <span>Score: </span><span id="score-span">-</span>/<span id="max-score-span">-</span>
     <br><br>
-    <button id="give-up-button" disabled>Give Up</button>
+    <div id="song-ui-container"></div>
 </body>
 
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+
 <script src="js/pkce.js"></script>
 <script src="js/songClips.js"></script>
 <script src="js/guesser.js"></script>

diff --git a/play.js b/play.js
@@ -4,14 +4,17 @@
  * August 2024
  *****************************************************************************/
 
-/* global authorise */
+/* global authorise, prepareGame */
 
-window.onSpotifyWebPlaybackSDKReady = authorise;
+window.onSpotifyWebPlaybackSDKReady = () => {
+
+    authorise(prepareGame);
+
+};
 
 // https://developer.spotify.com/dashboard
 // https://developer.spotify.com/documentation/web-playback-sdk/tutorials/getting-started
 
-// TODO: Timer
 // TODO: Table
 
 // TODO: Don't generate quiz until function is called to do so