please end my web dev suffering

public/javascript/user.js

@@ -89,13 +89,13 @@ if (userdata.ban_state !== 0) {
     const parent = document.getElementById("User");
     const wrapperDiv = document.createElement("div");
     wrapperDiv.id = 'wrapper';
-    const newDiv = document.createElement("div");
-    newDiv.classList.add('error')
-    newDiv.innerHTML = `<h3 style='
+    const scoreDiv = document.createElement("div");
+    scoreDiv.classList.add('error')
+    scoreDiv.innerHTML = `<h3 style='
     word-wrap: break-word;
-    max-width:800px;'>Heya! It looks like you've been banned from playing on this profile, but don't worry - you can still enjoy the game in guest mode and view this profile. However, your account won't be able to play on it anymore. If you have any questions about your ban, please contact your Network Administrator.</h3>`; // or set the HTML content with newDiv.innerHTML = "<p>This is some HTML content</p>;
+    max-width:800px;'>Heya! It looks like you've been banned from playing on this profile, but don't worry - you can still enjoy the game in guest mode and view this profile. However, your account won't be able to play on it anymore. If you have any questions about your ban, please contact your Network Administrator.</h3>`; // or set the HTML content with scoreDiv.innerHTML = "<p>This is some HTML content</p>;
     parent.insertBefore(wrapperDiv, parent.firstChild);
-    wrapperDiv.appendChild(newDiv);
+    wrapperDiv.appendChild(scoreDiv);
 }
 
 
