[refactor] backgroundDom

src/lib/ChatScreens/BackgroundDom.svelte

@@ -1,13 +1,49 @@
 <script lang="ts">
     import { ParseMarkdown } from "src/ts/parser";
-  import { DataBase } from "src/ts/storage/database";
+    import { DataBase, type Database, type character, type groupChat } from "src/ts/storage/database";
     import { selectedCharID } from "src/ts/stores";
+    import { onDestroy } from "svelte";
+
+    let backgroundHTML = ''
+    let lastdb:Database
+    let currentChar:character|groupChat
+    let selectedId = 0
+
+    function checkUpdate(){
+        if(selectedId > 0 && lastdb){
+            if(lastdb.characters[selectedId].backgroundHTML !== backgroundHTML){
+                backgroundHTML = lastdb.characters[selectedId].backgroundHTML
+                currentChar = lastdb.characters[selectedId]
+            }
+        }
+        else{
+            if(backgroundHTML !== ''){
+                backgroundHTML = ''
+            }
+        }
+    }
+
+    const unsubDatabase = DataBase.subscribe(v => {
+        lastdb = v
+        checkUpdate()
+    })
+
+    const unsubID = selectedCharID.subscribe(v => {
+        selectedId = v
+        checkUpdate()
+    })
+
+    onDestroy(() => {
+        unsubDatabase()
+        unsubID()
+    })
+
 </script>
 
 
-{#if $selectedCharID > 0 && $DataBase.characters[$selectedCharID].backgroundHTML}
+{#if backgroundHTML}
     <div class="absolute top-0 left-0 w-full h-full">
-        {#await ParseMarkdown($DataBase.characters[$selectedCharID].backgroundHTML, $DataBase.characters[$selectedCharID], 'back') then md} 
+        {#await ParseMarkdown(backgroundHTML, currentChar, 'back') then md} 
             {@html md}
         {/await}
     </div>