added styles for vision players

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

@@ -67,7 +67,7 @@
     width: 347px;
     height: 40px;
     border: 2px solid #2B3458;
-    border-radius: 20px;
+    border-radius: 15px;
     background: #22252F;
 }
 
@@ -163,9 +163,128 @@
 
 .crash-game__players {
     z-index: 2;
-    background: #000;
+    background: #22252F;
+    height: 91%;
+    width: 95%;
+    margin: 0 auto;
+    border-radius: 20px;
+}
+
+.crash-game-players__content {
+    background: #1D1F24;
+    border-radius: 15px;
+    width: 98%;
+    height: 270px;
+    margin: 20px auto 0 auto;
     overflow-y: auto;
-    height: 300px;
+}
+
+.user-list {
+    display: flex;
+    margin: 0 auto;
+    flex-wrap: wrap;
+    width: 90%;
+    flex-direction: row;
+}
+
+.user-crash {
+    margin-top: 20px;
+    margin-left: 5%;
+    display: flex;
+    width: 300px;
+}
+
+.user-crash__icon {
+    width: 40px;
+    height: 40px;
+}
+
+.user-crash__content {
+    display: flex;
+    align-items: center;
+}
+
+.user-crash__content .user-name-crash {
+    color: #61647F;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 18px;
+    margin-left: 10px;
+}
+
+.user-crah__status {
+    display: flex;
+    align-items: center;
+}
+
+.status-balance {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    width: 50%;
+}
+
+.status-balance .user-bid-crash {
+    margin: 0 5px 0 30px;
+    font-family: 'Montserrat';
+    font-size: 18px;
+    font-weight: 700;
+    color: #848484;
+}
+
+.status-balance img {
+    margin-top: 7px;
+}
+
+.status-game-user {
+    margin-left: 5%;
+}
+
+.status-game-user__style {
+    margin-right: 15px;
+    color: #61647F;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 15px;
+    padding: 2px 4px;
+    background: #22252F;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    border-radius: 5px;
+}
+
+.lose-game-crash {
+    color: #fff !important;
+    background: #EF4847 !important;
+}
+
+.win-status-crash {
+    display: flex;
+    align-items: center;
+}
+
+.win-status-crash .win-text-crash {
+    color: #28BD49;
+    font-weight: 700;
+    font-size: 15px;
+    font-family: 'Montserrat';
+    text-align: center;
+    background: #1D1F24;
+    border: 1px solid #28BD49;
+    border-radius: 5px;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    padding: 2px 4px;
+}
+
+.user-win-money {
+    margin: 0 5px 0 15px;
+    color: #28BD49;
+    font-size: 16px;
+    font-family: 'Montserrat';
+    font-weight: 700;
+}
+
+.win-status-crash img {
+    margin-top: 7px;
 }
 
 /* /Crash-Players */

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

@@ -50,13 +50,26 @@
 
       <section class="crash-game__players" v-if="crashObject && crashObject.Players">
         <div class="crash-game-players__content">
-          <ul v-if="crashObject.Players.length">
+          <ul class="user-list" v-if="crashObject.Players.length">
-            <li v-for="(player, index) in crashObject.Players" :key="index">
+            <li class="user-crash" v-for="(player, index) in crashObject.Players" :key="index">
-              <h2>{{ player.UserName }}</h2>
+              <img class="user-crash__icon" :src="`https://avatar.spworlds.ru/face/55/${player.UserName}`">
-              <h2>{{ player.Bid }}</h2>
+              <div class="user-crash__content">
-              <div class="win" v-if="player.UserGameState === 'Win'">
+                <h3 class="user-name-crash">{{ player.UserName }}</h3>
-                <h2>{{ player.WinningMoney }}</h2>
+                <div class="user-crah__status">
-                <h2>{{ player.WinningX }}</h2>
+                  <div class="status-balance">
+                    <h2 class="user-bid-crash">{{ player.Bid }}</h2>
+                    <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+                  </div>
+                  <div class="status-game-user">
+                    <h3 v-if="crashObject.Status === 'WaitingForPlayers' && player.WinningX <= 0 || crashObject.Status === 'InGame' && player.WinningX <= 0" class="status-game-user__style">В&nbsp;игре</h3>
+                    <h3 v-if="crashObject.Status === 'GameEnd' && player.WinningX <= 0" class="status-game-user__style lose-game-crash">Проиграл</h3>
+                    <div class="win-status-crash" v-if="player.WinningX >= 1">
+                      <h3 class="win-text-crash">{{ player.WinningX.toFixed(2) }}</h3>
+                      <h2 class="user-win-money">{{ player.WinningMoney.toFixed(2) }}</h2>
+                      <img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+                    </div>
+                  </div>
+                </div>
               </div>
             </li>
           </ul>