abrendan_dev/MicDropMessages
1
0
Fork 0
mirror of https://github.com/abrendan/MicDropMessages.git synced 2025-06-16 04:35:01 +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>
<head>
<title> MicDropMessages </title>
@ -13,7 +13,6 @@
<body onload = "onload()">
<div id = "Main">
<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>
<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">
@ -25,7 +24,7 @@
<input id = "ConnectButton" class="button2" type = "submit" value = "Connect" onclick = "Connect()">
</div>
<h2 id = "RoomID"> Chatroom : None </h2>
<div id = "Chat">
<div id = "Chat" >
<p id = "Message0" class = "Message"> - </p>
<p id = "Message1" 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){
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(){

3
html/style.css
View File

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