yawaflua/LuckyDiamond
1
0
Fork 0
mirror of https://github.com/yawaflua/LuckyDiamond.git synced 2025-12-10 12:19:31 +02:00
Code Issues Packages Projects Releases Wiki Activity

Working on jackpot

Browse Source
This commit is contained in:
Hepatica
2024-02-24 00:26:39 +01:00
parent 9b4be986f5
commit 921048c969
6 changed files with 272 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
View File

@@ -133,6 +133,11 @@
font-size: 14px; /* Smaller text size for 'БАНК' */
}
.progress-text {
transition: opacity 0.5s ease;
opacity: 1;
}
.progress-bar {
width: 95%;
background-color: #D9D9D9; /* Navy blue background */

6
luckydiamond/src/assets/js/chat/ChatLogic.js
View File

@@ -8,6 +8,12 @@ let webSocket;
export function ConnectToChat() {
try {
if (webSocket && webSocket.readyState === WebSocket.OPEN) {
console.log('WebSocket connection already established.');
return;
}
webSocket = new WebSocket(BackendWebSocketUrl);
webSocket.onopen = function () {

55
luckydiamond/src/assets/js/jackpot/JackpotLogic.js Normal file
View File

@@ -0,0 +1,55 @@
import { BackendWebSocketJackpotUrl } from '@/properties/Сonfig.js';
import { eventBus } from "@/main";
// import {
// GetCookie
// } from "@/assets/js/storage/CookieStorage.js";
let webSocket;
export function ConnectToJackpotSocket() {
try {
if (webSocket && webSocket.readyState === WebSocket.OPEN) {
console.log('WebSocket connection already established.');
return;
}
webSocket = new WebSocket(BackendWebSocketJackpotUrl);
webSocket.onopen = function () {
console.log('Connection established');
};
webSocket.onmessage = function (event) {
// const dataObject = JSON.parse(event.data);
eventBus.emit('jackpotGameTik', event.data);
// console.log(dataObject)
// if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
// eventBus.emit('dataChat', event.data);
// console.log('CHAT')
// }
// else {
// eventBus.emit('crash', event.data)
// }
};
webSocket.onclose = function () {
webSocket = new WebSocket(BackendWebSocketJackpotUrl);
console.log('Connection closed and reconnected');
};
webSocket.onerror = function (event) {
webSocket = new WebSocket(BackendWebSocketJackpotUrl);
console.error('WebSocket Error:', event);
};
} catch (error) {
console.error('Error in ConnectToChat:', error);
}
}

4
luckydiamond/src/components/DevelopComponent.vue
View File

@@ -55,7 +55,7 @@
<div class="Ckutls__card">
<div class="Ckutls__text_2">
<div class="Ckutls__aboutinfo_2">
<p>Бэкендер</p>
<p>Фронтэндер</p>
<h1>Ckutls_</h1>
</div>
<div class="Ckutls__whatjob_1">
@@ -130,7 +130,7 @@
<div class="busha888_card">
<div class="text">
<div class="aboutinfo">
<p>фронтэндер</p>
<p>Фронтэндер</p>
<h1>busha888</h1>
</div>
<div class="whatjob">

221
luckydiamond/src/pages/games-pages/JackpotPage.vue
View File

@@ -117,10 +117,16 @@
</div>
<div class="progress-bar">
<div class="progress" style="width: 70%">15.00 СЕК</div>
<div
class="progress"
:style="{ width: progressBarWidth + '%' }"
>
<span class="progress-text">{{
remainingSeconds >= 0 ? remainingSeconds + " СЕК" : ""
}}</span>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="jackpot-loading-bar"></div>
@@ -130,21 +136,23 @@
<div class="jackpot-carousel">
<div class="carousel-arrow">▲</div>
<Carousel
@slide-start="handleSlideStart"
ref="carousel"
:itemsToShow="15"
:itemsToShow="10"
:autoplay="autoplay"
:transition="150"
:wrapAround="true"
:transition="400"
class="no-pointer-events"
>
<Slide v-for="slide in 10" :key="slide">
<Slide v-for="(slide, index) in slides" :key="index">
<div class="carousel__item">
<img
src="https://avatar.spworlds.ru/face/55/Hepatir.png"
alt="Голова"
/>
<img :src="slide.img" alt="Голова" />
</div>
</Slide>
</Carousel>
<!-- <button @click="stopCarousel">
Остановить автопрокрутку
</button> -->
</div>
</div>
</div>
@@ -175,10 +183,14 @@ import "@/assets/css/PagesStyles/games-pages/jackpot.css";
import "@/assets/css/global.css";
import JackpotNumbers from "@/mocks/JackpotNumbers";
import { ConnectToJackpotSocket } from "@/assets/js/jackpot/JackpotLogic.js";
import { Carousel, Slide } from "vue3-carousel";
import "vue3-carousel/dist/carousel.css";
import { eventBus } from "@/main";
// import ProgressBar from "vue-bulma-progress-bar";
// import '@/assets/css/PagesStyles/games-pages/jackpot.css'
@@ -192,32 +204,203 @@ export default {
// Pagination
// ProgressBar,
},
inject: ["eventBus"],
data() {
return {
JackpotNumbers,
// clickedBtn: null,
// ErrorClick: false,
// ErrorJoin: false,
// balance: 0,
autoplay: 0,
slides: [
{
img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
nickname: "Ckutls_",
},
{
img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
nickname: "Ckutls_",
},
{
img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
nickname: "Ckutls_",
},
{
img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
nickname: "Ckutls_",
},
{
img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
nickname: "Ckutls_",
},
{
img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
nickname: "Ckutls_",
},
{
img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
nickname: "Hepatir",
},
],
currentSlide: 0,
value: 0,
max: 100,
amountDeposit: 0,
// crashObject: '',
// textError: '',
// startGame: false,
// offBtn: false
isCarouselStopped: false,
targetNickname: "",
isStopButtonPressed: false,
isGameTimerStarted: false,
remainingSeconds: 0,
progressBarWidth: 0,
// idCurrentGame: "",
lastUserWinner: "",
// lastIdGame: "",
};
},
methods: {
checkGameEnd(endGameUtc) {
const endTime = new Date(endGameUtc).getTime();
const currentTime = new Date().getTime();
const timeLeft = endTime - currentTime;
if (timeLeft > 0) {
// Устанавливаем таймер, который сработает, когда игра должна закончиться
setTimeout(() => {
eventBus.emit("gameEnded"); // Транслируем событие окончания игры
console.log("Game has ended");
}, timeLeft);
} else {
// Игра уже закончилась
// eventBus.emit("gameEnded"); // Транслируем событие окончания игры
console.log("Game has already ended");
}
},
startAutoScroll() {
this.interval = setInterval(() => {
this.$refs.carousel.next();
}, 1);
},
startGameTimer(startGameUtc) {
if (!this.isGameTimerStarted) {
this.isGameTimerStarted = true;
const startTime = new Date(startGameUtc).getTime();
const updateTimer = () => {
const currentTime = new Date().getTime();
const diff = startTime - currentTime;
this.remainingSeconds = Math.max(0, Math.floor(diff / 1000));
if (diff <= 0) {
this.remainingSeconds = 0;
this.progressBarWidth = 100; // Полный прогресс
clearInterval(this.timerInterval); // Остановить таймер
this.autoplay = 20;
// Действия после окончания таймера, если необходимо
} else {
this.remainingSeconds = Math.floor(diff / 1000); // Обновляем оставшееся время в секундах
const totalDuration = 30; // Допустим, обратный отсчет идет с 60 секунд
this.progressBarWidth =
((totalDuration - this.remainingSeconds) / totalDuration) * 100;
}
// Обновление текста и ширины прогресс-бара
const progressBarElement = document.querySelector(".progress");
if (progressBarElement) {
const progressText =
progressBarElement.querySelector(".progress-text");
if (progressText) {
progressText.style.opacity = "0";
setTimeout(() => {
progressBarElement.style.width = `${this.progressBarWidth}%`;
progressText.textContent = `${this.remainingSeconds} СЕК`;
progressText.style.opacity = "1";
}, 500); // Задержка должна соответствовать продолжительности анимации
}
}
};
// Запускаем таймер
this.timerInterval = setInterval(updateTimer, 1000);
updateTimer(); // Вызываем сразу для инициализации
}
},
handleSlideStart(data) {
try {
const { slidingToIndex } = data;
this.currentSlideIndex = slidingToIndex;
if (this.isStopButtonPressed) {
if (
this.slides[this.currentSlideIndex].nickname ===
this.targetNickname &&
!this.isCarouselStopped
) {
this.stopAutoplay();
}
}
} catch (error) {
console.error("Error in handleSlideStart:", error);
// Здесь вы можете обработать ошибку, например, остановить карусель
}
},
stopCarousel() {
this.isStopButtonPressed = true;
this.autoplay = 200;
},
stopAutoplay() {
this.autoplay = 0;
this.isCarouselStopped = true;
if (this.interval) {
clearInterval(this.interval);
}
},
changeLastFiveImages() {
const newImage = "https://avatar.spworlds.ru/face/55/Hepatir.png";
console.log(this.slides);
this.slides[9].img = newImage;
},
stopOnTarget(targetNickname) {
if (this.slides[this.currentSlide].nickname === targetNickname) {
this.autoplay = 0; // Остановить автопрокрутку
return true; // Возвращаем true, если нашли нужный слайд
}
return false; // Возвращаем false, если нужный слайд не найден
},
},
mounted() {
this.startAutoScroll();
ConnectToJackpotSocket();
eventBus.on("jackpotGameTik", (data) => {
try {
if (data) {
const dataObject = JSON.parse(data);
console.log(dataObject);
this.lastUserWinner=dataObject.LastGame.WinnerUserName;
if (dataObject.CurrentGame.GameState == "StartGameTimer") {
this.startGameTimer(dataObject.CurrentGame.StartGameUtc);
}
if (
dataObject.CurrentGame.GameState != "WaitingForPlayers" &&
dataObject.CurrentGame.GameState == "Running"
) {
this.checkGameEnd(dataObject.CurrentGame.EndGameUtc);
// this.idCurrentGame = dataObject.CurrentGame.Id;
}
// Дальнейшая обработка dataObject...
} else {
// Если данные не определены или пусты, выводим соответствующее сообщение в консоль
console.log("Received undefined or null data");
}
// console.log(dataFromServer);
} catch (error) {
console.log(error);
}
});
eventBus.on("gameEnded", () => {
setTimeout(() => {
this.targetNickname = this.lastUserWinner;
this.stopCarousel();
}, 2000);
});
// this.startAutoScroll();
},
watch: {
amountDeposit(DepositCount) {

2
luckydiamond/src/properties/Сonfig.js
View File

@@ -1,5 +1,7 @@
export const BackendApiUrl = 'https://spsystemcore20231122004605.azurewebsites.net/api';
export const BackendWebSocketUrl = 'wss://spsystemcore20231122004605.azurewebsites.net';
export const BackendWebSocketJackpotUrl = 'wss://spsystemcore20231122004605.azurewebsites.net/jackpot';
// export const BackendApiUrl = 'https://localhost:7062/api';