From 6d4a38404cafec4cd609e2da4faf76262d957129 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Fri, 16 Feb 2024 01:04:29 -0500
Subject: [PATCH] [O] Sort recent by date, display level

---
 AquaNet/src/libs/maimaiTypes.ts       |   1 +
 AquaNet/src/pages/Home.svelte         |   2 +-
 AquaNet/src/pages/MaimaiRating.svelte | 202 +++++++++++++-------------
 AquaNet/src/pages/UserHome.svelte     |  17 ++-
 AquaNet/src/vars.sass                 |  11 +-
 5 files changed, 128 insertions(+), 105 deletions(-)

diff --git a/AquaNet/src/libs/maimaiTypes.ts b/AquaNet/src/libs/maimaiTypes.ts
index 39e67f1a..6906f88b 100644
--- a/AquaNet/src/libs/maimaiTypes.ts
+++ b/AquaNet/src/libs/maimaiTypes.ts
@@ -49,6 +49,7 @@ export interface MaimaiUserPlaylog {
     id: number;
     musicId: number;
     level: number;
+    userPlayDate: string;
     trackNo: number;
     vsRank: number;
     achievement: number;
diff --git a/AquaNet/src/pages/Home.svelte b/AquaNet/src/pages/Home.svelte
index 90af2053..3cdb95c3 100644
--- a/AquaNet/src/pages/Home.svelte
+++ b/AquaNet/src/pages/Home.svelte
@@ -39,7 +39,7 @@
       letter-spacing: 0.2em
       margin-top: 0
       opacity: 0.9
-    
+
     .btn-group
       display: flex
       gap: 8px
diff --git a/AquaNet/src/pages/MaimaiRating.svelte b/AquaNet/src/pages/MaimaiRating.svelte
index 9de77d91..068d3a94 100644
--- a/AquaNet/src/pages/MaimaiRating.svelte
+++ b/AquaNet/src/pages/MaimaiRating.svelte
@@ -10,7 +10,7 @@
 
   Promise.all([
     getMaimai("GetUserRatingApi", {userId}),
-    getMaimaiAllMusic().then(it => it.json())
+    getMaimaiAllMusic()
   ]).then(([rating, music]) => {
     data = rating
     musicInfo = music
@@ -37,7 +37,8 @@
 
       music.note = music.notes[x.level]
       const mult = getMult(x.achievement)
-      return {...x,
+      return {
+        ...x,
         music: music,
         calc: (mult[1] as number) * music.note.lv,
         rank: mult[2]
@@ -69,7 +70,9 @@
       <div class="rating-cards">
         {#each section.data as rating}
           <div class="level-{rating.level}">
-            <img class="cover" src={`${data_host}/maimai/assetbundle/jacket_s/00${rating.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
+            <img class="cover"
+                 src={`${data_host}/maimai/assetbundle/jacket_s/00${rating.musicId.toString().padStart(6, '0').substring(2)}.png`}
+                 alt="">
 
             <div class="detail">
               <span class="name">{rating.music.name}</span>
@@ -79,7 +82,9 @@
             </span>
               <span>{rating.calc.toFixed(1)}</span>
             </div>
-            <img class="ver" src={`${data_host}/maimai/sprites/tab/title/UI_CMN_TabTitle_MaimaiTitle_Ver${rating.music.ver.toString().substring(0, 3)}.png`} alt="">
+            <img class="ver"
+                 src={`${data_host}/maimai/sprites/tab/title/UI_CMN_TabTitle_MaimaiTitle_Ver${rating.music.ver.toString().substring(0, 3)}.png`}
+                 alt="">
             <div class="lv">{rating.music.note.lv}</div>
           </div>
         {/each}
@@ -89,111 +94,106 @@
 </main>
 
 <style lang="sass">
-.rating-cards
-  display: grid
-  gap: 2rem
-  width: 100%
+  .rating-cards
+    display: grid
+    gap: 2rem
+    width: 100%
 
-  // Fill as many columns as possible
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
+    // Fill as many columns as possible
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
 
-  // Center the cards
-  justify-items: center
-  align-items: center
+    // Center the cards
+    justify-items: center
+    align-items: center
 
-  // Style each card
-  > div
-    $border-radius: 20px
-    width: 200px
-    height: 200px
-    border-radius: $border-radius
-
-    display: flex
-    position: relative
-
-    // Difficulty border
-    border: 5px solid var(--lv-color, #60aaff)
-    &.level-1
-      --lv-color: #aaff60
-    &.level-2
-      --lv-color: #f25353
-    &.level-3
-      --lv-color: #e881ff
-
-    img
-      object-fit: cover
-      pointer-events: none
-
-    img.cover
-      width: 100%
-      height: 100%
-      border-radius: calc($border-radius - 3px)
-
-    img.ver
-      position: absolute
-      top: -20px
-      left: -30px
-      height: 50px
-
-    // Information
-    .detail
-      position: absolute
-      bottom: 0
-      left: 0
-      right: 0
-      padding: 10px
-      background: rgba(0, 0, 0, 0.5)
-      border-radius: 0 0 calc($border-radius - 3px) calc($border-radius - 3px)
-
-      // Blur
-      backdrop-filter: blur(3px)
+    // Style each card
+    > div
+      $border-radius: 20px
+      width: 200px
+      height: 200px
+      border-radius: $border-radius
 
       display: flex
-      flex-direction: column
-      text-align: left
+      position: relative
 
-      > span
-        // Disable text wrapping, max 2 lines
-        overflow: hidden
-        text-overflow: ellipsis
-        white-space: nowrap
+      // Difficulty border
+      border: 5px solid var(--lv-color)
 
-      .name
-        font-size: 1.2em
-        font-weight: bold
+      img
+        object-fit: cover
+        pointer-events: none
 
-      .rating
-        display: flex
-        img
-          height: 1.5em
-
-    .lv
-      position: absolute
-      bottom: 0
-      right: 0
-      padding: 5px 10px
-      background: var(--lv-color)
-      // Top left border radius
-      border-radius: 10px 0
-
-      font-size: 1.3em
-
-      &:before
-        content: "Lv"
-        font-size: 0.8em
-
-  // Mobile
-  @media (max-width: 500px)
-    margin-left: -1rem
-    margin-right: -1rem
-    width: calc(100% + 2rem)
-    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr))
-    font-size: 0.8em
-    > div
-      width: 150px
-      height: 150px
+      img.cover
+        width: 100%
+        height: 100%
+        border-radius: calc($border-radius - 3px)
 
       img.ver
-        height: 45px
-        left: -20px
+        position: absolute
+        top: -20px
+        left: -30px
+        height: 50px
+
+      // Information
+      .detail
+        position: absolute
+        bottom: 0
+        left: 0
+        right: 0
+        padding: 10px
+        background: rgba(0, 0, 0, 0.5)
+        border-radius: 0 0 calc($border-radius - 3px) calc($border-radius - 3px)
+
+        // Blur
+        backdrop-filter: blur(3px)
+
+        display: flex
+        flex-direction: column
+        text-align: left
+
+        > span
+          // Disable text wrapping, max 2 lines
+          overflow: hidden
+          text-overflow: ellipsis
+          white-space: nowrap
+
+        .name
+          font-size: 1.2em
+          font-weight: bold
+
+        .rating
+          display: flex
+
+          img
+            height: 1.5em
+
+      .lv
+        position: absolute
+        bottom: 0
+        right: 0
+        padding: 5px 10px
+        background: var(--lv-color)
+        // Top left border radius
+        border-radius: 10px 0
+
+        font-size: 1.3em
+
+        &:before
+          content: "Lv"
+          font-size: 0.8em
+
+    // Mobile
+    @media (max-width: 500px)
+      margin-left: -1rem
+      margin-right: -1rem
+      width: calc(100% + 2rem)
+      grid-template-columns: repeat(auto-fill, minmax(130px, 1fr))
+      font-size: 0.8em
+      > div
+        width: 150px
+        height: 150px
+
+        img.ver
+          height: 45px
+          left: -20px
 </style>
\ No newline at end of file
diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index 7f996efc..1c02f06c 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -34,6 +34,9 @@
     console.log(trend)
     console.log(music)
 
+    // Sort recent by date
+    user.recent.sort((a, b) => b.userPlayDate < a.userPlayDate ? -1 : 1)
+
     d = {user, trend, recent: user.recent.map(it => {return {...music[it.musicId], ...it}})}
     localStorage.setItem("tmp-user-details", JSON.stringify(d))
     renderCal(calElement, trend.map(it => {return {date: it.date, value: it.plays}}))
@@ -161,8 +164,11 @@
           <div class={clazz({alt: i % 2 === 0})}>
             <img src={`${data_host}/maimai/assetbundle/jacket_s/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
             <div class="info">
-              <span class="name">{r.name}</span>
               <div>
+                <span class="name">{r.name}</span>
+              </div>
+              <div>
+                <span class={`lv level-${r.level}`}>{r.notes[r.level].lv}</span>
                 <span class={"rank-" + ("" + getMult(r.achievement)[2])[0]}>
                   <span class="rank-text">{("" + getMult(r.achievement)[2]).replace("p", "+")}</span>
                   <span class="rank-num">{(r.achievement / 10000).toFixed(2)}%</span>
@@ -351,7 +357,7 @@ $gap: 20px
             flex-direction: column
             gap: 0
 
-            span
+            .rank-text
               text-align: left
 
         .rank-S
@@ -366,6 +372,13 @@ $gap: 20px
         .rank-B
           color: #6ba6ff
 
+        .lv
+          background: var(--lv-color)
+          padding: 0 6px
+          border-radius: 10px
+          opacity: 0.8
+          margin-right: 10px
+
         span
           display: inline-block
           text-align: right
diff --git a/AquaNet/src/vars.sass b/AquaNet/src/vars.sass
index 32b431ee..e4564e44 100644
--- a/AquaNet/src/vars.sass
+++ b/AquaNet/src/vars.sass
@@ -6,4 +6,13 @@ $c-bg: #242424
 
 $nav-height: 4rem
 $w-mobile: 560px
-$w-max: 900px
\ No newline at end of file
+$w-max: 900px
+
+.level-0
+  --lv-color: #6ED43E
+.level-1
+  --lv-color: #F7B807
+.level-2
+  --lv-color: #FF828D
+.level-3
+  --lv-color: #A051DC
\ No newline at end of file