Merge branch 'DevelopMadara'

2025-12-10 04:09:29 +02:00 · 2024-04-07 03:12:57 +02:00
parent b08a88d8a0 b93f23deaa
commit 38c4e317be
24 changed files with 1579 additions and 61 deletions
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/double.css
@@ -0,0 +1,307 @@
+.bet-button {
+    border: none;
+    padding: 10px 20px;
+    margin: 5px;
+    border-radius: 10px;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    transition: transform 0.1s ease;
+    outline: none;
+}
+
+/* Цвета для кнопок */
+.bet-button.red {
+    background-color: #863443;
+}
+
+.bet-button.green {
+    background-color: #2D4940;
+}
+
+.bet-button.black {
+    background-color: #202333;
+}
+
+/* Стили для нажатой кнопки */
+.bet-button:active {
+    transform: scale(0.95);
+    /* Уменьшение при нажатии */
+}
+.bet-button.active {
+    opacity: 0.7; /* Пример изменения стиля активной кнопки */
+  }
+
+/* Можно добавить тени для кнопок, чтобы они выглядели объемнее */
+.bet-button {
+    margin: 1.2% 0 0 5.8%;
+    margin-bottom:1vh;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
+}
+
+/* Стиль для тени при нажатии (опционально) */
+.bet-button:active {
+    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.double-start {
+    z-index: 1;
+    border-radius: 20px;
+    background: #1D223E;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 42vh;
+    height: 37vh;
+    border: 1px solid #262C55;
+    margin: 2.6%;
+    margin-top: 0px;
+}
+
+.double-game {
+    z-index: 1;
+    border-radius: 20px;
+    width: 69%;
+    height: 94%;
+}
+
+.double-ui-component {
+    display: flex;
+    align-items: center;
+    background-color: #25325A;
+    border-radius: 15px;
+    /* padding: 10px 20px; */
+    padding-right: 2vh;
+    padding-bottom: 1vh;
+    padding-top: 1vh;
+    padding-left: 2vh;
+    margin-bottom: 1vh;
+    max-width: 300px;
+    color: white;
+    font-family: Arial, sans-serif;
+    /* background: linear-gradient(to right, #1C213390 50%, #2F5139); */
+}
+
+.double-ui-component-gradient {
+    background: linear-gradient(to right, #1C213390 50%, #2F5139);
+}
+
+/* .double-ui-component img {} */
+
+.double-ui-component .double-username {
+    flex-grow: 1;
+    text-align: left;
+    margin-left: 1vh;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #515D83;
+}
+
+.double-ui-component .double-score {
+    display: flex;
+    align-items: center;
+}
+
+.double-score {
+    font-size: 20px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #748985;
+}
+
+.double-img-user {
+    margin-top: 6px;
+}
+
+.double-ui-component .double-score img {
+    width: 3vh;
+    height: 3vh;
+    margin-left: 10px;
+}
+
+.double-members-ingame-red {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #A9373C,
+            #1C2133 20%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    width: 100%;
+    height: 49vh;
+    /* height: 94%; */
+    padding: 2vh;
+}
+
+.double-members-ingame-green {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #345D3B,
+            #1C2133 20%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    width: 100%;
+    height: 49vh;
+    /* height: 94%; */
+    padding: 2vh;
+}
+
+.double-members-ingame-black {
+    overflow-y: auto;
+    background: linear-gradient(to bottom right,
+            #1B1A1A,
+            #1C2133 26%);
+    z-index: 1;
+    border: 2px solid #3B4260;
+    border-radius: 15px;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    margin-top: 1vh;
+    margin-top: 1vh;
+    width: 100%;
+    /* height: 94%; */
+    height: 49vh;
+    padding: 2vh;
+}
+
+.double-members-flex-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    color: white;
+    margin-bottom: 2vh;
+}
+
+.double-red-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #B64848;
+}
+
+.double-white-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: FEEBEB;
+}
+
+.double-green-box {
+    display: flex;
+    align-items: baseline;
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+    color: #5EA25C;
+}
+
+.double-number-color {
+    color: #56629A;
+    font-weight: bold;
+    font-size: 18px;
+    font-family: Montserrat;
+}
+
+.double-red-box span {
+    font-size: larger;
+    /* Or any specific size */
+    margin-left: 5px;
+    /* Spacing between RED and X2 */
+}
+
+.double-user-icon {
+    display: flex;
+    align-items: center;
+}
+
+.double-user-icon .double-user-icon-span {
+    background-image: url('../../../icons-games/double-game/MembersInGame.png');
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+}
+
+.double-game {
+    z-index: 1;
+    border-radius: 20px;
+    width: 69%;
+    height: 94%;
+}
+
+.double-game-main-box {
+    border-radius: 10px;
+    border: 1px solid #262C55;
+    padding-top: 4vh;
+    padding-bottom: 4vh;
+    padding-left: 0vh !important;
+    padding-right: 0vh !important;
+    background: #1A1F37;
+    margin-bottom: 1vh !important;
+}
+
+.double-carousel {
+    z-index: 1;
+    position: relative;
+    background: #2E2D37;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 100%;
+    margin-top: 1px;
+    border: 1vh solid #2E2D37;
+    border-right: 0vh !important;
+    border-left: 0vh !important;
+    height: 95%;
+}
+
+.container-double-history-text {
+    display: flex;
+}
+
+.double-history-text {
+    background-color: #728DF8;
+    border: none;
+    color: #0E1220;
+    padding-right: 1vh;
+    padding-left: 1vh;
+    font-size: 16px;
+    margin: 4px 2px;
+    border-radius: 5px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    font-size: 18px;
+    font-family: Montserrat;
+    font-weight: bold;
+}
+
+.double-carousel-arrow {
+    position: absolute;
+    bottom: -3vh;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #728DF8;
+    font-size: 24px;
+}
+
+.double-carousel-arrow-upper {
+    position: absolute;
+    top: -3vh;
+    left: 50%;
+    transform: translateX(-50%) rotate(180deg);
+    color: #728DF8;
+    font-size: 24px;
+}
+
+.double-game-history-main-box {
+    border-radius: 20px;
+    border: 1px solid #262C55;
+    padding-top: 1vh;
+    padding-bottom: 0vh;
+    padding-left: 1vh;
+    padding-right: 0vh;
+    background: #1A1F37;
+}
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/jackpot.css
@@ -47,17 +47,12 @@
 .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;
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -150,7 +150,8 @@
 #diamonds-input {
    /* width: 347px;
    height: 38px; */
