Add resetting and speed up initialisation

pcprince · Aug 13, 2024 · 2377425 · 2377425
1 parent b7ebc67
commit 2377425
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 51 deletions.
diff --git a/js/game.js b/js/game.js
@@ -5,8 +5,8 @@
  *****************************************************************************/
 
 /* global connectToPlayer, endTimer, playAll, stopClip */
-/* global playClipButtons, startTimerButton, helpButton, startModal */
-/* global guessInput, giveUpButton, unguessedClips, revealSong */
+/* global playClipButtons, startTimerButton, helpButton, guessInput, giveUpButton, remakeButton */
+/* global unguessedClips, revealSong, resetStartModal */
 /* global songClips */
 
 const scoreSpan = document.getElementById('score-span');
@@ -33,6 +33,13 @@ function initialiseScore () {
 
 }
 
+function resetScore () {
+
+    scoreSpan.innerText = '-';
+    maxScoreSpan.innerText = '-';
+
+}
+
 function startGame () {
 
     gameStarted = true;
@@ -67,6 +74,8 @@ function endGame () {
 
     endTimer();
 
+    remakeButton.disabled = false;
+
 }
 
 async function prepareGame () {
@@ -77,7 +86,7 @@ async function prepareGame () {
 
         console.log('Game is ready');
 
-        startModal.hide();
+        resetStartModal();
 
         startTimerButton.disabled = false;
 

diff --git a/js/guesser.js b/js/guesser.js
@@ -48,24 +48,30 @@ function levenshtein (a, b) {
 
 }
 
-function cleanString (str) {
+function cleanString (input) {
 
-    // Step 1: Split around " - " and take the left part
-    let cleaned = str.split(' - ')[0];
+    // Step 1: Convert the string to lowercase
+    let cleaned = input.toLowerCase();
 
-    // Step 2: Remove all text inside parentheses (including the parentheses themselves)
-    cleaned = cleaned.replace(/\(.*?\)/g, '');
+    // Step 2: Remove text inside standard brackets if it's at the end of the string
+    cleaned = cleaned.replace(/\s*\(.*?\)\s*$/, '');
 
-    // Step 3: Remove all punctuation
+    // Step 3: Split the string around " - " and take all the text to the left of it
+    cleaned = cleaned.split(' - ')[0];
+
+    // Step 4: Remove all punctuation
     cleaned = cleaned.replace(/[^\w\s]/g, '');
 
-    // Step 4: Replace & or lone N with "and"
-    cleaned = cleaned.replace(/&|(\bN\b)/g, 'and');
+    // Step 5: Replace & or a lone 'n' with "and"
+    cleaned = cleaned.replace(/\s*&\s*/g, 'and').replace(/\bn\b/g, 'and');
+
+    // Step 6: Remove all instances of "the"
+    cleaned = cleaned.replace(/\bthe\b/g, '');
 
-    // Step 5: Remove all spaces
+    // Step 7: Strip out all spaces
     cleaned = cleaned.replace(/\s+/g, '');
 
-    return cleaned.toLowerCase();
+    return cleaned;
 
 }
 
@@ -113,50 +119,67 @@ function prepareUI () {
 
     unguessedClips = JSON.parse(JSON.stringify(songClips));
 
-    guessInput.addEventListener('keyup', () => {
-
-        const guess = guessInput.value;
+}
 
-        let matchIndex = -1;
+function resetUI () {
 
-        unguessedClips.forEach((clip, index) => {
+    playClipButtons = [];
+    songNameSpans = [];
+    hyphenSpans = [];
+    artistSpans = [];
 
-            const isMatch = isCloseMatch(guess, clip.songName);
+    unguessedClips = [];
 
-            if (isMatch) {
+}
 
-                matchIndex = index;
+guessInput.addEventListener('keyup', () => {
 
-            }
+    const guess = guessInput.value;
 
-        });
+    let matchIndex = -1;
 
-        if (matchIndex !== -1) {
+    unguessedClips.forEach((clip, index) => {
 
-            // Let user type final letter if that is the only difference
+        const isMatch = isCloseMatch(guess, clip.songName);
 
-            const likelyClipName = cleanString(unguessedClips[matchIndex].songName);
+        if (isMatch) {
 
-            if (likelyClipName.substring(0, likelyClipName.length - 1) === cleanString(guess)) {
+            matchIndex = index;
 
-                return;
+        }
 
-            }
+    });
 
-            console.log('Matched with', matchIndex);
+    if (matchIndex !== -1) {
 
-            guessInput.value = '';
+        // Let user type final letter if that is the only difference
 
-            revealSong(matchIndex, 'green');
+        const likelyClipName = cleanString(unguessedClips[matchIndex].songName);
 
-            unguessedClips.splice(matchIndex, 1);
+        if (likelyClipName.substring(0, likelyClipName.length - 1) === cleanString(guess)) {
 
-            updateScore();
+            return;
 
         }
 
-    });
+        console.log('Matched with', matchIndex);
 
-    giveUpButton.addEventListener('click', endGame);
+        guessInput.value = '';
 
-}
+        revealSong(matchIndex, 'green');
+
+        unguessedClips.splice(matchIndex, 1);
+
+        updateScore();
+
+    }
+
+});
+
+giveUpButton.addEventListener('click', () => {
+
+    console.log('Giving up');
+
+    endGame();
+
+});
diff --git a/js/player.js b/js/player.js
@@ -293,7 +293,7 @@ function updateClipInfo () {
 
     if (currentClipIndex === -1) {
 
-        clipInfo.textContent = '-';
+        clipInfo.textContent = '- / -';
 
     } else {
 

diff --git a/js/songClips.js b/js/songClips.js
@@ -9,7 +9,7 @@
 /* global bootstrap */
 /* global token, currentClipIndex */
 /* global stopButton, resumeButton, prevButton, nextButton */
-/* global prepareUI, resumeClip, stopClip, pauseTimer, resumeTimer, addSecondsToTimer, playSpecificClip */
+/* global prepareUI, resetUI, resumeClip, stopClip, pauseTimer, resumeTimer, addSecondsToTimer, playSpecificClip */
 
 const CLIP_LENGTH_MS = 8000;
 
@@ -321,8 +321,6 @@ async function populateClipList (playlistIdArray, songCount) {
 
         for (let i = 0; i < newSongs.length; i++) {
 
-            newSongs[i].index = i + songClips.length;
-
             const clip = newSongs[i];
 
             if (!clip.uri) {
@@ -346,14 +344,34 @@ async function populateClipList (playlistIdArray, songCount) {
 
     }
 
-    console.log(songClips);
+    // Shuffle
+
+    songClips = songClips.slice().sort(() => 0.5 - Math.random());
+
+    // Add index value
+
+    songClips = songClips.map((item, index) => {
+
+        return {...item, index};
+
+    });
 
     createSongUI();
 
     prepareUI();
 
 }
 
+function clearClipList () {
+
+    songClips = [];
+
+    songUiContainer.innerHTML = '';
+
+    resetUI();
+
+}
+
 helpButton.addEventListener('click', () => {
 
     reselectNumberSpan.innerText = currentClipIndex + 1;

diff --git a/play.html b/play.html
@@ -10,7 +10,7 @@
 </head>
 <body>
     <!-- Playlist selection modal -->
-    <div class="modal modal-lg fade" id="start-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal modal-xl fade" id="start-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered">
                 <!-- Modal content home -->
                 <div class="modal-content" id="start-modal-content-home">
@@ -23,10 +23,16 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Spotify Quiz</h1>
                     <div class="modal-footer">
                         <div class="container">
                             <div class="row">
-                                <div class="col-12" style="text-align: center;">
+                                <div class="col-6 align-self-center" style="text-align: center;">
                                     <span>Total song count:</span>
                                     <input id="quickplay-song-count-input" type="number" value="20" style="width: 75px;">
                                 </div>
+                                <div class="col-6 align-self-center" style="text-align: center;">
+                                    <input type="checkbox" id="quickplay-seeded-checkbox">
+                                    <span>Seed:</span>
+                                    <input id="quickplay-seeded-seed-input" style="width: 70px;" disabled>
+                                    <input id="quickplay-seeded-number-input" type="number" value="1" style="width: 50px;" disabled>
+                                </div>
                             </div>
                             <div class="row" style="margin-top: 15px;">
                                 <div class="col-4" style="text-align: center;">
@@ -149,12 +155,14 @@ <h1 class="modal-title fs-5" id="staticBackdropLabel">Paused</h1>
     <button class="btn btn-primary btn-timer" id="pause-timer-button" disabled>Pause</button>
 
     <button class="btn btn-primary" id="give-up-button" disabled>Give Up</button>
+
+    <button class="btn btn-primary" id="remake-button" disabled>Remake</button>
     <br><br>
 
     <button class="btn btn-primary" id="stop-button" disabled>Stop</button>
     <button class="btn btn-primary" id="resume-button" style="display: none;">Resume</button>
 
-    <span>Playing: </span><span id="clip-info">-</span>
+    <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>
     <br><br>