Update some CSS, support JSON

client-web/gradient.css

@@ -0,0 +1,43 @@
+/* Reset default margin and ensure full viewport coverage */
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: linear-gradient(
+    30deg,
+    #50C878,  /* green */
+    #7FFFD4,  /* aqua */
+    #87CEEB,  /* light blue */
+    #00008B,  /* dark blue */
+    #800080,  /* purple */
+    #50C878,  /* green */
+    #7FFFD4,  /* aqua */
+    #87CEEB,  /* light blue */
+    #00008B,  /* dark blue */
+    #800080,  /* purple */
+    #50C878   /* green */
+  );
+  background-size: 1000% 1000%;
+  animation: gradient 120s ease infinite;
+}
+
+/* Gradient animation keyframes */
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 200% 50%;
+  }
+}
+
+/* Optional: styling for centered content */
+.content {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  font-family: sans-serif;
+  font-size: 2rem;
+  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}

client-web/index.css

@@ -3,18 +3,6 @@
     src: url("InterVariable.ttf");
 }
 
-body {
-    color: white;
-    background: rgb(231,255,68);
-    background: linear-gradient(336deg, rgba(231,255,68,0.67) 0%, rgba(73,255,145,0.67) 43%, rgba(104,79,255,1) 100%); 
-    font-family: inter;
-    background-attachment: fixed;
-    margin-left: 20px;
-    margin-right: 20px;
-    margin-top: 20px;
-    margin-bottom: 20px;
-}
-
 a {
     color: white;
 }
@@ -51,36 +39,16 @@ p {
 
 #messagebox {
     overflow-y: auto;
-    border 0px;
+    border: 0px;
     padding: 20px;
     margin: 10px 10px;
-}
+    flex-grow: 1; /* This makes it take up remaining space */
-
-.section {
-    background-color: rgba(0, 0, 0, 0.1);
-    max-width: 50%;
-    border-radius: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding: 5px
 }
 
 .section h2 {
     margin: 20px;
 }
 
-.box {
-    color: white;
-    background: rgba(0, 0, 0, 0.5);
-    max-width: 95%;
-    border-radius: 10px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 5px;
-}
-
 .box p {
     margin: 10px;
 }
@@ -133,5 +101,108 @@ p {
 .hidden {
     display: none;
 }
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+}
 
