diff --git a/client-web/index.css b/client-web/index.css
index b5e855f..be6e660 100644
--- a/client-web/index.css
+++ b/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 */
-}
-
-.section h2 {
- margin: 20px;
-}
-
-.box p {
- margin: 10px;
-}
-.box h3 {
- margin: 10px;
-}
-.box img {
- margin: 10px;
-}
-.box button {
- margin: 10px;
+ flex-grow: 1;
}
.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 */
- flex-direction: column; /* Stack content vertically */
- align-items: flex-start; /* Align items to the left */
+ display: flex;
+ flex-direction: column;
+ 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 */
-/* padding: 10px;*/
+ gap: 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 */
- margin: 0; /* Remove default margins */
+ flex-grow: 1;
+ margin: 0;
}
-/* Update button styles */
-.bluebutton, .greenbutton, .redbutton, .backbutton {
+.bluebutton, .greenbutton, .redbutton {
max-width: 200px;
- width: auto; /* Allow button to size to content */
- margin: 0; /* Remove default margins */
- white-space: nowrap; /* Prevent button text from wrapping */
+ width: auto;
+ margin: 0;
+ 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;
+}
+
diff --git a/client-web/index.html b/client-web/index.html
index 6fc0cdb..dc3d1c3 100644
--- a/client-web/index.html
+++ b/client-web/index.html
@@ -4,6 +4,8 @@
Chookchat
+
+
@@ -31,6 +33,7 @@
diff --git a/client-web/index.js b/client-web/index.js
index a374ecf..1985ea7 100644
--- a/client-web/index.js
+++ b/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.height = `${window.innerHeight - 40}px`; // -40 for body margins
+ messagingDiv.style.width = `${window.innerWidth - 40}px`;
+ 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") {
- console.log(`${message.username} is typing`);
+ else if (message.type == "typing" && message.content == "1") {
if (username !== message.username && !typingPeople.includes(message.username)) {
typingPeople.push(message.username);
- console.log(typingPeople);
updatePeopleTyping();
}
return;
}
- if (message.type == "typing" && message.content == "0") {
- console.log(`${message.username} is no longer typing`)
+ else if (message.type == "typing" && message.content == "0") {
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,18 +173,39 @@ function connect() {
}
}
}
- const messagesDiv = document.getElementById('messagebox');
- const messageElement = document.createElement('div');
- if (messageElement) {
- if (messagesDiv) {
- messagesDiv.appendChild(messageElement);
- messageElement.className = 'message';
- messageElement.textContent = `${message.username}: ${message.content}` ;
- messagesDiv.scrollTop = messagesDiv.scrollHeight;
+ 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});
}
}
- 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) {
+ if (messagesDiv) {
+ messagesDiv.appendChild(messageElement);
+ messageElement.className = 'message';
+ messageElement.textContent = `${message.username}: ${message.content}` ;
+ messagesDiv.scrollTop = messagesDiv.scrollHeight;
+ }
+ }
+ if (document.hidden) {
+ const notifiction = new Notification("Chookchat", {body: messageElement.textContent});
+ }
+ }
+ // Egg message logic
+ else {
+ return
}
};
}
@@ -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
+
+