[feat] vn

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>