New Score Grid Layout.

2024-11-24 02:40:11 +01:00 · 2023-08-02 00:54:51 -04:00 · 2023-08-02 00:54:51 -04:00 · cc3dacadeb
commit cc3dacadeb
parent 54300c933e
4 changed files with 252 additions and 97 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,7 @@
-config.json
-public/images
-public/assets
-node_modules
-todo
+config.json
+public/images
+public/assets
+public/javascript/user copy.js
+node_modules
+todo
+.DS_Store
--- a/public/javascript/user.js
+++ b/public/javascript/user.js
@ -215,6 +215,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)
@ -224,62 +225,117 @@ async function userPlayLogFormatter(div, loadMoreButton) {
            continue;
        }
        console.log(song)
-        scoreDiv.innerHTML = `
+        // Song Title
+        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('h5');
+        let achivementPercentage = document.createElement('h4');
        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');
        let scoreGrade = document.createElement('h4');
        scoreGrade.textContent = `${scoreGrades[score.score_rank||score.scoreRank]}`;
-        scoreGradeDiv.append(scoreGrade);
-        scoreDiv.append(scoreGradeDiv);
+        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_" + scoreGrades[score.score_rank||score.scoreRank] + '.png';
+        scoreGradeDiv.append(SGimg);
+        //scoreGradeDiv.append(scoreGrade);
+        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');
-        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 = `<h6>DX Score: ${score.deluxscore}/${diffucultyData.maxNotes * 3}</h6>`;
-        scoreInfoGridDiv.append(scoreDXScoreDiv);
-        scoreInfoDiv.append(scoreInfoGridDiv);
-        scoreDiv.append(scoreInfoDiv);
-        /* Full Combo  */
-        /* Full Sync */
-        /* Player Placement */
+        const DXScoreDiv = document.createElement('div');
+        DXScoreDiv.classList.add('DX-Score');
+        let DXScore = document.createElement('h4');
+        DXScore.classList.add('DX-Score');
+        DXScore.innerHTML = `DXs ${score.deluxscore}/${diffucultyData.maxNotes * 3}`;
+        let FLindi = document.createElement('h4');
+        FLindi.classList.add('DX-Score');
+        FLindi.innerHTML = `F/L ${score.fastCount}/${score.lateCount}`;
+        DXScoreDiv.append(DXScore);
+        DXScoreDiv.append(FLindi);
+        rGrid.append(DXScoreDiv);

-        /* Side note: Can't Do Any of this without the Image Assets / Information, So Moving on for now */
+        /* Full Combo & Full Sync Icons, in a table of 1 row 2 col */
+
+        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');
+        detailsBlock.append(detailsGridDiv);
+        scoreDiv.append(detailsBlock);
        /* 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++

--- a/public/stylesheets/user.css
+++ b/public/stylesheets/user.css
@ -88,10 +88,14 @@ h4.profile {
  font-size: 2em;
 }

-@media (max-width: 768px) {
-  h4 {
-    font-size: 1.5em;
+@media (max-width: 600px) {
+  h4.score-grid {
+    font-size: 4vmin;
  }
+
+h4.DX-Score {
+  font-size: 3vmin;
+}
 }

 .error {
@ -179,9 +183,9 @@ h4.profile {
  grid-template-columns: max-content max-content min-content;

  grid-template-areas:
-  'title title'
-  'kilometers kilometers'
-  '. details';
+    'title title'
+    'kilometers kilometers'
+    '. details';

  gap: 0px;
  height: 100%;
@ -201,111 +205,138 @@ 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-columns: 82.5% min-content min-content;
+  grid-template-rows: 0.75fr min-content min-content;
+  grid-template-columns: 0.75fr min-content max-content;
  grid-auto-rows: minmax(100px, auto);
-  grid-template-areas:
-    'label0 label0'
-    'label1 label2'
-    'label1 label3'
-    'label1 label4';
+  grid-template-areas: 
+  "Jacket tasGrid rGrid"
+  "Details Details Details"; 

  gap: 0px;
-  height: 100%;
-  max-width: 75%;
+  margin-bottom: 0.2em;
 }

+.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-template-areas:
-      'label0 label0 label0'
-      'label1 label2 label3'
-      'label1 label4 label4';
+    grid-auto-rows: auto;
+    grid-template-areas: 
+    "Jacket tasGrid rGrid"
+    "Details Details Details"; 
    margin: auto;
+    margin-bottom: 0.2em;
  }

-  .score-jacket {
+  h4.score-grid {
+    font-size: 5vw;
+  }

-    background-color: #9EF6B5;
-    grid-area: label1;
+  .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;
    display: block;
    margin-left: auto;
    margin-right: auto;
-    max-width: 100%;
-    width: 100%;
-  
+    max-width: 75%;
+    width: 75%;
+
  }

  /* 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-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 {
-
-  background-color: #D5BBCA;
-  grid-area: label0;
-
+  grid-area: title;
 }

 .score-achivement {

-  background-color: #ED69FD;
-  grid-area: label2;
+  grid-area: achivement;

 }

 .score-grade {
-
-  background-color: #9B5999;
-  grid-area: label3;
+  grid-area: score-grade;

 }

 .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;
+  grid-area: DXs-Fast-Slow;
 }

 .score-jacket {
-
-  background-color: #9EF6B5;
-  grid-area: label1;
+  grid-area: Jacket;
  display: block;
  margin-left: auto;
  margin-right: auto;
@ -314,6 +345,40 @@ h4.profile {

 }

-h4.DX-Score {
-  font-size: 2em;
+#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";
 }
--- a/views/log.ejs
+++ b/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>