card repair and adaptation

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

@@ -183,4 +183,12 @@
 
 .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

@@ -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
 
 
 

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);
+//     }
+// }

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