[feat] animations

src/App.svelte

@@ -37,17 +37,25 @@
             <GridChars endGrid={() => {gridOpen = false}} />
         {:else}
             {#if $sideBarStore}
+                {#if ($SizeStore.w > 1028)}
                     <Sidebar openGrid={() => {gridOpen = true}} />
+                {:else}
+                    <div class="fixed top-0 w-full h-full left-0 z-30 flex flex-row items-center">
+                        <!-- svelte-ignore a11y-click-events-have-key-events -->
+                        <Sidebar openGrid={() => {gridOpen = true}} />
+
+
+
+                    </div>
+                {/if}
             {:else}
                 <button on:click={() => {sideBarStore.set(true)}} class="fixed top-3 left-0 h-12 w-12 border-none rounded-r-md bg-borderc hover:bg-green-500 transition-colors flex items-center justify-center text-neutral-200 opacity-30 hover:opacity-70 z-20">
                     <ArrowRight />
                 </button>
             {/if}
-            {#if (($SizeStore.w > 1028) || (!$sideBarStore))}
             <ChatScreen />
         {/if}
     {/if}
-    {/if}
     {#if $alertStore.type !== 'none'}
         <AlertComp />
     {/if}

src/lang/en.ts

@@ -346,4 +346,5 @@ export const languageEnglish = {
     createBotInternetAlert: "Please provide the character's name and the corresponding series/game.",
     able:"Able",
     assetWidth: "Asset Images Max Width",
+    animationSpeed: "Animation Speed"
 }

src/lib/Setting/Pages/DisplaySettings.svelte

@@ -7,6 +7,7 @@
   import SliderInput from "src/lib/UI/GUI/SliderInput.svelte";
   import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
   import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+  import { updateAnimationSpeed } from "src/ts/gui/animation";
 </script>
 
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.display}</h2>
@@ -70,6 +71,11 @@
     ($DataBase.assetWidth === -1) ? "Unlimited" : 
     ($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)}</span>
 
+
+<span class="text-neutral-200">{language.animationSpeed}</span>
+<SliderInput min={0} max={1} step={0.05} bind:value={$DataBase.animationSpeed} on:change={updateAnimationSpeed} />
+<span class="text-gray-400 mb-6 text-sm">{(`${($DataBase.animationSpeed).toFixed(2)}s`)}</span>
+
 <div class="flex items-center mt-2">
     <Check bind:check={$DataBase.fullScreen} onChange={changeFullscreen} name={language.fullscreen}/>
 </div>

src/lib/SideBars/Sidebar.svelte

@@ -33,12 +33,13 @@
   import SidebarAvatar from "./SidebarAvatar.svelte";
   import BaseRoundedButton from "../UI/BaseRoundedButton.svelte";
   import { get } from "svelte/store";
-  import { findCharacterIndexbyId, findCharacterbyId, getCharacterIndexObject } from "src/ts/util";
+  import { findCharacterIndexbyId, findCharacterbyId, getCharacterIndexObject, sleep } from "src/ts/util";
   import { v4 } from "uuid";
   import { checkCharOrder } from "src/ts/storage/globalApi";
   import { doingChat } from "src/ts/process";
   import { BotCreator } from "src/ts/copyright/creator";
   import Button from "../UI/GUI/Button.svelte";
+  import { fly } from "svelte/transition";
   let openPresetList = false;
   let sideBarMode = 0;
   let editMode = false;
@@ -94,6 +95,7 @@
   let IconRounded = false
   let openFolders:string[] = []
   let currentDrag: DragData = null
+  let closing = false
 
   const unsub = DataBase.subscribe((db) => {
     let newCharImages: sortType[] = [];
@@ -323,15 +325,48 @@
 </script>
 
 <div
-  class="flex h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg"
+  class="flex h-full w-20 min-w-20 flex-col items-center bg-bgcolor text-white shadow-lg relative"
   class:editMode
+  class:risu-sub-sidebar={!closing}
+  class:risu-sub-sidebar-close={closing}
+
 >
   <button
-    class="flex h-8 w-14 min-w-14 cursor-pointer items-center justify-center rounded-b-md bg-gray-500 transition-colors hover:bg-green-500"
+    class="flex h-8 min-h-8 w-14 min-w-14 cursor-pointer mt-2 items-center justify-center rounded-md bg-gray-500 transition-colors hover:bg-green-500"
     on:click={() => {
       menuMode = 1 - menuMode;
     }}><ListIcon />
   </button>
+  <div class="mt-2 border-b border-b-selected w-full relative">
+    {#if menuMode === 1}
+      <div class="absolute w-20 min-w-20 flex border-b-selected border-b bg-bgcolor flex-col items-center pt-2 rounded-b-md z-20 pb-2">
+        <BarIcon
+        onClick={() => {
+          if ($settingsOpen) {
+            reseter();
+            settingsOpen.set(false);
+          } else {
+            reseter();
+            settingsOpen.set(true);
+          }
+        }}><Settings /></BarIcon
+      >
+      <div class="mt-2"></div>
+      <BarIcon
+        onClick={() => {
+          reseter();
+          selectedCharID.set(-1)
+        }}><HomeIcon /></BarIcon>
+      <div class="mt-2"></div>
+      <BarIcon
+        onClick={() => {
+          reseter();
+          openGrid();
+        }}><LayoutGridIcon /></BarIcon
+      >
+    </div>
+    {/if}
+  </div>
   <div class="flex flex-grow w-full flex-col items-center overflow-x-hidden overflow-y-auto pr-0">
     <div class="h-4 min-h-4 w-14" on:dragover={(e) => {
       e.preventDefault()
@@ -347,7 +382,6 @@
         inserter(da,{index:0})
       }
     }} on:dragenter={preventAll} />
-    {#if menuMode === 0}
     {#each charImages as char, ind}
       <div class="group relative flex items-center px-2"
         draggable="true"
@@ -502,43 +536,27 @@
         ></BaseRoundedButton
       >
     </div>
-    {:else}
-      <BarIcon
-        onClick={() => {
-          if ($settingsOpen) {
-            reseter();
-            settingsOpen.set(false);
-          } else {
-            reseter();
-            settingsOpen.set(true);
-          }
-        }}><Settings /></BarIcon
-      >
-      <div class="mt-2"></div>
-      <BarIcon
-        onClick={() => {
-          reseter();
-          selectedCharID.set(-1)
-        }}><HomeIcon /></BarIcon>
-      <div class="mt-2"></div>
-      <BarIcon
-        onClick={() => {
-          reseter();
-          openGrid();
-        }}><LayoutGridIcon /></BarIcon
-      >
-    {/if}
   </div>
 </div>
 <div
-  class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200"
+  class="setting-area flex w-96 h-full flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200 max-h-full"
-  class:flex-grow={$SizeStore.w <= 1028}
+  class:risu-sidebar={!closing}
+  class:risu-sidebar-close={closing}
   class:minw96={$SizeStore.w > 1028}
+  on:animationend={() => {
+    if(closing){
+      closing = false
+      sideBarStore.set(false)
+    }
+  }}
 >
   <button
     class="flex w-full justify-end text-gray-200"
-    on:click={() => {
+    on:click={async () => {
-      sideBarStore.set(false);
+      if(closing){
+        return
+      }
+      closing = true;
     }}
   >
     <button class="border-none bg-transparent p-0 text-gray-200"><X /></button>
@@ -588,6 +606,15 @@
   />
 {/if}
 
+{#if $SizeStore.w <= 1028}
+    <div class="flex-grow h-full"
+      class:sidebar-dark-animation={!closing}
+      class:sidebar-dark-close-animation={closing}>
+
+    </div>
+
+{/if}
+
 <style>
   .minw96 {
     min-width: 24rem; /* 384px */
@@ -595,4 +622,98 @@
   .editMode {
     min-width: 6rem;
   }
+  @keyframes sidebar-transition {
+    from {
+      width: 0rem;
+      min-width: 0rem;
+    }
+    to {
+      width: 24rem;
+      min-width: 24rem;
+    }
+  }
+  @keyframes sidebar-transition-close {
+    from {
+      width: 24rem;
+      min-width: 24rem;
+      max-width: 24rem;
+      right:0rem;
+    }
+    to {
+      width: 0rem;
+      min-width: 0rem;
+      max-width: 0rem;
+      right: 10rem;
+    }
+  }
+  @keyframes sub-sidebar-transition {
+    from {
+      width: 0rem;
+      min-width: 0rem;
+    }
+    to {
+      width: 5rem;
+      min-width: 5rem;
+    }
+  }
+  @keyframes sub-sidebar-transition-close {
+    from {
+      width: 5rem;
+      min-width: 5rem;
+      max-width: 5rem;
+      right:0rem;
+
+    }
+    to {
+      width: 0rem;
+      min-width: 0rem;
+      max-width: 0rem;
+      right: 10rem;
+    }
+  }
+  @keyframes sidebar-dark-animation{
+    from {
+      background-color: rgba(0,0,0,0) !important;
+    }
+    to {
+      background-color: rgba(0,0,0,0.5) !important;
+    }
+  }
+  @keyframes sidebar-dark-closing-animation{
+    from {
+      background-color: rgba(0,0,0,0.5) !important;
+    }
+    to {
+      background-color: rgba(0,0,0,0) !important;
+    }
+  }
+
+  .risu-sidebar {
+    animation-name: sidebar-transition;
+    animation-duration: var(--risu-animation-speed);
+  }
+  .risu-sidebar-close {
+    animation-name: sidebar-transition-close;
+    animation-duration: var(--risu-animation-speed);
+    position: relative;
+  }
+  .risu-sub-sidebar {
+    animation-name: sub-sidebar-transition;
+    animation-duration: var(--risu-animation-speed);
+  }
+  .risu-sub-sidebar-close {
+    animation-name: sub-sidebar-transition-close;
+    animation-duration: var(--risu-animation-speed);
+    position: relative;
+  }
+  .sidebar-dark-animation{
+    animation-name: sidebar-dark-transition;
+    animation-duration: var(--risu-animation-speed);
+    background-color: rgba(0,0,0,0.5)
+  }
+  .sidebar-dark-close-animation{
+    animation-name: sidebar-dark-closing-transition;
+    animation-duration: var(--risu-animation-speed);
+    background-color: rgba(0,0,0,0)
+  }
 </style>

src/lib/UI/GUI/SliderInput.svelte

@@ -6,6 +6,7 @@
     max={max}
     step={step}
     bind:value
+    on:change
 >
 
 <!-- <div class="p-6 max-w-sm mx-auto bg-gray-800 rounded-xl shadow-md flex items-center space-x-4 w-full" class:mb-4={marginBottom}>

src/lib/UI/Realm/RealmLicense.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { CCLicenseData, tooltip } from "src/ts/copyright/license";
+    import { CCLicenseData } from "src/ts/copyright/license";
+    import { tooltip } from "src/ts/gui/tooltip";
     import { openURL } from "src/ts/storage/globalApi";
 
     export let license = ""

src/styles.css

@@ -16,7 +16,7 @@ body{
   --FontColorBold : #fafafa;
   --FontColorItalic : #8C8D93;
   --FontColorItalicBold : #8C8D93;
-
+  --risu-animation-speed: 0.2s
 }
 
 html, body{

src/ts/copyright/license.ts

@@ -1,6 +1,3 @@
-import tippy from 'tippy.js'
-import 'tippy.js/dist/tippy.css';
-
 export const CCLicenseData = {
     "CC BY 4.0": ["by", "Requires Attribution"],
     "CC BY-NC 4.0": ["by-nc", "Requires Attribution and Non Commercial"],
@@ -9,16 +6,3 @@ export const CCLicenseData = {
     "CC BY-ND 4.0": ["by-nd", "Requires Attribution and No Derivatives"],
     "CC BY-NC-ND 4.0": ["by-nc-nd", "Requires Attribution, Non Commercial and No Derivatives"],
 }
-
-export function tooltip(node:HTMLElement, tip:string) {
-    const instance = tippy(node, {
-        content: tip,
-        animation: 'fade',
-        arrow: true,
-    })
-    return {
-        destroy() {
-            instance.destroy()
-        }
-    };
-}

src/ts/gui/animation.ts

@@ -0,0 +1,7 @@
+import { get } from "svelte/store";
+import { DataBase } from "../storage/database";
+
+export function updateAnimationSpeed(){
+    const db = get(DataBase);
+    document.documentElement.style.setProperty('--risu-animation-speed', db.animationSpeed  + 's');
+}

src/ts/gui/tooltip.ts

@@ -0,0 +1,15 @@
+import tippy from 'tippy.js'
+import 'tippy.js/dist/tippy.css';
+
+export function tooltip(node:HTMLElement, tip:string) {
+    const instance = tippy(node, {
+        content: tip,
+        animation: 'fade',
+        arrow: true,
+    })
+    return {
+        destroy() {
+            instance.destroy()
+        }
+    };
+}

src/ts/storage/database.ts

@@ -283,6 +283,8 @@ export function setDatabase(data:Database){
     data.toggleConfirmRecommendedPreset ??= true
     data.officialplugins ??= {}
     data.assetWidth ??= -1
+    data.animationSpeed ??= 0.2
+    
     changeLanguage(data.language)
     DataBase.set(data)
 }
@@ -576,6 +578,7 @@ export interface Database{
         icon:string
     }[]
     assetWidth:number
+    animationSpeed:number
 }
 
 interface hordeConfig{

src/ts/storage/globalApi.ts

@@ -20,6 +20,7 @@ import { defaultJailbreak, defaultMainPrompt, oldJailbreak, oldMainPrompt } from
 import { loadRisuAccountData } from "../drive/accounter";
 import { decodeRisuSave, encodeRisuSave } from "./risuSave";
 import { AutoStorage } from "./autoStorage";
+import { updateAnimationSpeed } from "../gui/animation";
 
 //@ts-ignore
 export const isTauri = !!window.__TAURI__
@@ -419,6 +420,7 @@ export async function loadData() {
             } catch (error) {}
             await checkNewFormat()
             updateTextTheme()
+            updateAnimationSpeed()
             if(get(DataBase).account){
                 try {
                     await loadRisuAccountData()