Add color picker support

iiPythonx · Feb 17, 2024 · de6ba1c · de6ba1c
1 parent b5aa69c
commit de6ba1c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/nightwatch/desktop/src/css/nano.min.css b/nightwatch/desktop/src/css/nano.min.css
diff --git a/nightwatch/desktop/src/index.html b/nightwatch/desktop/src/index.html
@@ -8,18 +8,19 @@
     <head>
         <meta charset = "utf8">
         <meta name = "viewport" content = "width=device-width, initial-scale=1">
-        <meta http-equiv = "Content-Security-Policy" content = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src *;">
+        <meta http-equiv = "Content-Security-Policy" content = "default-src 'self' 'unsafe-inline'; img-src data:; connect-src *;">
 
         <!-- CSS -->
         <link rel = "stylesheet" href = "./css/bootstrap.min.css" type = "text/css">
         <link rel = "stylesheet" href = "./css/index.css" type = "text/css">
+        <link rel = "stylesheet" href = "./css/nano.min.css" type = "text/css">
 
         <title>Nightwatch</title>
     </head>
     <body data-bs-theme = "dark">
 
         <!-- CONNECT state -->
-        <div class = "box-center" id = "state-connect">
+        <div class = "box-center" id = "state-connect" style = "width: 350px;">
             <form id = "connect-form">
                 <div class = "mb-4">
                     <label class = "form-label">Server address</label>
@@ -29,6 +30,10 @@
                     <label class = "form-label">Username</label>
                     <input class = "form-control" id = "connect-username">
                 </div>
+                <div class = "mb-4">
+                    <label class = "form-label">Name color</label>
+                    <div class = "color-picker form-control" style = "height: 38px;"></div>
+                </div>
                 <button type = "submit" class = "w-100 btn btn-primary">Connect</button>
             </form>
         </div>
@@ -78,9 +83,10 @@
         <!-- JS dependencies -->
         <script src = "./js/jquery.slim.min.js"></script>
         <script src = "./js/nanoid.min.js"></script>
-
+        
         <!-- Nightwatch JS -->
         <script src = "./js/nightwatch.js"></script>
+        <script src = "./js/pickr.min.js"></script>
         <script src = "./js/main.js"></script>
     </body>
 </html>
diff --git a/nightwatch/desktop/src/js/main.js b/nightwatch/desktop/src/js/main.js
@@ -5,11 +5,9 @@ class UIStateManager {
     constructor() {
         this.last_state = "#state-connect";
     }
-
     switch(state) {
         state = `#state-${state}`;
         $(this.last_state).css("display", "none");
-
         $(state).css("display", "block");
         this.last_state = state;
     }
@@ -31,7 +29,7 @@ $("#connect-form").on("submit", (e) => {
     // Establish connection
     const nw = new NightwatchServer($("#connect-address").val());
     nw.connected(() => {
-        nw.identify($("#connect-username").val(), "#fefefe", (d) => {
+        nw.identify($("#connect-username").val(), window._usercolor || "#fefefe", (d) => {
             if (d.text) return console.error(d.text);
             ui.switch("messages");
         });
@@ -56,12 +54,17 @@ messageInput.on("keyup", (e) => {
     if (!value.trim().length || value.length >= 300) return;
 
     // Show our message immediately (qol)
-    process_message({
-        user: window.nightwatch.user,
-        text: value
-    });
+    process_message({ user: window.nightwatch.user, text: value });
 
     // Send the actual message to the server
     window.nightwatch.message(value);
     messageInput.val("");
 });
+
+// Handle color selection
+const pickr = Pickr.create({
+    el: ".color-picker", theme: "nano",
+    components: { preview: true, hue: true, opacity: true }
+});
+pickr.on("change", () => { pickr.applyColor(); });
+pickr.on("save", (c) => { window._usercolor = c ? c.toHEXA().toString() : null; });