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 @@
Рулетка
Крути, ставь, побеждай!
- fds
-
-
-
-
-
![User Icon]()
-
-
{{ user.name }}
-
-
{{ user.amount }}
-
-
-
FUpir
-
- 500
-
-
+
+
+
![User]()
+
+
{{ user.name }}
+
+
+ {{ user.amount }}
+
+
+
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$,
};
},
};