[feat] vn

src/lib/ChatScreens/ChatScreen.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
     import { getCustomBackground, getEmotion } from "../../ts/util";
     import { DataBase } from "../../ts/storage/database";
-    import { CharEmotion, CurrentCharacter, selectedCharID } from "../../ts/stores";
+    import { CharEmotion, CurrentCharacter, ShowVN, selectedCharID } 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";
-  import BackgroundDom from "./BackgroundDom.svelte";
-  import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
+    import BackgroundDom from "./BackgroundDom.svelte";
+    import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
+    import VisualNovelMain from "../VisualNovel/VisualNovelMain.svelte";
     let openChatList = false
 
     const wallPaper = `background: url(${defaultWallpaper})`
@@ -19,7 +20,6 @@
         +   ($DataBase.textScreenBorder ? `border: 0.3rem solid ${$DataBase.textScreenBorder};` : '')
     let bgImg= ''
     let lastBg = ''
-
     $: (async () =>{
         if($DataBase.customBackground !== lastBg){
             lastBg = $DataBase.customBackground
@@ -27,7 +27,10 @@
         }
     })()
 </script>
-{#if $DataBase.theme === ''}
+
+{#if $ShowVN}
+    <VisualNovelMain />
+{:else if $DataBase.theme === ''}
     <div class="flex-grow h-full min-w-0 relative justify-center flex">
         <SideBarArrow />
         <BackgroundDom />

src/lib/SideBars/CharConfig.svelte

@@ -314,15 +314,18 @@
             <OptionInput value="none">{language.none}</OptionInput>
             <OptionInput value="emotion">{language.emotionImage}</OptionInput>
             <OptionInput value="imggen">{language.imageGeneration}</OptionInput>
+            {#if $DataBase.tpo}
+                <OptionInput value="vn">VN test</OptionInput>
+            {/if}
         </SelectInput>
     {:else}
-    <SelectInput className="mb-2" bind:value={currentChar.data.viewScreen}>
-        <OptionInput value="none">{language.none}</OptionInput>
-        <OptionInput value="single">{language.singleView}</OptionInput>
-        <OptionInput value="multiple">{language.SpacedView}</OptionInput>
-        <OptionInput value="emp">{language.emphasizedView}</OptionInput>
+        <SelectInput className="mb-2" bind:value={currentChar.data.viewScreen}>
+            <OptionInput value="none">{language.none}</OptionInput>
+            <OptionInput value="single">{language.singleView}</OptionInput>
+            <OptionInput value="multiple">{language.SpacedView}</OptionInput>
+            <OptionInput value="emp">{language.emphasizedView}</OptionInput>
 
-    </SelectInput>
+        </SelectInput>
     {/if}
 
     {#if currentChar.data.viewScreen === 'emotion'}

src/lib/VisualNovel/VisualNovelChat.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { CurrentCharacter } from "src/ts/stores";
+
+    
+</script>
+
+<div class="w-full flex justify-center absolute bottom-5">
+    <div class="w-3xl max-w-full flex flex-col">
+
+        <div class="bg-slate-700 h-12 rounded-lg border-slate-500 border-1 w-40 mb-2 bg-opacity-90 text-center flex items-center justify-center">
+            <span class="font-bold p-2">{$CurrentCharacter.name}</span>
+        </div>
+        <div class="bg-slate-700 h-40 rounded-lg border-slate-500 border-1 w-full bg-opacity-90 text-justify p-4">
+            Test
+        </div>
+    </div>
+</div>

src/lib/VisualNovel/VisualNovelMain.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { getCustomBackground, getEmotion } from "../../ts/util";
+    import { DataBase } from "../../ts/storage/database";
+    import BackgroundDom from "../ChatScreens/BackgroundDom.svelte";
+    import SideBarArrow from "../UI/GUI/SideBarArrow.svelte";
+    import defaultWallpaper from '../../etc/bg.jpg'
+    import VisualNovelChat from "./VisualNovelChat.svelte";
+
+    const wallPaper = `background: url(${defaultWallpaper})`
+
+    let bgImg= ''
+    let lastBg = ''
+    $: (async () =>{
+        if($DataBase.customBackground !== lastBg){
+            lastBg = $DataBase.customBackground
+            bgImg = await getCustomBackground($DataBase.customBackground)
+        }
+    })()
+</script>
+<div class="flex-grow h-full min-w-0 relative justify-center flex">
+    <SideBarArrow />
+    <BackgroundDom />
+    <div style={wallPaper} class="h-full w-full">
+        <VisualNovelChat />
+    </div>
+</div>