not a hotfix, just a usability update

public/javascript/user.js

@@ -93,7 +93,7 @@ async function getReleventInformation(musicData, id) {
 
 async function getReleventInformationMap(mapData, mapid) {
     let mapMatch = undefined;
-    for(map of mapData) {
+    for (map of mapData) {
         if (map.mapInfomation.colorId.id == mapid) {
             mapMatch = map
         } else continue
@@ -104,7 +104,7 @@ async function getReleventInformationMap(mapData, mapid) {
 
 // Ban Check lmao
 
-if (userdata.ban_state === 2 ||userdata.banState === 2) {
+if (userdata.ban_state === 2 || userdata.banState === 2) {
     //nice
     const parent = document.getElementById("User");
     const wrapperDiv = document.createElement("div");
@@ -258,16 +258,19 @@ async function userPlayLogFormatter(div, loadMoreButton) {
         let SGimgarray = ["D", "C", "B", "BB", "BBB", "A", "AA", "AAA", "S", "Sp", "SS", "SSp", "SSS", "SSSp"]
         const scoreGradeDiv = document.createElement('div');
         scoreGradeDiv.classList.add('score-grade');
-        let scoreGrade = document.createElement('h4');
+        if (rankImgCheck = false) {
-        scoreGrade.textContent = `${scoreGrades[score.score_rank||score.scoreRank]}`;
+            let scoreGrade = document.createElement('h4');
-        let SGimg = document.createElement('img');
+            scoreGrade.textContent = `${scoreGrades[score.score_rank || score.scoreRank]}`;
-        SGimg.addEventListener("error", function () {
+            scoreGradeDiv.append(scoreGrade);
-            this.src = "assets/icon/UI_Icon_000000.png";
+        } else {
-        });
+            let SGimg = document.createElement('img');
-        SGimg.classList.add('sg-image');
+            SGimg.addEventListener("error", function () {
-        SGimg.src = "assets/uicon/UI_TTR_Rank_" + scoreGrades[score.score_rank||score.scoreRank] + '.png';
+                this.src = "assets/icon/UI_Icon_000000.png";
-        scoreGradeDiv.append(SGimg);
+            });
-        //scoreGradeDiv.append(scoreGrade);
+            SGimg.classList.add('sg-image');
+            SGimg.src = "assets/uicon/UI_TTR_Rank_" + SGimgarray[score.score_rank || score.scoreRank] + '.png';
+            scoreGradeDiv.append(SGimg);
+        }
         tasGrid.append(scoreGradeDiv);
 
         //DX Score & Fast Late Reading
@@ -291,7 +294,7 @@ async function userPlayLogFormatter(div, loadMoreButton) {
         FCFSgrid.setAttribute("class", "fcfs-grid");
 
         /* Full Combo Icon */
-        let FCTypes = ["SC","FC","FCp","AP","APp"];
+        let FCTypes = ["SC", "FC", "FCp", "AP", "APp"];
         let FCimgDiv = document.createElement('div');
         let FCimg = document.createElement('img');
         FCimg.addEventListener("error", function () {
@@ -306,7 +309,7 @@ async function userPlayLogFormatter(div, loadMoreButton) {
         FCFSgrid.append(FCimgDiv)
 
         /* Full Sync Icon */
-        let FSTypes = ["PS","FS","FSp"];
+        let FSTypes = ["PS", "FS", "FSp"];
         let FSimgDiv = document.createElement('div');
         let FSimg = document.createElement('img');
         FSimg.addEventListener("error", function () {
@@ -363,9 +366,9 @@ async function userAreaStatusFormatter(div) {
     let areaWrapper = document.createElement('div'); // create the Wrapper 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
+        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
+        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
         /* Area Title */
@@ -427,15 +430,15 @@ async function userImageFormatter(div) {
             memorialImage.addEventListener("error", function () {
                 this.src = "assets/icon/UI_Icon_000000.png";
             });
-            if(window.serverType === 0) {
+            if (window.serverType === 0) {
                 memorialImage.src = "images/" + imageName + '.jpg';
             } else {
-            memorialImage.src = "images/" + imageName + '.jpeg';
+                memorialImage.src = "images/" + imageName + '.jpeg';
             }
             imageInfoDiv.append(memorialImage)
         }
     }
-    if(imageInfoDiv.innerHTML == "") {
+    if (imageInfoDiv.innerHTML == "") {
         let error = document.createElement('h3');
         error.innerText = "No Images Memorialised."
         imageInfoDiv.append(error)
@@ -609,3 +612,18 @@ async function imageList() {
     }
 }
 
+async function rankImgCheck() {
+    const url = "/assets/uicon/UI_TTR_Rank_AA.png";
+
+    try {
+        const response = await fetch(url, {
+            method: "GET",
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+        return true
+    } catch (error) {
+        return false
+    }
+}

readme.md

@@ -25,6 +25,7 @@ in the public folder, the assets should look like this
 \_ | - icon
    | - jacket
    | - metadata
+   | - uicon
 ```
 
 Then, create the `/public/image/` folder. this will be where the images will be stored.
@@ -32,7 +33,9 @@ Then, create the `/public/image/` folder. this will be where the images will be
 You'll also need the Game metadata, extracted using [SegaParser](https://dev.s-ul.net/Galexion/segaparser),
 to get the game metadata. this is ***Nessasary*** for the interface to function.
 
+Tip: you'll need to extract both Common (FC, FS, and Rank) and streamed assets.
 
+you'll also need to go and create your own Grayscale version of FC and FS. SnS.
 
 ## Aqua
 

views/index.ejs

@@ -23,11 +23,18 @@
 <div id="loginContent">
   <details>
     <summary>
-      <h4>Issue Log:</h4>
+      <h4>Issue & Update Log:</h4>
     </summary>
     <h5>
+      Hello and welcome to the beta of the new score layout, apart of a bigger redo of the front end.
+      <br><br>
+      Changes: <br>
+      - literally the whole score layout<br>
+      - score grade will now switch between Text & Image depending on if you had imported them into your assets folder.
+      <br><br>
+      issues:<br>
     - Site Is Not Complete<br>
-    - Artemis does not Support Memorial Photos, though that is coming.<br>
+    - Details dropdown does nothing. that is currently intended, as i haven't coded it in yet.<br>
     UI Jackets Have Now been fixed, please redl segapaser and rerun music.js.</h5>
 </details>
 </div>