[O] Sort recent by date, display level

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;

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,7 +94,7 @@
 </main>
 
 <style lang="sass">
-.rating-cards
+  .rating-cards
     display: grid
     gap: 2rem
     width: 100%
@@ -112,13 +117,7 @@
       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
+      border: 5px solid var(--lv-color)
 
       img
         object-fit: cover
@@ -164,6 +163,7 @@
 
         .rating
           display: flex
+
           img
             height: 1.5em
 

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

AquaNet/src/vars.sass

@@ -7,3 +7,12 @@ $c-bg: #242424
 $nav-height: 4rem
 $w-mobile: 560px
 $w-max: 900px
+
+.level-0
+  --lv-color: #6ED43E
+.level-1
+  --lv-color: #F7B807
+.level-2
+  --lv-color: #FF828D
+.level-3
+  --lv-color: #A051DC