main.js

let allMessages = [];
let chatBox = document.querySelector("#chatbox");
let inputBox = document.querySelector('#newmsg');
var pictureEndpoint= document.querySelector("#profilePic");

pictureEndpoint.setAttribute("src",localStorage.userProfilePic)

function makeMessage(msg) {
//console.log(message.sentBy);


  var stagedMessage = document.createElement("div");

  if(msg.sentBy == localStorage.userName){
    stagedMessage.setAttribute('class', 'Me');
  }

  //stagedMessage.setAttribute("class",message.sentBy);

  var inLineContainer = document.createElement("span");
  var name = document.createElement("h2");
  var timeStamp = document.createElement("h4");
  var message = document.createElement("p"); 

  //inLineContainer.setAttribute("class", "Other");

  
  
  name.innerHTML=msg.sentBy;
  let curr_date=new Date(msg.dateStamp);
  let month = curr_date.getMonth() + 1;   
  let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString();
  timeStamp.innerHTML=date_str;
  message.innerHTML=msg.message;

  inLineContainer.appendChild(name);
  inLineContainer.appendChild(timeStamp);

  stagedMessage.appendChild(inLineContainer);
  stagedMessage.appendChild(message);

  chatBox.appendChild(stagedMessage);
  stagedMessage.scrollIntoView();


  //end make message

  //display message
  //end display message



  //console.log(allMessages);
}

document.querySelector("#sendBtn").addEventListener('click', () => {

  let msg = document.querySelector("#newmsg").value;

    

    let src = "when.mp3"
    let audio = new Audio(src);
    audio.play();
    window.navigator.vibrate(200);

  document.querySelector("#newmsg").value = "";
  document.querySelector("#newmsg").focus();

  let newMessage = {
    sentBy: localStorage.userName,
    dateStamp: Date.now(),
    message: msg
  }
  console.log(newMessage);

  if (localStorage.userName != undefined) {
    saveMessageToFirebase(newMessage);
  } else {
    alert("Set a Username Dummy");
  }
 

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

});

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


// Register a service worker, this one located in serviceworker.js
// A service worker is a piece of code the browser runs behind the scenes.
if ('serviceWorker' in navigator) {
    console.log('CLIENT: service worker registration in progress.');
    navigator.serviceWorker.register('serviceworker.js').then(function() {
      console.log('CLIENT: service worker registration complete.');
    }, function() {
      console.log('CLIENT: service worker registration failure.');
    });
  } else {
    console.log('CLIENT: service workers are not supported.');
  }
// ADD TO HOME SCREEN STUFF BELOW:
// get ready for the "add to home screen" prompt
var deferredPrompt;
// this is an event that is fired by the browser when it's about to prompt for PWA install
window.addEventListener('beforeinstallprompt', function (e) {
    console.log("Boudda show an install prompt.");
  // Stash the event so it can be triggered later.
  deferredPrompt = e;
  showAddToHomeScreen();
});
function showAddToHomeScreen() {
    var a2hsBtn = document.querySelector(".ad2hs-prompt");
    a2hsBtn.style.display = "block";
    a2hsBtn.addEventListener("click", addToHomeScreen);
}
// this is the function that is called when someone actually clicks the button
function addToHomeScreen() {
  var a2hsBtn = document.querySelector(".ad2hs-prompt");
  // hide our user interface that shows our A2HS button
  a2hsBtn.style.display = 'none';
  // Show the prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice
    .then(function(choiceResult){
      if (choiceResult.outcome === 'accepted') {
        console.log('User accepted the A2HS prompt');
      } else {
        console.log('User dismissed the A2HS prompt');
      }
      deferredPrompt = null;
    });
}