From b778721ba85574f501444cff98316930ec74d1ba Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Sun, 7 Apr 2024 04:12:43 +0200
Subject: [PATCH] add animation for double

---
 .../css/PagesStyles/games-pages/double.css    | 24 +++++++++++++++---
 .../src/pages/games-pages/DoublePage.vue      | 25 ++++++++++++++++---
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
index ecd43d5..05bd2f2 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
@@ -28,14 +28,16 @@
     transform: scale(0.95);
     /* Уменьшение при нажатии */
 }
+
 .bet-button.active {
-    opacity: 0.7; /* Пример изменения стиля активной кнопки */
-  }
+    opacity: 0.7;
+    /* Пример изменения стиля активной кнопки */
+}
 
 /* Можно добавить тени для кнопок, чтобы они выглядели объемнее */
 .bet-button {
     margin: 1.2% 0 0 5.8%;
-    margin-bottom:1vh;
+    margin-bottom: 1vh;
     box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
 }
 
@@ -287,6 +289,22 @@
     font-size: 24px;
 }
 
+.double-carousel-arrow-animate {
+    animation: blink 1s infinite;
+}
+
+@keyframes blink {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+}
+
 .double-carousel-arrow-upper {
     position: absolute;
     top: -3vh;
diff --git a/luckydiamond/src/pages/games-pages/DoublePage.vue b/luckydiamond/src/pages/games-pages/DoublePage.vue
index 4d21953..83ddcb4 100644
--- a/luckydiamond/src/pages/games-pages/DoublePage.vue
+++ b/luckydiamond/src/pages/games-pages/DoublePage.vue
@@ -87,8 +87,8 @@
             <div class="row">
               <div class="col-md-12 double-game-main-box">
                 <div class="double-carousel">
-                  <div class="double-carousel-arrow">▲</div>
-                  <div class="double-carousel-arrow-upper">▲</div>
+                  <div class="double-carousel-arrow" id="arrow">▲</div>
+                  <div class="double-carousel-arrow-upper" id="arrow-upper">▲</div>
                   <Carousel
                     ref="carousel"
                     :wrapAround="true"
@@ -429,7 +429,8 @@ export default {
 
       eventBus.on("doubleGame", (dataDouble) => {
         const dataDoubleParse = JSON.parse(dataDouble);
-
+        addClassById('arrow', 'double-carousel-arrow-animate');
+        addClassById('arrow-upper', 'double-carousel-arrow-animate');
         if (dataDoubleParse.Players.length > 0) {
           processUsersInGame(dataDoubleParse.Players);
         }
@@ -437,11 +438,16 @@ export default {
           if (dataDoubleParse.Status == "InGame") {
             autoPlay.value = 20;
             targetColor.value = dataDoubleParse.WInColor;
+            removeClassById('arrow', 'double-carousel-arrow-animate');
+            removeClassById('arrow-upper', 'double-carousel-arrow-animate');
           }
           if (dataDoubleParse.Status == "GameEnd") {
             targetColor.value = dataDoubleParse.WInColor;
             endGame.value = true;
             autoPlay.value = 150;
+            removeClassById('arrow', 'double-carousel-arrow-animate');
+            removeClassById('arrow-upper', 'double-carousel-arrow-animate');
+
 
             addWinEffectTouUsers(
               dataDoubleParse.Players,
@@ -451,6 +457,19 @@ export default {
         }
       });
     });
+    function addClassById(id, className) {
+      const element = document.getElementById(id);
+      if (element) {
+        element.classList.add(className);
+      }
+    }
+
+    function removeClassById(id, className) {
+      const element = document.getElementById(id);
+      if (element) {
+        element.classList.remove(className);
+      }
+    }
 
     function addWinEffectTouUsers(usersArray, winColor) {
       usersArray.forEach((user) => {