main.js

var initialMessages = getAllMessagesFromFirebase();

var chatBox = document.querySelector("#chatLog");
var inputBox = document.querySelector("#msgText");
var sendButton = document.querySelector("#sendButton");
var sidenav = document.querySelector("#sidenav");
let notifSound = 'HSp4.mp3';
let notifSoundElement = new Audio(notifSound);

var userName = localStorage.getItem('profName');
var usnColor = localStorage.getItem('profNameColor');
var userPic = localStorage.getItem('userProfilePic');
var userStatus = localStorage.getItem('profStatus');

sidebarPFP = document.querySelector("#sidebarPFP");
sidebarName = document.querySelector("#sidebarName");
sidebarStatus = document.querySelector("#sidebarStatus");

let navOpen = false;
let noNotifSound = true;
setTimeout(function() {
	noNotifSound = false;
}, 1000);




if (userPic == null) {
	sidebarPFP.src = "chateau-logo.png"
}
else {
	sidebarPFP.src = userPic;
};

if (userName == null) {
	sidebarName.innerHTML = "Set a username in settings!";
	}
	else {
	sidebarName.innerHTML = userName;
}

if (userStatus == null) {
	sidebarStatus.innerHTML = "Set a custom status in settings!";
	}
	else {
	sidebarStatus.innerHTML = userStatus;
}


function displayMessage(message) {
	var messageParagraph = document.createElement("div");
	/*circumvents everyone's apps that don't have custom color (i.e. everyone else's)
	and replaces it with the placeholder black */
	if (!message.hasOwnProperty('nameColor')) {
		message.nameColor = "#000000";
	}
	if (message.sentBy == null || message.sentBy == "") {
		message.sentBy = "[No Username]";
	}
	let actualTimestamp = new Date(message.dateStamp);
    let month = actualTimestamp.getMonth() + 1;
    let t = new Date();
    if (actualTimestamp.getFullYear() == t.getFullYear()) {
    	var yearOrNot = "";
    } else {
    	var yearOrNot = "/" + actualTimestamp.getFullYear().toString();
    }
	//this is a var bc it was originally part of an if/else statement before I learned padStart existed    
    	var minsWithZero = actualTimestamp.getMinutes().toString().padStart(2, '0');
    
    let shortTimestamp = "<mark class=\"timestamp\">" + month.toString() + "/" + actualTimestamp.getDate().toString().padStart(2, '0') + yearOrNot + " at " + actualTimestamp.getHours().toString() + ":" + minsWithZero + "</mark>";
	//catches faulty timestamps
	if (shortTimestamp.includes("NaN")) {
		shortTimestamp = "<mark class=\"timestamp\">[Error: Timestamp Unknown]</mark>";
	}
	messageParagraph.innerHTML = "<img class=\"msgPic msgInfo\" src=\"chateau-logo.png\"><span class=\"msgInfo\"><mark class=\"msgData\"><mark class=\"username\" style=\"color:" + message.nameColor + "\">" + message.sentBy + "</mark> " + shortTimestamp + "</mark> <br>" + message.message; + "</span>"
	if (!noNotifSound) {
		notifSoundElement.play();
	}

	chatBox.appendChild(messageParagraph);
	goToBottom();
}



function toggleNav() {
	if (!navOpen) {
		navOpen = true;
		sidenav.style.width = "70vw";
		sidenav.classList.remove("hideContent");
		/*document.getElementById("main").style.marginLeft = "70vw";*/
		document.querySelector(".menuButton").style.marginLeft = "70vw";
		document.querySelector('.menuButton').src = "x-button.png";
		document.querySelector('#header').classList.add("noLogo");
		inputBox.disabled = true;
	} else {
		navOpen = false;
		sidenav.style.width = "0px";
		sidenav.classList.add("hideContent");
		/*document.getElementById("main").style.marginLeft = "0px";
		chatBox.style.marginLeft = "0px";*/
		document.querySelector(".menuButton").style.marginLeft = "0px";
		document.querySelector('.menuButton').src = "hamburger.png";
		document.querySelector('#header').classList.remove("noLogo");
		inputBox.disabled = false;
	}
}

// chatBox.addEventListener("dblclick", function)


function goToBottom() {
	chatBox.scrollTop = chatBox.scrollHeight;
}

function clearChatInput() {
    document.querySelector("#newMsg").value = "";
    document.querySelector("#newMsg").focus();
  }

  function displayNewMessage(message) {
    var newMsgP = document.createElement("p");
    newMsgP.innerHTML = "<strong>" + message.sentBy + "</strong>: " + message.message;
    chatBox.appendChild(newMsgP);
    
    goToBottom();
    clearChatInput();

  }



watchFirebaseForChanges(
	function(msg){
		displayMessage(msg.data())
	}
);

document.querySelector('.menuButton').addEventListener("click", toggleNav);

sendButton.addEventListener("click", function () {
	if (!navOpen) {
		var msgObj = {
			dateStamp:Date.now(),
			message: inputBox.value,
			sentBy: userName,
			nameColor: usnColor
		}

		if(msgObj.message !== "") {
			saveMessageToFirebase(msgObj);
		}

		inputBox.value = "";
		inputBox.focus();
	}
	
});


/*function closeNav() {
	navOpen = false;
	sidenav.style.width = "0px";
	sidenav.classList.add("hideContent");
	// document.getElementById("main").style.marginLeft = "0px";
	// chatBox.style.marginLeft = "0px";
	document.querySelector('.menuButton').src = "img/hamburger.png";
	document.querySelector('#header').classList.remove("noLogo");
}

function toggleNav() {
	if (!navOpen) {
		navOpen = true;
		sidenav.style.width = "70vw";
		sidenav.classList.remove("hideContent");
		// document.getElementById("main").style.marginLeft = "70vw";
		document.getElementById("main").style.marginLeft = "70vw";
		document.querySelector('.menuButton').src = "img/x-button.png";
		document.querySelector('#header').classList.add("noLogo");
	} else {
		closeNav();
	}
}

chatBox.addEventListener("dblclick", function() {
	if (!navOpen) {
		closeNav();
	}
})
*/