Add jackpot

luckydiamond/public/index.html

@@ -17,6 +17,9 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap" rel="stylesheet">
+  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> -->
+  <link rel="stylesheet" href="dist/css/bootstrap-grid.min.css" />
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/dmhendricks/bootstrap-grid-css@4.1.3/dist/css/bootstrap-grid.min.css" />
   <title>LuckyDiamond</title>
 </head>
 
@@ -35,5 +38,5 @@
 <script src="https://cdn.jsdelivr.net/npm/vue-demi"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vuelidate/core"></script>
 <script src="https://cdn.jsdelivr.net/npm/@vuelidate/validators"></script>
-
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
 </html>

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

@@ -0,0 +1,43 @@
+.jackpot-start {
+    z-index: 1;
+    /* margin-left: 5%; */
+    border-radius: 20px;
+    background: #22252F;
+    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    width: 42vh;
+    /* height: 480px; */
+    height: 32vh;
+    /* margin-top: 2.6%; */
+}
+
+.jackpot-start__content p {
+    color: #FFFFFF84;
+    font-weight: 700;
+    line-height: 31px;
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    font-family: Montserrat Alternates;
+    font-size: 13px;
+}
+
+.padding-elements-jackpot {
+    padding-left: 5%;
+    padding-right: 5%;
+}
+
+.jackpot-start__btns {
+    margin-top: 5%;
+    display: flex;
+    flex-direction: column;
+}
+.jackpot-start__btns button {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 5px;
+    border: none;
+    color: #FFF;
+    font-weight: 700;
+    line-height: 19px;
+    font-style: normal;
+    font-family: Inter;
+    font-size: 16px;
+}

luckydiamond/src/assets/css/global.css

@@ -257,6 +257,29 @@ button {
 }
 
 
+.bg-gradient-left {
+    background: #293561;
+    filter: blur(120px);
+    position: absolute;
+    top: 250px;
+    transform: rotate(180deg);
+    left: 200px;
+    width: 40%;
+    height: 55%;
+    z-index: 0;
+}
+
+.bg-two-gradient-right {
+    background: #293561;
+    filter: blur(120px);
+    position: absolute;
+    top: 220px;
+    transform: rotate(330deg);
+    left: 600px;
+    width: 60%;
+    height: 35%;
+    z-index: 0;
+}
 /* /Crash */
 
 /* Media */

luckydiamond/src/components/ChatComponent.vue

@@ -11,7 +11,13 @@
       <ul>
         <transition-group name="fade">
           <li v-for="msg in array" :key="msg">
-            <div class="card__user" :class="{ 'mention-message': isCurrentUser(msg), 'system-message' : msg.username === '🛠️ System' }">
+            <div
+              class="card__user"
+              :class="{
+                'mention-message': isCurrentUser(msg),
+                'system-message': msg.username === '🛠️ System',
+              }"
+            >
               <div class="user__icon">
                 <img :src="msg.icon" />
               </div>
