diff --git a/js/game.js b/js/game.js index 5fb83b2..76623a0 100644 --- 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 index 05cb8a6..4bc5373 100644 --- 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 index 54bf443..70d9178 100644 --- 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 index e819b5e..0ee9a69 100644 --- 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 index c30e600..ba38455 100644 --- a/play.html +++ b/play.html @@ -9,23 +9,46 @@ + + + 00:00 + +

+ + Playing: -

+
Score: -/-

+ diff --git a/play.js b/play.js index 3709fe2..5bcecab 100644 --- 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