@@ -149,6 +149,7 @@ let displayedScoreCount = 20;
 
 async function userPlayLogFormatter(div, loadMoreButton) {
     const UserPlayLogData = await UserPlayLog(aime_card_id);
+    console.log(UserPlayLogData)
     let scoresWrapperDiv = document.getElementById("scoreWrapper");
 
     // If the scores wrapper div doesn't exist, create it.
@@ -158,18 +159,23 @@ async function userPlayLogFormatter(div, loadMoreButton) {
         div.appendChild(scoresWrapperDiv);
     }
 
+    const startIndex = scoresWrapperDiv.children.length;
+    if (startIndex > 0) {
+        // If the scores wrapper div already has children, don't do anything.
+        return;
+    }
+
     // 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
+    for (let i = UserPlayLogData.length - 1; i >= 0; i--) {
+        const scoreDiv = 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
+        let diffucultyData = song.difficultys.Notes[score.level] // get difficulty information
 
         if (!song || !song.name) { // if a song can't be found, skip it and increment the error counter by 1.
             console.log(song)
@@ -179,29 +185,69 @@ async function userPlayLogFormatter(div, loadMoreButton) {
             continue;
         }
 
-        newDiv.innerHTML = `
+        scoreDiv.innerHTML = `
+            <div class="score-title">
             <h4>${song.name.str || ""} || </h4>
+            </div>
         `;
-
+        /* Score Jacket Image */
+        const scoreJacketDiv = document.createElement('div');
         let jacket = document.createElement('img');
         jacket.addEventListener("error", function () {
             this.src = "assets/icon/UI_Icon_000000.png";
         });
+        scoreJacketDiv.classList.add('score-jacket');
         jacket.classList.add('score-jacket');
         jacket.src = "assets/jacket/UI_Jacket_" + padNumber(Number(score.music_id), 6) + '.png';
-        newDiv.append(jacket)
+        scoreJacketDiv.append(jacket)
+        scoreDiv.append(scoreJacketDiv)
 
-        newDiv.setAttribute("id", "score-grid");
-        newDiv.setAttribute("class", "item");
+        /* Achivement Box */
+        const scoreAchivementDiv = document.createElement('div');
+        scoreAchivementDiv.classList.add('score-achivement');
+        scoreAchivementDiv.innerHTML = `<h5>ACHIVEMENT</h5>`;
+        let achivementPercentage = document.createElement('h5');
+        let achivementNumber = padNumber(Number(score.achievement), 7)
+        achivementPercentage.textContent = `${achivementNumber / 10000}%`;
+        scoreAchivementDiv.append(achivementPercentage)
+        scoreDiv.append(scoreAchivementDiv)
+
+        /* Score Grade */
+        let scoreGrades = ["D", "C", "B", "BB", "BBB", "A", "AA", "AAA", "S", "S+", "SS", "SS+", "SSS", "SSS+"]
+        const scoreGradeDiv = document.createElement('div');
+        scoreGradeDiv.classList.add('score-grade');
+        let scoreGrade = document.createElement('h4');
+        scoreGrade.textContent = `${scoreGrades[score.score_rank]}`;
+        scoreGradeDiv.append(scoreGrade);
+        scoreDiv.append(scoreGradeDiv);
+
+        /* DX Score, Full Combo, Full Sync, and Multi-Placement */
+
+        const scoreInfoDiv = document.createElement('div');
+        scoreInfoDiv.classList.add('score-info');
+        const scoreInfoGridDiv = document.createElement('div');
+        scoreInfoDiv.classList.add('score-info-grid');
+        // please i dont want to make a fucking nested grid
+        /* DX Score */
+        const scoreDXScoreDiv = document.createElement('div');
+        scoreDXScoreDiv.classList.add('DX-Score');
+        scoreDXScoreDiv.innerHTML = `<h4>DX Score: ${score.deluxscore} / ${diffucultyData.maxNotes * 3}</h4>`;
+        scoreInfoGridDiv.append(scoreDXScoreDiv);
+        scoreInfoDiv.append(scoreInfoGridDiv);
+        scoreDiv.append(scoreInfoDiv);
+
+
+        scoreDiv.setAttribute("class", "score-grid");
         scoreIncrement++
 
-        scoresWrapperDiv.appendChild(newDiv);
-        
+        scoresWrapperDiv.appendChild(scoreDiv);
     }
 
+
+
     // 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.`;
+    header.textContent = `Showing ${startIndex + scoreIncrement - errorIncrement} out of ${scoreIncrement} scores.`;
     if (errorIncrement > 0) {
         header.insertAdjacentHTML('afterend', `<p>${errorIncrement} Songs Failed to load properly, most likely due to missing information.</p>`);
     }
@@ -217,6 +263,9 @@ async function userPlayLogFormatter(div, loadMoreButton) {
 
 
 
+
+
+
 //=====================================================================
 // Now Exiting: User Data ////////////// Now Entering: Nested Div Hell
 //=====================================================================

public/stylesheets/user.css

@@ -139,30 +139,43 @@ h4.profile {
   display: none !important;
 }
 
-/* Jacket Grid */
+/* Play Data CSS */
+
+#score-info-header-div {
+  grid-area: 2 / 2 / 3 / 4;
+}
+
+#scoreWrapper {
+  grid-area: 3 / 2 / 4 / 4;
+  width:auto;
+  align-items: start;
+  justify-items: start;
+}
+
 
 .score-grid {
   display: grid;
 
-    grid-template-rows: 1fr 1fr 1fr;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: min-content min-content 1fr;
+  grid-template-columns: 300px 300px 5em;
 
   grid-template-areas:
-	'label0 label0 label0 label0'
-	'label1 label1 label2 label3'
-	'label1 label1 label4 label4';
+    'label0 label0 label0'
+    'label1 label2 label3'
+    'label1 label4 label4';
 
   gap: 0px;
-    height: 100%;
-    
 }
 
+
+
 .score-title {
 
   background-color: #D5BBCA;
   grid-area: label0;
 
 }
+
 .score-jacket {
 
   background-color: #9EF6B5;
@@ -170,25 +183,43 @@ h4.profile {
   display: block;
   margin-left: auto;
   margin-right: auto;
-    max-width: 25%;
-    width: 25%;
+  max-width: 100%;
+  width: 100%;
 
 }
+
 .score-achivement {
 
   background-color: #ED69FD;
   grid-area: label2;
 
 }
+
 .score-grade {
 
   background-color: #9B5999;
   grid-area: label3;
 
 }
+
 .score-info {
 
   background-color: #58B669;
   grid-area: label4;
-    
+}
+
+/* Please I really dont want to make a nested grid */
+.score-info-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-template-areas:
+    "DX-Score DX-Score DX-Score"
+    "full-combo full-sync multi-place"
+    "details details details";
+}
+
+.DX-Score {
+  grid-area: DX-Score;
 }

readme.md

@@ -40,6 +40,7 @@ ToDo:
     - Get User Playlog Data (Done)
     - Sort From Most Recent (Done)
     - Assign Song Names to Each Score (done)
+    - Re-Create the MaiMaiDXNet Playlog list (Partially Done)
     - Create Detailed Look Into Score
 - Create Photos Tab
 - Create Area Tab

views/user.ejs

@@ -36,10 +36,13 @@
         <h4>★ ☓<%= userdata.total_awake%></h4>
       </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. -->
+    <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. -->
+      <div id="score-info-header-div">
         <h4 id="score-info-header">Please Wait, Obtaining Scores...</h4>
       </div>
     </div>
+  </div>