Merge branch 'newScoreGrid' into 'master'

Merge NewScoreGrid Branch to Master

See merge request Galexion/MaiMaiDXNet!2

.gitignore

@@ -1,5 +1,7 @@
 config.json
 public/images
 public/assets
+public/javascript/user copy.js
 node_modules
 todo
+.DS_Store

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;
@@ -215,6 +213,7 @@ async function userPlayLogFormatter(div, loadMoreButton) {
             continue
         }
         let diffucultyData = song.difficultys.Notes[score.level] // get difficulty information
+        const tasGrid = document.createElement('div');
 
         if (!song || !song.name) { // if a song can't be found, skip it and increment the error counter by 1.
             console.log(song)
@@ -223,63 +222,128 @@ async function userPlayLogFormatter(div, loadMoreButton) {
             errorIncrement++
             continue;
         }
-        console.log(song)
+        // Song Title
-        scoreDiv.innerHTML = `
+        tasGrid.innerHTML = `
             <div class="score-title">
-            <h4>${song.name.str} || ${new Date(score.user_play_date||score.userPlayDate)}</h4>
+            <h4 class="score-title">${song.name.str}</h4>
             </div>
         `;
-        /* Score Jacket Image */
+        // Song Jacket
         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(song.InGameID), 6) + '.png';
         scoreJacketDiv.append(jacket)
         scoreDiv.append(scoreJacketDiv)
 
         /* Achivement Box */
+
         const scoreAchivementDiv = document.createElement('div');
         scoreAchivementDiv.classList.add('score-achivement');
-        scoreAchivementDiv.innerHTML = `<h5>ACHIVEMENT</h5>`;
+        let achivementPercentage = document.createElement('h4');
-        let achivementPercentage = document.createElement('h5');
         let achivementNumber = padNumber(Number(score.achievement), 7)
         achivementPercentage.textContent = `${achivementNumber / 10000}%`;
         scoreAchivementDiv.append(achivementPercentage)
-        scoreDiv.append(scoreAchivementDiv)
+        tasGrid.append(scoreAchivementDiv)
 
         /* Score Grade */
+
         let scoreGrades = ["D", "C", "B", "BB", "BBB", "A", "AA", "AAA", "S", "S+", "SS", "SS+", "SSS", "SSS+"]
+        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');
+        if (rankImgCheck = false) {
             let scoreGrade = document.createElement('h4');
             scoreGrade.textContent = `${scoreGrades[score.score_rank || score.scoreRank]}`;
             scoreGradeDiv.append(scoreGrade);
-        scoreDiv.append(scoreGradeDiv);
+        } else {
+            let SGimg = document.createElement('img');
+            SGimg.addEventListener("error", function () {
+                this.src = "assets/icon/UI_Icon_000000.png";
+            });
+            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, Full Combo, Full Sync, and Multi-Placement */
+        //DX Score & Fast Late Reading
+        const rGrid = document.createElement('div');
 
-        const scoreInfoDiv = document.createElement('div');
+        const DXScoreDiv = document.createElement('div');
-        scoreInfoDiv.classList.add('score-info');
+        DXScoreDiv.classList.add('DX-Score');
-        const scoreInfoGridDiv = document.createElement('div');
+        let DXScore = document.createElement('h4');
-        scoreInfoDiv.classList.add('score-info-grid');
+        DXScore.classList.add('DX-Score');
-        // please i dont want to make a fucking nested grid
+        DXScore.innerHTML = `DXs ${score.deluxscore}/${diffucultyData.maxNotes * 3}`;
-        /* DX Score */
+        let FLindi = document.createElement('h4');
-        const scoreDXScoreDiv = document.createElement('div');
+        FLindi.classList.add('DX-Score');
-        scoreDXScoreDiv.classList.add('DX-Score');
+        FLindi.innerHTML = `F/L ${score.fastCount}/${score.lateCount}`;
-        scoreDXScoreDiv.innerHTML = `<h6>DX Score: ${score.deluxscore}/${diffucultyData.maxNotes * 3}</h6>`;
+        DXScoreDiv.append(DXScore);
-        scoreInfoGridDiv.append(scoreDXScoreDiv);
+        DXScoreDiv.append(FLindi);
-        scoreInfoDiv.append(scoreInfoGridDiv);
+        rGrid.append(DXScoreDiv);
-        scoreDiv.append(scoreInfoDiv);
+
-        /* Full Combo  */
+        /* Full Combo & Full Sync Icons, in a table of 1 row 2 col */
-        /* Full Sync */
+
-        /* Player Placement */
+        const FCFSgrid = document.createElement('div');
+        FCFSgrid.setAttribute("class", "fcfs-grid");
+
+        /* Full Combo Icon */
+        let FCTypes = ["SC", "FC", "FCp", "AP", "APp"];
+        let FCimgDiv = document.createElement('div');
+        let FCimg = document.createElement('img');
+        FCimg.addEventListener("error", function () {
+            this.src = "assets/icon/UI_Icon_000000.png";
+        });
+        FCimgDiv.classList.add('fullCombo-image'); //seriously galexion make up your god damned mind
+        FCimg.classList.add('fullCombo-image');
+        FCimg.src = "assets/uicon/UI_CHR_PlayBonus_" + FCTypes[score.comboStatus] + '.png';
+
+
+        FCimgDiv.append(FCimg)
+        FCFSgrid.append(FCimgDiv)
+
+        /* Full Sync Icon */
+        let FSTypes = ["PS", "FS", "FSp"];
+        let FSimgDiv = document.createElement('div');
+        let FSimg = document.createElement('img');
+        FSimg.addEventListener("error", function () {
+            this.src = "assets/icon/UI_Icon_000000.png";
+        });
+        FSimgDiv.classList.add('fullSync-image'); //seriously galexion make up your god damned mind
+        FSimg.classList.add('fullSync-image');
+        FSimg.src = "assets/uicon/UI_CHR_PlayBonus_" + FSTypes[score.syncStatus] + '.png';
+
+
+        FSimgDiv.append(FSimg);
+        FCFSgrid.append(FSimgDiv);
+
+        /* Details shit */
+        let detailsBlock = document.createElement('details');
+        detailsBlock.classList.add('score-info-grid');
+        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);
 
-        /* Side note: Can't Do Any of this without the Image Assets / Information, So Moving on for now */
         /* setting stuff up */
+
+
+        rGrid.classList.add('rGrid');
+        tasGrid.classList.add('tasGrid');
+        rGrid.append(FCFSgrid)
+        scoreDiv.append(rGrid)
+        scoreDiv.append(tasGrid)
         scoreDiv.setAttribute("class", "score-grid");
         scoreIncrement++
 
@@ -298,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) {
@@ -308,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
@@ -331,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.`;
@@ -361,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');
@@ -553,3 +725,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
+    }
+}

