timers

front/src/components/Promo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive, ref, watch } from 'vue';
 import type { Ref } from 'vue'
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import { Vector3 } from 'three';
 import { TresCanvas } from '@tresjs/core';
@@ -50,6 +50,7 @@ const controlsState = reactive({
 
 const raw_dataStore = useRawData()
 const route = useRoute()
+const router = useRouter()
 const sidebarScene = usePromoScene()
 
 watch(() => route.params.target, sidebar.close)
@@ -91,7 +92,7 @@ const nextClickableId = () => {
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Stats />
                 <Suspense>
-                    <LoadModels :source="route.params.target" :loaded_pan="loadedPan" />
+                    <LoadModels :source="route.params.target" :loaded_pan="loadedPan" :push="router.push" />
                 </Suspense>
             </TresCanvas>
             <div class="itemnav" v-if="sidebar.is_open">

front/src/components/Promo/load_models.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, Ref, ref, watch } from 'vue';
+import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import {
-    Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry,
-    MeshStandardMaterial, MeshStandardMaterialParameters,
+    Box3, Color, Group, Mesh,
+    MeshStandardMaterial, MeshBasicMaterial,
     Vector2, Vector3,
-    CircleGeometry, MeshBasicMaterial,
     Quaternion, AdditiveBlending,
-    Euler,
-    SRGBColorSpace,
-    RingGeometry,
+    Euler, SRGBColorSpace, RingGeometry,
 } from 'three';
 
 import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
@@ -25,8 +22,10 @@ import { useLoading } from '../../stores/loading';
 import { mobileAndTabletCheck } from '../../helpers';
 import { useTimer } from '../../stores/timer';
 import { useRawData } from '../../stores/raw_data';
+import { useTimerHome } from '../../stores/timer_home';
+import { useItem } from '../../stores/item';
 
-const props = defineProps(['source', 'loaded_pan'])
+const props = defineProps(['source', 'loaded_pan', 'push'])
 
 const models = ref<model3DType[]>([])
 const clickable_items = ref<any[]>([])
@@ -53,7 +52,8 @@ const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
 const clickable = useClickable()
 const loading_store = useLoading()
-const raw_dataStore = useRawData()
+const raw_dataStore = useRawData();
+const itemStore = useItem();
 
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { seekByName, seekAllByName } = useSeek()
@@ -340,7 +340,7 @@ onAfterRender(() => {
     ]
     smoothy.forEach(element => {
         if (element.el.value) {
-            timer.stopTimer();
+            timer.resetTimer();
             element.f()
             element.el.count -= 1
             if (element.el.count == 0) {
@@ -362,15 +362,25 @@ timer.timer_func = () => {
         sidebar.close();
         (controls.value as any).autoRotate = true;
         (controls.value as any).autoRotateSpeed = 0.5;
+        
+        timer.startTimer()
+        home_timer.startTimer()
     }
 }
 
 const stopTimer = () => {
     timer.resetTimer()
+    home_timer.stopTimer()
     if ((controls.value as any).autoRotate) {
         (controls.value as any).autoRotate = false
     }
 }
+const home_timer = useTimerHome()
+home_timer.timer_func = () => {
+    if (itemStore.page.scene_3d !== raw_dataStore.data.id) {
+        props.push(`/${itemStore.page.slug}/${itemStore.page.scene_3d}`)
+    }
+}
 
 const pointer = reactive({ x: 0, y: 0 })
 const clickEvent = (event: MouseEvent) => {

front/src/stores/timer.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+
 const BASE_TIMER = 10
 interface state {
     timer_el: any,
@@ -26,7 +27,6 @@ export const useTimer = defineStore('timer', {
             clearInterval(this.timer_el)
             if (this.timer_func) {
                 this.timer_func()
-                this.startTimer()
             }
         },
         resetTimer() {

front/src/stores/timer_home.ts

@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+const BASE_TIMER = 30
+interface state {
+    timer_el: any,
+    timer_func: any,
+    is_enabled: boolean,
+    seconds_left: number
+}
+export const useTimerHome = defineStore('timer_home', {
+    state: () => {
+        return {
+            timer_el: undefined,
+            timer_func: undefined,
+            is_enabled: false,
+            seconds_left: BASE_TIMER
+        } as state
+    },
+    actions: {
+        startTimer() {
+            this.is_enabled = true
+            this.resetTimer()
+            this.timer_el = this.countdownTimer()
+        },
+        stopTimer() {
+            this.is_enabled = false
+            clearInterval(this.timer_el)
+            if (this.timer_func) {
+                this.timer_func()
+            }
+        },
+        resetTimer() {
+            this.seconds_left = BASE_TIMER
+        },
+        setTimer(time: number) {
+            this.seconds_left = time
+        },
+        countdownTimer() {
+            const id = setInterval(() => {
+                if (this.is_enabled && this.seconds_left > 0) {
+                    this.seconds_left -= 1
+                    // this.countdownTimer()
+                }
+                if (this.is_enabled && this.seconds_left == 0) {
+                    this.stopTimer()
+                }
+            }, 1000)
+            return id
+        },
+    }
+})