From 42bf8c11b4d67eaee5401c8d9a528d8500a0a749 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 17 Dec 2024 15:29:26 +0100
Subject: [PATCH] #56 - handle compare track count

---
 .../project/virtual-sample/DynamicView.vue    | 38 ++++++++++++++-----
 1 file changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/project/virtual-sample/DynamicView.vue b/src/components/project/virtual-sample/DynamicView.vue
index 86ec300..efa8b9d 100644
--- a/src/components/project/virtual-sample/DynamicView.vue
+++ b/src/components/project/virtual-sample/DynamicView.vue
@@ -18,7 +18,11 @@
         :class="{ 'btn--secondary': isCompareModeEnabled }"
         @click="isCompareModeEnabled = !isCompareModeEnabled"
       >
-        <span>{{ isCompareModeEnabled ? 'Quitter le mode comparer' : 'Comparer les pistes' }}</span>
+        <span>{{
+          isCompareModeEnabled
+            ? "Quitter le mode comparer"
+            : "Comparer les pistes"
+        }}</span>
       </button>
     </header>
 
@@ -32,7 +36,10 @@
           <img :src="activeTrack.files[0].url" alt="" />
         </figure>
       </template>
-      <div v-if="isCompareModeEnabled && activeTracks.length < 2" class="track-empty | bg-white rounded-xl w-full p-32">
+      <div
+        v-if="isCompareModeEnabled && activeTracks.length < 2"
+        class="track-empty | bg-white rounded-xl w-full p-32"
+      >
         <p>Cliquez sur la piste que vous souhaitez comparer</p>
       </div>
     </div>
@@ -52,7 +59,7 @@ const tracks = computed(
 
 const isCompareModeEnabled = ref(false);
 watch(isCompareModeEnabled, (newValue) => {
-  if (!newValue) {
+  if (!newValue && activeTracks.value.length === 2) {
     activeTracks.value.pop();
   }
 });
@@ -68,18 +75,31 @@ function getFrontViewUrl(track) {
 }
 
 function selectTrack(track) {
-  if (isCompareModeEnabled.value) {
+  if (!isCompareModeEnabled.value) {
+    activeTracks.value = [track];
+    return;
+  }
+
+  if (activeTracks.value.length === 1 && !activeTracks.value.includes(track)) {
+    activeTracks.value.push(track);
+    return;
+  }
+
+  if (activeTracks.value.length === 2) {
     if (activeTracks.value.includes(track)) {
-      activeTracks.value = activeTracks.value.filter(
-        (item) => item.title !== track.title
-      );
+      removeTrack(track);
     } else {
+      activeTracks.value.shift();
       activeTracks.value.push(track);
     }
-  } else {
-    activeTracks.value = [track];
   }
 }
+
+function removeTrack(track) {
+  activeTracks.value = activeTracks.value.filter(
+    (activeTrack) => activeTrack.title !== track.title
+  );
+}
 </script>
 
 <style>