From b93f23deaac40fd23d3eab78e60845946efb7172 Mon Sep 17 00:00:00 2001 From: Hepatica Date: Sun, 7 Apr 2024 03:04:02 +0200 Subject: [PATCH] add double --- .../css/PagesStyles/games-pages/double.css | 104 +++++- luckydiamond/src/assets/js/chat/ChatLogic.js | 4 +- .../src/assets/js/games/double/DoubleApi.js | 47 +++ .../src/pages/games-pages/DoublePage.vue | 349 ++++++++++++++---- 4 files changed, 411 insertions(+), 93 deletions(-) diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css index e017472..ecd43d5 100644 --- a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css +++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css @@ -1,10 +1,56 @@ +.bet-button { + border: none; + padding: 10px 20px; + margin: 5px; + border-radius: 10px; + color: white; + font-weight: bold; + cursor: pointer; + transition: transform 0.1s ease; + outline: none; +} + +/* Цвета для кнопок */ +.bet-button.red { + background-color: #863443; +} + +.bet-button.green { + background-color: #2D4940; +} + +.bet-button.black { + background-color: #202333; +} + +/* Стили для нажатой кнопки */ +.bet-button:active { + transform: scale(0.95); + /* Уменьшение при нажатии */ +} +.bet-button.active { + opacity: 0.7; /* Пример изменения стиля активной кнопки */ + } + +/* Можно добавить тени для кнопок, чтобы они выглядели объемнее */ +.bet-button { + margin: 1.2% 0 0 5.8%; + margin-bottom:1vh; + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); +} + +/* Стиль для тени при нажатии (опционально) */ +.bet-button:active { + box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2); +} + .double-start { z-index: 1; border-radius: 20px; background: #1D223E; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); width: 42vh; - height: 32vh; + height: 37vh; border: 1px solid #262C55; margin: 2.6%; margin-top: 0px; @@ -20,25 +66,34 @@ .double-ui-component { display: flex; align-items: center; - background-color: #3b5998; - border-radius: 20px; - padding: 10px 20px; + background-color: #25325A; + border-radius: 15px; + /* padding: 10px 20px; */ + padding-right: 2vh; + padding-bottom: 1vh; + padding-top: 1vh; + padding-left: 2vh; + margin-bottom: 1vh; max-width: 300px; color: white; font-family: Arial, sans-serif; + /* background: linear-gradient(to right, #1C213390 50%, #2F5139); */ } -.double-ui-component img { - border-radius: 50%; - margin-right: 10px; - /* Отступ справа от изображения */ +.double-ui-component-gradient { + background: linear-gradient(to right, #1C213390 50%, #2F5139); } +/* .double-ui-component img {} */ + .double-ui-component .double-username { flex-grow: 1; - /* Занимает доступное пространство */ text-align: left; - /* Выравнивание текста по левому краю */ + margin-left: 1vh; + font-size: 18px; + font-family: Montserrat; + font-weight: bold; + color: #515D83; } .double-ui-component .double-score { @@ -46,16 +101,25 @@ align-items: center; } +.double-score { + font-size: 20px; + font-family: Montserrat; + font-weight: bold; + color: #748985; +} + +.double-img-user { + margin-top: 6px; +} + .double-ui-component .double-score img { - width: 20px; - /* Ширина изображения монетки */ - height: 20px; - /* Высота изображения монетки */ - margin-left: 5px; - /* Отступ слева от монетки */ + width: 3vh; + height: 3vh; + margin-left: 10px; } .double-members-ingame-red { + overflow-y: auto; background: linear-gradient(to bottom right, #A9373C, #1C2133 20%); @@ -65,12 +129,13 @@ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); margin-top: 1vh; width: 100%; - height: 50vh; + height: 49vh; /* height: 94%; */ padding: 2vh; } .double-members-ingame-green { + overflow-y: auto; background: linear-gradient(to bottom right, #345D3B, #1C2133 20%); @@ -80,12 +145,13 @@ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); margin-top: 1vh; width: 100%; - height: 50vh; + height: 49vh; /* height: 94%; */ padding: 2vh; } .double-members-ingame-black { + overflow-y: auto; background: linear-gradient(to bottom right, #1B1A1A, #1C2133 26%); @@ -97,7 +163,7 @@ margin-top: 1vh; width: 100%; /* height: 94%; */ - height: 50vh; + height: 49vh; padding: 2vh; } diff --git a/luckydiamond/src/assets/js/chat/ChatLogic.js b/luckydiamond/src/assets/js/chat/ChatLogic.js index c49f0b5..3b3d6b0 100644 --- a/luckydiamond/src/assets/js/chat/ChatLogic.js +++ b/luckydiamond/src/assets/js/chat/ChatLogic.js @@ -31,14 +31,12 @@ export function ConnectToChat() { if (dataObject.MessageType == 'DoubleGameState') { eventBus.emit('doubleGame', event.data) - console.log(event.data) return; } if (dataObject.MessageType == "CrashGameState") { eventBus.emit('crash', event.data); return; - } if (Array.isArray(dataObject.CurrentGame.PlayerList)) { @@ -47,7 +45,7 @@ export function ConnectToChat() { } } catch (error) { - void(error); + void (error); } }; diff --git a/luckydiamond/src/assets/js/games/double/DoubleApi.js b/luckydiamond/src/assets/js/games/double/DoubleApi.js index 5797c4d..54e5a8b 100644 --- a/luckydiamond/src/assets/js/games/double/DoubleApi.js +++ b/luckydiamond/src/assets/js/games/double/DoubleApi.js @@ -1,4 +1,8 @@ import { BackendApiUrl } from '@/properties/Сonfig.js'; +import { + GetCookie +} from "@/assets/js/storage/CookieStorage.js"; + export async function GetNewestDoubleGames() { try { @@ -19,4 +23,47 @@ export async function GetNewestDoubleGames() { catch (error) { console.log('Fetch error') } +} + +export async function JoinGame(amount, betColor) { + + let betColorInt = 0; + if (betColor == "red") { + betColorInt = 0; + } + if (betColor == "green") { + betColorInt = 1; + } + if (betColor == "black") { + betColorInt = 2; + } + + const data = { + UserCredentials: { + SearchToken: GetCookie("SearchToken"), + AUTHTOKEN: GetCookie("AUTHTOKEN") + }, + bet: amount, + betColor: betColorInt + } + + try { + const response = await fetch(`${BackendApiUrl}/GameDouble/JoinGame`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(data), + redirect: 'follow' + }) + + if (!response.ok) { + console.log('Fetch error:', response.status) + } + + return await response.json() + } + catch (error) { + console.log('Fetch error') + } } \ No newline at end of file diff --git a/luckydiamond/src/pages/games-pages/DoublePage.vue b/luckydiamond/src/pages/games-pages/DoublePage.vue index 7f4dca6..2003ac8 100644 --- a/luckydiamond/src/pages/games-pages/DoublePage.vue +++ b/luckydiamond/src/pages/games-pages/DoublePage.vue @@ -12,7 +12,16 @@

Рулетка

Крути, ставь, побеждай!

-

Сумма депозита

+

Цвет победной ячейки

+ + +
RED X2
- 0 + {{ + numberUserCountRed + }}
-

fds

- - -
- - User Icon - - {{ user.name }} - - {{ user.amount }} -
-
- Avatar -
FUpir
-
- 500 - Coin -
+ +
+ User + +
{{ user.name }}
+ +
+ {{ user.amount }} + +
+
@@ -152,12 +160,30 @@
GREEN X20
- 0 + {{ + numberUserCountGreen + }} +
+ +
+ User + +
{{ user.name }}
+ +
+ {{ user.amount }} + +
-

fds

-

fds

-

fds

BLACK X2
- 0 + {{ + numberUserCountBlack + }} +
+ +
+ User + +
{{ user.name }}
+ +
+ {{ user.amount }} + +
-

fds

-

fds

-

fds

@@ -191,8 +235,9 @@ import AsideBarComponent from "@/components/AsidebarComponent.vue"; import HeaderComponent from "@/components/HeaderComponent.vue"; import ChatComponent from "@/components/ChatComponent.vue"; import JackpotNumbers from "@/mocks/JackpotNumbers"; -import { GetNewestDoubleGames } from "@/assets/js/games/double/DoubleApi"; - +import { GetNewestDoubleGames,JoinGame } from "@/assets/js/games/double/DoubleApi"; +import { GetCurrentMoney } from "@/assets/js/rest/RestMethods"; +import { GetCookie } from "@/assets/js/storage/CookieStorage"; import { Carousel, Slide } from "vue3-carousel"; import "vue3-carousel/dist/carousel.css"; @@ -200,6 +245,14 @@ import "@/assets/css/PagesStyles/games-pages/jackpot.css"; import "@/assets/css/PagesStyles/games-pages/double.css"; import "@/assets/css/global.css"; import { eventBus } from "@/main"; +import { useVuelidate } from "@vuelidate/core"; +import { + maxValue, + minValue, + required, + numeric, + integer, +} from "@vuelidate/validators"; export default { components: { @@ -211,12 +264,101 @@ export default { }, data() { return { - JackpotNumbers + JackpotNumbers, + clickedColor: "", + amountDeposit: 0, + activeButton: null + }; + }, + methods: { + async clickedBtnChoice(index, content) { + this.clickedBtn = index; + if (content === "max") { + await GetCurrentMoney( + GetCookie("AUTHTOKEN"), + GetCookie("SearchToken") + ).then((response) => { + const responseBalance = response.currentMoney; + + if (responseBalance === this.balance) { + this.amountDeposit = parseInt(responseBalance); + } + }); + } else { + this.amountDeposit = content; + } + }, + async handleClick(color) { + this.clickedColor = color; + this.activeButton = color; + } +, + 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(); + } + + await JoinGame(this.amountDeposit,this.clickedColor).then((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; + } + }, + validations() { + return { + amountDeposit: { + required, + numeric, + minValue: minValue(1), + maxValue: maxValue(this.balance), + integer, + }, }; }, async created() {}, + setup() { - const users = ref([]); + const v$ = useVuelidate(); + + const usersRed = ref([]); + + const usersGreen = ref([]); + + const usersBlack = ref([]); + + const numberUserCountRed = ref(0); + + const numberUserCountGreen = ref(0); + + const numberUserCountBlack = ref(0); const slides = reactive([ { @@ -261,7 +403,6 @@ export default { }, ]); - // const slides = reactive([]); const slidesHistory = reactive([]); let doubleData = reactive({}); @@ -273,36 +414,15 @@ export default { onMounted(() => { loadGameHistory(); - - users.value = fetchUsers(); - // if (slides.length == 0) { - // for (let i = 1; i < 29; i++) { - // if (i == 15 || i == 28) { - // slides.push({ - // img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"), - // target: "Green", - // }); - // } else { - // if (i % 2 == 0) { - // slides.push({ - // img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"), - // target: "Red", - // }); - // } else { - // slides.push({ - // img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"), - // target: "Black", - // }); - // } - // } - // } - // } + + // usersRed.value = fetchUsersRed(); eventBus.on("doubleGame", (dataDouble) => { const dataDoubleParse = JSON.parse(dataDouble); - // doubleData = Object.assign(doubleData, dataDoubleParse); - // timeToGame.value = doubleData.WaitingTime; + if (dataDoubleParse.Players.length > 0) { + processUsersInGame(dataDoubleParse.Players); + } if (endGame.value != true) { if (dataDoubleParse.Status == "InGame") { autoPlay.value = 20; @@ -312,11 +432,51 @@ export default { targetColor.value = dataDoubleParse.WInColor; endGame.value = true; autoPlay.value = 150; + + addWinEffectTouUsers( + dataDoubleParse.Players, + dataDoubleParse.WInColor + ); } } }); }); + function addWinEffectTouUsers(usersArray, winColor) { + usersArray.forEach((user) => { + if (user.BetColor == winColor) { + setTimeout(() => { + addGradientClassToUser(user); + }, 2000); + } + }); + } + + function addGradientClassToUser(user) { + const element = document.getElementById("user-" + user.UserName); + + if (element) { + element.classList.add("double-ui-component-gradient"); + } + } + + function addUserIfNotExist(usersArray, newUser, BetColor) { + const userExists = usersArray.some((user) => user.name === newUser.name); + + if (!userExists) { + if (BetColor == "Red") { + numberUserCountRed.value += 1; + } + if (BetColor == "Green") { + numberUserCountGreen.value += 1; + } + if (BetColor == "Black") { + numberUserCountBlack.value += 1; + } + usersArray.push(newUser); + } + } + function handleStepCarousel(data) { try { if (endGame.value == true) { @@ -326,7 +486,20 @@ export default { endGame.value == true ) { stopAutoPlay(); + setTimeout(() => { + setTimeout(() => { + if ( + usersRed.value.length > 0 || + usersBlack.value.length > 0 || + usersGreen.value.length > 0 + ) { + usersRed.value = []; + usersGreen.value = []; + usersBlack.value = []; + } + }, 4000); + loadGameHistory(); }, 2000); } @@ -336,6 +509,44 @@ export default { } } + function processUsersInGame(users) { + users.forEach((user) => { + if (user.BetColor == "Red") { + const newUser = { + name: user.UserName, + image: + "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png", + amount: user.Bet, + hasGradient: false, + }; + + addUserIfNotExist(usersRed.value, newUser, "Red"); + } + if (user.BetColor == "Green") { + const newUser = { + name: user.UserName, + image: + "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png", + amount: user.Bet, + hasGradient: false, + }; + + addUserIfNotExist(usersGreen.value, newUser, "Green"); + } + if (user.BetColor == "Black") { + const newUser = { + name: user.UserName, + image: + "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png", + amount: user.Bet, + hasGradient: false, + }; + + addUserIfNotExist(usersBlack.value, newUser, "Black"); + } + }); + } + async function loadGameHistory() { try { await GetNewestDoubleGames() @@ -385,13 +596,6 @@ export default { targetColor.value = ""; } - function fetchUsers() { - return [ - { id: 1, name: 'Alice', amount: 100, image: 'path/to/alice.png' }, - { id: 2, name: 'Bob', amount: 200, image: 'path/to/bob.png' }, - ]; - } - return { slides, slidesHistory, @@ -401,7 +605,10 @@ export default { timeToGame, handleStepCarousel, stopAutoPlay, - users, + usersRed, + usersBlack, + usersGreen, + v$, }; }, };