-    width: 37vh;
+    /* width: 37vh; */
+    width: 36vh;
    height: 4vh;
 }

--- a/luckydiamond/src/assets/css/PagesStyles/home.css
+++ b/luckydiamond/src/assets/css/PagesStyles/home.css
@@ -97,7 +97,7 @@

 .bg-early{
    border-radius: 40px;
-    background: #969B9E;
+    background: #EF4444;
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }

@@ -357,7 +357,7 @@
 .gamemode__twoline--first__element {
    width: 100%;
    margin: 2% 3.6% 0 5.5%;
-    min-height: 180px;
+    min-height: 209px;
 }

 .linecontent-3 {
@@ -370,23 +370,13 @@
    color: #fff;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    font-family: Montserrat Alternates;
-    font-size: 80px;
+    font-size: 60px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4.5% 2.2%;
 }

-.gamemode__twoline--first__element .container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}

-.gamemode__twoline--first__element .container a {
-    margin-right: 10%;
-    padding: 12px 10px;
-    margin-bottom: 3%;
-}

 .gamemode__twoline--two__element {
    margin-top: 2%;
@@ -406,6 +396,21 @@
 .cumming_soon--img {
    margin-bottom: 4%;
 }
+.gamemode__twoline--two__element {
+    margin-top: 2%;
+    width: 100%;
+    min-height: 180px;
+}
+
+.gamemode__twoline--first__element .container {
+    display: flex;
+    justify-content: center;
+    
+}
+
+.gamemode__twoline--first__element .container a {
+    margin-right: 10%;
+}

 /* /GameMode */

@@ -430,7 +435,7 @@
    }

    .title-twoline {
-        font-size: 60px;
+        font-size: 40px;
    }

    .line__img__jackpot {
@@ -472,11 +477,7 @@
        width: 80px;
    }

