From 54d712555b69a2e3be1d11dfbc3cd08b70368f65 Mon Sep 17 00:00:00 2001
From: adb <info@adb.sh>
Date: Wed, 4 Nov 2020 17:31:21 +0100
Subject: [PATCH] message align left on oversize

---
 src/components/icon.vue       |  5 +++--
 src/components/newMessage.vue | 34 +++++++++++++++++++++++-----------
 src/main.js                   | 14 ++++++++++++--
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/components/icon.vue b/src/components/icon.vue
index 97d0e42..8b8fac1 100644
--- a/src/components/icon.vue
+++ b/src/components/icon.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="iconContainer" >
+  <button class="iconContainer" >
     <img class="icon" v-bind:src=ic alt="" />
-  </div>
+  </button>
 </template>
 
 <script>
@@ -22,6 +22,7 @@ name: "icon",
     box-shadow: 3px 3px 10px #111;
     cursor: pointer;
     user-select: none;
+    border: none;
   }
   .icon{
     position: absolute;
diff --git a/src/components/newMessage.vue b/src/components/newMessage.vue
index 3127aec..8f91993 100644
--- a/src/components/newMessage.vue
+++ b/src/components/newMessage.vue
@@ -1,34 +1,46 @@
 <template>
   <div class="newMessageBanner">
-    <label for="newMessageInput"></label><textarea id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="content" />
-    <icon id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
+    <label for="newMessageInput"></label>
+    <textarea  id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="msg.content.text" />
+    <icon v-on:click="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
   </div>
 </template>
 
 <script>
 import icon from './icon.vue';
-import sendMessage from '../main.js';
+import main from '../main.js';
 
 export default {
   name: "newMessage",
   components: {
     icon
   },
-  props: {
-    content: String
-  },
   mounted() {
     ResizeListener(document.getElementById("newMessageInput"));
-    document.getElementById("sendMessageBtn").addEventListener("click", () => {
+    /*document.getElementById("sendMessageBtn").addEventListener("click", () => {
       if (document.getElementById("newMessageInput").value !== '') {
-        sendMessage.methods.callSendMessage(document.getElementById("newMessageInput").value)
+        main.methods.sendMessage(document.getElementById("newMessageInput").value)
         document.getElementById("newMessageInput").value = ''
         //sendMessage.methods.callSendMessage(this.data.message)
       }
-    })
+    })*/
+  },
+  methods: {
+    sendMessage(){
+      this.msg.time = Date.now()
+      main.methods.sendWebSocket(this.msg)
+    }
   },
-  data: function () {
-    return { message: this.content}
+  data(){
+    return {
+      msg: {
+        type: "message",
+        time: Date.now(),
+        content: {
+          text: ""
+        }
+      }
+    }
   }
 }
 
diff --git a/src/main.js b/src/main.js
index aeb6c82..6792109 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,8 +12,18 @@ export default {
     sendMessage()
   },
   methods: {
-    callSendMessage(data) {
-      sendMessage(data)
+    sendMessage(message){
+      let msg = {
+        type: "message",
+        time: Date.now(),
+        content: {
+          message: message
+        }
+      }
+      socket.send(JSON.stringify(msg))
+    },
+    sendWebSocket(msg){
+      socket.send(JSON.stringify(msg))
     }
   }
 }