From 5ffafa1b48daa4ad8233774a2d8188b15e7c709a Mon Sep 17 00:00:00 2001
From: aarizona <ar.ariz.arizona@gmail.com>
Date: Wed, 28 Aug 2024 09:19:39 +0300
Subject: [PATCH] timer store

---
 front/src/components/Promo/load_models.vue | 73 ++++++++++------------
 front/src/stores/raw_data.ts               |  8 ---
 front/src/stores/timer.ts                  |  2 +-
 3 files changed, 34 insertions(+), 49 deletions(-)
 delete mode 100644 front/src/stores/raw_data.ts

diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue
index 4bd4932..fdd66b8 100644
--- a/front/src/components/Promo/load_models.vue
+++ b/front/src/components/Promo/load_models.vue
@@ -18,6 +18,7 @@ import { usePromoScene } from '../../stores/promo_scene';
 import { useClickable } from '../../stores/clickable';
 import { useLoading } from '../../stores/loading';
 import { mobileAndTabletCheck } from '../../helpers';
+import { useTimer } from '../../stores/timer';
 
 const props = defineProps(['source', 'loaded', 'loaded_pan'])
 
@@ -43,26 +44,6 @@ const pointerTexture = await useTexture({
     map: '/pointer_texture.png'
 })
 
-const timer = ref(10)
-setInterval(() => {
-    if (timer.value > 0) {
-        timer.value -= 1
-    } else if (timer.value == 0 && !(controls.value as any).autoRotate && (controls.value as any).enabled) {
-        pause()
-        if (controls.value && camera.value) {
-            camera.value?.position.set(
-                (controls.value as any).maxDistance * 0.5,
-                (controls.value as any).maxDistance * 0.5,
-                (controls.value as any).maxDistance * 0.5
-            );
-            (controls.value as any).target = new Vector3(0, 0, 0);
-            (controls.value as any).autoRotate = true;
-            (controls.value as any).autoRotateSpeed = 0.5;
-        }
-        resume()
-    }
-}, 1000);
-
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
     const raw_data = await res.json() as scene3D
@@ -231,7 +212,7 @@ const loadModels = async () => {
     controls.value.enabled = true;
     props.loaded(false)
 
-    timer.value = 10
+    timer.startTimer()
     if (controls.value && (controls.value as any).autoRotate) {
         (controls.value as any).autoRotate = false;
     }
@@ -245,7 +226,7 @@ onAfterRender(() => {
         }
     })
     if (controls.value) {
-        if (timer.value == 0) {
+        if (timer.seconds_left == 0) {
             (controls.value as any).update();
         }
     }
@@ -294,16 +275,13 @@ watch(() => sidebar, () => {
         }
     }
 }, { deep: true })
-
+const timerEvent = ['click', 'contextmenu', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'touchmove']
 onMounted(() => {
     document.addEventListener('click', clickEvent)
 
-    document.addEventListener('click', stopTimer)
-    document.addEventListener('contextmenu', stopTimer)
-
-    document.addEventListener('touchstart', stopTimer)
-    document.addEventListener('touchend', stopTimer)
-    document.addEventListener('touchmove', stopTimer)
+    timerEvent.map((event: string) => {
+        document.addEventListener(event, stopTimer)
+    })
 
     if (sidebar.is_open) {
         sidebar.close()
@@ -311,21 +289,36 @@ onMounted(() => {
 })
 onUnmounted(() => {
     document.removeEventListener('click', clickEvent)
-
-    document.removeEventListener('click', stopTimer)
-    document.removeEventListener('contextmenu', stopTimer)
-
-    document.removeEventListener('touchstart', stopTimer)
-    document.removeEventListener('touchend', stopTimer)
-    document.removeEventListener('touchmove', stopTimer)
+    timerEvent.map((event: string) => {
+        document.removeEventListener(event, stopTimer)
+    })
 })
 const pointer = reactive({ x: 0, y: 0 })
-const stopTimer = () => {
-    timer.value = 10;
-    if (controls.value && (controls.value as any).autoRotate) {
-        (controls.value as any).autoRotate = false;
+
+const timer = useTimer()
+timer.timer_func = () => {
+    if (timer.seconds_left == 0 && !(controls.value as any).autoRotate && (controls.value as any).enabled) {
+        pause()
+        if (controls.value && camera.value) {
+            camera.value?.position.set(
+                (controls.value as any).maxDistance * 0.5,
+                (controls.value as any).maxDistance * 0.5,
+                (controls.value as any).maxDistance * 0.5
+            );
+            (controls.value as any).target = new Vector3(0, 0, 0);
+            (controls.value as any).autoRotate = true;
+            (controls.value as any).autoRotateSpeed = 0.5;
+        }
+        resume()
     }
 }
+const stopTimer = () => {
+    timer.resetTimer()
+    if ((controls.value as any).autoRotate) {
+        (controls.value as any).autoRotate = false
+    }
+}
+
 const clickEvent = (event: MouseEvent) => {
     const x = (event.clientX / window.innerWidth) * 2 - 1
     const y = - (event.clientY / window.innerHeight) * 2 + 1
diff --git a/front/src/stores/raw_data.ts b/front/src/stores/raw_data.ts
deleted file mode 100644
index 94977ef..0000000
--- a/front/src/stores/raw_data.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { defineStore } from 'pinia'
-export const useRawData = defineStore('raw_data', {
-    state: () => {
-        return {
-            
-        } 
-    },
-})
diff --git a/front/src/stores/timer.ts b/front/src/stores/timer.ts
index c791c25..454e3e8 100644
--- a/front/src/stores/timer.ts
+++ b/front/src/stores/timer.ts
@@ -6,7 +6,7 @@ interface state {
     is_enabled: boolean,
     seconds_left: number
 }
-export const useLoading = defineStore('loading', {
+export const useTimer = defineStore('timer', {
     state: () => {
         return {
             timer_el: undefined,