-    .gamemode__twoline--first__element .container a {
-        margin-right: 10%;
-        padding: 2px 11px 11px 11px;
-        margin-bottom: 3%;
-    }
+    

    .line__btn__jackpot {
        border-radius: 16px;
@@ -506,7 +507,7 @@
    }

    .title-twoline {
-        font-size: 40px;
+        font-size: 20px;
    }

    .line__img__jackpot {
@@ -549,11 +550,7 @@
        width: 80px;
    }

-    .gamemode__twoline--first__element .container a {
-        margin-right: 10%;
-        padding: 2px 11px 11px 11px;
-        margin-bottom: 3%;
-    }
+    

    .line__btn__jackpot {
        border-radius: 10px;
@@ -575,15 +572,16 @@
        height: 265px;
    }

-    .gamemode__twoline--first__element {
-        width: 100%;
-        margin: 0 3.6% 0 5.5%;
-        min-height: 60px;
-    }
+    

    .gamemode__twoline--two__element {
        margin-top: 0;
        width: 100%;
        min-height: 60px;
    }
+    .gamemode__twoline--first__element {
+        margin-top: 0;
+        width: 100%;
+        min-height: 60px;
+    }
 }
--- a/luckydiamond/src/assets/css/PagesStyles/settings.css
+++ b/luckydiamond/src/assets/css/PagesStyles/settings.css
@@ -76,3 +76,56 @@
  background: red; /* Цвет фона трека для Firefox */
  height: 8px; /* Высота трека для Firefox */
 }
+
+
+     
+/* toggle in label designing */
+.toggle {
+  position : relative ;
+  display : flex;
+  width : 60px;
+  height : 32px;
+  background-color: #000413;
+  border-radius: 5px;
+  justify-content: center;
+ align-items: center;
+ 
+  
+}
+     
+/* After slide changes */
+.toggle:after {
+  content: '';
+  position: absolute;
+  width: 22px;
+  height: 22px;
+  border-radius: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ align-content: center;
+  background-color: #EF4444;
+  top: 5px; 
+  left: 6px;
+  transition:  all 0.5s;
+}
+     
+/* Toggle text */
+.toggle p {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: bold;
+}
+     
+/* Checkbox checked effect */
+.checkbox:checked + .toggle::after {
+  
+  left : 34px; 
+}
+     
+/* Checkbox checked toggle label bg color */
+
+     
+/* Checkbox vanished */
+.checkbox { 
+  display : none;
+}
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -109,6 +109,22 @@ button {
    grid-gap: 0.625rem;
 }

