From 6db67cf0d1664612f28c53419d15aaaad8e44246 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Tue, 30 Jan 2024 22:52:51 +0300
Subject: [PATCH 01/24] fixed path to chat

---
 luckydiamond/src/assets/js/rest/RestMethods.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/luckydiamond/src/assets/js/rest/RestMethods.js b/luckydiamond/src/assets/js/rest/RestMethods.js
index 3b390fe..716805b 100644
--- 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",

From 3bdd99bc1b9abd63e5f5d5d60fb169f02cd2a613 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Tue, 30 Jan 2024 23:11:10 +0300
Subject: [PATCH 02/24] added if-block for changed icon for system-notification

---
 luckydiamond/src/components/ChatComponent.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/luckydiamond/src/components/ChatComponent.vue b/luckydiamond/src/components/ChatComponent.vue
index 9ad4b69..698b09c 100644
--- a/luckydiamond/src/components/ChatComponent.vue
+++ b/luckydiamond/src/components/ChatComponent.vue
@@ -102,6 +102,10 @@ export default {
             icon: imageUrl,
           };
 
+          if (MsgUser.username === '🛠️ System') {
+            MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+          }
+
           this.array.push(MsgUser);
         });
         this.ScrollToBottom();

From 04d1e73d441ff54c4bbc31983d962815dec8983e Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Tue, 30 Jan 2024 23:39:12 +0300
Subject: [PATCH 03/24] fixed changed-icon for system-notification

---
 luckydiamond/src/components/ChatComponent.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/luckydiamond/src/components/ChatComponent.vue b/luckydiamond/src/components/ChatComponent.vue
index 698b09c..28d3466 100644
--- a/luckydiamond/src/components/ChatComponent.vue
+++ b/luckydiamond/src/components/ChatComponent.vue
@@ -81,6 +81,10 @@ export default {
           icon: imageUrl,
         };
 
+        if (MsgUser.username === '🛠️ System') {
+          MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
+        }
+
         this.array.push(MsgUser);
 
         this.ScrollToBottom();

From bde224c34790c41d9e82d8ae7e59d3a9e60a3861 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Tue, 30 Jan 2024 23:40:03 +0300
Subject: [PATCH 04/24] added comment for save icon

---
 luckydiamond/src/components/ChatComponent.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/luckydiamond/src/components/ChatComponent.vue b/luckydiamond/src/components/ChatComponent.vue
index 28d3466..ad7592f 100644
--- a/luckydiamond/src/components/ChatComponent.vue
+++ b/luckydiamond/src/components/ChatComponent.vue
@@ -81,10 +81,12 @@ export default {
           icon: imageUrl,
         };
 
