Add Devtools

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -122,6 +122,10 @@
         <Help key="removePunctuationHypa"/>
     </Check>
 </div>
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.enableDevTools} name={language.enableDevTools}>
+    </Check>
+</div>
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.dynamicAssets} name={language.dynamicAssets}>
         <Help key="dynamicAssets"/>

src/lib/SideBars/DevTool.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { CurrentChat } from "src/ts/stores";
+  import TextInput from "../UI/GUI/TextInput.svelte";
+  import NumberInput from "../UI/GUI/NumberInput.svelte";
+
+    
+</script>
+
+<span>Variables</span>
+<div class="rounded-md border border-darkborderc grid grid-cols-2 gap-2 p-2">
+    {#if $CurrentChat.scriptstate &&  Object.keys($CurrentChat.scriptstate).length > 0}
+        {#each Object.keys($CurrentChat.scriptstate) as key}
+            <span>{key}</span>
+            {#if typeof $CurrentChat.scriptstate[key] === "object"}
+                <div class="p-2 text-center">Object</div>
+            {:else if typeof $CurrentChat.scriptstate[key] === "string"}
+                <TextInput bind:value={$CurrentChat.scriptstate[key]} />
+            {:else if typeof $CurrentChat.scriptstate[key] === "number"}
+                <NumberInput bind:value={$CurrentChat.scriptstate[key]} />
+            {/if}
+        {/each}
+    {:else}
+        <div class="p-2 text-center">No variables</div>
+    {/if}
+</div>

src/lib/SideBars/Sidebar.svelte

@@ -52,9 +52,11 @@
     import SideChatList from "./SideChatList.svelte";
     import { joinMultiuserRoom } from "src/ts/sync/multiuser";
   import { sideBarSize } from "src/ts/gui/guisize";
+  import DevTool from "./DevTool.svelte";
   let sideBarMode = 0;
   let editMode = false;
   let menuMode = 0;
+  let devTool = false
   export let openGrid = () => {};
 
   function createScratch() {
@@ -658,10 +660,23 @@
       <SideChatList bind:chara={ $CurrentCharacter} />
     {:else}
       <div class="w-full h-8 min-h-8 border-l border-b border-r border-selected relative bottom-6 rounded-b-md flex">
-        <button on:click={() => {botMakerMode.set(false)}} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-textcolor2={$botMakerMode}>{language.Chat}</button>
-        <button on:click={() => {botMakerMode.set(true)}} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode}>{language.character}</button>
+        <button on:click={() => {
+          devTool = false
+          botMakerMode.set(false)
+        }} class="flex-grow border-r border-r-selected rounded-bl-md" class:text-textcolor2={$botMakerMode}>{language.Chat}</button>
+        <button on:click={() => {
+          devTool = false
+          botMakerMode.set(true)
+        }} class="flex-grow rounded-br-md" class:text-textcolor2={!$botMakerMode}>{language.character}</button>
+        {#if $DataBase.enableDevTools}
+          <button on:click={() => {
+            devTool = true
+          }} class="flex-grow border-l border-l-selected rounded-br-md" class:text-textcolor2={!$botMakerMode}>🛠️</button>
+        {/if}
       </div>
-      {#if $botMakerMode}
+      {#if devTool}
+        <DevTool />
+      {:else if $botMakerMode}
         <CharConfig />
       {:else}
         <SideChatList bind:chara={ $CurrentCharacter} />

src/lib/UI/GUI/TextInput.svelte

@@ -60,7 +60,9 @@
         type="text"
         bind:value
         disabled={disabled}
-        on:input={onInput}
+        on:input={(e) => {
+            onInput(e)
+        }}
     />
 {/if}
 
@@ -73,7 +75,9 @@
     export let padding = true
     export let marginBottom = false
     export let marginTop = false
-    export let onInput = () => {}
+    export let onInput = (e:Event & {
+        currentTarget: EventTarget & HTMLInputElement;
+    }) => {}
     export let fullwidth = false
     export let fullh = false
     export let className = ''