From 95f3fa0719dfe82f13e08f3eec284cc78cce4fa3 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Wed, 6 Dec 2023 11:33:39 +0300
Subject: [PATCH] =?UTF-8?q?added=20logic=20for=20=C3=90btn=20click=20in=20?=
 =?UTF-8?q?saperpage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../css/PagesStyles/games-pages/saper.css     |  6 +++++
 .../src/pages/games-pages/SapergamePage.vue   | 26 ++++++++++++-------
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
index 7e6347b..cf93718 100644
--- a/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
+++ b/luckydiamond/src/assets/css/PagesStyles/games-pages/saper.css
@@ -122,6 +122,12 @@ input[type="number"]::-webkit-outer-spin-button {
     margin-left: -5.5%;
 }
 
+.btn-click {
+    border-radius: 10px !important;
+    background: #EF4444 !important;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) !important;
+}
+
 .crystals-btns__choices button,
 .btn-style__diamonds button {
     margin-left: 5px;
diff --git a/luckydiamond/src/pages/games-pages/SapergamePage.vue b/luckydiamond/src/pages/games-pages/SapergamePage.vue
index bfac6c2..15babbc 100644
--- a/luckydiamond/src/pages/games-pages/SapergamePage.vue
+++ b/luckydiamond/src/pages/games-pages/SapergamePage.vue
@@ -17,7 +17,7 @@
             <h3>Количество кристалов</h3>
             <div class="crystals__choises crystals-input__margin crystals-btns__choices">
               <img class="crystal-icon" width="25" height="25" src="@/assets/icons-games/saper-game/icon-crystall-saper.svg">
-              <input type="number">
+              <input v-model="amountCrystals" type="number">
               <ul class="crystals-btns__display">
                 <li v-for="(item, index) in SaperNumbers" :key="index">
                   <button v-if="item.crystals !== undefined">{{ item.crystals }}</button>
@@ -29,11 +29,11 @@
             <h3>Сумма депозита</h3>
             <div class="diamonds__choises">
               <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
-              <input type="number" id="diamonds-input">
+              <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 SaperNumbers" :key="index">
-                    <button :id="item.diamonds === 'max' ? 'max-button' : null" v-if="item.diamonds !== undefined">{{ item.diamonds }}</button>
+                    <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>
@@ -127,19 +127,16 @@ import AsideBarElement from "@/components/AsidebarComponent.vue";
 import HeaderElementPage from "@/components/HeaderComponent.vue";
 import '@/assets/css/PagesStyles/games-pages/saper.css'
 import SaperNumbers from "@/mocks/SaperNumbers";
-import {flip} from "@popperjs/core";
 
 export default {
-  computed: {
-    flip() {
-      return flip
-    }
-  },
   components: {ChatComponent, HeaderElementPage, AsideBarElement },
   data() {
     return {
       SaperNumbers,
-      clickedBtn: false,
+      clickedBtn: '',
+      amountCrystals: 5,
+      balance: 1000,
+      amountDeposit: 5,
       flippedCards: []
     }
   },
@@ -152,6 +149,15 @@ export default {
         this.flippedCards.push(index);
       }
     },
+    clickedBtnChoice(index, content) {
+      this.clickedBtn = index
+      if (content === 'max') {
+        this.amountDeposit = this.balance
+      }
+      else {
+        this.amountDeposit = content
+      }
+    }
   },
 }
 </script>