+.content-grid--double {
+    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 double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat"
+        "menu double double double double double chat";
+    grid-gap: 0.625rem;
+}
+
 .grid-crash {
    display: grid;
    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
@@ -163,7 +179,7 @@ button {
    height: 86vh;
    position: relative;
    z-index: 3;
-   
+
 }

 /* /Chat */
@@ -211,9 +227,15 @@ button {
    margin: 0.625rem 2.438rem 1.125rem 1.125rem; */
 }

+.double {
+    display: flex;
+    grid-area: double;
+   
+}
+
 .about {
    grid-area: about;
-    
+
 }


@@ -279,7 +301,7 @@ button {
    grid-area: help;
    display: flex;
    /* height:99%; */
-    height:86vh;
+    height: 86vh;
    border-radius: 3.125rem;
    background: #17181C;
    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
@@ -287,7 +309,7 @@ button {
    /*height: 96.2%;*/
    width: 1000px;
    margin: 0 auto;
-    
+
 }


@@ -314,8 +336,9 @@ button {
    height: 35%;
    z-index: 0;
 }
+
 /* /Crash */

 /* Media */

-/* /Media */
+/* /Media */
--- a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleBlackDouble.png
+++ b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleBlackDouble.png
--- a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleGreenDouble.png
+++ b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleGreenDouble.png
--- a/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleRedDouble.png
+++ b/luckydiamond/src/assets/icons-games/double-game/HistoryRectangleRedDouble.png
--- a/luckydiamond/src/assets/icons-games/double-game/MembersInGame.png
+++ b/luckydiamond/src/assets/icons-games/double-game/MembersInGame.png
--- a/luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.png
+++ b/luckydiamond/src/assets/icons-games/double-game/RectangleBlackDouble.png
--- a/luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.png
+++ b/luckydiamond/src/assets/icons-games/double-game/RectangleGreenDouble.png
--- a/luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.png
+++ b/luckydiamond/src/assets/icons-games/double-game/RectangleRedDouble.png
--- a/luckydiamond/src/assets/icons-games/saper-game/arrowTop.png
+++ b/luckydiamond/src/assets/icons-games/saper-game/arrowTop.png
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -29,10 +29,14 @@ export function ConnectToChat() {
                    return;
                }

+                if (dataObject.MessageType == 'DoubleGameState') {
+                    eventBus.emit('doubleGame', event.data)
+                    return;
+                }
+
                if (dataObject.MessageType == "CrashGameState") {
                    eventBus.emit('crash', event.data);
                    return;
-
                }

                if (Array.isArray(dataObject.CurrentGame.PlayerList)) {
@@ -41,7 +45,7 @@ export function ConnectToChat() {
                }

            } catch (error) {
-                void(error);
+                void (error);
            }
        };

--- a/luckydiamond/src/assets/js/games/double/DoubleApi.js
+++ b/luckydiamond/src/assets/js/games/double/DoubleApi.js
@@ -0,0 +1,69 @@
+import { BackendApiUrl } from '@/properties/Сonfig.js';
+import {
+    GetCookie
+} from "@/assets/js/storage/CookieStorage.js";
+
+
+export async function GetNewestDoubleGames() {
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameDouble/GetNewestDoubleGames`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        return await response
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}
+
+export async function JoinGame(amount, betColor) {
+
+   let betColorInt = 0;
+    if (betColor == "red") {
+        betColorInt = 0;
+    }
+    if (betColor == "green") {
+        betColorInt = 1;
+    }
+    if (betColor == "black") {
+        betColorInt = 2;
+    }
+
+    const data = {
+        UserCredentials: {
+            SearchToken: GetCookie("SearchToken"),
+            AUTHTOKEN: GetCookie("AUTHTOKEN")
+        },
+        bet: amount,
+        betColor: betColorInt
+    }
+
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameDouble/JoinGame`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data),
+            redirect: 'follow'
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        return await response.json()
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}
--- a/luckydiamond/src/components/AsidebarComponent.vue
+++ b/luckydiamond/src/components/AsidebarComponent.vue
@@ -9,7 +9,8 @@
          <!-- <div class="fotosloti"><a href="#"><img  src="../assets/icons-menu/slots-icon.svg" ></a></div> -->
          <a href="#" @click="$router.push({ name: 'jackpot' })"><img  class="menu__content--jackpot-icon" src="../assets/icons-menu/jackpot-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 class="menu__content--chest-icon" src="../assets/icons-menu/case-icon.png"></a>
+          <a href="#" @click="$router.push({ name: 'double' })"><img  class="menu__content--chest-icon" 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> -->
          <a href="#" @click="$router.push({ name: 'saper' })"><img  class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a>
        </div>
--- a/luckydiamond/src/components/ChatComponent.vue
+++ b/luckydiamond/src/components/ChatComponent.vue
@@ -29,6 +29,8 @@
          </li>
        </transition-group>
      </ul>
+    
+    
    </div>
    <writechat-component @send="ClaimDatamsg"></writechat-component>
    <!-- <div class="chat__mute-button">
--- a/luckydiamond/src/main.js
+++ b/luckydiamond/src/main.js
@@ -22,6 +22,7 @@ export const eventBus = mitt()
 // const app = createApp(App)
 const app = createApp(siteIsOff ? SiteOff : App);

