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

Migrate to svelte 5

Browse Source
This commit is contained in:
kwaroran
2024-10-23 02:31:37 +09:00
parent e434c7ab96
commit c7330719ad
120 changed files with 2398 additions and 2033 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/Setting/Pages/Module/ModuleChatMenu.svelte
View File

@@ -5,11 +5,15 @@
import TextInput from "src/lib/UI/GUI/TextInput.svelte";
import type { RisuModule } from "src/ts/process/modules";
import { DataBase } from "src/ts/storage/database";
import { CurrentChat } from "src/ts/stores";
import { selectedCharID } from "src/ts/stores";
import { SettingsMenuIndex, settingsOpen } from "src/ts/stores";
export let close = (i:string) => {}
export let alertMode = false
let moduleSearch = ''
interface Props {
close?: any;
alertMode?: boolean;
}
let { close = (i:string) => {}, alertMode = false }: Props = $props();
let moduleSearch = $state('')
function sortModules(modules:RisuModule[], search:string){
const db = $DataBase
@@ -31,7 +35,7 @@
<div class="flex items-center text-textcolor">
<h2 class="mt-0 mb-0 text-lg">{language.modules}</h2>
<div class="flex-grow flex justify-end">
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" on:click={() => {
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer items-center" onclick={() => {
close('')
}}>
<XIcon size={24}/>
@@ -60,7 +64,7 @@
<div class="flex-grow flex justify-end">
{#if alertMode}
<button class={"text-textcolor2 mr-2 cursor-pointer hover:text-blue-500 transition-colors"} on:click={async (e) => {
<button class={"text-textcolor2 mr-2 cursor-pointer hover:text-blue-500 transition-colors"} onclick={async (e) => {
e.stopPropagation()
close(rmodule.id)
@@ -71,19 +75,19 @@
<button class="mr-2 text-textcolor2 cursor-not-allowed">
</button>
{:else}
<button class={(!$CurrentChat.modules.includes(rmodule.id)) ?
<button class={(!$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)) ?
"text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
"mr-2 cursor-pointer text-blue-500"
} on:click={async (e) => {
} onclick={async (e) => {
e.stopPropagation()
if($CurrentChat.modules.includes(rmodule.id)){
$CurrentChat.modules.splice($CurrentChat.modules.indexOf(rmodule.id), 1)
if($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.includes(rmodule.id)){
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.splice($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.indexOf(rmodule.id), 1)
}
else{
$CurrentChat.modules.push(rmodule.id)
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules.push(rmodule.id)
}
$CurrentChat.modules = $CurrentChat.modules
$DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules = $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].modules
}}>
<CheckCircle2Icon size={18}/>
</button>
@@ -94,7 +98,7 @@
{/if}
</div>
<div>
<Button className="mt-4 flex-grow-0" size="sm" on:click={() => {
<Button className="mt-4 flex-grow-0" size="sm" onclick={() => {
$SettingsMenuIndex = 14
$settingsOpen = true
close('')

44
src/lib/Setting/Pages/Module/ModuleMenu.svelte
View File

@@ -1,4 +1,6 @@
<script type="ts" lang="ts">
import { run } from 'svelte/legacy';
import { language } from "src/lang";
import TextInput from "src/lib/UI/GUI/TextInput.svelte";
import LoreBookData from "src/lib/SideBars/LoreBook/LoreBookData.svelte";
@@ -17,12 +19,16 @@
import { selectMultipleFile } from "src/ts/util";
import { DataBase } from 'src/ts/storage/database';
let submenu = 0
export let currentModule:RisuModule
let assetFileExtensions:string[] = []
let assetFilePath:string[] = []
let submenu = $state(0)
interface Props {
currentModule: RisuModule;
}
$: {
let { currentModule = $bindable() }: Props = $props();
let assetFileExtensions:string[] = $state([])
let assetFilePath:string[] = $state([])
run(() => {
if($DataBase.useAdditionalAssetsPreview){
if(currentModule?.assets){
for(let i = 0; i < currentModule.assets.length; i++){
@@ -36,7 +42,7 @@
}
}
}
}
});
function addLorebook(){
if(Array.isArray(currentModule.lorebook)){
@@ -83,36 +89,36 @@
</script>
<div class="flex w-full rounded-md border border-darkborderc mb-4 overflow-x-auto h-16 min-h-16 overflow-y-clip">
<button on:click={() => {
<button onclick={() => {
submenu = 0
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 0}>
<span>{language.basicInfo}</span>
</button>
<button on:click={() => {
<button onclick={() => {
currentModule.lorebook ??= []
submenu = 1
}} class="p2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 1}>
<span>{language.loreBook}</span>
</button>
<button on:click={() => {
<button onclick={() => {
currentModule.regex ??= []
submenu = 2
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 2}>
<span>{language.regexScript}</span>
</button>
<button on:click={() => {
<button onclick={() => {
currentModule.trigger ??= []
submenu = 3
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 3}>
<span>{language.triggerScript}</span>
</button>
<button on:click={() => {
<button onclick={() => {
currentModule.backgroundEmbedding ??= ''
submenu = 4
}} class="p-2 flex-1 border-r border-darkborderc" class:bg-darkbutton={submenu === 4}>
<span>{language.backgroundHTML}</span>
</button>
<button on:click={() => {
<button onclick={() => {
currentModule.assets ??= []
submenu = 5
}} class="p-2 flex-1" class:bg-darkbutton={submenu === 5}>
@@ -140,7 +146,7 @@
}}/>
{/each}
</div>
<button on:click={() => {addLorebook()}} class="hover:text-textcolor cursor-pointer">
<button onclick={() => {addLorebook()}} class="hover:text-textcolor cursor-pointer">
<PlusIcon />
</button>
{/if}
@@ -148,13 +154,13 @@
{#if submenu === 2 && (Array.isArray(currentModule.regex))}
<RegexList bind:value={currentModule.regex}/>
<div class="text-textcolor2 mt-2 flex gap-2">
<button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
<button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
addRegex()
}}><PlusIcon /></button>
<button class="font-medium cursor-pointer hover:text-green-500" on:click={() => {
<button class="font-medium cursor-pointer hover:text-green-500" onclick={() => {
exportRegex(currentModule.regex)
}}><DownloadIcon /></button>
<button class="font-medium cursor-pointer hover:text-green-500" on:click={async () => {
<button class="font-medium cursor-pointer hover:text-green-500" onclick={async () => {
currentModule.regex = await importRegex(currentModule.regex)
}}><FolderUpIcon /></button>
</div>
@@ -171,7 +177,7 @@
<tr>
<th class="font-medium">{language.value}</th>
<th class="font-medium cursor-pointer w-10">
<button class="hover:text-green-500" on:click={async () => {
<button class="hover:text-green-500" onclick={async () => {
const da = await selectMultipleFile(['png', 'webp', 'mp4', 'mp3', 'gif', 'jpeg', 'jpg', 'ttf', 'otf', 'css', 'webm', 'woff', 'woff2', 'svg', 'avif'])
currentModule.assets = currentModule.assets ?? []
if(!da){
@@ -200,7 +206,7 @@
<td class="font-medium truncate">
{#if assetFilePath[i] && $DataBase.useAdditionalAssetsPreview}
{#if assetFileExtensions[i] === 'mp4'}
<!-- svelte-ignore a11y-media-has-caption -->
<!-- svelte-ignore a11y_media_has_caption -->
<video controls class="mt-2 px-2 w-full m-1 rounded-md"><source src={assetFilePath[i]} type="video/mp4"></video>
{:else if assetFileExtensions[i] === 'mp3'}
<audio controls class="mt-2 px-2 w-full h-16 m-1 rounded-md" loop><source src={assetFilePath[i]} type="audio/mpeg"></audio>
@@ -212,7 +218,7 @@
</td>
<th class="font-medium cursor-pointer w-10">
<button class="hover:text-green-500" on:click={() => {
<button class="hover:text-green-500" onclick={() => {
let additionalAssets = currentModule.assets
additionalAssets.splice(i, 1)
currentModule.assets = additionalAssets

26
src/lib/Setting/Pages/Module/ModuleSettings.svelte
View File

@@ -10,14 +10,14 @@
import { alertCardExport, alertConfirm, alertError } from "src/ts/alert";
import TextInput from "src/lib/UI/GUI/TextInput.svelte";
import { ShowRealmFrameStore } from "src/ts/stores";
let tempModule:RisuModule = {
let tempModule:RisuModule = $state({
name: '',
description: '',
id: v4(),
}
let mode = 0
let editModuleIndex = -1
let moduleSearch = ''
})
let mode = $state(0)
let editModuleIndex = $state(-1)
let moduleSearch = $state('')
function sortModules(modules:RisuModule[], search:string){
const db = $DataBase
@@ -51,7 +51,7 @@
<button class={(!$DataBase.enabledModules.includes(rmodule.id)) ?
"text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" :
"mr-2 cursor-pointer text-blue-500"
} use:tooltip={language.enableGlobal} on:click={async (e) => {
} use:tooltip={language.enableGlobal} onclick={async (e) => {
e.stopPropagation()
if($DataBase.enabledModules.includes(rmodule.id)){
$DataBase.enabledModules.splice($DataBase.enabledModules.indexOf(rmodule.id), 1)
@@ -63,13 +63,13 @@
}}>
<Globe size={18}/>
</button>
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.download} on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.download} onclick={async (e) => {
e.stopPropagation()
exportModule(rmodule)
}}>
<Share2Icon size={18}/>
</button>
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.edit} on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.edit} onclick={async (e) => {
e.stopPropagation()
const index = $DataBase.modules.findIndex((v) => v.id === rmodule.id)
tempModule = rmodule
@@ -78,7 +78,7 @@
}}>
<Edit size={18}/>
</button>
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.remove} on:click={async (e) => {
<button class="text-textcolor2 hover:text-green-500 mr-2 cursor-pointer" use:tooltip={language.remove} onclick={async (e) => {
e.stopPropagation()
const d = await alertConfirm(`${language.removeConfirm}` + rmodule.name)
if(d){
@@ -97,7 +97,7 @@
{/each}
{/if}
</div>
<Button className="mt-2" on:click={() => {
<Button className="mt-2" onclick={() => {
tempModule = {
name: '',
description: '',
@@ -105,11 +105,11 @@
}
mode = 1
}}>{language.createModule}</Button>
<Button className="mt-2" on:click={importModule}>{language.importModule}</Button>
<Button className="mt-2" onclick={importModule}>{language.importModule}</Button>
{:else if mode === 1}
<h2 class="mb-2 text-2xl font-bold mt-2">{language.createModule}</h2>
<ModuleMenu bind:currentModule={tempModule}/>
<Button className="mt-6" on:click={() => {
<Button className="mt-6" onclick={() => {
$DataBase.modules.push(tempModule)
mode = 0
}}>{language.createModule}</Button>
@@ -117,7 +117,7 @@
<h2 class="mb-2 text-2xl font-bold mt-2">{language.editModule}</h2>
<ModuleMenu bind:currentModule={tempModule}/>
{#if tempModule.name !== ''}
<Button className="mt-6" on:click={() => {
<Button className="mt-6" onclick={() => {
$DataBase.modules[editModuleIndex] = tempModule
mode = 0
}}>{language.editModule}</Button>