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

Risuai 0.6.3 first commit

Browse Source
This commit is contained in:
kwaroran
2023-05-07 12:41:45 +09:00
parent 50e5e1d917
commit 2c5c7d2694
98 changed files with 15070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/lib/ChatScreens/AutoresizeArea.svelte Normal file
View File

@@ -0,0 +1,39 @@
<script>
import { onMount } from 'svelte';
import { DataBase } from "../../ts/database";
let textarea;
let previousScrollHeight = 0;
export let value = ''
function resize() {
textarea.style.height = '0px'; // Reset the textarea height
textarea.style.height = `calc(${textarea.scrollHeight}px + 1rem)`; // Set the new height
}
function handleInput() {
if (textarea.scrollHeight !== previousScrollHeight) {
previousScrollHeight = textarea.scrollHeight;
resize();
}
}
onMount(() => {
resize();
});
</script>
<style>
textarea {
overflow: hidden;
resize: none;
box-sizing: border-box;
background: transparent;
color: white;
border: 1px solid rgba(98, 114, 164, 0.5);
max-width: calc(95% - 2rem);
padding: 1rem;
}
</style>
<textarea bind:this={textarea} on:input={handleInput} bind:value={value} style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem" style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem" />

153
src/lib/ChatScreens/Chat.svelte Normal file
View File

