abrendan_dev/MicDropMessages
1
0
Fork 0
mirror of https://github.com/abrendan/MicDropMessages.git synced 2025-06-16 20:55:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Made the Chat part only visible after being connected with a room

Browse Source
This commit is contained in:
abrendan 2024-01-29 17:18:14 +00:00
parent 0d26f56c4b
commit db7b495194
3 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
html/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title> MicDropMessages </title> <title> MicDropMessages </title>
@ -13,7 +13,6 @@
<body onload = "onload()"> <body onload = "onload()">
<div id = "Main"> <div id = "Main">
<audio id = "Ding" src = "Ding.mp3"> </audio> <audio id = "Ding" src = "Ding.mp3"> </audio>
<!-- <img id = "Logo" src="https://micdropmessages.app/pictures/micdropmessages_logo-circle.png" alt="Logo"> -->
<h1 id = "Title"> MicDropMessages V2 </h1> <h1 id = "Title"> MicDropMessages V2 </h1>
<p>Welcome to MicDropMessages! This small webbased application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.</p> <p>Welcome to MicDropMessages! This small webbased application allows you to chat with your friends anonymously! To start, enter your username and enter a chatroom.</p>
<div id = "AccessPort"> <div id = "AccessPort">
@ -25,7 +24,7 @@
<input id = "ConnectButton" class="button2" type = "submit" value = "Connect" onclick = "Connect()"> <input id = "ConnectButton" class="button2" type = "submit" value = "Connect" onclick = "Connect()">
</div> </div>
<h2 id = "RoomID"> Chatroom : None </h2> <h2 id = "RoomID"> Chatroom : None </h2>
<div id = "Chat"> <div id = "Chat" >
<p id = "Message0" class = "Message"> - </p> <p id = "Message0" class = "Message"> - </p>
<p id = "Message1" class = "Message"> - </p> <p id = "Message1" class = "Message"> - </p>
<p id = "Message2" class = "Message"> - </p> <p id = "Message2" class = "Message"> - </p>

16
html/script.js
View File

@ -24,6 +24,8 @@ function onload(){
socket.on("join", function(room){ socket.on("join", function(room){
chatRoom.innerHTML = "Current Chatroom : " + 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){ socket.on("recieve", function(message){
@ -45,7 +47,19 @@ function onload(){
} }
function Connect(){ 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(){ function Send(){

3
html/style.css
View File

@ -30,6 +30,9 @@ input{
#Logo{ #Logo{
height: 80px; height: 80px;
} }
#Chat{
display: none;
}
#Main{ #Main{
min-height: 94.5vh; /* Stretch to fill the viewport height */ min-height: 94.5vh; /* Stretch to fill the viewport height */
width: 50%; width: 50%;