[ref] hub

src/lib/UI/Realm/RealmHubIcon.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/lib/UI/Realm/RealmMain.svelte

@@ -0,0 +1,218 @@
+<script lang="ts">
+    import { downloadRisuHub, getRisuHub, hubURL, type hubType } from "src/ts/characterCards";
+    import { ArrowLeft, ArrowRight, BookIcon, DownloadIcon, FlagIcon, MenuIcon, PaperclipIcon, SearchIcon, SmileIcon, TrashIcon, 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 "./RealmHubIcon.svelte";
+    import { DataBase } from "src/ts/storage/database";
+    import TextInput from "../GUI/TextInput.svelte";
+
+    let openedData:null|hubType = null
+
+    let charas:hubType[] = []
+
+    let page = 0
+    let sort = ''
+
+    let search = ''
+    let menuOpen = false
+    let nsfw = false
+
+    async function getHub(){
+        charas = await getRisuHub({
+            search: search,
+            page: page,
+            nsfw: nsfw,
+            sort: sort
+        })
+    }
+
+    getHub()
+
+
+</script>
+<div class="w-full flex justify-center mt-4">
+    <div class="flex w-2xl max-w-full items-center">
+        <TextInput size="xl" additionalClass="flex-grow" 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={() => {
+            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={() => {
+            menuOpen = true
+        }}>
+            <MenuIcon />
+        </button>
+    </div>
+</div>
+<div class="w-full mt-2 flex justify-center mb-3 items-center">
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={nsfw} on:click={() => {
+        nsfw = !nsfw
+        getHub()
+    }}>
+        {nsfw ? 'NSFW ON': 'NSFW OFF'}
+    </button>
+    <div class="ml-2 mr-2 h-full border-r border-r-selected"></div>
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === ''} on:click={() => {
+        sort = ''
+        getHub()
+    }}>
+        {language.recent}
+    </button>
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'trending'} on:click={() => {
+        sort = 'trending'
+        getHub()
+    }}>
+        {language.trending}
+    </button>
+    <button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'downloads'} on:click={() => {
+        sort = 'downloads'
+        getHub()
+    }}>
+        {language.downloads}
+    </button>
+</div>
+<div class="w-full flex gap-4 p-2 flex-wrap justify-center">
+    {#key charas}
+        {#each charas as chara}
+            <RisuHubIcon onClick={() =>{openedData = chara}} chara={chara} />
+        {/each}
+    {/key}
+</div>
+<div class="w-full flex justify-center">
+    <div class="flex">
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+            if(page > 0){
+                page -= 1
+                getHub()
+            }
+        }}>
+            <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
+            getHub()
+        }}>
+            <ArrowRight />
+        </button>
+    </div>
+</div>
+
+
+{#if openedData}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" on:click={() => {
+        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 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 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}
+                            {@html msg}                        
+                        {/await}
+                    </span>
+                </div>
+                <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">
+                    <span class="text-gray-500">
+                        {language.chatAssumed.replace('{}', openedData.download.toString())}
+                    </span>
+                    <div class="border-l-selected border-l ml-1 mr-1"></div>
+                    {#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 () => {
+                    const conf = await alertConfirm('Report this character?')
+                    if(conf){
+                        const report = await alertInput('Write a report text that would be sent to the admin')
+                        const da = await fetch(hubURL + '/hub/report', {
+                            method: "POST",
+                            body: JSON.stringify({
+                                id: openedData.id,
+                                report: report
+                            })
+                        })
+                        alertNormal(await da.text())
+                    }
+                }}>
+                    <FlagIcon />
+                </button>
+                {#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
+                    <button class="text-gray-400 hover:text-red-500" on:click|stopPropagation={async () => {
+                        const conf = await alertConfirm('Do you want to remove this character from Realm?')
+                        if(conf){
+                            const da = await fetch(hubURL + '/hub/remove', {
+                                method: "POST",
+                                body: JSON.stringify({
+                                    id: openedData.id,
+                                    token: $DataBase.account?.token
+                                })
+                            })
+                            alertNormal(await da.text())
+                        }
+                    }}>
+                        <TrashIcon />
+                    </button>
+                {/if}
+                <button class="text-gray-400 hover:text-green-500" on:click|stopPropagation={async () => {
+                    await navigator.clipboard.writeText(`https://risuai.xyz/?realm=${openedData.id}`)
+                    alertNormal("Copied to clipboard")
+                }}>
+                    <PaperclipIcon />
+                </button>
+                <button class="bg-selected hover:ring flex-grow p-2 font-bold rounded-md mr-2" on:click={() => {
+                    downloadRisuHub(openedData.id)
+                    openedData = null
+                }}>
+                    Download
+                </button>
+            </div>
+        </div>
+    </div>
+
+{/if}
+
+{#if menuOpen}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" on:click={() => {
+        menuOpen = false
+    }}>
+        <div class="max-w-full bg-darkbg rounded-md flex flex-col gap-4 overflow-y-auto p-4">
+            <h1 class="font-bold text-2xl w-full">
+                <span>
+                    Menu
+                </span>
+                <button class="float-right text-gray-400 hover:text-green-500" on:click={() => {menuOpen = false}}>
+                    <XIcon />
+                </button>
+            </h1>
+            <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 input = await alertInput('Input URL or ID')
+                const id = input.split("?").at(-1)
+                downloadRisuHub(id)
+
+            }}>Import Character from URL or ID</button>
+        </div>
+    </div>
+{/if}

