card repair and adaptation

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>