From b123b3b629ec8a8c4b998a2ee8ba1a07e45b0f6a Mon Sep 17 00:00:00 2001
From: Barnaby <22575741+barnabwhy@users.noreply.github.com>
Date: Mon, 4 Mar 2024 18:50:03 +0000
Subject: [PATCH] make extract time elapsed update every frame :)

---
 src/App.vue        |  4 ++--
 src/stores/main.ts | 59 ++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 51 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3d7f014..192f104 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,11 +42,11 @@ const mainStore = useStore();
         <span>{{ mainStore.extractProgress }} / {{ mainStore.extractTotal }} {{ mainStore.extractErrors.length ? `(${mainStore.extractErrors.length} failed)` : '' }}</span>
       </div>
       <template v-if="mainStore.extracting">
-        <p class="timer">Elapsed {{ ((Date.now() - mainStore.extractStartTime) / 1000).toFixed(3) }}s</p>
+        <p class="timer">Elapsed {{ (mainStore.extractElapsedTime / 1000).toFixed(3) }}s</p>
         <button @click="mainStore.cancelExtract">Cancel</button>
       </template>
       <template v-else>
-        <p class="timer">Took {{ ((mainStore.extractFinishTime - mainStore.extractStartTime) / 1000).toFixed(3) }}s</p>
+        <p class="timer">Took {{ (mainStore.extractElapsedTime / 1000).toFixed(3) }}s</p>
         <button @click="mainStore.showExtract = false">Close</button>
       </template>
     </div>