+body {
+    color: white;
+    background: rgb(231,255,68);
+    background: linear-gradient(336deg, rgba(231,255,68,0.67) 0%, rgba(73,255,145,0.67) 43%, rgba(104,79,255,1) 100%);
+    font-family: inter;
+    background-attachment: fixed;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
 
+/* Update section styles */
+.section {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 10px;
+    padding: 5px;
+    width: calc(100vw - 40px);
+    height: calc(100vh - 40px);
+    box-sizing: border-box; /* Add this to include padding in width calculation */
+}
+
+/* Update box styles */
+.box {
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    margin: 10px auto;
+    padding: 20px;
+    max-width: 400px;
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Special handling for messaging box */
+#messaging .box {
+    max-width: none;
+    height: 100%;
+    position: relative; /* For absolute positioning of input container */
+}
+
+#messagebox {
+    overflow-y: auto;
+    border: 0px;
+    padding: 20px;
+    margin: 10px 0; /* Remove horizontal margin */
+    flex-grow: 1;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Style for individual messages */
+.message {
+    text-align: left;
+    margin: 5px 0;
+    width: 100%;
+}
+
+/* Create a container for message input and send button */
+.input-container {
+    display: flex;
+    width: 100%;
+    gap: 10px; /* Space between input and button */
+/*    padding: 10px;*/
+    box-sizing: border-box;
+}
+
+/* Update input styles */
+input {
+    color: white;
+    background: rgba(0, 0, 0, 0.5);
+    border: none;
+    border-radius: 10px;
+    padding: 5px 5px;
+    font-family: "inter";
+    max-width: 300px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* Special style for message input */
+#messageInput {
+    max-width: none;
+    flex-grow: 1; /* Take up remaining space */
+    margin: 0; /* Remove default margins */
+}
+
+/* Update button styles */
+.bluebutton, .greenbutton, .redbutton, .backbutton {
+    max-width: 200px;
+    width: auto; /* Allow button to size to content */
+    margin: 0; /* Remove default margins */
+    white-space: nowrap; /* Prevent button text from wrapping */
+}

client-web/index.html

@@ -3,16 +3,18 @@
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>Chookpen</title>
+        <title>Chookchat</title>
         <link type="text/css" rel="stylesheet" href="index.css">
+        <link type="text/css" rel="stylesheet" href="gradient.css">
         <link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
+        <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     </head>
-    <body>
+    <body class="gradient">
         <div id="login">
             <div class="section">
                 <div class="box">
-                    <h3>Chookpen</h3>
+                    <h3>Chookchat</h3>
                     <input type="text" id="username" placeholder="Username"><br>
                     <input type="password" id="password" placeholder="Password"><br>
                     <button class="bluebutton" onclick="connect()">Log in</button>
@@ -29,10 +31,9 @@
             </div>
         </div>
         <div class="hidden" id="messaging">
-            <div class="section">
                 <div class="box">
-                    <h3>Chookpen</h3>
+                    <div id="messagebox" class="box" style="height: 600px;"><div></div></div>
-                    <div id="messagebox" class="box" style="height: 600px;"><div style="color: grey;">Chookpen for Web is ready. Happy chatting!</div></div>
+                    <div class="input-container">
                         <input type="text" id="messageInput" placeholder="Send a message...">
                         <button onclick="sendMessage()" class="bluebutton">Send</button>
                     </div>

client-web/index.js

@@ -1,9 +1,34 @@
-alert("Chookpen is currently in early development, expect bugs! Please don't try breaking the public server, do that with your own test server (read more in the Git repo). Thanks for trying Chookpen!")
+alert("Chookchat is currently in early development, expect bugs! Please don't try breaking the public server, do that with your own test server (read more in the Git repo). Thanks for trying Chookchat!")
+
+const width = $(document).width();
+
+if (width < 512) {
+    console.log("enlarging");
+    const loginDiv = document.getElementById('login');
+    if (loginDiv) {
+        console.log(loginDiv.style.width = `${width}px`);
+        console.log("enlarged?");
+    }
+}
 
 let ws;
 let username;
 let password;
 
+function resizeMessaging() {
+    const messagingDiv = document.getElementById('messaging');
+    if (messagingDiv) {
+        messagingDiv.style.width = `${window.innerWidth - 40}px`; // -40 for body margins
+        messagingDiv.style.height = `${window.innerHeight - 40}px`; // -40 for body margins
+    }
+}
+
+// Call it initially
+resizeMessaging();
+
+// Add resize listener to handle window resizing
+window.addEventListener('resize', resizeMessaging);
+
 function showConfig() {
     const serverconfig = document.getElementById('serverconfig')
     if (serverconfig) {
@@ -52,19 +77,40 @@ function connect() {
 
     ws = new WebSocket(wsUrl);
 
+    var incorrectDetail = 0;
+
     ws.onopen = () => {
         Notification.requestPermission();
         console.log('Connected!');
         document.getElementById('login').style.display = 'none';
         document.getElementById('messaging').style.display = 'block';
-        ws.send(`username:{${username}}token:{${md5(password)}}command:{login}commandArg:{${username}}`);
+        const connectMessage = {
-        ws.send(`username:{${username}}token:{${md5(password)}}message:{Joined the room}`);
+            "type": "connect",
+            "username": username,
+            "token": md5(password),
+            "content": `${username} joined the room!`
+        }
+        ws.send(JSON.stringify(connectMessage));
         ws.onmessage = (event) => {
             if (event.data === "ping") {
                 ws.send("pong");
                 return;
             }
-            console.log(event.data);
+            const message = JSON.parse(event.data);
+            if (message.type == "error") {
+                if (message.username == "system") {
+                    if (message.content == "invalid-token") {
+                        alert("Your password is incorrect! Please try putting in your password right.");
+                        incorrectDetail = 1;
+                        location.reload();
+                    }
+                    if (message.content == "unknown-account") {
+                        alert("That username isn't on the server. Maybe try registering?");
+                        incorrectDetail = 1;
+                        location.reload();
+                    }
+                }
+            }
             const messagesDiv = document.getElementById('messagebox');
             const messageElement = document.createElement('div');
             if (messageElement) {
@@ -72,22 +118,32 @@ function connect() {
                     messagesDiv.appendChild(messageElement);
                     messagesDiv.scrollTop = messagesDiv.scrollHeight;
                     messageElement.className = 'message';
-                    messageElement.textContent = event.data;
+                    messageElement.textContent = `${message.username}: ${message.content}` ;
                 }
             }
             if (document.hidden) {
-                const notifiction = new Notification("Chookpen", {body: messageElement.textContent});
+                const notifiction = new Notification("Chookchat", {body: messageElement.textContent});
             }
         };
     }
+    ws.onclose = () => {
+        alert("Chookchat has disconnected :/ Refresh the page to try again");
+    }
 }
 
 function sendMessage() {
     const messageInput = document.getElementById('messageInput');
     const message = messageInput.value.trim();
 
-    if (message && ws && ws.readyState === WebSocket.OPEN) {
+    const processedMessage = {
-        ws.send(`username:{${username}}token:{${md5(password)}}message:{${message}}`);
+        "type": "message",
+        "username": username,
+        "token": md5(password),
+        "content": message
+    }
+
+    if (processedMessage && ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(processedMessage));
         messageInput.value = '';
     }
 }