From f27ef7168aa1057522af7b839441f00f4afd5a0d Mon Sep 17 00:00:00 2001
From: vfxturjo <vfxturjo@gmail.com>
Date: Sat, 10 Dec 2022 21:56:34 +0600
Subject: [PATCH 1/2] apatoto working

---
 src/App.svelte                                     | 6 +++++-
 src/lib/CounterApp/CounterApp.svelte               | 2 +-
 src/lib/CounterApp/components/CounterTopBar.svelte | 1 +
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 79b37ea..602a6aa 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -21,7 +21,11 @@ let loading_page = false;
 
   <!-- PAGE LOADING ANIMATION -->
   {#if loading_page}
-    <LoadingAnim />
+    <div
+      class="absolute min-h-[80%] min-w-full flex justify-center items-center z-10"
+    >
+      <LoadingAnim />
+    </div>
   {/if}
 
   <!-- PAGES -->
diff --git a/src/lib/CounterApp/CounterApp.svelte b/src/lib/CounterApp/CounterApp.svelte
index 3b30341..ccd9cb4 100644
--- a/src/lib/CounterApp/CounterApp.svelte
+++ b/src/lib/CounterApp/CounterApp.svelte
@@ -110,7 +110,7 @@ function handle_save() {
 
 <div
   class="flex-row p-4 pt-2 inline-flex flex-wrap gap-3 justify-evenly"
-  transition:fade
+  out:slide="{{ duration: 0 }}"
   on:introend="{() => {
     anim_long = false;
   }}"
diff --git a/src/lib/CounterApp/components/CounterTopBar.svelte b/src/lib/CounterApp/components/CounterTopBar.svelte
index 884688e..3b69217 100644
--- a/src/lib/CounterApp/components/CounterTopBar.svelte
+++ b/src/lib/CounterApp/components/CounterTopBar.svelte
@@ -38,6 +38,7 @@ export let noOfCounters: number;
 </script>
 
 <div
+  transition:slide
   class="p-4 bg-gray-200 dark:bg-gray-900 h-fit w-full sticky top-0 z-10 shadow"
 >
   <div class="flex justify-between">

From f28aa19f05f140cf4b4201868c3f0eaa4d2cde24 Mon Sep 17 00:00:00 2001
From: vfxturjo <vfxturjo@gmail.com>
Date: Sat, 10 Dec 2022 22:58:41 +0600
Subject: [PATCH 2/2] ok now i guess

---
 package.json                                  |   2 +-
 src/App.svelte                                |   6 +-
 src/lib/CounterApp/CounterApp.svelte          |   9 +-
 .../components/CounterTopBar.svelte           | 196 +++++++++---------
 src/lib/Home.svelte                           |   5 +-
 src/lib/loadingAnim.svelte                    |   2 +-
 6 files changed, 111 insertions(+), 109 deletions(-)

