add double

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

@@ -17,6 +17,44 @@
     height: 94%;
 }
 
+.double-ui-component {
+    display: flex;
+    align-items: center;
+    background-color: #3b5998;
+    border-radius: 20px;
+    padding: 10px 20px;
+    max-width: 300px;
+    color: white;
+    font-family: Arial, sans-serif;
+}
+
+.double-ui-component img {
+    border-radius: 50%;
+    margin-right: 10px;
+    /* Отступ справа от изображения */
+}
+
+.double-ui-component .double-username {
+    flex-grow: 1;
+    /* Занимает доступное пространство */
+    text-align: left;
+    /* Выравнивание текста по левому краю */
+}
+
+.double-ui-component .double-score {
+    display: flex;
+    align-items: center;
+}
+
+.double-ui-component .double-score img {
+    width: 20px;
+    /* Ширина изображения монетки */
+    height: 20px;
+    /* Высота изображения монетки */
+    margin-left: 5px;
+    /* Отступ слева от монетки */
+}
+
 .double-members-ingame-red {
     background: linear-gradient(to bottom right,
             #A9373C,
@@ -27,7 +65,8 @@
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     margin-top: 1vh;
     width: 100%;
-    height: 94%;
+    height: 50vh;
+    /* height: 94%; */
     padding: 2vh;
 }
 
@@ -41,7 +80,8 @@
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     margin-top: 1vh;
     width: 100%;
-    height: 94%;
+    height: 50vh;
+    /* height: 94%; */
     padding: 2vh;
 }
 
@@ -56,7 +96,8 @@
     margin-top: 1vh;
     margin-top: 1vh;
     width: 100%;
-    height: 94%;
+    /* height: 94%; */
+    height: 50vh;
     padding: 2vh;
 }
 

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

@@ -114,33 +114,29 @@
               <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">
+                    <div class="double-red-box">RED X2</div>
-                      RED X2
-                    </div>
                     <div class="double-user-icon">
-                      <span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">0</span>
                     </div>
                   </div>
                   <h1>fds</h1>
-                  <h1>fds</h1>
+                  <div>
-                  <h1>fds</h1>
+                    <div v-for="user in users" :key="user.id" class="double-user-icon">
-                  <h1>fds</h1>
+                      <img :src="user.image" alt="User Icon" class="double-user-icon-img" />
-                  <h1>fds</h1>
+                      <span class="double-user-name">{{ user.name }}</span>
-                  <h1>fds</h1>
+                      <span class="double-number-color">{{ user.amount }}</span>
-                  <h1>fds</h1>
+                    </div>
-                  <h1>fds</h1>
+                  </div>
-                  <h1>fds</h1>
-                  <h1>fds</h1>
                 </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">
+                    <div class="double-green-box">GREEN X20</div>
-                      GREEN X20
-                    </div>
                     <div class="double-user-icon">
-                      <span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">0</span>
                     </div>
                   </div>
                   <h1>fds</h1>
@@ -148,14 +144,16 @@
                   <h1>fds</h1>
                 </div>
               </div>
-              <div class="col-md-4" style="padding-left: 0px; padding-right: 0px">
+              <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">
+                    <div class="double-white-box">BLACK X2</div>
-                      BLACK X2
-                    </div>
                     <div class="double-user-icon">
-                      <span class="double-user-icon-span"></span> <span class="double-number-color">0</span>
+                      <span class="double-user-icon-span"></span>
+                      <span class="double-number-color">0</span>
                     </div>
                   </div>
                   <h1>fds</h1>
@@ -198,6 +196,7 @@ export default {
   data() {
     return {
       JackpotNumbers,
+      users: []
     };
   },
   async created() {},
@@ -257,7 +256,8 @@ export default {
 
     onMounted(() => {
       loadGameHistory();
-
+      
+      this.users = this.fetchUsers();
       // if (slides.length == 0) {
       //   for (let i = 1; i < 29; i++) {
       //     if (i == 15 || i == 28) {