[feat] realm enchanments

2023-06-16 13:34:02 +09:00
parent f72380ef0c
commit ad5e3db0ae
6 changed files with 139 additions and 99 deletions
--- a/src/lib/ChatScreens/ChatScreen.svelte
+++ b/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>
--- a/src/lib/UI/Hub.svelte
+++ b/src/lib/UI/Hub.svelte
@@ -1,27 +1,14 @@
 <script lang="ts">
-    import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
-    import { ArrowLeft, ArrowRight, DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
+    import { downloadRisuHub, getRisuHub, hubURL, type hubType } from "src/ts/characterCards";
+    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|{
-        name:string
-        desc: string
-        download: number,
-        id: string,
-        img: string,
-        tags: string[]
-    } = null
+    let openedData:null|hubType = null

-    let charas:{
-        name:string
-        desc: string
-        download: number,
-        id: string,
-        img: string
-        tags: string[]
-    }[] = []
+    let charas:hubType[] = []

    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={() => {
-                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>
+            <RisuHubIcon onClick={() =>{openedData = chara}} chara={chara} />
        {/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}
--- a/src/lib/UI/MainMenu.svelte
+++ b/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={() => (openHub = true)}>
-            <h1 class="text-2xl font-bold text-start">{language.hub} <Help key="experimental" /></h1>
-            <span class="mt-2 text-gray-400 text-start">Characters made and shared by the community</span>
-          </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}
+        <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" 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">Official Discord to talk about RisuAI</span>
+        </button>
      </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)}>
--- a/src/lib/UI/RisuHubIcon.svelte
+++ b/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>
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -653,58 +653,67 @@ export async function shareRisuHub(char:character, arg:{

 }

-export async function getRisuHub(arg?:{
-    search?:string,
-    page?:number,
-    nsfw?:boolean
-    sort?:string
-}):Promise<{
+export type hubType = {
    name:string
    desc: string
    download: number,
    id: string,
    img: string
-    tags: string[]
-}[]> {
-    const da = await fetch(hubURL + '/hub/list', {
-        method: "POST",
-        body: JSON.stringify(arg ?? {})
-    })
-    if(da.status !== 200){
-        return []
+    tags: string[],
+    viewScreen: "none" | "emotion" | "imggen"
+    hasLore:boolean
+}
+
+export async function getRisuHub(arg?:{
+    search?:string,
+    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({
-        type: "wait",
-        msg: "Downloading..."
-    })
-    const res = await fetch(hubURL + '/hub/get', {
-        method: "POST",
-        body: JSON.stringify({
-            id: id
+    try {
+        alertStore.set({
+            type: "wait",
+            msg: "Downloading..."
        })
-    })
-    if(res.status !== 200){
-        alertError(await res.text())
-    }
-
-    const result = await res.json()
-    const data:CharacterCardV2 = result.card
-    const img:string = result.img
-
-    await importSpecv2(data, await getHubResources(img), 'hub')
-    checkCharOrder()
-    let db = get(DataBase)
-    if(db.characters[db.characters.length-1]){
-        const index = db.characters.length-1
-        characterFormatUpdate(index);
-        selectedCharID.set(index);
-    }
-
+        const res = await fetch(hubURL + '/hub/get', {
+            method: "POST",
+            body: JSON.stringify({
+                id: id
+            })
+        })
+        if(res.status !== 200){
+            alertError(await res.text())
+        }
+    
+        const result = await res.json()
+        const data:CharacterCardV2 = result.card
+        const img:string = result.img
+    
+        await importSpecv2(data, await getHubResources(img), 'hub')
+        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) {
--- a/src/ts/parser.ts
+++ b/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") || "";