Add artist mode

pcprince · Aug 22, 2024 · 19c4ecf · 19c4ecf
1 parent e0d4bdf
commit 19c4ecf
Show file tree

Hide file tree

Showing 8 changed files with 304 additions and 45 deletions.
diff --git a/js/game.js b/js/game.js
@@ -6,21 +6,39 @@
 
 /* global connectToPlayer, endTimer, playAll, stopClip */
 /* global playClipButtons, startTimerButton, helpButton, guessInput, giveUpButton, remakeButton */
-/* global unguessedClips, revealSong, resetStartModal */
+/* global unguessedClips, unguessedArtistClips, revealSong, revealArtist, resetStartModal, isArtistMode */
 /* global songClips */
 
 const scoreSpan = document.getElementById('score-span');
 const maxScoreSpan = document.getElementById('max-score-span');
 
+const artistScoreHolder = document.getElementById('artist-score-holder');
+const artistScoreSpan = document.getElementById('artist-score-span');
+const maxArtistScoreSpan = document.getElementById('max-artist-score-span');
+
 let gameStarted = false;
 
 function updateScore () {
 
     scoreSpan.innerText = songClips.length - unguessedClips.length;
 
-    if (unguessedClips.length === 0) {
+    if (isArtistMode()) {
+
+        artistScoreSpan.innerText = songClips.length - unguessedArtistClips.length;
+
+        if (unguessedClips.length === 0 && unguessedArtistClips.length === 0) {
+
+            endGame();
+
+        }
+
+    } else {
+
+        if (unguessedClips.length === 0) {
+
+            endGame();
 
-        endGame();
+        }
 
     }
 
@@ -30,13 +48,17 @@ function initialiseScore () {
 
     scoreSpan.innerText = '0';
     maxScoreSpan.innerText = songClips.length;
+    maxArtistScoreSpan.innerText = songClips.length;
+
+    artistScoreHolder.style.display = isArtistMode() ? '' : 'none';
 
 }
 
 function resetScore () {
 
     scoreSpan.innerText = '-';
     maxScoreSpan.innerText = '-';
+    maxArtistScoreSpan.innerText = '-';
 
 }
 
@@ -67,6 +89,16 @@ function endGame () {
 
     }
 
+    if (isArtistMode()) {
+
+        for (let i = 0; i < unguessedArtistClips.length; i++) {
+
+            revealArtist(i, 'red');
+
+        }
+
+    }
+
     stopClip();
 
     guessInput.disabled = true;

diff --git a/js/guesser.js b/js/guesser.js
@@ -5,7 +5,7 @@
  *****************************************************************************/
 
 /* global songClips */
-/* global endGame, updateScore */
+/* global endGame, updateScore, isArtistMode, updateProgressBarUI */
 
 const MAX_DISTANCE = 1;
 
@@ -14,7 +14,7 @@ let playClipButtons, songNameSpans, hyphenSpans, artistSpans;
 const guessInput = document.getElementById('guess-input');
 const giveUpButton = document.getElementById('give-up-button');
 
-let unguessedClips;
+let unguessedClips, unguessedArtistClips;
 
 function levenshtein (a, b) {
 
@@ -78,27 +78,40 @@ function cleanString (input) {
 
 }
 
-function isCloseMatch (userGuess, actualTitle) {
+function isCloseMatch (userGuess, actualName) {
 
     const cleanedUserGuess = cleanString(userGuess);
-    const cleanedActualTitle = cleanString(actualTitle);
-    const distance = levenshtein(cleanedUserGuess, cleanedActualTitle);
+    const cleanedActualName = cleanString(actualName);
+    const distance = levenshtein(cleanedUserGuess, cleanedActualName);
 
     return distance <= MAX_DISTANCE;
 
 }
 
+function revealArtist (index, colour) {
+
+    const clip = unguessedArtistClips[index];
+
+    artistSpans[clip.index].innerText = clip.artists.map(artist => artist.name).join(', ');
+    artistSpans[clip.index].style.color = colour;
+
+}
+
 function revealSong (index, colour) {
 
     const clip = unguessedClips[index];
 
     songNameSpans[clip.index].innerText = clip.songName;
 
-    artistSpans[clip.index].innerText = clip.artists.map(artist => artist.name).join(', ');
-
     songNameSpans[clip.index].style.color = colour;
     hyphenSpans[clip.index].style.color = colour;
-    artistSpans[clip.index].style.color = colour;
+
+    if (!isArtistMode()) {
+
+        artistSpans[clip.index].innerText = clip.artists.map(artist => artist.name).join(', ');
+        artistSpans[clip.index].style.color = colour;
+
+    }
 
 }
 
@@ -122,6 +135,7 @@ async function prepareUI () {
     artistSpans = document.getElementsByClassName('artist-span');
 
     unguessedClips = JSON.parse(JSON.stringify(songClips));
+    unguessedArtistClips = JSON.parse(JSON.stringify(songClips));
 
 }
 
@@ -133,6 +147,13 @@ function resetUI () {
     artistSpans = [];
 
     unguessedClips = [];
+    unguessedArtistClips = [];
+
+}
+
+function isArtistGuessed (i) {
+
+    return !unguessedArtistClips.some(obj => obj.index === i);
 
 }
 
@@ -142,9 +163,64 @@ function isGuessed (i) {
 
 }
 
-guessInput.addEventListener('keyup', () => {
+function checkArtistGuess (guess) {
 
-    const guess = guessInput.value;
+    let matchIndex = -1;
+
+    unguessedArtistClips.forEach((clip, index) => {
+
+        const artists = clip.artists;
+
+        for (let i = 0; i < artists.length; i++) {
+
+            const isMatch = isCloseMatch(guess, artists[i].name);
+
+            if (isMatch) {
+
+                matchIndex = index;
+
+            }
+
+        }
+
+    });
+
+    if (matchIndex !== -1) {
+
+        const artists = unguessedArtistClips[matchIndex].artists;
+
+        // Let user type final letter if that is the only difference
+
+        for (let i = 0; i < artists.length; i++) {
+
+            const artist = artists[i].name;
+
+            const likelyArtistName = cleanString(artist);
+
+            if (likelyArtistName.substring(0, likelyArtistName.length - 1) === cleanString(guess)) {
+
+                return;
+
+            }
+        }
+
+        console.log('Matched with', matchIndex);
+
+        guessInput.value = '';
+
+        revealArtist(matchIndex, 'green');
+
+        unguessedArtistClips.splice(matchIndex, 1);
+
+        updateScore();
+
+        updateProgressBarUI();
+
+    }
+
+}
+
+function checkSongGuess (guess) {
 
     let matchIndex = -1;
 
@@ -182,6 +258,22 @@ guessInput.addEventListener('keyup', () => {
 
         updateScore();
 
+        updateProgressBarUI();
+
+    }
+
+}
+
+guessInput.addEventListener('keyup', () => {
+
+    const guess = guessInput.value;
+
+    checkSongGuess(guess);
+
+    if (isArtistMode()) {
+
+        checkArtistGuess(guess);
+
     }
 
 });

diff --git a/js/player.js b/js/player.js
@@ -5,7 +5,7 @@
  *****************************************************************************/
 
 /* global Spotify */
-/* global updateGuessUI, formatTimeMs, fillBar */
+/* global updateGuessUI, formatTimeMs, fillBar, updateProgressBarUI */
 /* global token, songClips, unguessedClips, gameStarted */
 /* global helpButton */
 
@@ -166,7 +166,7 @@ function startProgressBarLoop () {
 
     }
 
-    fillBar(currentClipIndex, 0);
+    fillBar(0);
 
     animationInterval = setInterval(() => {
 
@@ -181,7 +181,7 @@ function startProgressBarLoop () {
 
             }
 
-            fillBar(currentClipIndex, currentPercentage);
+            fillBar(currentPercentage);
 
         }
 
@@ -199,7 +199,7 @@ function endProgressBarLoop (newBarPercentage) {
 
     if (newBarPercentage) {
 
-        fillBar(currentClipIndex, newBarPercentage);
+        fillBar(newBarPercentage);
 
     }
 
@@ -211,6 +211,8 @@ function playClip (trackUri, startTime, clipLength) {
     resumeButton.disabled = true;
     setStopResumeShown(true);
 
+    updateProgressBarUI();
+
     startTime = startTime === undefined ? 0 : startTime;
 
     const songName = songClips[currentClipIndex].songName;