[+] Show More option

AquaNet/src/libs/i18n/en_ref.ts

@@ -27,6 +27,7 @@ export const EN_REF_USER = {
   'UserHome.AddRival': "Add to Rival",
   'UserHome.RemoveRival': "Remove from Rival",
   'UserHome.InvalidGame': "Game ${game} is not supported on the web UI yet. We only support maimai, chunithm, wacca, and ongeki for now.",
+  'UserHome.ShowMoreRecent': 'Show more',
 }
 
 export const EN_REF_Welcome = {

AquaNet/src/libs/i18n/zh.ts

@@ -37,6 +37,7 @@ const zhUser: typeof EN_REF_USER = {
   'UserHome.AddRival': "添加劲敌",
   'UserHome.RemoveRival': "移除劲敌",
   'UserHome.InvalidGame': "游戏 ${game} 还不支持网页端查看。我们目前只支持舞萌、中二、Wacca 和音击。",
+  'UserHome.ShowMoreRecent': "显示更多",
 }
 
 const zhWelcome: typeof EN_REF_Welcome = {

AquaNet/src/pages/UserHome.svelte

@@ -51,6 +51,7 @@
   let allMusics: AllMusic
   let showDetailRank = false
   let isLoading = false
+  let showMoreRecent = false
 
   function init() {
     USER.isLoggedIn() && USER.me().then(u => me = u)
@@ -276,7 +277,7 @@
     <div class="recent">
       <h2>{t('UserHome.RecentScores')}</h2>
       <div class="scores">
-        {#each d.recent as r, i}
+        {#each (showMoreRecent ? d.recent : d.recent.slice(0, 15)) as r, i}
           <div class:alt={i % 2 === 0}>
             <img src={`${DATA_HOST}/d/${game}/music/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="" on:error={coverNotFound} />
             <div class="info">
@@ -309,6 +310,10 @@
             </div>
           </div>
         {/each}
+
+        {#if !showMoreRecent}
+          <button class="clickable" on:click={() => showMoreRecent = true}>{t('UserHome.ShowMoreRecent')}</button>
+        {/if}
       </div>
     </div>
   {/if}