[feat] more customizations

src/lang/en.ts

@@ -259,5 +259,9 @@ export const languageEnglish = {
     user:"User",
     additionalAssets:"Additional Assets",
     editDisplay: "Modify Display",
-    community: "Community"
+    community: "Community",
+    textBackgrounds: "Custom Text Screen Color",
+    textBorder: "Text Outlines",
+    textScreenRound: "Round Text Screen",
+    textScreenBorder: "Text Screen Borders"
 }

src/lib/ChatScreens/ChatScreen.svelte

@@ -10,6 +10,11 @@
     let openChatList = false
 
     const wallPaper = `background: url(${defaultWallpaper})`
+    const externalStyles = 
+            ("background: " + ($DataBase.textScreenColor ? ($DataBase.textScreenColor + '80') : "rgba(0,0,0,0.8)") + ';\n')
+        +   ($DataBase.textBorder ? "text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;" : '')
+        +   ($DataBase.textScreenRounded ? "border-radius: 2rem; padding: 1rem;" : '')
+        +   ($DataBase.textScreenBorder ? `border: 0.3rem solid ${$DataBase.textScreenBorder};` : '')
     let bgImg= ''
     let lastBg = ''
 
@@ -27,7 +32,7 @@
                 <ResizeBox />
             {/if}
         {/if}
-        <DefaultChatScreen customStyle={bgImg.length > 2 ? 'background: rgba(0,0,0,0.8)': ''} bind:openChatList/>
+        <DefaultChatScreen customStyle={bgImg.length > 2 ? `${externalStyles}`: ''} 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}">
@@ -39,13 +44,13 @@
             {/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/>
+            <DefaultChatScreen customStyle={`${externalStyles}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/>
+            <DefaultChatScreen customStyle={`${externalStyles}backdrop-filter: blur(4px);`} bind:openChatList/>
         </div>
         {#if $selectedCharID >= 0}
             {#if $DataBase.characters[$selectedCharID].viewScreen !== 'none'}

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -11,9 +11,9 @@
     import { alertError } from "../../ts/alert";
     import sendSound from '../../etc/send.mp3'
     import {cloneDeep} from 'lodash'
-     import { processScript } from "src/ts/process/scripts";
-  import GithubStars from "../Others/GithubStars.svelte";
-  import CreatorQuote from "./CreatorQuote.svelte";
+    import { processScript } from "src/ts/process/scripts";
+    import GithubStars from "../Others/GithubStars.svelte";
+    import CreatorQuote from "./CreatorQuote.svelte";
 
     let messageInput = ''
     let openMenu = false

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -128,3 +128,52 @@
     <Check bind:check={$DataBase.instantRemove}/>
     <span>{language.instantRemove}</span>
 </div>
+
+
+{#if $DataBase.textScreenColor}
+    <div class="flex items-center mt-2">
+        <Check check={true} onChange={() => {
+            $DataBase.textScreenColor = null
+        }}/>
+        <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenColor} >
+        <span>{language.textBackgrounds}</span>
+    </div>
+{:else}
+    <div class="flex items-center mt-2">
+        <Check check={false} onChange={() => {
+            $DataBase.textScreenColor = "#121212"
+        }}/>
+        <span>{language.textBackgrounds}</span>
+    </div>
+
+
+{/if}
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.textBorder}/>
+    <span>{language.textBorder}</span>
+</div>
+
+
+<div class="flex items-center mt-2">
+    <Check bind:check={$DataBase.textScreenRounded}/>
+    <span>{language.textScreenRound}</span>
+</div>
+
+{#if $DataBase.textScreenBorder}
+    <div class="flex items-center mt-2">
+        <Check check={true} onChange={() => {
+            $DataBase.textScreenBorder = null
+        }}/>
+        <input type="color" class="style2 text-sm mr-2" bind:value={$DataBase.textScreenBorder} >
+        <span>{language.textScreenBorder}</span>
+    </div>
+{:else}
+    <div class="flex items-center mt-2">
+        <Check check={false} onChange={() => {
+            $DataBase.textScreenBorder = "#121212"
+        }}/>
+        <span>{language.textScreenBorder}</span>
+    </div>
+
+{/if}

src/ts/database.ts

@@ -418,6 +418,10 @@ export interface Database{
     palmAPI:string,
     supaMemoryKey:string
     supaMemoryType:string
+    textScreenColor?:string
+    textBorder?:boolean
+    textScreenRounded?:boolean
+    textScreenBorder?:string
 }
 
 

todo.txt

@@ -11,3 +11,6 @@
 플러그인:
 일단 되게 만들기
 
+TTS 개선:
+나레이션 분리하기
+나레이션 중지 만들기

vite.config.ts

@@ -53,6 +53,7 @@ export default defineConfig(async () => {
       minify: process.env.TAURI_DEBUG ? false : 'esbuild',
       // produce sourcemaps for debug builds
       sourcemap: !!process.env.TAURI_DEBUG,
+      chunkSizeWarningLimit: 2000
     },
 
     resolve:{