Merge branch 'main' into DevelopMadara

luckydiamond/src/assets/css/ComponentsStyles/payments-modal.css

@@ -1,13 +1,3 @@
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-input:focus {
-    outline: none;
-}
-
 .payment-modal {
     position: absolute;
     top: 20%;

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

@@ -0,0 +1,442 @@
+.crash-content {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(5, 1fr);
+    gap: 0.625rem; /* 10px в рем */
+    grid-auto-flow: row;
+    grid-template-areas:
+    "crashgame crashgame crashgame crashgame crashgame crashgame"
+    "crashgame crashgame crashgame crashgame crashgame crashgame"
+    "crashgame crashgame crashgame crashgame crashgame crashgame"
+    "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers"
+    "crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers";
+    background: #17181C;
+    box-shadow: 0 0.25rem #00000040;
+    border-radius: 1.25rem;
+
+.grid-crash .chat {
+    height: 96.8%;
+}
+
+.crash-game {
+    background: #22252F;
+    border-radius: 1.25rem;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px #00000040;
+    width: 95%;
+    height: 29.6875rem;
+    margin: 2.5625rem auto 0 auto;
+}
+
+.crash-game__content {
+    display: flex;
+}
+
+/* Crash-Window */
+
+.crash-game__start-window {
+    margin-left: 30px;
+    height: 0;
+}
+
+.crash-game__start-window .crash__game-name {
+    margin: 62px 0 2px 0;
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 26px;
+    color: #fff;
+    box-shadow: 1px 1px 1px 0px #00000001;
+}
+
+.crash-game__start-window p {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 14px;
+    color: #FFFFFF85;
+}
+
+.crash-game-window__inputs {
+    margin-top: 29px;
+}
+
+.crash-label {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 13px;
+    color: #44C6EF54;
+    margin: 0 0 4px 4px;
+}
+
+.input-style-crash {
+    width: 347px;
+    height: 40px;
+    border: 2px solid #2B3458;
+    border-radius: 15px;
+    background: #22252F;
+}
+
+.diamond-input-crash {
+    margin-left: -25px;
+}
+
+.input-style-crash__text {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 12px;
+    color: #fff;
+    padding-left: 35px;
+}
+
+.crash-input-deposit .diamonds-btns__display {
+    margin: 8px 0 19px -22px;
+}
+
+.crash-input-deposit #max-button {
+    padding: 4px 10px;
+}
+
+.crash-input-deposit .diamond-icon {
+    left: 12px;
+}
+
+.crash-game-window__btn-start {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 23px;
+}
+
+.crash-game-window__btn-start button {
+    margin-bottom: 5px;
+    background: #EF4444;
+    border: unset;
+    border-radius: 10px;
+    width: 300px;
+    height: 60px;
+    font-family: 'Inter';
+    font-weight: 700;
+    font-size: 18px;
+}
+
+.claim-btn-crash__prize {
+    background: #4E5EF2 !important;
+}
+
+.waiting-btn-crash {
+    background: #3D3F48 !important;
+}
+
+.crash-window__line {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.line-crash {
+    width: 2px;
+    height: 474px;
+    background: #30364F;
+    position: relative;
+    top: -342px;
+    left: 10%;
+    z-index: 1;
+}
+
+.crash-game__content .error-block {
+    top: 425px;
+}
+
+/* /Crash-Window */
+
+/* Crash-Graph */
+
+.crash-game__graph {
+    width: 800px;
+    top: 200px;
+    left: 600px;
+    position: fixed;
+}
+
+
+.chart-container canvas {
+    background-color: transparent !important;
+    width: 800px !important;
+    height: 400px !important;
+    transition: .3s ease;
+}
+
+.lost-ratio {
+    color: #EF4444;
+    font-weight: 700;
+}
+
+/* /Crash-Graph */
+
+/* Crash-Players */
+
+.user-crash {
+    display: flex;
+    justify-content: end;
+    margin-left: 400px;
+}
+
+.user-list {
+    overflow-y: auto;
+    height: 300px;
+}
+
+.user-crash-content {
+    background: linear-gradient(90deg, rgba(34, 37, 47, 0.8) -0.54%, rgba(34, 37, 47, 0.8) 83.03%, rgba(73, 59, 74, 0.64) 103.54%);
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: repeat(5, 50px) 100px;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas:
+    "username username bid bid ... status";
+    margin: 10px auto;
+    width: 90%;
+    height: 70px;
+    border-radius: 18px;
+}
+
+.user-crash-content__lose {
+    background: linear-gradient(90deg, #22252F -0.54%, #322733 83.25%, #B53938 103.54%) !important;
+}
+
+.user-crash-content__win {
+    background: linear-gradient(90deg, #22252F -0.54%, #22252F 84.17%, rgba(42, 110, 57, 0.87) 103.54%);
+}
+
+.user-name-crash {
+    display: flex;
+    align-items: center;
+    margin: 10px;
+    grid: 'username';
+}
+
+.user-name-crash h2 {
+    margin-left: 8px;
+    color: #61647F;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 20px;
+}
+
+.user-name-crash img {
+    width: 50px;
+}
+
+.user-bid-crash {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    grid-area: bid;
+}
+
+.user-bid-crash h2 {
+    color: #848484;
+    font-weight: 700;
+    font-family: 'Montserrat';
+    font-size: 24px;
+}
+
+.user-bid-crash img {
+    margin: 5px 0 0 5px;
+}
+
+.user-game-status-crash {
+    display: flex;
+    align-items: center;
+    grid-area: status;
+}
+
+.user-game-status-crash h2 {
+    font-size: 20px;
+}
+
+.wingame__win-bid-crash {
+    color: #28BD49 !important;
+}
+
+.ingame-crash {
+    color: #61647F;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 12px;
+    background: #22252F;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    border-radius: 5px;
+    width: 70px;
+    height: 24px;
+}
+
+.lostgame-crash {
+    color: #fff;
+    font-weight: 700;
+    font-family: 'Montserrat';
+    background: #EF4847;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    border-radius: 5px;
+    margin-left: -26px;
+    padding: 4px;
+}
+
+.wingame-crash {
+    box-shadow: 0px 4px 4px 0px #00000040;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    color: #28BD49;
+    border: 1px solid #28BD49;
+    border-radius: 5px;
+    padding: 6px;
+}
+
+.ratio {
+    position: relative;
+    left: 50%;
+    top: -390px;
+    font-size: 34px;
+    font-weight: 700;
+    font-family: 'Montserrat';
+}
+
+.time {
+    position: relative;
+    left: 50%;
+    font-size: 34px;
+    font-weight: 700;
+    font-family: 'Montserrat';
+}
+
+/* /Crash-Players */
+
+/* Notification */
+
+.notification-crash {
+    text-align: center;
+    top: 20%;
+    left: 50%;
+    position: absolute;
+    background: #000;
+    width: 200px;
+    height: 40px;
+}
+
+/* /Notification */
+
+/* Media */
+
+@media screen and (max-width: 1740px) and (min-width: 1400px) {
+    .crash-game__content .error-block{
+        top: 407px !important;
+    }
+    .crash-game__graph {
+        width: 500px;
+        height: 500px;
+        top: 190px;
+        left: 570px;
+    }
+    .crash-input-deposit .btn-style__diamonds button {
+        padding: 4px 18px !important;
+    }
+    .chart-container {
+        width: 500px !important;
+        height: 500px !important;
+    }
+}
+
+@media screen and (max-width: 1400px) and (min-width: 1200px) {
+    .header__nav nav a {
+        font-size: 16px;
+    }
+    .crash-game__content .error-block{
+        top: 405px !important;
+    }
+    .crash-game__graph {
+        width: 400px;
+        height: 400px;
+        top: 180px;
+        left: 550px;
+    }
+    .chart-container {
+        width: 400px !important;
+        height: 400px !important;
+    }
+    .crash-input-deposit .btn-style__diamonds button {
+        padding: 4px 18px !important;
+    }
+}
+
+@media screen and (max-height: 950px) and (min-height: 915px) {
+    .grid-crash .chat {
+        height: 92.5%;
+    }
+    .crash-game__players {
+        height: 270px;
+    }
+    .crash-game-players__content {
+        height: 230px;
+    }
+    .ratio {
+        top: -380px;
+    }
+    .time {
+        left: 45%;
+    }
+}
+
+@media screen and (max-height: 915px) and (min-height: 890px) {
+    .grid-crash .chat {
+        height: 100%;
+    }
+    .chat__content--users {
+        height: 58vh;
+    }
+    .crash-game {
+        height: 40vh;
+    }
+    .crash-game__players {
+        height: 290px;
+    }
+    .crash-game-players__content {
+        height: 250px;
+    }
+    .crash-game__graph {
+        height: 100px !important;
+        top: 200px;
+    }
+    #line-chart {
+        height: 300px !important;
+    }
+    .ratio {
+        top: -320px;
+    }
+    .time {
+        left: 40%;
+    }
+    .line-crash {
+        height: 366px;
+    }
+}}
+
+@media screen and (min-height: 950px) {
+  .chat {
+    height: 88vh !important;
+  }
+}
+
+/*.crash-game__graph {*/
+/*    width: 800px;*/
+/*    top: 200px;*/
+/*    left: 600px;*/
+/*    position: fixed;*/
+/*}*/
+
+
+/*.chart-container canvas {*/
+/*    background-color: transparent !important;*/
+/*    width: 800px !important;*/
+/*    height: 400px !important;*/
+/*    transition: .3s ease;*/
+/*}*/
+
+/* /Media */

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

@@ -1,17 +1,3 @@
-button {
-    cursor: pointer;
-}
-
-button:focus {
-    outline: none;
-}
-
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
 .saper {
     display: flex;
     padding-top: 10%;
@@ -190,7 +176,7 @@ input[type="number"]::-webkit-outer-spin-button {
     font-family: Inter;
     font-size: 16px;
     font-weight: 700;
-    padding: 4px 15px;
+    padding: 4px 13px;
 }
 
 .saper-start__btns {
@@ -253,7 +239,7 @@ input[type="number"]::-webkit-outer-spin-button {
 
 .error-block {
     position: absolute;
-    top: 440px;
+    top: 445px;
 }
 
 .error-block h2 {
@@ -483,7 +469,9 @@ input[type="number"]::-webkit-outer-spin-button {
     .saper-game__content {
         width: auto;
     }
-
+    .error-block {
+        top: 425px;
+    }
     .saper-start {
         width: 30%;
         height: 500px;
@@ -562,7 +550,9 @@ input[type="number"]::-webkit-outer-spin-button {
     .bg-two {
         left: 300px;
     }
-
+    .error-block {
+        top: 410px;
+    }
     .saper-game__content {
         width: auto;
     }

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

@@ -377,4 +377,10 @@
     }
 }
 
+@media screen and (min-height: 910px) {
+  .chat {
+    height: 87vh !important;
+  }
+}
+
 /* /Media */

luckydiamond/src/assets/css/global.css

@@ -11,20 +11,39 @@ ul {
     list-style: none;
 }
 
-body, html {
+body,
+html {
     background: #121212;
     height: 100%;
     margin: 0;
     overflow-y: hidden;
 }
 
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+button:focus {
+    outline: none;
+}
+
+button {
+    cursor: pointer;
+}
+
 /* /Global Settings */
 
 /* Content Grid */
 
 .content-grid {
     display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-auto-columns: 1fr;
     grid-auto-flow: row;
@@ -36,12 +55,12 @@ body, html {
         "menu gamemode gamemode gamemode gamemode gamemode chat"
         "menu gamemode gamemode gamemode gamemode gamemode chat";
     height: 100%;
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
 }
 
 .content__grid-profile {
     display: grid;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-auto-columns: 1fr;
     grid-auto-flow: row;
@@ -52,15 +71,16 @@ body, html {
         "menu profile profile profile profile profile chat"
         "menu profile profile profile profile profile chat"
         "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
         "menu profile profile profile profile profile chat";
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
     height: 100%;
 }
 
 .content-grid--saper {
     display: grid;
     grid-auto-columns: 1fr;
-    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-template-areas:
         "menu header header header header header header"
@@ -70,9 +90,41 @@ body, html {
         "menu saper saper saper saper saper chat"
         "menu saper saper saper saper saper chat"
         "menu saper saper saper saper saper chat";
-    grid-gap: 10px;
+    grid-gap: 0.625rem;
 }
 
+.content-grid--jackpot {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat";
+    grid-gap: 0.625rem;
+}
+
+.grid-crash {
+    display: grid;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-auto-columns: 1fr;
+    gap: 0.625rem;
+    grid-auto-flow: row;
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat";
+}
 
 /* /Content Grid */
 
@@ -80,9 +132,9 @@ body, html {
 
 .header {
     grid-area: header;
-    border-radius: 20px;
+    border-radius: 1.25rem;
     background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
     align-self: start;
 }
 
@@ -93,8 +145,8 @@ body, html {
 .menu {
     grid-area: menu;
     background: #17181C;
-    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
-    border-radius: 20px;
+    border-radius: 1.25rem;
     align-self: start;
 }
 
@@ -105,9 +157,9 @@ body, html {
 .chat {
     grid-area: chat;
     background: #16171B;
-    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
+    filter: drop-shadow(0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
     border-radius: 0;
-    /* border-radius: 20px; */
+    /* border-radius: 1.25rem; */
     height: 100%;
     position: relative;
     z-index: 3;
@@ -142,10 +194,20 @@ body, html {
     display: flex;
     grid-area: profile;
     height: 95%;
-    border-radius: 50px;
+    border-radius: 3.125rem;
     background: #17181C;
-    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
-    margin: 10px 39px 18px 13px;
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
+}
+
+.jackpot {
+    display: flex;
+    grid-area: jackpot;
+    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;
 }
 
 /* /Profile */
@@ -159,6 +221,22 @@ body, html {
 
 /* /Saper */
 
+/* Crash */
+
+.crash-content {
+    grid-area: crash;
+}
+
+.crash-game {
+    grid-area: crashgame;
+}
+
+.crash-game__players {
+    grid-area: crashplayers;
+}
+
+/* /Crash */
+
 /* Media */
 
 /* /Media */

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

@@ -1,66 +1,70 @@
-// import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
+import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
-// import { eventBus } from "@/main";
+import { eventBus } from "@/main";
-// import {
+import {
-//     GetCookie
+    GetCookie
-// } from "@/assets/js/storage/CookieStorage.js";
+} from "@/assets/js/storage/CookieStorage.js";
-//
+
-// let webSocket;
+let webSocket;
-//
+
-// export function ConnectToChat() {
+export function ConnectToChat() {
-//     try {
+    try {
-//         webSocket = new WebSocket(BackendWebSocketUrl);
+        webSocket = new WebSocket(BackendWebSocketUrl);
-//
+
-//         webSocket.onopen = function () {
+        webSocket.onopen = function () {
-//             console.log('Connection established');
+            console.log('Connection established');
-//         };
+        };
-//
+
-//         webSocket.onmessage = function (event) {
+        webSocket.onmessage = function (event) {
-//
+
-//             const dataObject = JSON.parse(event.data);
+            const dataObject = JSON.parse(event.data);
-//
+
-//             if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
+            if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
-//                 eventBus.emit('dataChat', event.data);
+                eventBus.emit('dataChat', event.data);
-//             }
+                console.log('CHAT')
-//
+            }
+            else {
+                eventBus.emit('crash', event.data)
+            }
+
             // console.log('Message from Server:', event.data);
-//         };
+        };
-//
+
-//         webSocket.onclose = function () {
+        webSocket.onclose = function () {
-//
+
-//             webSocket = new WebSocket(BackendWebSocketUrl);
+            webSocket = new WebSocket(BackendWebSocketUrl);
-//
+
-//             console.log('Connection closed and reconnected');
+            console.log('Connection closed and reconnected');
-//         };
+        };
-//
+
-//         webSocket.onerror = function (event) {
+        webSocket.onerror = function (event) {
-//             console.error('WebSocket Error:', event);
+            console.error('WebSocket Error:', event);
-//         };
+        };
-//     } catch (error) {
+    } catch (error) {
-//         console.error('Error in ConnectToChat:', error);
+        console.error('Error in ConnectToChat:', error);
-//     }
+    }
-// }
+}
-//
+
-// export function SendMessageToChat(message) {
+export function SendMessageToChat(message) {
-//     try {
+    try {
-//
+
-//         if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
+        if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
-//             return;
+            return;
-//         }
+        }
-//
+
-//         const userCredentials = {
+        const userCredentials = {
-//             SearchToken: GetCookie("SearchToken"),
+            SearchToken: GetCookie("SearchToken"),
-//             AUTHTOKEN: GetCookie("AUTHTOKEN")
+            AUTHTOKEN: GetCookie("AUTHTOKEN")
-//         };
+        };
-//
+
-//         const messageObject = {
+        const messageObject = {
-//             UserCredentials: userCredentials,
+            UserCredentials: userCredentials,
-//             Message: message,
+            Message: message,
-//             MessageType: "Chat"
+            MessageType: "Chat"
-//         };
+        };
-//
+
-//         webSocket.send(JSON.stringify(messageObject));
+        webSocket.send(JSON.stringify(messageObject));
-//
+
-//     } catch (error) {
+    } catch (error) {
-//         console.error('Error in ConnectToChat:', error);
+        console.error('Error in ConnectToChat:', error);
-//     }
+    }
-// }
+}

luckydiamond/src/assets/js/games/crash/CrashAPI.js

@@ -0,0 +1,63 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+
+export async function JoinCrashGame(userData, amount) {
+    const data = {
+        userCredentials: {
+            searchToken: userData.searchToken,
+            authtoken: userData.authtoken
+        },
+        bid: amount
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameCrash/JoinCrashGame`, {
+            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')
+    }
+}
+
+export async function ExitAndTakeMoneyFromCrashGame(userData) {
+    const data = {
+        exitUserCredentials: {
+            searchToken: userData.searchToken,
+            authtoken: userData.authtoken
+        }
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameCrash/ExitAndTakeMoneyFromCrashGame`, {
+            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/AsidebarComponent.vue

@@ -7,7 +7,7 @@
       <div class="menu__btns--gamemodes">
         <div class="menu__content--gamemodes">
           <a href="#"><img class="menu__content--slots-icon" src="../assets/icons-menu/slots-icon.svg"></a>
-          <a href="#"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
+          <a href="#" @click="$router.push({ name: 'crash' })"><img  class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
           <a href="#"><img  src="../assets/icons-menu/case-icon.png"></a>
           <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a>
         </div>

luckydiamond/src/components/PaymentsModal.vue

@@ -19,11 +19,11 @@
         <input :class="{ 'animate-start-btn' : errorDeposit }" class="deposit-amount__input" v-model="amount" type="number" />
         <div class="deposit-btns">
           <ul class="display-btns btns-style-diamonds">
-            <li v-for="number in PaymentsModalNumbers" :key="number">
+            <li v-for="(number, index) in PaymentsModalNumbers" :key="index">
               <button
-                @click="clickedBtnChoice(number, number.diamonds)"
+                @click="clickedBtnChoice(index, number.diamonds)"
                 :class="{
-                  'btn-click': clickedBtn === number,
+                  'btn-click': clickedBtn === index,
                   [number]: clickedBtn === number,
                 }"
               >
@@ -132,7 +132,6 @@ export default {
       amount: 0,
       amountWithdraw: 0,
       balance: 0,
-      amountSave: 1,
       card: '',
       promocode: '',
       promocodeBase: ['ANTI-GRIF'],
@@ -145,8 +144,6 @@ export default {
       captchaToken: null,
       clickedBtn: "",
       url: "",
-      offBtn: true,
-      offAgree: true,
       completeValidtaion: {
         amountsaving: true,
         cardsaving: false,
@@ -174,44 +171,36 @@ export default {
     }
   },
   watch: {
-    // amount(newAmount) {
+    amount(DepositCount) {
-    //   this.offBtn = true;
+      console.log(DepositCount)
-    //   if (this.amount > 0 && this.amount !== "") {
+      if (![1, 5, 10, 50, 100, 1000].includes(DepositCount)) {
-    //     setTimeout(() => {
+        this.clickedBtn = null
-    //       try {
+      }
-    //         GettingMoneyOperation(newAmount).then((response) => {
+      else {
-    //           console.log("Payments Modal Working!: ", response);
+        let index
-    //           this.url = response;
+        switch (DepositCount) {
-    //           this.offBtn = false;
+          case 1:
-    //         });
+            index = 0
-    //       } catch (e) {
+            break
-    //         console.error("Error in PaymentModal!", e);
+          case 5:
-    //       }
+            index = 1
-    //     }, 2000);
+            break
-    //   }
+          case 10:
-    // },
+            index = 2
-    // amountWithdraw(newAmount) {
+            break
-    //   this.completeValidtaion.amountsaving = false
+          case 50:
-    //   if (newAmount > 0) {
+            index = 3
-    //     this.amountSave = newAmount
+            break
-    //     this.completeValidtaion.amountsaving = true
+          case 100:
-    //     console.log(this.completeValidtaion)
+            index = 4
-    //   }
+            break
-    // },
+          case 1000:
-    // card(newAmount) {
+            index = 5
-    //   this.completeValidtaion.cardsaving = false
+            break
-    //   const cardPattern = /^\d{5}$/;
+        }
-    //   if(cardPattern.test(newAmount)) {
+        this.clickedBtnChoice(index, DepositCount)
-    //     this.offAgree = false
+      }
-    //     this.completeValidtaion.cardsaving = true
+    },
-    //   }
-    // },
-    // agreeUser(newAgree) {
-    //   this.completeValidtaion.agreesaving = false
-    //   if (newAgree !== false) {
-    //     this.completeValidtaion.agreesaving = true
-    //   }
-    // },
     completeValidtaion: {
       handler() {
         this.completeValidationCheck()
@@ -219,11 +208,6 @@ export default {
       deep: true
     }
   },
-  computed: {
-    checkOffBtn() {
-      return this.checkBtn();
-    },
-  },
   methods: {
     closeModal() {
       return this.$emit("closemodal");
@@ -279,17 +263,6 @@ export default {
       }
     },
     async RedirectedMethodTransferMoneyToSp() {
-      // setTimeout(async () => {
-      //   try {
-      //     WithdrawMoneyOperation(this.amountSave, this.card.toString(), this.captchaToken).then((response) => {
-      //       console.log(`work withdraw - ${response}`)
-      //     })
-      //   }
-      //   catch (e) {
-      //     console.error(`Error in wihdrawmoney operation - ${e}`)
-      //   }
-      //   await this.$emit('notifacetionmoney')
-      // }, 4000)
       this.v$.$touch()
 
       if (this.v$.amountWithdraw.$error) {
@@ -334,17 +307,10 @@ export default {
             })
       }
     },
-    // checkBtn() {
-    //   if (this.offBtn === false) {
-    //     if (this.agreeUser !== false) {
-    //       return false;
-    //     }
-    //   }
-    //   return true;
-    // },
     clickedBtnChoice(index, content) {
       this.clickedBtn = index;
       this.amount = content;
+      console.log(index)
     },
   },
 };

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

@@ -0,0 +1,132 @@
+<template>
+  <div class="time" v-if="crashdata.Status === 'WaitingForPlayers'"><h2>{{ crashdata.WaitingTime ? crashdata.WaitingTime.toFixed(1) : '' }} сек.</h2></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>
+</template>
+
+<script>
+import { LineChart } from "vue-chart-3";
+import {
+  Chart,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+} from "chart.js";
+
+Chart.register(
+    LineController,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement
+);
+
+export default {
+  components: { LineChart },
+  props: {
+    crashdata: Object
+  },
+  mounted() {
+    this.data = this.chartData;
+    this.updateData();
+  },
+  data() {
+    return {
+      dataValues: [],
+      numberGraph: 1,
+      labels: [" "],
+      data: null,
+      options: {
+        plugins: {
+          title: {
+            text: "Line",
+          },
+        },
+        scales: {
+          x: {
+            grid: {
+              display: false
+            }
+          },
+          y: {
+            grid: {
+              display: false
+            }
+          }
+        },
+        animation: false,
+      },
+    };
+  },
+
+  computed: {
+    chartData() {
+      return {
+        labels: this.labels,
+        datasets: [
+          {
+            label: "Foo",
+            data: this.dataValues,
+            borderColor: '#4E5EF2',
+            pointStyle: "circle",
+            pointRadius: 0,
+            pointHoverRadius: 2,
+          },
+        ],
+      };
+    },
+  },
+
+  watch: {
+    crashdata: {
+      handler: 'updateData',
+      immediate: true
+    }
+  },
+
+  methods: {
+    updateData() {
+      let nextDataValue
+      if (this.crashdata.Status === 'WaitingForPlayers') {
+        this.data = this.chartData;
+        this.labels = [""];
+        this.dataValues = [this.numberGraph, this.numberGraph];
+      }
+      else if (this.crashdata.Status === 'InGame') {
+        if (this.dataValues.length === 0) {
+          this.dataValues = [this.crashdata.CurrentX, this.crashdata.CurrentX]
+          nextDataValue = this.crashdata.CurrentX
+          this.numberGraph = this.crashdata.CurrentX
+
+          this.data = this.chartData
+          this.labels.push("")
+          this.dataValues.push(nextDataValue)
+        }
+
+        this.numberGraph = this.numberGraph + .01
+        nextDataValue = this.numberGraph
+
+        this.data = this.chartData;
+        this.labels.push("");
+        this.dataValues.push(nextDataValue);
+      }
+      else if (this.crashdata.Status === 'GameEnd') {
+        this.dataValues = []
+        this.numberGraph = 1
+      }
+      else {
+        console.log('Error game')
+      }
+    },
+  },
+};
+</script>
+
+<style>
+</style>

luckydiamond/src/pages/HomePage.vue

@@ -50,7 +50,8 @@
                 <div :class="'linecontent-' + mode.id">
                   <div class="container">
                     <h1 class="title-firstline">{{ mode.title }}</h1>
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
+                    <a href="#" @click="$router.push({ name: 'jackpot' })" class="line__btn">play <span class="line__btn--elm">></span></a>
                   </div>
                 </div>
                 <div class="line__img">

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

@@ -1,11 +1,326 @@
 <template>
-  <crash-graph-component></crash-graph-component>
+  <div class="grid-crash">
+
+    <aside-bar-component></aside-bar-component>
+
+    <chat-component></chat-component>
+
+    <header-component></header-component>
+
+    <div class="crash-content">
+      <section class="crash-game">
+        <div class="crash-game__content">
+          <div class="crash-game__start-window">
+            <h2 class="crash__game-name">Краш</h2>
+            <p>Жди момента и забирай выигрыш</p>
+            <div class="crash-game-window__inputs">
+              <div class="crash-deposit">
+                <h3 class="crash-label">Сумма депозита</h3>
+                <div class="crash-input-deposit">
+                  <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+                  <input class="input-style-crash input-style-crash__text diamond-input-crash" type="number" v-model="amountDeposit">
+                  <div class="diamonds__btns btn-style__diamonds">
+                    <ul class="diamonds-btns__display">
+                      <li v-for="(item, index) in SaperNumbers" :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>
+            <div class="error-block" v-if="ErrorClick">
+              <h2>{{ textError }}</h2>
+            </div>
+            <div class="crash-game-window__btn-start">
+              <button v-if="startGame && crashObject.Status !== 'WaitingForPlayers'" @click="clickClaimDep" class="claim-btn-crash__prize">Забрать {{ getUserPrize.toFixed(2) }} АР</button>
+              <button v-if="startGame && crashObject.Status === 'WaitingForPlayers'" class="waiting-btn-crash">Ожидание игроков...</button>
+              <button v-if="!startGame" :disabled="offBtn" @click="clickPlayBtn" :class="{ 'animate-start-btn': ErrorClick }">Начать игру</button>
+            </div>
+            <div class="crash-window__line">
+              <div class="line-crash">
+
+              </div>
+            </div>
+          </div>
+          <div class="crash-game__graph">
+            <crash-graph-component :crashdata="crashObject"></crash-graph-component>
+          </div>
+        </div>
+      </section>
+
+      <section class="crash-game__players" v-if="crashObject && crashObject.Players">
+        <div class="crash-game-players__content">
+          <ul class="user-list" v-if="crashObject.Players.length">
+            <li class="user-crash" v-for="(player, index) in crashObject.Players.sort((a, b) => b.Bid - a.Bid)" :key="index">
+              <div class="user-crash-content" :class="{ 'user-crash-content__lose' : crashObject.Status === 'GameEnd' && player.WinningX <= 0, 'user-crash-content__win' : player.WinningX >= 1 }">
+                <div class="user-name-crash">
+                  <img class="user-crash__icon" :src="`https://avatar.spworlds.ru/face/55/${player.UserName}`">
+                  <h2>{{ player.UserName }}</h2>
+                </div>
+                <div class="user-bid-crash">
+                  <h2 v-if="player.WinningMoney >= 1" class="wingame__win-bid-crash">{{ player.WinningMoney.toFixed(2) }}</h2>
+                  <h2 v-else>{{ player.Bid }}</h2>
+                  <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+                </div>
+                <div class="user-game-status-crash">
+                  <h2 class="ingame-crash" v-if="crashObject.Status === 'WaitingForPlayers' && player.WinningX <= 1 || crashObject.Status === 'InGame' && player.WinningX <= 0">В&nbsp;игре</h2>
+                  <h2 class="lostgame-crash" v-if="crashObject.Status === 'GameEnd' && player.WinningX <= 0">Проиграл</h2>
+                  <h2 class="wingame-crash" v-if="player.WinningX >= 1">{{ player.WinningX.toFixed(2) }}x</h2>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </div>
 </template>
 
 <script>
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
 import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue";
 
+import { useVuelidate } from '@vuelidate/core'
+import { maxValue, minValue, required, numeric, integer } from "@vuelidate/validators";
+
+
+import '@/assets/css/PagesStyles/games-pages/crash.css'
+import SaperNumbers from "@/mocks/SaperNumbers";
+import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+import {GetCookie} from "@/assets/js/storage/CookieStorage";
+import {eventBus} from "@/main";
+import {ExitAndTakeMoneyFromCrashGame, JoinCrashGame} from "@/assets/js/games/crash/CrashAPI";
+
 export default {
-  components: { CrashGraphComponent }
+  components: { HeaderComponent, AsideBarComponent, ChatComponent, CrashGraphComponent },
+  data() {
+    return {
+      SaperNumbers,
+      clickedBtn: null,
+      ErrorClick: false,
+      ErrorJoin: false,
+      balance: 0,
+      amountDeposit: 0,
+      crashObject: '',
+      textError: '',
+      startGame: false,
+      offBtn: false
+    }
+  },
+  setup() {
+    return { v$: useVuelidate() }
+  },
+  computed: {
+    getUserPrize() {
+      let User = this.crashObject.Players.find(player => player.UserName === GetCookie('SpUserName'))
+
+      if (User) {
+        return User.Bid * this.crashObject.CurrentX
+      }
+      return 0
+    }
+  },
+  mounted() {
+    eventBus.on('crash', (dataCrash) => {
+      try {
+        const dataCrashParse = JSON.parse(dataCrash)
+
+        this.crashObject = dataCrashParse
+        // console.log(this.crashObject)
+      }
+      catch (e) {
+       console.error(e)
+      }
+
+      if (this.crashObject.Status === 'GameEnd' && this.startGame === true && this.crashObject.Players.some(player => player.UserName === GetCookie('SpUserName'))) {
+        this.startGame = false
+        console.log('GAME OVER')
+        this.updateUserMoney()
+      }
+      if (
+          this.crashObject.Players.some(player =>
+              player.UserName === GetCookie('SpUserName') && player.UserGameState !== 'Win'
+          ) &&
+          this.startGame === false &&
+          this.crashObject.Status !== 'GameEnd'
+      ) {
+        this.startGame = true
+
+        let User = this.crashObject.Players.find(player => player.UserName === GetCookie('SpUserName'))
+        console.log('ОБНОВЛЕНИЕ СТРАНИЦЫ')
+        if (User) {
+          this.amountDeposit = User.Bid
+          User = null
+        }
+      }
+    })
+  },
+  validations() {
+    return {
+      amountDeposit: { required, numeric, minValue: minValue(1), maxValue: maxValue(this.balance), integer },
+    }
+  },
+  watch: {
+    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)
+      }
+    },
+  },
+  async created() {
+    if (GetCookie('AUTHTOKEN') && GetCookie('SearchToken')) {
+      await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
+          .then((response) => {
+            this.balance = response.currentMoney
+          })
+    }
+  },
+  methods: {
+    async updateUserMoney() {
+      if (GetCookie('AUTHTOKEN') && GetCookie('SearchToken')) {
+        await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
+            .then((response) => {
+              this.balance = response.currentMoney
+              return eventBus.emit('Updatebalance')
+            })
+      }
+    },
+    async clickPlayBtn() {
+      this.v$.$touch()
+      this.offBtn = true
+
+      if (this.v$.amountDeposit.$error) {
+        this.textError = 'Ошибка введении данных'
+        this.offBtn = false
+        this.errorPlayButton()
+      }
+
+      if (!this.v$.amountDeposit.$error) {
+        const userData = {
+          searchToken: GetCookie('SearchToken'),
+          authtoken: GetCookie('AUTHTOKEN')
+        }
+
+        await JoinCrashGame(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
+      }
+    },
+    errorPlayButton() {
+      this.ErrorClick = true
+      setTimeout(() => {
+        this.ErrorClick = false
+        this.textError = ''
+      }, 2000)
+    },
+    async clickClaimDep() {
+      if (this.startGame === true) {
+        const userData = {
+          searchToken: GetCookie('SearchToken'),
+          authtoken: GetCookie('AUTHTOKEN')
+        }
+
+        await ExitAndTakeMoneyFromCrashGame(userData)
+            .then((response) => {
+              console.log(response)
+              this.startGame = false
+
+              this.updateUserMoney()
+            })
+      }
+    },
+    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
+      }
+    },
+  }
 }
 </script>

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

@@ -0,0 +1,51 @@
+<template>
+        <div class="content-grid--jackpot" >
+  <aside-bar-component></aside-bar-component>
+
+  <chat-component></chat-component>
+
+  <header-component></header-component>
+  <!-- <div class="grid-crash"> -->
+  <!-- <div class="grid-crash">
+    <h1>Test</h1>
+  </div> -->
+        </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 {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+
+
+// import '@/assets/css/PagesStyles/games-pages/jackpot.css'
+export default {
+  components: { HeaderComponent, AsideBarComponent, ChatComponent },
+  data() {
+    return {
+      //   SaperNumbers,
+      //   clickedBtn: null,
+      //   ErrorClick: false,
+      //   ErrorJoin: false,
+      //   balance: 0,
+      //   amountDeposit: 0,
+      //   crashObject: '',
+      //   textError: '',
+      //   startGame: false,
+      //   offBtn: false
+    };
+  },
+ 
+  async created() {
+    if (GetCookie("AUTHTOKEN") && GetCookie("SearchToken")) {
+      await GetCurrentMoney(
+        GetCookie("AUTHTOKEN"),
+        GetCookie("SearchToken")
+      ).then((response) => {
+        this.balance = response.currentMoney;
+      });
+    }
+  },
+};
+</script>

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

@@ -284,45 +284,41 @@ export default {
       }
     },
     async amountCrystals(CrystalsCount) {
-      this.PercentageGameSteps = []
+      this.PercentageGameSteps = [];
-      if (![1, 5, 10, 24].includes(CrystalsCount)) {
-        this.clickedBtnCrystal = null
-      }
-      else {
-        let index
-        switch (CrystalsCount) {
-          case 1:
-            index = 0
-            break
-          case 5:
-            index = 1
-            break
-          case 10:
-            index = 2
-            break
-          case 24:
-            index = 3
-            break
-        }
-        this.clickedBtnCrystals(index, CrystalsCount)
-      }
 
       if (CrystalsCount >= 1 && CrystalsCount <= 24) {
         try {
-            await GetPercentageSteps(this.amountCrystals)
+          const response = await GetPercentageSteps(CrystalsCount);
-              .then((response) => {
           response.forEach((item) => {
             if (item !== 'Infinity' && item !== '-Infinity') {
-                    this.PercentageGameSteps.push(Number(item))
+              this.PercentageGameSteps.push(Number(item));
             }
-                })
+          });
-              })
+        } catch (e) {
-        }
+          console.error('Error in Percentage', e);
-        catch (e) {
-            console.error('Error in Percantage', e)
         }
       }
+
+      let index;
+      switch (CrystalsCount) {
+        case 1:
+          index = 0;
+          break;
+        case 5:
+          index = 1;
+          break;
+        case 10:
+          index = 2;
+          break;
+        case 24:
+          index = 3;
+          break;
+        default:
+          return
+      }
+      this.clickedBtnCrystals(index, CrystalsCount);
     },
+
     flippedCards: {
      async handler(value) {
        if (value.length < 1 || this.ValidationPlay.endGame === true) return
@@ -454,6 +450,9 @@ export default {
                   this.ValidationPlay.startGame = false
                 }, 2000)
               }
+              else {
+                this.amountCrystals = 5
+              }
             })
         this.getBalanceUser()
       }
@@ -461,6 +460,9 @@ export default {
         console.error('Error in GetData', e)
       }
     }
+    else {
+      this.amountCrystals = 5
+    }
   },
   mounted() {
     eventBus.on('Updatebalance-saper', () => {

luckydiamond/src/router/router.js

@@ -4,13 +4,19 @@ import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
 import SettingsPage from "@/pages/SettingsPage.vue";
+import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
+import JackpotPage from "@/pages/games-pages/JackpotPage.vue";
+import SettingsPage from "@/pages/SettingsPage.vue"
 import AboutPage from "@/pages/AboutPage.vue"
+
 export default createRouter({
     history: createWebHistory(),
     routes: [
         { path: '/', component: HomePage, name: 'home' },
         { path: '/profile', component: ProfilePage, name: 'profile' },
         { path: '/game/saper', component: SapergamePage, name: 'saper' },
+        { path: '/game/crash', component: CrashGamePage, name: 'crash' },
+        { path: '/game/jackpot', component: JackpotPage, name: 'jackpot' },
         { path: '/settings', component: SettingsPage, name: 'settings' },
         { path: '/about', component: AboutPage, name: 'about' },
     ]