God, I think the Developer did it.

luckydiamond/package-lock.json

@@ -18,6 +18,7 @@
         "save": "^2.9.0",
         "swiper": "^11.0.5",
         "vue": "^3.2.13",
+        "vue-chart-3": "^3.1.8",
         "vue-recaptcha": "^3.0.0-alpha.6",
         "vue-router": "^4.2.5",
         "vue3-recaptcha2": "^1.8.0"
@@ -4306,6 +4307,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/chart.js": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz",
+      "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==",
+      "peer": true
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -7807,6 +7814,11 @@
       "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.assign": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
@@ -11561,6 +11573,21 @@
         }
       }
     },
+    "node_modules/vue-chart-3": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/vue-chart-3/-/vue-chart-3-3.1.8.tgz",
+      "integrity": "sha512-zX5ajjQi/PocEqLETlej3vp92q/tnI/Fvu2RVb++Kap8qOrXu6PXCpodi73BFrWzEGZIAnqoUxC3OIkRWD657g==",
+      "dependencies": {
+        "@vue/runtime-core": "latest",
+        "@vue/runtime-dom": "latest",
+        "csstype": "latest",
+        "lodash-es": "latest"
+      },
+      "peerDependencies": {
+        "chart.js": "=> ^3.1.0",
+        "vue": ">= 3"
+      }
+    },
     "node_modules/vue-demi": {
       "version": "0.14.6",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",

luckydiamond/package.json

@@ -19,6 +19,7 @@
     "save": "^2.9.0",
     "swiper": "^11.0.5",
     "vue": "^3.2.13",
+    "vue-chart-3": "^3.1.8",
     "vue-recaptcha": "^3.0.0-alpha.6",
     "vue-router": "^4.2.5",
     "vue3-recaptcha2": "^1.8.0"

luckydiamond/src/assets/css/ComponentsStyles/chat.css

@@ -184,3 +184,11 @@
 .write__content button:disabled {
     cursor: not-allowed;
 }
+
+.system-message {
+    background-color: rgb(1, 56, 74);
+}
+
+.mention-message {
+    background-color: rgb(169, 113, 0);
+}

luckydiamond/src/assets/css/ComponentsStyles/developer.css

@@ -0,0 +1,153 @@
+.developer-card__content_down {
+    width: 1204px;
+    height: 443px;
+    background-color: aquamarine;
+    margin-left: 287px;
+    margin-right: 298px;
+    margin-bottom: 77px;
+}
+.developer-card__content {
+   
+    display: flex;
+    
+    background-color: black;
+
+}
+
+/* beginning card 1 */
+
+.developer-card__width {
+    display: flex;
+    width: 422px;
+    height: 269px;
+    border-radius: 22px;
+    border: 3px solid #595959 ;
+    /*background-color: #742271;*/
+}
+
+.developer-card__about-text {
+    margin: 30px 0 0 15px;
+}
+
+.developer-card__about-text p {
+    font-family: 'Montserrat';
+    color: #fff;
+    font-size: 14px;
+}
+
+.developer-card__about-text h1 {
+    font-family: 'Montserrat';
+    color: #fff;
+    font-size: 32px;
+    margin-bottom: 20px;
+}
+
+.developer-card__technology {
+    display: flex;
+    margin: 5px 0 0 15px;
+    font-family: 'Montserrat';
+}
+
+.developer-card__technology img {
+    width: 21px;
+    height: 21px;
+    margin-right: 3px;
+}
+
+.developer-card__socials {
+    justify-content: space-around;
+    display: flex;
+    margin: 35% 0 11px 27px;
+    
+}
+
+.developer-card__socials img {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+}
+
+.developer-card__skin {
+    display: flex;
+    align-items: flex-end;
+    margin-left: 15px;
+}
+
+.developer-card__skin img {
+    width: 212px;
+    height: 212px;
+}
+
+/*the and card 1*/
+
+/*beginning card 2*/
+
+.developer-card__height {
+    width: 250px;
+    height: 443px;
+    background-color: #413C3B;
+    border: 3px solid #595959 ;
+    border-radius: 22px;
+}
+
+.developer-card-height__about-text {
+    margin: 30px 0 0 19px;
+    
+}
+.developer-card-height__about-text p {
+    font-family: 'Montserrat';
+    color: #fff;
+    font-size: 14px;
+}
+
+.developer-card-height__about-text h1 {
+    font-family: 'Montserrat';
+    color: white;
+    font-size: 32px;
+}
+
+.developer-card-height__technology {
+    display: flex;
+    font-family: 'Montserrat';
+    margin: 30px 0 0 24px;
+}
+
+.developer-card-height__technology-two-column {
+    display: flex;
+    font-family: 'Montserrat';
+    margin: 10px 0 0 22px;
+}
+
+.techonology-styles img {
+    height: 20px;
+    margin-right: 5px;
+}
+
+.developer-card-height__skin {
+    margin-top: 6px;
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+}
+
+.developer-card-height__skin {
+    width: 212px;
+    height: 212px;
+   
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+    margin-top: 54px;
+}
+
+.developer-card-height__social-icons {
+   justify-content: space-around;
+    display: flex;
+}
+
+
+
+
+
+
+

luckydiamond/src/assets/js/chat/ChatLogic.js

@@ -1,62 +1,66 @@
-import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
+// import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
-import { eventBus } from "@/main";
+// import { eventBus } from "@/main";
-import {
+// import {
-    GetCookie
+//     GetCookie
-} from "@/assets/js/storage/CookieStorage.js";
+// } from "@/assets/js/storage/CookieStorage.js";
-
+//
-let webSocket;
+// let webSocket;
-
+//
-export function ConnectToChat() {
+// export function ConnectToChat() {
-    try {
+//     try {
-        webSocket = new WebSocket(BackendWebSocketUrl);
+//         webSocket = new WebSocket(BackendWebSocketUrl);
-
+//
-        webSocket.onopen = function () {
+//         webSocket.onopen = function () {
-            console.log('Connection established');
+//             console.log('Connection established');
-        };
+//         };
-
+//
-        webSocket.onmessage = function (event) {
+//         webSocket.onmessage = function (event) {
-
+//
-            eventBus.emit('dataChat', event.data)
+//             const dataObject = JSON.parse(event.data);
-
+//
-            console.log('Message from Server:', event.data);
+//             if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
-        };
+//                 eventBus.emit('dataChat', event.data);
-
+//             }
-        webSocket.onclose = function () {
+//
-
+//             console.log('Message from Server:', event.data);
-            webSocket = new WebSocket(BackendWebSocketUrl);
+//         };
-
+//
-            console.log('Connection closed and reconnected');
+//         webSocket.onclose = function () {
-        };
+//
-
+//             webSocket = new WebSocket(BackendWebSocketUrl);
-        webSocket.onerror = function (event) {
+//
-            console.error('WebSocket Error:', event);
+//             console.log('Connection closed and reconnected');
-        };
+//         };
-    } catch (error) {
+//
-        console.error('Error in ConnectToChat:', error);
+//         webSocket.onerror = function (event) {
-    }
+//             console.error('WebSocket Error:', event);
-}
+//         };
-
+//     } catch (error) {
-export function SendMessageToChat(message) {
+//         console.error('Error in ConnectToChat:', error);
-    try {
+//     }
-
+// }
-        if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
+//
-            return;
+// export function SendMessageToChat(message) {
-        }
+//     try {
-
+//
-        const userCredentials = {
+//         if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
-            SearchToken: GetCookie("SearchToken"),
+//             return;
-            AUTHTOKEN: GetCookie("AUTHTOKEN")
+//         }
-        };
+//
-
+//         const userCredentials = {
-        const messageObject = {
+//             SearchToken: GetCookie("SearchToken"),
-            UserCredentials: userCredentials,
+//             AUTHTOKEN: GetCookie("AUTHTOKEN")
-            Message: message,
+//         };
-            MessageType: "Chat"
+//
-        };
+//         const messageObject = {
-
+//             UserCredentials: userCredentials,
-        webSocket.send(JSON.stringify(messageObject));
+//             Message: message,
-
+//             MessageType: "Chat"
-    } catch (error) {
+//         };
-        console.error('Error in ConnectToChat:', error);
+//
-    }
+//         webSocket.send(JSON.stringify(messageObject));
-}
+//
+//     } catch (error) {
+//         console.error('Error in ConnectToChat:', error);
+//     }
+// }

luckydiamond/src/assets/js/rest/RestMethods.js

@@ -55,7 +55,7 @@ export async function GetCurrentMoney(authToken, searchToken) {
 export async function GetChatHistory() {
 
   try {
-    const response = await fetch(`${BackendApiUrl}/ChatHistory/GetChatHistory`, {
+    const response = await fetch(`${BackendApiUrl}/Chat/GetChatHistory`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

luckydiamond/src/components/ChatComponent.vue

@@ -11,7 +11,7 @@
       <ul>
         <transition-group name="fade">
           <li v-for="msg in array" :key="msg">
-            <div class="card__user">
+            <div class="card__user" :class="{ 'mention-message': isCurrentUser(msg), 'system-message' : msg.username === '🛠️ System' }">
               <div class="user__icon">
                 <img :src="msg.icon" />
               </div>
@@ -31,6 +31,7 @@
 <script>
 import "@/assets/css/ComponentsStyles/chat.css";
 import { GetChatHistory } from "@/assets/js/rest/RestMethods.js";
+import { GetCookie } from "@/assets/js/storage/CookieStorage";
 
 import WritechatComponent from "@/components/WritechatComponent.vue";
 import { SendMessageToChat } from "@/assets/js/chat/ChatLogic.js";
@@ -53,6 +54,9 @@ export default {
         chatContent.scrollTop = chatContent.scrollHeight;
       });
     },
+    isCurrentUser(msg) {
+      return msg.msg.includes(GetCookie('SpUserName'))
+    },
     ClaimDatamsg(msg) {
       const now = Date.now();
       if (!this.lastMsgTime || now - this.lastMsgTime >= 2000) {
@@ -61,16 +65,13 @@ export default {
       } else {
         alert("Вы не можете отправлять сообщения чаще, чем раз в 2 секунды.");
       }
-      // if(this.array.length > 7) {
-      //   this.array.shift()
-      // }
     },
   },
   mounted() {
     eventBus.on("dataChat", (dataFromServer) => {
       try {
-        // Attempt to parse the JSON string
         const dataObject = JSON.parse(dataFromServer);
+        
         let imageUrl =
           "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
 
@@ -81,6 +82,10 @@ export default {
           icon: imageUrl,
         };
 
+        if (MsgUser.username === '🛠️ System') {
+          MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+        }
+
         this.array.push(MsgUser);
 
         this.ScrollToBottom();
@@ -102,6 +107,10 @@ export default {
             icon: imageUrl,
           };
 
+          if (MsgUser.username === '🛠️ System') {
+            MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+          }
+
           this.array.push(MsgUser);
         });
         this.ScrollToBottom();

luckydiamond/src/components/DeveloperComponent.vue

@@ -0,0 +1,70 @@
+<template>
+  <ul>
+    <li v-for="developer in DevelopersOptions" :key="developer.id">
+      <div class="developer-card__content" v-if="developer.id > 4">
+        <div class="developer-card__width" :style="{ background: developer.background }">
+          <div class="developer-card__text">
+            <div class="developer-card__about-text">
+              <p>{{ developer.userRole }}</p>
+              <h1>{{ developer.username }}</h1>
+            </div>
+            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
+              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
+              <p>{{ techText }}</p>
+            </div>
+            <div class="developer-card__socials">
+              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
+                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
+              </div>
+            </div>
+          </div>
+          <div class="developer-card__skin">
+            <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
+          </div>
+        </div>
+      </div>
+      <div class="developer-card__content_down" v-else>
+        <div class="developer-card__height" :style="{ background: developer.background }">
+          <div class="developer-card-height__text">
+            <div class="developer-card-height__about-text">
+              <p>{{ developer.userRole }}</p>
+              <h1>{{ developer.username }}</h1>
+            </div>
+            <div v-for="(techText, index) in developer.technologyText" :key="index" class="developer-card__technology">
+              <img :src="require(`@/assets/icons-developcard/${developer.technologyIcons[index]}.png`)" :alt="techText">
+              <p>{{ techText }}</p>
+            </div>
+          </div>
+          <div class="developer-card-height__skin">
+            <div class="developer-card__socials">
+              <div v-for="(socialIcon, index) in developer.socialIcons" :key="index" class="social__content">
+                <img :src="require(`@/assets/icons-developcard/${developer.socialIcons[index]}.png`)">
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import DevelopersOptions from "@/mocks/DevelopersOptions";
+import '@/assets/css/ComponentsStyles/developer.css'
+
+export default {
+  data() {
+    return {
+      DevelopersOptions
+    }
+  },
+  methods: {
+    testMethod(developer, username) {
+      console.log(developer, username)
+    }
+  },
+  created() {
+    console.log(DevelopersOptions)
+  }
+}
+</script>

luckydiamond/src/components/HeaderComponent.vue

@@ -160,7 +160,7 @@ export default {
           <!-- <div class="header__card--auth">  -->
           <div class="auth__card--content">
             <a
-              href="https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify"
+              href="https://media.discordapp.net/attachments/1175674631684898866/1203382105934139422/Untitled.png?ex=65d0e3eb&is=65be6eeb&hm=226770699b0ac57c74b1516868e9d7ddb6eb1cb952366ea07e62ccf4ee551a1d&=&format=webp&quality=lossless"
               @click="auth = true"
               ><span
                 ><img
@@ -169,6 +169,7 @@ export default {
                   src="../assets/icons-header/discord-icon.svg" /></span
               >Вход</a
             >
+<!--            https://discord.com/api/oauth2/authorize?client_id=1148644854797176932&redirect_uri=https%3A%2F%2Flucky-diamond.vercel.app&response_type=code&scope=identify-->
           </div>
         </div>
       </div>

luckydiamond/src/mocks/DevelopersOptions.js

@@ -0,0 +1,66 @@
+export default [
+    {
+        id: 1,
+        username: "Rafael1209",
+        userRole: "Бэкендер",
+        background: "#636363",
+        technologyText: ["ASP,.NET,MongoDB", "Designer"],
+        technologyIcons: ["csharp-logo", "figma"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 2,
+        username: "Hepatir",
+        userRole: "Бэкендер",
+        background: "#413C3B",
+        technologyText: ["ASP,.NET,MongoDB", "SQL"],
+        technologyIcons: ["csharp-logo", "sql-logo"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 3,
+        username: "Ckutls_",
+        userRole: "Фронтэндер",
+        background: "#B88484",
+        technologyText: ["html 5, css", "JavaScript", "Vue 3"],
+        technologyIcons: ["html", "js", "vue"],
+        socialIcons: ["telegram", "discord", "github"],
+    },
+    {
+        id: 4,
+        username: "FUpir",
+        userRole: "Дизайнер",
+        background: "#C58E74",
+        technologyText: ["Designer"],
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"],
+    },
+    {
+        id: 5,
+        username: "megatntmega",
+        userRole: "Дизайнер",
+        background: "#393A3A",
+        technologyText: ["Designer"],
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"]
+    },
+    {
+        id: 6,
+        username: "busha888",
+        userRole: "Фронтэндер",
+        background: "#742271",
+        technologyText: ["html 5, css"],
+        technologyIcons: ["html"],
+        socialIcons: ["odniclasniki", "telegram", "like", "github"],
+    },
+    {
+        id: 7,
+        username: "CLARFFY",
+        userRole: "Дизайнер",
+        background: "#E2B374",
+        technologyText: ["Designer"],
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"]
+    }
+]
+    

luckydiamond/src/mocks/object.js

@@ -1,84 +0,0 @@
-export default [
-     {
-        Rafael1209:{
-            username:"Rafael1209",
-            background:"#636363",
-            tehnologi_text:"ASP,.NET,MongoDB,Designer",
-                icons_tehnologi:{
-            github: "@/assets/icons-developcard/github.png",
-            discord: "@/assets/icons-developcard/discord.png",
-            telegram: "@/assets/icons-developcard/telegram.png",
-            C_sharp: "@/assets/icons-developcard/Logo_C_sharp.png",
-            Figma: "@/assets/icons-developcard/Figma.png"
-        }
-    },
-    Hepatir:{
-        username:"Hepatir",
-        background:"#595959",
-        tehnologi_text:"ASP,.NET,MongoDB,SQL",
-        icons_tehnologi:{
-            github: "@/assets/icons-developcard/github.png",
-            discord: "@/assets/icons-developcard/discord.png",
-            C_sharp: "@/assets/icons-developcard/Logo_C_sharp.png",
-            telegram: "@/assets/icons-developcard/telegram.png",
-            pngegg: "@/assets/icons-developcard/pngegg.png"
-        }
-   },
-   Ckutls_:{
-    username:"Ckutls_",
-    background:"#B88484",
-    tehnologi_text:"HTML 5, CSS,JavaScript,Vue 3",
-    icons_tehnologi:{
-        github: "@/assets/icons-developcard/github.png",
-        discord: "@/assets/icons-developcard/discord.png",
-        telegram: "@/assets/icons-developcard/telegram.png",
-        js: "@/assets/icons-developcard/js.png",
-        Vue: "@/assets/icons-developcard/Vue.png"
-        }
-    },
-    FUpir:{
-        username:"FUpir",
-        background:"#C58E74",
-        tehnologi_text:"Designer",
-        icons_tehnologi:{
-            discord: "@/assets/icons-developcard/discord.png",
-            telegram: "@/assets/icons-developcard/telegram.png",
-            Figma: "@/assets/icons-developcard/Figma.png"
-        }
-    },
-    megatntmega:{
-        username:"megatntmega",
-        background:"#393A3A",
-        tehnologi_text:"Designer",
-        icons_tehnologi:{
-            discord: "@/assets/icons-developcard/discord.png",
-            telegram: "@/assets/icons-developcard/telegram.png",
-            Figma: "@/assets/icons-developcard/Figma.png"
-        }
-    },
-    busha888:{
-        username:"busha888",
-        background:"#742271",
-        tehnologi_text:"HTML 5, CSS",
-        icons_tehnologi:{
-            github: "@/assets/icons-developcard/github.png",
-            telegram: "@/assets/icons-developcard/telegram.png",
-            odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
-            like: "@/assets/icons-developcard/like.png",
-            html: "@/assets/icons-developcard/html.png"
-        }
-    },
-    CLARFFY:{
-        username:"CLARFFY",
-        background:"#742271",
-        tehnologi_text:"Designer",
-        icons_tehnologi:{
-            discord: "@/assets/icons-developcard/discord.png",
-            telegram: "@/assets/icons-developcard/telegram.png",
-            Figma: "@/assets/icons-developcard/Figma.png"
-
-        }
-    },
-   }
-]
-    

luckydiamond/src/pages/AboutPage.vue

@@ -10,7 +10,7 @@
       </div>
 </template>
 <script>
-import DevelopComponent from "@/components/DevelopComponent.vue";
+import DevelopComponent from "@/components/DeveloperComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 

luckydiamond/src/pages/HomePage.vue

@@ -86,7 +86,8 @@
                     <h3 class="title-twoline">{{ mode.title }}</h3>
                   </div>
                   <div class="container">
-                    <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: 'crash' })" class="line__btn">play <span class="line__btn--elm">></span></a>
                     <img src="@/assets/icons-gamemodes/crush-icon.svg">
                   </div>
                 </li>
@@ -102,14 +103,13 @@
 <script>
 import HeaderComponent from "@/components/HeaderComponent.vue";
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
-import ChatComponent from "@/components/ChatComponent.vue";
 import HomemobilePage from "@/pages/adaptive-pages/HomemobilePage.vue";
 import GameModes from "@/mocks/GameModes";
 import '@/assets/css/PagesStyles/home.css'
 
 export default {
   name: 'HomePage',
-  components: { AsideBarComponent, HeaderComponent, ChatComponent, HomemobilePage },
+  components: { AsideBarComponent, HeaderComponent,  HomemobilePage },
   data() {
     return {
       GameModes,

luckydiamond/src/pages/SettingsPage.vue

@@ -1,28 +1,28 @@
 <template>
-    <div class="content__grid-profile" >
+  <div class="content__grid-profile" >
-      <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>
 
-    <section class="settings"></section>
+  <section class="settings"></section>
     
-    </div>
+  </div>
-  </template>
+</template>
 
-  <script>
+<script>
-  import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
-  import ChatComponent from "@/components/ChatComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
-  import HeaderComponent from "@/components/HeaderComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
 
-  import '@/assets/css/PagesStyles/SettingsPage.css'
+import '@/assets/css/PagesStyles/settings.css'
-  export default {
+export default {
-    components: {
+  components: {
-    ChatComponent,
+  ChatComponent,
-    HeaderComponent,
+  HeaderComponent,
-    AsideBarComponent
+  AsideBarComponent
-  }
+}
 
-  }
+}
-  </script>
+</script>

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

@@ -0,0 +1,11 @@
+<template>
+  <crash-graph-component></crash-graph-component>
+</template>
+
+<script>
+import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue";
+
+export default {
+  components: { CrashGraphComponent }
+}
+</script>

luckydiamond/src/router/router.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
 import HomePage from "../pages/HomePage.vue";
 import ProfilePage from "@/pages/ProfilePage.vue";
 import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
-import SettingsPage from "@/pages/SettingsPage.vue"
+import SettingsPage from "@/pages/SettingsPage.vue";
 import AboutPage from "@/pages/AboutPage.vue"
 export default createRouter({
     history: createWebHistory(),