working on last user info in jackpot

luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css

@@ -27,7 +27,8 @@
     /* margin-top: 2.6%; */
     /* margin: 2.6%; */
 }
-.jackpot-carousel{
+
+.jackpot-carousel {
     z-index: 1;
     position: relative;
     /* margin-left: 5%; */
@@ -42,13 +43,19 @@
     border: 1px solid #262C55;
     height: 95%;
 }
+
 .carousel-arrow {
     position: absolute;
-    bottom: -20px; /* Регулируйте положение стрелки относительно нижнего края карусели */
+    bottom: -20px;
-    left: 50%; /* Центрирование стрелки по горизонтали */
+    /* Регулируйте положение стрелки относительно нижнего края карусели */
-    transform: translateX(-50%); /* Дополнительное центрирование, чтобы точка указывала точно на центр */
+    left: 50%;
-    color: #ffffff; /* Цвет стрелки */
+    /* Центрирование стрелки по горизонтали */
-    font-size: 24px; /* Размер стрелки */
+    transform: translateX(-50%);
+    /* Дополнительное центрирование, чтобы точка указывала точно на центр */
+    color: #ffffff;
+    /* Цвет стрелки */
+    font-size: 24px;
+    /* Размер стрелки */
     /* Добавьте любые дополнительные стили, такие как цвет фона, границы и т.д. */
 }
 
@@ -109,11 +116,13 @@
     color: white;
     padding: 10px;
     border-radius: 5px;
-    font-family: Arial, sans-serif; /* Choose your font */
+    font-family: Arial, sans-serif;
+    /* Choose your font */
 }
 
 .shield img {
-    width: 35px; /* Adjust based on your shield size */
+    width: 35px;
+    /* Adjust based on your shield size */
     height: auto;
     margin-left: 10px;
 }
@@ -124,13 +133,33 @@
     text-align: left;
 }
 
+.jackpot-last-game-bar {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+    height: 100%;
+    /* margin-top: 2.6%; */
+    /* margin: 2.6%; */
+
+}
+
 .bank-value {
-    font-size: 24px; /* Large text size */
+    font-size: 24px;
-    font-weight: bold; /* Make the number bold */
+    /* Large text size */
+    font-weight: bold;
+    /* Make the number bold */
 }
 
 .bank-name {
-    font-size: 14px; /* Smaller text size for 'БАНК' */
+    font-size: 14px;
+    /* Smaller text size for 'БАНК' */
 }
 
 .progress-text {
@@ -140,7 +169,8 @@
 
 .progress-bar {
     width: 95%;
-    background-color: #D9D9D9; /* Navy blue background */
+    background-color: #D9D9D9;
+    /* Navy blue background */
     border-radius: 10px;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
     margin-left: 2vh;
@@ -149,13 +179,17 @@
 
 .progress {
     height: 40px;
-    background-color: #E13F3F; /* Red for the progress */
+    background-color: #E13F3F;
-    border-radius: 10px ; /* Rounded corners on the left side */
+    /* Red for the progress */
-    line-height: 40px; /* Same as height to vertically center text */
+    border-radius: 10px;
+    /* Rounded corners on the left side */
+    line-height: 40px;
+    /* Same as height to vertically center text */
     color: white;
     text-align: start;
     text-indent: 20px;
-    padding-right: 10px; /* Add some padding to the right of the text */
+    padding-right: 10px;
+    /* Add some padding to the right of the text */
     transition: width 0.25s ease-in-out;
 }
 

luckydiamond/src/pages/games-pages/JackpotPage.vue

@@ -122,14 +122,24 @@
                       :style="{ width: progressBarWidth + '%' }"
                     >
                       <span class="progress-text">{{
-                        remainingSeconds >= 0 ? remainingSeconds + " СЕК" : ""
+                        remainingSeconds >= 0 ? remainingSeconds + " " : ""
                       }}</span>
+                      <!-- remainingSeconds >= 0 ? remainingSeconds + " СЕК" : "" -->
                     </div>
                   </div>
                 </div>
               </div>
               <div class="col-md-2">
-                <div class="jackpot-loading-bar"></div>
+                <div class="jackpot-last-game-bar">
+                  <div class="bootstrap-wrapper">
+                    <div class="container">
+                      <div class="row">
+                        <div class="col-md-2">gfd</div>
+                        <div class="col-md-8">gfd</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
 
               <div class="col-md-12">
@@ -150,9 +160,6 @@
                       </div>
                     </Slide>
                   </Carousel>
-                  <button @click="stopCarousel">
-                    Остановить автопрокрутку
-                  </button>
                 </div>
               </div>
             </div>
@@ -295,11 +302,23 @@ export default {
           console.log("Game has ended");
         }, timeLeft);
       } else {
-        // Игра уже закончилась
-        // eventBus.emit("gameEnded"); // Транслируем событие окончания игры
         console.log("Game has already ended");
       }
     },
