Increased ttr for UserPlayLog

public/javascript/user.js

@@ -73,15 +73,14 @@ function padNumber(num, size) {
     return s;
 }
 
-async function getSongInformation(id) {
+async function getSongInformation(musicData,id) {
-    const musicData = await musicMetadata();
     const songMatch = musicData[id];
     if (!songMatch) {
-      return null;
+        return null;
     }
     return songMatch;
-  }
+}
-  
+
 
 // Ban Check lmao
 
@@ -144,53 +143,80 @@ request.send();
 
 // User Play Log
 
-async function userPlayLogFormatter(div) {
+let scoreIncrement = 0;
+let errorIncrement = 0;
+let displayedScoreCount = 20;
+
+async function userPlayLogFormatter(div, loadMoreButton) {
     const UserPlayLogData = await UserPlayLog(aime_card_id);
-    const musicIds = UserPlayLogData.map(score => score.music_id);
+    let scoresWrapperDiv = document.getElementById("scoreWrapper");
-    const songs = await Promise.all(musicIds.map(getSongInformation));
+
-    
+    // If the scores wrapper div doesn't exist, create it.
-    let myDiv = document.getElementById("scoreWrapper");
+    if (scoresWrapperDiv === null) {
-    if (myDiv === null) {
+        scoresWrapperDiv = document.createElement('div');
-        const scoresWrapperDiv = document.createElement('div');
         scoresWrapperDiv.id = "scoreWrapper";
-
-        for (let i = UserPlayLogData.length - 1; i >= 0; i--) {
-            const newDiv = document.createElement('div');
-            let score = JSON.parse(JSON.stringify(UserPlayLogData[i]));
-            let song = JSON.parse(JSON.stringify(songs[i]));
-            
-            if (!song || !song.name) {
-                console.log(song)
-                console.log(score.music_id)
-                console.log("Song or title is undefined");
-                continue;
-            }
-            
-            newDiv.innerHTML = `
-                <h4>${song.name.str || ""} || </h4>
-            `;
-
-            let jacket = document.createElement('img');
-            jacket.addEventListener("error", function () {
-                this.src = "assets/icon/UI_Icon_000000.png";
-            });
-            jacket.classList.add('score-jacket');
-            jacket.src = "assets/jacket/UI_Jacket_" + padNumber(Number(score.music_id), 6) + '.png';
-            newDiv.append(jacket)
-
-            newDiv.setAttribute("id", "score-grid");
-            newDiv.setAttribute("class", "item");
-
-            scoresWrapperDiv.appendChild(newDiv);
-        }
-
         div.appendChild(scoresWrapperDiv);
     }
+
+    // Get the user's play log data and music IDs.
+    const musicIds = UserPlayLogData.map(score => score.music_id);
+    const musicData = await musicMetadata();
+    
+    let errorIncrement = 0;
+    let scoreIncrement = 0;
+    const startIndex = scoresWrapperDiv.children.length;
+    const maxScores = startIndex + 20;
+    for (let i = startIndex; i < UserPlayLogData.length && scoreIncrement < maxScores; i++) {
+        const newDiv = document.createElement('div'); // Create a Div
+        let score = JSON.parse(JSON.stringify(UserPlayLogData[i])); // get score data
+        let song = await getSongInformation(musicData, score.music_id) // get song data
+
+        if (!song || !song.name) { // if a song can't be found, skip it and increment the error counter by 1.
+            console.log(song)
+            console.log(score.music_id)
+            console.log("Song or title is undefined");
+            errorIncrement++
+            continue;
+        }
+
+        newDiv.innerHTML = `
+            <h4>${song.name.str || ""} || </h4>
+        `;
+
+        let jacket = document.createElement('img');
+        jacket.addEventListener("error", function () {
+            this.src = "assets/icon/UI_Icon_000000.png";
+        });
+        jacket.classList.add('score-jacket');
+        jacket.src = "assets/jacket/UI_Jacket_" + padNumber(Number(score.music_id), 6) + '.png';
+        newDiv.append(jacket)
+
+        newDiv.setAttribute("id", "score-grid");
+        newDiv.setAttribute("class", "item");
+        scoreIncrement++
+        
+        scoresWrapperDiv.appendChild(newDiv);
+        
+    }
+
+    // Edit the Score Info Header with the relevant information.
+    const header = document.querySelector('#score-info-header');
+    header.textContent = `Showing ${startIndex + scoreIncrement - errorIncrement} out of ${UserPlayLogData.length} scores.`;
+    if (errorIncrement > 0) {
+        header.insertAdjacentHTML('afterend', `<p>${errorIncrement} Songs Failed to load properly, most likely due to missing information.</p>`);
+    }
+
+    // If there are no more scores to load, hide the "Load More" button.
+    if (startIndex + scoreIncrement >= UserPlayLogData.length) {
+        loadMoreButton.style.display = "none";
+    }
 }
 
 
 
 
+
+
 //=====================================================================
 // Now Exiting: User Data ////////////// Now Entering: Nested Div Hell
 //=====================================================================
@@ -238,27 +264,27 @@ function UserPlayLog(aime_card_id) {
 
 async function musicMetadata() {
     const url = "/assets/metadata/musicMetadata.json";
-  
+
     try {
-      const response = await fetch(url, {
+        const response = await fetch(url, {
-        method: "GET",
+            method: "GET",
-        headers: {
+            headers: {
-          "Content-Type": "application/json",
+                "Content-Type": "application/json",
-        },
+            },
-      });
+        });
-  
+
-      const data = await response.json();
+        const data = await response.json();
-  
+
-      const mapping = {};
+        const mapping = {};
-      data.forEach((song) => {
+        data.forEach((song) => {
-        mapping[song.name.id] = song;
+            mapping[song.name.id] = song;
-      });
+        });
-  
+
-      return mapping;
+        return mapping;
     } catch (error) {
-      console.error(error);
+        console.error(error);
     }
-  }
+}
-  
+
-  
+
-  
+

views/user.ejs

@@ -37,7 +37,7 @@
       </div>
     </div><!-- This is just one nested div, Trmazi it's going to get a lot worse from here on. -->
     <div data-content="content-2" id="user-play-data" class="hidden"> <!-- User Play-Log is generated at run time when the user clicks the button, so they get up to date data. -->
-      <h4>Please Wait, Obtaining Scores...</h4>
+      <h4 id="score-info-header">Please Wait, Obtaining Scores...</h4>
     </div>
   </div>