Merge pull request #19 from cedricouellet/develop

Color picker, text limit, change default scheme, error message now has error level
cedricouellet · Feb 1, 2022 · 1c33fa3 · 1c33fa3
2 parents cc5cefc + 043d0c4
commit 1c33fa3
Show file tree

Hide file tree

Showing 8 changed files with 312 additions and 71 deletions.
diff --git a/app.js b/app.js
@@ -111,7 +111,7 @@ function receiveMessage(socket, message) {
     if (sender === undefined) {
       // Let them know something went wrong
       socket.emit(events.MESSAGE,
-        messaging.generateServerMessage("Your connection was lost...\n\nTry refreshing the page!")
+        messaging.generateErrorMessage("Your connection was lost...\n\nTry refreshing the page!")
       );
 
       return;
@@ -121,7 +121,7 @@ function receiveMessage(socket, message) {
     if (isZalgo(message)) {
       // Let them know they can't do that
       socket.emit(events.MESSAGE,
-        messaging.generateServerMessage("Nice try, but Zalgo is not allowed...")
+        messaging.generateErrorMessage("Nice try, but Zalgo is not allowed...")
       );
 
       return;
@@ -139,7 +139,7 @@ function receiveMessage(socket, message) {
     // If something goes wrong with the message, let the sender know
     socket.emit(
       events.MESSAGE,
-      messaging.generateServerMessage(
+      messaging.generateErrorMessage(
         "Sending failed. Your message was too long or contained invalid characters."
       )
     );

diff --git a/lib/messaging.js b/lib/messaging.js
@@ -3,12 +3,26 @@ const {BOT_NAME} = require('./constants');
 /**
  * Generate a message coming from the server.
  * @param {string} message The message to send.
- * @return {{sender: string, text: string}|any} The message object containing the sender and text.
+ * @return {{sender: string, text: string, errorLevel: number}|any} The message object containing the sender and text.
  */
 function generateServerMessage(message) {
   return {
     sender: BOT_NAME,
     text: message,
+    errorLevel: 0,
+  };
+}
+
+/**
+ * Generate an error message coming from the server.
+ * @param {string} message The message to send.
+ * @return {{sender: string, text: string, errorLevel: number}|any} The message object containing the sender and text.
+ */
+ function generateErrorMessage(message) {
+  return {
+    sender: BOT_NAME,
+    text: message,
+    errorLevel: 1,
   };
 }
 
@@ -17,4 +31,5 @@ function generateServerMessage(message) {
  */
 module.exports = {
   generateServerMessage,
+  generateErrorMessage,
 };
diff --git a/public/chat.html b/public/chat.html
@@ -1,73 +1,89 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link id="favicon" rel="shortcut icon" href="icon/favicon.ico" type="image/x-icon" />
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <link id="favicon" rel="shortcut icon" href="icon/favicon.ico" type="image/x-icon"/>
     <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
-      integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
-      crossorigin="anonymous"
+            rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"
+            integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk="
+            crossorigin="anonymous"
     />
-    <link rel="stylesheet" href="css/common.css" />
-    <link rel="stylesheet" href="css/chat.css" />
+    <link rel="stylesheet" href="css/common.css"/>
+    <link rel="stylesheet" href="css/chat.css"/>
     <script src="/socket.io/socket.io.min.js" defer></script>
     <script src="js/BrowserNotifier.js" defer></script>
     <script src="js/NotificationDisplayer.js" defer></script>
     <script src="js/chat.js" defer></script>
+    <script src="js/Picker.js" defer></script>
     <title>NoChat - Chat</title>
-  </head>
+</head>
 
-  <body>
-    <div id="container">
-      <header id="header">
+<body>
+<div id="container">
+    <header id="header">
         <h1>NoChat&nbsp;<i class="fas fa-comment-dots"></i></h1>
         <a href="index.html" class="btn">Leave</a>
-      </header>
-      <div id="main">
-        <div id="sidebar" class="scrollbars">
-          <h3><i class="fas fa-cog"></i>&nbsp;Settings</h3>
-          <div>
-            <ul class="sidebarItems">
-              <li>
-                <input id="notification-checkbox" type="checkbox"/>
-                <label for="notification-checkbox">Alerts</label>
-                <br>
-                <br>
-              </li>
+    </header>
+    <div id="main">
+        <div id="sidebar" class="scrollbar">
+            <h3 id="settings-toggler"><i class="fas fa-cog"></i>&nbsp;Settings</h3>
+            <ul id="settings-container" class="sidebar-item">
+                <li>
+                    <input id="notification-checkbox" type="checkbox"/>
+                    <label for="notification-checkbox">Alerts</label>
+                </li>
+                <li>
+                  <input type="color" value="#2d3142" class="picker" id="primary-color">
+                  <label for="primary-color">Primary</label>
+                </li>
+                <li>
+                  <input type="color" value="#4f5d75" class="picker" id="secondary-color">
+                  <label for="secondary-color">Secondary</label>
+                </li>
+                <li>
+                  <input type="color" value="#F43E4D" class="picker" id="accent-color">
+                  <label for="accent-color">Accent</label>
+                </li>
+                <li>
+                  <input type="color" value="#F5515F" class="picker" id="accent-hover-color">
+                  <label for="accent-hover-color">Hover</label>
+                  <br>
+                  <br>
+                </li>
             </ul>
-          </div>
-
-          <h3><i class="fas fa-user-friends"></i>&nbsp;Users</h3>
-          <ul id="users" class="sidebarItems"></ul>
+            <h3 id="users-toggler"><i class="fas fa-user-friends"></i>&nbsp;Users</h3>
+            <ul id="users-container" class="sidebar-item"></ul>
         </div>
-        <div id="messages" class="scrollbars"></div>
-      </div>
-      <div id="form-container">
+        <div id="messages" class="scrollbar"></div>
+    </div>
+    <div id="form-container">
         <form id="form">
-          <input
-            id="message-input"
-            type="text"
-            placeholder="Enter your message..."
-            autocomplete="off"
-            required
-          />
-          <button id="send-btn" class="btn">
-            Send&nbsp;<i class="fas fa-share"></i>
-          </button>
+            <!-- Satisfy linter -->
+            <label for="message-input"></label>
+            <input
+                    id="message-input"
+                    type="text"
+                    placeholder="Enter your message..."
+                    autocomplete="off"
+                    required/>
+            <div id="char-count"></div>
+            <button id="send-btn" class="btn">
+                Send&nbsp;<i class="fas fa-share"></i>
+            </button>
         </form>
-      </div>
+    </div>
 
-      <div class="bottom">
+    <div class="bottom">
         <a class="git" href="https://github.com/cedricouellet/no-chat">
-          <i class="fab fa-github"></i>
-          https://github.com/cedricouellet/no-chat
+            <i class="fab fa-github"></i>
+            https://github.com/cedricouellet/no-chat
         </a>
         <div class="copyright">
-          Copyright &copy; 2022 NoChat Devs
+            Copyright &copy; 2022 NoChat Devs
         </div>
-      </div>
     </div>
-  </body>
+</div>
+</body>
 </html>
diff --git a/public/css/chat.css b/public/css/chat.css
@@ -10,6 +10,10 @@
   flex: 1;
 }
 
+#message-input:focus {
+  outline: 0;
+}
+
 #container {
   border-radius: 15px;
   max-width: 50%;
@@ -29,18 +33,18 @@
   justify-content: space-between;
 }
 
-.scrollbars::-webkit-scrollbar-track {
+.scrollbar::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
           box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 	background-color: var(--light-color);
 }
 
-.scrollbars::-webkit-scrollbar {
+.scrollbar::-webkit-scrollbar {
   width: 1rem;
 	background-color: var(--light-color);
 }
 
-.scrollbars::-webkit-scrollbar-thumb {
+.scrollbar::-webkit-scrollbar-thumb {
 	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
           box-shadow: inset 0 0 6px rgba(0,0,0,.3);
   border-radius: 10px;
@@ -69,14 +73,17 @@
 
 #sidebar h3 {
   margin-bottom: 15px;
+  padding: 0.5em;
+  border-radius: 0.25em;
+  background-color: var(--secondary-color);
 }
 
 #sidebar ul li {
   padding: 10px 0;
 }
 
-.sidebarItems {
-  margin-left: 2em;
+.sidebar-item {
+  margin-left: 1em;
 }
 
 #messages {
@@ -99,6 +106,11 @@
 .incoming-message {
   background-color: var(--accent-color);
 }
+
+.error-message {
+  background-color: var(--error-color);
+}
+
 .message {
   word-wrap: break-word;
 }
@@ -135,6 +147,73 @@
   color: var(--light-color);
 }
 
+.picker {
+  background-color: var(--light-color);
+  border-radius: 100%;
+  padding: 1%;
+  width: 1rem;
+  height: 1rem;
+}
+
+.picker:hover {
+  cursor: pointer;
+}
+
+input[type=color]::-webkit-color-swatch {
+  border: none;
+  border-radius: 100%;
+  padding: 0;
+}
+
+input[type=color]::-webkit-color-swatch-wrapper {
+    border: none;
+    border-radius: 100%;
+    padding: 0;
+}
+
+#char-count {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+
+  background-color: var(--accent-color);
+  color: var(--light-color);
+  font-family: "Inconsolata", monospace;
+  border:  0;
+  padding: 0.5em;
+  font-size: 1em;
+}
+
+#char-count:hover {
+  cursor: default;
+}
+
+#settings-toggler:hover {
+  cursor: pointer;
+}
+
+#users-toggler:hover {
+  cursor: pointer;
+}
+
+#notification-checkbox {
+  padding: 2em;
+  transform: scale(1.25);
+}
+
+#notification-checkbox:hover {
+  cursor: pointer;
+}
+
+.hidden {
+  display: none;
+}
+
+.over {
+  color: var(--disabled-color) !important;
+}
+
 @media (max-width: 700px) {
   #main {
     display: block;

diff --git a/public/css/common.css b/public/css/common.css
@@ -3,11 +3,11 @@
 :root {
   --primary-color: #2d3142;
   --secondary-color: #4f5d75;
-  --accent-color: #d81e5b;
-  --accent-hover-color: #d81e5ce7;
-  --light-color: whitesmoke;
-  --success-color: #5cb85c;
-  --error-color: #d9534f;
+  --accent-color: #F43E4D;
+  --accent-hover-color: #F5515F;
+  --light-color: #F6F0ED;
+  --disabled-color: #868686;
+  --error-color: #93032E;
 }
 
 * {

diff --git a/public/css/index.css b/public/css/index.css
@@ -37,6 +37,10 @@
   width: 100%;
 }
 
+#main input[type="text"]:focus {
+  outline: 0;
+}
+
 #main .btn {
   margin-top: 20px;
   width: 100%;

diff --git a/public/js/Picker.js b/public/js/Picker.js
@@ -0,0 +1,24 @@
+/** Color Picker Manager for chat webpage */
+
+// Get root element
+const root = document.documentElement;
+
+// Get all pickers
+const pickerList = Array.from(document.getElementsByClassName("picker"));
+
+// Apply event listeners
+pickerList.forEach(picker => {
+    picker.addEventListener("input", applyColor);
+});
+
+/**
+ * Apply a color to the given CSS variable
+ * @param {Event} e event that triggered the color change
+ */
+function applyColor(e) {
+    root.style.setProperty(`--${e.target.id}`, e.target.value);
+}
+
+// Explanation:
+//<input type="color" value="#ff0000" class="picker" id="primary-color">
+