timer store

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

front/src/stores/raw_data.ts

@@ -1,8 +0,0 @@
-import { defineStore } from 'pinia'
-export const useRawData = defineStore('raw_data', {
-    state: () => {
-        return {
-            
-        } 
-    },
-})

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,