From 64af50816bda6bfc6430f1e2a0c2992dbd404bfb Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 16 Dec 2024 16:27:21 +0100
Subject: [PATCH] fix #37

---
 .../project/virtual-sample/Interactive360.vue | 24 +++++++++++++++++++
 .../project/virtual-sample/VirtualSample.vue  |  5 +++-
 src/stores/virtualSample.js                   |  3 ++-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/components/project/virtual-sample/Interactive360.vue b/src/components/project/virtual-sample/Interactive360.vue
index 1dce408..9ec52fe 100644
--- a/src/components/project/virtual-sample/Interactive360.vue
+++ b/src/components/project/virtual-sample/Interactive360.vue
@@ -9,6 +9,7 @@
 import throttle from "lodash/throttle";
 import { ref, computed, watch } from "vue";
 import { useVirtualSampleStore } from "../../../stores/virtualSample";
+import { storeToRefs } from "pinia";
 
 const { activeTrack } = defineProps({
   activeTrack: Object,
@@ -111,4 +112,27 @@ watch(isDragToRotateEnabled, (newValue) => {
     previousMouseYPos = undefined;
   }
 });
+
+const { isLoopAnimationEnabled } = storeToRefs(useVirtualSampleStore());
+
+function loopAnimation() {
+  rotateX("right");
+
+  if (currentX.value < xMax.value / 2) {
+    if (currentY.value < yMax.value - 1) currentY.value++;
+  } else {
+    if (currentY.value > 0) currentY.value--;
+  }
+}
+
+let animationIntervalId;
+watch(isLoopAnimationEnabled, (newValue) => {
+  if (newValue) {
+    currentX.value = 0;
+    currentY.value = 0;
+    animationIntervalId = setInterval(loopAnimation, 300);
+  } else {
+    clearInterval(animationIntervalId);
+  }
+});
 </script>
diff --git a/src/components/project/virtual-sample/VirtualSample.vue b/src/components/project/virtual-sample/VirtualSample.vue
index 1786913..45e3bcf 100644
--- a/src/components/project/virtual-sample/VirtualSample.vue
+++ b/src/components/project/virtual-sample/VirtualSample.vue
@@ -60,6 +60,7 @@
         id="loop-animation"
         class="btn btn--transparent btn--outline"
         data-icon="loop"
+        @click="isLoopAnimationEnabled = !isLoopAnimationEnabled"
       >
         <span>Animation en boucle</span>
       </button>
@@ -91,7 +92,9 @@ const { file } = defineProps({
   file: Object,
 });
 
-const { activeTab, currentFile, step } = storeToRefs(useVirtualSampleStore());
+const { activeTab, currentFile, step, isLoopAnimationEnabled } = storeToRefs(
+  useVirtualSampleStore()
+);
 const { isCommentsOpen } = storeToRefs(useDialogStore());
 
 // Variables
diff --git a/src/stores/virtualSample.js b/src/stores/virtualSample.js
index da497bc..1837da0 100644
--- a/src/stores/virtualSample.js
+++ b/src/stores/virtualSample.js
@@ -5,11 +5,12 @@ import { usePageStore } from "./page";
 export const useVirtualSampleStore = defineStore("virtual-sample", () => {
   const activeTab = ref("dynamic");
   const currentFile = ref(null);
+  const isLoopAnimationEnabled = ref(false);
 
   const { page } = usePageStore();
   const step = page.steps.find((step) => step.id === "virtualSample");
 
   watch(activeTab, () => (currentFile.value = null));
 
-  return { activeTab, currentFile, step };
+  return { activeTab, currentFile, step, isLoopAnimationEnabled };
 });