public/stylesheets/user.css

@@ -88,9 +88,13 @@ h4.profile {
   font-size: 2em;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 600px) {
-  h4 {
+  h4.score-grid {
-    font-size: 1.5em;
+    font-size: 4vmin;
+  }
+
+h4.DX-Score {
+  font-size: 3vmin;
 }
 }
 
@@ -201,111 +205,89 @@ h4.profile {
   padding-top: 1em;
   padding-bottom: 1em;
 }
-/* Galexion make your fucking mind up are you going to use camelCase or dashe-instead-of-spaces */
+
+/* Galexion make your fucking mind up are you going to use camelCase or dashes-instead-of-spaces */
 
 .score-grid {
   display: grid;
 
-  grid-template-rows: min-content min-content min-content;
+  grid-template-rows: 0.75fr min-content min-content;
-  grid-template-columns: 82.5% min-content min-content;
+  grid-template-columns: 0.75fr min-content max-content;
   grid-auto-rows: minmax(100px, auto);
   grid-template-areas: 
-    'label0 label0'
+  "Jacket tasGrid rGrid"
-    'label1 label2'
+  "Details Details Details"; 
-    'label1 label3'
-    'label1 label4';
 
   gap: 0px;
-  height: 100%;
+  margin-bottom: 0.2em;
-  max-width: 75%;
 }
 
+.rGrid {
+  display:grid;
+  grid-area: rGrid;
+
+  grid-template-rows: min-content min-content;
+  grid-template-areas:
+    'FC-FS'
+    'DXs-Fast-Slow';
+}
+
+.fcfs-grid {
+  grid-area: FC-FS;
+  display: grid;
+
+  grid-template-rows: min-content min-content;
+  grid-template-areas:
+    'fc'
+    'fs';
+
+  gap: 0px;
+}
+
+.tasGrid {
+  grid-area: tasGrid;
+  display:grid;
+
+  grid-template-rows: min-content min-content;
+  grid-template-areas:
+    'title'
+    'achivement'
+    'score-grade';
+}
+
+
+
 @media (min-width: 600px) {
   .score-grid {
     max-width: 80%;
     width: 80%;
-    grid-template-rows: max-content min-content min-content;
+    grid-template-rows: 1fr, auto;
     grid-template-columns: 1fr 1fr 1fr;
-    grid-auto-rows: minmax(100px, auto);
+    grid-auto-rows: auto;
     grid-template-areas: 
-      'label0 label0 label0'
+    "Jacket tasGrid rGrid"
-      'label1 label2 label3'
+    "Details Details Details"; 
-      'label1 label4 label4';
     margin: auto;
+    margin-bottom: 0.2em;
+  }
+
+  h4.score-grid {
+    font-size: 5vw;
+  }
+
+  .fcfs-grid {
+    grid-area: FC-FS;
+    display: grid;
+    grid-auto-columns: min-content min-content;
+
+    grid-template-areas:
+      'fc fs';
+
+    gap: 0px;
   }
   
   .score-jacket {
-
+    grid-area: Jacket;
-    background-color: #9EF6B5;
-    grid-area: label1;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 100%;
-    width: 100%;
-  
-  }
-
-  /* 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";
-}
-}
-
-.score-title {
-
-  background-color: #D5BBCA;
-  grid-area: label0;
-
-}
-
-.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, min-content);
-  grid-template-rows: repeat(3, min-content);
-  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;
-}
-
-.score-jacket {
-
-  background-color: #9EF6B5;
-  grid-area: label1;
     display: block;
     margin-left: auto;
     margin-right: auto;
@@ -314,6 +296,110 @@ h4.profile {
 
   }
 
-h4.DX-Score {
+  /* Please I really dont want to make a nested grid */
-  font-size: 2em;
+  .score-info-grid {
+    grid-area: Details;
+    display: grid;
+    grid-template-columns: repeat(3, 0.5fr);
+    grid-template-rows: repeat(3, 0.5fr);
+    grid-gap: 10px;
+    grid-template-areas:
+      "timingTable timingTable"
+      "maxCombo maxSync";
+  }
+
+
+}
+
+.score-title {
+  grid-area: title;
+}
+
+.score-achivement {
+
+  grid-area: achivement;
+
+}
+
+.score-grade {
+  grid-area: score-grade;
+
+}
+
+.score-info {
+  grid-area: label4;
+}
+
+
+.DX-Score {
+  grid-area: DXs-Fast-Slow;
+}
+
+.score-jacket {
+  grid-area: Jacket;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 75%;
+  width: 75%;
+
+}
+
+#user-play-data {
+  object-fit: inherit;
+}
+
+img.sg-image {
+  width:17vw;
+  max-width: 125px;
+}
+
+img.fullCombo-image {
+  width:12vw;
+  max-width: 120px;
+}
+
+img.fullSync-image {
+  width:12vw;
+  max-width: 120px;
+}
+
+.fullCombo-image:nth-of-type(1) {
+  grid-area: fc;
+}
+
+.fullSync-image:nth-of-type(1) {
+  grid-area: fs;
+}
+
+.score-info-grid {
+  grid-area: Details;
+  display: grid;
+  grid-template-columns: repeat(3, 0.5fr);
+  grid-template-rows: repeat(3, 0.5fr);
+  grid-gap: 10px;
+  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;
 }

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>

