From 5e092261674a1453c32d92b8101734e283e79492 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 25 Sep 2023 10:48:56 +0200
Subject: [PATCH] wip #6182 @0:10 question match

---
 js/quiz.match.js              | 65 +++++++++++++++++------------------
 style/107-question-match.sass |  2 +-
 2 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/js/quiz.match.js b/js/quiz.match.js
index 9f72e69..22c8e9d 100644
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@ -59,59 +59,58 @@ QuizMatch.prototype = {
             },
             on: {
                 slideChange: function(swiper) {
-                    //$this.setClass()
+                    $this.setRotation(swiper)
                 },
                 progress: function(swiper, progress) {
-                    console.log(swiper)
-
-                    const slides = swiper.slides
-                    let activeIndex = swiper.activeIndex
-                    let nextAllArray = swiper.slides.slice(activeIndex+1)
-                    let prevAllArray = swiper.slides.slice(0,activeIndex)
-
-
-                    console.log(nextAllArray)
-                    //console.log(prevAllArray)
-                    let angle = 4
-
-                    if(swiper.swipeDirection === "next") {
-                        angle -= 4
-                    }
-
-                    if(nextAllArray.length > 0) {
-                        let angle = 4
-                        nextAllArray.forEach(function(el,index) {
-                            console.log("progress",el.progress,progress)
-
-                            $(el).css({
-                                'transform':'rotate('+(angle)+'deg)',
-                                'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0,
-                            })
-                            angle += 4
-
-                        })
-                    }
-
+                    $this.setRotation(swiper)
                 }
             }
         })
 
     },
 
-    /*setRotation: function(swiper) {
+    setRotation: function(swiper) {
+        const $this = this
+        const slides = swiper.slides
         let activeIndex = swiper.activeIndex
         let nextAllArray = swiper.slides.slice(activeIndex+1)
+        let prevAllArray = swiper.slides.slice(0,activeIndex)
+
+
+        console.log(nextAllArray)
+        //console.log(prevAllArray)
         let angle = 4
+
+        if(swiper.swipeDirection === "next") {
+            angle -= 4
+        }
+
+        if(prevAllArray.length > 0) {
+            let angle = -4
+            prevAllArray.reverse().forEach(function(el,index) {
+
+                $(el).css({
+                    'transform':'rotate('+(angle)+'deg)',
+                    'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0,
+                })
+                angle -= 4
+
+            })
+        }
+
         if(nextAllArray.length > 0) {
+            let angle = 4
             nextAllArray.forEach(function(el,index) {
+
                 $(el).css({
                     'transform':'rotate('+(angle)+'deg)',
                     'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0,
                 })
                 angle += 4
+
             })
         }
-    },*/
+    },
 
     confirmTheMatch: function() {
         let lastIndex = this.swiperTop.slides.length - 1
diff --git a/style/107-question-match.sass b/style/107-question-match.sass
index 155b7a0..57d0bf3 100644
--- a/style/107-question-match.sass
+++ b/style/107-question-match.sass
@@ -22,7 +22,7 @@
             height: 158px
             +radius(16px)
             padding: 15px
-            transition: transform .3s
+            transition: all .3s
             &-active
                 background-color: $neutral-color
                 border: 2px solid $texts-color
-- 
2.39.5