diff --git a/root.js b/root.js index 3a645fb..528a61e 100644 --- a/root.js +++ b/root.js @@ -1,37 +1,44 @@ function toggleSettings() { - const panel = document.getElementById('settings-panel'); - panel.style.display = panel.style.display === 'none' ? 'block' : 'none'; - if (panel.style.display === 'block') { - const username = document.getElementById('username'); + const panel = document.getElementById("settings-panel"); + panel.style.display = panel.style.display === "none" ? "block" : "none"; + if (panel.style.display === "block") { + const username = document.getElementById("username"); username.focus(); - username.selectionStart = username.selectionEnd = username.value.length + username.selectionStart = username.selectionEnd = username.value + .length; } } function toggleUsers() { - const panel = document.getElementById('users-panel'); - panel.style.display = panel.style.display === 'none' ? 'block' : 'none'; + const panel = document.getElementById("users-panel"); + panel.style.display = panel.style.display === "none" ? "block" : "none"; } -document.addEventListener('click', function(event) { - const settingsPanel = document.getElementById('settings-panel'); - const settingsButton = document.querySelector('.settings-button'); - const usersPanel = document.getElementById('users-panel'); - const usersButton = document.querySelector('.users-button'); +document.addEventListener("click", function (event) { + const settingsPanel = document.getElementById("settings-panel"); + const settingsButton = document.querySelector(".settings-button"); + const usersPanel = document.getElementById("users-panel"); + const usersButton = document.querySelector(".users-button"); - if (!settingsPanel.contains(event.target) && !settingsButton.contains(event.target)) { - settingsPanel.style.display = 'none'; + if ( + !settingsPanel.contains(event.target) && + !settingsButton.contains(event.target) + ) { + settingsPanel.style.display = "none"; } - if (!usersPanel.contains(event.target) && !usersButton.contains(event.target)) { - usersPanel.style.display = 'none'; + if ( + !usersPanel.contains(event.target) && + !usersButton.contains(event.target) + ) { + usersPanel.style.display = "none"; } }); -document.addEventListener('keypress', function(event) { - if (event.key === 'Enter' && !event.shiftKey) { - const settingsPanel = document.getElementById('settings-panel'); - const inputPanel = document.getElementById('message'); +document.addEventListener("keypress", function (event) { + if (event.key === "Enter" && !event.shiftKey) { + const settingsPanel = document.getElementById("settings-panel"); + const inputPanel = document.getElementById("message"); if (settingsPanel.contains(event.target)) { setUsername(); } @@ -42,205 +49,250 @@ document.addEventListener('keypress', function(event) { } }); -document.addEventListener('input', function(event) { - const msg = document.getElementById('message'); - msg.style.height = 'auto'; - msg.style.height = (msg.scrollHeight) + 'px'; +document.addEventListener("input", function (event) { + const msg = document.getElementById("message"); + msg.style.height = "auto"; + msg.style.height = (msg.scrollHeight) + "px"; }); async function loadUsers() { try { - const response = await fetch('/users'); + const response = await fetch("/users"); const data = await response.json(); - const usersList = document.getElementById('users-list'); - usersList.innerHTML = ''; + const usersList = document.getElementById("users-list"); + usersList.innerHTML = ""; - data.users.sort().forEach(user => { - const userDiv = document.createElement('div'); - userDiv.className = 'user-item'; + data.users.sort().forEach((user) => { + const userDiv = document.createElement("div"); + userDiv.className = "user-item"; userDiv.textContent = user; usersList.appendChild(userDiv); }); } catch (error) { - console.error('Error loading users:', error); + console.error("Error loading users:", error); } } - let lastMessageCount = 0; async function loadMessages() { try { - const messagesDiv = document.getElementById('messages'); - const response = await fetch('/messages'); + const messagesDiv = document.getElementById("messages"); + const response = await fetch("/messages"); const text = await response.text(); - const tempDiv = document.createElement('div'); + const tempDiv = document.createElement("div"); tempDiv.innerHTML = text; if (messagesDiv.scrollTop != bottom) { // show a button to scroll to the bottom - const scrollToBottomButton = document.getElementById('scroll'); - scrollToBottomButton.style.display = 'block'; + const scrollToBottomButton = document.getElementById( + "scroll", + ); + scrollToBottomButton.style.display = "block"; scrollToBottomButton.onclick = scrollToBottom; } else { // hide the button - const scrollToBottomButton = document.getElementById('scroll'); - scrollToBottomButton.style.display = 'none'; + const scrollToBottomButton = document.getElementById( + "scroll", + ); + scrollToBottomButton.style.display = "none"; } - const messages = tempDiv.getElementsByTagName('p'); + const messages = tempDiv.getElementsByTagName("p"); const newMessageCount = messages.length; - if (newMessageCount > lastMessageCount || lastMessageCount === 0) { - messagesDiv.innerHTML = ''; - Array.from(messages).forEach(msg => { - const messageDiv = document.createElement('div'); - messageDiv.className = 'message'; - const [username, content] = msg.innerHTML.split('
'); - messageDiv.innerHTML = '
' + username + '
' + - '
' + content + '
'; + if ( + newMessageCount > lastMessageCount || + lastMessageCount === 0 + ) { + messagesDiv.innerHTML = ""; + Array.from(messages).forEach((msg) => { + const messageDiv = document.createElement( + "div", + ); + messageDiv.className = "message"; + const [username, content] = msg.innerHTML.split( + "
", + ); + messageDiv.innerHTML = + '
' + username + + "
" + + '
' + content + + "
"; messagesDiv.appendChild(messageDiv); }); scrollToBottom(); lastMessageCount = newMessageCount; } } catch (error) { - console.error('Error loading messages:', error); + console.error("Error loading messages:", error); } } var bottom = 0; function scrollToBottom() { - const messagesDiv = document.getElementById('messages'); + const messagesDiv = document.getElementById("messages"); messagesDiv.scrollTop = messagesDiv.scrollHeight; bottom = messagesDiv.scrollTop; } async function checkUsername() { try { - const response = await fetch('/username/status'); + const response = await fetch("/username/status"); const data = await response.json(); if (!data.hasUsername) { - document.getElementById('settings-panel').style.display = 'block' - const username = document.getElementById('username'); + document.getElementById("settings-panel").style + .display = "block"; + const username = document.getElementById("username"); username.focus(); - username.selectionStart = username.selectionEnd = username.value.length + username.selectionStart = + username.selectionEnd = + username.value.length; } } catch (error) { - console.error('Error checking username status:', error); + console.error("Error checking username status:", error); } } async function updateCurrentUser() { try { - const response = await fetch('/username/status'); + const response = await fetch("/username/status"); const data = await response.json(); - const userDiv = document.getElementById('current-user'); + const userDiv = document.getElementById("current-user"); if (data.hasUsername) { userDiv.textContent = data.username; } else { - userDiv.textContent = ''; + userDiv.textContent = ""; } } catch (error) { - console.error('Error getting username:', error); + console.error("Error getting username:", error); } } async function setUsername() { - const username = document.getElementById('username').value; + const username = document.getElementById("username").value; if (!username) { - showUsernameStatus('Please enter a username', 'red'); + showUsernameStatus("Please enter a username", "red"); return; } try { - const response = await fetch('/username', { - method: 'PUT', + const response = await fetch("/username", { + method: "PUT", headers: { - 'Content-Type': 'application/json' + "Content-Type": "application/json", }, - body: JSON.stringify({ username: username }) + body: JSON.stringify({ username: username }), }); const data = await response.json(); if (response.ok) { - showUsernameStatus('Username set successfully!', 'green'); + showUsernameStatus( + "Username set successfully!", + "green", + ); updateCurrentUser(); setTimeout(() => { - document.getElementById('settings-panel').style.display = 'none'; + document.getElementById("settings-panel").style + .display = "none"; }, 500); location.reload(); } else { - showUsernameStatus(data.error || 'Failed to set username', 'red'); + showUsernameStatus( + data.error || "Failed to set username", + "red", + ); } } catch (error) { - showUsernameStatus('Error connecting to server', 'red'); + showUsernameStatus("Error connecting to server", "red"); } } async function sendMessage() { - const messageInput = document.getElementById('message'); + const messageInput = document.getElementById("message"); const message = messageInput.value; if (!message) { return; } try { - const response = await fetch('/messages', { - method: 'PUT', + const response = await fetch("/messages", { + method: "PUT", headers: { - 'Content-Type': 'application/json' + "Content-Type": "application/json", }, - body: JSON.stringify({ message: message }) + body: JSON.stringify({ message: message }), }); const data = await response.json(); if (response.ok) { - messageInput.value = ''; - messageInput.style.height = 'auto'; + messageInput.value = ""; + messageInput.style.height = "auto"; loadMessages(); } else { - showStatus(data.error || 'Failed to send message', 'red'); + showStatus( + data.error || "Failed to send message", + "red", + ); } } catch (error) { - showStatus('Error connecting to server', 'red'); + showStatus("Error connecting to server", "red"); } } function showStatus(message, color) { - const status = document.getElementById('status'); + const status = document.getElementById("status"); status.textContent = message; status.style.color = color; setTimeout(() => { - status.textContent = ''; + status.textContent = ""; }, 3000); } function showUsernameStatus(message, color) { - const status = document.getElementById('username-status'); + const status = document.getElementById("username-status"); status.textContent = message; status.style.color = color; setTimeout(() => { - status.textContent = ''; + status.textContent = ""; }, 3000); } async function pingCheck() { try { - await fetch('/ping', {method: 'POST'}); + await fetch("/ping", { method: "POST" }); } catch (error) { - console.error('Ping failed:', error); + console.error("Ping failed:", error); + } +} + +async function timeZoneCheck() { + try { + const timeZone = + Intl.DateTimeFormat().resolvedOptions().timeZone; + const response = await fetch("/timezone", { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ timezone: timeZone }), + }); + + const data = await response.json(); + console.log(data); + } catch (error) { + console.error("Error checking timezone:", error); } } async function initialize() { await loadMessages(); - document.getElementById('users-panel').style.display = 'none'; - document.getElementById('settings-panel').style.display = 'none'; + document.getElementById("users-panel").style.display = "none"; + document.getElementById("settings-panel").style.display = "none"; checkUsername(); updateCurrentUser(); setInterval(loadMessages, 1000);