add double

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;
 }
 

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)) {

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 {
@@ -20,3 +24,46 @@ export async function GetNewestDoubleGames() {
         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')
+    }
+}

luckydiamond/src/pages/games-pages/DoublePage.vue

@@ -12,7 +12,16 @@
           <h2>Рулетка</h2>
           <p>Крути, ставь, побеждай!</p>
           <div class="saper-start__choises diamonds diamonds-input__margin">
-            <h3>Сумма депозита</h3>
+            <h3>Цвет победной ячейки</h3>
+            <button class="bet-button red" :class="{ active: activeButton === 'red' }" @click="handleClick('red')">
+              x2
+            </button>
+            <button class="bet-button green" :class="{ active: activeButton === 'green' }" @click="handleClick('green')">
+              x20
+            </button>
+            <button class="bet-button black" :class="{ active: activeButton === 'black' }" @click="handleClick('black')">
+              x2
+            </button>
 
             <div class="diamonds__choises">
               <img
@@ -117,30 +126,29 @@
                     <div class="double-red-box">RED X2</div>
                     <div class="double-user-icon">
                       <span class="double-user-icon-span"></span>
-                      <span class="double-number-color">0</span>
+                      <span class="double-number-color">{{
+                        numberUserCountRed
+                      }}</span>
                     </div>
                   </div>
-                  <h1>fds</h1>
-                  <!-- <div> -->
-                    <!-- <div v-for="user in users" :key="user.id" class="double-user-icon">
-                      <img :src="user.image" alt="User Icon" class="double-user-icon-img" />
-                      <span class="double-user-name">{{ user.name }}</span>
-                      <span class="double-number-color">{{ user.amount }}</span>
-                    </div> -->
-                    <div v-for="user in users" :key="user.id" class="double-user-icon">
 
-                      <img :src="user.image" alt="User Icon" class="double-user-icon-img" />
+                  <div
+                    v-for="user in usersRed"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
 
-                      <span class="double-user-name">{{ user.name }}</span>
+                    <div class="double-username">{{ user.name }}</div>
 
-                      <span class="double-number-color">{{ user.amount }}</span>
-                    </div>
-                    <div class="double-ui-component">
-                      <img src="path_to_your_avatar.png" alt="Avatar" width="40" height="40">
-                      <div class="double-username">FUpir</div>
                     <div class="double-score">
-                        500
-                        <img src="path_to_your_coin.png" alt="Coin">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
                     </div>
                   </div>
                   <!-- </div> -->
@@ -152,12 +160,30 @@
                     <div class="double-green-box">GREEN X20</div>
                     <div class="double-user-icon">
                       <span class="double-user-icon-span"></span>
-                      <span class="double-number-color">0</span>
+                      <span class="double-number-color">{{
+                        numberUserCountGreen
+                      }}</span>
+                    </div>
+                  </div>
+                  <div
+                    v-for="user in usersGreen"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
+
+                    <div class="double-username">{{ user.name }}</div>
+
+                    <div class="double-score">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
                     </div>
                   </div>
-                  <h1>fds</h1>
-                  <h1>fds</h1>
-                  <h1>fds</h1>
                 </div>
               </div>
               <div
@@ -169,12 +195,30 @@
                     <div class="double-white-box">BLACK X2</div>
                     <div class="double-user-icon">
                       <span class="double-user-icon-span"></span>
-                      <span class="double-number-color">0</span>
+                      <span class="double-number-color">{{
+                        numberUserCountBlack
+                      }}</span>
+                    </div>
+                  </div>
+                  <div
+                    v-for="user in usersBlack"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
+
+                    <div class="double-username">{{ user.name }}</div>
+
+                    <div class="double-score">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
                     </div>
                   </div>
-                  <h1>fds</h1>
-                  <h1>fds</h1>
-                  <h1>fds</h1>
                 </div>
               </div>
             </div>
@@ -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({});
@@ -274,35 +415,14 @@ 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$,
     };
   },
 };