Merge pull request #58 from glaciyan/animation

Added Animation when deleting a build

package.json

@@ -1,7 +1,7 @@
 {
   "name": "gscale",
   "license": "MIT",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "scripts": {
     "pre": "npm run gen:version",
     "dev": "npm run pre && vite",

src/App.vue

@@ -15,5 +15,6 @@ import TheFooter from "./components/TheFooter.vue";
 <style>
 /* @import url(./assets/fonts/OpenSans.css); */
 @import url(./styles/transition/fade.css);
+@import url(./styles/transition/build-preview.css);
 @import url(./styles/dark.css);
 </style>

src/components/character/CharacterBuildPreview.vue

@@ -67,74 +67,76 @@ const edit = () => {
 </script>
 
 <template>
-  <ElementProvider :element="character.element">
-    <div class="rounded-md flex flex-col bg-dark-700 shadow-md overflow-hidden">
-      <div class="flex flex-grow <lg:flex-col">
-        <div class="lg:flex">
-          <div class="flex min-h-32 relative lg:w-50">
-            <div class="inset-x-0 top-0 absolute fading-out">
-              <Image
+  <div>
+    <ElementProvider :element="character.element">
+      <div class="rounded-md flex flex-col bg-dark-700 shadow-md overflow-hidden">
+        <div class="flex flex-grow <lg:flex-col">
+          <div class="lg:flex">
+            <div class="flex min-h-32 relative lg:w-50">
+              <div class="inset-x-0 top-0 absolute fading-out">
+                <Image
                   class="object-cover h-32 w-full opacity-50"
                   type="characterCard"
                   :entity="character"
                   width="240"
                   height="150"
                 />
-            </div>
-            <div class="p-6 relative <sm:p-4">
-              <p class="font-bold text-lg text-light-important mb-2">
-                {{ character.name }}
-                <span v-if="character.isTraveler" :class="`text-genshin-element-${character.element.normalizedName}`">
-                  {{ character.element.name }}
-                </span>
-              </p>
-              <div class="-m-1">
-                <RangeLevelDisplay class="m-1" :range="data.level" />
-                <div class="flex flex-wrap">
-                  <RangeTalentDisplay class="m-1" title="Normal" :range="data.normal" :icon="Sword" />
-                  <RangeTalentDisplay class="m-1" title="Elemental" :range="data.elemental" :icon="Elemental" />
-                  <RangeTalentDisplay class="m-1" title="Burst" :range="data.burst" :icon="Fire" />
+              </div>
+              <div class="p-6 relative <sm:p-4">
+                <p class="font-bold text-lg text-light-important mb-2">
+                  {{ character.name }}
+                  <span v-if="character.isTraveler" :class="`text-genshin-element-${character.element.normalizedName}`">
+                    {{ character.element.name }}
+                  </span>
+                </p>
+                <div class="-m-1">
+                  <RangeLevelDisplay class="m-1" :range="data.level" />
+                  <div class="flex flex-wrap">
+                    <RangeTalentDisplay class="m-1" title="Normal" :range="data.normal" :icon="Sword" />
+                    <RangeTalentDisplay class="m-1" title="Elemental" :range="data.elemental" :icon="Elemental" />
+                    <RangeTalentDisplay class="m-1" title="Burst" :range="data.burst" :icon="Fire" />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div class="bg-dark-600 w-full relative">
-          <div class="flex flex-wrap h-full h-max p-4 <sm:p-3">
-            <div v-if="checkList.loading.value" class="flex inset-0 absolute items-center justify-center">
-              <GSpinner />
+          <div class="bg-dark-600 w-full relative">
+            <div class="flex flex-wrap h-full h-max p-4 <sm:p-3">
+              <div v-if="checkList.loading.value" class="flex inset-0 absolute items-center justify-center">
+                <GSpinner />
+              </div>
+              <ItemChecklist v-else :items="items" :checkedOff="checkList.items.value" @itemClick="handleItemClick" />
             </div>
-            <ItemChecklist v-else :items="items" :checkedOff="checkList.items.value" @itemClick="handleItemClick" />
           </div>
         </div>
+        <div class="flex bg-dark-600/70 border-t-2 border-dark-300 py-3 px-6 justify-end">
+          <EButton look="ghost" element="neutral" class="mr-2 !h-9 !text-light-ternary" @click="deleteDialog.reveal">
+            Delete
+          </EButton>
+          <EButton look="outline" class="mr-2 !h-9" @click="edit">Edit</EButton>
+          <!-- <Button class="!h-9">Planner</Button> -->
+        </div>
       </div>
-      <div class="flex bg-dark-600/70 border-t-2 border-dark-300 py-3 px-6 justify-end">
-        <EButton look="ghost" element="neutral" class="mr-2 !h-9 !text-light-ternary" @click="deleteDialog.reveal">
-          Delete
-        </EButton>
-        <EButton look="outline" class="mr-2 !h-9" @click="edit">Edit</EButton>
-        <!-- <Button class="!h-9">Planner</Button> -->
-      </div>
-    </div>
-  </ElementProvider>
-  <Modal
-    class="max-w-96"
-    :isOpen="deleteDialog.isRevealed.value"
-    header="Delete build"
-    question="Are you sure?"
-    closeText="Cancel"
-    @close="deleteDialog.cancel"
-  >
-    <template #default>
-      <p>
-        This will delete your <span class="font-bold text-light-important">{{ character.name }}</span> build including
-        your checklist.
-      </p>
-    </template>
-    <template #buttons>
-      <EButton element="danger" class="!text-white" @click="deleteDialog.confirm">Delete</EButton>
-    </template>
-  </Modal>
+    </ElementProvider>
+    <Modal
+      class="max-w-96"
+      :isOpen="deleteDialog.isRevealed.value"
+      header="Delete build"
+      question="Are you sure?"
+      closeText="Cancel"
+      @close="deleteDialog.cancel"
+    >
+      <template #default>
+        <p>
+          This will delete your <span class="font-bold text-light-important">{{ character.name }}</span> build including
+          your checklist.
+        </p>
+      </template>
+      <template #buttons>
+        <EButton element="danger" class="!text-white" @click="deleteDialog.confirm">Delete</EButton>
+      </template>
+    </Modal>
+  </div>
 </template>
 
 <style scoped>

src/directives/tooltip.ts

@@ -16,6 +16,8 @@ export default (app: App<Element>, options: TooltipOptions) => {
   const tooltipContent = document.querySelector(`#${options.tooltipContentId}`) as HTMLDivElement;
   const arrowElement = document.querySelector(`#${options.tooltipArrowId}`) as HTMLDivElement | null;
 
+  let tooltipVisible = false;
+
   const updateContent = (el: any, value: any) => {
     // thanks to https://github.com/maciejziemichod/v-tooltip/blob/main/tooltip.js#L5
     el.setAttribute("data-v-tooltip", value);
@@ -45,6 +47,8 @@ export default (app: App<Element>, options: TooltipOptions) => {
         opacity: "1",
       });
 
+      tooltipVisible = true;
+
       if (arrowElement !== null) {
         const arrowData = middlewareData.arrow;
 
@@ -69,9 +73,13 @@ export default (app: App<Element>, options: TooltipOptions) => {
   };
 
   const hideTooltip = () => {
-    Object.assign(tooltip.style, {
-      opacity: "0",
-    });
+    if (tooltipVisible) {
+      Object.assign(tooltip.style, {
+        opacity: "0",
+      });
+    }
+
+    tooltipVisible = false;
   };
 
   addEventListener("resize", () => {
@@ -82,8 +90,7 @@ export default (app: App<Element>, options: TooltipOptions) => {
   });
 
   app.directive("tooltip", {
-    mounted(el, binding, vnode) {
-
+    mounted(el, binding) {
       if (!binding.arg) binding.arg = "top";
 
       useEventListener(el, "mouseenter", (ev) => showTooltip(el, binding.arg!, ev));
@@ -94,5 +101,8 @@ export default (app: App<Element>, options: TooltipOptions) => {
     updated(el, binding) {
       updateContent(el, binding.value);
     },
+    unmounted() {
+      hideTooltip();
+    },
   });
 };

src/lib/dev/clearDb.ts

@@ -0,0 +1,5 @@
+import { db } from "../offlineDatabase/db";
+
+export default async () => {
+  await db.builds.clear();
+};

src/lib/dev/tonsOfBuilds.ts

@@ -0,0 +1,32 @@
+import { db } from "../offlineDatabase/db";
+import { charactersViewModel } from "../viewmodel/CharactersViewModel";
+
+export default async () => {
+  await db.builds.bulkAdd(
+    charactersViewModel.map((character) => {
+      return {
+        type: "character",
+        entityId: character.normalizedName,
+        level: {
+          start: { level: 1, ascended: false },
+          goal: { level: 90, ascended: false },
+        },
+        normal: {
+          start: 1,
+          goal: 10,
+          upgraded: false,
+        },
+        elemental: {
+          start: 1,
+          goal: 10,
+          upgraded: false,
+        },
+        burst: {
+          start: 1,
+          goal: 10,
+          upgraded: false,
+        },
+      };
+    })
+  );
+};

src/pages/Builds.vue

@@ -13,6 +13,10 @@ import { Build, db } from "~/lib/offlineDatabase/db";
 import { ItemWithAmount } from "~/lib/types/ItemWithAmount";
 import Container from "../components/PageContainer";
 import { RouterLink } from "vue-router";
+import clearDb from "~/lib/dev/clearDb";
+import tonsOfBuilds from "~/lib/dev/tonsOfBuilds";
+
+const DEV = import.meta.env.DEV;
 
 const buildsData = ref<{ character: ICharacter | ITraveler; items: ItemWithAmount[]; data: Build }[]>();
 const buildsReady = computed(() => buildsData.value !== undefined);
@@ -64,10 +68,14 @@ const hideTotal = () => {
 
 <template>
   <Container v-if="buildsReady" size="2xl">
+    <div v-if="DEV" class="space-x-2 mb-2">
+      <GButton @click="tonsOfBuilds">(DEV) Dummy Builds</GButton>
+      <GButton @click="clearDb">(DEV) Clear DB</GButton>
+    </div>
     <div v-if="buildsData!.length > 0" class="flex space-x-2 mb-4">
       <GButton @click="showTotal">Show Total</GButton>
     </div>
-    <div w:grid="gap-5 cols-2 <sm:cols-1" class="grid">
+    <transition-group tag="div" name="build-preview" w:grid="gap-5 cols-2 <sm:cols-1" class="grid">
       <CharacterBuildPreview
         v-for="build in buildsData"
         :key="build.data.id"
@@ -84,7 +92,7 @@ const hideTotal = () => {
         <p class="font-bold text-xl">Add a new build</p>
         <p class="font-bold text-xl">+</p>
       </RouterLink>
-    </div>
+    </transition-group>
   </Container>
   <teleport to="#modal">
     <PopOver

src/styles/transition/build-preview.css

@@ -0,0 +1,7 @@
+.build-preview-move {
+  @apply transition-transform duration-500;
+}
+
+.build-preview-leave-active {
+  @apply h-0 opacity-0 w-0 absolute;
+}