Skip to content

Instantly share code, notes, and snippets.

@gptlang
Created December 28, 2023 11:52
Show Gist options
  • Save gptlang/af774dfc1bd6d58304994e4ea39898fb to your computer and use it in GitHub Desktop.
Save gptlang/af774dfc1bd6d58304994e4ea39898fb to your computer and use it in GitHub Desktop.
document.addEventListener("DOMContentLoaded", () => {
// we will check if the user accepted the terms or not
const userAcceptedTerms = localStorage.getItem("termsAccepted");
if (userAcceptedTerms !== "true") {
// if the user did not accept the terms, we will redirect him to the terms page
window.location.href = "/terms.html";
}
const socket = io();
const messageInput = document.getElementById("message-input");
const sendButton = document.getElementById("send-button");
const chatContainer = document.getElementById("chat-container");
const roomInfo = document.getElementById("room-info");
const usersXcolorMapping = {};
let currentUserIs = "";
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
function appendMessage(username, message, color) {
const chatMessage = document.createElement("div");
chatMessage.classList.add("chat-message");
const sanitizedUsername = escapeHtml(username);
const sanitizedMessage = escapeHtml(message);
chatMessage.innerHTML = `<span class="username" style="color: ${color};">${sanitizedUsername}:</span> ${sanitizedMessage}`;
chatContainer.appendChild(chatMessage);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
function sendMessage() {
const message = messageInput.value.trim();
if (message !== "") {
appendMessage("You", message, usersXcolorMapping["thisUser"]);
socket.emit(
"message-sent",
JSON.stringify({
message,
})
);
messageInput.value = "";
}
}
sendButton.addEventListener("click", () => {
sendMessage();
});
messageInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
sendMessage();
}
});
socket.on("message-received", (data) => {
let inputData = JSON.parse(data);
console.log(inputData);
appendMessage(
inputData.username,
inputData.message,
usersXcolorMapping[inputData.username]
);
});
socket.on("total-online-users", (data) => {
let inputData = JSON.parse(data);
console.log(inputData);
updateOnlineUsersCount(inputData.total_online_users);
});
socket.on("user-joined", (data) => {
let inputData = JSON.parse(data);
console.log(inputData);
// lazy approach to find if the user is the current user or not
// just count the number of chat messages, if it is one then it is the current user
const chatMessages = document.getElementsByClassName("chat-message");
let welcomeMessageUser = inputData.username;
if (chatMessages.length === 0) {
welcomeMessageUser = "You";
usersXcolorMapping["thisUser"] = inputData.color;
currentUserIs = inputData.username;
}
console.log(``);
usersXcolorMapping[inputData.username] = inputData.color;
startTimer(inputData.time_left);
appendMessage(welcomeMessageUser, ` joined the chat`, inputData.color);
updateUsersCount(inputData.people_in_room);
});
socket.on("user-left", (data) => {
let inputData = JSON.parse(data);
console.log(`User ${data} left the chat`);
if (currentUserIs === inputData.username) {
appendMessage(
inputData.username,
` left the chat`,
usersXcolorMapping["thisUser"]
);
} else {
appendMessage(
inputData.username,
` left the chat`,
usersXcolorMapping[inputData.username]
);
}
updateUsersCount(inputData.people_in_room);
});
// socket.on("room assigned", (data) => {
// console.log(
// `Assigned to room: ${data.room} with duration ${data.duration}`
// );
// roomInfo.innerHTML = `Room: ${data.room} | Duration: ${Math.floor(
// data.duration / 60
// )} minutes`;
// // Initialize the countdown timer
// startTimer(data.duration);
// });
// Function to handle the countdown timer
let interval;
function startTimer(duration) {
clearInterval(interval);
let minutes, seconds;
interval = setInterval(() => {
// Calculate minutes and seconds from duration
minutes = Math.floor(duration / 60);
seconds = Math.floor(duration % 60);
// Update the 'timer-value' span
const timerValueElement = document.getElementById("timer-value");
timerValueElement.textContent = `${minutes}:${seconds
.toString()
.padStart(2, "0")}`;
// Decrease duration
duration--;
// If the duration is zero or less, clear the interval and reset the timer
if (duration < 0) {
clearInterval(interval);
timerValueElement.textContent = "0:00";
// Redirect user to a new room when the timer ends
window.location.reload();
}
}, 1000);
}
// adding event click event listener to the about button
document.getElementById("about-button").addEventListener("click", (e) => {
// redirecting the user to the about page
// window.location.href = "/about.html";
e.preventDefault();
document.getElementById("overlay-model").style.display = "block";
});
});
function updateUsersCount(count) {
const usersCount = document.getElementById("participant-count");
usersCount.innerHTML = `👥 ${count}/5 People in Room`;
if (count === 1) {
const spinner = document.getElementById("spinner-container");
// removing border bottom top for divs around spinner
const chatContainer = document.getElementById("chat-container");
chatContainer.style.borderBottom = "none";
const messageInput = document.getElementById("message-input-container");
messageInput.style.borderTop = "none";
spinner.style.display = "flex";
} else {
const spinner = document.getElementById("spinner-container");
// adding border bottom top for divs around spinner
const chatContainer = document.getElementById("chat-container");
chatContainer.style.borderBottom = "1px solid #dee2e6";
const messageInput = document.getElementById("message-input-container");
messageInput.style.borderTop = "1px solid #dee2e6";
spinner.style.display = "none";
}
}
function updateOnlineUsersCount(count) {
const onlineUsersCount = document.getElementById("online-count");
onlineUsersCount.innerHTML = `🌐 ${count} Online`;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment