fix: carousel ?!

vr_club_site/templates/site/js/game-carousel.js

@@ -1,56 +1,66 @@
-const wrapper = document.querySelector(".wrapper");
 const carousel = document.querySelector(".carousel");
-const firstCardWidth = carousel.querySelector(".card").offsetWidth;
-const carouselChildrens = [...carousel.children];
+const firstCard = carousel.querySelector(".card");
+const cardWidth = firstCard.offsetWidth;
+const cardMarginRight = parseInt(window.getComputedStyle(firstCard).marginRight);
 
-let isDragging = false, startX, startScrollLeft, timeoutId;
+let isDragging = false;
+let startX, startScrollLeft;
 
-let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);
+const calculateCardPerView = () => {
+    return Math.round(carousel.offsetWidth / (cardWidth + cardMarginRight));
+};
 
-carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
-    carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
-});
-
-carouselChildrens.slice(0, cardPerView).forEach(card => {
-    carousel.insertAdjacentHTML("beforeend", card.outerHTML);
-});
-
-carousel.classList.add("no-transition");
-carousel.scrollLeft = carousel.offsetWidth;
-carousel.classList.remove("no-transition");
+const addCloneCards = () => {
+    const cardPerView = calculateCardPerView();
+    const allCards = [...carousel.querySelectorAll(".card")];
+    allCards.slice(-cardPerView).forEach((card) => {
+        carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
+    });
+    allCards.slice(0, cardPerView).forEach((card) => {
+        carousel.insertAdjacentHTML("beforeend", card.outerHTML);
+    });
+};
 
 const dragStart = (e) => {
     isDragging = true;
     carousel.classList.add("dragging");
-    startX = e.pageX;
+    startX = e.pageX - carousel.offsetLeft;
     startScrollLeft = carousel.scrollLeft;
-}
+};
 
 const dragging = (e) => {
     if (!isDragging) return;
-    carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
-}
+    const x = e.pageX - carousel.offsetLeft;
+    const walk = (x - startX) * 2;
+    carousel.scrollLeft = startScrollLeft - walk;
+};
 
 const dragStop = () => {
     isDragging = false;
     carousel.classList.remove("dragging");
-}
+};
 
 const infiniteScroll = () => {
-    if (carousel.scrollLeft === 0) {
-        carousel.classList.add("no-transition");
-        carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);
-        carousel.classList.remove("no-transition");
-    }
-    else if (Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {
-        carousel.classList.add("no-transition");
-        carousel.scrollLeft = carousel.offsetWidth;
-        carousel.classList.remove("no-transition");
+    if (carousel.scrollLeft <= 0) {
+        carousel.scrollLeft = carousel.scrollWidth - carousel.offsetWidth;
+    } else if (carousel.scrollLeft >= carousel.scrollWidth - carousel.offsetWidth) {
+        carousel.scrollLeft = 0;
     }
-
-}
+};
 
 carousel.addEventListener("mousedown", dragStart);
-carousel.addEventListener("mousemove", dragging);
+document.addEventListener("mousemove", dragging);
 document.addEventListener("mouseup", dragStop);
 carousel.addEventListener("scroll", infiniteScroll);
+
+window.addEventListener("resize", () => {
+    const cardPerView = calculateCardPerView();
+    if (cardPerView !== Math.round(carousel.offsetWidth / (cardWidth + cardMarginRight))) {
+        carousel.innerHTML = ""; // Clear carousel
+        addCloneCards();
+        carousel.scrollLeft = carousel.offsetWidth;
+    }
+});
+
+addCloneCards();
+carousel.scrollLeft = carousel.offsetWidth;