diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css index 9fc6542..98036ab 100644 --- a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css +++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css @@ -200,6 +200,8 @@ .bank-name { font-size: 14px; + font-family: Montserrat; + font-weight: bold; /* Smaller text size for 'БАНК' */ } diff --git a/luckydiamond/src/assets/js/jackpot/JackpotLogic.js b/luckydiamond/src/assets/js/jackpot/JackpotLogic.js index 2d0242e..ef1fa78 100644 --- a/luckydiamond/src/assets/js/jackpot/JackpotLogic.js +++ b/luckydiamond/src/assets/js/jackpot/JackpotLogic.js @@ -1,4 +1,5 @@ import { BackendWebSocketJackpotUrl } from '@/properties/Сonfig.js'; +import { BackendApiUrl } from '@/properties/Сonfig.js'; import { eventBus } from "@/main"; // import { @@ -53,3 +54,34 @@ export function ConnectToJackpotSocket() { console.error('Error in ConnectToChat:', error); } } + +export async function JoinJackpotGame(userData, amount) { + const data = { + userCredentials: { + searchToken: userData.searchToken, + authtoken: userData.authtoken + }, + bid: amount + } + + try { + const response = await fetch(`${BackendApiUrl}/GameJackpot/JoinJackpotGame`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data), + redirect: 'follow' + }) + + if (!response.ok) { + console.log('Fetch error:', response.status) + } + + console.log(response) + return await response.json() + } + catch (error) { + console.log('Fetch error') + } +} diff --git a/luckydiamond/src/pages/games-pages/JackpotPage.vue b/luckydiamond/src/pages/games-pages/JackpotPage.vue index 630b7c5..ece279d 100644 --- a/luckydiamond/src/pages/games-pages/JackpotPage.vue +++ b/luckydiamond/src/pages/games-pages/JackpotPage.vue @@ -85,7 +85,7 @@ @@ -124,7 +124,6 @@ {{ remainingSeconds >= 0 ? remainingSeconds + " " : "" }} - @@ -148,24 +147,27 @@
- Player Avatar + Player Avatar
- 500 - + + /> + +
+
+ {{ player.name }}
-
FUpir
- ШАНС 15.55% + ШАНС + {{ + player.chance + }}
@@ -186,38 +188,52 @@ >
- Голова +
- -
-
+
- Player Avatar + Player Avatar
{{ user.name }} - {{ user.gems }} - + {{ user.gems + }} +
- ШАНС {{ user.chance }}% + ШАНС + {{ user.chance }}%
- - -
@@ -245,12 +261,20 @@ import { GetCurrentMoney } from "@/assets/js/rest/RestMethods"; 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 { + ConnectToJackpotSocket, + JoinJackpotGame, +} from "@/assets/js/jackpot/JackpotLogic.js"; +import { useVuelidate } from "@vuelidate/core"; import { Carousel, Slide } from "vue3-carousel"; - import "vue3-carousel/dist/carousel.css"; +import { + maxValue, + minValue, + required, + numeric, + integer, +} from "@vuelidate/validators"; import { eventBus } from "@/main"; export default { @@ -263,31 +287,57 @@ export default { // Pagination // ProgressBar, }, + validations() { + return { + amountDeposit: { + required, + numeric, + minValue: minValue(1), + maxValue: maxValue(this.balance), + integer, + }, + }; + }, inject: ["eventBus"], + setup() { + const v$ = useVuelidate(); + return { v$ }; + }, data() { return { JackpotNumbers, autoplay: 0, + player: { + name: "", + gems: 1000, + avatarUrl: "https://avatar.spworlds.ru/face/55/test", + chance: "100%", + // name: "FUpir", + // gems: 500, + // avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png", + // chance: "15.55%" + }, + users: [ - // { - // name: "FUpir", - // gems: 500, - // avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png", - // chance: 16.55 - // }, - // { - // name: "FUpir", - // gems: 500, - // avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png", - // chance: 16.55 - // }, - // { - // name: "FUpir", - // gems: 500, - // avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png", - // chance: 16.55 - // }, - ], + // { + // name: "FUpir", + // gems: 500, + // avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png", + // chance: 16.55 + // }, + // { + // name: "FUpir", + // gems: 500, + // avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png", + // chance: 16.55 + // }, + // { + // name: "FUpir", + // gems: 500, + // avatarUrl: "https://avatar.spworlds.ru/face/55/Hepatir.png", + // chance: 16.55 + // }, + ], // Добавьте других пользователей по аналогии // slides: [ // { @@ -335,6 +385,7 @@ export default { currentSlide: 0, value: 0, max: 100, + offBtn: false, amountDeposit: 0, targetNickname: "", isStopButtonPressed: false, @@ -344,21 +395,117 @@ export default { idCurrentGame: "", lastUserWinerGameId: " ", lastUserWinner: "", + firstStartOfPage: false, // lastIdGame: "", }; }, methods: { - mapPlayersToSlides(players) { + async clickedBtnChoice(index, content) { + this.clickedBtn = index; + if (content === "max") { + await GetCurrentMoney( + GetCookie("AUTHTOKEN"), + GetCookie("SearchToken") + ).then((response) => { + console.log(response.currentMoney, this.balance); + const responseBalance = response.currentMoney; + + if (responseBalance === this.balance) { + this.amountDeposit = parseInt(responseBalance); + } + }); + } else { + this.amountDeposit = content; + } + }, + errorPlayButton() { + this.ErrorClick = true; + setTimeout(() => { + this.ErrorClick = false; + this.textError = ""; + }, 2000); + }, + async clickPlayBtn() { + this.v$.$touch(); + this.offBtn = true; + + if ( + this.balance < this.amountDeposit || + !Number.isInteger(Number(this.amountDeposit)) + ) { + this.textError = "Некорректное значение. Введите целое число."; + this.offBtn = false; + this.errorPlayButton(); + } + const userData = { + searchToken: GetCookie("SearchToken"), + authtoken: GetCookie("AUTHTOKEN"), + }; + + await JoinJackpotGame(userData, this.amountDeposit).then((response) => { + console.log(this.balance); + console.log(response); + if ( + response === `You can't join to started or ended game` || + response === "Player alredy in the game." + ) { + this.offBtn = false; + + if (response === `You can't join to started or ended game`) { + this.textError = "Игра уже началась или только закончилась!"; + this.errorPlayButton(); + } else if (response === "Player alredy in the game.") { + this.textError = "Вы уже в игре!"; + this.errorPlayButton(); + } + + return; + } + + if (response.ok) { + this.offBtn = false; + this.startGame = true; + } + }); + this.offBtn = false; + }, + updatePlayerInfo(newName, newGems, newChance) { + this.player.name = newName; + this.player.avatarUrl = + "https://avatar.spworlds.ru/face/55/" + newName + ".png"; + this.player.gems = newGems; + this.player.chance = parseFloat(newChance).toFixed(2) + "%"; + }, + mapPlayersToSlides(players, inGamePlayersBided) { this.slides = []; + this.users = []; + + inGamePlayersBided.forEach((player) => { + this.users.push({ + avatarUrl: `https://avatar.spworlds.ru/face/55/${player.UserName}.png`, // Предполагаем структуру URL из имени пользователя + name: player.UserName, + chance: parseFloat(player.WinningPercentage).toFixed(2) + "", + gems: player.Bid, + }); + }); + players.forEach((player) => { const numberOfCards = player.WinningPercentage / 10; // Предполагаем, что 10% это 1 карточка + // const numberOfCards = player.WinningPercentage / 10; // Предполагаем, что 10% это 1 карточка for (let i = 0; i < numberOfCards; i++) { if (i == 0) { - this.slides.push({ - img: `https://avatar.spworlds.ru/face/55/${player.UserName}.png`, // Предполагаем структуру URL из имени пользователя - nickname: player.UserName, - }); + if (this.firstStartOfPage) { + this.slides.push({ + img: `https://avatar.spworlds.ru/face/55/${this.player.name}.png`, // Предполагаем структуру URL из имени пользователя + nickname: this.player.name, + }); + } else { + this.slides.push({ + img: `https://avatar.spworlds.ru/face/55/${player.UserName}.png`, // Предполагаем структуру URL из имени пользователя + nickname: player.UserName, + }); + } } this.slides.push({ img: `https://avatar.spworlds.ru/face/55/${player.UserName}.png`, // Предполагаем структуру URL из имени пользователя @@ -505,7 +652,7 @@ export default { }, stopOnTarget(targetNickname) { if (this.slides[this.currentSlide].nickname === targetNickname) { - this.autoplay = 0; // Остановить автопрокрутку + this.autoplay = 0; return true; // Возвращаем true, если нашли нужный слайд } return false; // Возвращаем false, если нужный слайд не найден @@ -513,6 +660,7 @@ export default { }, mounted() { ConnectToJackpotSocket(); + eventBus.on("jackpotGameTik", (data) => { try { if (data) { @@ -529,13 +677,20 @@ export default { this.stopCarousel(); } if (this.idCurrentGame == "") { - this.mapPlayersToSlides(dataObject.CurrentGame.PlayerList); + this.mapPlayersToSlides( + dataObject.LastGame.PlayerList, + dataObject.CurrentGame.PlayerList + ); + // this.mapPlayersToSlides(dataObject.CurrentGame.PlayerList); } } if (dataObject.CurrentGame.GameState == "StartGameTimer") { if (!this.isGameTimerStarted) { console.log("Set players"); - this.mapPlayersToSlides(dataObject.CurrentGame.PlayerList); + this.mapPlayersToSlides( + dataObject.CurrentGame.PlayerList, + dataObject.CurrentGame.PlayerList + ); this.idCurrentGame = dataObject.CurrentGame.Id; } this.startGameTimer(dataObject.CurrentGame.StartGameUtc); @@ -544,6 +699,11 @@ export default { if (dataObject.CurrentGame.GameState == "Running") { this.autoplay = 20; } + this.updatePlayerInfo( + dataObject.LastGame.WinnerUserName, + dataObject.LastGame.WinStake, + dataObject.LastGame.WinnerPercentage + ); } else { // Если данные не определены или пусты, выводим соответствующее сообщение в консоль console.log("Received undefined or null data"); @@ -566,6 +726,8 @@ export default { }, watch: {}, async created() { + this.firstStartOfPage = true; + if (GetCookie("AUTHTOKEN") && GetCookie("SearchToken")) { await GetCurrentMoney( GetCookie("AUTHTOKEN"), @@ -575,6 +737,54 @@ export default { }); } }, + amountDeposit(DepositCount) { + if (![1, 5, 10, 50, 100, parseInt(this.balance)].includes(DepositCount)) { + this.clickedBtn = null; + } else { + let index; + switch (DepositCount) { + case 1: + if (parseInt(this.balance) === DepositCount) { + index = 5; + } else { + index = 0; + } + break; + case 5: + if (parseInt(this.balance) === DepositCount) { + index = 5; + } else { + index = 1; + } + break; + case 10: + if (parseInt(this.balance) === DepositCount) { + index = 5; + } else { + index = 2; + } + break; + case 50: + if (parseInt(this.balance) === DepositCount) { + index = 5; + } else { + index = 3; + } + break; + case 100: + if (parseInt(this.balance) === DepositCount) { + index = 5; + } else { + index = 4; + } + break; + case parseInt(this.balance): + index = 5; + break; + } + this.clickedBtnChoice(index, DepositCount); + } + }, };