+
 if (!siteIsOff) {
    app.use(router);
    app.mixin(Mixins);
@@ -32,6 +33,20 @@ if (!siteIsOff) {
 // app.use(router)
 // app.mixin(Mixins)

+app.config.warnHandler = (msg) => {
+    // Intercept specific warning message and suppress it
+    if (msg.includes('Property or method "clickedBtn" is not defined on the instance but referenced during render.')) {
+      // You can simply return to ignore it, or even better, log it somewhere if you have a logging system
+      return;
+    }
+  
+    // Log or handle other warnings as you see fit
+  };
+
+app.use(router)
+app.mixin(Mixins)
+
+
 app.mount('#app')
 // app.provide(eventBus)

--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -79,15 +79,19 @@
          <div class="gamemode__twolines">
            <div class="gamemode__twoline--first__element bg-early">
              <ul>
-                <li v-for="mode in twolinefirstelementGameMode" :key="mode">
+                <li v-for="mode in twolinetwoelementGameMode" :key="mode.id">
                  <div :class="'linecontent-' + mode.id">
-                    <h3 class="title-twoline">скоро</h3>
+                    <h3 class="title-twoline">рулетка</h3>
                  </div>
                  <div class="container">
-                    <a href="#" class="cumming_soon_btn"
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
+                    <a
+                      href="#"
+                      @click="$router.push({ name: 'double' })"
+                      class="line__btn--crash"
                      >play <span class="line__btn--elm"></span></a
                    >
-                    <img src="@/assets/icons-gamemodes/slots-icon.png" class="cumming_soon--img" />
+                    <img class="crash--img" src="@/assets/icons-gamemodes/slots-icon.png" />
                  </div>
                </li>
              </ul>
--- a/luckydiamond/src/pages/SettingsPage.vue
+++ b/luckydiamond/src/pages/SettingsPage.vue
@@ -12,19 +12,32 @@
    <button id="volume-down" @click="volumeDown">-</button>
  </div>
     -->
-      <div class="volume-section">
-        <h1 class="volume-text">Звук</h1>
-        <input
-          id="volumeControl"
-          type="range"
-          min="0"
-          max="10"
-          v-model="volume"
-          @input="handleVolumeChange"
-          ref="volumeControl"
-        />
-        <h1 class="volume-text--grey">Данная страница находится в разработке, и будет полностью переделанна</h1>
+      <div class="classssboxxxx">
+        <div class="volume-section">
+          <h1 class="volume-text">Звук</h1>
+          <input
+            id="volumeControl"
+            type="range"
+            min="0"
+            max="10"
+            v-model="volume"
+            @input="handleVolumeChange"
+            ref="volumeControl"
+          />
+        </div>

+        <!-- 3/23/2024 DT I turned off the chat off button because it wasn't working and wasn't displaying correctly on the frontend  -->
+        <!-- <div class="buttonbox">
+        <input type="checkbox"
+               id="switch"
+               class="checkbox" />
+                
+        <label for="switch"
+               class="toggle">
+            
+        </label>
+        <p>скрыть чат</p>
+      </div> -->
      </div>
    </section>
  </div>
--- a/luckydiamond/src/pages/games-pages/DoublePage.vue
+++ b/luckydiamond/src/pages/games-pages/DoublePage.vue
@@ -0,0 +1,668 @@
+<template>
+  <div class="content-grid--double">
+    <aside-bar-component></aside-bar-component>
+    <chat-component></chat-component>
+    <header-component></header-component>
+    <div class="bg-gradient-left"></div>
+    <section class="double">
+      <div class="double-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>
+            <button class="bet-button red" :class="{ active: activeButton === 'red' }" @click="handleClick('red')">
+              x2
+            </button>
+            <button class="bet-button green" :class="{ active: activeButton === 'green' }" @click="handleClick('green')">
+              x20
+            </button>
+            <button class="bet-button black" :class="{ active: activeButton === 'black' }" @click="handleClick('black')">
+              x2
+            </button>
+
+            <div class="diamonds__choises">
+              <img
+                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> -->
+      <div class="double-game">
+        <div class="bootstrap-wrapper">
+          <div class="container">
+            <div class="row">
+              <div class="col-md-12 double-game-main-box">
+                <div class="double-carousel">
+                  <div class="double-carousel-arrow">▲</div>
+                  <div class="double-carousel-arrow-upper">▲</div>
+                  <Carousel
+                    ref="carousel"
+                    :wrapAround="true"
+                    :autoplay="autoPlay"
+                    class="no-pointer-events"
+                    :transition="150"
+                    :itemsToShow="10"
+                    @slide-start="handleStepCarousel"
+                  >
+                    <Slide v-for="(slide, index) in slides" :key="index">
+                      <div>
+                        <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 double-game-history-main-box">
+                <div class="container-double-history-text">
+                  <span class="double-history-text">история</span>
+                </div>
+
+                <div class="double--history-carousel">
+                  <Carousel
+                    ref="carouselHistory"
+                    class="no-pointer-events"
+                    :transition="150"
+                    :itemsToShow="24"
+                  >
+                    <Slide v-for="(slide, index) in slidesHistory" :key="index">
+                      <div>
+                        <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-4" style="padding-left: 0px">
+                <div class="double-members-ingame-red">
+                  <div class="double-members-flex-container">
+                    <div class="double-red-box">RED X2</div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">{{
+                        numberUserCountRed
+                      }}</span>
+                    </div>
+                  </div>
+
+                  <div
+                    v-for="user in usersRed"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
+
+                    <div class="double-username">{{ user.name }}</div>
+
+                    <div class="double-score">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
+                    </div>
+                  </div>
+                  <!-- </div> -->
+                </div>
+              </div>
+              <div class="col-md-4" style="padding-left: 0px">
+                <div class="double-members-ingame-green">
+                  <div class="double-members-flex-container">
+                    <div class="double-green-box">GREEN X20</div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">{{
+                        numberUserCountGreen
+                      }}</span>
+                    </div>
+                  </div>
+                  <div
+                    v-for="user in usersGreen"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
+
+                    <div class="double-username">{{ user.name }}</div>
+
+                    <div class="double-score">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="col-md-4"
+                style="padding-left: 0px; padding-right: 0px"
+              >
+                <div class="double-members-ingame-black">
+                  <div class="double-members-flex-container">
+                    <div class="double-white-box">BLACK X2</div>
+                    <div class="double-user-icon">
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">{{
+                        numberUserCountBlack
+                      }}</span>
+                    </div>
+                  </div>
+                  <div
+                    v-for="user in usersBlack"
+                    :key="user.name"
+                    class="double-ui-component"
+                    :id="`user-${user.name}`"
+                  >
+                    <img :src="user.image" alt="User" width="40" height="40" />
+
+                    <div class="double-username">{{ user.name }}</div>
+
+                    <div class="double-score">
+                      {{ user.amount }}
+
+                      <img
+                        class="double-img-user"
+                        src="@/assets/icons-header/diamond-ore-icon.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+import { reactive, ref, onMounted } from "vue";
+
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+import JackpotNumbers from "@/mocks/JackpotNumbers";
+import { GetNewestDoubleGames,JoinGame } from "@/assets/js/games/double/DoubleApi";
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
+import { Carousel, Slide } from "vue3-carousel";
+import "vue3-carousel/dist/carousel.css";
+
+import "@/assets/css/PagesStyles/games-pages/jackpot.css";
+import "@/assets/css/PagesStyles/games-pages/double.css";
+import "@/assets/css/global.css";
+import { eventBus } from "@/main";
+import { useVuelidate } from "@vuelidate/core";
+import {
+  maxValue,
+  minValue,
+  required,
+  numeric,
+  integer,
+} from "@vuelidate/validators";
+
+export default {
+  components: {
+    HeaderComponent,
+    AsideBarComponent,
+    ChatComponent,
+    Carousel,
+    Slide,
+  },
+  data() {
+    return {
+      JackpotNumbers,
+      clickedColor: "",
+      amountDeposit: 0,
+      activeButton: null
+    };
+  },
+  methods: {
+    async clickedBtnChoice(index, content) {
+      this.clickedBtn = index;
+      if (content === "max") {
+        await GetCurrentMoney(
+          GetCookie("AUTHTOKEN"),
+          GetCookie("SearchToken")
+        ).then((response) => {
+          const responseBalance = response.currentMoney;
+
+          if (responseBalance === this.balance) {
+            this.amountDeposit = parseInt(responseBalance);
+          }
+        });
+      } else {
+        this.amountDeposit = content;
+      }
+    },
+    async handleClick(color) {
+      this.clickedColor = color;
+      this.activeButton = color;
+    }
+,
+    async clickPlayBtn() {
+      this.v$.$touch();
+      this.offBtn = true;
+
+      if (
+        this.balance < this.amountDeposit ||
+        !Number.isInteger(Number(this.amountDeposit))
+      ) {
+        this.textError = "Некорректное значение. Введите целое число.";
+        this.offBtn = false;
+        this.errorPlayButton();
+      }
+
+      await JoinGame(this.amountDeposit,this.clickedColor).then((response) => {
+        if (
+          response === `You can't join to started or ended game` ||
+          response === "Player alredy in the game."
+        ) {
+          this.offBtn = false;
+
+          if (response === `You can't join to started or ended game`) {
+            this.textError = "Игра уже началась или только закончилась!";
+            this.errorPlayButton();
+          } else if (response === "Player alredy in the game.") {
+            this.textError = "Вы уже в игре!";
+            this.errorPlayButton();
+          }
+
+          return;
+        }
+
+        // if (response.ok) {
+        //   this.offBtn = false;
+        //   this.startGame = true;
+        // }
+      });
+      this.offBtn = false;
+    }
+  },
+  validations() {
+    return {
+      amountDeposit: {
+        required,
+        numeric,
+        minValue: minValue(1),
+        maxValue: maxValue(this.balance),
+        integer,
+      },
+    };
+  },
+  async created() {},
+
+  setup() {
+    const v$ = useVuelidate();
+
+    const usersRed = ref([]);
+
+    const usersGreen = ref([]);
+
+    const usersBlack = ref([]);
+
+    const numberUserCountRed = ref(0);
+
+    const numberUserCountGreen = ref(0);
+
+    const numberUserCountBlack = ref(0);
+
+    const slides = reactive([
+      {
+        img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"),
+        target: "Green",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+        target: "Red",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+        target: "Black",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+        target: "Red",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+        target: "Black",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"),
+        target: "Green",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+        target: "Black",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+        target: "Red",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleBlackDouble.png"),
+        target: "Black",
+      },
+      {
+        img: require("@/assets/icons-games/double-game/RectangleRedDouble.png"),
+        target: "Red",
+      },
+    ]);
+
+    const slidesHistory = reactive([]);
+
+    let doubleData = reactive({});
+
+    let autoPlay = ref(0);
+    let targetColor = ref("");
+    let timeToGame = ref(0);
+    let endGame = ref(false);
+
+    onMounted(() => {
+      loadGameHistory();
+
+      // usersRed.value = fetchUsersRed();
+
+      eventBus.on("doubleGame", (dataDouble) => {
+        const dataDoubleParse = JSON.parse(dataDouble);
+
+        if (dataDoubleParse.Players.length > 0) {
+          processUsersInGame(dataDoubleParse.Players);
+        }
+        if (endGame.value != true) {
+          if (dataDoubleParse.Status == "InGame") {
+            autoPlay.value = 20;
+            targetColor.value = dataDoubleParse.WInColor;
+          }
+          if (dataDoubleParse.Status == "GameEnd") {
+            targetColor.value = dataDoubleParse.WInColor;
+            endGame.value = true;
+            autoPlay.value = 150;
+
+            addWinEffectTouUsers(
+              dataDoubleParse.Players,
+              dataDoubleParse.WInColor
+            );
+          }
+        }
+      });
+    });
+
+    function addWinEffectTouUsers(usersArray, winColor) {
+      usersArray.forEach((user) => {
+        if (user.BetColor == winColor) {
+          setTimeout(() => {
+            addGradientClassToUser(user);
+          }, 2000);
+        }
+      });
+    }
+    
+    function addGradientClassToUser(user) {
+      const element = document.getElementById("user-" + user.UserName);
+
+      if (element) {
+        element.classList.add("double-ui-component-gradient");
+      }
+    }
+
+    function addUserIfNotExist(usersArray, newUser, BetColor) {
+      const userExists = usersArray.some((user) => user.name === newUser.name);
+
+      if (!userExists) {
+        if (BetColor == "Red") {
+          numberUserCountRed.value += 1;
+        }
+        if (BetColor == "Green") {
+          numberUserCountGreen.value += 1;
+        }
+        if (BetColor == "Black") {
+          numberUserCountBlack.value += 1;
+        }
+        usersArray.push(newUser);
+      }
+    }
+
+    function handleStepCarousel(data) {
+      try {
+        if (endGame.value == true) {
+          let { currentSlideIndex } = data;
+          if (
+            slides[currentSlideIndex + 1].target == targetColor.value &&
+            endGame.value == true
+          ) {
+            stopAutoPlay();
+
+            setTimeout(() => {
+              setTimeout(() => {
+                if (
+                  usersRed.value.length > 0 ||
+                  usersBlack.value.length > 0 ||
+                  usersGreen.value.length > 0
+                ) {
+                  usersRed.value = [];
+                  usersGreen.value = [];
+                  usersBlack.value = [];
+                }
+              }, 4000);
+
+              loadGameHistory();
+            }, 2000);
+          }
+        }
+      } catch (error) {
+        void error;
+      }
+    }
+
+    function processUsersInGame(users) {
+      users.forEach((user) => {
+        if (user.BetColor == "Red") {
+          const newUser = {
+            name: user.UserName,
+            image:
+              "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png",
+            amount: user.Bet,
+            hasGradient: false,
+          };
+
+          addUserIfNotExist(usersRed.value, newUser, "Red");
+        }
+        if (user.BetColor == "Green") {
+          const newUser = {
+            name: user.UserName,
+            image:
+              "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png",
+            amount: user.Bet,
+            hasGradient: false,
+          };
+
+          addUserIfNotExist(usersGreen.value, newUser, "Green");
+        }
+        if (user.BetColor == "Black") {
+          const newUser = {
+            name: user.UserName,
+            image:
+              "https://avatar.spworlds.ru/face/55/" + user.UserName + ".png",
+            amount: user.Bet,
+            hasGradient: false,
+          };
+
+          addUserIfNotExist(usersBlack.value, newUser, "Black");
+        }
+      });
+    }
+
+    async function loadGameHistory() {
+      try {
+        await GetNewestDoubleGames()
+          .then((response) => {
+            return response.json();
+          })
+          .then((data) => {
+            slidesHistory.value = [];
+            slidesHistory.length = 0;
+            for (let i = 0; i < 25; i++) {
+              // doubleData = Object.assign(doubleData, dataDoubleParse);
+
+              // timeToGame.value = doubleData.WaitingTime;
+              if (data[i].winColor == "Red") {
+                slidesHistory.push({
+                  img: require("@/assets/icons-games/double-game/HistoryRectangleRedDouble.png"),
+                  target: "Red",
+                });
+              }
+              if (data[i].winColor == "Black") {
+                slidesHistory.push({
+                  img: require("@/assets/icons-games/double-game/HistoryRectangleBlackDouble.png"),
+                  target: "Black",
+                });
+              }
+              if (data[i].winColor == "Green") {
+                slidesHistory.push({
+                  img: require("@/assets/icons-games/double-game/HistoryRectangleGreenDouble.png"),
+                  target: "Green",
+                });
+              }
+            }
+
+            console.log(data);
+          })
+          .catch((error) => {
+            void error;
+          });
+      } catch (error) {
+        void error;
+      }
+    }
+
+    function stopAutoPlay() {
+      autoPlay.value = 0;
+      endGame.value = false;
+      targetColor.value = "";
+    }
+
+    return {
+      slides,
+      slidesHistory,
+      autoPlay,
+      doubleData,
+      targetColor,
+      timeToGame,
+      handleStepCarousel,
+      stopAutoPlay,
+      usersRed,
+      usersBlack,
+      usersGreen,
+      v$,
+    };
+  },
+};
+</script>
+
+<style scoped>
+.carousel__slide {
+  padding: 1px;
+}
+
+.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);
+}
+.double--history-carousel {
+  opacity: 1 !important;
+  transform: rotateY(0) scale(1) !important;
+}
+.double--history-carousel .carousel__slide--active ~ .carousel__slide,
+.double--history-carousel .carousel__slide--prev,
+.double--history-carousel .carousel__slide--next,
+.double--history-carousel .carousel__slide--active {
+  opacity: 1;
+  transform: rotateY(0) scale(1);
+}
+</style>
--- a/luckydiamond/src/router/router.js
+++ b/luckydiamond/src/router/router.js
@@ -6,6 +6,7 @@ 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 DoublePage from "@/pages/games-pages/DoublePage.vue";
 import AboutPage from "@/pages/AboutPage.vue";
 import HelpPage from "@/pages/HelpPage.vue" ;

@@ -17,6 +18,7 @@ export default createRouter({
        { path: '/game/saper', component: SapergamePage, name: 'saper' },
        { path: '/game/crash', component: CrashGamePage, name: 'crash' },
        { path: '/game/jackpot', component: JackpotPage, name: 'jackpot' },
+        { path: '/game/double', component: DoublePage, name: 'double' },
        { path: '/settings', component: SettingsPage, name: 'settings' },
        { path: '/about', component: AboutPage, name: 'about' },
        { path: '/help', component: HelpPage, name: 'help' },