125 lines
4.5 KiB
Svelte
125 lines
4.5 KiB
Svelte
<script lang="ts">
|
|
import { alertMd } from "src/ts/alert";
|
|
import { shareRealmCardData } from "src/ts/realm";
|
|
import { DBState, downloadPreset } from "src/ts/storage/database.svelte";
|
|
import { selectedCharID, ShowRealmFrameStore } from "src/ts/stores";
|
|
import { sleep } from "src/ts/util";
|
|
import { onDestroy, onMount } from "svelte";
|
|
|
|
const close = () => {
|
|
$ShowRealmFrameStore = ''
|
|
}
|
|
let iframe: HTMLIFrameElement = $state(null)
|
|
const tk = DBState.db?.account?.token;
|
|
const id = DBState.db?.account?.id
|
|
let loadingStage = $state(0)
|
|
let pongGot = false
|
|
|
|
const pmfunc = (e:MessageEvent) => {
|
|
if(e.data.type === 'filedata' && e.data.success){
|
|
loadingStage = 2
|
|
}
|
|
if(e.data.type === 'pong'){
|
|
pongGot = true
|
|
}
|
|
if(e.data.type === 'close'){
|
|
close()
|
|
}
|
|
if(e.data.type === 'success'){
|
|
alertMd(`## Upload Success\n\nYour character has been uploaded to Realm successfully.\n\n${"```\nhttps://realm.risuai.net/character/" + e.data.id + "\n```"}`)
|
|
if($ShowRealmFrameStore.startsWith('preset') || $ShowRealmFrameStore.startsWith('module')){
|
|
//TODO, add preset edit
|
|
}
|
|
else if(DBState.db.characters[$selectedCharID].type === 'character'){
|
|
loadingStage = 0
|
|
DBState.db.characters[$selectedCharID].realmId = e.data.id
|
|
}
|
|
close()
|
|
}
|
|
}
|
|
|
|
const waitPing = async () => {
|
|
if(iframe){
|
|
while(!pongGot){
|
|
iframe.contentWindow.postMessage({
|
|
type: 'ping'
|
|
}, '*')
|
|
await sleep(300)
|
|
}
|
|
}
|
|
}
|
|
|
|
onMount(async () => {
|
|
window.addEventListener('message', pmfunc)
|
|
|
|
let data:{
|
|
data: ArrayBuffer,
|
|
name: ArrayBuffer
|
|
}
|
|
|
|
if($ShowRealmFrameStore.startsWith('preset')){
|
|
const predata = await downloadPreset(Number($ShowRealmFrameStore.split(':')[1]), 'return')
|
|
const encodedPredata = predata.buf
|
|
const encodedPredataName = new TextEncoder().encode(predata.data.name + '.risupreset')
|
|
data = {
|
|
data: encodedPredata.buffer,
|
|
name: encodedPredataName.buffer
|
|
}
|
|
}
|
|
else if($ShowRealmFrameStore.startsWith('module')){
|
|
const predata = DBState.db.modules[Number($ShowRealmFrameStore.split(':')[1])]
|
|
//@ts-ignore
|
|
predata.type = 'risuModule'
|
|
const encodedPredata = new TextEncoder().encode(JSON.stringify(predata))
|
|
const encodedPredataName = new TextEncoder().encode(predata.name + '.json')
|
|
data = {
|
|
data: encodedPredata.buffer,
|
|
name: encodedPredataName.buffer
|
|
}
|
|
}
|
|
else{
|
|
data = await shareRealmCardData()
|
|
}
|
|
|
|
if(iframe){
|
|
await waitPing()
|
|
loadingStage = 1
|
|
iframe.contentWindow.postMessage({
|
|
type: 'filedata',
|
|
buf: [data.data, data.name]
|
|
}, '*', [data.data, data.name])
|
|
}
|
|
})
|
|
|
|
const getUrl = () => {
|
|
let url = tk ? `https://realm.risuai.net/upload?token=${tk}&token_id=${id}` : 'https://realm.risuai.net/upload'
|
|
if($ShowRealmFrameStore.startsWith('preset') || $ShowRealmFrameStore.startsWith('module')){
|
|
//TODO, add preset edit
|
|
}
|
|
else if(DBState.db.characters[$selectedCharID].type === 'character' && DBState.db.characters[$selectedCharID].realmId){
|
|
url += `&edit=${DBState.db.characters[$selectedCharID].realmId}&edit-type=normal`
|
|
}
|
|
url += '#noLayout'
|
|
return url
|
|
}
|
|
|
|
onDestroy(() => {
|
|
window.removeEventListener('message', pmfunc)
|
|
})
|
|
</script>
|
|
|
|
<div class="top-0 left-0 z-50 fixed w-full h-full flex flex-col justify-center items-center text-textcolor bg-white">
|
|
<div class="bg-darkbg border-b border-b-darkborderc w-full flex p-2">
|
|
<h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis">Upload to Realm</h1>
|
|
<button class="text-textcolor text-lg hover:text-red-500 ml-auto" onclick={close}>×</button>
|
|
</div>
|
|
{#if loadingStage < 1}
|
|
<div class="w-full flex justify-center items-center p-4 flex-1">
|
|
<div class="loadmove"></div>
|
|
</div>
|
|
{/if}
|
|
<iframe bind:this={iframe}
|
|
src={getUrl()}
|
|
title="upload" class="w-full flex-1" class:hidden={loadingStage < 1}
|
|
></iframe>
|
|
</div> |