diff --git a/package.json b/package.json
index 25f6f6f..66675dc 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "deploy": "npx gh-pages -d dist"
+    "deploy": "npx gh-pages -d dist -b gh-pages"
   },
   "devDependencies": {
     "@iconify/icons-ic": "^1.2.11",
diff --git a/src/App.svelte b/src/App.svelte
index 602a6aa..79b37ea 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -21,11 +21,7 @@ let loading_page = false;
 
   <!-- PAGE LOADING ANIMATION -->
   {#if loading_page}
-    <div
-      class="absolute min-h-[80%] min-w-full flex justify-center items-center z-10"
-    >
-      <LoadingAnim />
-    </div>
+    <LoadingAnim />
   {/if}
 
   <!-- PAGES -->
diff --git a/src/lib/CounterApp/CounterApp.svelte b/src/lib/CounterApp/CounterApp.svelte
index ccd9cb4..fc8db9f 100644
--- a/src/lib/CounterApp/CounterApp.svelte
+++ b/src/lib/CounterApp/CounterApp.svelte
@@ -21,6 +21,8 @@ function save_data(data: any) {
   anything_changed = false;
 }
 //#endregion
+
+// @ts-ignore
 $: counters_data, (anything_changed = true);
 
 //#region variables initialize
@@ -34,13 +36,14 @@ $: {
   if (anything_changed == false) {
     break $;
   } else {
-    anything_changed =
+    anything_changed = // @ts-ignore
       Array.from(counters_saved) === Array.from(counters_data) ? false : true;
   }
 }
 
 onMount(() => {
   if (localStorage.getItem("counters_saved") !== null) {
+    // @ts-ignore
     counters_data = Array.from(get(counters_saved));
     counter_count = counters_data[counters_data.length - 1].id;
   }
@@ -110,13 +113,11 @@ function handle_save() {
 
 <div
   class="flex-row p-4 pt-2 inline-flex flex-wrap gap-3 justify-evenly"
+  in:slide="{{ duration: 0 }}"
   out:slide="{{ duration: 0 }}"
   on:introend="{() => {
     anim_long = false;
   }}"
-  on:outroend="{() => {
-    anim_long = true;
-  }}"
 >
   {#each counters_data as item, i (item.id)}
     <div in:slide="{{ delay: anim_long ? i * 100 : 0 }}" out:slide|local>
diff --git a/src/lib/CounterApp/components/CounterTopBar.svelte b/src/lib/CounterApp/components/CounterTopBar.svelte
index 3b69217..2533f2f 100644
--- a/src/lib/CounterApp/components/CounterTopBar.svelte
+++ b/src/lib/CounterApp/components/CounterTopBar.svelte
@@ -37,111 +37,113 @@ let dispatch = createEventDispatcher();
 export let noOfCounters: number;
 </script>
 
-<div
-  transition:slide
-  class="p-4 bg-gray-200 dark:bg-gray-900 h-fit w-full sticky top-0 z-10 shadow"
->
-  <div class="flex justify-between">
-    <div class="flex gap-1">
-      <!-- options dropdown -->
-      <ToolbarButton
-        class="options_dropdown text-gray-900 bg-white dark:text-white dark:bg-gray-800 aspect-square"
-      >
-        <span class="fas fa-bars flex-grow px-2"></span>
-      </ToolbarButton>
-      <!-- dropdown elements -->
-      <Dropdown
-        transition="{slide}"
-        triggeredBy=".options_dropdown"
-        class="w-fit noselect"
-      >
-        <DropdownItem>
-          <Toggle size="small" bind:checked="{$delete_mode}"
-            >Delete mode
-          </Toggle>
-        </DropdownItem>
-        <DropdownItem>
-          <Toggle size="small" bind:checked="{$rename_mode}"
-            >Rename mode
-          </Toggle>
-        </DropdownItem>
-        <DropdownDivider />
+<div transition:slide>
+  <div
+    class="p-4 bg-gray-200 dark:bg-gray-900 h-fit w-full sticky top-0 z-10 shadow"
+  >
+    <div class="flex justify-between">
+      <div class="flex gap-1">
+        <!-- options dropdown -->
+        <ToolbarButton
+          class="options_dropdown text-gray-900 bg-white dark:text-white dark:bg-gray-800 aspect-square"
+        >
+          <span class="fas fa-bars flex-grow px-2"></span>
+        </ToolbarButton>
+        <!-- dropdown elements -->
+        <Dropdown
+          transition="{slide}"
+          triggeredBy=".options_dropdown"
+          class="w-fit noselect"
+        >
+          <DropdownItem>
+            <Toggle size="small" bind:checked="{$delete_mode}"
+              >Delete mode
+            </Toggle>
+          </DropdownItem>
+          <DropdownItem>
+            <Toggle size="small" bind:checked="{$rename_mode}"
+              >Rename mode
+            </Toggle>
+          </DropdownItem>
+          <DropdownDivider />
 
-        <DropdownItem>
-          <Toggle size="small" bind:checked="{$smart_mode}" class="inline"
-            >Smart mode
-          </Toggle>
-        </DropdownItem>
-        <DropdownItem>
-          <Toggle size="small" bind:checked="{$smart_text}" class="inline"
-            >Smart text
-          </Toggle>
-        </DropdownItem>
-        <DropdownItem>
-          <Toggle size="small" bind:checked="{$minus_mode}">Minus mode</Toggle>
-        </DropdownItem>
+          <DropdownItem>
+            <Toggle size="small" bind:checked="{$smart_mode}" class="inline"
+              >Smart mode
+            </Toggle>
+          </DropdownItem>
+          <DropdownItem>
+            <Toggle size="small" bind:checked="{$smart_text}" class="inline"
+              >Smart text
+            </Toggle>
+          </DropdownItem>
+          <DropdownItem>
+            <Toggle size="small" bind:checked="{$minus_mode}">Minus mode</Toggle
+            >
+          </DropdownItem>
 
-        <DropdownItem>
-          <Toggle
-            size="small"
-            bind:checked="{$Counter_size_editing}"
-            class="inline"
-            >Edit Counters size
-          </Toggle>
-        </DropdownItem>
-        <DropdownItem>
-          <Toggle
-            size="small"
-            bind:checked="{$counter_id_shown}"
-            class="inline"
-          >
-            Show counter id
-          </Toggle>
-        </DropdownItem>
-        <DropdownDivider />
+          <DropdownItem>
+            <Toggle
+              size="small"
+              bind:checked="{$Counter_size_editing}"
+              class="inline"
+              >Edit Counters size
+            </Toggle>
+          </DropdownItem>
+          <DropdownItem>
+            <Toggle
+              size="small"
+              bind:checked="{$counter_id_shown}"
+              class="inline"
+            >
+              Show counter id
+            </Toggle>
+          </DropdownItem>
+          <DropdownDivider />
 
-        <!-- option: Reset all  -->
-        <DropdownItem
-          on:click="{() => {
-            localStorage.clear();
-            dispatch('reset');
-          }}"
-        >
-          Reset all
-        </DropdownItem>
-      </Dropdown>
-      {#if $delete_mode}
-        <Button on:click="{() => ($delete_mode = false)}">
-          <Icon icon="{roundFileDownloadDone}" class="text-lg" />
-        </Button>
-      {:else if $Counter_size_editing}
-        <Button on:click="{() => ($Counter_size_editing = false)}">
-          <Icon icon="{roundFileDownloadDone}" class="text-lg" />
-        </Button>
-      {:else}
-        <div class="relative">
-          <Button
-            class="min-h-full overflow-visible"
+          <!-- option: Reset all  -->
+          <DropdownItem
             on:click="{() => {
-              dispatch('save_data');
+              localStorage.clear();
+              dispatch('reset');
             }}"
           >
