From 4d2e43cec2da93241925d7c729bc533e38ffc21d Mon Sep 17 00:00:00 2001 From: Peter Prince Date: Wed, 7 Aug 2024 16:00:05 +0100 Subject: [PATCH] Add Bootstrap and make more playable --- index.html | 5 +++- js/game.js | 24 +++++++-------- js/pkce.js | 8 +++-- js/player.js | 78 +++++++++++++++++++++++-------------------------- js/songClips.js | 6 ++-- play.css | 9 ++++++ play.html | 31 ++++++++++---------- play.js | 9 ++++-- 8 files changed, 91 insertions(+), 79 deletions(-) create mode 100644 play.css diff --git a/index.html b/index.html index 8252ab0..96f3b95 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,14 @@ Spotify Clip Quiz + - + + + diff --git a/js/game.js b/js/game.js index 49a1716..5fb83b2 100644 --- 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 index 26adc44..05cb8a6 100644 --- 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 index 26caba6..dee8f30 100644 --- 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 index b1e0aae..54bf443 100644 --- 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 new file mode 100644 index 0000000..de44a9d --- /dev/null +++ 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 index ab9d130..c30e600 100644 --- a/play.html +++ b/play.html @@ -5,30 +5,31 @@ Spotify Clip Quiz + + 00:00 - - - + + + +

- - - - - + + + Playing: - + +

- -/- -

- Clip: - -

-
-
+
+ Score: -/-

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