[feat] realm enchanments

src/lib/ChatScreens/ChatScreen.svelte

@@ -55,7 +55,7 @@
 {:else if $DataBase.theme === 'waifuMobile'}
     <div class="flex-grow h-full relative" style={bgImg.length < 4 ? wallPaper : bgImg}>
         <BackgroundDom />
-        <div class="w-full h-1/3 absolute z-10 bottom-0 left-0">
+        <div class="w-full absolute z-10 bottom-0 left-0" class:pre33={$selectedCharID >= 0}>
             <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList/>
         </div>
         {#if $selectedCharID >= 0}
@@ -78,4 +78,7 @@
     .halfwp{
         max-width: calc(50% - 5rem);
     }
+    .per33{
+        height: 33.333333%;
+    }
 </style>

src/lib/UI/Hub.svelte

@@ -1,27 +1,14 @@
 <script lang="ts">
-    import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
+    import { downloadRisuHub, getRisuHub, hubURL, type hubType } from "src/ts/characterCards";
-    import { ArrowLeft, ArrowRight, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
+    import { ArrowLeft, ArrowRight, BookIcon, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, SmileIcon, XIcon } from "lucide-svelte";
     import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
   import { parseMarkdownSafe } from "src/ts/parser";
   import { language } from "src/lang";
+  import RisuHubIcon from "./RisuHubIcon.svelte";
 
-    let openedData:null|{
+    let openedData:null|hubType = null
-        name:string
-        desc: string
-        download: number,
-        id: string,
-        img: string,
-        tags: string[]
-    } = null
 
-    let charas:{
+    let charas:hubType[] = []
-        name:string
-        desc: string
-        download: number,
-        id: string,
-        img: string
-        tags: string[]
-    }[] = []
 
     let page = 0
     let sort = ''
@@ -89,26 +76,7 @@
 <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
     {#key charas}
         {#each charas as chara}
-            <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={() => {
+            <RisuHubIcon onClick={() =>{openedData = chara}} chara={chara} />
-                openedData = chara
-            }}>
-                <div class="flex gap-2 w-full">
-                    <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
-                    <div class="flex flex-col flex-grow min-w-0">
-                        <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
-                        <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
-                        <div class="flex flex-wrap">
-                            {#each chara.tags as tag, i}
-                                {#if i < 4}
-                                    <div class="text-xs p-1 text-blue-400">{tag}</div>
-                                {:else if i === 4}
-                                    <div class="text-xs p-1 text-blue-400">...</div>
-                                {/if}
-                            {/each}
-                        </div>
-                    </div>
-                </div>
-            </button>
         {/each}
     {/key}
 </div>
@@ -141,9 +109,9 @@
         openedData = null
     }}>
         <div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">
-            <div class="w-full flex gap-4 flex-col">
+            <div class="w-full flex flex-col">
                 <h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis">{openedData.name}</h1>
-                <div class="flex justify-start gap-4">
+                <div class="flex justify-start gap-4 mt-4">
                     <img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
                     <span class="text-gray-400 break-words text-base chattext prose prose-invert">
                         {#await parseMarkdownSafe(openedData.desc) then msg}
@@ -151,11 +119,19 @@
                         {/await}
                     </span>
                 </div>
-                <div class="flex justify-start gap-2">
+                <div class="flex justify-start gap-2  mt-4">
                     {#each openedData.tags as tag, i}
                         <div class="text-xs p-1 text-blue-400">{tag}</div>
                     {/each}
                 </div>
+                <div class="flex flex-wrap w-full flex-row gap-1 mt-2">
+                    {#if openedData.viewScreen === 'emotion'}
+                        <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
+                    {/if}
+                    {#if openedData.hasLore}
+                        <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
+                    {/if}
+                </div>
             </div>
             <div class="flex flex-row-reverse gap-2">
                 <button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
@@ -174,11 +150,11 @@
                 }}>
                     <FlagIcon />
                 </button>
-                <button class="text-gray-400 hover:text-green-500" on:click={() => {
+                <button class="bg-selected hover:ring flex-grow p-2 font-bold rounded-md mr-2" on:click={() => {
                     downloadRisuHub(openedData.id)
                     openedData = null
                 }}>
-                    <DownloadIcon />
+                    Download
                 </button>
             </div>
         </div>
@@ -203,10 +179,10 @@
             <div class=" mt-2 w-full border-t-2 border-t-bgcolor"></div>
             <button class="w-full hover:bg-selected p-4" on:click|stopPropagation={async () => {
                 menuOpen = false
-                const id = await alertInput('Import ID')
+                const id = await alertInput('Input URL or ID')
                 downloadRisuHub(id)
 
-            }}>Import Character from ID</button>
+            }}>Import Character from URL or ID</button>
         </div>
     </div>
 {/if}

src/lib/UI/MainMenu.svelte

@@ -7,6 +7,8 @@
   import { ArrowLeft, HomeIcon } from "lucide-svelte";
   import { openURL } from "src/ts/storage/globalApi";
   import { language } from "src/lang";
+  import { getRisuHub, hubURL } from "src/ts/characterCards";
+  import RisuHubIcon from "./RisuHubIcon.svelte";
   let openHub = false
 </script>
 <div class="h-full w-full flex flex-col overflow-y-auto items-center">
@@ -34,18 +36,31 @@
           <h1 class="text-2xl font-bold text-start">Your Characters</h1>
           <span class="mt-2 text-gray-400 text-start">Opens your character list. you can open with pressing arrow button in top left corner too.</span>
         </button>
-        {#if $DataBase.useExperimental}
+        <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}>
-          <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => (openHub = true)}>
+          <h1 class="text-2xl font-bold text-start">Official Discord</h1>
-            <h1 class="text-2xl font-bold text-start">{language.hub} <Help key="experimental" /></h1>
+          <span class="mt-2 text-gray-400 text-start">Official Discord to talk about RisuAI</span>
-            <span class="mt-2 text-gray-400 text-start">Characters made and shared by the community</span>
+        </button>
-          </button>
-        {:else}
-          <button class="bg-darkbg rounded-md p-6 flex flex-col" on:click={() => {openURL("https://discord.gg/JzP8tB9ZK8")}}>
-            <h1 class="text-2xl font-bold text-start">Official Discord</h1>
-            <span class="mt-2 text-gray-400 text-start">Offical Discord to talk about RisuAI</span>
-          </button>
-        {/if}
       </div>
+      {#await getRisuHub({
+          search: '',
+          page: -10,
+          nsfw: false,
+          sort: ''
+      }) then charas}
+          <div class="mt-4 mb-4 w-full border-t border-t-selected"></div>
+          <h1 class="text-2xl font-bold">Recent Characters from {language.hub} <button class="text-base font-medium float-right p-1 bg-darkbg rounded-md hover:ring" on:click={() => {
+            openHub = true
+          }}>Get More</button></h1>
+          {#if charas.length > 0}
+          <div class="w-full flex gap-4 p-2 flex-wrap justify-center">
+              {#each charas as chara}
+                  <RisuHubIcon onClick={() => {openHub = true}} chara={chara} />
+              {/each}
+          </div>
+          {:else}
+          <div class="text-gray-500">Failed to load {language.hub}...</div>
+          {/if}
+      {/await}
       {:else}
         <div class="flex items-center mt-4">
           <button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>

src/lib/UI/RisuHubIcon.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { BookIcon, SmileIcon } from "lucide-svelte";
+  import { alertNormal } from "src/ts/alert";
+    import { hubURL, type hubType } from "src/ts/characterCards";
+
+    export let onClick = () => {}
+    export let chara:hubType
+
+</script>
+
+
+<button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={onClick}>                <div class="flex gap-2 w-full">
+    <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
+    <div class="flex flex-col flex-grow min-w-0">
+        <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
+        <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
+        <div class="flex flex-wrap">
+            {#each chara.tags as tag, i}
+                {#if i < 4}
+                    <div class="text-xs p-1 text-blue-400">{tag}</div>
+                {:else if i === 4}
+                    <div class="text-xs p-1 text-blue-400">...</div>
+                {/if}
+            {/each}
+        </div>
+        <div class="flex-grow"></div>
+        <div class="flex flex-wrap w-full flex-row-reverse gap-1">
+            {#if chara.viewScreen === 'emotion'}
+                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
+            {/if}
+            {#if chara.hasLore}
+                <button class="text-gray-500 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
+            {/if}
+        </div>
+    </div>
+</div></button>

src/ts/characterCards.ts

@@ -653,58 +653,67 @@ export async function shareRisuHub(char:character, arg:{
 
 }
 
-export async function getRisuHub(arg?:{
+export type hubType = {
-    search?:string,
-    page?:number,
-    nsfw?:boolean
-    sort?:string
-}):Promise<{
     name:string
     desc: string
     download: number,
     id: string,
     img: string
-    tags: string[]
+    tags: string[],
-}[]> {
+    viewScreen: "none" | "emotion" | "imggen"
-    const da = await fetch(hubURL + '/hub/list', {
+    hasLore:boolean
-        method: "POST",
+}
-        body: JSON.stringify(arg ?? {})
+
-    })
+export async function getRisuHub(arg?:{
-    if(da.status !== 200){
+    search?:string,
-        return []
+    page?:number,
+    nsfw?:boolean
+    sort?:string
+}):Promise<hubType[]> {
+    try {
+        const da = await fetch(hubURL + '/hub/list', {
+            method: "POST",
+            body: JSON.stringify(arg ?? {})
+        })
+        if(da.status !== 200){
+            return []
+        }
+        console.log(da)
+        return da.json()   
+    } catch (error) {
+        return[]
     }
-    console.log(da)
-    return da.json()
 }
 
 export async function downloadRisuHub(id:string) {
-    alertStore.set({
+    try {
-        type: "wait",
+        alertStore.set({
-        msg: "Downloading..."
+            type: "wait",
-    })
+            msg: "Downloading..."
-    const res = await fetch(hubURL + '/hub/get', {
-        method: "POST",
-        body: JSON.stringify({
-            id: id
         })
-    })
+        const res = await fetch(hubURL + '/hub/get', {
-    if(res.status !== 200){
+            method: "POST",
-        alertError(await res.text())
+            body: JSON.stringify({
-    }
+                id: id
-
+            })
-    const result = await res.json()
+        })
-    const data:CharacterCardV2 = result.card
+        if(res.status !== 200){
-    const img:string = result.img
+            alertError(await res.text())
-
+        }
-    await importSpecv2(data, await getHubResources(img), 'hub')
+    
-    checkCharOrder()
+        const result = await res.json()
-    let db = get(DataBase)
+        const data:CharacterCardV2 = result.card
-    if(db.characters[db.characters.length-1]){
+        const img:string = result.img
-        const index = db.characters.length-1
+    
-        characterFormatUpdate(index);
+        await importSpecv2(data, await getHubResources(img), 'hub')
-        selectedCharID.set(index);
+        checkCharOrder()
-    }
+        let db = get(DataBase)
-
+        if(db.characters[db.characters.length-1]){
+            const index = db.characters.length-1
+            characterFormatUpdate(index);
+            selectedCharID.set(index);
+        }   
+    } catch (error) {alertError("Error while importing")}
 }
 
 export async function getHubResources(id:string) {

src/ts/parser.ts

@@ -19,6 +19,7 @@ const safeConvertor = new showdown.Converter({
 })
 
 
+
 DOMPurify.addHook("uponSanitizeElement", (node: HTMLElement, data) => {
     if (data.tagName === "iframe") {
        const src = node.getAttribute("src") || "";