@@ -0,0 +1,153 @@
<script lang="ts">
import { ArrowLeft, ArrowRight, ChevronLeftIcon, ChevronRightIcon, EditIcon, LanguagesIcon, RefreshCcwIcon, TrashIcon } from "lucide-svelte";
import { ParseMarkdown } from "../../ts/parser";
import AutoresizeArea from "./AutoresizeArea.svelte";
import { alertConfirm } from "../../ts/alert";
import { language } from "../../lang";
import { DataBase } from "../../ts/database";
import { selectedCharID } from "../../ts/stores";
import { translate } from "../../ts/translator/translator";
import { replacePlaceholders } from "../../ts/util";
export let message = ''
export let name = ''
export let img = ''
export let idx = -1
export let rerollIcon = false
export let onReroll = () => {}
export let unReroll = () => {}
let translating = false
let editMode = false
let msgDisplay = ''
async function rm(){
const rm = await alertConfirm(language.removeChat)
if(rm){
if($DataBase.instantRemove){
const r = await alertConfirm(language.instantRemoveConfirm)
let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
if(!r){
msg = msg.slice(0, idx)
}
else{
msg.splice(idx, 1)
}
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
}
else{
let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
msg.splice(idx, 1)
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
}
}
}
async function edit(){
let msg = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
msg[idx].data = message
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = msg
}
async function displaya(message:string){
if($DataBase.autoTranslate && $DataBase.translator !== ''){
msgDisplay = replacePlaceholders(message, name)
msgDisplay = await translate(replacePlaceholders(message, name), false)
}
else{
msgDisplay = replacePlaceholders(message, name)
}
}
$: displaya(message)
</script>
<div class="flex">
<div class="text-neutral-200 mt-2 p-2 bg-transparent flex-grow ml-4 mr-4 border-t-gray-900 border-opacity-30 border-transparent flexium items-start">
{#if img === ''}
<div class="rounded-md shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`}>
</div>
{:else}
<div class="rounded-md shadow-lg bg-gray-500 mt-2" style={img + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
{/if}
<span class="flex flex-col ml-4 w-full">
<div class="flexium items-center chat">
<span class="chat text-xl unmargin">{name}</span>
<div class="flex-grow flex items-center justify-end text-gray-500">
{#if idx > -1}
<button class="hover:text-green-500 transition-colors" on:click={() => {
if(!editMode){
editMode = true
}
else{
editMode = false
edit()
}
}}>
<EditIcon size={20}/>
</button>
<button class="ml-2 hover:text-green-500 transition-colors" on:click={rm}>
<TrashIcon size={20}/>
</button>
{/if}
{#if $DataBase.translator !== ''}
<button class="ml-2 cursor-pointer hover:text-green-500 transition-colors" class:translating={translating} on:click={async () => {
if(translating){
return
}
if(msgDisplay === replacePlaceholders(message, name)){
translating = true
msgDisplay = (await translate(message, false))
translating = false
}
else{
msgDisplay = replacePlaceholders(message, name)
}
}}>
<LanguagesIcon />
</button>
{/if}
{#if rerollIcon}
{#if $DataBase.swipe}
<button class="ml-2 hover:text-green-500 transition-colors" on:click={unReroll}>
<ArrowLeft size={22}/>
</button>
<button class="ml-2 hover:text-green-500 transition-colors" on:click={onReroll}>
<ArrowRight size={22}/>
</button>
{:else}
<button class="ml-2 hover:text-green-500 transition-colors" on:click={onReroll}>
<RefreshCcwIcon size={20}/>
</button>
{/if}
{/if}
</div>
</div>
{#if editMode}
<AutoresizeArea bind:value={message} />
{:else}
<span class="text chat chattext prose prose-invert"
style:font-size="{0.875 * ($DataBase.zoomsize / 100)}rem"
style:line-height="{1.25 * ($DataBase.zoomsize / 100)}rem"
>{@html ParseMarkdown(msgDisplay)}</span>
{/if}
</span>
</div>
</div>
<style>
.flexium{
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.chat{
max-width: calc(95% - 0.5rem);
word-break: normal;
overflow-wrap: anywhere;
}
.translating{
color: rgba(16, 185, 129, 1);
}
</style>

70
src/lib/ChatScreens/ChatScreen.svelte Normal file
View File

@@ -0,0 +1,70 @@
<script lang="ts">
import { getCustomBackground, getEmotion } from "../../ts/util";
import { DataBase } from "../../ts/database";
import { CharEmotion, SizeStore, selectedCharID, sideBarStore } from "../../ts/stores";
import ResizeBox from './ResizeBox.svelte'
import DefaultChatScreen from "./DefaultChatScreen.svelte";
import defaultWallpaper from '../../etc/bg.jpg'
import ChatList from "../Others/ChatList.svelte";
import TransitionImage from "./TransitionImage.svelte";
let openChatList = false
const wallPaper = `background: url(${defaultWallpaper})`
let bgImg= ''
let lastBg = ''
$: (async () =>{
if($DataBase.customBackground !== lastBg){
lastBg = $DataBase.customBackground
bgImg = await getCustomBackground($DataBase.customBackground)
}
})()
</script>
{#if $DataBase.theme === ''}
<div class="flex-grow h-full" style={bgImg}>
{#if $selectedCharID >= 0}
{#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
<ResizeBox />
{/if}
{/if}
<DefaultChatScreen customStyle={bgImg.length > 2 ? 'background: rgba(0,0,0,0.8)': ''} bind:openChatList/>
</div>
{:else if $DataBase.theme === 'waifu'}
<div class="flex-grow h-full flex justify-center" style="max-width:calc({$sideBarStore ? $SizeStore.w - 400 : $SizeStore.w}px);{bgImg.length < 4 ? wallPaper : bgImg}">
{#if $selectedCharID >= 0}
{#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
<div class="h-full mr-10 flex justify-end halfw" style:width="{42 * ($DataBase.waifuWidth2 / 100)}rem">
<TransitionImage classType="waifu" src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
</div>
{/if}
{/if}
<div class="h-full w-2xl" style:width="{42 * ($DataBase.waifuWidth / 100)}rem" class:halfwp={$selectedCharID >= 0 && $DataBase.characters[$selectedCharID].viewScreen !== 'none'}>
<DefaultChatScreen customStyle={'background: rgba(0,0,0,0.8);backdrop-filter: blur(4px);'} bind:openChatList/>
</div>
</div>
{:else if $DataBase.theme === 'waifuMobile'}
<div class="flex-grow h-full relative" style={bgImg.length < 4 ? wallPaper : bgImg}>
<div class="w-full h-1/3 absolute z-10 bottom-0 left-0">
<DefaultChatScreen customStyle={'background: rgba(0,0,0,0.8);backdrop-filter: blur(4px);'} bind:openChatList/>
</div>
{#if $selectedCharID >= 0}
{#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}
<div class="h-full w-full absolute bottom-0 left-0 max-w-full">
<TransitionImage classType="mobile" src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
</div>
{/if}
{/if}
</div>
{/if}
{#if openChatList}
<ChatList close={() => {openChatList = false}}/>
{/if}
<style>
.halfw{
max-width: calc(50% - 5rem);
}
.halfwp{
max-width: calc(50% - 5rem);
}
</style>

381
src/lib/ChatScreens/DefaultChatScreen.svelte Normal file
View File

@@ -0,0 +1,381 @@
<script lang="ts">
import { DatabaseIcon, DicesIcon, LanguagesIcon, MenuIcon, RefreshCcwIcon, Send } from "lucide-svelte";
import { selectedCharID } from "../../ts/stores";
import Chat from "./Chat.svelte";
import { DataBase, appVer, type Message } from "../../ts/database";
import { getCharImage } from "../../ts/characters";
import { doingChat, sendChat } from "../../ts/process/index";
import { findCharacterbyId, messageForm } from "../../ts/util";
import { language } from "../../lang";
import { translate } from "../../ts/translator/translator";
import { alertError } from "../../ts/alert";
import sendSound from '../../etc/send.mp3'
import {cloneDeep} from 'lodash'
import { processScript } from "src/ts/process/scripts";
let messageInput = ''
let openMenu = false
export let openChatList = false
let loadPages = 30
let autoMode = false
let rerolls:Message[][] = []
let rerollid = -1
let lastCharId = -1
async function send() {
let selectedChar = $selectedCharID
console.log('send')
if($doingChat){
return
}
if(lastCharId !== $selectedCharID){
rerolls = []
rerollid = -1
}
let cha = $DataBase.characters[selectedChar].chats[$DataBase.characters[selectedChar].chatPage].message
if(messageInput === ''){
if($DataBase.characters[selectedChar].type !== 'group'){
if(cha.length === 0 || cha[cha.length - 1].role !== 'user'){
if($DataBase.useSayNothing){
cha.push({
role: 'user',
data: '*says nothing*'
})
}
}
}
}
else{
const char = $DataBase.characters[selectedChar]
if(char.type === 'character'){
cha.push({
role: 'user',
data: processScript(char,messageInput,'editinput')
})
}
else{
cha.push({
role: 'user',
data: messageInput
})
}
}
messageInput = ''
$DataBase.characters[selectedChar].chats[$DataBase.characters[selectedChar].chatPage].message = cha
rerolls = []
await sendChatMain()
}
async function reroll() {
if($doingChat){
return
}
if(lastCharId !== $selectedCharID){
rerolls = []
rerollid = -1
}
if(rerollid < rerolls.length - 1){
if(Array.isArray(rerolls[rerollid + 1])){
let db = $DataBase
rerollid += 1
db.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = cloneDeep(rerolls[rerollid])
$DataBase = db
}
return
}
if(rerolls.length === 0){
rerolls.push($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message)
rerollid = rerolls.length - 1
}
let cha = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message
if(cha.length === 0 ){
return
}
openMenu = false
const saying = cha[cha.length - 1].saying
let sayingQu = 2
while(cha[cha.length - 1].role !== 'user'){
if(cha[cha.length - 1].saying === saying){
sayingQu -= 1
if(sayingQu === 0){
break
}
}
cha.pop()
}
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = cha
await sendChatMain()
}
async function unReroll() {
if(rerollid <= 0){
return
}
if(lastCharId !== $selectedCharID){
rerolls = []
rerollid = -1
}
if($doingChat){
return
}
if(Array.isArray(rerolls[rerollid - 1])){
let db = $DataBase
rerollid -= 1
db.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message = cloneDeep(rerolls[rerollid])
$DataBase = db
}
}
async function sendChatMain(saveReroll = false) {
messageInput = ''
try {
await sendChat()
} catch (error) {
alertError(`${error}`)
}
rerolls.push(cloneDeep($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message))
rerollid = rerolls.length - 1
lastCharId = $selectedCharID
$doingChat = false
if($DataBase.playMessage){
const audio = new Audio(sendSound);
audio.play();
}
}
async function runAutoMode() {
if(autoMode){
autoMode = false
return
}
const selectedChar = $selectedCharID
autoMode = true
while(autoMode){
await sendChatMain()
if(selectedChar !== $selectedCharID){
autoMode = false
}
}
}
export let customStyle = ''
let inputHeight = "44px"
let inputEle:HTMLTextAreaElement
async function updateInputSize() {
if(inputEle){
inputEle.style.height = "0";
inputHeight = (inputEle.scrollHeight) + "px";
inputEle.style.height = inputHeight
}
}
$: updateInputSize()
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="w-full h-full" style={customStyle} on:click={() => {
openMenu = false
}}>
{#if $selectedCharID < 0}
<div class="h-full w-full flex flex-col overflow-y-auto items-center">
<h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
<h3 class="text-gray-500 mt-1">Version {appVer}</h3>
</div>
{:else}
<div class="h-full w-full flex flex-col-reverse overflow-y-auto relative" on:scroll={(e) => {
//@ts-ignore
const scrolled = (e.target.scrollHeight - e.target.clientHeight + e.target.scrollTop)
if(scrolled < 100 && $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length > loadPages){
loadPages += 30
}
}}>
<div class="flex items-end mt-2 mb-2">
<textarea class="text-neutral-200 p-2 bg-transparent input-text text-xl flex-grow ml-4 mr-2 border-gray-700 resize-none focus:bg-selected maxw overflow-y-hidden overflow-x-hidden"
bind:value={messageInput}
bind:this={inputEle}
on:keydown={(e) => {
if(e.key.toLocaleLowerCase() === "enter" && (!e.shiftKey)){
send()
e.preventDefault()
}
if(e.key.toLocaleLowerCase() === "m" && (e.ctrlKey)){
reroll()
e.preventDefault()
}
}}
on:input={updateInputSize}
style:height={inputHeight}
/>
{#if $doingChat}
<div
class="mr-2 bg-selected flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors">
<div class="loadmove" class:autoload={autoMode}>
</div>
</div>
{:else}
<div on:click={send}
class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><Send />
</div>
{/if}
<div on:click={(e) => {
openMenu = !openMenu
e.stopPropagation()
}}
class="mr-2 bg-gray-500 flex justify-center items-center text-white w-12 h-12 rounded-md hover:bg-green-500 transition-colors"><MenuIcon />
</div>
</div>
{#each messageForm($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
{#if chat.role === 'char'}
{#if $DataBase.characters[$selectedCharID].type !== 'group'}
{#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
<Chat
idx={chat.index}
name={$DataBase.characters[$selectedCharID].name}
message={chat.data}
img={''}
rerollIcon={i === 0}
onReroll={reroll}
unReroll={unReroll}
/>
{:then im}
<Chat
idx={chat.index}
name={$DataBase.characters[$selectedCharID].name}
message={chat.data}
img={im}
rerollIcon={i === 0}
onReroll={reroll}
unReroll={unReroll}
/>
{/await}
{:else}
{#await getCharImage(findCharacterbyId(chat.saying).image, 'css')}
<Chat
idx={chat.index}
name={findCharacterbyId(chat.saying).name}
message={chat.data}
rerollIcon={i === 0}
onReroll={reroll}
unReroll={unReroll}
img={''}
/>
{:then im}
<Chat
idx={chat.index}
name={findCharacterbyId(chat.saying).name}
rerollIcon={i === 0}
message={chat.data}
onReroll={reroll}
unReroll={unReroll}
img={im}
/>
{/await}
{/if}
{:else}
{#await getCharImage($DataBase.userIcon, 'css')}
<Chat
idx={chat.index}
name={$DataBase.username}
message={chat.data}
img={''}
/>
{:then im}
<Chat
idx={chat.index}
name={$DataBase.username}
message={chat.data}
img={im}
/>
{/await}
{/if}
{/each}
{#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length <= loadPages}
{#if $DataBase.characters[$selectedCharID].type !== 'group'}
{#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
<Chat
name={$DataBase.characters[$selectedCharID].name}
message={ $DataBase.characters[$selectedCharID].firstMessage}
img={''}
idx={-1}
/>
{:then im}
<Chat
name={$DataBase.characters[$selectedCharID].name}
message={ $DataBase.characters[$selectedCharID].firstMessage}
img={im}
idx={-1}
/>
{/await}
{/if}
{/if}
{#if openMenu}
<div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-gray-200" on:click={(e) => {
e.stopPropagation()
}}>
{#if $DataBase.characters[$selectedCharID].type === 'group'}
<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={runAutoMode}>
<DicesIcon />
<span class="ml-2">{language.autoMode}</span>
</div>
{/if}
<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={() => {
openChatList = true
openMenu = false
}}>
<DatabaseIcon />
<span class="ml-2">{language.chatList}</span>
</div>
{#if $DataBase.translator !== ''}
<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={async () => {
$doingChat = true
messageInput = (await translate(messageInput, true))
$doingChat = false
}}>
<LanguagesIcon />
<span class="ml-2">{language.translateInput}</span>
</div>
{/if}
<div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={reroll}>
<RefreshCcwIcon />
<span class="ml-2">{language.reroll}</span>
</div>
</div>
{/if}
</div>
{/if}
</div>
<style>
.maxw{
max-width: calc(100vw - 10rem);
}
.loadmove {
animation: spin 1s linear infinite;
border-radius: 50%;
border: 0.4rem solid rgba(0,0,0,0);
width: 1rem;
height: 1rem;
border-top: 0.4rem solid #6272a4;
border-left: 0.4rem solid #6272a4;
}
.autoload{
border-top: 0.4rem solid #10b981;
border-left: 0.4rem solid #10b981;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>

21
src/lib/ChatScreens/EmotionBox.svelte Normal file
View File

@@ -0,0 +1,21 @@
<script>
import { DataBase } from '../../ts/database';
import { CharEmotion } from '../../ts/stores';
import { getEmotion } from '../../ts/util';
</script>
{#await getEmotion($DataBase,$CharEmotion, 'contain') then images}
{#each images as image, i}
<div style={image + `width:${(100 / images.length)}%;bottom:0;left:${100 / images.length * i}%`} class="h-full bg-center absolute" />
{/each}
{/await}
<style>
.h-full {
height: 100%;
}
.bg-center {
background-position: center;
}
</style>

96
src/lib/ChatScreens/ResizeBox.svelte Normal file
View File

@@ -0,0 +1,96 @@
<script>
import { CharEmotion, ViewBoxsize } from '../../ts/stores';
import { onMount } from 'svelte';
import EmotionBox from './EmotionBox.svelte';
import TransitionImage from './TransitionImage.svelte';
import { getEmotion } from '../../ts/util';
import { DataBase } from '../../ts/database';
let box;
let isResizing = false;
let initialWidth;
let initialHeight;
let initialX;
let initialY;
function handleStart(event) {
isResizing = true;
initialWidth = box.clientWidth;
initialHeight = box.clientHeight;
initialX = event.clientX || event.touches[0].clientX;
initialY = event.clientY || event.touches[0].clientY;
}
function handleEnd() {
isResizing = false;
}
function handleMove(event) {
if (!isResizing) return;
event.preventDefault();
const clientX = event.clientX || event.touches[0].clientX;
const clientY = event.clientY || event.touches[0].clientY;
const deltaX = initialX - clientX;
const deltaY = clientY - initialY;
const newWidth = Math.min(initialWidth + deltaX, window.innerWidth * 0.8);
const newHeight = Math.min(initialHeight + deltaY, window.innerHeight * 0.8);
ViewBoxsize.set({
width: newWidth,
height: newHeight
})
}
onMount(() => {
window.addEventListener('mousemove', handleMove);
window.addEventListener('mouseup', handleEnd);
window.addEventListener('touchmove', handleMove, { passive: false });
window.addEventListener('touchend', handleEnd);
return () => {
window.removeEventListener('mousemove', handleMove);
window.removeEventListener('mouseup', handleEnd);
window.removeEventListener('touchmove', handleMove);
window.removeEventListener('touchend', handleEnd);
};
});
</script>
<style>
.box {
position: absolute;
right: 0px;
top: 0px;
border-bottom: 1px solid #6272a4;
border-left: 1px solid #6272a4;
width: 12rem;
height: 12rem;
z-index: 5;
}
.resize-handle {
position: absolute;
width: 16px;
height: 16px;
border-top: 1px solid #6272a4;
border-right: 1px solid #6272a4;
cursor: sw-resize;
bottom: 0;
left: 0;
z-index: 10;
}
</style>
<div class="box bg-darkbg bg-opacity-70" bind:this="{box}" style="width: {$ViewBoxsize.width}px; height: {$ViewBoxsize.height}px;">
<!-- Your content here -->
<TransitionImage classType='risu' src={getEmotion($DataBase, $CharEmotion, 'plain')}/>
<div
class="resize-handle"
on:mousedown="{handleStart}"
on:mouseup="{handleEnd}"
on:touchstart="{handleStart}"
on:touchend="{handleEnd}"
></div>
</div>

188
src/lib/ChatScreens/TransitionImage.svelte Normal file
View File

@@ -0,0 +1,188 @@
<script lang="ts">
let currentSrc:string[] = []
let oldSrc:string[] = [];
let showOldImage = false;
let styleType:string = 'normal'
let oldStyleType:string = 'normal'
export let src:string[]|Promise<string[]> = [];
export let classType: 'waifu'|'risu'|'mobile'
async function processSrc(src:string[]|Promise<string[]>) {
const resultSrc = await src
let styl = styleType
if(resultSrc.length > 1){
styl = resultSrc[0]
resultSrc.splice(0, 1)
}
if (JSON.stringify(resultSrc) !== JSON.stringify(currentSrc) || styl !== styleType) {
handleTransitionEnd()
if(currentSrc.length === 0){
currentSrc = resultSrc
styleType = styl
}
else{
oldSrc = currentSrc
oldStyleType = styleType
currentSrc = resultSrc
styleType = styl
showOldImage = true;
}
}
}
function handleTransitionEnd() {
if (showOldImage) {
showOldImage = false;
}
}
$: processSrc(src)
</script>
<style>
.image-container {
position: relative;
overflow: hidden;
}
.image-container img {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: scale-down;
object-position: 50% 100%;
}
.old-image {
animation: fadeOutFromNone 0.5s ease-out;
}
.new-image {
animation: fadeInFromNone 0.5s ease-out;
}
.img-waifu{
width: 100%; height: 90vh;
margin-top: 10vh;
}
.img-mobile{
width: 100%;
height: 100%;
}
.img-risu{
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
}
@keyframes fadeInFromNone {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOutFromNone {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
{#if currentSrc && currentSrc.length > 0}
<div class="image-container"
class:img-waifu={classType === 'waifu'}
class:img-risu={classType === 'risu'}
class:img-mobile={classType === 'mobile'}>
{#if !showOldImage}
{#each currentSrc as img, i}
{#if styleType === 'normal'}
<img
src={img}
alt="img"
style:width={`${100 / currentSrc.length}%`}
style:left={`${100 / currentSrc.length * i}%`}
/>
{:else if styleType === 'emp'}
{#if i <= 1}
<img
src={img}
alt="img"
style:width={`${80 - (i*10)}%`}
style:left={`${30-(i*30)}%`}
style:z-index={9 - i}
/>
{/if}
{/if}
{/each}
{:else}
{#if oldStyleType === 'normal'}
{#each oldSrc as img2, i}
<img
src={oldSrc[i]}
alt="img"
class="old-image"
on:animationend={handleTransitionEnd}
style:width={`${100 / oldSrc.length}%`}
style:left={`${100 / oldSrc.length * i}%`}
/>
{/each}
{:else if oldStyleType === 'emp'}
{#each oldSrc as img2, i}
{#if i <= 1}
<img
src={oldSrc[i]}
alt="img"
class="old-image"
on:animationend={handleTransitionEnd}
style:width={`${80 - (i*10)}%`}
style:left={`${30-(i*30)}%`}
style:z-index={9 - i}
/>
{/if}
{/each}
{/if}
{#if styleType === 'normal'}
{#each currentSrc as img3, i}
<img
src={currentSrc[i]}
alt="img"
class="new-image"
style:width={`${100 / currentSrc.length}%`}
style:left={`${100 / currentSrc.length * i}%`}
/>
{/each}
{:else if styleType === 'emp'}
{#each currentSrc as img3, i}
{#if i <= 1}
<img
src={currentSrc[i]}
alt="img"
class="new-image"
style:width={`${80 - (i*10)}%`}
style:left={`${30-(i*30)}%`}
style:z-index={9 - i}
/>
{/if}
{/each}
{/if}
{/if}
</div>
{/if}