diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
index cc768c2..2b42083 100644
--- 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;
}
diff --git a/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg b/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg
new file mode 100644
index 0000000..5696a78
--- /dev/null
+++ b/luckydiamond/src/assets/icons-gamemodes/last-game-icon.svg
@@ -0,0 +1,14 @@
+
diff --git a/luckydiamond/src/pages/games-pages/JackpotPage.vue b/luckydiamond/src/pages/games-pages/JackpotPage.vue
index b3aa058..b302367 100644
--- a/luckydiamond/src/pages/games-pages/JackpotPage.vue
+++ b/luckydiamond/src/pages/games-pages/JackpotPage.vue
@@ -122,14 +122,24 @@
:style="{ width: progressBarWidth + '%' }"
>
{{
- remainingSeconds >= 0 ? remainingSeconds + " СЕК" : ""
+ remainingSeconds >= 0 ? remainingSeconds + " " : ""
}}
+
@@ -150,9 +160,6 @@
-
@@ -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");