max/chookchat
max/chookchat
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Add eggs

Browse Source
This commit is contained in:
Maxwell Jeffress 2024-12-06 13:27:22 +11:00
parent 7ff5447388
commit e463d3dd2b
3 changed files with 219 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
client-web/index.css
View File

@ -42,68 +42,17 @@ p {
border: 0px; border: 0px;
padding: 20px; padding: 20px;
margin: 10px 10px; 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 { .bluebutton {
color: white;
font-size: 12pt;
background: rgba(0, 0, 255, 0.3); 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 { .greenbutton {
color: white;
font-size: 12pt;
background: rgba(0, 255, 0, 0.3); background: rgba(0, 255, 0, 0.3);
font-family: inter;
border-radius: 10px;
border: none;
padding: 5px;
} }
.redbutton { .redbutton {
color: white;
font-size: 12pt;
background: rgba(255, 0, 0, 0.3); 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 { .hidden {
display: none; display: none;
@ -128,17 +77,19 @@ body {
align-items: center; align-items: center;
} }
/* Update section styles */
.section { .section {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
border-radius: 10px; border-radius: 10px;
padding: 5px; padding: 5px;
width: calc(100vw - 40px); width: calc(100vw - 40px);
height: calc(100vh - 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 { .box {
color: white; color: white;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
@ -153,11 +104,23 @@ body {
align-items: center; 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 { #messaging .box {
max-width: none; max-width: none;
height: 100%; height: 100%;
position: relative; /* For absolute positioning of input container */ position: relative;
} }
#messagebox { #messagebox {
@ -170,14 +133,13 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
/* Style for individual messages */
.message { .message {
text-align: left; text-align: left;
margin: 5px 0; margin: 5px 0;
width: 100%; 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 { .file {
@ -186,12 +148,10 @@ body {
margin: 5px 0; margin: 5px 0;
} }
/* Create a container for message input and send button */
.input-container { .input-container {
display: flex; display: flex;
width: 100%; width: 100%;
gap: 10px; /* Space between input and button */ gap: 10px;
/* padding: 10px;*/
box-sizing: border-box; box-sizing: border-box;
} }
@ -208,21 +168,33 @@ input {
box-sizing: border-box; box-sizing: border-box;
} }
/* Special style for message input */
#messageInput { #messageInput {
max-width: none; 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; 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); background: rgba(255, 255, 255, 0.1);
border-radius: 5px; border-radius: 5px;
} }
@ -246,17 +218,17 @@ input {
padding-left: 10px; padding-left: 10px;
margin-bottom: 5px; margin-bottom: 5px;
font-size: 0.9em; font-size: 0.9em;
color: rgba(255, 255, 255, 0.7); /* Makes it slightly subtle */ color: rgba(255, 255, 255, 0.7);
} }
#users { #users {
position: relative; /* Allow absolute positioning within */ position: relative;
width: 100%; width: 100%;
} }
#meeting { #meeting {
position: absolute; position: absolute;
right: 10px; /* Matches your box margin */ right: 10px;
top: 0; top: 0;
cursor: pointer; cursor: pointer;
padding: 5px 10px; padding: 5px 10px;
@ -278,3 +250,103 @@ input {
width: 80%; width: 80%;
height: 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;
}

13
client-web/index.html
View File

@ -4,6 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chookchat</title> <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="index.css">
<link type="text/css" rel="stylesheet" href="gradient.css"> <link type="text/css" rel="stylesheet" href="gradient.css">
<link rel="shortcut icon" type="image/jpg" href="favicon.ico"/> <link rel="shortcut icon" type="image/jpg" href="favicon.ico"/>
@ -31,6 +33,7 @@
</div> </div>
</div> </div>
<div class="hidden" id="messaging"> <div class="hidden" id="messaging">
<div class="messaging-container">
<div id="meet"></div> <div id="meet"></div>
<div class="box"> <div class="box">
<div id="users" class="suttle"></div> <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 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"> <div class="input-container">
<button onclick="showFileUpload()" class="bluebutton">📁</button> <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> <button onclick="sendMessage()" class="bluebutton">Send</button>
</div> </div>
</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> </div>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>

94
client-web/index.js
View File

@ -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!") 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 ws;
let username; let username;
let password; let password;
@ -21,12 +10,11 @@ let api;
function resizeMessaging() { function resizeMessaging() {
const messagingDiv = document.getElementById('messaging'); const messagingDiv = document.getElementById('messaging');
if (messagingDiv) { 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(); resizeMessaging();
// Add resize listener to handle window resizing // Add resize listener to handle window resizing
@ -105,7 +93,6 @@ function connect() {
"content": `${username} joined the room!` "content": `${username} joined the room!`
} }
ws.send(JSON.stringify(connectMessage)); ws.send(JSON.stringify(connectMessage));
console.log(typingPeople);
ws.onmessage = (event) => { ws.onmessage = (event) => {
if (event.data === "ping") { if (event.data === "ping") {
ws.send("pong"); 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)) { if (username !== message.username && !typingPeople.includes(message.username)) {
typingPeople.push(message.username); typingPeople.push(message.username);
console.log(typingPeople);
updatePeopleTyping(); updatePeopleTyping();
} }
return; 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)) { if (username !== message.username && typingPeople.includes(message.username)) {
const index = typingPeople.indexOf(message.username); const index = typingPeople.indexOf(message.username);
typingPeople.splice(index, 1); typingPeople.splice(index, 1);
console.log(typingPeople);
updatePeopleTyping(); updatePeopleTyping();
} }
return; return;
} }
if (message.type == "users" && message.username == "system") { else if (message.type == "users" && message.username == "system") {
usersDiv = document.getElementById("users"); usersDiv = document.getElementById("users");
if (usersDiv) { if (usersDiv) {
usersDiv.textContent = `Online users: ${message.content}` usersDiv.textContent = `Online users: ${message.content}`
} }
return; return;
} }
if (message.type == "file") { else if (message.type == "file") {
const messagesDiv = document.getElementById('messagebox'); const messagesDiv = document.getElementById('messagebox');
const fileElement = document.createElement('embed'); const fileElement = document.createElement('embed');
if (fileElement) { if (fileElement) {
@ -174,7 +157,7 @@ function connect() {
} }
return; return;
} }
if (message.type == "call") { else if (message.type == "call") {
const messagesDiv = document.getElementById('messagebox'); const messagesDiv = document.getElementById('messagebox');
const callButton = document.createElement('div'); const callButton = document.createElement('div');
if (callButton) { if (callButton) {
@ -190,18 +173,39 @@ function connect() {
} }
} }
} }
const messagesDiv = document.getElementById('messagebox'); else if (message.type == "connect") {
const messageElement = document.createElement('div'); const messagesDiv = document.getElementById('messagebox');
if (messageElement) { const messageElement = document.createElement('div');
if (messagesDiv) { if (messageElement) {
messagesDiv.appendChild(messageElement); if (messagesDiv) {
messageElement.className = 'message'; messagesDiv.appendChild(messageElement);
messageElement.textContent = `${message.username}: ${message.content}` ; messageElement.className = 'message';
messagesDiv.scrollTop = messagesDiv.scrollHeight; messageElement.textContent = message.content;
messagesDiv.scrollTop = messagesDiv.scrollHeight;
}
}
if (document.hidden) {
const notifiction = new Notification("Chookchat", {body: messageElement.textContent});
} }
} }
if (document.hidden) { else if (message.type == "message") {
const notifiction = new Notification("Chookchat", {body: messageElement.textContent}); 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() { async function uploadFile() {
console.log("placeholder");
const fileInput = document.getElementById("fileupload"); const fileInput = document.getElementById("fileupload");
if (!fileInput.files.length) { if (!fileInput.files.length) {
@ -397,3 +400,24 @@ function startMeeting() {
} }
document.getElementById('messageInput').addEventListener('input', startTypingIndicator); 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