Update some CSS, support JSON

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}}`);
-        ws.send(`username:{${username}}token:{${md5(password)}}message:{Joined the room}`);
+        const connectMessage = {
+            "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) {
-        ws.send(`username:{${username}}token:{${md5(password)}}message:{${message}}`);
+    const processedMessage = {
+        "type": "message",
+        "username": username,
+        "token": md5(password),
+        "content": message
+    }
+
+    if (processedMessage && ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(processedMessage));
         messageInput.value = '';
     }
 }