From 4028b95a0f4d0a97fcb3d712fc0dd2b75a043dab Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 18 Nov 2023 18:54:32 +0300
Subject: [PATCH] added grid-area template and add create element chat

---
 luckydiamond/src/assets/css/global.css   | 14 +++++++++++++-
 luckydiamond/src/pages/ChatElement.vue   | 15 +++++++++++++++
 luckydiamond/src/pages/HeaderElement.vue |  4 +++-
 luckydiamond/src/pages/HomePage.vue      |  9 ++++++---
 4 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 luckydiamond/src/pages/ChatElement.vue

diff --git a/luckydiamond/src/assets/css/global.css b/luckydiamond/src/assets/css/global.css
index 416da14..0a13a79 100644
--- a/luckydiamond/src/assets/css/global.css
+++ b/luckydiamond/src/assets/css/global.css
@@ -4,6 +4,7 @@
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    color: #fff;
 }
 
 ul {
@@ -22,7 +23,10 @@ body, html {
     display: grid;
     grid-template-areas:
     'menu header header header header header'
-    ;
+    'menu main main main main chat'
+    'menu main main main main chat'
+    'menu gamemode gamemode gamemode gamemode chat'
+    'menu gamemode gamemode gamemode gamemode chat';
 }
 
 /* /Content Grid */
@@ -43,6 +47,14 @@ body, html {
 
 /* /Menu */
 
+/* Chat */
+
+.chat {
+    grid-area: chat;
+}
+
+/* /Chat */
+
 /* Main */
 
 .main {
diff --git a/luckydiamond/src/pages/ChatElement.vue b/luckydiamond/src/pages/ChatElement.vue
new file mode 100644
index 0000000..0b27978
--- /dev/null
+++ b/luckydiamond/src/pages/ChatElement.vue
@@ -0,0 +1,15 @@
+<template>
+  <aside class="chat">
+
+  </aside>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/luckydiamond/src/pages/HeaderElement.vue b/luckydiamond/src/pages/HeaderElement.vue
index 99b7d44..06bc247 100644
--- a/luckydiamond/src/pages/HeaderElement.vue
+++ b/luckydiamond/src/pages/HeaderElement.vue
@@ -1,6 +1,8 @@
 <template>
   <header class="header">
-
+    <div class="header__content">
+      <h1>123</h1>
+    </div>
   </header>
 </template>
 
diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index bf7431a..1729bad 100644
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -2,11 +2,13 @@
   <div class="content-grid">
     <aside-bar-element></aside-bar-element>
 
+    <chat-element></chat-element>
+
     <header-element-page></header-element-page>
 
-    <section class="main">
+    <main class="main">
 
-    </section>
+    </main>
 
     <section class="gamemode">
 
@@ -17,11 +19,12 @@
 <script>
 import HeaderElementPage from "@/pages/HeaderElement.vue";
 import AsideBarElement from "@/pages/AsidebarElement.vue";
+import ChatElement from "@/pages/ChatElement.vue";
 import GameModes from "@/mocks/GameModes";
 
 export default {
   name: 'HomePage',
-  components: {AsideBarElement, HeaderElementPage },
+  components: {AsideBarElement, HeaderElementPage, ChatElement },
   data() {
     return {
       GameModes