add double

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

@@ -1,10 +1,56 @@
+.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: 32vh;
+    height: 37vh;
     border: 1px solid #262C55;
     margin: 2.6%;
     margin-top: 0px;
@@ -20,25 +66,34 @@
 .double-ui-component {
     display: flex;
     align-items: center;
-    background-color: #3b5998;
-    border-radius: 20px;
-    padding: 10px 20px;
+    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 img {
-    border-radius: 50%;
-    margin-right: 10px;
-    /* Отступ справа от изображения */
+.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 {
@@ -46,16 +101,25 @@
     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: 20px;
-    /* Ширина изображения монетки */
-    height: 20px;
-    /* Высота изображения монетки */
-    margin-left: 5px;
-    /* Отступ слева от монетки */
+    width: 3vh;
+    height: 3vh;
+    margin-left: 10px;
 }
 
 .double-members-ingame-red {
+    overflow-y: auto;
     background: linear-gradient(to bottom right,
             #A9373C,
             #1C2133 20%);
@@ -65,12 +129,13 @@
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     margin-top: 1vh;
     width: 100%;
-    height: 50vh;
+    height: 49vh;
     /* height: 94%; */
     padding: 2vh;
 }
 
 .double-members-ingame-green {
+    overflow-y: auto;
     background: linear-gradient(to bottom right,
             #345D3B,
             #1C2133 20%);
@@ -80,12 +145,13 @@
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     margin-top: 1vh;
     width: 100%;
-    height: 50vh;
+    height: 49vh;
     /* height: 94%; */
     padding: 2vh;
 }
 
 .double-members-ingame-black {
+    overflow-y: auto;
     background: linear-gradient(to bottom right,
             #1B1A1A,
             #1C2133 26%);
@@ -97,7 +163,7 @@
     margin-top: 1vh;
     width: 100%;
     /* height: 94%; */
-    height: 50vh;
+    height: 49vh;
     padding: 2vh;
 }
 

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

@@ -31,14 +31,12 @@ export function ConnectToChat() {
 
                 if (dataObject.MessageType == 'DoubleGameState') {
                     eventBus.emit('doubleGame', event.data)
-                    console.log(event.data)
                     return;
                 }
 
                 if (dataObject.MessageType == "CrashGameState") {
                     eventBus.emit('crash', event.data);
                     return;
-
                 }
 
                 if (Array.isArray(dataObject.CurrentGame.PlayerList)) {
@@ -47,7 +45,7 @@ export function ConnectToChat() {
                 }
 
             } catch (error) {
-                void(error);
+                void (error);
             }
         };
 

luckydiamond/src/assets/js/games/double/DoubleApi.js

@@ -1,4 +1,8 @@
 import { BackendApiUrl } from '@/properties/Сonfig.js';
+import {
+    GetCookie
+} from "@/assets/js/storage/CookieStorage.js";
+
 
 export async function GetNewestDoubleGames() {
     try {
@@ -19,4 +23,47 @@ export async function GetNewestDoubleGames() {
     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')
+    }
 }