working on last user info in jackpot

2025-12-10 04:09:29 +02:00 · 2024-02-25 01:32:28 +01:00
parent 1f17828c52
commit 08b79fbe63
3 changed files with 115 additions and 59 deletions
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
+++ b/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; /* Регулируйте положение стрелки относительно нижнего края карусели */
-    left: 50%; /* Центрирование стрелки по горизонтали */
-    transform: translateX(-50%); /* Дополнительное центрирование, чтобы точка указывала точно на центр */
-    color: #ffffff; /* Цвет стрелки */
-    font-size: 24px; /* Размер стрелки */
+    bottom: -20px;
+    /* Регулируйте положение стрелки относительно нижнего края карусели */
+    left: 50%;
+    /* Центрирование стрелки по горизонтали */
+    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-weight: bold; /* Make the number bold */
+    font-size: 24px;
+    /* 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 */
-    border-radius: 10px ; /* Rounded corners on the left side */
-    line-height: 40px; /* Same as height to vertically center text */
+    background-color: #E13F3F;
+    /* Red for the progress */
+    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-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;
 }

--- a/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg
+++ b/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg
--- a/luckydiamond/src/pages/games-pages/JackpotPage.vue
+++ b/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");