From 1c672a13af082bc4b79ea85534e8dabdf3eb294b Mon Sep 17 00:00:00 2001
From: kwaroran <kwaworan@gmail.com>
Date: Mon, 5 Jun 2023 02:19:13 +0900
Subject: [PATCH] [feat] added hub pages

---
 src/lib/UI/Hub.svelte    | 31 ++++++++++++++++++++++++++++---
 src/ts/characterCards.ts |  3 ++-
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/lib/UI/Hub.svelte b/src/lib/UI/Hub.svelte
index 3fa1f89f..14f7f8af 100644
--- a/src/lib/UI/Hub.svelte
+++ b/src/lib/UI/Hub.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
-    import { DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
+    import { ArrowLeft, ArrowRight, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
   import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
 
     let openedData:null|{
@@ -20,12 +20,15 @@
         tags: string[]
     }[] = []
 
+    let page = 0
+
     let search = ''
     let menuOpen = false
 
     async function getHub(){
         charas = await getRisuHub({
-            search: search
+            search: search,
+            page: page
         })
     }
 
@@ -36,7 +39,10 @@
 <div class="w-full flex justify-center mt-4 mb-3">
     <div class="flex w-2xl max-w-full items-center">
         <input class="flex-grow text-xl pl-3 pr-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
-        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={getHub}>
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+            page = 0
+            getHub()
+        }}>
             <SearchIcon />
         </button>
         <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
@@ -70,6 +76,25 @@
         </button>
     {/each}
 </div>
+<div class="w-full flex justify-center">
+    <div>
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+            if(page > 0){
+                page -= 1
+            }
+        }}>
+            <ArrowLeft />
+        </button>
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center transition-shadow">
+            <span>{page + 1}</span>
+        </button>
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+            page += 1
+        }}>
+            <ArrowRight />
+        </button>
+    </div>
+</div>
 
 
 {#if openedData}
diff --git a/src/ts/characterCards.ts b/src/ts/characterCards.ts
index 9c746aac..eb778b68 100644
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -653,7 +653,8 @@ export async function shareRisuHub(char:character, arg:{
 }
 
 export async function getRisuHub(arg?:{
-    search?:string
+    search?:string,
+    page?:number
 }):Promise<{
     name:string
     desc: string