first jackpot

2025-12-10 12:19:31 +02:00 · 2024-02-25 04:56:58 +01:00
parent 37dc8795b4
commit a8708cf50e
3 changed files with 298 additions and 54 deletions
--- 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 'БАНК' */
 }

--- 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')
+    }
+}
--- a/luckydiamond/src/pages/games-pages/JackpotPage.vue
+++ b/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
-                              src="https://avatar.spworlds.ru/face/55/Hepatir.png"
-                              alt="Player Avatar"
-                            />
+                            <img :src="player.avatarUrl" alt="Player Avatar" />
                          </div>
                          <div class="jackpot-player-data">
                            <div class="jackpot-player-gems">
-                              500
-                              <span class="jackpot-gems-icon"
-                                ><img
+                              {{ player.gems }}
+                              <span class="jackpot-gems-icon">
+                                <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">
-                            <img class="jackpot-gems-icon-extension" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png" /></span>
+                          <span class="jackpot-gems"
+                            >{{ 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 { 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);
+    }
+  },
 };
 </script>