@@ -55,7 +61,7 @@ export default {
       });
     },
     isCurrentUser(msg) {
-      return msg.msg.includes(GetCookie('SpUserName'))
+      return msg.msg.includes(GetCookie("SpUserName"));
     },
     ClaimDatamsg(msg) {
       const now = Date.now();
@@ -82,8 +88,8 @@ export default {
           icon: imageUrl,
         };
 
-        if (MsgUser.username === '🛠️ System') {
+        if (MsgUser.username === "🛠️ System") {
-          MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+          MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
         }
 
         this.array.push(MsgUser);
@@ -98,7 +104,8 @@ export default {
     GetChatHistory().then((response) => {
       if (response && response.length) {
         response.forEach((element) => {
-          let imageUrl = "https://avatar.spworlds.ru/face/55/" + element.userName;
+          let imageUrl =
+            "https://avatar.spworlds.ru/face/55/" + element.userName;
 
           const MsgUser = {
             id: this.id + 1,
@@ -107,8 +114,8 @@ export default {
             icon: imageUrl,
           };
 
-          if (MsgUser.username === '🛠️ System') {
+          if (MsgUser.username === "🛠️ System") {
-            MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+            MsgUser.icon = "https://avatar.spworlds.ru/face/55/CONSOLE";
           }
 
           this.array.push(MsgUser);

luckydiamond/src/mocks/JackpotNumbers.js

@@ -0,0 +1,20 @@
+export default [
+    {
+        diamonds: 1,
+    },
+    {
+        diamonds: 5,
+    },
+    {
+        diamonds: 10,
+    },
+    {
+        diamonds: 50,
+    },
+    {
+        diamonds: 100,
+    },
+    {
+        diamonds: 'max',
+    }
+]

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

@@ -1,22 +1,83 @@
 <template>
-        <div class="content-grid--jackpot" >
+  <div class="content-grid--jackpot">
-  <aside-bar-component></aside-bar-component>
+    <aside-bar-component></aside-bar-component>
 
-  <chat-component></chat-component>
+    <chat-component></chat-component>
 
-  <header-component></header-component>
+    <header-component></header-component>
-  <!-- <div class="grid-crash"> -->
+    <div class="bg-gradient-left"></div>
-  <!-- <div class="grid-crash">
+    <!-- <div class="bootstrap-wrapper">
-    <h1>Test</h1>
+      <div class="container">
+          <div class="row hidden-sm-down"> 
+              <div class="col-md-1">.</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+              <div class="col-md-1">.col-</div>
+          </div>
+      </div>
   </div> -->
+    <!-- <section class="crash-game"> -->
+
+    <div class="jackpot-start">
+      <div class="jackpot-start__content title-saper padding-elements-jackpot">
+        <h2>Джекпот</h2>
+        <p>Больше ставь, больше побеждай!</p>
+
+        <div class="saper-start__choises diamonds diamonds-input__margin">
+          <h3>Сумма депозита</h3>
+
+          <div class="diamonds__choises">
+            <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+            <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 JackpotNumbers" :key="index">
+                  <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>
+          </div>
         </div>
+        <div class="jackpot-start__btns">
+          <div class="error-block" v-if="ErrorClick">
+            <h2>Ошибка при заполнении</h2>
+          </div>
+          <button class="btn-start" :class="{ 'animate-start-btn' : ErrorClick }" @click="clickPlayButton">Начать игру</button>
+          <!-- <button class="btn-claim" v-if="winningAmount === 0">Забрать {{ winningAmount }} АР</button>
+          <button class="btn-claim" @click="claimWinningAmount()" v-else>Забрать {{ winningAmount.toFixed(2) }} АР</button> -->
+        </div>
+      </div>
+    </div>
+    <h1>gfdgfd</h1>
+    <!-- </section> -->
+
+    <!-- <div class="crash-content"> -->
+
+    <!-- </div> -->
+    <!-- <section class="jackpot">
+
+
+  </section> -->
+  </div>
 </template>
 <script>
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
-import {GetCookie} from "@/assets/js/storage/CookieStorage";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
-import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+import { GetCurrentMoney } from "@/assets/js/rest/RestMethods";
+import "@/assets/css/PagesStyles/games-pages/jackpot.css";
+import "@/assets/css/global.css";
+import JackpotNumbers from "@/mocks/JackpotNumbers";
 
 
 // import '@/assets/css/PagesStyles/games-pages/jackpot.css'
@@ -24,12 +85,12 @@ export default {
   components: { HeaderComponent, AsideBarComponent, ChatComponent },
   data() {
     return {
-      //   SaperNumbers,
+      JackpotNumbers,
       //   clickedBtn: null,
       //   ErrorClick: false,
       //   ErrorJoin: false,
       //   balance: 0,
-      //   amountDeposit: 0,
+        amountDeposit: 0,
       //   crashObject: '',
       //   textError: '',
       //   startGame: false,
@@ -37,6 +98,57 @@ export default {
     };
   },
 
+  watch: {
+    amountDeposit(DepositCount) {
+      if (![1, 5, 10, 50, 100, parseInt(this.balance)].includes(DepositCount)) {
+        this.clickedBtn = null;
+      } else {
+        let index;
+        switch (DepositCount) {
+          case 1:
+            if (parseInt(this.balance) === DepositCount) {
+              index = 5;
+            } else {
+              index = 0;
+            }
+            break;
+          case 5:
+            if (parseInt(this.balance) === DepositCount) {
+              index = 5;
+            } else {
+              index = 1;
+            }
+            break;
+          case 10:
+            if (parseInt(this.balance) === DepositCount) {
+              index = 5;
+            } else {
+              index = 2;
+            }
+            break;
+          case 50:
+            if (parseInt(this.balance) === DepositCount) {
+              index = 5;
+            } else {
+              index = 3;
+            }
+            break;
+          case 100:
+            if (parseInt(this.balance) === DepositCount) {
+              index = 5;
+            } else {
+              index = 4;
+            }
+            break;
+          case parseInt(this.balance):
+            index = 5;
+            break;
+        }
+
+        this.clickedBtnChoice(index, DepositCount);
+      }
+    },
+  },
   async created() {
     if (GetCookie("AUTHTOKEN") && GetCookie("SearchToken")) {
       await GetCurrentMoney(