-            <Icon icon="{contentSave}" class="text-lg" />
-            {#if !anything_changed}
-              <Icon icon="{doneRounded}" class=" absolute top-1 right-1 " />
-            {/if}
+            Reset all
+          </DropdownItem>
+        </Dropdown>
+        {#if $delete_mode}
+          <Button on:click="{() => ($delete_mode = false)}">
+            <Icon icon="{roundFileDownloadDone}" class="text-lg" />
           </Button>
-        </div>
-      {/if}
-    </div>
+        {:else if $Counter_size_editing}
+          <Button on:click="{() => ($Counter_size_editing = false)}">
+            <Icon icon="{roundFileDownloadDone}" class="text-lg" />
+          </Button>
+        {:else}
+          <div class="relative">
+            <Button
+              class="min-h-full overflow-visible"
+              on:click="{() => {
+                dispatch('save_data');
+              }}"
+            >
+              <Icon icon="{contentSave}" class="text-lg" />
+              {#if !anything_changed}
+                <Icon icon="{doneRounded}" class=" absolute top-1 right-1 " />
+              {/if}
+            </Button>
+          </div>
+        {/if}
+      </div>
 
-    <div>
-      <Button
-        on:click="{() => {
-          noOfCounters += 1;
-          dispatch('create_counter');
-        }}">+1</Button
-      >
+      <div>
+        <Button
+          on:click="{() => {
+            noOfCounters += 1;
+            dispatch('create_counter');
+          }}">+1</Button
+        >
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/lib/Home.svelte b/src/lib/Home.svelte
index 735504f..1655c3e 100644
--- a/src/lib/Home.svelte
+++ b/src/lib/Home.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { P, Card, A, Hr } from "flowbite-svelte";
-import { blur, slide } from "svelte/transition";
+import { blur, fade, slide } from "svelte/transition";
 // Icons loading
 import Icon from "@iconify/svelte";
 import counterIcon from "@iconify/icons-mdi/counter";
@@ -44,11 +44,14 @@ let pages = [
     {/each}
   </div>
 
+  <!-- some info -->
   <div class="mt-8 text-right">
     <P class="opacity-50">
       Currently the Multi-Counter app is being developed. Timer app is just a
       placeholder.
     </P>
+
+    <!-- footnote -->
     <Hr class="bg-gray-300" />
     <A href="#/Designer">Green Room... for designing elements...</A><br />
     <A href="#/Designer1">Error Link</A>
diff --git a/src/lib/loadingAnim.svelte b/src/lib/loadingAnim.svelte
index 3d05e91..a9d6765 100644
--- a/src/lib/loadingAnim.svelte
+++ b/src/lib/loadingAnim.svelte
@@ -5,7 +5,7 @@ import { fade } from "svelte/transition";
 
 <div
   out:fade
-  class="flex fixed w-screen h-80 flex-grow items-center  justify-center"
+  class="absolute flex w-screen h-80 flex-grow items-center  justify-center"
 >
   <SyncLoader color="green" />
 </div>