From 85031adbcfda062ab2215217e91f2fed00fe51fa Mon Sep 17 00:00:00 2001
From: Hepatica <danil.tkachenko@getmore.cz>
Date: Sat, 27 Jan 2024 01:30:40 +0100
Subject: [PATCH] Add formating word for chat

---
 .../src/assets/css/ComponentsStyles/chat.css  |  2 +
 .../src/components/WritechatComponent.vue     | 51 +++++++++++--------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/luckydiamond/src/assets/css/ComponentsStyles/chat.css b/luckydiamond/src/assets/css/ComponentsStyles/chat.css
index d5c9efd..40be60e 100644
--- a/luckydiamond/src/assets/css/ComponentsStyles/chat.css
+++ b/luckydiamond/src/assets/css/ComponentsStyles/chat.css
@@ -30,8 +30,10 @@
 } */
 
 .content p {
+    display: block;
     word-wrap: break-word;
     overflow-wrap: break-word;
+    overflow: hidden;
   }
 
 .chat__content--users {
diff --git a/luckydiamond/src/components/WritechatComponent.vue b/luckydiamond/src/components/WritechatComponent.vue
index b3ccae2..c8d0efa 100644
--- a/luckydiamond/src/components/WritechatComponent.vue
+++ b/luckydiamond/src/components/WritechatComponent.vue
@@ -1,45 +1,54 @@
 <template>
   <div class="write">
     <div class="write__content">
-      <input type="text" @keyup.enter="sendmsgDataEnter" v-model.trim="msg" placeholder="Напишите сообщение..." maxlength="100">
-      <button
-          :disabled="CheckerforBtn()"
-          type="submit"
-          @click="SendmsgData"
-      >
-        <img src="@/assets/icons-chat/sendmsg-icon.png">
+      <input
+        type="text"
+        @keyup.enter="sendmsgDataEnter"
+        v-model.trim="msg"
+        placeholder="Напишите сообщение..."
+        maxlength="200"
+      />
+      <button :disabled="CheckerforBtn()" type="submit" @click="SendmsgData">
+        <img src="@/assets/icons-chat/sendmsg-icon.png" />
       </button>
     </div>
   </div>
 </template>
 
 <script>
-
 export default {
   data() {
     return {
-      msg: '',
-      username: 'TEST USER',
-      icon: require('../assets/icons-test/person-icon-chat.png'),
-    }
+      msg: "",
+      username: "TEST USER",
+      icon: require("../assets/icons-test/person-icon-chat.png"),
+    };
   },
   methods: {
     CheckerforBtn() {
-      return this.msg === ''
+      return this.msg === "";
     },
     sendmsgDataEnter() {
-      if (this.msg !== '') {
-        this.SendmsgData()
+      if (this.msg !== "") {
+        this.SendmsgData();
       }
     },
     SendmsgData() {
-      this.$emit('send', [this.msg, this.username, this.icon])
-      this.msg = ''
-    }
-  }
-}
+      const formattedWord = this.InsertSpaceEvery24Chars(this.msg);
+      this.$emit("send", [formattedWord, this.username, this.icon]);
+      this.msg = "";
+    },
+    
+    InsertSpaceEvery24Chars(word) {
+      let result = "";
+      for (let i = 0; i < word.length; i += 24) {
+        result += word.substring(i, i + 24) + " ";
+      }
+      return result.trim();
+    },
+  },
+};
 </script>
 
 <style>
-
 </style>
\ No newline at end of file