From 9a221a1427ea37fb5c3832507e7e8fbcdecc87df Mon Sep 17 00:00:00 2001
From: Henry Hiles <henry@henryhiles.com>
Date: Tue, 8 Feb 2022 11:35:16 -0500
Subject: [PATCH] Added shift+enter for newline and enter for send message

---
 public/script.js | 26 ++++++++++++++++----------
 public/style.css |  1 -
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/public/script.js b/public/script.js
index 4e5f8bc..9938cc1 100644
--- a/public/script.js
+++ b/public/script.js
@@ -20,11 +20,24 @@ setInterval(
     45000
 )
 
+const submitMessage = () => {
+    if (!messageInput.value) return (messageInput.required = true)
+    messageInput.required = false
+    socket.emit("send-chat-message", roomName, messageInput.value)
+    addMessage({ user: "you", message: messageInput.value, isYours: true })
+    messageInput.value = ""
+}
+
+messageInput.addEventListener("keydown", (event) => {
+    if (event.shiftKey || event.key != "Enter") return
+    event.preventDefault()
+    submitMessage()
+})
+
 const toggleOpen = () =>
     document.querySelector("#rooms").classList.toggle("opened")
 
-const addMessage = (messageObject) => {
-    const { message, isYours, isSystem, user } = messageObject
+const addMessage = ({ message, isYours, isSystem, user }) => {
     const messageDiv = document
         .querySelector("template")
         .content.cloneNode(true)
@@ -90,14 +103,7 @@ if (nameButton)
         }
     })
 
-if (messageButton)
-    messageButton.addEventListener("click", () => {
-        if (!messageInput.value) return (messageInput.required = true)
-        messageInput.required = false
-        socket.emit("send-chat-message", roomName, messageInput.value)
-        addMessage({ user: "you", message: messageInput.value, isYours: true })
-        messageInput.value = ""
-    })
+if (messageButton) messageButton.addEventListener("click", submitMessage)
 
 socket.on("chat-message", (message, user) => {
     addMessage({ message, user })
diff --git a/public/style.css b/public/style.css
index 60233e6..b61421d 100644
--- a/public/style.css
+++ b/public/style.css
@@ -307,7 +307,6 @@ button:is(:disabled, :hover) {
 
 :is(input[type="text"], textarea):required {
     animation: shake 0.2s ease-in-out 0s 2;
-    color: #ff0000;
     border-color: red !important;
 }