Add eggs

client-web/index.css

@@ -42,68 +42,17 @@ p {
     border: 0px;
     padding: 20px;
     margin: 10px 10px;
-    flex-grow: 1; /* This makes it take up remaining space */
+    flex-grow: 1; 
-}
-
-.section h2 {
-    margin: 20px;
-}
-
-.box p {
-    margin: 10px;
-}
-.box h3 {
-    margin: 10px;
-}
-.box img {
-    margin: 10px;
-}
-.box button {
-    margin: 10px;
 }
 
 .bluebutton {
-    color: white;
-    font-size: 12pt;
     background: rgba(0, 0, 255, 0.3);
-    font-family: inter;
-    border-radius: 10px;
-    border: none;
-    padding: 8px 12px;  /* Increased padding for better text containment */
-    max-width: none;    /* Remove max-width restriction */
-    width: auto;        /* Allow button to size to content */
-    margin: 5px 0;      /* Add some vertical spacing */
-    white-space: normal; /* Allow text to wrap if needed */
-    word-wrap: break-word; /* Break long words if necessary */
-    text-align: center;  /* Center the text */
-    cursor: pointer;    /* Add pointer cursor for better UX */
 }
 .greenbutton {
-    color: white;
-    font-size: 12pt;
     background: rgba(0, 255, 0, 0.3);
-    font-family: inter;
-    border-radius: 10px;
-    border: none;
-    padding: 5px;
 }
 .redbutton {
-    color: white;
-    font-size: 12pt;
     background: rgba(255, 0, 0, 0.3);
-    font-family: inter;
-    border-radius: 10px;
-    border: none;
-    padding: 5px;
-}
-.backbutton {
-    color: white;
-    font-size: 12pt;
-    background: rgba(255, 0, 0, 0.3);
-    font-family: inter;
-    border-radius: 10px;
-    border: none;
-    padding: 5px;
 }
 .hidden {
     display: none;
@@ -128,17 +77,19 @@ body {
     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 */
+    box-sizing: border-box; 
+}
+
+.section h2 {
+    margin: 20px;
 }
 
-/* Update box styles */
 .box {
     color: white;
     background: rgba(0, 0, 0, 0.5);
@@ -153,11 +104,23 @@ body {
     align-items: center;
 }
 
-/* Special handling for messaging box */
+.box p {
+    margin: 10px;
+}
+.box h3 {
+    margin: 10px;
+}
+.box img {
+    margin: 10px;
+}
+.box button {
+    margin: 10px;
+}
+
 #messaging .box {
     max-width: none;
     height: 100%;
-    position: relative; /* For absolute positioning of input container */
+    position: relative; 
 }
 
 #messagebox {
@@ -170,14 +133,13 @@ body {
     box-sizing: border-box;
 }
 
-/* Style for individual messages */
 .message {
     text-align: left;
     margin: 5px 0;
     width: 100%;
-    display: flex;     /* Use flexbox for better content handling */
+    display: flex;     
-    flex-direction: column; /* Stack content vertically */
+    flex-direction: column; 
-    align-items: flex-start; /* Align items to the left */
+    align-items: flex-start;
 }
 
 .file {
@@ -186,12 +148,10 @@ body {
     margin: 5px 0;
 }
 
-/* Create a container for message input and send button */
 .input-container {
     display: flex;
     width: 100%;
-    gap: 10px; /* Space between input and button */
+    gap: 10px; 
-/*    padding: 10px;*/
     box-sizing: border-box;
 }
 
@@ -208,21 +168,33 @@ input {
     box-sizing: border-box;
 }
 
-/* Special style for message input */
 #messageInput {
     max-width: none;
-    flex-grow: 1; /* Take up remaining space */
+    flex-grow: 1;         
-        margin: 0; /* Remove default margins */
+    margin: 0;
 }
 
-/* Update button styles */
+.bluebutton, .greenbutton, .redbutton {
-.bluebutton, .greenbutton, .redbutton, .backbutton {
     max-width: 200px;
-    width: auto; /* Allow button to size to content */
+    width: auto; 
-    margin: 0; /* Remove default margins */
+    margin: 0; 
-    white-space: nowrap; /* Prevent button text from wrapping */
+    white-space: nowrap; 
+    color: white;
+    font-size: 12pt;
+    font-family: inter;
+    border-radius: 10px;
+    border: none;
+    padding: 8px 12px;  
+    max-width: none;    
+    width: auto;       
+    margin: 5px 0;      
+    white-space: normal; 
+    word-wrap: break-word; 
+    text-align: center;  
+    cursor: pointer;    
+
 }
-.bluebutton:hover {
+.bluebutton, .greenbutton, .redbutton:hover {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 5px;
 }
@@ -246,17 +218,17 @@ input {
     padding-left: 10px;
     margin-bottom: 5px;
     font-size: 0.9em;
-    color: rgba(255, 255, 255, 0.7);  /* Makes it slightly subtle */
+    color: rgba(255, 255, 255, 0.7);  
 }
 
 #users {
-    position: relative;  /* Allow absolute positioning within */
+    position: relative;  
     width: 100%;
 }
 
 #meeting {
     position: absolute;
-    right: 10px;  /* Matches your box margin */
+    right: 10px;  
     top: 0;
     cursor: pointer;
     padding: 5px 10px;
@@ -278,3 +250,103 @@ input {
     width: 80%;
     height: 80%;
 }
+.eggs-panel {
+    position: absolute;
+    right: -300px;
+    top: 0;
+    width: 300px;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    transition: right 0.3s ease;
+}
+
+.eggs-panel.visible {
+    right: -310px;
+}
+
+.eggs-list {
+    padding: 10px;
+}
+
+.egg-item {
+    width: 100%;
+    padding: 10px;
+    margin: 5px 0;
+    background: rgba(0, 0, 0, 0.3);
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-family: "inter";
+    cursor: pointer;
+}
+
+.egg-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.egg-content {
+    padding: 10px;
+    height: calc(100% - 20px);
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    margin: 10px;
+}
+#messaging {
+    width: 100%;
+    height: 100%;
+}
+
+.messaging-container {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+    position: relative;
+}
+
+.box {
+    flex: 1;
+    margin-right: 10px; 
+}
+
+.eggs-panel {
+    width: 300px;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 10px;
+    transition: transform 0.3s ease;
+    transform: translateX(100%);
+    height: 100%;
+}
+
+.eggs-panel.visible {
+    transform: translateX(0);
+}
+
+.eggs-list {
+    padding: 10px;
+}
+
+.egg-item {
+    width: 100%;
+    padding: 10px;
+    margin: 5px 0;
+    background: rgba(0, 0, 0, 0.3);
+    border: none;
+    border-radius: 5px;
+    color: white;
+    font-family: "inter";
+    cursor: pointer;
+}
+
+.egg-item:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.egg-content {
+    padding: 10px;
+    height: calc(100% - 20px);
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    margin: 10px;
+}
+

client-web/index.html

@@ -4,6 +4,8 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Chookchat</title>
+        <link rel="preconnect" href="https://rsms.me/">
+        <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
         <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"/>
@@ -31,6 +33,7 @@
             </div>
         </div>
         <div class="hidden" id="messaging">
+            <div class="messaging-container">
                 <div id="meet"></div>
                 <div class="box">
                     <div id="users" class="suttle"></div>
@@ -40,10 +43,18 @@
                     <div id="upload" class="suttle" style="display: none;"><input type="file" id="fileupload"><button class="bluebutton" onclick="uploadFile()">Upload</button></input></div>
                     <div class="input-container">
                         <button onclick="showFileUpload()" class="bluebutton">📁</button>
-                        <input type="text" id="messageInput" placeholder="Send a message...">
+                        <button onclick="showEggs()" class="bluebutton">🥚</button>
+                        <input type="text" id="messageInput" placeholder="Send a message..." autofocus>
                         <button onclick="sendMessage()" class="bluebutton">Send</button>
                     </div>
                 </div>
+                <div id="eggs" style="display: none;">
+                    <div id="eggs-list" class="eggs-list">
+                        <button class="egg-item" onclick="eggNotepad()">📝 Notepad</button>
+                    </div>
+                    <!-- Eggs Start Here -->
+                </div>
+            </div>
         </div>
         <script src="index.js"></script>
     </body>

client-web/index.js

@@ -1,16 +1,5 @@
 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;
@@ -21,12 +10,11 @@ let api;
 function resizeMessaging() {
     const messagingDiv = document.getElementById('messaging');
     if (messagingDiv) {
-        messagingDiv.style.width = `${window.innerWidth - 40}px`; // -40 for body margins
+        messagingDiv.style.width = `${window.innerWidth - 40}px`;
-        messagingDiv.style.height = `${window.innerHeight - 40}px`; // -40 for body margins
+        messagingDiv.style.height = `${window.innerHeight - 40}px`;
     }
 }
 
-// Call it initially
 resizeMessaging();
 
 // Add resize listener to handle window resizing
@@ -105,7 +93,6 @@ function connect() {
             "content": `${username} joined the room!`
         }
         ws.send(JSON.stringify(connectMessage));
-        console.log(typingPeople);
         ws.onmessage = (event) => {
             if (event.data === "ping") {
                 ws.send("pong");
@@ -131,33 +118,29 @@ function connect() {
                     }
                 }
             }
-            if (message.type == "typing" && message.content == "1") {
+            else if (message.type == "typing" && message.content == "1") {
-                console.log(`${message.username} is typing`);
                 if (username !== message.username && !typingPeople.includes(message.username)) {
                     typingPeople.push(message.username);
-                    console.log(typingPeople);
                     updatePeopleTyping();
                 }
                 return;
             }
-            if (message.type == "typing" && message.content == "0") {
+            else if (message.type == "typing" && message.content == "0") {
-                console.log(`${message.username} is no longer typing`)
                 if (username !== message.username && typingPeople.includes(message.username)) {
                     const index = typingPeople.indexOf(message.username);
                     typingPeople.splice(index, 1);
-                    console.log(typingPeople);
                     updatePeopleTyping();
                 }
                 return;
             }
-            if (message.type == "users" && message.username == "system") {
+            else if (message.type == "users" && message.username == "system") {
                 usersDiv = document.getElementById("users");
                 if (usersDiv) {
                     usersDiv.textContent = `Online users: ${message.content}`
                 }
                 return;
             }
-            if (message.type == "file") {
+            else if (message.type == "file") {
                 const messagesDiv = document.getElementById('messagebox');
                 const fileElement = document.createElement('embed');
                 if (fileElement) {
@@ -174,7 +157,7 @@ function connect() {
                 }
                 return;
             }
-            if (message.type == "call") {
+            else if (message.type == "call") {
                 const messagesDiv = document.getElementById('messagebox');
                 const callButton = document.createElement('div');
                 if (callButton) {
@@ -190,6 +173,22 @@ function connect() {
                     }
                 }
             }
+            else if (message.type == "connect") {
+                const messagesDiv = document.getElementById('messagebox');
+                const messageElement = document.createElement('div');
+                if (messageElement) {
+                    if (messagesDiv) {
+                        messagesDiv.appendChild(messageElement);
+                        messageElement.className = 'message';
+                        messageElement.textContent = message.content;
+                        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+                    }
+                }
+                if (document.hidden) {
+                    const notifiction = new Notification("Chookchat", {body: messageElement.textContent});
+                }
+            }
+            else if (message.type == "message") {
                 const messagesDiv = document.getElementById('messagebox');
                 const messageElement = document.createElement('div');
                 if (messageElement) {
@@ -203,6 +202,11 @@ function connect() {
                 if (document.hidden) {
                     const notifiction = new Notification("Chookchat", {body: messageElement.textContent});
                 }
+            }
+            // Egg message logic
+            else {
+                return
+            }
         };
     }
     ws.onclose = () => {
@@ -257,7 +261,6 @@ function showFileUpload() {
 }
 
 async function uploadFile() {
-    console.log("placeholder");
     const fileInput = document.getElementById("fileupload");
 
     if (!fileInput.files.length) {
@@ -397,3 +400,24 @@ function startMeeting() {
 }
 
 document.getElementById('messageInput').addEventListener('input', startTypingIndicator);
+
+function showEggs() {
+    const eggsPanel = document.getElementById('eggs');
+    eggsPanel.style.display = "block";
+
+    // Adjust main box width when eggs panel is toggled
+    const mainBox = document.querySelector('#messaging .box');
+    if (eggsPanel.classList.contains('visible')) {
+        mainBox.style.width = 'calc(100% - 310px)';
+    } else {
+        mainBox.style.width = '100%';
+    }
+}
+
+function closeEggs() {
+    const eggsPanel = document.getElementById('eggs');
+    eggsPanel.style.display = "block";
+}
+// Eggs begin here
+
+