From 423bad25259054655fb4fbd20b7b858f92d658b5 Mon Sep 17 00:00:00 2001 From: kwaroran Date: Thu, 20 Jul 2023 22:29:43 +0900 Subject: [PATCH] [feat] animations --- src/App.svelte | 16 +- src/lang/en.ts | 1 + src/lib/Setting/Pages/DisplaySettings.svelte | 6 + src/lib/SideBars/Sidebar.svelte | 479 ++++++++++++------- src/lib/UI/GUI/SliderInput.svelte | 1 + src/lib/UI/Realm/RealmLicense.svelte | 3 +- src/styles.css | 2 +- src/ts/copyright/license.ts | 16 - src/ts/gui/animation.ts | 7 + src/ts/gui/tooltip.ts | 15 + src/ts/storage/database.ts | 3 + src/ts/storage/globalApi.ts | 2 + 12 files changed, 350 insertions(+), 201 deletions(-) create mode 100644 src/ts/gui/animation.ts create mode 100644 src/ts/gui/tooltip.ts diff --git a/src/App.svelte b/src/App.svelte index eeb5abb3..84b10342 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -37,15 +37,23 @@ {gridOpen = false}} /> {:else} {#if $sideBarStore} - {gridOpen = true}} /> + {#if ($SizeStore.w > 1028)} + {gridOpen = true}} /> + {:else} +
+ + {gridOpen = true}} /> + + + +
+ {/if} {:else} {/if} - {#if (($SizeStore.w > 1028) || (!$sideBarStore))} - - {/if} + {/if} {/if} {#if $alertStore.type !== 'none'} diff --git a/src/lang/en.ts b/src/lang/en.ts index 73883376..10ff1000 100644 --- a/src/lang/en.ts +++ b/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" } \ No newline at end of file diff --git a/src/lib/Setting/Pages/DisplaySettings.svelte b/src/lib/Setting/Pages/DisplaySettings.svelte index f04ceb4b..90cd4444 100644 --- a/src/lib/Setting/Pages/DisplaySettings.svelte +++ b/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";

{language.display}

@@ -70,6 +71,11 @@ ($DataBase.assetWidth === -1) ? "Unlimited" : ($DataBase.assetWidth === 0) ? "Hidden" : (`${($DataBase.assetWidth).toFixed(1)} rem`)} + +{language.animationSpeed} + +{(`${($DataBase.animationSpeed).toFixed(2)}s`)} +
diff --git a/src/lib/SideBars/Sidebar.svelte b/src/lib/SideBars/Sidebar.svelte index 78f5eb47..287a2b1c 100644 --- a/src/lib/SideBars/Sidebar.svelte +++ b/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,187 +325,22 @@
-
-
{ - e.preventDefault() - e.dataTransfer.dropEffect = 'move' - e.currentTarget.classList.add('bg-green-500') - }} on:dragleave={(e) => { - e.currentTarget.classList.remove('bg-green-500') - }} on:drop={(e) => { - e.preventDefault() - e.currentTarget.classList.remove('bg-green-500') - const da = currentDrag - if(da){ - inserter(da,{index:0}) - } - }} on:dragenter={preventAll} /> - {#if menuMode === 0} - {#each charImages as char, ind} -
{avatarDragStart({index:ind}, e)}} - on:dragover={avatarDragOver} - on:drop={(e) => {avatarDrop({index:ind}, e)}} - on:dragenter={preventAll} - on:contextmenu={preventIfPolyfilled} - > - - -
{ - if(char.type === "normal"){ - changeChar(char.index); - } - }} - on:keydown={(e) => { - if (e.key === "Enter") { - if(char.type === "normal"){ - changeChar(char.index); - } - } - }} - tabindex="0" - > - {#if char.type === 'normal'} - - {:else if char.type === "folder"} - { - if(char.type !== 'folder'){ - return - } - if(openFolders.includes(char.id)){ - openFolders.splice(openFolders.indexOf(char.id), 1) - } - else{ - openFolders.push(char.id) - } - openFolders = openFolders - }}> - {#if openFolders.includes(char.id)} - - {:else} - - {/if} - - {/if} -
-
- {#if char.type === 'folder' && openFolders.includes(char.id)} -
-
-
{ - e.preventDefault() - e.dataTransfer.dropEffect = 'move' - e.currentTarget.classList.add('bg-green-500') - }} on:dragleave={(e) => { - e.currentTarget.classList.remove('bg-green-500') - }} on:drop={(e) => { - e.preventDefault() - e.currentTarget.classList.remove('bg-green-500') - const da = currentDrag - if(da && char.type === 'folder'){ - inserter(da,{index:0,folder:char.id}) - } - }} on:dragenter={preventAll}/> - {#each char.folder as char2, ind} -
{if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}} - on:dragover={avatarDragOver} - on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}} - on:dragenter={preventAll} - on:contextmenu={preventIfPolyfilled} - > - - -
{ - if(char2.type === "normal"){ - changeChar(char2.index); - } - }} - on:keydown={(e) => { - if (e.key === "Enter") { - if(char2.type === "normal"){ - changeChar(char2.index); - } - } - }} - tabindex="0" - > - -
-
-
{ - e.preventDefault() - e.dataTransfer.dropEffect = 'move' - e.currentTarget.classList.add('bg-green-500') - }} on:dragleave={(e) => { - e.currentTarget.classList.remove('bg-green-500') - }} on:drop={(e) => { - e.preventDefault() - e.currentTarget.classList.remove('bg-green-500') - const da = currentDrag - if(da && char.type === 'folder'){ - inserter(da,{index:ind+1,folder:char.id}) - } - }} on:dragenter={preventAll}/> - {/each} -
- {/if} -
{ - e.dataTransfer.dropEffect = 'move' - e.currentTarget.classList.add('bg-green-500') - }} on:dragleave={(e) => { - e.currentTarget.classList.remove('bg-green-500') - }} on:drop={(e) => { - e.preventDefault() - e.currentTarget.classList.remove('bg-green-500') - const da = currentDrag - if(da){ - inserter(da,{index:ind+1}) - } - }} on:dragenter={preventAll} /> - {/each} -
- { - if (sideBarMode === 1) { - reseter(); - sideBarMode = 0; - } else { - reseter(); - sideBarMode = 1; - } - }} - > -
- {:else} - + {#if menuMode === 1} +
+ { if ($settingsOpen) { reseter(); @@ -527,18 +364,199 @@ openGrid(); }}> +
{/if}
+
+
{ + e.preventDefault() + e.dataTransfer.dropEffect = 'move' + e.currentTarget.classList.add('bg-green-500') + }} on:dragleave={(e) => { + e.currentTarget.classList.remove('bg-green-500') + }} on:drop={(e) => { + e.preventDefault() + e.currentTarget.classList.remove('bg-green-500') + const da = currentDrag + if(da){ + inserter(da,{index:0}) + } + }} on:dragenter={preventAll} /> + {#each charImages as char, ind} +
{avatarDragStart({index:ind}, e)}} + on:dragover={avatarDragOver} + on:drop={(e) => {avatarDrop({index:ind}, e)}} + on:dragenter={preventAll} + on:contextmenu={preventIfPolyfilled} + > + + +
{ + if(char.type === "normal"){ + changeChar(char.index); + } + }} + on:keydown={(e) => { + if (e.key === "Enter") { + if(char.type === "normal"){ + changeChar(char.index); + } + } + }} + tabindex="0" + > + {#if char.type === 'normal'} + + {:else if char.type === "folder"} + { + if(char.type !== 'folder'){ + return + } + if(openFolders.includes(char.id)){ + openFolders.splice(openFolders.indexOf(char.id), 1) + } + else{ + openFolders.push(char.id) + } + openFolders = openFolders + }}> + {#if openFolders.includes(char.id)} + + {:else} + + {/if} + + {/if} +
+
+ {#if char.type === 'folder' && openFolders.includes(char.id)} +
+
+
{ + e.preventDefault() + e.dataTransfer.dropEffect = 'move' + e.currentTarget.classList.add('bg-green-500') + }} on:dragleave={(e) => { + e.currentTarget.classList.remove('bg-green-500') + }} on:drop={(e) => { + e.preventDefault() + e.currentTarget.classList.remove('bg-green-500') + const da = currentDrag + if(da && char.type === 'folder'){ + inserter(da,{index:0,folder:char.id}) + } + }} on:dragenter={preventAll}/> + {#each char.folder as char2, ind} +
{if(char.type === 'folder'){avatarDragStart({index: ind, folder:char.id}, e)}}} + on:dragover={avatarDragOver} + on:drop={(e) => {if(char.type === 'folder'){avatarDrop({index: ind, folder:char.id}, e)}}} + on:dragenter={preventAll} + on:contextmenu={preventIfPolyfilled} + > + + +
{ + if(char2.type === "normal"){ + changeChar(char2.index); + } + }} + on:keydown={(e) => { + if (e.key === "Enter") { + if(char2.type === "normal"){ + changeChar(char2.index); + } + } + }} + tabindex="0" + > + +
+
+
{ + e.preventDefault() + e.dataTransfer.dropEffect = 'move' + e.currentTarget.classList.add('bg-green-500') + }} on:dragleave={(e) => { + e.currentTarget.classList.remove('bg-green-500') + }} on:drop={(e) => { + e.preventDefault() + e.currentTarget.classList.remove('bg-green-500') + const da = currentDrag + if(da && char.type === 'folder'){ + inserter(da,{index:ind+1,folder:char.id}) + } + }} on:dragenter={preventAll}/> + {/each} +
+ {/if} +
{ + e.dataTransfer.dropEffect = 'move' + e.currentTarget.classList.add('bg-green-500') + }} on:dragleave={(e) => { + e.currentTarget.classList.remove('bg-green-500') + }} on:drop={(e) => { + e.preventDefault() + e.currentTarget.classList.remove('bg-green-500') + const da = currentDrag + if(da){ + inserter(da,{index:ind+1}) + } + }} on:dragenter={preventAll} /> + {/each} +
+ { + if (sideBarMode === 1) { + reseter(); + sideBarMode = 0; + } else { + reseter(); + sideBarMode = 1; + } + }} + > +
+
1028} + on:animationend={() => { + if(closing){ + closing = false + sideBarStore.set(false) + } + }} > @@ -588,6 +606,15 @@ /> {/if} +{#if $SizeStore.w <= 1028} +
+ +
+ +{/if} + diff --git a/src/lib/UI/GUI/SliderInput.svelte b/src/lib/UI/GUI/SliderInput.svelte index 66a7173d..d23e8a7d 100644 --- a/src/lib/UI/GUI/SliderInput.svelte +++ b/src/lib/UI/GUI/SliderInput.svelte @@ -6,6 +6,7 @@ max={max} step={step} bind:value + on:change >