static/script.js

let myRoomId = prompt("Room ID:")


const DELAYTIME = 500
let DATA;

function createRoom(roomId=myRoomId, url="https://jacobinathanialpeterson-chatbox2.hf.space/createRoom") {
    const controller = new AbortController();
	const abortSignal = controller.signal;
	fetch(url, { 
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({roomIdInput: roomId}),
			signal: abortSignal
		})
		.then(response => { if (!response.ok) { throw new Error('Network response was not ok.') } return response.json() })
		.then(data => {
			controller.abort(); 
		})
		.catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted:', error.message) } else { console.error('Error fetching data:', error.message) }});

}

function postMessage(roomId=myRoomId, url="https://jacobinathanialpeterson-chatbox2.hf.space/postMessage") {
	const controller = new AbortController();
	const abortSignal = controller.signal;
	fetch(url, { 
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({nameInput: document.getElementById("nameInputBox").value, messageInput: document.getElementById("messageInputBox").value, roomIdInput: roomId}),
			signal: abortSignal
		})
		.then(response => { if (!response.ok) { throw new Error('Network response was not ok.') } return response.json() })
		.then(data => {
			controller.abort(); 
		})
		.catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted:', error.message) } else { console.error('Error fetching data:', error.message) }});
}

function getMessages(roomId=myRoomId, url="https://jacobinathanialpeterson-chatbox2.hf.space/messages") {
	const controller = new AbortController();
	const abortSignal = controller.signal;
	fetch(url, { 
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({roomIdInput: roomId}),
			signal: abortSignal
		})
		.then(response => { if (!response.ok) { throw new Error('Network response was not ok.') } return response.json() })
		.then(data => {
            if (!data.message) {
    			// Get the keys of the object
    			const keys = Object.keys(data);
    
    			// Sort the keys based on their natural order
    			keys.sort((a, b) => {
    			  // Extract numeric part of keys
    			  const numA = parseInt(a.match(/\d+/)[0]);
    			  const numB = parseInt(b.match(/\d+/)[0]);
    			  return numA - numB;
    			});
    
    			// Create a new object with sorted keys
    			DATA = {};
    			keys.forEach(key => {
    			  DATA[key] = data[key];
    			});
    
    			controller.abort(); 
            }
		})
		.catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted:', error.message) } else { console.error('Error fetching data:', error.message) }});
}















let atBottom = true;

function updateUI() {
  const messagesContainer = document.getElementById("messages");
  const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop === messagesContainer.clientHeight;
  
  let elementValue = '';
  if (DATA) {
    Object.entries(DATA).forEach(([key, value]) => {
      elementValue +=
        `<div class="msgc" id="${key}">
          <div class="nme">${value.name}: </div>
          <div class="msg">${value.message}</div>
        </div>`;
    });
  }
  messagesContainer.innerHTML = elementValue;

  if (atBottom || isAtBottom) {
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
  atBottom = isAtBottom;
}

setInterval(getMessages, 100);
setTimeout(() => {
  setInterval(updateUI, 100);
}, DELAYTIME);

document.getElementById("messages").addEventListener("scroll", () => {
  const messagesContainer = document.getElementById("messages");
  const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop === messagesContainer.clientHeight;
  atBottom = isAtBottom;
});

function handleKeyPress(event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    postMessage();
  }
}

document.getElementById("messageInputBox").addEventListener("keypress", handleKeyPress);