added styles for crash-game-window

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

@@ -14,3 +14,129 @@
     box-shadow: 0 4px #00000040;
     border-radius: 20px;
 }
+
+.crash-game {
+    background: #22252F;
+    border-radius: 20px;
+    box-shadow: 4px 4px 4px 0px #00000040;
+    width: 95%;
+    height: 475px;
+    margin: 0 auto;
+}
+
+.crash-game__content {
+    display: flex;
+}
+
+/* Crash-Window */
+
+.crash-game__start-window {
+    margin-left: 30px;
+}
+
+.crash-game__start-window .crash__game-name {
+    margin: 62px 0 2px 0;
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 26px;
+    color: #fff;
+    box-shadow: 1px 1px 1px 0px #00000001;
+}
+
+.crash-game__start-window p {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 14px;
+    color: #FFFFFF85;
+}
+
+.crash-game-window__inputs {
+    margin-top: 29px;
+}
+
+.crash-label {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 13px;
+    color: #44C6EF54;
+    margin: 0 0 4px 4px;
+}
+
+.input-style-crash {
+    width: 347px;
+    height: 40px;
+    border: 2px solid #2B3458;
+    border-radius: 20px;
+    background: #22252F;
+}
+
+.diamond-input-crash {
+    margin-left: -25px;
+}
+
+.input-style-crash__text {
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 12px;
+    color: #fff;
+    padding-left: 35px;
+}
+
+.crash-input-deposit .diamonds-btns__display {
+    margin: 8px 0 19px -22px;
+}
+
+.crash-input-deposit #max-button {
+    padding: 4px 10px;
+}
+
+.crash-input-deposit .diamond-icon {
+    left: 12px;
+}
+
+.crash-game-window__btn-start {
+    display: flex;
+    justify-content: center;
+    margin-top: 23px;
+}
+
+.crash-game-window__btn-start button {
+    background: #EF4444;
+    border: unset;
+    border-radius: 10px;
+    width: 300px;
+    height: 60px;
+    font-family: 'Montserrat Alternates';
+    font-weight: 700;
+    font-size: 16px;
+}
+
+.crash-window__line {
+    display: flex;
+    flex-direction: row-reverse;
+    position: relative;
+    top: -415px;
+    left: 10%;
+    z-index: 1;
+}
+
+.line-crash {
+    width: 2px;
+    height: 474px;
+    background: #30364F;
+}
+
+/* /Crash-Window */
+
+/* Crash-Graph */
+
+/* /Crash-Graph */
+
+/* Crash-Players */
+
+.crash-game__players {
+    z-index: 2;
+    background: #000;
+}
+
+/* /Crash-Players */

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

@@ -11,10 +11,41 @@
       <section class="crash-game">
         <div class="crash-game__content">
           <div class="crash-game__start-window">
+            <h2 class="crash__game-name">Краш</h2>
+            <p>Жди момента и забирай выигрыш</p>
+            <div class="crash-game-window__inputs">
+              <div class="crash-deposit">
+                <h3 class="crash-label">Сумма депозита</h3>
+                <div class="crash-input-deposit">
+                  <img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
+                  <input class="input-style-crash input-style-crash__text diamond-input-crash" type="number" v-model="amountDeposit">
+                  <div class="diamonds__btns btn-style__diamonds">
+                    <ul class="diamonds-btns__display">
+                      <li v-for="(item, index) in SaperNumbers" :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="crash-ratio">
+                <h3 class="crash-label">Автовывод</h3>
+                <div class="crash-input-ratio">
+                  <input class="input-style-crash input-style-crash__text" type="number" v-model="autoRatio" placeholder="Введите коэффициент">
+                </div>
+              </div>
+            </div>
+            <div class="crash-game-window__btn-start">
+              <button>Начать игру</button>
+            </div>
+            <div class="crash-window__line">
+              <div class="line-crash">
 
+              </div>
+            </div>
           </div>
           <div class="crash-game__graph">
-<!--            <crash-graph-component></crash-graph-component>-->
+            <crash-graph-component></crash-graph-component>
           </div>
         </div>
       </section>
@@ -33,11 +64,110 @@
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
-// import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue";
+import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue";
+
+import { useVuelidate } from '@vuelidate/core'
+import { maxValue, minValue, required, numeric, integer } from "@vuelidate/validators";
+
 
 import '@/assets/css/PagesStyles/games-pages/crash.css'
+import SaperNumbers from "@/mocks/SaperNumbers";
+import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+import {GetCookie} from "@/assets/js/storage/CookieStorage";
 
 export default {
-  components: { HeaderComponent, AsideBarComponent, ChatComponent }
+  components: { HeaderComponent, AsideBarComponent, ChatComponent, CrashGraphComponent },
+  data() {
+    return {
+      SaperNumbers,
+      amountDeposit: 0,
+      autoRatio: 0
+    }
+  },
+  setup() {
+    return { v$: useVuelidate() }
+  },
+  validations() {
+    return {
+      amountDeposit: { required, numeric, minValue: minValue(1), maxValue: maxValue(100), integer },
+      autoRatio: { numeric, minValue: minValue(1.01) }
+    }
+  },
+  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)
+      }
+    },
+  },
+  methods: {
+    async clickedBtnChoice(index, content) {
+      this.clickedBtn = index
+      if (content === 'max') {
+        await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
+            .then((response) => {
+              console.log(response.currentMoney, this.balance)
+              const responseBalance = response.currentMoney
+
+              if (responseBalance === this.balance) {
+                this.amountDeposit = parseInt(responseBalance)
+              }
+            })
+      }
+      else {
+        this.amountDeposit = content
+      }
+    },
+  }
 }
 </script>