first jackpot

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 'БАНК' */
 }
 

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')
+    }
+}

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

@@ -85,7 +85,7 @@
             <button
               class="btn-start"
               :class="{ 'animate-start-btn': ErrorClick }"
-              @click="clickPlayButton"
+              @click="clickPlayBtn"
             >
               Начать игру
             </button>
@@ -124,7 +124,6 @@
                       <span class="progress-text">{{
                         remainingSeconds >= 0 ? remainingSeconds + " " : ""
                       }}</span>
-                      <!-- remainingSeconds >= 0 ? remainingSeconds + " СЕК" : "" -->
                     </div>
                   </div>
                 </div>
@@ -148,24 +147,27 @@
                         </div>
                         <div class="jackpot-player-info">
                           <div class="jackpot-player-avatar">
-                            <img
+                            <img :src="player.avatarUrl" alt="Player Avatar" />
-                              src="https://avatar.spworlds.ru/face/55/Hepatir.png"
-                              alt="Player Avatar"
-                            />
                           </div>
                           <div class="jackpot-player-data">
                             <div class="jackpot-player-gems">
-                              500
+                              {{ player.gems }}
-                              <span class="jackpot-gems-icon"
+                              <span class="jackpot-gems-icon">
-                                ><img
+                                <img
                                   src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
-                              /></span>
+                                />
+                              </span>
+                            </div>
+                            <div class="jackpot-player-name">
+                              {{ player.name }}
                             </div>
-                            <div class="jackpot-player-name">FUpir</div>
                           </div>
                         </div>
                         <div class="jackpot-player-chance">
-                          ШАНС <span class="jackpot-chance-value">15.55%</span>
+                          ШАНС
+                          <span class="jackpot-chance-value">{{
+                            player.chance
+                          }}</span>
                         </div>
                       </div>
                     </div>
@@ -186,38 +188,52 @@
                   >
                     <Slide v-for="(slide, index) in slides" :key="index">
                       <div class="carousel__item">
-                        <img :src="slide.img" alt="Голова" />
+                        <img
+                          :src="slide.img"
+                          onerror="this.onerror=null;this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';"
+                        />
                       </div>
                     </Slide>
                   </Carousel>
                 </div>
               </div>
 
-              
-
               <div class="col-md-12">
                 <div class="jackpot-useringame-list">
-                  <div class="jackpot-carousel-user" v-for="(user, index) in users" :key="index">
+                  <div
+                    class="jackpot-carousel-user"
+                    v-for="(user, index) in users"
+                    :key="index"
+                  >
                     <div class="jackpot-banner">
                       <div class="jackpot-content">
-                        <img :src="user.avatarUrl" alt="Player Avatar" class="jackpot-avatar" />
+                        <img
+                          :src="user.avatarUrl"
+                          alt="Player Avatar"
+                          class="jackpot-avatar"
+                        />
                         <div class="jackpot-info">
                           <span class="jackpot-name">{{ user.name }}</span>
-                          <span class="jackpot-gems">{{ user.gems }}<span class="jackpot-gems-icon">
+                          <span class="jackpot-gems"
-                            <img class="jackpot-gems-icon-extension" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" /></span>
+                            >{{ user.gems
+                            }}<span class="jackpot-gems-icon">
+                              <img
+                                class="jackpot-gems-icon-extension"
+                                src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
+                            /></span>
                           </span>
                         </div>
                       </div>
                       <div class="jackpot-chance">
-                        ШАНС <span class="jackpot-percentage">{{ user.chance }}%</span>
+                        ШАНС
+                        <span class="jackpot-percentage"
+                          >{{ user.chance }}%</span
+                        >
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
-              
-
-
             </div>
           </div>
         </div>
@@ -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 {
-import { ConnectToJackpotSocket } from "@/assets/js/jackpot/JackpotLogic.js";
+  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,11 +287,37 @@ 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",
@@ -335,6 +385,7 @@ export default {
       currentSlide: 0,
       value: 0,
       max: 100,
+      offBtn: false,
       amountDeposit: 0,
       targetNickname: "",
       isStopButtonPressed: false,
@@ -344,22 +395,118 @@ 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) {
+            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 из имени пользователя
             nickname: player.UserName,
@@ -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);
+    }
+  },
 };
 </script>