+    resetLoadingBar() {
+      const progressBarElement = document.querySelector(".progress");
+      if (progressBarElement) {
+        const progressText = progressBarElement.querySelector(".progress-text");
+        setTimeout(() => {
+          progressBarElement.style.width = `1%`; // Устанавливаем ширину в 1%
+          if (progressText) {
+            progressText.textContent = `0`; // Устанавливаем текст
+            // Если вы хотите изменить прозрачность текста, раскомментируйте следующую строку
+            // progressText.style.opacity = "1"; // Устанавливаем прозрачность текста
+          }
+        }, 1500);
+      }
+    },
     startAutoScroll() {
       this.interval = setInterval(() => {
         this.$refs.carousel.next();
@@ -311,6 +330,9 @@ export default {
 
         const startTime = new Date(startGameUtc).getTime();
         const updateTimer = () => {
+          if (this.timerInterval == null) {
+            return;
+          }
           const currentTime = new Date().getTime();
           const diff = startTime - currentTime;
           this.remainingSeconds = Math.max(0, Math.floor(diff / 1000));
@@ -320,12 +342,11 @@ export default {
             // Действия после окончания таймера, если необходимо
           } else {
             this.remainingSeconds = Math.floor(diff / 1000); // Обновляем оставшееся время в секундах
-            const totalDuration = 10; // Допустим, обратный отсчет идет с 60 секунд
+            const totalDuration = 10; // Допустим, обратный отсчет идет с 10 секунд1
             this.progressBarWidth =
               ((totalDuration - this.remainingSeconds) / totalDuration) * 100;
           }
 
-          // Обновление текста и ширины прогресс-бара
           const progressBarElement = document.querySelector(".progress");
           if (progressBarElement) {
             const progressText =
@@ -334,7 +355,11 @@ export default {
               progressText.style.opacity = "0";
               setTimeout(() => {
                 progressBarElement.style.width = `${this.progressBarWidth}%`;
-                progressText.textContent = `${this.remainingSeconds} СЕК`;
+                if (this.remainingSeconds > 8) {
+                  progressText.textContent = `${this.remainingSeconds}`;
+                } else {
+                  progressText.textContent = `${this.remainingSeconds} СЕК`;
+                }
                 progressText.style.opacity = "1";
               }, 500); // Задержка должна соответствовать продолжительности анимации
             }
@@ -349,7 +374,7 @@ export default {
     handleSlideStart(data) {
       try {
         let { slidingToIndex, currentSlideIndex } = data;
-        // Проверяем, существует ли слайд и имеет ли он свойство nickname
+
         if (
           this.slides[slidingToIndex] &&
           this.slides[slidingToIndex].nickname
@@ -364,6 +389,7 @@ export default {
               // this.$refs.carousel.slideTo(this.currentSlideIndex);
 
               // if (this.slides[this.currentSlideIndex].nickname == this.targetNickname) {
+
               this.stopAutoplay();
             }
           }
@@ -371,37 +397,15 @@ export default {
       } catch (error) {
         console.error("Error in handleSlideStart:", error);
       }
-      // try {
-      //   const { slidingToIndex } = data;
-      //   this.currentSlideIndex = slidingToIndex;
-      //   if (this.isStopButtonPressed) {
-      //     if (
-      //       this.slides[this.currentSlideIndex].nickname == this.targetNickname
-      //     ) {
-      //       this.stopAutoplay();
-      //     }
-      //   }
-      // } catch (error) {
-      //   console.error("Error in handleSlideStart:", error);
-      //   // Здесь вы можете обработать ошибку, например, остановить карусель
-      // }
-
-      // try {
-      //   const { slidingToIndex } = data;
-      //   this.currentSlideIndex = slidingToIndex;
-      //   if (this.isStopButtonPressed) {
-      //     if (this.slides[this.currentSlideIndex].nickname == "Hepatir") {
-      //       this.stopAutoplay();
-      //     }
-      //   }
-      // } catch (error) {
-      //   console.error("Error in handleSlideStart:", error);
-      //   // Здесь вы можете обработать ошибку, например, остановить карусель
-      // }
     },
     stopCarousel() {
       this.isStopButtonPressed = true;
       this.autoplay = 200;
+      setTimeout(() => {
+        if (this.isStopButtonPressed) {
+          this.autoplay = 500;
+        }
+      }, 1000);
     },
     stopAutoplay() {
       this.targetNickname = "";
@@ -411,6 +415,11 @@ export default {
       this.lastUserWinerGameId = " ";
       this.idCurrentGame = "";
       this.lastUserWinner = "";
+      this.resetLoadingBar();
+
+      clearInterval(this.timerInterval);
+
+      this.timerInterval = null;
     },
     changeLastFiveImages() {
       const newImage = "https://avatar.spworlds.ru/face/55/Hepatir.png";
@@ -442,7 +451,9 @@ export default {
               this.targetNickname = this.lastUserWinner;
               this.stopCarousel();
             }
-            // this.mapPlayersToSlides(dataObject.LastGame.PlayerList);
+            if (this.idCurrentGame == "") {
+              this.mapPlayersToSlides(dataObject.CurrentGame.PlayerList);
+            }
           }
           if (dataObject.CurrentGame.GameState == "StartGameTimer") {
             if (!this.isGameTimerStarted) {
@@ -455,10 +466,7 @@ export default {
 
           if (dataObject.CurrentGame.GameState == "Running") {
             this.autoplay = 20;
-            // this.checkGameEnd(dataObject.CurrentGame.EndGameUtc);
-            // this.idCurrentGame = dataObject.CurrentGame.Id;
           }
-          // Дальнейшая обработка dataObject...
         } else {
           // Если данные не определены или пусты, выводим соответствующее сообщение в консоль
           console.log("Received undefined or null data");