Refactor TriggerList

src/lib/Setting/Pages/Module/ModuleMenu.svelte

@@ -227,54 +227,7 @@
 {/if}
 
 {#if submenu === 3 && (Array.isArray(currentModule.trigger))}
-    <div class="flex items-start mt-2 gap-2">
+    <TriggerList bind:value={currentModule.trigger} lowLevelAble={currentModule.lowLevelAccess} />
-        <button class="bg-bgcolor py-1 rounded-md text-sm px-2" class:ring-1={
-            currentModule?.trigger?.[0]?.effect?.[0]?.type !== 'triggercode' &&
-            currentModule?.trigger?.[0]?.effect?.[0]?.type !== 'triggerlua'
-        } on:click|stopPropagation={async () => {
-            const codeType = currentModule?.trigger?.[0]?.effect?.[0]?.type
-            if(codeType === 'triggercode' || codeType === 'triggerlua'){
-                const codeTrigger = currentModule?.trigger?.[0]?.effect?.[0]?.code
-                if(codeTrigger){
-                    const t = await alertConfirm(language.triggerSwitchWarn)
-                    if(!t){
-                        return
-                    }
-                }
-                currentModule.trigger = []
-            }
-        }}>{language.blockMode}</button>
-        <button class="bg-bgcolor py-1 rounded-md text-sm px-2" class:ring-1={currentModule?.trigger?.[0]?.effect?.[0]?.type === 'triggerlua'} on:click|stopPropagation={async () => {
-            if(currentModule?.trigger?.[0]?.effect?.[0]?.type !== 'triggerlua'){
-                if(currentModule?.trigger && currentModule?.trigger.length > 0){
-                    const t = await alertConfirm(language.triggerSwitchWarn)
-                    if(!t){
-                        return
-                    }
-                }
-                currentModule.trigger = [{
-                    comment: "",
-                    type: "start",
-                    conditions: [],
-                    effect: [{
-                        type: "triggerlua",
-                        code: ""
-                    }]
-                }]
-            }
-        }}>Lua</button>
-    </div>
-    {#if currentModule?.trigger?.[0]?.effect?.[0]?.type === 'triggerlua'}
-        <TextAreaInput margin="both" autocomplete="off" bind:value={currentModule.trigger[0].effect[0].code}></TextAreaInput>
-        <Button on:click={() => {
-            openURL(hubURL + '/redirect/docs/lua')
-        }}>{language.helpBlock}</Button>
-    {:else}
-        <TriggerList bind:value={currentModule.trigger} lowLevelAble={currentModule.lowLevelAccess} />
-        <button on:click={() => {addTrigger()}} class="hover:text-textcolor cursor-pointer">
-            <PlusIcon />
-        </button>
-    {/if}
 
     <div class="flex items-center mt-4">
         <Check bind:check={currentModule.lowLevelAccess} name={language.lowLevelAccess}/>

src/lib/SideBars/CharConfig.svelte

@@ -637,67 +637,8 @@
         </div>
 
         <span class="text-textcolor mt-4">{language.triggerScript} <Help key="triggerScript"/></span>
-        <div class="flex items-start mt-2 gap-2">
+        <TriggerList bind:value={currentChar.data.triggerscript} lowLevelAble={currentChar.data.lowLevelAccess} />
-            <button class="bg-bgcolor py-1 rounded-md text-sm px-2" class:ring-1={
+
-                currentChar.data?.triggerscript?.[0]?.effect?.[0]?.type !== 'triggercode' &&
-                currentChar.data?.triggerscript?.[0]?.effect?.[0]?.type !== 'triggerlua'
-            } on:click|stopPropagation={async () => {
-                    if(currentChar.type === 'character'){
-                        const codeType = currentChar.data?.triggerscript?.[0]?.effect?.[0]?.type
-                        if(codeType === 'triggercode' || codeType === 'triggerlua'){
-                            const codeTrigger = currentChar.data?.triggerscript?.[0]?.effect?.[0]?.code
-                            if(codeTrigger){
-                                const t = await alertConfirm(language.triggerSwitchWarn)
-                                if(!t){
-                                    return
-                                }
-                            }
-                            currentChar.data.triggerscript = []
-                        }
-                    }
-            }}>{language.blockMode}</button>
-            <button class="bg-bgcolor py-1 rounded-md text-sm px-2" class:ring-1={currentChar.data?.triggerscript?.[0]?.effect?.[0]?.type === 'triggerlua'} on:click|stopPropagation={async () => {
-                if(currentChar.type === 'character' && currentChar.data?.triggerscript?.[0]?.effect?.[0]?.type !== 'triggerlua'){
-                    if(currentChar.data?.triggerscript && currentChar.data?.triggerscript.length > 0){
-                        const t = await alertConfirm(language.triggerSwitchWarn)
-                        if(!t){
-                            return
-                        }
-                    }
-                    currentChar.data.triggerscript = [{
-                        comment: "",
-                        type: "start",
-                        conditions: [],
-                        effect: [{
-                            type: "triggerlua",
-                            code: ""
-                        }]
-                    }]
-                }
-            }}>Lua</button>
-        </div>
-        {#if currentChar.data?.triggerscript?.[0]?.effect?.[0]?.type === 'triggercode'}
-            <TextAreaInput highlight margin="both" autocomplete="off" bind:value={currentChar.data.triggerscript[0].effect[0].code}></TextAreaInput>        
-        {:else if currentChar.data?.triggerscript?.[0]?.effect?.[0]?.type === 'triggerlua'}
-            <TextAreaInput margin="both" autocomplete="off" bind:value={currentChar.data.triggerscript[0].effect[0].code}></TextAreaInput>
-            <Button on:click={() => {
-                openURL(hubURL + '/redirect/docs/lua')
-            }}>{language.helpBlock}</Button>
-        {:else}
-            <TriggerList bind:value={currentChar.data.triggerscript} lowLevelAble={currentChar.data.lowLevelAccess} />
-        {/if}
-        <button class="font-medium cursor-pointer hover:text-green-500 mb-2" on:click={() => {
-            if(currentChar.type === 'character'){
-                let script = currentChar.data.triggerscript
-                script.push({
-                    comment: "",
-                    type: "start",
-                    conditions: [],
-                    effect: []
-                })
-                currentChar.data.triggerscript = script
-            }
-        }}><PlusIcon /></button>
 
         {#if currentChar.data.virtualscript || $DataBase.showUnrecommended}
             <span class="text-textcolor mt-4">{language.charjs} <Help key="charjs" unrecommended/></span>

src/lib/SideBars/Scripts/TriggerList.svelte

@@ -6,6 +6,13 @@
     import Sortable from "sortablejs";
     import { sleep, sortableOptions } from "src/ts/util";
     import { onDestroy, onMount } from "svelte";
+  import { language } from "src/lang";
+  import { alertConfirm } from "src/ts/alert";
+  import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
+  import Button from "src/lib/UI/GUI/Button.svelte";
+  import { openURL } from "src/ts/storage/globalApi";
+  import { hubURL } from "src/ts/characterCards";
+  import { PlusIcon } from "lucide-svelte";
     let stb: Sortable = null
     let ele: HTMLDivElement
     let sorted = 0
@@ -60,17 +67,70 @@
 
 </script>
 
-<div class="contain w-full max-w-full mt-2 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
+<div class="flex items-start mt-2 gap-2">
-    {#if value.length === 0}
+    <button class="bg-bgcolor py-1 rounded-md text-sm px-2" class:ring-1={
-            <div class="text-textcolor2">No Scripts</div>
+        value?.[0]?.effect?.[0]?.type !== 'triggercode' &&
-    {/if}
+        value?.[0]?.effect?.[0]?.type !== 'triggerlua'
-    {#key sorted}
+    } on:click|stopPropagation={async () => {
-        {#each value as triggerscript, i}
+        const codeType = value?.[0]?.effect?.[0]?.type
-            <TriggerData idx={i} bind:value={value[i]} lowLevelAble={lowLevelAble} onOpen={onOpen} onClose={onClose} onRemove={() => {
+        if(codeType === 'triggercode' || codeType === 'triggerlua'){
-                let triggerscript = value
+            const codeTrigger = value?.[0]?.effect?.[0]?.code
-                triggerscript.splice(i, 1)
+            if(codeTrigger){
-                value = triggerscript
+                const t = await alertConfirm(language.triggerSwitchWarn)
-            }}/>
+                if(!t){
-        {/each}
+                    return
-    {/key}
+                }
-</div>
+            }
+            value = []
+        }
+    }}>{language.blockMode}</button>
+    <button class="bg-bgcolor py-1 rounded-md text-sm px-2" class:ring-1={value?.[0]?.effect?.[0]?.type === 'triggerlua'} on:click|stopPropagation={async () => {
+        if(value?.[0]?.effect?.[0]?.type !== 'triggerlua'){
+            if(value && value.length > 0){
+                const t = await alertConfirm(language.triggerSwitchWarn)
+                if(!t){
+                    return
+                }
+            }
+            value = [{
+                comment: "",
+                type: "start",
+                conditions: [],
+                effect: [{
+                    type: "triggerlua",
+                    code: ""
+                }]
+            }]
+        }
+    }}>Lua</button>
+</div>
+{#if value?.[0]?.effect?.[0]?.type === 'triggerlua'}
+    <TextAreaInput margin="both" autocomplete="off" bind:value={value[0].effect[0].code}></TextAreaInput>
+    <Button on:click={() => {
+        openURL(hubURL + '/redirect/docs/lua')
+    }}>{language.helpBlock}</Button>
+{:else}
+    <div class="contain w-full max-w-full mt-2 flex flex-col p-3 border-selected border-1 bg-darkbg rounded-md" bind:this={ele}>
+        {#if value.length === 0}
+                <div class="text-textcolor2">No Scripts</div>
+        {/if}
+        {#key sorted}
+            {#each value as triggerscript, i}
+                <TriggerData idx={i} bind:value={value[i]} lowLevelAble={lowLevelAble} onOpen={onOpen} onClose={onClose} onRemove={() => {
+                    let triggerscript = value
+                    triggerscript.splice(i, 1)
+                    value = triggerscript
+                }}/>
+            {/each}
+        {/key}
+    </div>
+    <button class="font-medium cursor-pointer hover:text-textcolor mb-2 text-textcolor2" on:click={() => {
+        value.push({
+            comment: "",
+            type: "start",
+            conditions: [],
+            effect: []
+        })
+        value = value
+    }}><PlusIcon /></button>
+{/if}