Add play all buttons

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 () {

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');

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';
+
+});

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');

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;
 }

play.html

@@ -175,6 +175,7 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Paused</h1>
     <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>
+    <input type="checkbox" id="skip-guessed-checkbox"><label id="skip-guessed-checkbox-label" for="skip-guessed-checkbox" style="margin-left: 5px; color: grey;">Skip correct guesses</label>
     <br><br>
 
     <input id="guess-input" disabled>

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