From d6ecad255439f37b543b39153a51dcaeec20b217 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 4 Feb 2024 12:39:18 +0300
Subject: [PATCH] build grid for crash-game

---
 luckydiamond/src/assets/css/global.css        | 30 +++++++++++++++++
 .../src/pages/games-pages/CrashgamePage.vue   | 32 +++++++++++++++++--
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css
index 3e048ac..ef60c29 100644
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -73,6 +73,22 @@ body, html {
     grid-gap: 10px;
 }
 
+.grid-crash {
+    display: grid;
+    grid-template-columns: .35fr repeat(5, 1fr) 1fr;
+    grid-template-rows: auto 0fr repeat(4, 1fr);
+    grid-auto-columns: 1fr;
+    gap: 10px;
+    grid-auto-flow: row;
+    grid-template-areas:
+    "menu header header header header header header"
+    "menu crashgame crashgame crashgame crashgame crashgame chat"
+    "menu crashgame crashgame crashgame crashgame crashgame chat"
+    "menu crashgame crashgame crashgame crashgame crashgame chat"
+    "menu crashgame crashgame crashgame crashgame crashgame chat"
+    "menu crashplayers crashplayers crashplayers crashplayers crashplayers chat"
+    "menu crashplayers crashplayers crashplayers crashplayers crashplayers chat";
+}
 
 /* /Content Grid */
 
@@ -159,6 +175,20 @@ body, html {
 
 /* /Saper */
 
+/* Crash */
+
+.crash-game {
+    grid-area: crashgame;
+    background: #8f07ff;
+}
+
+.crash-game__players {
+    background: #1900ff;
+    grid-area: crashplayers;
+}
+
+/* /Crash */
+
 /* Media */
 
 /* /Media */
\ No newline at end of file
diff --git a/luckydiamond/src/pages/games-pages/CrashgamePage.vue b/luckydiamond/src/pages/games-pages/CrashgamePage.vue
index 3475078..00b17e2 100644
--- a/luckydiamond/src/pages/games-pages/CrashgamePage.vue
+++ b/luckydiamond/src/pages/games-pages/CrashgamePage.vue
@@ -1,11 +1,39 @@
 <template>
-  <crash-graph-component></crash-graph-component>
+  <div class="grid-crash">
+
+    <aside-bar-component></aside-bar-component>
+
+    <chat-component></chat-component>
+
+    <header-component></header-component>
+
+    <section class="crash-game">
+      <div class="crash-game__content">
+        <div class="crash-game__start-window">
+
+        </div>
+        <div class="crash-game__graph">
+          <crash-graph-component></crash-graph-component>
+        </div>
+      </div>
+    </section>
+
+    <section class="crash-game__players">
+      <div class="crash-game-players__content">
+
+      </div>
+    </section>
+
+  </div>
 </template>
 
 <script>
+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";
 
 export default {
-  components: { CrashGraphComponent }
+  components: { HeaderComponent, AsideBarComponent, ChatComponent, CrashGraphComponent }
 }
 </script>
\ No newline at end of file