Add jackpot page

luckydiamond/src/assets/css/global.css

@@ -11,7 +11,8 @@ ul {
     list-style: none;
 }
 
-body, html {
+body,
+html {
     background: #121212;
     height: 100%;
     margin: 0;
@@ -47,12 +48,12 @@ button {
     grid-auto-columns: 1fr;
     grid-auto-flow: row;
     grid-template-areas:
-    "menu header header header header header header"
-    "menu main main main main main chat"
-    "menu main main main main main chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat"
-    "menu gamemode gamemode gamemode gamemode gamemode chat";
+        "menu header header header header header header"
+        "menu main main main main main chat"
+        "menu main main main main main chat"
+        "menu gamemode gamemode gamemode gamemode gamemode chat"
+        "menu gamemode gamemode gamemode gamemode gamemode chat"
+        "menu gamemode gamemode gamemode gamemode gamemode chat";
     height: 100%;
     grid-gap: 0.625rem;
 }
@@ -64,13 +65,14 @@ button {
     grid-auto-columns: 1fr;
     grid-auto-flow: row;
     grid-template-areas:
-    "menu header header header header header header"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat"
-    "menu profile profile profile profile profile chat";
+        "menu header header header header header header"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat"
+        "menu profile profile profile profile profile chat";
     grid-gap: 0.625rem;
     height: 100%;
 }
@@ -81,13 +83,29 @@ button {
     grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
     grid-template-rows: auto 0fr repeat(4, 1fr);
     grid-template-areas:
-    "menu header header header header header header"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat"
-    "menu saper saper saper saper saper chat";
+        "menu header header header header header header"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat"
+        "menu saper saper saper saper saper chat";
+    grid-gap: 0.625rem;
+}
+
+.content-grid--jackpot {
+    display: grid;
+    grid-auto-columns: 1fr;
+    grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-template-areas:
+        "menu header header header header header header"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat"
+        "menu jackpot jackpot jackpot jackpot jackpot chat";
     grid-gap: 0.625rem;
 }
 
@@ -99,13 +117,13 @@ button {
     gap: 0.625rem;
     grid-auto-flow: row;
     grid-template-areas:
-    "menu header header header header header header"
-    "menu crash crash crash crash crash chat"
-    "menu crash crash crash crash crash chat"
-    "menu crash crash crash crash crash chat"
-    "menu crash crash crash crash crash chat"
-    "menu crash crash crash crash crash chat"
-    "menu crash crash crash crash crash chat";
+        "menu header header header header header header"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat"
+        "menu crash crash crash crash crash chat";
 }
 
 /* /Content Grid */
@@ -182,6 +200,16 @@ button {
     margin: 0.625rem 2.438rem 1.125rem 1.125rem;
 }
 
+.jackpot {
+    display: flex;
+    grid-area: jackpot;
+    height: 95%;
+    border-radius: 3.125rem;
+    background: #17181C;
+    box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
+    margin: 0.625rem 2.438rem 1.125rem 1.125rem;
+}
+
 /* /Profile */
 
 /* Saper */

luckydiamond/src/pages/HomePage.vue

@@ -50,7 +50,8 @@
                 <div :class="'linecontent-' + mode.id">
                   <div class="container">
                     <h1 class="title-firstline">{{ mode.title }}</h1>
-                    <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
+                    <!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
+                    <a href="#" @click="$router.push({ name: 'jackpot' })" class="line__btn">play <span class="line__btn--elm">></span></a>
                   </div>
                 </div>
                 <div class="line__img">

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

@@ -0,0 +1,51 @@
+<template>
+        <div class="content-grid--jackpot" >
+  <aside-bar-component></aside-bar-component>
+
+  <chat-component></chat-component>
+
+  <header-component></header-component>
+  <!-- <div class="grid-crash"> -->
+  <!-- <div class="grid-crash">
+    <h1>Test</h1>
+  </div> -->
+        </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 {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
+
+
+// import '@/assets/css/PagesStyles/games-pages/jackpot.css'
+export default {
+  components: { HeaderComponent, AsideBarComponent, ChatComponent },
+  data() {
+    return {
+      //   SaperNumbers,
+      //   clickedBtn: null,
+      //   ErrorClick: false,
+      //   ErrorJoin: false,
+      //   balance: 0,
+      //   amountDeposit: 0,
+      //   crashObject: '',
+      //   textError: '',
+      //   startGame: false,
+      //   offBtn: false
+    };
+  },
+ 
+  async created() {
+    if (GetCookie("AUTHTOKEN") && GetCookie("SearchToken")) {
+      await GetCurrentMoney(
+        GetCookie("AUTHTOKEN"),
+        GetCookie("SearchToken")
+      ).then((response) => {
+        this.balance = response.currentMoney;
+      });
+    }
+  },
+};
+</script>

luckydiamond/src/router/router.js

@@ -4,6 +4,7 @@ import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
 import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
+import JackpotPage from "@/pages/games-pages/JackpotPage.vue";
 import SettingsPage from "@/pages/SettingsPage.vue"
 import AboutPage from "@/pages/AboutPage.vue"
 export default createRouter({
@@ -13,6 +14,7 @@ export default createRouter({
         { path: '/profile', component: ProfilePage, name: 'profile' },
         { path: '/game/saper', component: SapergamePage, name: 'saper' },
         { path: '/game/crash', component: CrashGamePage, name: 'crash' },
+        { path: '/game/jackpot', component: JackpotPage, name: 'jackpot' },
         { path: '/settings', component: SettingsPage, name: 'settings' },
         { path: '/about', component: AboutPage, name: 'about' },
     ]