Merge branch 'DevelopCkutls'

luckydiamond/package-lock.json

@@ -12,6 +12,7 @@
         "bootstrap": "^5.3.2",
         "core-js": "^3.8.3",
         "mitt": "^3.0.1",
+        "swiper": "^11.0.5",
         "vue": "^3.2.13",
         "vue-recaptcha": "^3.0.0-alpha.6",
         "vue-router": "^4.2.5",
@@ -10759,6 +10760,24 @@
         "node": ">= 10"
       }
     },
+    "node_modules/swiper": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.0.5.tgz",
+      "integrity": "sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==",
+      "funding": [
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/swiperjs"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/table": {
       "version": "6.8.1",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz",

luckydiamond/package.json

@@ -13,6 +13,7 @@
     "bootstrap": "^5.3.2",
     "core-js": "^3.8.3",
     "mitt": "^3.0.1",
+    "swiper": "^11.0.5",
     "vue": "^3.2.13",
     "vue-recaptcha": "^3.0.0-alpha.6",
     "vue-router": "^4.2.5",

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

@@ -493,3 +493,31 @@ input[type="number"]::-webkit-outer-spin-button {
 }
 
 /* /Media */
+
+/* Swiper */
+
+.swiper {
+    user-select: none;
+    width: 100%;
+    height: 100%;
+}
+
+.swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+}
+
+.swiper-slide img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.swiper-pagination {
+    position: unset !important;
+}
+
+/* /Swiper */

luckydiamond/src/components/NotiicationwindowComponent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="notification" v-if="notification">
     <div class="notification__content">
-      <h3>Успешное пополнение</h3>
+      <h3>Успешное вывод!</h3>
     </div>
   </div>
 </template>

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

@@ -20,7 +20,7 @@
               <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>
+                  <button @click="clickedBtnCrystals(index, item.crystals)" :class="{ 'btn-click': clickedBtnCrystal === index, [index]: clickedBtnCrystal === index }" :id="item.crystals === 'max' ? 'max-button' : null" v-if="item.crystals !== undefined">{{ item.crystals }}</button>
                 </li>
               </ul>
             </div>
@@ -44,11 +44,22 @@
             <button class="btn-claim">Забрать 15 АР</button>
           </div>
           <div class="saper-start__steps btns-style__steps">
-            <ul class="steps-btns__display">
+            <swiper :slidesPerView="6" :spaceBetween="-100"  :pagination="{ clickable: true }" :modules="modules">
-              <li v-for="(item, index) in SaperNumbers" :key="index">
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
-                <button v-if="item.steps !== undefined">{{ item.steps }}</button>
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
-              </li>
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
-            </ul>
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
+              <swiper-slide>1</swiper-slide> <swiper-slide>1</swiper-slide>
+            </swiper>
+<!--            <ul class="steps-btns__display">-->
+<!--              <li v-for="(item, index) in SaperNumbers" :key="index">-->
+<!--                <button v-if="item.steps !== undefined">{{ item.steps }}</button>-->
+<!--              </li>-->
+<!--            </ul>-->
           </div>
         </div>
       </div>
@@ -125,19 +136,28 @@
 import ChatComponent from "@/components/ChatComponent.vue";
 import AsideBarElement from "@/components/AsidebarComponent.vue";
 import HeaderElementPage from "@/components/HeaderComponent.vue";
+
+import { Swiper, SwiperSlide } from 'swiper/vue';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import { Pagination } from 'swiper/modules';
+
 import '@/assets/css/PagesStyles/games-pages/saper.css'
 import SaperNumbers from "@/mocks/SaperNumbers";
 
 export default {
-  components: {ChatComponent, HeaderElementPage, AsideBarElement },
+  components: {ChatComponent, HeaderElementPage, AsideBarElement, Swiper, SwiperSlide },
   data() {
     return {
       SaperNumbers,
       clickedBtn: '',
+      clickedBtnCrystal : '',
       amountCrystals: 5,
       balance: 1000,
       amountDeposit: 5,
-      flippedCards: []
+      flippedCards: [],
+      
+      modules: [ Pagination ]
     }
   },
   methods: {
@@ -157,7 +177,11 @@ export default {
       else {
         this.amountDeposit = content
       }
-    }
+    },
+    clickedBtnCrystals(index, content) {
+      this.clickedBtnCrystal = index
+      this.amountCrystals = content
+    },
   },
 }
 </script>