Add preparation modal

pcprince · Aug 7, 2024 · 65e20f3 · 65e20f3
1 parent 57884ce
commit 65e20f3
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 15 deletions.
diff --git a/js/game.js b/js/game.js
@@ -63,15 +63,18 @@ function endGame () {
 
 }
 
-async function prepareGame () {
+async function prepareGame (playlistId, readyCallback) {
 
-    await populateClipList();
+    await populateClipList(playlistId);
 
     connectToPlayer(() => {
 
         initialiseScore();
 
         console.log('Game is ready');
+
+        readyCallback();
+
         startTimerButton.disabled = false;
 
     });

diff --git a/js/pkce.js b/js/pkce.js
@@ -5,7 +5,6 @@
  *****************************************************************************/
 
 /* global localStorage, location */
-/* global prepareGame */
 
 const clientId = 'b91c4f9175aa4b9d8ed6f43c23a5620c';
 let redirectUri = (location.hostname === 'localhost' || location.hostname === '127.0.0.1') ? 'http://localhost:8000' : 'https://pcprince.co.uk/music-quiz';
@@ -16,6 +15,8 @@ const authUrl = new URL('https://accounts.spotify.com/authorize');
 
 let token;
 
+let spotifyReady;
+
 async function sha256 (plain) {
 
     const encoder = new TextEncoder();
@@ -63,7 +64,7 @@ async function redirect () {
 
 }
 
-async function authorise (successCallback) {
+async function authorise () {
 
     const urlParams = new URLSearchParams(window.location.search);
     const code = urlParams.get('code');
@@ -97,11 +98,7 @@ async function authorise (successCallback) {
 
         token = response.access_token;
 
-        if (successCallback) {
-
-            successCallback();
-
-        }
+        spotifyReady = true;
 
     } else {
 

diff --git a/js/songClips.js b/js/songClips.js
@@ -4,7 +4,7 @@
  * July 2024
  *****************************************************************************/
 
-// https://open.spotify.com/playlist/5Rrf7mqN8uus2AaQQQNdc1?si=fd6faea231064972
+// https://open.spotify.com/playlist/5Rrf7mqN8uus2AaQQQNdc1
 
 /* global token, prepareUI */
 /* global stopButton, resumeButton, prevButton, nextButton, playSpecificClip */
@@ -250,12 +250,10 @@ function processSongList (songs) {
 
 }
 
-async function populateClipList () {
+async function populateClipList (playlistId) {
 
     console.log('Populating clip list...');
 
-    const playlistId = '5Rrf7mqN8uus2AaQQQNdc1';
-
     const songs = await getRandomSongsFromSpotifyRadio(playlistId, 20, token);
     processSongList(songs);
 

diff --git a/play.css b/play.css
@@ -11,3 +11,7 @@
 #stop-button, #resume-button {
     width: 82px;
 }
+
+#prepare-button {
+    width: 125px;
+}
diff --git a/play.html b/play.html
@@ -9,23 +9,46 @@
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
 </head>
 <body>
+    <!-- TODO: Add modal with playlist URL input/selection https://getbootstrap.com/docs/5.3/components/modal/ -->
+    <div class="modal fade" id="start-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h1 class="modal-title fs-5" id="staticBackdropLabel">Spotify Quiz</h1>
+                    </div>
+                    <div class="modal-body">
+                        Select a playlist to draw from.
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-primary" id="prepare-button">Prepare Quiz</button>
+                    </div>
+                </div>
+            </div>
+    </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-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 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>
+
     <input id="guess-input" disabled>
     <br>
     <span>Score: </span><span id="score-span">-</span>/<span id="max-score-span">-</span>
     <br><br>
     <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>

diff --git a/play.js b/play.js
@@ -5,13 +5,44 @@
  *****************************************************************************/
 
 /* global authorise, prepareGame */
+/* global spotifyReady */
+/* global bootstrap */
 
-window.onSpotifyWebPlaybackSDKReady = () => {
+const startModal = new bootstrap.Modal(document.getElementById('start-modal'), {
+    backdrop: 'static',
+    keyboard: false
+});
 
-    authorise(prepareGame);
+const prepareButton = document.getElementById('prepare-button');
+
+prepareButton.addEventListener('click', () => {
+
+    if (spotifyReady) {
+
+        prepareButton.disabled = true;
+        prepareButton.innerText = 'Preparing...';
+
+        // TODO: Read from UI or use a default one
+        const playlistId = '5Rrf7mqN8uus2AaQQQNdc1';
+
+        prepareGame(playlistId, () => {
+
+            startModal.hide();
+
+        });
+
+    }
+
+});
+
+window.onload = () => {
+
+    startModal.show();
 
 };
 
+window.onSpotifyWebPlaybackSDKReady = authorise;
+
 // https://developer.spotify.com/dashboard
 // https://developer.spotify.com/documentation/web-playback-sdk/tutorials/getting-started