src/lib/UI/Realm/RealmUpload.svelte

@@ -0,0 +1,79 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div  class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" on:click={close}>
+    <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" on:click|stopPropagation>
+        
+        {#if !$DataBase.account}
+            <span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
+            <span class="text-gray-500">You can login in app settings 🡲 account</span>
+            <button on:click={async () => {
+                close()
+            }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
+            
+        {:else}
+        <h1 class="font-bold text-2xl w-full">
+            <span>
+                Share {char.name} to {language.hub}
+            </span>
+            <button class="float-right text-gray-400 hover:text-green-500" on:click={close}>
+                <XIcon />
+            </button>
+        </h1>
+        <div class="mb-2 mt-2 w-full border-t-2 border-t-bgcolor"></div>
+        <span class="text-neutral-200">{language.creatorNotes}</span>
+        <span class="text-gray-400 text-sm">A description that displays when you search and when you first open a bot.</span>
+        <span class="text-gray-400 text-sm">More than 20 characters.</span>
+        <TextAreaInput autocomplete="off" bind:value={char.creatorNotes} height={"20"} />
+        <span class="text-neutral-200">{language.tags}</span>
+        <span class="text-gray-400 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
+        <TextInput marginBottom placeholder="" bind:value={tags} on:input={() => {
+            tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
+        }} />
+        <div class="flex items-center flex-wrap">
+            <button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!privateMode} on:click={() => {privateMode = false}}>🌏 Public</button>
+            <!-- <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={privateMode} on:click={() => {privateMode = true}}>🔒 Private</button> -->
+        </div>
+        <div class="flex items-center flex-wrap mt-2">
+            <button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!nsfwMode} on:click={() => {nsfwMode = false}}>🧑‍🧒‍🧒 Safe</button>
+            <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} on:click={() => {nsfwMode = true}}>🔞 NSFW</button>
+        </div>
+        {#if nsfwMode}
+            <span class="text-gray-400 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
+        {/if}
+        {#if privateMode}
+            <span class="text-gray-400 text-sm">Private characters can be removed from the server if there is only a few downloads.</span>
+        {/if}
+        <Button on:click={async () => {
+            if(char.creatorNotes.length < 20){
+                alertError("Creator Notes must be longer than 20 characters")
+            }
+            else{
+                shareRisuHub(char, {
+                    privateMode: privateMode,
+                    nsfw: nsfwMode,
+                    tag: tags
+                })
+                close()
+            }
+        }} className="mt-2" size="lg">{language.shareCloud}</Button>
+        {/if}
+
+    </div>
+</div>
+
+
+<script lang="ts">
+    import { XIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+  import { alertError } from "src/ts/alert";
+  import { shareRisuHub } from "src/ts/characterCards";
+    import { DataBase, type character } from "src/ts/storage/database";
+  import TextInput from "../GUI/TextInput.svelte";
+  import TextAreaInput from "../GUI/TextAreaInput.svelte";
+  import Button from "../GUI/Button.svelte";
+    export let close = () => {}
+    export let char:character
+    let tags=""
+    let privateMode = false
+    let nsfwMode = false
+
+</script>