diff --git a/client-web/gradient.css b/client-web/gradient.css new file mode 100644 index 0000000..f2a66c1 --- /dev/null +++ b/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); +} diff --git a/client-web/index.css b/client-web/index.css index 24b7d74..67c72a4 100644 --- a/client-web/index.css +++ b/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; -} - -.section { - background-color: rgba(0, 0, 0, 0.1); - max-width: 50%; - border-radius: 10px; - margin-top: 10px; - margin-bottom: 10px; - padding: 5px + flex-grow: 1; /* This makes it take up remaining space */ } .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 */ +} diff --git a/client-web/index.html b/client-web/index.html index 7f68be9..2ef4c6f 100644 --- a/client-web/index.html +++ b/client-web/index.html @@ -3,16 +3,18 @@ - Chookpen + Chookchat + + - +
-

Chookpen

+

Chookchat



@@ -29,14 +31,13 @@
diff --git a/client-web/index.js b/client-web/index.js index ef84bbd..3b29be2 100644 --- a/client-web/index.js +++ b/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 = ''; } }