card repair and adaptation

2025-12-10 04:09:29 +02:00 · 2024-02-16 16:59:44 +03:00
parent 7f2459dead 49a494977b
commit b86aa746f0
20 changed files with 373 additions and 183 deletions
--- a/luckydiamond/package-lock.json
+++ b/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",
--- a/luckydiamond/package.json
+++ b/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"
--- a/luckydiamond/src/assets/css/ComponentsStyles/chat.css
+++ b/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);
+}
--- a/luckydiamond/src/assets/css/ComponentsStyles/developer.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
@@ -1,3 +1,4 @@
+<<<<<<< HEAD

 .info {
    flex-direction: column;
@@ -30,10 +31,98 @@
 /*beginning Hepatir_card-2 2*/

 .Hepatir_card {
+=======
+.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 {
+>>>>>>> 49a494977b172fe4ea3d91155eb39f66ffe70420
    width: 250px;
    height: 443px;
    background-color: #413C3B;
    border: 3px solid #595959 ;
+<<<<<<< HEAD
    border-color: #595959;
    border-radius: 22px;
 }
@@ -653,7 +742,6 @@
 /*the and CLARFFY_card 1*/
 
@media only screen and (min-width: 2048px) { 
-
    .info {
        flex-direction: column;
        align-items: center;
@@ -712,6 +800,65 @@
        margin-bottom: 20px;
    }
    }
+=======
+    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;
+}
+>>>>>>> 49a494977b172fe4ea3d91155eb39f66ffe70420



--- a/luckydiamond/src/assets/css/PagesStyles/SettingsPage.css
+++ b/luckydiamond/src/assets/css/PagesStyles/SettingsPage.css
--- a/luckydiamond/src/assets/icons-developcard/Logo_C_sharp.png
+++ b/luckydiamond/src/assets/icons-developcard/Logo_C_sharp.png
--- a/luckydiamond/src/assets/icons-developcard/figma.png
+++ b/luckydiamond/src/assets/icons-developcard/figma.png
--- a/luckydiamond/src/assets/icons-developcard/sql-logo.png
+++ b/luckydiamond/src/assets/icons-developcard/sql-logo.png
--- a/luckydiamond/src/assets/icons-developcard/vue.png
+++ b/luckydiamond/src/assets/icons-developcard/vue.png
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -1,62 +1,66 @@
-import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
-import { eventBus } from "@/main";
-import {
-    GetCookie
-} from "@/assets/js/storage/CookieStorage.js";
-
-let webSocket;
-
-export function ConnectToChat() {
-    try {
-        webSocket = new WebSocket(BackendWebSocketUrl);
-
-        webSocket.onopen = function () {
-            console.log('Connection established');
-        };
-
-        webSocket.onmessage = function (event) {
-
-            eventBus.emit('dataChat', event.data)
-
-            console.log('Message from Server:', event.data);
-        };
-
-        webSocket.onclose = function () {
-
-            webSocket = new WebSocket(BackendWebSocketUrl);
-
-            console.log('Connection closed and reconnected');
-        };
-
-        webSocket.onerror = function (event) {
-            console.error('WebSocket Error:', event);
-        };
-    } catch (error) {
-        console.error('Error in ConnectToChat:', error);
-    }
-}
-
-export function SendMessageToChat(message) {
-    try {
-
-        if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
-            return;
-        }
-
-        const userCredentials = {
-            SearchToken: GetCookie("SearchToken"),
-            AUTHTOKEN: GetCookie("AUTHTOKEN")
-        };
-
-        const messageObject = {
-            UserCredentials: userCredentials,
-            Message: message,
-            MessageType: "Chat"
-        };
-
-        webSocket.send(JSON.stringify(messageObject));
-
-    } catch (error) {
-        console.error('Error in ConnectToChat:', error);
-    }
-}
+// import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
+// import { eventBus } from "@/main";
+// import {
+//     GetCookie
+// } from "@/assets/js/storage/CookieStorage.js";
+//
+// let webSocket;
+//
+// export function ConnectToChat() {
+//     try {
+//         webSocket = new WebSocket(BackendWebSocketUrl);
+//
+//         webSocket.onopen = function () {
+//             console.log('Connection established');
+//         };
+//
+//         webSocket.onmessage = function (event) {
+//
+//             const dataObject = JSON.parse(event.data);
+//
+//             if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
+//                 eventBus.emit('dataChat', event.data);
+//             }
+//
+//             console.log('Message from Server:', event.data);
+//         };
+//
+//         webSocket.onclose = function () {
+//
+//             webSocket = new WebSocket(BackendWebSocketUrl);
+//
+//             console.log('Connection closed and reconnected');
+//         };
+//
+//         webSocket.onerror = function (event) {
+//             console.error('WebSocket Error:', event);
+//         };
+//     } catch (error) {
+//         console.error('Error in ConnectToChat:', error);
+//     }
+// }
+//
+// export function SendMessageToChat(message) {
+//     try {
+//
+//         if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
+//             return;
+//         }
+//
+//         const userCredentials = {
+//             SearchToken: GetCookie("SearchToken"),
+//             AUTHTOKEN: GetCookie("AUTHTOKEN")
+//         };
+//
+//         const messageObject = {
+//             UserCredentials: userCredentials,
+//             Message: message,
+//             MessageType: "Chat"
+//         };
+//
+//         webSocket.send(JSON.stringify(messageObject));
+//
+//     } catch (error) {
+//         console.error('Error in ConnectToChat:', error);
+//     }
+// }
--- a/luckydiamond/src/assets/js/rest/RestMethods.js
+++ b/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",
--- a/luckydiamond/src/components/ChatComponent.vue
+++ b/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();
--- a/luckydiamond/src/components/DeveloperComponent.vue
+++ b/luckydiamond/src/components/DeveloperComponent.vue
--- a/luckydiamond/src/components/HeaderComponent.vue
+++ b/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>
--- a/luckydiamond/src/mocks/DevelopersOptions.js
+++ b/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"]
+    }
+]
+    
--- a/luckydiamond/src/mocks/object.js
+++ b/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"
-
-        }
-    },
-   }
-]
-    
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/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,
--- a/luckydiamond/src/pages/SettingsPage.vue
+++ b/luckydiamond/src/pages/SettingsPage.vue
@@ -9,20 +9,20 @@
  <section class="settings"></section>
    
  </div>
-  </template>
+</template>

-  <script>
-  import AsideBarComponent from "@/components/AsidebarComponent.vue";
-  import ChatComponent from "@/components/ChatComponent.vue";
-  import HeaderComponent from "@/components/HeaderComponent.vue";
+<script>
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";

-  import '@/assets/css/PagesStyles/SettingsPage.css'
-  export default {
+import '@/assets/css/PagesStyles/settings.css'
+export default {
  components: {
  ChatComponent,
  HeaderComponent,
  AsideBarComponent
-  }
+}

-  }
-  </script>
+}
+</script>
--- a/luckydiamond/src/pages/games-pages/CrashgamePage.vue
+++ b/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>
--- a/luckydiamond/src/router/router.js
+++ b/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(),