-        if (MsgUser.username === '🛠️ System') {
+        if (MsgUser.username === 'System') {
           MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
         }
 
+
+        // 🛠️ - icon
         this.array.push(MsgUser);
 
         this.ScrollToBottom();
@@ -106,7 +108,7 @@ export default {
             icon: imageUrl,
           };
 
-          if (MsgUser.username === '🛠️ System') {
+          if (MsgUser.username === 'System') {
             MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
           }
 

From 0bc976855a28f91c01587b630bb79fcb5bb248fe Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Wed, 31 Jan 2024 21:29:46 +0100
Subject: [PATCH 05/24] Add chart

---
 luckydiamond/package-lock.json          | 27 ++++++++++
 luckydiamond/package.json               |  1 +
 luckydiamond/src/pages/SettingsPage.vue | 70 ++++++++++++++++---------
 3 files changed, 74 insertions(+), 24 deletions(-)

diff --git a/luckydiamond/package-lock.json b/luckydiamond/package-lock.json
index 0a11ca1..7c52dfa 100644
--- 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",
diff --git a/luckydiamond/package.json b/luckydiamond/package.json
index 9c6dd42..e825f8c 100644
--- 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"
diff --git a/luckydiamond/src/pages/SettingsPage.vue b/luckydiamond/src/pages/SettingsPage.vue
index 4c00078..9139cb3 100644
--- a/luckydiamond/src/pages/SettingsPage.vue
+++ b/luckydiamond/src/pages/SettingsPage.vue
@@ -1,28 +1,50 @@
 <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";
+  <LineChart
+    :chart-data="data"
+    :options="options"
+    css-classes="chart-container"
+  />
+</template>
 
-  import '@/assets/css/PagesStyles/SettingsPage.css'
-  export default {
-    components: {
-    ChatComponent,
-    HeaderComponent,
-    AsideBarComponent
-  }
+<script setup>
+import { ref, computed } from "vue"
+import { LineChart } from "vue-chart-3"
+import {
+  Chart,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+} from "chart.js"
 
+Chart.register(
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement
+)
+
+const dataValues = ref([13, 14,16])
+
+const data = computed(() => ({
+  labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+
+  datasets: [
+    {
+      label: "Foo",
+      data: dataValues.value,
+      backgroundColor: "#dc322f"
+    }
+  ]
+}))
+
+const options = ref({
+  plugins: {
+    title: {
+      text: "Line"
+    }
   }
-  </script>
\ No newline at end of file
+})
+</script>
\ No newline at end of file

From 2f5118791cefbb0c31d639e1f009726c1916c58e Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Thu, 1 Feb 2024 00:57:37 +0300
Subject: [PATCH 06/24] added chat-notification

---
 .../src/assets/css/ComponentsStyles/chat.css     |  8 ++++++++
 luckydiamond/src/components/ChatComponent.vue    | 16 +++++++---------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/chat.css b/luckydiamond/src/assets/css/ComponentsStyles/chat.css
index 32f6ef6..4f5777b 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/chat.css
+++ b/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);
 }
\ No newline at end of file
diff --git a/luckydiamond/src/components/ChatComponent.vue b/luckydiamond/src/components/ChatComponent.vue
index ad7592f..d60f212 100644
--- 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,15 +65,11 @@ 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,12 +81,10 @@ export default {
           icon: imageUrl,
         };
 
-        if (MsgUser.username === 'System') {
+        if (MsgUser.username === '🛠️ System') {
           MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
         }
 
-
-        // 🛠️ - icon
         this.array.push(MsgUser);
 
         this.ScrollToBottom();
@@ -108,7 +106,7 @@ export default {
             icon: imageUrl,
           };
 
-          if (MsgUser.username === 'System') {
+          if (MsgUser.username === '🛠️ System') {
             MsgUser.icon = 'https://avatar.spworlds.ru/face/55/CONSOLE'
           }
 

From ea3169d24b3db627c85baae7f65e095c31394f78 Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Wed, 31 Jan 2024 23:06:26 +0100
Subject: [PATCH 07/24] Add demo cart to CrashGamePage

---
 luckydiamond/src/pages/SettingsPage.vue       |  66 ++++-------
 .../src/pages/games-pages/CrashGamePage.vue   | 111 ++++++++++++++++++
 2 files changed, 133 insertions(+), 44 deletions(-)
 create mode 100644 luckydiamond/src/pages/games-pages/CrashGamePage.vue

diff --git a/luckydiamond/src/pages/SettingsPage.vue b/luckydiamond/src/pages/SettingsPage.vue
index 9139cb3..80d810f 100644
--- a/luckydiamond/src/pages/SettingsPage.vue
+++ b/luckydiamond/src/pages/SettingsPage.vue
@@ -1,50 +1,28 @@
 <template>
-  <LineChart
-    :chart-data="data"
-    :options="options"
-    css-classes="chart-container"
-  />
+  <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 setup>
-import { ref, computed } from "vue"
-import { LineChart } from "vue-chart-3"
-import {
-  Chart,
-  LineController,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement
-} from "chart.js"
+<script>
+import AsideBarComponent from "@/components/AsidebarComponent.vue";
+import ChatComponent from "@/components/ChatComponent.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
 
-Chart.register(
-  LineController,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement
-)
+import '@/assets/css/PagesStyles/SettingsPage.css'
+export default {
+  components: {
+  ChatComponent,
+  HeaderComponent,
+  AsideBarComponent
+}
 
-const dataValues = ref([13, 14,16])
-
-const data = computed(() => ({
-  labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
-
-  datasets: [
-    {
-      label: "Foo",
-      data: dataValues.value,
-      backgroundColor: "#dc322f"
-    }
-  ]
-}))
-
-const options = ref({
-  plugins: {
-    title: {
-      text: "Line"
-    }
-  }
-})
+}
 </script>
\ No newline at end of file
diff --git a/luckydiamond/src/pages/games-pages/CrashGamePage.vue b/luckydiamond/src/pages/games-pages/CrashGamePage.vue
new file mode 100644
index 0000000..3c81a07
--- /dev/null
+++ b/luckydiamond/src/pages/games-pages/CrashGamePage.vue
@@ -0,0 +1,111 @@
+<template>
+    <LineChart
+      :chart-data="data"
+      :options="options"
+      css-classes="chart-container"
+    />
+  </template>
+  <script setup>
+  import { ref, computed, onMounted } from "vue";
+  import { LineChart } from "vue-chart-3";
+  import {
+    Chart,
+    LineController,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+  } from "chart.js";
+  
+  Chart.register(
+    LineController,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement
+  );
+  
+  const dataValues = ref([1,2,3]);
+  const labels = ref([""]);
+  
+  const data = computed(() => ({
+    labels: labels.value,
+    datasets: [
+      {
+        label: "Foo",
+        data: dataValues.value,
+        borderColor: "#cf7c7c",
+        backgroundColor: "#78ff00",
+        pointStyle: "circle",
+        pointRadius: 0,
+        pointHoverRadius: 2,
+        // You can also add borderColor and other properties if needed
+      },
+    ],
+  }));
+  
+  
+  onMounted(() => {
+    setInterval(() => {
+      const nextDataValue = dataValues.value[dataValues.value.length - 1] + 1;
+      dataValues.value.push(nextDataValue);
+  
+      // const nextLabel = labels.value[labels.value.length - 1] + 1;
+      
+      labels.value.push(""); // Update labels array
+    }, 1000);
+  });
+  
+  const options = ref({
+    plugins: {
+      title: {
+        text: "Line",
+      },
+      elements: {
+        point: {
+          radius: 0, // Удаляет точки на линии, чтобы они не увеличивались при наведении
+        },
+      },
+      tooltip: {
+        enabled: false, // Disable tooltip
+      },
+      interactions: {
+        mode: "nearest",
+        intersect: false,
+      },
+      hover: {
+        mode: null, // Отключает анимацию при наведении
+      },
+    },
+    animation: {
+      duration: 0, // Duration of the animation (in milliseconds)
+      easing: "easeOutQuart", // Easing function (optional)
+      // Custom animation function
+      onProgress: (animation) => {
+        const chart = animation.chart;
+        const ctx = chart.ctx;
+        // const chartArea = chart.chartArea;
+        // const dataset = chart.data.datasets[0];
+        const meta = chart.getDatasetMeta(0);
+        const points = meta.data;
+  
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(points[0].x, points[0].y);
+  
+        points.forEach((point, index) => {
+          if (index > 0) {
+            ctx.lineTo(point.x, point.y);
+          }
+        });
+  
+        ctx.lineWidth = 3; // Set the line width
+        // ctx.strokeStyle = dataset.borderColor || 'blue'; // Set the line color
+        ctx.stroke();
+        ctx.restore();
+      },
+    },
+    // Add your other chart options here
+  });
+  </script>
+  
\ No newline at end of file

From e1d9c63166c65f767206704deb3650705f6139f1 Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Wed, 31 Jan 2024 23:21:34 +0100
Subject: [PATCH 08/24] Update router

---
 luckydiamond/src/pages/HomePage.vue | 3 ++-
 luckydiamond/src/router/router.js   | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index d074778..baa1abd 100644
--- 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>
diff --git a/luckydiamond/src/router/router.js b/luckydiamond/src/router/router.js
index 5810af5..4bda7cd 100644
--- a/luckydiamond/src/router/router.js
+++ b/luckydiamond/src/router/router.js
@@ -3,6 +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 CrashGamePage from "@/pages/games-pages/CrashGamePage.vue";
 import SettingsPage from "@/pages/SettingsPage.vue"
 import AboutPage from "@/pages/AboutPage.vue"
 export default createRouter({
@@ -11,6 +12,7 @@ export default createRouter({
         { path: '/', component: HomePage, name: 'home' },
         { path: '/profile', component: ProfilePage, name: 'profile' },
         { path: '/game/saper', component: SapergamePage, name: 'saper' },
+        { path: '/game/crash', component: CrashGamePage, name: 'crash' },
         { path: '/settings', component: SettingsPage, name: 'settings' },
         { path: '/about', component: AboutPage, name: 'about' },
     ]

From 8ea93735275fa5c310f047fae6a763c7fcd815c6 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Thu, 1 Feb 2024 22:44:36 +0300
Subject: [PATCH 09/24] added graph-component for crash

---
 .../games-components/CrashGraphComponent.vue  | 150 ++++++++++++++++++
 .../src/pages/games-pages/CrashGamePage.vue   | 111 -------------
 .../src/pages/games-pages/CrashgamePage.vue   |  11 ++
 luckydiamond/src/router/router.js             |   2 +-
 4 files changed, 162 insertions(+), 112 deletions(-)
 create mode 100644 luckydiamond/src/components/games-components/CrashGraphComponent.vue
 delete mode 100644 luckydiamond/src/pages/games-pages/CrashGamePage.vue
 create mode 100644 luckydiamond/src/pages/games-pages/CrashgamePage.vue

diff --git a/luckydiamond/src/components/games-components/CrashGraphComponent.vue b/luckydiamond/src/components/games-components/CrashGraphComponent.vue
new file mode 100644
index 0000000..bd5de47
--- /dev/null
+++ b/luckydiamond/src/components/games-components/CrashGraphComponent.vue
@@ -0,0 +1,150 @@
+<template>
+  <LineChart
+      :chart-data="data"
+      :options="options"
+      css-classes="chart-container"
+  />
+</template>
+
+<script>
+import { LineChart } from "vue-chart-3";
+import {
+  Chart,
+  LineController,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+} from "chart.js";
+
+Chart.register(
+    LineController,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement
+);
+
+export default {
+  components: { LineChart },
+  data() {
+    return {
+      dataValues: [1, 2, 3],
+      labels: [""],
+      data: null,
+      options: {
+        plugins: {
+          title: {
+            text: "Line",
+          },
+          // elements: {
+          //   point: {
+          //     radius: 0,
+          //   },
+          // },
+          // tooltip: {
+          //   enabled: false,
+          // },
+          // interactions: {
+          //   mode: "nearest",
+          //   intersect: false,
+          // },
+          // hover: {
+          //   mode: null,
+          // },
+        },
+        animation: {
+          duration: 200,
+          easing: "linear",
+          delay: (context) => context.dataIndex * 2,
+          onProgress: (animation) => {
+            const chart = animation.chart;
+            const ctx = chart.ctx;
+            const meta = chart.getDatasetMeta(0);
+            const points = meta.data;
+            const totalSteps = meta.total;
+
+            ctx.save();
+            ctx.beginPath();
+
+            points.forEach((point, index) => {
+              const prevPoint = meta.data[index - 1];
+              const progress = animation.progress;
+
+              if (index === 0 || progress * totalSteps > index) {
+                const x = prevPoint ? prevPoint.x + (point.x - prevPoint.x) * progress : point.x;
+                const y = prevPoint ? prevPoint.y + (point.y - prevPoint.y) * progress : point.y;
+
+                ctx.lineTo(x, y);
+              }
+            });
+
+            ctx.lineWidth = 3;
+            ctx.stroke();
+            ctx.restore();
+          },
+        },
+      },
+    };
+  },
+
+  computed: {
+    chartData() {
+      return {
+        labels: this.labels,
+        datasets: [
+          {
+            label: "Foo",
+            data: this.dataValues,
+            borderColor: "#4E5EF2",
+            pointStyle: "circle",
+            pointRadius: 0,
+            pointHoverRadius: 2,
+          },
+        ],
+      };
+    },
+  },
+
+  methods: {
+    updateData() {
+      const interval = 255;
+      let counter = 0;
+
+      const updateInterval = setInterval(() => {
+        const nextDataValue = this.dataValues[this.dataValues.length - 1] + 1;
+        this.dataValues.push(nextDataValue);
+
+        this.labels.push("");
+        this.data = this.chartData;
+
+        if (counter >= 6000 / interval) {
+          clearInterval(updateInterval);
+        }
+        counter++;
+      }, interval);
+    },
+  },
+
+  mounted() {
+    this.data = this.chartData;
+    this.updateData();
+  },
+};
+</script>
+
+<style>
+
+.chart-container {
+  width: 600px;
+  top: 250px;
+  left: 30%;
+}
+
+.chart-container canvas {
+  width: 600px !important;
+  height: 400px !important;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/luckydiamond/src/pages/games-pages/CrashGamePage.vue b/luckydiamond/src/pages/games-pages/CrashGamePage.vue
deleted file mode 100644
index 3c81a07..0000000
--- a/luckydiamond/src/pages/games-pages/CrashGamePage.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-    <LineChart
-      :chart-data="data"
-      :options="options"
-      css-classes="chart-container"
-    />
-  </template>
-  <script setup>
-  import { ref, computed, onMounted } from "vue";
-  import { LineChart } from "vue-chart-3";
-  import {
-    Chart,
-    LineController,
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-  } from "chart.js";
-  
-  Chart.register(
-    LineController,
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement
-  );
-  
-  const dataValues = ref([1,2,3]);
-  const labels = ref([""]);
-  
-  const data = computed(() => ({
-    labels: labels.value,
-    datasets: [
-      {
-        label: "Foo",
-        data: dataValues.value,
-        borderColor: "#cf7c7c",
-        backgroundColor: "#78ff00",
-        pointStyle: "circle",
-        pointRadius: 0,
-        pointHoverRadius: 2,
-        // You can also add borderColor and other properties if needed
-      },
-    ],
-  }));
-  
-  
-  onMounted(() => {
-    setInterval(() => {
-      const nextDataValue = dataValues.value[dataValues.value.length - 1] + 1;
-      dataValues.value.push(nextDataValue);
-  
-      // const nextLabel = labels.value[labels.value.length - 1] + 1;
-      
-      labels.value.push(""); // Update labels array
-    }, 1000);
-  });
-  
-  const options = ref({
-    plugins: {
-      title: {
-        text: "Line",
-      },
-      elements: {
-        point: {
-          radius: 0, // Удаляет точки на линии, чтобы они не увеличивались при наведении
-        },
-      },
-      tooltip: {
-        enabled: false, // Disable tooltip
-      },
-      interactions: {
-        mode: "nearest",
-        intersect: false,
-      },
-      hover: {
-        mode: null, // Отключает анимацию при наведении
-      },
-    },
-    animation: {
-      duration: 0, // Duration of the animation (in milliseconds)
-      easing: "easeOutQuart", // Easing function (optional)
-      // Custom animation function
-      onProgress: (animation) => {
-        const chart = animation.chart;
-        const ctx = chart.ctx;
-        // const chartArea = chart.chartArea;
-        // const dataset = chart.data.datasets[0];
-        const meta = chart.getDatasetMeta(0);
-        const points = meta.data;
-  
-        ctx.save();
-        ctx.beginPath();
-        ctx.moveTo(points[0].x, points[0].y);
-  
-        points.forEach((point, index) => {
-          if (index > 0) {
-            ctx.lineTo(point.x, point.y);
-          }
-        });
-  
-        ctx.lineWidth = 3; // Set the line width
-        // ctx.strokeStyle = dataset.borderColor || 'blue'; // Set the line color
-        ctx.stroke();
-        ctx.restore();
-      },
-    },
-    // Add your other chart options here
-  });
-  </script>
-  
\ No newline at end of file
diff --git a/luckydiamond/src/pages/games-pages/CrashgamePage.vue b/luckydiamond/src/pages/games-pages/CrashgamePage.vue
new file mode 100644
index 0000000..3475078
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/luckydiamond/src/router/router.js b/luckydiamond/src/router/router.js
index 4bda7cd..25c678e 100644
--- 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 CrashGamePage from "@/pages/games-pages/CrashGamePage.vue";
+import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
 import SettingsPage from "@/pages/SettingsPage.vue"
 import AboutPage from "@/pages/AboutPage.vue"
 export default createRouter({

From b76403ec6aca8106a9e25baf41610617869cf2df Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Thu, 1 Feb 2024 22:45:15 +0300
Subject: [PATCH 10/24] remove comments in code

---
 .../games-components/CrashGraphComponent.vue      | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/luckydiamond/src/components/games-components/CrashGraphComponent.vue b/luckydiamond/src/components/games-components/CrashGraphComponent.vue
index bd5de47..71e5e48 100644
--- a/luckydiamond/src/components/games-components/CrashGraphComponent.vue
+++ b/luckydiamond/src/components/games-components/CrashGraphComponent.vue
@@ -37,21 +37,6 @@ export default {
           title: {
             text: "Line",
           },
-          // elements: {
-          //   point: {
-          //     radius: 0,
-          //   },
-          // },
-          // tooltip: {
-          //   enabled: false,
-          // },
-          // interactions: {
-          //   mode: "nearest",
-          //   intersect: false,
-          // },
-          // hover: {
-          //   mode: null,
-          // },
         },
         animation: {
           duration: 200,

From a4e2cb1e36c674875a22513729115a15e3be93c0 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Thu, 1 Feb 2024 23:11:24 +0300
Subject: [PATCH 11/24] added transition for graph-component for crash

---
 .../components/games-components/CrashGraphComponent.vue    | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/luckydiamond/src/components/games-components/CrashGraphComponent.vue b/luckydiamond/src/components/games-components/CrashGraphComponent.vue
index 71e5e48..697dbac 100644
--- a/luckydiamond/src/components/games-components/CrashGraphComponent.vue
+++ b/luckydiamond/src/components/games-components/CrashGraphComponent.vue
@@ -40,8 +40,8 @@ export default {
         },
         animation: {
           duration: 200,
-          easing: "linear",
-          delay: (context) => context.dataIndex * 2,
+          easing: "easeInOutQuad",
+          delay: 50,
           onProgress: (animation) => {
             const chart = animation.chart;
             const ctx = chart.ctx;
@@ -93,7 +93,7 @@ export default {
 
   methods: {
     updateData() {
-      const interval = 255;
+      const interval = 495;
       let counter = 0;
 
       const updateInterval = setInterval(() => {
@@ -129,6 +129,7 @@ export default {
 .chart-container canvas {
   width: 600px !important;
   height: 400px !important;
+  transition: .3s ease;
 }
 
 

From ec410fbe46de65eb02cbb838dd73a416068b16cf Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 3 Feb 2024 19:27:34 +0300
Subject: [PATCH 12/24] off registration

---
 luckydiamond/src/components/HeaderComponent.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/luckydiamond/src/components/HeaderComponent.vue b/luckydiamond/src/components/HeaderComponent.vue
index 61b4abc..e56b08c 100644
--- 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="#"
               @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>

From 1fec5731a1822503e51a6b6eb82430001fc580e4 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 3 Feb 2024 19:51:38 +0300
Subject: [PATCH 13/24] changed url to registration

---
 luckydiamond/src/components/HeaderComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/luckydiamond/src/components/HeaderComponent.vue b/luckydiamond/src/components/HeaderComponent.vue
index e56b08c..8faca8c 100644
--- 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="#"
+              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

From d59c8d9c4f61ae4eca42db9df0348cc4841d3d14 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 3 Feb 2024 23:02:05 +0300
Subject: [PATCH 14/24] refactor styles

---
 .../css/ComponentsStyles/DevelopComponent.css | 177 ------------------
 .../assets/css/ComponentsStyles/developer.css | 137 ++++++++++++++
 .../{SettingsPage.css => settings.css}        |   0
 ...opComponent.vue => DeveloperComponent.vue} |  33 ++--
 luckydiamond/src/pages/AboutPage.vue          |   2 +-
 luckydiamond/src/pages/SettingsPage.vue       |   2 +-
 6 files changed, 155 insertions(+), 196 deletions(-)
 delete mode 100644 luckydiamond/src/assets/css/ComponentsStyles/DevelopComponent.css
 create mode 100644 luckydiamond/src/assets/css/ComponentsStyles/developer.css
 rename luckydiamond/src/assets/css/PagesStyles/{SettingsPage.css => settings.css} (100%)
 rename luckydiamond/src/components/{DevelopComponent.vue => DeveloperComponent.vue} (62%)

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/DevelopComponent.css b/luckydiamond/src/assets/css/ComponentsStyles/DevelopComponent.css
deleted file mode 100644
index ae9597e..0000000
--- a/luckydiamond/src/assets/css/ComponentsStyles/DevelopComponent.css
+++ /dev/null
@@ -1,177 +0,0 @@
-.info {
-    flex-direction: column;
-    align-items: center;
-    display: flex;
-}
-/*beginning card 1*/
-.card {
-    width: 422px;
-    height: 269px;
-    flex-shrink: 0;
-    border-radius: 22px;
-    border: 3px solid #595959 ;
-    border-color: #595959;
-    background-color: #742271;
-    display: flex;
-    flex-direction: row;
-
-}
-
-.text {
-    width: 211px;
-    height: 269px;
-
- 
-}
-.aboutinfo {
-    margin-top: 30px;
-    margin-left: 15px;
-    
-    
-}
-.aboutinfo p {
-    font-family: 'Montserrat';
-    color: white;
-    font-size: 14px;
-    width: 97px;
-    height: 16px;
-}
-.aboutinfo h1 {
-    font-family: 'Montserrat';
-    color: white;
-    font-size: 32px;
-    
-}
-.whatjob {
-    display: flex;
-    width: 183px;
-    height: 16px;
-    
-    margin-left: 15px;
-    font-family: 'Montserrat';
-   
-    margin-top: 30px;
-}
-.whatjob img {
-    width: 15px;
-    height: 17px;
-}
-.icons {
-    width: 162px;
-    height: 36px; 
-    justify-content: space-around;
-    display: flex;
-    
-    margin-top: 95px;
-    margin-left: 27px;
-    margin-bottom: 11px;
-    
-}
-.icons img {
-    width: 36px;
-    height: 36px;
-    border-radius: 10px;
-    
-    
-}
-.skin {
-    margin-right: 13px;
-    margin-top: 51px;
-    margin-bottom: 3px;
-    
-    
-}
-.skin img {
-    width: 212px;
-    height: 212px;
-}
-/*the and card 1*/
-
-/*beginning card 2*/
-
-.card-2 {
-    width: 250px;
-    height: 443px;
-    background-color: #413C3B;
-    border: 3px solid #595959 ;
-    border-color: #595959;
-    border-radius: 22px;
-}
-.text_2 {
-    width: 244px;
-    height: 221.5px;
-    display: inline-block;
-    flex-flow: column-reverse;
-}
-
-.aboutinfo_2 {
-    margin-top: 30px;
-    margin-left: 19px;
-    
-}
-.aboutinfo_2 p {
-    font-family: 'Montserrat';
-    color: white;
-    font-size: 14px;
-    width: 79px;
-    height: 19px;
-}
-.aboutinfo_2 h1 {
-    font-family: 'Montserrat';
-    color: white;
-    font-size: 32px;
-    width: 177px;
-    height: 37px;
-    
-}
-.whatjob_2 {
-    display: flex;
-    width: 183px;
-    height: 16px;
-    margin-left: 24px;
-    font-family: 'Montserrat';
-    margin-top: 30px;
-}
-.whatjob_2 img {
-    width: 17px;
-    height: 20px;
-}
-.whatjob2_2 {
-    display: flex;
-    width: 183px;
-    height: 16px;
-    margin-left: 22px;
-    
-    font-family: 'Montserrat';
-    margin-top: 10px;
-}
-.whatjob2_2 img {
-    width: 21px;
-    height: 21px;
-}
-.skin_2 {
-    width: 244px;
-    height: 221.5px;
-    display: inline-block;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.skin_2_skin {
-    width: 212px;
-    height: 212px;
-    background-image: url(@/assets/icons-developcard/Hepatir.png);
-    justify-content: space-around;
-    display: flex;
-    align-items: flex-end;
-}
-.skinicons1 {
-   justify-content: space-around;
-    display: flex;
-}
-
-
-
-
-
-
diff --git a/luckydiamond/src/assets/css/ComponentsStyles/developer.css b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
new file mode 100644
index 0000000..57a6ef8
--- /dev/null
+++ b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
@@ -0,0 +1,137 @@
+.developer-card__content {
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+
+}
+
+/* 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;
+}
+
+.developer-card__technology {
+    display: flex;
+    margin: 30px 0 0 15px;
+    font-family: 'Montserrat';
+}
+
+.developer-card__technology img {
+    width: 15px;
+    height: 17px;
+    margin-right: 3px;
+}
+
+.developer-card__socials {
+    justify-content: space-around;
+    display: flex;
+    margin: 95px 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: 30px;
+}
+
+/*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: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.developer-card-height__skin-content {
+    width: 212px;
+    height: 212px;
+    background-image: url(@/assets/icons-developcard/Hepatir.png);
+    justify-content: space-around;
+    display: flex;
+    align-items: flex-end;
+    margin-top: 54px;
+}
+
+.developer-card-height__social-icons {
+   justify-content: space-around;
+    display: flex;
+}
+
+
+
+
+
+
diff --git a/luckydiamond/src/assets/css/PagesStyles/SettingsPage.css b/luckydiamond/src/assets/css/PagesStyles/settings.css
similarity index 100%
rename from luckydiamond/src/assets/css/PagesStyles/SettingsPage.css
rename to luckydiamond/src/assets/css/PagesStyles/settings.css
diff --git a/luckydiamond/src/components/DevelopComponent.vue b/luckydiamond/src/components/DeveloperComponent.vue
similarity index 62%
rename from luckydiamond/src/components/DevelopComponent.vue
rename to luckydiamond/src/components/DeveloperComponent.vue
index d018dc7..520f5cd 100644
--- a/luckydiamond/src/components/DevelopComponent.vue
+++ b/luckydiamond/src/components/DeveloperComponent.vue
@@ -1,45 +1,44 @@
 <template>
-  <div class="info">
-    <div class="card">
-      <div class="text">
-        <div class="aboutinfo">
+  <div class="developer-card__content">
+    <div class="developer-card__width">
+      <div class="developer-card__text">
+        <div class="developer-card__about-text">
           <p>фронтэндер</p>
           <h1>busha888</h1>
         </div>
-        <div class="whatjob">
+        <div class="developer-card__technology">
           <img src="@/assets/icons-developcard/html.png" alt="html">
           <p>HTML 5,CSS</p>
         </div>
-        <div class="icons">
+        <div class="developer-card__socials">
           <a href="https://tpverstak.ru/flex-cheatsheet/"><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
           <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
           <a href=""><img src="@/assets/icons-developcard/like.png" alt=""></a>
           <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
         </div>
       </div>
-      <div class="skin">
+      <div class="developer-card__skin">
         <img src="@/assets/icons-developcard/busha888.png" alt="">
         </div>
     </div>
-    <div class="card-2">
-      <div class="text_2">
-        <div class="aboutinfo_2">
+    <div class="developer-card__height">
+      <div class="developer-card-height__text">
+        <div class="developer-card-height__about-text">
           <p>Бэкендер</p>
           <h1>Hepatir</h1>
         </div>
-        <div class="whatjob_2">
+        <div class="developer-card-height__technology techonology-styles">
           <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
           <p>ASP, .NET, MongoDB</p>
         </div>
-        <div class="whatjob2_2">
+        <div class="developer-card-height__technology-two-column techonology-styles">
           <img src="@/assets/icons-developcard/pngegg.png" alt="html">
           <p>SQL</p>
         </div>
         </div>
-        <div class="skin_2">
-          <div class="skin_2_skin">
-            
-            <div class="skinicons1">
+        <div class="developer-card-height__skin">
+          <div class="developer-card-height__skin-content">
+            <div class="developer-card-height__social-icons">
             <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
             <a href=""><img src="@/assets/icons-developcard/discord.png" alt=""></a>
             <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
@@ -53,7 +52,7 @@
 </template>
 
 <script>
-import '@/assets/css/ComponentsStyles/DevelopComponent.css'
+import '@/assets/css/ComponentsStyles/developer.css'
 
 export default {
 
diff --git a/luckydiamond/src/pages/AboutPage.vue b/luckydiamond/src/pages/AboutPage.vue
index e36074e..3189763 100644
--- a/luckydiamond/src/pages/AboutPage.vue
+++ b/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";
 
diff --git a/luckydiamond/src/pages/SettingsPage.vue b/luckydiamond/src/pages/SettingsPage.vue
index 80d810f..58d95c2 100644
--- a/luckydiamond/src/pages/SettingsPage.vue
+++ b/luckydiamond/src/pages/SettingsPage.vue
@@ -16,7 +16,7 @@ import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
 
-import '@/assets/css/PagesStyles/SettingsPage.css'
+import '@/assets/css/PagesStyles/settings.css'
 export default {
   components: {
   ChatComponent,

From 37b8653490dd615403f516e0d8f30dae4a8b64d6 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 3 Feb 2024 23:05:44 +0300
Subject: [PATCH 15/24] refactor margins and name for developeroptions

---
 luckydiamond/src/mocks/DevelopersOptions.js | 83 ++++++++++++++++++++
 luckydiamond/src/mocks/object.js            | 84 ---------------------
 2 files changed, 83 insertions(+), 84 deletions(-)
 create mode 100644 luckydiamond/src/mocks/DevelopersOptions.js
 delete mode 100644 luckydiamond/src/mocks/object.js

diff --git a/luckydiamond/src/mocks/DevelopersOptions.js b/luckydiamond/src/mocks/DevelopersOptions.js
new file mode 100644
index 0000000..a88b07c
--- /dev/null
+++ b/luckydiamond/src/mocks/DevelopersOptions.js
@@ -0,0 +1,83 @@
+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"
+            }
+        },
+   }
+]
+    
diff --git a/luckydiamond/src/mocks/object.js b/luckydiamond/src/mocks/object.js
deleted file mode 100644
index e89d478..0000000
--- a/luckydiamond/src/mocks/object.js
+++ /dev/null
@@ -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"
-
-        }
-    },
-   }
-]
-    

From 31f1e5b86f2b6904048c4ea2960bf1b606a81bec Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 3 Feb 2024 23:12:54 +0300
Subject: [PATCH 16/24] changed naming for img and options in developer-options

---
 .../{Logo_C_sharp.png => csharp-logo.png}     | Bin
 .../{Figma.png => figma.png}                  | Bin
 .../{pngegg.png => sql-logo.png}              | Bin
 .../icons-developcard/{Vue.png => vue.png}    | Bin
 .../src/components/DeveloperComponent.vue     |   4 +-
 luckydiamond/src/mocks/DevelopersOptions.js   |  58 ++++++++++--------
 6 files changed, 36 insertions(+), 26 deletions(-)
 rename luckydiamond/src/assets/icons-developcard/{Logo_C_sharp.png => csharp-logo.png} (100%)
 rename luckydiamond/src/assets/icons-developcard/{Figma.png => figma.png} (100%)
 rename luckydiamond/src/assets/icons-developcard/{pngegg.png => sql-logo.png} (100%)
 rename luckydiamond/src/assets/icons-developcard/{Vue.png => vue.png} (100%)

diff --git a/luckydiamond/src/assets/icons-developcard/Logo_C_sharp.png b/luckydiamond/src/assets/icons-developcard/csharp-logo.png
similarity index 100%
rename from luckydiamond/src/assets/icons-developcard/Logo_C_sharp.png
rename to luckydiamond/src/assets/icons-developcard/csharp-logo.png
diff --git a/luckydiamond/src/assets/icons-developcard/Figma.png b/luckydiamond/src/assets/icons-developcard/figma.png
similarity index 100%
rename from luckydiamond/src/assets/icons-developcard/Figma.png
rename to luckydiamond/src/assets/icons-developcard/figma.png
diff --git a/luckydiamond/src/assets/icons-developcard/pngegg.png b/luckydiamond/src/assets/icons-developcard/sql-logo.png
similarity index 100%
rename from luckydiamond/src/assets/icons-developcard/pngegg.png
rename to luckydiamond/src/assets/icons-developcard/sql-logo.png
diff --git a/luckydiamond/src/assets/icons-developcard/Vue.png b/luckydiamond/src/assets/icons-developcard/vue.png
similarity index 100%
rename from luckydiamond/src/assets/icons-developcard/Vue.png
rename to luckydiamond/src/assets/icons-developcard/vue.png
diff --git a/luckydiamond/src/components/DeveloperComponent.vue b/luckydiamond/src/components/DeveloperComponent.vue
index 520f5cd..364317a 100644
--- a/luckydiamond/src/components/DeveloperComponent.vue
+++ b/luckydiamond/src/components/DeveloperComponent.vue
@@ -28,11 +28,11 @@
           <h1>Hepatir</h1>
         </div>
         <div class="developer-card-height__technology techonology-styles">
-          <img src="@/assets/icons-developcard/Logo_C_sharp.png" alt="html">
+          <img src="../assets/icons-developcard/csharp-logo.png" alt="html">
           <p>ASP, .NET, MongoDB</p>
         </div>
         <div class="developer-card-height__technology-two-column techonology-styles">
-          <img src="@/assets/icons-developcard/pngegg.png" alt="html">
+          <img src="../assets/icons-developcard/sql-logo.png" alt="html">
           <p>SQL</p>
         </div>
         </div>
diff --git a/luckydiamond/src/mocks/DevelopersOptions.js b/luckydiamond/src/mocks/DevelopersOptions.js
index a88b07c..84f835f 100644
--- a/luckydiamond/src/mocks/DevelopersOptions.js
+++ b/luckydiamond/src/mocks/DevelopersOptions.js
@@ -2,65 +2,74 @@ export default [
      {
         Rafael1209:{
             username:"Rafael1209",
+            userRole: 'Бэкендер',
             background:"#636363",
-            tehnologi_text:"ASP,.NET,MongoDB,Designer",
-            icons_tehnologi:{
+            technologyText:"ASP,.NET,MongoDB,Designer",
+            technologyIcons:{
+                csharp: "@/assets/icons-developcard/csharp-logo.png",
+                figma: "@/assets/icons-developcard/figma.png"
+            },
+            socialIcons: {
                 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"
+                telegram: "@/assets/icons-developcard/telegram.png"
             }
         },
         Hepatir:{
             username:"Hepatir",
+            userRole: 'Бэкендер',
             background:"#595959",
-            tehnologi_text:"ASP,.NET,MongoDB,SQL",
-            icons_tehnologi:{
+            technologyText:"ASP,.NET,MongoDB,SQL",
+            technologyIcons:{
                 github: "@/assets/icons-developcard/github.png",
                 discord: "@/assets/icons-developcard/discord.png",
-                C_sharp: "@/assets/icons-developcard/Logo_C_sharp.png",
+                csharp: "@/assets/icons-developcard/csharp-logo.png",
                 telegram: "@/assets/icons-developcard/telegram.png",
-                pngegg: "@/assets/icons-developcard/pngegg.png"
-            }
+                pngegg: "@/assets/icons-developcard/sql-logo.png"
+            },
+
         },
         Ckutls_:{
             username:"Ckutls_",
+            userRole: 'Фронтэндер',
             background:"#B88484",
-            tehnologi_text:"HTML 5, CSS,JavaScript,Vue 3",
-            icons_tehnologi:{
+            technologyText:"HTML 5, CSS,JavaScript,Vue 3",
+            technologyIcons:{
                 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"
+                vue: "@/assets/icons-developcard/vue.png"
             }
         },
         FUpir:{
             username:"FUpir",
+            userRole: 'Дизайнер',
             background:"#C58E74",
-            tehnologi_text:"Designer",
-            icons_tehnologi:{
+            technologyText:"Designer",
+            technologyIcons:{
                 discord: "@/assets/icons-developcard/discord.png",
                 telegram: "@/assets/icons-developcard/telegram.png",
-                Figma: "@/assets/icons-developcard/Figma.png"
+                figma: "@/assets/icons-developcard/figma.png"
             }
         },
         megatntmega:{
             username:"megatntmega",
+            userRole: 'Дизайнер',
             background:"#393A3A",
-            tehnologi_text:"Designer",
-            icons_tehnologi:{
+            technologyText:"Designer",
+            technologyIcons:{
                 discord: "@/assets/icons-developcard/discord.png",
                 telegram: "@/assets/icons-developcard/telegram.png",
-                Figma: "@/assets/icons-developcard/Figma.png"
+                Figma: "@/assets/icons-developcard/figma.png"
             }
         },
         busha888:{
             username:"busha888",
+            userRole: 'Фронтэндер',
             background:"#742271",
-            tehnologi_text:"HTML 5, CSS",
-            icons_tehnologi:{
+            technologyText:"HTML 5, CSS",
+            technologyIcons:{
                 github: "@/assets/icons-developcard/github.png",
                 telegram: "@/assets/icons-developcard/telegram.png",
                 odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
@@ -70,12 +79,13 @@ export default [
         },
         CLARFFY:{
             username:"CLARFFY",
+            userRole: 'Дизайнер',
             background:"#742271",
-            tehnologi_text:"Designer",
-            icons_tehnologi:{
+            technologyText:"Designer",
+            technologyIcons:{
                 discord: "@/assets/icons-developcard/discord.png",
                 telegram: "@/assets/icons-developcard/telegram.png",
-                Figma: "@/assets/icons-developcard/Figma.png"
+                Figma: "@/assets/icons-developcard/figma.png"
             }
         },
    }

From e865f09c0d9b41e3d508e8c1344106632b7f672b Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 3 Feb 2024 23:23:26 +0300
Subject: [PATCH 17/24] refactor options and styles for developeroptions

---
 luckydiamond/src/mocks/DevelopersOptions.js | 140 +++++++++++---------
 1 file changed, 76 insertions(+), 64 deletions(-)

diff --git a/luckydiamond/src/mocks/DevelopersOptions.js b/luckydiamond/src/mocks/DevelopersOptions.js
index 84f835f..59fd4ca 100644
--- a/luckydiamond/src/mocks/DevelopersOptions.js
+++ b/luckydiamond/src/mocks/DevelopersOptions.js
@@ -1,93 +1,105 @@
 export default [
      {
-        Rafael1209:{
-            username:"Rafael1209",
+        Rafael1209: {
+            username: "Rafael1209",
             userRole: 'Бэкендер',
-            background:"#636363",
-            technologyText:"ASP,.NET,MongoDB,Designer",
-            technologyIcons:{
+            background: "#636363",
+            technologyText: ['ASP,.NET,MongoDB', 'Designer'],
+            technologyIcons: {
                 csharp: "@/assets/icons-developcard/csharp-logo.png",
                 figma: "@/assets/icons-developcard/figma.png"
             },
             socialIcons: {
-                github: "@/assets/icons-developcard/github.png",
+                telegram: "@/assets/icons-developcard/telegram.png",
                 discord: "@/assets/icons-developcard/discord.png",
-                telegram: "@/assets/icons-developcard/telegram.png"
+                github: "@/assets/icons-developcard/github.png"
             }
         },
         Hepatir:{
-            username:"Hepatir",
+            username: "Hepatir",
             userRole: 'Бэкендер',
-            background:"#595959",
-            technologyText:"ASP,.NET,MongoDB,SQL",
-            technologyIcons:{
-                github: "@/assets/icons-developcard/github.png",
-                discord: "@/assets/icons-developcard/discord.png",
+            background: "#413C3B",
+            technologyText: ['ASP,.NET,MongoDB', 'SQL'],
+            technologyIcons: {
                 csharp: "@/assets/icons-developcard/csharp-logo.png",
-                telegram: "@/assets/icons-developcard/telegram.png",
-                pngegg: "@/assets/icons-developcard/sql-logo.png"
+                sql: "@/assets/icons-developcard/sql-logo.png"
             },
-
-        },
-        Ckutls_:{
-            username:"Ckutls_",
-            userRole: 'Фронтэндер',
-            background:"#B88484",
-            technologyText:"HTML 5, CSS,JavaScript,Vue 3",
-            technologyIcons:{
-                github: "@/assets/icons-developcard/github.png",
-                discord: "@/assets/icons-developcard/discord.png",
+            socialIcons: {
                 telegram: "@/assets/icons-developcard/telegram.png",
+                discord: "@/assets/icons-developcard/discord.png",
+                github: "@/assets/icons-developcard/github.png",
+            }
+        },
+        Ckutls_: {
+            username: "Ckutls_",
+            userRole: 'Фронтэндер',
+            background: "#B88484",
+            technologyText: ['html 5, css', 'JavaScript', 'Vue 3'],
+            technologyIcons: {
+                html: '@/assets/icons-developcard/html.png',
                 js: "@/assets/icons-developcard/js.png",
                 vue: "@/assets/icons-developcard/vue.png"
-            }
-        },
-        FUpir:{
-            username:"FUpir",
-            userRole: 'Дизайнер',
-            background:"#C58E74",
-            technologyText:"Designer",
-            technologyIcons:{
-                discord: "@/assets/icons-developcard/discord.png",
+            },
+            socialIcons: {
                 telegram: "@/assets/icons-developcard/telegram.png",
-                figma: "@/assets/icons-developcard/figma.png"
-            }
-        },
-        megatntmega:{
-            username:"megatntmega",
-            userRole: 'Дизайнер',
-            background:"#393A3A",
-            technologyText:"Designer",
-            technologyIcons:{
                 discord: "@/assets/icons-developcard/discord.png",
-                telegram: "@/assets/icons-developcard/telegram.png",
-                Figma: "@/assets/icons-developcard/figma.png"
-            }
-        },
-        busha888:{
-            username:"busha888",
-            userRole: 'Фронтэндер',
-            background:"#742271",
-            technologyText:"HTML 5, CSS",
-            technologyIcons:{
                 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",
+        FUpir: {
+            username: "FUpir",
             userRole: 'Дизайнер',
-            background:"#742271",
-            technologyText:"Designer",
-            technologyIcons:{
-                discord: "@/assets/icons-developcard/discord.png",
+            background: "#C58E74",
+            technologyText: ['Designer'],
+            technologyIcons: {
+                figma: "@/assets/icons-developcard/figma.png"
+            },
+            socialIcons: {
                 telegram: "@/assets/icons-developcard/telegram.png",
-                Figma: "@/assets/icons-developcard/figma.png"
+                discord: "@/assets/icons-developcard/discord.png"
             }
         },
+        megatntmega: {
+            username: "megatntmega",
+            userRole: 'Дизайнер',
+            background: "#393A3A",
+            technologyText: ['Designer'],
+            technologyIcons: {
+                figma: "@/assets/icons-developcard/figma.png"
+            },
+            socialIcons: {
+                telegram: "@/assets/icons-developcard/telegram.png",
+                discord: "@/assets/icons-developcard/discord.png"
+            }
+        },
+        busha888: {
+            username: "busha888",
+            userRole: 'Фронтэндер',
+            background: "#742271",
+            technologyText: ['html 5, css'],
+            technologyIcons: {
+                html: "@/assets/icons-developcard/html.png"
+            },
+            socialIcons: {
+                odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
+                telegram: "@/assets/icons-developcard/telegram.png",
+                like: "@/assets/icons-developcard/like.png",
+                github: "@/assets/icons-developcard/github.png",
+            }
+        },
+        CLARFFY: {
+            username: "CLARFFY",
+            userRole: 'Дизайнер',
+            background: "#E2B374",
+            technologyText: ['Designer'],
+            technologyIcons: {
+                figma: "@/assets/icons-developcard/figma.png"
+            },
+            socialIcons: {
+                telegram: "@/assets/icons-developcard/telegram.png",
+                discord: "@/assets/icons-developcard/discord.png"
+            }
+        }
    }
 ]
     

From 749549c46decc9d9b0b9f3399160ec33b0638d2c Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sat, 3 Feb 2024 23:25:27 +0300
Subject: [PATCH 18/24] changed styles of quotation marks

---
 luckydiamond/src/mocks/DevelopersOptions.js | 30 ++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/luckydiamond/src/mocks/DevelopersOptions.js b/luckydiamond/src/mocks/DevelopersOptions.js
index 59fd4ca..5512d8d 100644
--- a/luckydiamond/src/mocks/DevelopersOptions.js
+++ b/luckydiamond/src/mocks/DevelopersOptions.js
@@ -2,9 +2,9 @@ export default [
      {
         Rafael1209: {
             username: "Rafael1209",
-            userRole: 'Бэкендер',
+            userRole: "Бэкендер",
             background: "#636363",
-            technologyText: ['ASP,.NET,MongoDB', 'Designer'],
+            technologyText: ["ASP,.NET,MongoDB", "Designer"],
             technologyIcons: {
                 csharp: "@/assets/icons-developcard/csharp-logo.png",
                 figma: "@/assets/icons-developcard/figma.png"
@@ -17,9 +17,9 @@ export default [
         },
         Hepatir:{
             username: "Hepatir",
-            userRole: 'Бэкендер',
+            userRole: "Бэкендер",
             background: "#413C3B",
-            technologyText: ['ASP,.NET,MongoDB', 'SQL'],
+            technologyText: ["ASP,.NET,MongoDB", "SQL"],
             technologyIcons: {
                 csharp: "@/assets/icons-developcard/csharp-logo.png",
                 sql: "@/assets/icons-developcard/sql-logo.png"
@@ -32,11 +32,11 @@ export default [
         },
         Ckutls_: {
             username: "Ckutls_",
-            userRole: 'Фронтэндер',
+            userRole: "Фронтэндер",
             background: "#B88484",
-            technologyText: ['html 5, css', 'JavaScript', 'Vue 3'],
+            technologyText: ["html 5, css", "JavaScript", "Vue 3"],
             technologyIcons: {
-                html: '@/assets/icons-developcard/html.png',
+                html: "@/assets/icons-developcard/html.png",
                 js: "@/assets/icons-developcard/js.png",
                 vue: "@/assets/icons-developcard/vue.png"
             },
@@ -48,9 +48,9 @@ export default [
         },
         FUpir: {
             username: "FUpir",
-            userRole: 'Дизайнер',
+            userRole: "Дизайнер",
             background: "#C58E74",
-            technologyText: ['Designer'],
+            technologyText: ["Designer"],
             technologyIcons: {
                 figma: "@/assets/icons-developcard/figma.png"
             },
@@ -61,9 +61,9 @@ export default [
         },
         megatntmega: {
             username: "megatntmega",
-            userRole: 'Дизайнер',
+            userRole: "Дизайнер",
             background: "#393A3A",
-            technologyText: ['Designer'],
+            technologyText: ["Designer"],
             technologyIcons: {
                 figma: "@/assets/icons-developcard/figma.png"
             },
@@ -74,9 +74,9 @@ export default [
         },
         busha888: {
             username: "busha888",
-            userRole: 'Фронтэндер',
+            userRole: "Фронтэндер",
             background: "#742271",
-            technologyText: ['html 5, css'],
+            technologyText: ["html 5, css"],
             technologyIcons: {
                 html: "@/assets/icons-developcard/html.png"
             },
@@ -89,9 +89,9 @@ export default [
         },
         CLARFFY: {
             username: "CLARFFY",
-            userRole: 'Дизайнер',
+            userRole: "Дизайнер",
             background: "#E2B374",
-            technologyText: ['Designer'],
+            technologyText: ["Designer"],
             technologyIcons: {
                 figma: "@/assets/icons-developcard/figma.png"
             },

From 630f9749bd0f914861d86aed6c8800dc763f0278 Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Sat, 3 Feb 2024 22:47:38 +0100
Subject: [PATCH 19/24] Add if check for soket

---
 luckydiamond/src/assets/js/chat/ChatLogic.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/luckydiamond/src/assets/js/chat/ChatLogic.js b/luckydiamond/src/assets/js/chat/ChatLogic.js
index 7e6cf50..650b048 100644
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -16,7 +16,11 @@ export function ConnectToChat() {
 
         webSocket.onmessage = function (event) {
 
-            eventBus.emit('dataChat', event.data)
+            const dataObject = JSON.parse(event.data);
+
+            if (dataObject && dataObject.hasOwnProperty('SpUserName') && dataObject.hasOwnProperty('Message')) {
+                eventBus.emit('dataChat', dataObject);
+            }
 
             console.log('Message from Server:', event.data);
         };

From 54168501611ea2d6e11c878f8f7e10871d47e2e2 Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Sat, 3 Feb 2024 22:50:10 +0100
Subject: [PATCH 20/24] fix error

---
 luckydiamond/src/assets/js/chat/ChatLogic.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/luckydiamond/src/assets/js/chat/ChatLogic.js b/luckydiamond/src/assets/js/chat/ChatLogic.js
index 650b048..82402c6 100644
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -18,7 +18,7 @@ export function ConnectToChat() {
 
             const dataObject = JSON.parse(event.data);
 
-            if (dataObject && dataObject.hasOwnProperty('SpUserName') && dataObject.hasOwnProperty('Message')) {
+            if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
                 eventBus.emit('dataChat', dataObject);
             }
 

From 64a9ae8da2af1bb89a41bcc26469847f32957a86 Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Sat, 3 Feb 2024 22:58:33 +0100
Subject: [PATCH 21/24] update

---
 luckydiamond/src/assets/js/chat/ChatLogic.js  | 2 +-
 luckydiamond/src/components/ChatComponent.vue | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/luckydiamond/src/assets/js/chat/ChatLogic.js b/luckydiamond/src/assets/js/chat/ChatLogic.js
index 82402c6..8e35440 100644
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -19,7 +19,7 @@ export function ConnectToChat() {
             const dataObject = JSON.parse(event.data);
 
             if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
-                eventBus.emit('dataChat', dataObject);
+                eventBus.emit('dataChat', event.data);
             }
 
             console.log('Message from Server:', event.data);
diff --git a/luckydiamond/src/components/ChatComponent.vue b/luckydiamond/src/components/ChatComponent.vue
index d60f212..3103651 100644
--- a/luckydiamond/src/components/ChatComponent.vue
+++ b/luckydiamond/src/components/ChatComponent.vue
@@ -71,6 +71,7 @@ export default {
     eventBus.on("dataChat", (dataFromServer) => {
       try {
         const dataObject = JSON.parse(dataFromServer);
+        
         let imageUrl =
           "https://avatar.spworlds.ru/face/55/" + dataObject.SpUserName;
 

From e9200927b9359305d9cb62a0d464d33653576b8d Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 4 Feb 2024 01:01:59 +0300
Subject: [PATCH 22/24] added template for v-for

---
 .../assets/css/ComponentsStyles/developer.css |  16 +-
 .../src/components/DeveloperComponent.vue     | 107 ++++++-----
 luckydiamond/src/mocks/DevelopersOptions.js   | 178 ++++++++----------
 3 files changed, 150 insertions(+), 151 deletions(-)

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/developer.css b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
index 57a6ef8..91cd97e 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/developer.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
@@ -13,7 +13,7 @@
     height: 269px;
     border-radius: 22px;
     border: 3px solid #595959 ;
-    background-color: #742271;
+    /*background-color: #742271;*/
 }
 
 .developer-card__about-text {
@@ -30,17 +30,18 @@
     font-family: 'Montserrat';
     color: #fff;
     font-size: 32px;
+    margin-bottom: 20px;
 }
 
 .developer-card__technology {
     display: flex;
-    margin: 30px 0 0 15px;
+    margin: 5px 0 0 15px;
     font-family: 'Montserrat';
 }
 
 .developer-card__technology img {
-    width: 15px;
-    height: 17px;
+    width: 21px;
+    height: 21px;
     margin-right: 3px;
 }
 
@@ -60,7 +61,12 @@
 .developer-card__skin {
     display: flex;
     align-items: flex-end;
-    margin-left: 30px;
+    margin-left: 15px;
+}
+
+.developer-card__skin img {
+    width: 212px;
+    height: 212px;
 }
 
 /*the and card 1*/
diff --git a/luckydiamond/src/components/DeveloperComponent.vue b/luckydiamond/src/components/DeveloperComponent.vue
index 364317a..2033c18 100644
--- a/luckydiamond/src/components/DeveloperComponent.vue
+++ b/luckydiamond/src/components/DeveloperComponent.vue
@@ -1,60 +1,75 @@
 <template>
-  <div class="developer-card__content">
-    <div class="developer-card__width">
-      <div class="developer-card__text">
-        <div class="developer-card__about-text">
-          <p>фронтэндер</p>
-          <h1>busha888</h1>
+  <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 class="developer-card__technology">
-          <img src="@/assets/icons-developcard/html.png" alt="html">
-          <p>HTML 5,CSS</p>
-        </div>
-        <div class="developer-card__socials">
-          <a href="https://tpverstak.ru/flex-cheatsheet/"><img src="@/assets/icons-developcard/odniclasniki.png" alt=""></a>
-          <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
-          <a href=""><img src="@/assets/icons-developcard/like.png" alt=""></a>
-          <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
-        </div>
-      </div>
-      <div class="developer-card__skin">
-        <img src="@/assets/icons-developcard/busha888.png" alt="">
-        </div>
-    </div>
-    <div class="developer-card__height">
-      <div class="developer-card-height__text">
-        <div class="developer-card-height__about-text">
-          <p>Бэкендер</p>
-          <h1>Hepatir</h1>
-        </div>
-        <div class="developer-card-height__technology techonology-styles">
-          <img src="../assets/icons-developcard/csharp-logo.png" alt="html">
-          <p>ASP, .NET, MongoDB</p>
-        </div>
-        <div class="developer-card-height__technology-two-column techonology-styles">
-          <img src="../assets/icons-developcard/sql-logo.png" alt="html">
-          <p>SQL</p>
-        </div>
-        </div>
-        <div class="developer-card-height__skin">
-          <div class="developer-card-height__skin-content">
-            <div class="developer-card-height__social-icons">
-            <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
-            <a href=""><img src="@/assets/icons-developcard/discord.png" alt=""></a>
-            <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
+        <div class="developer-card__height">
+          <div class="developer-card-height__text">
+            <div class="developer-card-height__about-text">
+              <p>Бэкендер</p>
+              <h1>Hepatir</h1>
+            </div>
+            <div class="developer-card-height__technology techonology-styles">
+              <img src="../assets/icons-developcard/csharp-logo.png" alt="html">
+              <p>ASP, .NET, MongoDB</p>
+            </div>
+            <div class="developer-card-height__technology-two-column techonology-styles">
+              <img src="../assets/icons-developcard/sql-logo.png" alt="html">
+              <p>SQL</p>
+            </div>
+          </div>
+          <div class="developer-card-height__skin">
+            <div class="developer-card-height__skin-content">
+              <div class="developer-card-height__social-icons">
+                <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
+                <a href=""><img src="@/assets/icons-developcard/discord.png" alt=""></a>
+                <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
+              </div>
             </div>
           </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>
\ No newline at end of file
diff --git a/luckydiamond/src/mocks/DevelopersOptions.js b/luckydiamond/src/mocks/DevelopersOptions.js
index 5512d8d..0b9de55 100644
--- a/luckydiamond/src/mocks/DevelopersOptions.js
+++ b/luckydiamond/src/mocks/DevelopersOptions.js
@@ -1,105 +1,83 @@
 export default [
-     {
-        Rafael1209: {
-            username: "Rafael1209",
-            userRole: "Бэкендер",
-            background: "#636363",
-            technologyText: ["ASP,.NET,MongoDB", "Designer"],
-            technologyIcons: {
-                csharp: "@/assets/icons-developcard/csharp-logo.png",
-                figma: "@/assets/icons-developcard/figma.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png",
-                github: "@/assets/icons-developcard/github.png"
-            }
+    {
+        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: "@/assets/icons-developcard/figma.png"
         },
-        Hepatir:{
-            username: "Hepatir",
-            userRole: "Бэкендер",
-            background: "#413C3B",
-            technologyText: ["ASP,.NET,MongoDB", "SQL"],
-            technologyIcons: {
-                csharp: "@/assets/icons-developcard/csharp-logo.png",
-                sql: "@/assets/icons-developcard/sql-logo.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png",
-                github: "@/assets/icons-developcard/github.png",
-            }
-        },
-        Ckutls_: {
-            username: "Ckutls_",
-            userRole: "Фронтэндер",
-            background: "#B88484",
-            technologyText: ["html 5, css", "JavaScript", "Vue 3"],
-            technologyIcons: {
-                html: "@/assets/icons-developcard/html.png",
-                js: "@/assets/icons-developcard/js.png",
-                vue: "@/assets/icons-developcard/vue.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png",
-                github: "@/assets/icons-developcard/github.png",
-            }
-        },
-        FUpir: {
-            username: "FUpir",
-            userRole: "Дизайнер",
-            background: "#C58E74",
-            technologyText: ["Designer"],
-            technologyIcons: {
-                figma: "@/assets/icons-developcard/figma.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png"
-            }
-        },
-        megatntmega: {
-            username: "megatntmega",
-            userRole: "Дизайнер",
-            background: "#393A3A",
-            technologyText: ["Designer"],
-            technologyIcons: {
-                figma: "@/assets/icons-developcard/figma.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png"
-            }
-        },
-        busha888: {
-            username: "busha888",
-            userRole: "Фронтэндер",
-            background: "#742271",
-            technologyText: ["html 5, css"],
-            technologyIcons: {
-                html: "@/assets/icons-developcard/html.png"
-            },
-            socialIcons: {
-                odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
-                telegram: "@/assets/icons-developcard/telegram.png",
-                like: "@/assets/icons-developcard/like.png",
-                github: "@/assets/icons-developcard/github.png",
-            }
-        },
-        CLARFFY: {
-            username: "CLARFFY",
-            userRole: "Дизайнер",
-            background: "#E2B374",
-            technologyText: ["Designer"],
-            technologyIcons: {
-                figma: "@/assets/icons-developcard/figma.png"
-            },
-            socialIcons: {
-                telegram: "@/assets/icons-developcard/telegram.png",
-                discord: "@/assets/icons-developcard/discord.png"
-            }
+        socialIcons: {
+            telegram: "@/assets/icons-developcard/telegram.png",
+            discord: "@/assets/icons-developcard/discord.png"
         }
-   }
+    },
+    {
+        id: 6,
+        username: "busha888",
+        userRole: "Фронтэндер",
+        background: "#742271",
+        technologyText: ["html 5, css"],
+        technologyIcons: {
+            html: "@/assets/icons-developcard/html.png"
+        },
+        socialIcons: {
+            odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
+            telegram: "@/assets/icons-developcard/telegram.png",
+            like: "@/assets/icons-developcard/like.png",
+            github: "@/assets/icons-developcard/github.png",
+        }
+    },
+    {
+        id: 7,
+        username: "CLARFFY",
+        userRole: "Дизайнер",
+        background: "#E2B374",
+        technologyText: ["Designer"],
+        technologyIcons: {
+            figma: "@/assets/icons-developcard/figma.png"
+        },
+        socialIcons: {
+            telegram: "@/assets/icons-developcard/telegram.png",
+            discord: "@/assets/icons-developcard/discord.png"
+        }
+    }
 ]
     

From 7ede91e437e9ed0dd7a86f2cf9741d5b9b2bb0c8 Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 4 Feb 2024 02:01:15 +0300
Subject: [PATCH 23/24] added v-for for all template in develop-component

---
 .../assets/css/ComponentsStyles/developer.css |   2 +-
 luckydiamond/src/assets/js/chat/ChatLogic.js  | 132 +++++++++---------
 .../src/components/DeveloperComponent.vue     |  36 +++--
 luckydiamond/src/mocks/DevelopersOptions.js   |  29 +---
 4 files changed, 89 insertions(+), 110 deletions(-)

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/developer.css b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
index 91cd97e..62605d2 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/developer.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
@@ -48,7 +48,7 @@
 .developer-card__socials {
     justify-content: space-around;
     display: flex;
-    margin: 95px 0 11px 27px;
+    margin: 35% 0 11px 27px;
     
 }
 
diff --git a/luckydiamond/src/assets/js/chat/ChatLogic.js b/luckydiamond/src/assets/js/chat/ChatLogic.js
index 8e35440..1280ec6 100644
--- a/luckydiamond/src/assets/js/chat/ChatLogic.js
+++ b/luckydiamond/src/assets/js/chat/ChatLogic.js
@@ -1,66 +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) {
-
-            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);
-    }
-}
\ No newline at end of file
+// 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);
+//     }
+// }
\ No newline at end of file
diff --git a/luckydiamond/src/components/DeveloperComponent.vue b/luckydiamond/src/components/DeveloperComponent.vue
index 2033c18..06b5e6e 100644
--- a/luckydiamond/src/components/DeveloperComponent.vue
+++ b/luckydiamond/src/components/DeveloperComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <ul>
-    <li v-for="developer in (DevelopersOptions)" :key="developer.id">
-      <div class="developer-card__content" v-if="developer.id <= 4">
+    <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">
@@ -22,35 +22,31 @@
             <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
           </div>
         </div>
-        <div class="developer-card__height">
+      </div>
+      <div class="developer-card__content" 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>Бэкендер</p>
-              <h1>Hepatir</h1>
+              <p>{{ developer.userRole }}</p>
+              <h1>{{ developer.username }}</h1>
             </div>
-            <div class="developer-card-height__technology techonology-styles">
-              <img src="../assets/icons-developcard/csharp-logo.png" alt="html">
-              <p>ASP, .NET, MongoDB</p>
+            <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-height__technology-two-column techonology-styles">
-              <img src="../assets/icons-developcard/sql-logo.png" alt="html">
-              <p>SQL</p>
+            <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-height__skin">
-            <div class="developer-card-height__skin-content">
-              <div class="developer-card-height__social-icons">
-                <a href=""><img src="@/assets/icons-developcard/telegram.png" alt=""></a>
-                <a href=""><img src="@/assets/icons-developcard/discord.png" alt=""></a>
-                <a href=""><img src="@/assets/icons-developcard/github.png" alt=""></a>
-              </div>
-            </div>
+            <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
           </div>
         </div>
       </div>
     </li>
   </ul>
-
 </template>
 
 <script>
@@ -72,4 +68,4 @@ export default {
     console.log(DevelopersOptions)
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/luckydiamond/src/mocks/DevelopersOptions.js b/luckydiamond/src/mocks/DevelopersOptions.js
index 0b9de55..a5851b0 100644
--- a/luckydiamond/src/mocks/DevelopersOptions.js
+++ b/luckydiamond/src/mocks/DevelopersOptions.js
@@ -41,13 +41,8 @@ export default [
         userRole: "Дизайнер",
         background: "#393A3A",
         technologyText: ["Designer"],
-        technologyIcons: {
-            figma: "@/assets/icons-developcard/figma.png"
-        },
-        socialIcons: {
-            telegram: "@/assets/icons-developcard/telegram.png",
-            discord: "@/assets/icons-developcard/discord.png"
-        }
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"]
     },
     {
         id: 6,
@@ -55,15 +50,8 @@ export default [
         userRole: "Фронтэндер",
         background: "#742271",
         technologyText: ["html 5, css"],
-        technologyIcons: {
-            html: "@/assets/icons-developcard/html.png"
-        },
-        socialIcons: {
-            odniclasniki: "@/assets/icons-developcard/odniclasniki.png",
-            telegram: "@/assets/icons-developcard/telegram.png",
-            like: "@/assets/icons-developcard/like.png",
-            github: "@/assets/icons-developcard/github.png",
-        }
+        technologyIcons: ["html"],
+        socialIcons: ["odniclasniki", "telegram", "like", "github"],
     },
     {
         id: 7,
@@ -71,13 +59,8 @@ export default [
         userRole: "Дизайнер",
         background: "#E2B374",
         technologyText: ["Designer"],
-        technologyIcons: {
-            figma: "@/assets/icons-developcard/figma.png"
-        },
-        socialIcons: {
-            telegram: "@/assets/icons-developcard/telegram.png",
-            discord: "@/assets/icons-developcard/discord.png"
-        }
+        technologyIcons: ["figma"],
+        socialIcons: ["telegram", "discord"]
     }
 ]
     

From 422dcfc4253d7af161cddd3a6ca58fdc41915216 Mon Sep 17 00:00:00 2001
From: Madara0330E <summoners2011sss@gmail.com>
Date: Sun, 4 Feb 2024 18:59:42 +0300
Subject: [PATCH 24/24] thesh_hzlol

---
 .../assets/css/ComponentsStyles/developer.css |  20 ++-
 .../src/components/DeveloperComponent.vue     |   7 +-
 .../games-components/CrashGraphComponent.vue  | 136 ------------------
 luckydiamond/src/pages/HomePage.vue           |   3 +-
 luckydiamond/src/router/router.js             |   4 +-
 5 files changed, 20 insertions(+), 150 deletions(-)
 delete mode 100644 luckydiamond/src/components/games-components/CrashGraphComponent.vue

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/developer.css b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
index 62605d2..d98d871 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/developer.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/developer.css
@@ -1,7 +1,16 @@
+.developer-card__content_down {
+    width: 1204px;
+    height: 443px;
+    background-color: aquamarine;
+    margin-left: 287px;
+    margin-right: 298px;
+    margin-bottom: 77px;
+}
 .developer-card__content {
-    flex-direction: column;
-    align-items: center;
+   
     display: flex;
+    
+    background-color: black;
 
 }
 
@@ -116,15 +125,15 @@
 
 .developer-card-height__skin {
     margin-top: 6px;
-    display: flex;
+    display: inline-block;
     align-items: center;
     justify-content: center;
 }
 
-.developer-card-height__skin-content {
+.developer-card-height__skin {
     width: 212px;
     height: 212px;
-    background-image: url(@/assets/icons-developcard/Hepatir.png);
+   
     justify-content: space-around;
     display: flex;
     align-items: flex-end;
@@ -141,3 +150,4 @@
 
 
 
+
diff --git a/luckydiamond/src/components/DeveloperComponent.vue b/luckydiamond/src/components/DeveloperComponent.vue
index 06b5e6e..6960e28 100644
--- a/luckydiamond/src/components/DeveloperComponent.vue
+++ b/luckydiamond/src/components/DeveloperComponent.vue
@@ -23,7 +23,7 @@
           </div>
         </div>
       </div>
-      <div class="developer-card__content" v-else>
+      <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">
@@ -34,15 +34,14 @@
               <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 class="developer-card-height__skin">
-            <img :src="`https://avatar.spworlds.ru/front/256/${developer.username}`" :alt="developer.username">
-          </div>
         </div>
       </div>
     </li>
diff --git a/luckydiamond/src/components/games-components/CrashGraphComponent.vue b/luckydiamond/src/components/games-components/CrashGraphComponent.vue
deleted file mode 100644
index 697dbac..0000000
--- a/luckydiamond/src/components/games-components/CrashGraphComponent.vue
+++ /dev/null
@@ -1,136 +0,0 @@
-<template>
-  <LineChart
-      :chart-data="data"
-      :options="options"
-      css-classes="chart-container"
-  />
-</template>
-
-<script>
-import { LineChart } from "vue-chart-3";
-import {
-  Chart,
-  LineController,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-} from "chart.js";
-
-Chart.register(
-    LineController,
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement
-);
-
-export default {
-  components: { LineChart },
-  data() {
-    return {
-      dataValues: [1, 2, 3],
-      labels: [""],
-      data: null,
-      options: {
-        plugins: {
-          title: {
-            text: "Line",
-          },
-        },
-        animation: {
-          duration: 200,
-          easing: "easeInOutQuad",
-          delay: 50,
-          onProgress: (animation) => {
-            const chart = animation.chart;
-            const ctx = chart.ctx;
-            const meta = chart.getDatasetMeta(0);
-            const points = meta.data;
-            const totalSteps = meta.total;
-
-            ctx.save();
-            ctx.beginPath();
-
-            points.forEach((point, index) => {
-              const prevPoint = meta.data[index - 1];
-              const progress = animation.progress;
-
-              if (index === 0 || progress * totalSteps > index) {
-                const x = prevPoint ? prevPoint.x + (point.x - prevPoint.x) * progress : point.x;
-                const y = prevPoint ? prevPoint.y + (point.y - prevPoint.y) * progress : point.y;
-
-                ctx.lineTo(x, y);
-              }
-            });
-
-            ctx.lineWidth = 3;
-            ctx.stroke();
-            ctx.restore();
-          },
-        },
-      },
-    };
-  },
-
-  computed: {
-    chartData() {
-      return {
-        labels: this.labels,
-        datasets: [
-          {
-            label: "Foo",
-            data: this.dataValues,
-            borderColor: "#4E5EF2",
-            pointStyle: "circle",
-            pointRadius: 0,
-            pointHoverRadius: 2,
-          },
-        ],
-      };
-    },
-  },
-
-  methods: {
-    updateData() {
-      const interval = 495;
-      let counter = 0;
-
-      const updateInterval = setInterval(() => {
-        const nextDataValue = this.dataValues[this.dataValues.length - 1] + 1;
-        this.dataValues.push(nextDataValue);
-
-        this.labels.push("");
-        this.data = this.chartData;
-
-        if (counter >= 6000 / interval) {
-          clearInterval(updateInterval);
-        }
-        counter++;
-      }, interval);
-    },
-  },
-
-  mounted() {
-    this.data = this.chartData;
-    this.updateData();
-  },
-};
-</script>
-
-<style>
-
-.chart-container {
-  width: 600px;
-  top: 250px;
-  left: 30%;
-}
-
-.chart-container canvas {
-  width: 600px !important;
-  height: 400px !important;
-  transition: .3s ease;
-}
-
-
-</style>
\ No newline at end of file
diff --git a/luckydiamond/src/pages/HomePage.vue b/luckydiamond/src/pages/HomePage.vue
index baa1abd..f5f2bf6 100644
--- a/luckydiamond/src/pages/HomePage.vue
+++ b/luckydiamond/src/pages/HomePage.vue
@@ -103,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,
diff --git a/luckydiamond/src/router/router.js b/luckydiamond/src/router/router.js
index 25c678e..c2d5d4f 100644
--- a/luckydiamond/src/router/router.js
+++ b/luckydiamond/src/router/router.js
@@ -3,8 +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 CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
-import SettingsPage from "@/pages/SettingsPage.vue"
+import SettingsPage from "@/pages/SettingsPage.vue";
 import AboutPage from "@/pages/AboutPage.vue"
 export default createRouter({
     history: createWebHistory(),
@@ -12,7 +11,6 @@ export default createRouter({
         { path: '/', component: HomePage, name: 'home' },
         { path: '/profile', component: ProfilePage, name: 'profile' },
         { path: '/game/saper', component: SapergamePage, name: 'saper' },
-        { path: '/game/crash', component: CrashGamePage, name: 'crash' },
         { path: '/settings', component: SettingsPage, name: 'settings' },
         { path: '/about', component: AboutPage, name: 'about' },
     ]