diff --git a/src/stores/main.ts b/src/stores/main.ts
index f53c870..188d2a8 100644
--- a/src/stores/main.ts
+++ b/src/stores/main.ts
@@ -16,7 +16,7 @@ export const useStore = defineStore('main', () => {
     const extracting = ref(false);
     const extractCancelled = ref(false);
     const extractStartTime = ref(0);
-    const extractFinishTime = ref(0);
+    const extractElapsedTime = ref(0);
     const extractProgress = ref(0);
     const extractTotal = ref(0);
     const extractErrors = ref<string[]>([]);
@@ -90,13 +90,21 @@ export const useStore = defineStore('main', () => {
     async function extractAll() {
         let res = await open({ title: 'Select a output directory', directory: true, multiple: false })
         if (res !== null && typeof res == 'string') {
+            extractElapsedTime.value = 0;
+            let timerTickInterval;
+            const timerTick = () => {
+                extractElapsedTime.value = performance.now() - extractStartTime.value;
+                timerTickInterval = requestAnimationFrame(timerTick);       
+            }
+            timerTickInterval = requestAnimationFrame(timerTick);
+
             extractProgress.value = 0;
             extractTotal.value = numFiles.value;
             extractErrors.value = [];
             showExtract.value = true;
             extracting.value = true;
             extractCancelled.value = false;
-            extractStartTime.value = Date.now();
+            extractStartTime.value = performance.now();
             let unlistenExtracted = await listen('extracted', () => {
                 extractProgress.value++;
             });
@@ -107,22 +115,32 @@ export const useStore = defineStore('main', () => {
             });
             await invoke('extract_all', { outDir: res });
             extracting.value = false;
-            extractFinishTime.value = Date.now();
             unlistenExtracted();
             unlistenExtractFail();
+            cancelAnimationFrame(timerTickInterval);
+            extractElapsedTime.value = performance.now() - extractStartTime.value;
         }
     }
 
     async function extractDir(dir: string) {
         let res = await open({ title: 'Select a output directory', directory: true, multiple: false })
         if (res !== null && typeof res == 'string') {
+            extractElapsedTime.value = 0;
+            let timerTickInterval;
+            const timerTick = () => {
+                console.log("tick");
+                extractElapsedTime.value = performance.now() - extractStartTime.value;
+                timerTickInterval = requestAnimationFrame(timerTick);       
+            }
+            timerTickInterval = requestAnimationFrame(timerTick);
+            
             extractProgress.value = 0;
             extractTotal.value = await invoke('count_dir', { dir }) as number;
             extractErrors.value = [];
             showExtract.value = true;
             extracting.value = true;
             extractCancelled.value = false;
-            extractStartTime.value = Date.now();
+            extractStartTime.value = performance.now();
             let unlistenExtracted = await listen('extracted', () => {
                 extractProgress.value++;
             });
@@ -133,9 +151,10 @@ export const useStore = defineStore('main', () => {
             });
             await invoke('extract_dir', { dir, outDir: res });
             extracting.value = false;
-            extractFinishTime.value = Date.now();
             unlistenExtracted();
             unlistenExtractFail();
+            cancelAnimationFrame(timerTickInterval);
+            extractElapsedTime.value = performance.now() - extractStartTime.value;
         }
     }
 
@@ -146,13 +165,22 @@ export const useStore = defineStore('main', () => {
                 filePath = ' /' + filePath;
             }
 
+            extractElapsedTime.value = 0;
+            let timerTickInterval;
+            const timerTick = () => {
+                console.log("tick");
+                extractElapsedTime.value = performance.now() - extractStartTime.value;
+                timerTickInterval = requestAnimationFrame(timerTick);       
+            }
+            timerTickInterval = requestAnimationFrame(timerTick);
+
             extractProgress.value = 0;
             extractTotal.value = 1;
             extractErrors.value = [];
             showExtract.value = true;
             extracting.value = true;
             extractCancelled.value = false;
-            extractStartTime.value = Date.now();
+            extractStartTime.value = performance.now();
             let unlistenExtracted = await listen('extracted', () => {
                 extractProgress.value++;
             });
@@ -167,22 +195,32 @@ export const useStore = defineStore('main', () => {
                 console.error(e);
             }
             extracting.value = false;
-            extractFinishTime.value = Date.now();
             unlistenExtracted();
             unlistenExtractFail();
+            cancelAnimationFrame(timerTickInterval);
+            extractElapsedTime.value = performance.now() - extractStartTime.value;
         }
     }
 
     async function extractFiles(files: string[]) {
         let res = await open({ title: 'Select a output directory', directory: true, multiple: false })
         if (res !== null && typeof res == 'string') {
+            extractElapsedTime.value = 0;
+            let timerTickInterval;
+            const timerTick = () => {
+                console.log("tick");
+                extractElapsedTime.value = performance.now() - extractStartTime.value;
+                timerTickInterval = requestAnimationFrame(timerTick);       
+            }
+            timerTickInterval = requestAnimationFrame(timerTick);
+
             extractProgress.value = 0;
             extractTotal.value = files.length;
             extractErrors.value = [];
             showExtract.value = true;
             extracting.value = true;
             extractCancelled.value = false;
-            extractStartTime.value = Date.now();
+            extractStartTime.value = performance.now();
             let unlistenExtracted = await listen('extracted', () => {
                 extractProgress.value++;
             });
@@ -193,9 +231,10 @@ export const useStore = defineStore('main', () => {
             });
             await invoke('extract_files', { files, outDir: res });
             extracting.value = false;
-            extractFinishTime.value = Date.now();
             unlistenExtracted();
             unlistenExtractFail();
+            cancelAnimationFrame(timerTickInterval);
+            extractElapsedTime.value = performance.now() - extractStartTime.value;
         }
     }
 
@@ -208,6 +247,6 @@ export const useStore = defineStore('main', () => {
         vpkPath, loading, loaded, hasError, error, fileTree, fileList,
         loadFromPath, openVPK, memoryMap, showExtract, extracting, extractTotal, extractCancelled,
         numFiles, extractProgress, extractErrors, extractAll, extractDir, extractFile, extractFiles,
-        extractStartTime, extractFinishTime, cancelExtract,
+        extractStartTime, extractElapsedTime, cancelExtract,
     };
 })
\ No newline at end of file