views/log.ejs

@@ -0,0 +1,32 @@
+<% var rootPath='../' ; %>
+<%- include(rootPath + 'templates/header.ejs' ); %>
+
+<div id="loginContent">
+  <h1>Mai<b>DXNet</b> Dashboard</h1>
+  <h5>Total Users Registered: <%= params.totalUsers %></h5>
+  <h4>Please Input your 20 Digit Access Code.</h4>
+  <form id="myForm">
+    <input type="text" name="myInput" minlength="20" maxlength="20" placeholder="0000011111222223333344444" required>
+    <button type="submit">Submit</button>
+  </form>
+  <script type="text/javascript" src="/javascript/login.js"></script>
+</div>
+<div id="loginContent">
+  <h4>
+    Please Note:
+  </h4>
+  <p>
+    This is mainly a Demo of <a href="https://dev.s-ul.net/Galexion/MaiMaiDXNet">MaiMaiDXNet</a>, and should not be used for actual play.
+    <br><br>
+    If Testing on your own card, please visit <a href="http://vermilliondx.ml">here</a> to import your data from any other Water based Amusement Server.
+    <br><br>
+    Note that Some scores, Song Jackets, or other ammenitys are missing. this is completely normal.
+    <br><br>
+    Everything that was not supposed to be missing is now back. Please update any personal / production instances to the latest version.
+  </p>
+  For Up to date information, join our <a href="https://discord.gg/EEJKDpFTVT">Discord Server</a>
+</div>
+
+</body>
+
+</html>