mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat] realm upload and search

Browse Source
This commit is contained in:
kwaroran
2023-06-04 05:58:58 +09:00
parent 20a58e5f06
commit de1c338f9a
6 changed files with 186 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/lib/UI/Hub.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
import Help from "../Others/Help.svelte";
import { DownloadIcon, FlagIcon } from "lucide-svelte";
import { DownloadIcon, FlagIcon, SearchIcon } from "lucide-svelte";
import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
let openedData:null|{
name:string
@@ -11,21 +11,58 @@
img: string
} = null
let charas:{
name:string
desc: string
download: number,
id: string,
img: string
tags: string[]
}[] = []
let search = ''
async function getHub(){
charas = await getRisuHub({
search: search
})
}
getHub()
</script>
<div class="w-full flex gap-4 p-2 flex-wrap">
{#await getRisuHub() then charas}
{#each charas as chara}
<button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative sm:w-44 w-full items-center" on:click={() => {
openedData = chara
}}>
<div class="flex flex-col">
<img class="h-36 w-36 rounded-md" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
<span class="text-white text-lg max-w-36 text-ellipsis whitespace-nowrap overflow-hidden">{chara.name}</span>
<span class="text-gray-400 text-xs max-w-36 text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden">{chara.desc}</span>
<div class="w-full flex justify-center mt-4">
<div class="flex w-2xl max-w-full">
<input class="flex-grow text-xl pl-3 pr-3 mb-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
<button class="bg-darkbg h-16 w-16 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={getHub}>
<SearchIcon />
</button>
</div>
</div>
<div class="w-full flex gap-4 p-2 flex-wrap justify-center">
{#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>
</button>
{/each}
{/await}
</div>
</button>
{/each}
</div>
@@ -37,13 +74,26 @@
<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-wrap gap-4">
<div class="flex flex-col">
<img class="h-36 w-36 rounded-md" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
<img class="h-36 w-36 rounded-md object-top object-cover" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
<h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis mt-4">{openedData.name}</h1>
</div>
<span class="text-gray-400 break-words text-base">{openedData.desc}</span>
</div>
<div class="flex flex-row-reverse gap-2">
<button class="text-gray-400 hover:text-red-500">
<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>
<button class="text-gray-400 hover:text-green-500" on:click={() => {

62
src/lib/UI/HubUpload.svelte Normal file
View File

@@ -0,0 +1,62 @@
<!-- 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>
<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>
<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={char.creatorNotes}></textarea>
<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>
<input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" 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 Child poronography would be banned.</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()
}
}} 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">{language.shareCloud}</button>
</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 type { character } from "src/ts/storage/database";
export let close = () => {}
export let char:character
let tags=""
let privateMode = false
let nsfwMode = false
</script>