From db7b495194c9eb626174e961e7b432c7404b1301 Mon Sep 17 00:00:00 2001 From: abrendan <94894839+abrendan@users.noreply.github.com> Date: Mon, 29 Jan 2024 17:18:14 +0000 Subject: [PATCH] Made the Chat part only visible after being connected with a room --- html/index.html | 5 ++--- html/script.js | 16 +++++++++++++++- html/style.css | 3 +++ 3 files changed, 20 insertions(+), 4 deletions(-) diff --git a/html/index.html b/html/index.html index cb1a85e..30da14b 100644 --- a/html/index.html +++ b/html/index.html @@ -1,4 +1,4 @@ - + MicDropMessages @@ -13,7 +13,6 @@
-

MicDropMessages V2

Welcome to MicDropMessages! This small webbased application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.

@@ -25,7 +24,7 @@

Chatroom : None

-
+

-

-

-

diff --git a/html/script.js b/html/script.js index 2a38692..3364f92 100644 --- a/html/script.js +++ b/html/script.js @@ -24,6 +24,8 @@ function onload(){ socket.on("join", function(room){ chatRoom.innerHTML = "Current Chatroom : " + room; + // Show the chat div when successfully joined a room. + document.getElementById("Chat").style.display = "block"; }) socket.on("recieve", function(message){ @@ -45,7 +47,19 @@ function onload(){ } function Connect(){ - socket.emit("join", chatIDInput.value, usernameInput.value); + // Get the username and room from the input fields + var username = usernameInput.value.trim(); + var room = chatIDInput.value.trim(); + + // Check if the username and room are not empty + if(username && room){ + socket.emit("join", room, username); + chatRoom.innerHTML = "Chatroom : " + room; + // Hide the chat div initially when attempting to connect + document.getElementById("Chat").style.display = "none"; + } else { + // Maybe show an error message to the user that they need to fill in both fields + } } function Send(){ diff --git a/html/style.css b/html/style.css index 755af07..77d3fb4 100644 --- a/html/style.css +++ b/html/style.css @@ -30,6 +30,9 @@ input{ #Logo{ height: 80px; } +#Chat{ + display: none; +} #Main{ min-height: 94.5vh; /* Stretch to fill the viewport height */ width: 50%;