added logic for card-count

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

@@ -386,24 +386,26 @@ input[type="number"]::-webkit-outer-spin-button {
     text-align: center;
     font-family: "Montserrat Alternates";
     font-size: 18px;
-    font-width: 700;
+    font-weight: 700;
     padding: 1% 1%;
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
     border-radius: 25px;
+    opacity: 0;
+}
+
+.on-element-card {
+    opacity: 1 !important;
+    transition: opacity .4s ease;
 }
 
 .emeralds-bg {
     background: #6BC884;
-    /*top: -54px;*/
-    /*left: 20px;*/
     top: -22%;
     left: 12%;
 }
 
 .crystals-bg {
     background: #EF4444;
-    /*top: -52px;*/
-    /*left: 20px;*/
     top: -20%;
     left: 12%;
 }

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

@@ -132,8 +132,8 @@
                   <h2>Изумруды</h2>
                   <p>Открывай ячейки с изумрудами</p>
                   <img src="@/assets/icons-games/saper-game/icon-emeralds-saper.svg" width="170" height="170">
-                  <div class="info-crystals__count card-style-count emeralds-bg">
-                    <h3>22</h3>
+                  <div class="info-crystals__count card-style-count emeralds-bg" :class="{ 'on-element-card' : gameStart === true }">
+                    <h3>{{ this.emeraldsAmount }}</h3>
                   </div>
                 </div>
               </div>
@@ -142,8 +142,8 @@
                   <h2>кристаллы</h2>
                   <p>Остерегайся кристаллов, чтобы не проиграть</p>
                   <img src="@/assets/icons-games/saper-game/icon-crystall-info-saper.svg" width="170" height="170">
-                  <div class="info-crystals__count card-style-count crystals-bg">
-                    <h3>3</h3>
+                  <div class="info-crystals__count card-style-count crystals-bg" :class="{ 'on-element-card' : gameStart === true }">
+                    <h3>{{ this.amountCrystals }}</h3>
                   </div>
                 </div>
               </div>
@@ -197,6 +197,7 @@ export default {
       clickedBtn: '',
       clickedBtnCrystal : '',
       amountCrystals: 0,
+      emeraldsAmount: 0,
       balance: 0,
       winningAmount: 0,
       gamesCircle: 0,
@@ -322,6 +323,7 @@ export default {
          this.CorrectsClick.push(X_Cordinates)
 
          SoundUncorrect.play()
+         this.emeraldsAmount--
        }
        if (this.gamesCircle === maxCircles) {
          this.offEventPointers = false
@@ -402,6 +404,7 @@ export default {
         })
 
         soundStartGame.play()
+        this.emeraldsAmount = 25 - this.amountCrystals
       }
     },
     getBalanceUser() {