From c662c5814ab1fdad867c823f4954694d5d84dd91 Mon Sep 17 00:00:00 2001 From: Peter Prince Date: Fri, 16 Aug 2024 16:45:10 +0100 Subject: [PATCH] Add play all buttons --- js/game.js | 8 +++++ js/guesser.js | 7 ++-- js/player.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++--- js/songClips.js | 31 +++++++++++++++--- play.css | 8 ++++- play.html | 1 + play.js | 4 +-- 7 files changed, 129 insertions(+), 16 deletions(-) diff --git a/js/game.js b/js/game.js index d103cf4..53f5988 100644 --- a/js/game.js +++ b/js/game.js @@ -76,6 +76,14 @@ function endGame () { remakeButton.disabled = false; + const playAllButtons = document.getElementsByClassName('play-all-button'); + + for (let i = 0; i < playAllButtons.length; i++) { + + playAllButtons[i].style.display = ''; + + } + } async function prepareGame () { diff --git a/js/guesser.js b/js/guesser.js index a8b494a..45d228e 100644 --- a/js/guesser.js +++ b/js/guesser.js @@ -68,7 +68,10 @@ function cleanString (input) { // Step 6: Remove all instances of "the" cleaned = cleaned.replace(/\bthe\b/g, ''); - // Step 7: Strip out all spaces + // Step 8: Replace "part" with "pt" + cleaned = cleaned.replace(/\bpart\b/g, 'pt'); + + // Step 9: Strip out all spaces cleaned = cleaned.replace(/\s+/g, ''); return cleaned; @@ -113,7 +116,7 @@ function updateGuessUI (playingIndex) { function prepareUI () { - playClipButtons = document.getElementsByClassName('play-button'); + playClipButtons = document.getElementsByClassName('play-clip-button'); songNameSpans = document.getElementsByClassName('song-name-span'); hyphenSpans = document.getElementsByClassName('hyphen-span'); artistSpans = document.getElementsByClassName('artist-span'); diff --git a/js/player.js b/js/player.js index 9c3ecb6..83869c8 100644 --- a/js/player.js +++ b/js/player.js @@ -6,7 +6,7 @@ /* global Spotify */ /* global updateGuessUI, formatTimeMs */ -/* global token, songClips, gameStarted */ +/* global token, songClips, unguessedClips, gameStarted */ /* global helpButton */ // Define browser elements at the top of the script @@ -18,6 +18,9 @@ const nextButton = document.getElementById('next-button'); const clipInfo = document.getElementById('clip-info'); +const skipGuessCheckbox = document.getElementById('skip-guessed-checkbox'); +const skipGuessCheckboxLabel = document.getElementById('skip-guessed-checkbox-label'); + let currentClipIndex = 0; let clipTimeout; let isStopped = false; @@ -38,6 +41,14 @@ function playSpecificClip (index) { } +function playSpecificSong (index) { + + currentClipIndex = index; + playAllSong(); + updateClipInfo(); + +} + function setStopResumeShown (stopShown) { stopButton.style.display = stopShown ? '' : 'none'; @@ -139,8 +150,20 @@ function playClip (trackUri, startTime, clipLength) { resumeButton.disabled = true; setStopResumeShown(true); - const endTime = startTime + clipLength; - console.log('Playing clip ' + currentClipIndex + ' (' + formatTimeMs(startTime * 1000) + ' - ' + formatTimeMs(endTime * 1000) + ')'); + startTime = startTime === undefined ? 0 : startTime; + + console.log(startTime); + + const songName = songClips[currentClipIndex].songName; + const artistNames = songClips[currentClipIndex].artists.map(artist => artist.name).join(', '); + + let playingStr = 'Playing '; + playingStr += clipLength ? 'clip ' : ''; + playingStr += currentClipIndex + ' : ' + songName + ' - ' + artistNames + ' (' + formatTimeMs(startTime * 1000) + ' - '; + playingStr += clipLength ? formatTimeMs(startTime + clipLength * 1000) : 'End'; + playingStr += ')'; + + console.log(playingStr); updateClipInfo(); @@ -166,7 +189,11 @@ function playClip (trackUri, startTime, clipLength) { isStopped = false; - clipTimeout = setTimeout(nextClip, clipLength * 1000); + if (clipLength) { + + clipTimeout = setTimeout(nextClip, clipLength * 1000); + + } } else { @@ -202,6 +229,24 @@ function playCurrentClip () { } +function playAllSong () { + + const song = songClips[currentClipIndex]; + + if (song.uri) { + + updateGuessUI(currentClipIndex); + + playClip(song.uri); + + } else { + + console.error('Unable to play full song'); + + } + +} + function stopClip () { retryStopCount++; @@ -279,7 +324,32 @@ function nextClip () { if (currentClipIndex < songClips.length - 1) { currentClipIndex++; - playCurrentClip(); + + if (skipGuessCheckbox.checked) { + + while (currentClipIndex < songClips.length) { + + if (unguessedClips.some(obj => obj.index === currentClipIndex)) { + + playCurrentClip(); + return; + + } + + console.log('Skipping clip', currentClipIndex); + + currentClipIndex++; + + } + + stopClip(); + resetUI(); + + } else { + + playCurrentClip(); + + } } else { @@ -325,3 +395,9 @@ function resetUI () { helpButton.disabled = true; } + +skipGuessCheckbox.addEventListener('change', () => { + + skipGuessCheckboxLabel.style.color = skipGuessCheckbox.checked ? '' : 'grey'; + +}); diff --git a/js/songClips.js b/js/songClips.js index 4d6b80e..527e40d 100644 --- a/js/songClips.js +++ b/js/songClips.js @@ -9,7 +9,7 @@ /* global bootstrap */ /* global token, currentClipIndex */ /* global stopButton, resumeButton, prevButton, nextButton */ -/* global prepareUI, resetUI, resumeClip, stopClip, pauseTimer, resumeTimer, addSecondsToTimer, playSpecificClip, seededRandom */ +/* global prepareUI, resetUI, resumeClip, stopClip, pauseTimer, resumeTimer, addSecondsToTimer, playSpecificClip, playSpecificSong, seededRandom */ const CLIP_LENGTH_MS = 8000; @@ -63,7 +63,7 @@ function removeDuplicateArtists (songArray) { if (hasDuplicate) { - console.log('Removed', song.songName, '-', song.artists[0].name); + // console.log('Removed', song.songName, '-', song.artists[0].name); return false; } else { @@ -75,8 +75,8 @@ function removeDuplicateArtists (songArray) { }); - const diff = songArray.length - uniqueArray.length; - console.log('Removed ' + diff + ' tracks due to duplicate artists'); + // const diff = songArray.length - uniqueArray.length; + // console.log('Removed ' + diff + ' tracks due to duplicate artists'); return uniqueArray; @@ -260,7 +260,7 @@ function createSongUI () { const playClipButton = document.createElement('button'); playClipButton.textContent = `Play ${index + 1}`; - playClipButton.classList.add('play-button', 'btn', 'btn-secondary'); + playClipButton.classList.add('play-clip-button', 'btn', 'btn-secondary'); playClipButton.id = `play-clip-button${index}`; playClipButton.disabled = true; @@ -277,6 +277,27 @@ function createSongUI () { songUiContainer.appendChild(playClipButton); + // Add hidden play all button + + const playAllButton = document.createElement('button'); + playAllButton.textContent = `Play All ${index + 1}`; + playAllButton.classList.add('play-all-button', 'btn', 'btn-primary'); + playAllButton.id = `play-all-button${index}`; + playAllButton.style.display = 'none'; + + playAllButton.addEventListener('click', () => { + + stopButton.style.display = ''; + resumeButton.style.display = 'none'; + prevButton.disabled = false; + nextButton.disabled = false; + + playSpecificSong(index); + + }); + + songUiContainer.appendChild(playAllButton); + // Add song name const songNameSpan = document.createElement('span'); diff --git a/play.css b/play.css index dc12aca..b1df811 100644 --- a/play.css +++ b/play.css @@ -3,11 +3,17 @@ height: 38px; } -.play-button { +.play-clip-button { width: 75px; font-size: small !important; } +.play-all-button { + width: 90px; + font-size: small !important; + margin-left: 5px; +} + #stop-button, #resume-button { width: 82px; } diff --git a/play.html b/play.html index ab6a3b6..3a7c184 100644 --- a/play.html +++ b/play.html @@ -175,6 +175,7 @@

Paused

Playing: - / - +

diff --git a/play.js b/play.js index 37c5020..8669282 100644 --- a/play.js +++ b/play.js @@ -658,9 +658,7 @@ window.onSpotifyWebPlaybackSDKReady = authorise; // https://developer.spotify.com/dashboard // https://developer.spotify.com/documentation/web-playback-sdk/tutorials/getting-started -// TODO: Disallow duplicate artists - -// TODO: Display error when failed to add playlist URL +// TODO: Ungrey skip // TODO: Load sporacle quizzes