Judgement Details now done

public/javascript/user.js

@@ -201,8 +201,6 @@ async function userPlayLogFormatter(div, loadMoreButton) {
     }
 
     // Get the user's play log data and music IDs.
-    console.log(UserPlayLogData)
-    const musicIds = UserPlayLogData.map(score => score.music_id);
     const musicData = await musicMetadata();
 
     let errorIncrement = 0;
@@ -224,7 +222,6 @@ async function userPlayLogFormatter(div, loadMoreButton) {
             errorIncrement++
             continue;
         }
-        console.log(song)
         // Song Title
         tasGrid.innerHTML = `
             <div class="score-title">
@@ -329,8 +326,16 @@ async function userPlayLogFormatter(div, loadMoreButton) {
         let summary = document.createElement('summary');
         summary.textContent = "Details";
         const detailsGridDiv = document.createElement('div');
+
+        /* title to table */
+        let detailsTable = document.createElement('table');
+        await createtTable(detailsTable, score)
+
+
+        detailsGridDiv.append(detailsTable);
         detailsBlock.append(detailsGridDiv);
         scoreDiv.append(detailsBlock);
+
         /* setting stuff up */
 
 
@@ -357,6 +362,118 @@ async function userPlayLogFormatter(div, loadMoreButton) {
     // If there are no more scores to load, hide the "Load More" button.
 }
 
+function createtTable(detailsTable, score) { //thing needs to be seperated or else it will keep creating the 2nd recent score. beats me. \-(*-*)-/
+    return new Promise((resolve, reject) => {
+        let hrow = detailsTable.insertRow(0);
+        let judgementType = ["Critical Perfect", "Perfect", "Great", "Good", "Miss"];
+        let noteType = ["Tap", "Hold", "Slide", "Break", "Touch"];
+        let noteJudgement = [
+            [
+                score.tapCriticalPerfect,
+                score.tapPerfect,
+                score.tapGreat,
+                score.tapGood,
+                score.tapMiss,
+            ],
+            [
+                score.holdCriticalPerfect,
+                score.holdPerfect,
+                score.holdGreat,
+                score.holdGood,
+                score.holdMiss,
+            ],
+            [
+                score.slideCriticalPerfect,
+                score.slidePerfect,
+                score.slideGreat,
+                score.slideGood,
+                score.slideMiss,
+            ],
+            [
+                score.breakCriticalPerfect,
+                score.breakPerfect,
+                score.breakGreat,
+                score.breakGood,
+                score.breakMiss,
+            ],
+            [
+                score.touchCriticalPerfect,
+                score.touchPerfect,
+                score.touchGreat,
+                score.touchGood,
+                score.touchMiss,
+            ]
+        ]
+        if (score.isCriticalDisp == 1) { // Perform a check to see if critPerfects are required
+            let blankCell = hrow.insertCell(0);
+            blankCell.innerText = ""
+            for (i = 0; i < judgementType.length; i++) {
+                let cell = hrow.insertCell(i + 1);
+                cell.innerText = judgementType[i];
+            }
+
+            if (score.isTouch == 1) { // Check if Touch Notes are Needed.
+                let judgementCount = (judgementType.length - 1) + score.isCriticalDisp;
+                for (i = 0; i < noteType.length; i++) {
+                    let row = detailsTable.insertRow(i);
+                    let blankCell = row.insertCell(0);
+                    blankCell.innerText = noteType[i]
+                    for (ii = 0; ii < judgementCount; ii++) {
+                        let cell = row.insertCell(ii + 1);
+                        cell.innerText = noteJudgement[i][ii]
+                    }
+                }
+            } else {
+                let judgementCount = (judgementType.length - 1) + score.isCriticalDisp; 
+                for (i = 0; i < noteType.length - 1; i++) {
+                    let row = detailsTable.insertRow(i);
+                    let blankCell = row.insertCell(0);
+                    blankCell.innerText = noteType[i]
+                    for (ii = 0; ii < judgementCount; ii++) {
+                        let cell = row.insertCell(ii + 1);
+                        cell.innerText = noteJudgement[i][ii]
+                    }
+                }
+            }
+        } else if (score.isCriticalDisp == 0) {
+            let blankCell = hrow.insertCell(0);
+            blankCell.innerText = ""
+            for (i = 0; i < judgementType.length-1; i++) {
+                let cell = hrow.insertCell(i+1);
+                cell.innerText = judgementType[i+1];
+            }
+
+
+        if (score.isTouch == 1) { // Check if Touch Notes are Needed.
+            let judgementCount = (judgementType.length - 1) + score.isCriticalDisp;
+            for (i = 0; i < noteType.length; i++) {
+                let row = detailsTable.insertRow(i);
+                let blankCell = row.insertCell(0);
+                blankCell.innerText = noteType[i]
+                for (ii = 0; ii < judgementCount; ii++) {
+                    let cell = row.insertCell(ii+1);
+                    cell.innerText = noteJudgement[i][ii+1]
+                }
+            }
+        } else {
+            let judgementCount = (judgementType.length - 1) + score.isCriticalDisp;
+            for (i = 0; i < noteType.length; i++) {
+                let row = detailsTable.insertRow(i);
+                let blankCell = row.insertCell(0);
+                blankCell.innerText = noteType[i]
+                for (ii = 0; ii < judgementCount-1; ii++) {
+                    let cell = row.insertCell(ii+1);
+                    cell.innerText = noteJudgement[i][ii+1]
+                }
+            }
+        }
+        }
+        resolve()
+    });
+} // this was 100 lines of mehness, this shouldnt have taken this long and i probably could have had it at 50 to 75 lines of code instead but i honestly am tired.
+
+
+
 /* User Area Status Renderer */
 
 async function userAreaStatusFormatter(div) {
@@ -367,7 +484,6 @@ async function userAreaStatusFormatter(div) {
     for (let i = UserAreaData.length - 1; i >= 0; i--) {
         const area = UserAreaData[i]; // get the area
         const mapInfo = await getReleventInformationMap(mapMetadata, area.map_id || area.mapId); // get the relevent Map Information
-        console.log(mapInfo)
         if (!mapInfo) continue // continue if mapInfo cant be found for a map
         const areaGrid = document.createElement('div'); // create the Grid for the area inforrmation to go
         areaGrid.classList.add('areaGrid'); // add the appropriate class
@@ -390,7 +506,6 @@ async function userAreaStatusFormatter(div) {
                     } else if (area.distance !== 0) {
                         let diffrence = unlock.Distance - area.distance
                         if (diffrence === 0) {
-                            console.log(unlock)
                             areaKilometers.innerHTML = areaKilometers.innerHTML + ` Task Track!<br>Clear ${unlock.TreasureId.str} to continue!`;
                         } else {
                             areaKilometers.innerHTML = areaKilometers.innerHTML + ` ${diffrence} KM until Next Reward.`;
@@ -420,10 +535,8 @@ async function userImageFormatter(div) {
     let memorialImageList = await imageList(); // get image list
     let imageInfoDiv = document.getElementById("image-info-header-div");
     imageInfoDiv.innerHTML = "";
-    console.log("Attempting to search list with EXT_ID " + ext_id.toString())
     for (var i = 0; i < memorialImageList.length; i++) { // for each name in the array
         let imageName = memorialImageList[i]
-        console.log(imageName)
         if (imageName.startsWith(ext_id.toString())) { // Check if the External ID matches the ID within the photo at the beginning
             let memorialImage = document.createElement('img');
             memorialImage.classList.add('memorialImage');

public/stylesheets/user.css

@@ -381,4 +381,25 @@ img.fullSync-image {
   grid-template-areas:
     "timingTable timingTable"
     "maxCombo maxSync";
+}
+
+/* I really could'nt be asked to make css code, so i asked clyde instead. ty clyde. */
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th, td {
+  border: 1px solid black;
+  padding: 8px;
+  text-align: left;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+tr:nth-child(even) {
+  background-color: #dddddd;
 }