Merge branch 'main' of https://github.com/danilt2000/LuckyDiamond into DevelopMadara

README.md

@@ -24,7 +24,7 @@
 - Нажать сочетание клавиш ctrl + shift + i
 - Перейти в Application(Приложение)
 - Кликнуть на файлы Куки
-- Нажать на нашу ссылку и скопировать AUTHTOKEN, SearchToken, SpUserName, UserId
+- Нажать на нашу ссылку и скопировать AUTHTOKEN, SearchToken, SpUserName
 - Вставить значения и названия на Локальный хост
 - Обновить страницу
 
@@ -41,4 +41,4 @@
 
 ## Наша Команда
 
-![team](https://github.com/danilt2000/LuckyDiamond/assets/96600211/0c1b43b7-fe67-4fca-85ef-16f314847b70)
+![team](https://cdn.discordapp.com/attachments/1175674631684898866/1208428357952348170/Group_92.png?ex=65e33f9c&is=65d0ca9c&hm=9279223a5486b16e30267bced4fd1f7cc63ff59292cb5e29d741914b5902e5e0&)

luckydiamond/package-lock.json

@@ -21,6 +21,7 @@
         "vue-chart-3": "^3.1.8",
         "vue-recaptcha": "^3.0.0-alpha.6",
         "vue-router": "^4.2.5",
+        "vue3-carousel": "^0.3.1",
         "vue3-recaptcha2": "^1.8.0"
       },
       "devDependencies": {
@@ -11892,6 +11893,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "node_modules/vue3-carousel": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz",
+      "integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==",
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue3-recaptcha2": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/vue3-recaptcha2/-/vue3-recaptcha2-1.8.0.tgz",

luckydiamond/package.json

@@ -22,6 +22,7 @@
     "vue-chart-3": "^3.1.8",
     "vue-recaptcha": "^3.0.0-alpha.6",
     "vue-router": "^4.2.5",
+    "vue3-carousel": "^0.3.1",
     "vue3-recaptcha2": "^1.8.0"
   },
   "devDependencies": {

luckydiamond/public/index.html

@@ -17,6 +17,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
+  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
+  <link rel="stylesheet" href="dist/css/bootstrap-grid.min.css" />
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/bootstrap-grid-css@4.1.3/dist/css/bootstrap-grid.min.css" />
   <title>LuckyDiamond</title>
 </head>
 
@@ -35,5 +38,5 @@
 <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vuelidate/core"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vuelidate/validators"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 </html>

luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css

@@ -0,0 +1,386 @@
+.jackpot-start {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 42vh;
+    /* height: 480px; */
+    height: 32vh;
+    border: 1px solid #262C55;
+    /* margin-top: 2.6%; */
+    margin: 2.6%;
+}
+
+.jackpot-loading-bar {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+    height: 100%;
+    /* margin-top: 2.6%; */
+    /* margin: 2.6%; */
+}
+
+.jackpot-carousel {
+    z-index: 1;
+    position: relative;
+    /* margin-left: 5%; */
+    border-radius: 10px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin-top: 1%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+    height: 95%;
+}
+
+.carousel-arrow {
+    position: absolute;
+    bottom: -20px;
+    /* Регулируйте положение стрелки относительно нижнего края карусели */
+    left: 50%;
+    /* Центрирование стрелки по горизонтали */
+    transform: translateX(-50%);
+    /* Дополнительное центрирование, чтобы точка указывала точно на центр */
+    color: #728DF8;
+    /* Цвет стрелки */
+    font-size: 24px;
+    /* Размер стрелки */
+    /* Добавьте любые дополнительные стили, такие как цвет фона, границы и т.д. */
+}
+.jackpot-useringame-list{
+    margin-top: 3.5%;
+    overflow-y: auto;
+    height: 62vh
+}
+.jackpot-carousel-user {
+    z-index: 1;
+    position: relative;
+    /* margin-left: 5%; */
+    border-radius: 10px;
+    background: #1F2543;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin-bottom: 1%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+}
+
+
+.jackpot-game {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    /* background: #1D223E; */
+    /* box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); */
+    width: 69%;
+    /* height: 480px; */
+    height: 94%;
+    /* border: 1px solid #262C55; */
+    margin-top: 2.6%;
+}
+
+.jackpot-main-elements {
+    z-index: 1;
+}
+
+.jackpot-start__content p {
+    color: #FFFFFF84;
+    font-weight: 700;
+    line-height: 31px;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 13px;
+}
+
+.padding-elements-jackpot {
+    padding-left: 5%;
+    padding-right: 5%;
+}
+
+.jackpot-start__btns {
+    margin-top: 5%;
+    display: flex;
+    flex-direction: column;
+}
+
+.jackpot-start__btns button {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 5px;
+    border: none;
+    color: #FFF;
+    font-weight: 700;
+    line-height: 19px;
+    font-style: normal;
+    font-family: Inter;
+    font-size: 16px;
+}
+
+.bank-container {
+    display: flex;
+    align-items: center;
+    /* background-color: #000066; */
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    font-family: Arial, sans-serif;
+    /* Choose your font */
+}
+
+.shield img {
+    width: 35px;
+    /* Adjust based on your shield size */
+    height: auto;
+    margin-left: 10px;
+    margin-bottom: -10px;
+}
+
+.bank-info {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.jackpot-last-game-bar-container {
+    /* margin-bottom: 3%; */
+    padding-top: 10px;
+}
+
+.jackpot-last-game-bar-container img {
+    /* margin-bottom: 3%; */
+    width: 3vh;
+    height: 3vh;
+}
+
+.jackpot-last-game-bar-container-text {
+    padding: 0px 0 5px 0;
+    color: #FFF;
+    font-weight: 200;
+    line-height: 15px;
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.00);
+    font-family: Montserrat Alternates;
+    font-size: 8px;
+}
+
+.jackpot-last-game-bar {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+
+    /* height: 480px; */
+    /* height: 100%; */
+    border: 1px solid #262C55;
+    height: 100%;
+    /* margin-top: 2.6%; */
+    /* margin: 2.6%; */
+
+}
+
+.bank-value {
+    font-size: 24px;
+    /* Large text size */
+    font-weight: bold;
+    margin-left: 1%;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #FFFFFF84;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    /* Make the number bold */
+}
+
+.bank-name {
+    font-size: 24px;
+
+    font-family: Montserrat;
+    font-weight: bold;
+    /* Smaller text size for 'БАНК' */
+}
+
+.progress-text {
+    transition: opacity 0.5s ease;
+    opacity: 1;
+}
+
+.progress-bar {
+    width: 95%;
+    background-color: #D9D9D9;
+    /* Navy blue background */
+    border-radius: 10px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+    margin-left: 2vh;
+    margin-bottom: 3%;
+}
+
+.progress {
+    height: 40px;
+    background-color: #E13F3F;
+    /* Red for the progress */
+    border-radius: 10px;
+    /* Rounded corners on the left side */
+    line-height: 40px;
+    /* Same as height to vertically center text */
+    color: white;
+    text-align: start;
+    text-indent: 20px;
+    padding-right: 10px;
+    /* Add some padding to the right of the text */
+    transition: width 0.25s ease-in-out;
+}
+
+.no-pointer-events {
+    pointer-events: none;
+}
+
+.jackpot-player-info {
+    display: flex;
+    align-items: center;
+    padding-left: 5px;
+    padding-right: 5px;
+    border-radius: 5px;
+    color: white;
+    font-family: Arial, sans-serif;
+}
+
+.jackpot-player-avatar img {
+    width: 48px;
+    /* Adjust size as needed */
+    height: 48px;
+    margin-right: 10px;
+    margin-left: 1vh;
+}
+
+.jackpot-player-data {
+    display: flex;
+    flex-direction: column;
+}
+
+.jackpot-player-name {
+    font-size: 16px;
+    /* Adjust font size as needed */
+    font-weight: bold;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #515D83;
+}
+
+.jackpot-player-gems {
+    font-size: 15px;
+    /* Adjust font size as needed */
+    display: flex;
+    align-items: start;
+    color: #FFFFFF84;
+    /* font-weight: 700; */
+    /* line-height: 31px; */
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-weight: bold;
+    /* font-size: 13px; */
+}
+
+
+.jackpot-gems-icon {
+   
+    margin-left: 5px;
+    height: 1vh;
+}
+
+.jackpot-gems-icon-extension{
+    margin-bottom: -10px !important;
+}
+
+.jackpot-player-chance {
+    background-color: #27345C;
+    /* Adjust background color as needed */
+    border-radius: 5px;
+    font-size: 14px;
+    /* Adjust font size as needed */
+    padding-left: 5px !important;
+    padding-right: 5px;
+    padding-bottom: 5px;
+    padding-top: 5px;
+    border-radius: 5px;
+    margin-left: 10%;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat;
+    font-weight: bold;
+}
+.jackpot-chance-value {
+    color: #EF4444; /* Или любой другой оттенок красного, который вам нужен */
+  }
+  
+  .jackpot-banner {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #1e2749; /* Dark blue background */
+    padding: 5px;
+    border-radius: 5px;
+    color: white;
+    font-family: Montserrat;
+    font-weight: bold;
+
+  }
+  
+  .jackpot-content {
+    display: flex;
+    align-items: center;
+  }
+  
+  .jackpot-avatar {
+    width: 48px; /* Adjust based on your preference */
+    height: 48px;
+    margin-right: 10px;
+  }
+  
+  .jackpot-info {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .jackpot-name {
+    font-size: 16px;
+    font-weight: bold;
+    color: #515D83;
+  }
+  
+  .jackpot-gems {
+    font-size: 14px;
+    color: #FFFFFF84;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-weight: bold;
+  }
+  
+  .jackpot-chance {
+    font-size: 16px;
+    background-color: transparent; /* Adjust if you want a different background */
+  }
+  
+  .jackpot-percentage {
+    color: #EF4444; /* Adjust if you want a different color */
+  }
+  
+
+@media (max-width: 1415px) {
+    .padding-elements-jackpot {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}

luckydiamond/src/assets/css/PagesStyles/home.css

@@ -117,7 +117,17 @@
     color: #fff;
     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     font-family: Montserrat Alternates;
-    font-size: 91px;
+    font-size:91px;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+}
+
+.title-jackpot {
+    color: #fff;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size:80px;
     font-weight: 700;
     text-transform: uppercase;
     text-align: center;
@@ -127,7 +137,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding-top: 4.7%;
+    padding-top: 5.5%;
 }
 
 .line__content .line__btn--main .line__btn {
@@ -157,6 +167,11 @@
     margin:  1% 6.6% 1% 4.7%;
 }
 
+.line__img__jackpot {
+    display: flex;
+    margin:  1% 6.6% 1% 4.7%;
+}
+
 .display-firstline {
     display: flex;
 }
@@ -178,6 +193,23 @@
     left: 2%;
 }
 
+.line__btn__jackpot {
+    border-radius: 21px;
+    background: #FFF;
+    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    color: #000;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 36px;
+    font-weight: 700;
+    padding: 11px 11px;
+    text-decoration: none;
+    text-transform: uppercase;
+    position: relative;
+    bottom: 4%;
+    left: 6%;
+}
+
 .line__btn--elm {
     color: #000;
     font-size: 38px;
@@ -377,10 +409,21 @@
     }
 }
 
-@media screen and (min-height: 910px) {
+@media screen and (min-height: 820px) {
   .chat {
     height: 87vh !important;
   }
 }
+  @media screen and (max-width: 1850px) {
+    .line__img__jackpot {
+      display: none !important;
+    }
+  }
 
+/* 
+@media screen and (min-height: 800) {
+    .chat {
+        height: 85vh !important;
+    }
+} */
 /* /Media */

luckydiamond/src/assets/css/global.css

@@ -204,11 +204,11 @@ button {
 .jackpot {
     display: flex;
     grid-area: jackpot;
-    height: 95%;
+    /* height: 95%;
     border-radius: 3.125rem;
     background: #17181C;
     box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
-    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
 }
 
 .about {
@@ -290,6 +290,29 @@ button {
 }
 
 
+.bg-gradient-left {
+    background: #293561;
+    filter: blur(120px);
+    position: absolute;
+    top: 250px;
+    transform: rotate(180deg);
+    left: 200px;
+    width: 40%;
+    height: 55%;
+    z-index: 0;
+}
+
+.bg-two-gradient-right {
+    background: #293561;
+    filter: blur(120px);
+    position: absolute;
+    top: 220px;
+    transform: rotate(330deg);
+    left: 600px;
+    width: 60%;
+    height: 35%;
+    z-index: 0;
+}
 /* /Crash */
 
 /* Media */

luckydiamond/src/assets/js/chat/ChatLogic.js

@@ -8,6 +8,12 @@ let webSocket;
 
 export function ConnectToChat() {
     try {
+
+        if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+            console.log('WebSocket connection already established.');
+            return;
+        }
+
         webSocket = new WebSocket(BackendWebSocketUrl);
 
         webSocket.onopen = function () {

luckydiamond/src/assets/js/jackpot/JackpotLogic.js

@@ -0,0 +1,87 @@
+import { BackendWebSocketJackpotUrl } from '@/properties/Сonfig.js';
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+import { eventBus } from "@/main";
+
+// import {
+//     GetCookie
+// } from "@/assets/js/storage/CookieStorage.js";
+
+let webSocket;
+
+export function ConnectToJackpotSocket() {
+    try {
+
+        if (webSocket && webSocket.readyState === WebSocket.OPEN) {
+            console.log('WebSocket connection already established.');
+            return; 
+        }
+
+        webSocket = new WebSocket(BackendWebSocketJackpotUrl);
+
+        webSocket.onopen = function () {
+            console.log('Connection established');
+        };
+
+        webSocket.onmessage = function (event) {
+
+            // const dataObject = JSON.parse(event.data);
+            
+            eventBus.emit('jackpotGameTik', event.data);
+            
+            // console.log(dataObject)
+            // if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
+            //     eventBus.emit('dataChat', event.data);
+            //     console.log('CHAT')
+            // }
+            // else {
+            //     eventBus.emit('crash', event.data)
+            // }
+
+        };
+
+        webSocket.onclose = function () {
+
+            webSocket = new WebSocket(BackendWebSocketJackpotUrl);
+
+            console.log('Connection closed and reconnected');
+        };
+
+        webSocket.onerror = function (event) {
+            webSocket = new WebSocket(BackendWebSocketJackpotUrl);
+            console.error('WebSocket Error:', event);
+        };
+    } catch (error) {
+        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/components/ChatComponent.vue

@@ -11,7 +11,13 @@
       <ul>
         <transition-group name="fade">
           <li v-for="msg in array" :key="msg">
-            <div class="card__user" :class="{ 'mention-message': isCurrentUser(msg), 'system-message' : msg.username === '🛠️ System' }">
+            <div
+              class="card__user"
+              :class="{
+                'mention-message': isCurrentUser(msg),
+                'system-message': msg.username === '🛠️ System',
+              }"
+            >
               <div class="user__icon">
                 <img :src="msg.icon" />
               </div>
@@ -55,7 +61,7 @@ export default {
       });
     },
     isCurrentUser(msg) {
-      return msg.msg.includes(GetCookie('SpUserName'))
+      return msg.msg.includes(GetCookie("SpUserName"));
     },
     ClaimDatamsg(msg) {
       const now = Date.now();
@@ -82,8 +88,8 @@ export default {
           icon: imageUrl,
         };
 
-        if (MsgUser.username === '🛠️ System') {
+        if (MsgUser.username === "🛠️ System") {
-          MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+          MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
         }
 
         this.array.push(MsgUser);
@@ -98,7 +104,8 @@ export default {
     GetChatHistory().then((response) => {
       if (response && response.length) {
         response.forEach((element) => {
-          let imageUrl = "https://avatar.spworlds.ru/face/55/" + element.userName;
+          let imageUrl =
+            "https://avatar.spworlds.ru/face/55/" + element.userName;
 
           const MsgUser = {
             id: this.id + 1,
@@ -107,8 +114,8 @@ export default {
             icon: imageUrl,
           };
 
-          if (MsgUser.username === '🛠️ System') {
+          if (MsgUser.username === "🛠️ System") {
-            MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+            MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
           }
 
           this.array.push(MsgUser);

luckydiamond/src/components/DevelopComponent.vue

@@ -55,7 +55,7 @@
     <div class="Ckutls__card">
       <div class="Ckutls__text_2">
         <div class="Ckutls__aboutinfo_2">
-          <p>Бэкендер</p>
+          <p>Фронтэндер</p>
           <h1>Ckutls_</h1>
         </div>
         <div class="Ckutls__whatjob_1">
@@ -130,7 +130,7 @@
     <div class="busha888_card">
       <div class="text">
         <div class="aboutinfo">
-          <p>фронтэндер</p>
+          <p>Фронтэндер</p>
           <h1>busha888</h1>
         </div>
         <div class="whatjob">

luckydiamond/src/components/HeaderComponent.vue

@@ -4,7 +4,7 @@ import "@/assets/css/ComponentsStyles/header.css";
 import { LogIn } from "@/assets/js/authentication/AuthService.js";
 import { GetCurrentMoney } from "@/assets/js/rest/RestMethods.js";
 
-import {eventBus} from "@/main";
+import { eventBus } from "@/main";
 
 import {
   SetCookie,
@@ -18,30 +18,31 @@ export default {
     logout() {
       this.auth = false;
       this.balance = 0;
-      this.authtoken = ''
+      this.authtoken = "";
       DeleteAllCookie();
     },
     updateBalanceMethod() {
-      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
+      GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken")).then(
-          .then(response => {
+        (response) => {
-            this.balance = response.currentMoney
+          this.balance = response.currentMoney;
-          })
+        }
-      eventBus.emit('Updatebalance-saper')
+      );
-    }
+      eventBus.emit("Updatebalance-saper");
+    },
   },
   data() {
     return {
       balance: 0,
       auth: false,
-      authtoken: '',
+      authtoken: "",
       imageUrl: "https://avatar.spworlds.ru/face/55/",
       userName: "",
     };
   },
   mounted() {
-    eventBus.on('Updatebalance', () => {
+    eventBus.on("Updatebalance", () => {
-      this.updateBalanceMethod()
+      this.updateBalanceMethod();
-    })
+    });
   },
   created() {
     try {
@@ -58,7 +59,7 @@ export default {
             this.imageUrl = this.imageUrl + `${response.spUserName}.png`;
             this.userName = response.spUserName;
             this.auth = true;
-            this.authtoken = response.authtoken
+            this.authtoken = response.authtoken;
             GetCurrentMoney(GetCookie("AUTHTOKEN"), GetCookie("SearchToken"))
               .then((response) => {
                 this.balance = response.currentMoney;
@@ -82,7 +83,7 @@ export default {
               this.imageUrl = this.imageUrl + `${currentUserName}.png`;
               this.userName = GetCookie("SpUserName");
               this.auth = true;
-              this.authtoken = GetCookie('AUTHTOKEN')
+              this.authtoken = GetCookie("AUTHTOKEN");
             } else {
               this.auth = false;
               this.balance = 0;
@@ -104,7 +105,7 @@ export default {
           this.imageUrl = this.imageUrl + `${currentUserName}.png`;
           this.userName = GetCookie("SpUserName");
           this.auth = true;
-          this.authtoken = GetCookie('AUTHTOKEN')
+          this.authtoken = GetCookie("AUTHTOKEN");
         } else {
           this.auth = false;
           this.balance = 0;
@@ -120,14 +121,39 @@ export default {
   <header class="header">
     <div class="header__content">
       <div class="header__logo">
-        <img @click="$router.push({ name: 'home' })" src="../assets/logo.svg" alt="" />
+        <img
+          @click="$router.push({ name: 'home' })"
+          src="../assets/logo.svg"
+          alt=""
+        />
       </div>
       <div class="header__nav">
         <nav>
-          <a href="#" @click="$router.push({ name: 'home' })" :class="{ 'header__nav--now' : $route.name === 'home' }">Главная</a>
+          <a
-          <a v-if="authtoken !== ''" href="#" @click="$router.push({ name: 'profile' })" :class="{ 'header__nav--now' : $route.name === 'profile' }">Профиль</a>
+            href="#"
-          <a href="#" @click="$router.push({ name: 'help' })" :class="{ 'header__nav--now' : $route.name === 'help' }">Помощь</a>
+            @click="$router.push({ name: 'home' })"
-          <a href="#" @click="$router.push({ name: 'about' })" :class="{ 'header__nav--now' : $route.name === 'about' }">О нас</a>
+            :class="{ 'header__nav--now': $route.name === 'home' }"
+            >Главная</a
+          >
+          <a
+            v-if="authtoken !== ''"
+            href="#"
+            @click="$router.push({ name: 'profile' })"
+            :class="{ 'header__nav--now': $route.name === 'profile' }"
+            >Профиль</a
+          >
+          <a
+            href="#"
+            @click="$router.push({ name: 'help' })"
+            :class="{ 'header__nav--now': $route.name === 'help' }"
+            >Помощь</a
+          >
+          <a
+            href="#"
+            @click="$router.push({ name: 'about' })"
+            :class="{ 'header__nav--now': $route.name === 'about' }"
+            >О нас</a
+          >
         </nav>
       </div>
       <div class="header__balance">
@@ -160,7 +186,7 @@ export default {
           <!-- <div class="header__card--auth">  -->
           <div class="auth__card--content">
             <a
-              href="https://media.discordapp.net/attachments/1175674631684898866/1203382105934139422/Untitled.png?ex=65d0e3eb&is=65be6eeb&hm=226770699b0ac57c74b1516868e9d7ddb6eb1cb952366ea07e62ccf4ee551a1d&=&format=webp&quality=lossless"
+              href="https://media.discordapp.net/attachments/1208431882044448769/1211732312291541102/LUCKYDIAMOND.png?ex=65ef44a8&is=65dccfa8&hm=51e02afa10561b256c834abb0c6b525418c35ca9b878e48df66b75eee8d64e01&=&format=webp&quality=lossless"
               @click="auth = true"
               ><span
                 ><img
@@ -169,7 +195,11 @@ export default {
                   src="../assets/icons-header/discord-icon.svg" /></span
               >Вход</a
             >
-<!--            https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify-->
+            
+            <!--https://discord.com/oauth2/authorize?client_id=1148644854797176932&response_type=code&redirect_uri=https%3A%2F%2Fwww.lucky-diamonds.ru&scope=identify-->
+            <!-- href="https://media.discordapp.net/attachments/1175674631684898866/1203382105934139422/Untitled.png?ex=65d0e3eb&is=65be6eeb&hm=226770699b0ac57c74b1516868e9d7ddb6eb1cb952366ea07e62ccf4ee551a1d&=&format=webp&quality=lossless" -->
+            <!--            https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify-->
+            <!--            https://discord.com/oauth2/authorize?client_id=1148644854797176932&response_type=code&redirect_uri=https%3A%2F%2Fwww.lucky-diamonds.ru&scope=identify-->
           </div>
         </div>
       </div>

luckydiamond/src/components/games-components/CrashGraphComponent.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="time" v-if="crashdata.Status === 'WaitingForPlayers'"><h2>{{ crashdata.WaitingTime ? crashdata.WaitingTime.toFixed(1) : '' }} сек.</h2></div>
+  <div class="time" v-if="crashdata.Status === 'WaitingForPlayers'">
-  <LineChart
+    <h2>
-      :chart-data="data"
+      {{ crashdata.WaitingTime ? crashdata.WaitingTime.toFixed(1) : "" }} сек.
-      :options="options"
+    </h2>
-      v-else
+  </div>
-  />
+  <LineChart :chart-data="data" :options="options" v-else />
-  <h2 class="ratio" :class="{ 'lost-ratio' : crashdata.Status === 'GameEnd' }">{{ crashdata.CurrentX ? crashdata.CurrentX.toFixed(2) : '' }}x</h2>
+  <h2 class="ratio" :class="{ 'lost-ratio': crashdata.Status === 'GameEnd' }">
+    {{ crashdata.CurrentX ? crashdata.CurrentX.toFixed(2) : "" }}x
+  </h2>
 </template>
 
 <script>
@@ -20,17 +22,17 @@ import {
 } from "chart.js";
 
 Chart.register(
-    LineController,
+  LineController,
-    CategoryScale,
+  CategoryScale,
-    LinearScale,
+  LinearScale,
-    PointElement,
+  PointElement,
-    LineElement
+  LineElement
 );
 
 export default {
   components: { LineChart },
   props: {
-    crashdata: Object
+    crashdata: Object,
   },
   mounted() {
     this.data = this.chartData;
@@ -51,14 +53,14 @@ export default {
         scales: {
           x: {
             grid: {
-              display: false
+              display: false,
-            }
+            },
           },
           y: {
             grid: {
-              display: false
+              display: false,
-            }
+            },
-          }
+          },
         },
         animation: false,
       },
@@ -73,7 +75,7 @@ export default {
           {
             label: "Foo",
             data: this.dataValues,
-            borderColor: '#4E5EF2',
+            borderColor: "#4E5EF2",
             pointStyle: "circle",
             pointRadius: 0,
             pointHoverRadius: 2,
@@ -85,43 +87,40 @@ export default {
 
   watch: {
     crashdata: {
-      handler: 'updateData',
+      handler: "updateData",
-      immediate: true
+      immediate: true,
-    }
+    },
   },
 
   methods: {
     updateData() {
-      let nextDataValue
+      let nextDataValue;
-      if (this.crashdata.Status === 'WaitingForPlayers') {
+      if (this.crashdata.Status === "WaitingForPlayers") {
         this.data = this.chartData;
         this.labels = [""];
         this.dataValues = [this.numberGraph, this.numberGraph];
-      }
+      } else if (this.crashdata.Status === "InGame") {
-      else if (this.crashdata.Status === 'InGame') {
         if (this.dataValues.length === 0) {
-          this.dataValues = [this.crashdata.CurrentX, this.crashdata.CurrentX]
+          this.dataValues = [this.crashdata.CurrentX, this.crashdata.CurrentX];
-          nextDataValue = this.crashdata.CurrentX
+          nextDataValue = this.crashdata.CurrentX;
-          this.numberGraph = this.crashdata.CurrentX
+          this.numberGraph = this.crashdata.CurrentX;
 
-          this.data = this.chartData
+          this.data = this.chartData;
-          this.labels.push("")
+          this.labels.push("");
-          this.dataValues.push(nextDataValue)
+          this.dataValues.push(nextDataValue);
         }
 
-        this.numberGraph = this.numberGraph + .01
+        this.numberGraph = this.numberGraph + 0.01;
-        nextDataValue = this.numberGraph
+        nextDataValue = this.numberGraph;
 
         this.data = this.chartData;
         this.labels.push("");
         this.dataValues.push(nextDataValue);
-      }
+      } else if (this.crashdata.Status === "GameEnd") {
-      else if (this.crashdata.Status === 'GameEnd') {
+        this.dataValues = [];
-        this.dataValues = []
+        this.numberGraph = 1;
-        this.numberGraph = 1
+      } else {
-      }
+        console.log("Error game");
-      else {
-        console.log('Error game')
       }
     },
   },

luckydiamond/src/mocks/GameModes.js

@@ -6,7 +6,7 @@ export default [
     },
     {
         id: 2,
-        title: 'кейсы',
+        title: 'джекпот',
         players: 0
     },
     {

luckydiamond/src/mocks/JackpotNumbers.js

@@ -0,0 +1,20 @@
+export default [
+    {
+        diamonds: 1,
+    },
+    {
+        diamonds: 5,
+    },
+    {
+        diamonds: 10,
+    },
+    {
+        diamonds: 50,
+    },
+    {
+        diamonds: 100,
+    },
+    {
+        diamonds: 'max',
+    }
+]

luckydiamond/src/pages/HomePage.vue

@@ -60,18 +60,18 @@
               >
                 <div :class="'linecontent-' + mode.id">
                   <div class="container">
-                    <h1 class="title-firstline">{{ mode.title }}</h1>
+                    <h1 class="title-jackpot">{{ mode.title }}</h1>
                     <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
                     <a
                       href="#"
                       @click="$router.push({ name: 'jackpot' })"
-                      class="line__btn"
+                      class="line__btn__jackpot"
                       >play <span class="line__btn--elm">></span></a
                     >
                   </div>
                 </div>
-                <div class="line__img">
+                <div class="line__img__jackpot">
-                  <img src="@/assets/icons-gamemodes/case-icon.png" />
+                  <img src="@/assets/icons-gamemodes/jackpot_icon.svg" />
                 </div>
               </li>
             </ul>

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

@@ -1,43 +1,747 @@
 <template>
-        <div class="content-grid--jackpot" >
+  <div class="content-grid--jackpot">
-  <aside-bar-component></aside-bar-component>
+    <aside-bar-component></aside-bar-component>
 
-  <chat-component></chat-component>
+    <chat-component></chat-component>
 
-  <header-component></header-component>
+    <header-component></header-component>
-  <!-- <div class="grid-crash"> -->
+    <div class="bg-gradient-left"></div>
-  <!-- <div class="grid-crash">
+    <!-- <div class="bootstrap-wrapper">
-    <h1>Test</h1>
+      <div class="container">
+          <div class="row hidden-sm-down"> 
+              <div class="col-md-1">.</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+          </div>
+      </div>
   </div> -->
+    <!-- <section class="crash-game"> -->
+
+    <!-- <div class="jackpot-main-elements"> -->
+    <!-- <div class="bootstrap-wrapper">
+        <div class="container">
+          <div class="row hidden-sm-down">
+            <div class="col-md-1">.</div>
+            <div class="col-md-1">.col-</div>
+            <div class="col-md-1">.col-</div>
+            <div class="col-md-1">.col-</div>
+          </div>
         </div>
+      </div> -->
+    <section class="jackpot">
+      <div class="jackpot-start">
+        <div
+          class="jackpot-start__content title-saper padding-elements-jackpot"
+        >
+          <h2>Джекпот</h2>
+          <p>Больше ставь, больше побеждай!</p>
+
+          <div class="saper-start__choises diamonds diamonds-input__margin">
+            <h3>Сумма депозита</h3>
+
+            <div class="diamonds__choises">
+              <img
+                class="diamond-icon"
+                src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
+              />
+              <input
+                v-model="amountDeposit"
+                type="number"
+                id="diamonds-input"
+              />
+              <div class="diamonds__btns btn-style__diamonds">
+                <ul class="diamonds-btns__display">
+                  <li v-for="(item, index) in JackpotNumbers" :key="index">
+                    <button
+                      @click="clickedBtnChoice(index, item.diamonds)"
+                      :class="{
+                        'btn-click': clickedBtn === index,
+                        [index]: clickedBtn === index,
+                      }"
+                      :id="item.diamonds === 'max' ? 'max-button' : null"
+                      v-if="item.diamonds !== undefined"
+                    >
+                      {{ item.diamonds }}
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+          <div class="jackpot-start__btns">
+            <div class="error-block" v-if="ErrorClick">
+              <h2>Ошибка при заполнении</h2>
+            </div>
+            <button
+              class="btn-start"
+              :class="{ 'animate-start-btn': ErrorClick }"
+              @click="clickPlayBtn"
+            >
+              Начать игру
+            </button>
+            <!-- <button class="btn-claim" v-if="winningAmount === 0">Забрать {{ winningAmount }} АР</button>
+          <button class="btn-claim" @click="claimWinningAmount()" v-else>Забрать {{ winningAmount.toFixed(2) }} АР</button> -->
+          </div>
+        </div>
+      </div>
+      <!-- <div><h1>gfdgfd</h1></div>
+      <div><h1>gfdgfd</h1></div>
+       -->
+      <div class="jackpot-game">
+        <div class="bootstrap-wrapper">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-10">
+                <div class="jackpot-loading-bar">
+                  <div class="bank-container">
+                    <!-- <div class="bank-info"> -->
+                    <div class="bank-name">БАНК:</div>
+                    <h1></h1>
+                    <div class="bank-value" v-text="winStake"></div>
+                    <!-- </div> -->
+                    <div class="shield">
+                      <img
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                        alt="Shield"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="progress-bar">
+                    <div
+                      class="progress"
+                      :style="{ width: progressBarWidth + '%' }"
+                    >
+                      <span class="progress-text">{{
+                        remainingSeconds >= 0 ? remainingSeconds + " " : ""
+                      }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-2">
+                <div class="jackpot-last-game-bar">
+                  <div
+                    class="bootstrap-wrapper jackpot-last-game-bar-container"
+                  >
+                    <div class="container">
+                      <div class="row">
+                        <div class="col-md-2">
+                          <img
+                            src="@/assets/icons-gamemodes/last-game-icon.svg"
+                          />
+                        </div>
+                        <div
+                          class="col-md-8 jackpot-last-game-bar-container-text"
+                        >
+                          <h2>Последняя игра</h2>
+                        </div>
+                        <div class="jackpot-player-info">
+                          <div class="jackpot-player-avatar">
+                            <img :src="player.avatarUrl" alt="Player Avatar" />
+                          </div>
+                          <div class="jackpot-player-data">
+                            <div class="jackpot-player-gems">
+                              {{ player.gems }}
+                              <span class="jackpot-gems-icon">
+                                <img
+                                  src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png"
+                                />
+                              </span>
+                            </div>
+                            <div class="jackpot-player-name">
+                              {{ player.name }}
+                            </div>
+                          </div>
+                        </div>
+                        <div class="jackpot-player-chance">
+                          ШАНС
+                          <span class="jackpot-chance-value">{{
+                            player.chance
+                          }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="col-md-12">
+                <div class="jackpot-carousel">
+                  <div class="carousel-arrow">▲</div>
+                  <Carousel
+                    @slide-start="handleSlideStart"
+                    ref="carousel"
+                    :itemsToShow="10"
+                    :autoplay="autoplay"
+                    :transition="150"
+                    :wrapAround="true"
+                    class="no-pointer-events"
+                  >
+                    <Slide v-for="(slide, index) in slides" :key="index">
+                      <div class="carousel__item">
+                        <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-banner">
+                      <div class="jackpot-content">
+                        <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>
+                        </div>
+                      </div>
+                      <div class="jackpot-chance">
+                        ШАНС
+                        <span class="jackpot-percentage"
+                          >{{ user.chance }}%</span
+                        >
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- </div> -->
+    <!-- </section> -->
+
+    <!-- <div class="crash-content"> -->
+
+    <!-- </div> -->
+    <!-- <section class="jackpot">
+
+
+  </section> -->
+  </div>
 </template>
 <script>
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
-import {GetCookie} from "@/assets/js/storage/CookieStorage";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
-import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+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,
+  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";
-// import '@/assets/css/PagesStyles/games-pages/jackpot.css'
 export default {
-  components: { HeaderComponent, AsideBarComponent, ChatComponent },
+  components: {
+    HeaderComponent,
+    AsideBarComponent,
+    ChatComponent,
+    Carousel,
+    Slide,
+    // 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 {
-      //   SaperNumbers,
+      JackpotNumbers,
-      //   clickedBtn: null,
+      autoplay: 0,
-      //   ErrorClick: false,
+      player: {
-      //   ErrorJoin: false,
+        name: "",
-      //   balance: 0,
+        gems: 1000,
-      //   amountDeposit: 0,
+        avatarUrl: "https://avatar.spworlds.ru/face/55/test",
-      //   crashObject: '',
+        chance: "100%",
-      //   textError: '',
+        // name: "FUpir",
-      //   startGame: false,
+        // gems: 500,
-      //   offBtn: false
+        // 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
+        // },
+      ],
+      // Добавьте других пользователей по аналогии
+      // slides: [
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
+      //     nickname: "Hepatir",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
+      //     nickname: "Hepatir",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //     nickname: "Ckutls_",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //     nickname: "Ckutls_",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //     nickname: "Ckutls_",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
+      //     nickname: "Hepagfdtir",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //     nickname: "Ckutls_",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //     nickname: "Ckutls_",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Ckutls_.png",
+      //     nickname: "Ckutls_",
+      //   },
+      //   {
+      //     img: "https://avatar.spworlds.ru/face/55/Hepatir.png",
+      //     nickname: "Hepgdfatir",
+      //   },
+      // ],
+      slides: [],
+      currentSlide: 0,
+      value: 0,
+      max: 100,
+      offBtn: false,
+      amountDeposit: 0,
+      targetNickname: "",
+      isStopButtonPressed: false,
+      isGameTimerStarted: false,
+      remainingSeconds: 0,
+      progressBarWidth: 0,
+      idCurrentGame: "",
+      lastUserWinerGameId: " ",
+      lastUserWinner: "",
+      firstStartOfPage: false,
+      winStake: 0,
+      // lastIdGame: "",
     };
   },
 
+  methods: {
+    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 / 7; // Предполагаем, что 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,
+              });
+              this.firstStartOfPage = false;
+            } 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,
+          });
+        }
+      });
+    },
+    checkGameEnd(endGameUtc) {
+      const endTime = new Date(endGameUtc).getTime();
+      const currentTime = new Date().getTime();
+      const timeLeft = endTime - currentTime;
+
+      if (timeLeft > 0) {
+        // Устанавливаем таймер, который сработает, когда игра должна закончиться
+        setTimeout(() => {
+          eventBus.emit("gameEnded"); // Транслируем событие окончания игры
+          console.log("Game has ended");
+        }, timeLeft);
+      } else {
+        console.log("Game has already ended");
+      }
+    },
+    resetLoadingBar() {
+      const progressBarElement = document.querySelector(".progress");
+      if (progressBarElement) {
+        const progressText = progressBarElement.querySelector(".progress-text");
+        setTimeout(() => {
+          progressBarElement.style.width = `1%`; // Устанавливаем ширину в 1%
+          if (progressText) {
+            progressText.textContent = `0`; // Устанавливаем текст
+            // Если вы хотите изменить прозрачность текста, раскомментируйте следующую строку
+            // progressText.style.opacity = "1"; // Устанавливаем прозрачность текста
+          }
+        }, 1500);
+      }
+    },
+    startAutoScroll() {
+      this.interval = setInterval(() => {
+        this.$refs.carousel.next();
+      }, 1);
+    },
+    startGameTimer(startGameUtc) {
+      if (!this.isGameTimerStarted) {
+        this.isGameTimerStarted = true;
+
+        const startTime = new Date(startGameUtc).getTime();
+        const updateTimer = () => {
+          if (this.timerInterval == null) {
+            return;
+          }
+          const currentTime = new Date().getTime();
+          const diff = startTime - currentTime;
+          this.remainingSeconds = Math.max(0, Math.floor(diff / 1000));
+          if (diff <= 0) {
+            this.remainingSeconds = 0;
+            this.progressBarWidth = 100; // Полный прогресс
+            // Действия после окончания таймера, если необходимо
+          } else {
+            this.remainingSeconds = Math.floor(diff / 1000); // Обновляем оставшееся время в секундах
+            const totalDuration = 30; // Допустим, обратный отсчет идет с 10 секунд1
+            this.progressBarWidth =
+              ((totalDuration - this.remainingSeconds) / totalDuration) * 100;
+          }
+
+          const progressBarElement = document.querySelector(".progress");
+          if (progressBarElement) {
+            const progressText =
+              progressBarElement.querySelector(".progress-text");
+            if (progressText) {
+              progressText.style.opacity = "0";
+              setTimeout(() => {
+                progressBarElement.style.width = `${this.progressBarWidth}%`;
+                if (this.remainingSeconds > 8) {
+                  progressText.textContent = `${this.remainingSeconds}`;
+                } else {
+                  progressText.textContent = `${this.remainingSeconds} СЕК`;
+                }
+                progressText.style.opacity = "1";
+              }, 500); // Задержка должна соответствовать продолжительности анимации
+            }
+          }
+        };
+
+        // Запускаем таймер
+        this.timerInterval = setInterval(updateTimer, 1000);
+        updateTimer(); // Вызываем сразу для инициализации
+      }
+    },
+    handleSlideStart(data) {
+      try {
+        let { slidingToIndex, currentSlideIndex } = data;
+
+        if (
+          this.slides[slidingToIndex] &&
+          this.slides[slidingToIndex].nickname
+        ) {
+          if (
+            this.isStopButtonPressed &&
+            this.idCurrentGame == this.lastUserWinerGameId
+          ) {
+            if (
+              this.slides[currentSlideIndex].nickname == this.targetNickname
+            ) {
+              // this.$refs.carousel.slideTo(this.currentSlideIndex);
+
+              // if (this.slides[this.currentSlideIndex].nickname == this.targetNickname) {
+
+              this.stopAutoplay();
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error in handleSlideStart:", error);
+      }
+    },
+    stopCarousel() {
+      this.isStopButtonPressed = true;
+      this.autoplay = 200;
+      setTimeout(() => {
+        if (this.isStopButtonPressed) {
+          this.autoplay = 500;
+        }
+      }, 1000);
+    },
+    stopAutoplay() {
+      this.targetNickname = "";
+      this.autoplay = 0;
+      this.isGameTimerStarted = false;
+      this.isStopButtonPressed = false;
+      this.lastUserWinerGameId = " ";
+      this.idCurrentGame = "";
+      this.lastUserWinner = "";
+      this.resetLoadingBar();
+
+      clearInterval(this.timerInterval);
+
+      this.timerInterval = null;
+    },
+    changeLastFiveImages() {
+      const newImage = "https://avatar.spworlds.ru/face/55/Hepatir.png";
+      console.log(this.slides);
+      this.slides[9].img = newImage;
+    },
+    stopOnTarget(targetNickname) {
+      if (this.slides[this.currentSlide].nickname === targetNickname) {
+        this.autoplay = 0;
+        return true; // Возвращаем true, если нашли нужный слайд
+      }
+      return false; // Возвращаем false, если нужный слайд не найден
+    },
+  },
+  mounted() {
+    ConnectToJackpotSocket();
+
+    eventBus.on("jackpotGameTik", (data) => {
+      try {
+        if (data) {
+          const dataObject = JSON.parse(data);
+          this.winStake = dataObject.CurrentGame.WinStake;
+
+          console.log(dataObject);
+
+          if (dataObject.CurrentGame.GameState == "WaitingForPlayers") {
+            console.log("Waiting for players");
+            console.log("Put there earlies cards");
+            this.lastUserWinner = dataObject.LastGame.WinnerUserName;
+            this.lastUserWinerGameId = dataObject.LastGame.Id;
+            if (this.lastUserWinerGameId == this.idCurrentGame) {
+              this.targetNickname = this.lastUserWinner;
+              this.stopCarousel();
+            }
+            if (this.idCurrentGame == "") {
+              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.idCurrentGame = dataObject.CurrentGame.Id;
+            }
+            this.mapPlayersToSlides(
+              dataObject.CurrentGame.PlayerList,
+              dataObject.CurrentGame.PlayerList
+            );
+            this.startGameTimer(dataObject.CurrentGame.StartGameUtc);
+          }
+
+          this.updatePlayerInfo(
+            dataObject.LastGame.WinnerUserName,
+            dataObject.LastGame.WinStake,
+            dataObject.LastGame.WinnerPercentage
+          );
+
+          if (dataObject.CurrentGame.GameState == "Running") {
+            this.autoplay = 20;
+            if (this.idCurrentGame == "") {
+              this.firstStartOfPage = true;
+              this.idCurrentGame = dataObject.CurrentGame.Id;
+              this.mapPlayersToSlides(
+                dataObject.CurrentGame.PlayerList,
+                dataObject.CurrentGame.PlayerList
+              );
+            }
+          }
+        } else {
+          // Если данные не определены или пусты, выводим соответствующее сообщение в консоль
+          console.log("Received undefined or null data");
+        }
+        // console.log(dataFromServer);
+      } catch (error) {
+        console.log(error);
+      }
+    });
+    eventBus.on("gameEnded", () => {
+      setTimeout(() => {
+        if (!this.isStopButtonPressed) {
+          // if (this.idCurrentGame == this.lastUserWinerGameId) {
+          this.targetNickname = this.lastUserWinner;
+          this.stopCarousel();
+          // }
+        }
+      }, 1000);
+    });
+  },
+  watch: {},
   async created() {
+    this.firstStartOfPage = true;
+
     if (GetCookie("AUTHTOKEN") && GetCookie("SearchToken")) {
       await GetCurrentMoney(
         GetCookie("AUTHTOKEN"),
@@ -47,5 +751,95 @@ 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>
+
+<style scoped>
+.carousel__slide {
+  padding: 5px;
+}
+
+.carousel__viewport {
+  perspective: 2000px;
+}
+
+.carousel__track {
+  transform-style: preserve-3d;
+}
+
+.carousel__slide--sliding {
+  transition: 0.5s;
+}
+
+.carousel__slide {
+  opacity: 0.9;
+  transform: rotateY(-20deg) scale(0.9);
+}
+
+.carousel__slide--active ~ .carousel__slide {
+  transform: rotateY(20deg) scale(0.9);
+}
+
+.carousel__slide--prev {
+  opacity: 1;
+  transform: rotateY(-10deg) scale(0.95);
+}
+
+.carousel__slide--next {
+  opacity: 1;
+  transform: rotateY(10deg) scale(0.95);
+}
+
+.carousel__slide--active {
+  opacity: 1;
+  transform: rotateY(0) scale(1.1);
+}
+</style>

luckydiamond/src/properties/Сonfig.js

@@ -2,4 +2,6 @@ export const BackendApiUrl  = 'https://spsystemcore20231122004605.azurewebsites.
 
 export const BackendWebSocketUrl  = 'wss://spsystemcore20231122004605.azurewebsites.net';
 
+export const BackendWebSocketJackpotUrl  = 'wss://spsystemcore20231122004605.azurewebsites.net/jackpot';
+ 
  // export const BackendApiUrl = 'https://localhost:7062/api';

luckydiamond/vue.config.js

@@ -15,7 +15,7 @@ const path = require('path');
 module.exports = {
   // Установка базового URL-адреса для проекта
   publicPath: '/',
-
+  productionSourceMap: false,
   // Настройка Webpack
   configureWebpack: {
     resolve: {