diff --git a/.DS_Store b/.DS_Store index 818aebb..8aff74e 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/chatmate-app.xd b/chatmate-app.xd new file mode 100644 index 0000000..8318228 Binary files /dev/null and b/chatmate-app.xd differ diff --git a/css/profile.css b/css/profile.css index 0bc6fc5..51ae75f 100644 --- a/css/profile.css +++ b/css/profile.css @@ -5,7 +5,8 @@ body{ header{ background-color: #3e2fae; - min-height: 40vh + min-height: 50vh; + width: 100vw; } header a img{ display: block; diff --git a/imgs/.DS_Store b/imgs/.DS_Store index 7ac7d5d..2496990 100644 Binary files a/imgs/.DS_Store and b/imgs/.DS_Store differ diff --git a/imgs/hamburger.svg b/imgs/hamburger.svg new file mode 100644 index 0000000..643270d --- /dev/null +++ b/imgs/hamburger.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/imgs/icon-transparent.png b/imgs/icon-transparent.png new file mode 100644 index 0000000..40f2f99 Binary files /dev/null and b/imgs/icon-transparent.png differ diff --git a/index.html b/index.html old mode 100644 new mode 100755 index ab24ddc..f02c6bb --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
Menu Icon

-

Welcome to Chatmate!  

+

DMD3440 Chat Room

Profile Icon
diff --git a/main.css b/main.css old mode 100644 new mode 100755 index 1b39dd3..c0e315d --- a/main.css +++ b/main.css @@ -29,13 +29,32 @@ header{ } -#chatBox p{ +/* #chatBox p{ display: inline-block; background-color: #f9d861; padding: 7px 10px; border-radius: 10px; +} */ + +#chatBox p.user-message { + display: inline-block; + padding: 7px 10px; + background-color:#3e2fae; + color: white; + border-radius: 10px 0px 10px 10px; + float: right; + } + +#chatBox p.other-message { + display: inline-block; + padding: 7px 10px; + background-color:#f9d861; + border-radius: 0px 10px 10px 10px; } +#chatBox h4.user-name{ + text-align: right; +} #chatInput { position:fixed; @@ -54,9 +73,10 @@ header{ #chatInput input { width:100%; text-indent: 10px; - background-color: #eee; + background-color: #ffffff; border-radius: 15px; - border:2px solid #3e2fae; + border:2px solid #3e2fae; + font-family: 'Josefin Sans', sans-serif; margin-right: 10px; } @@ -96,4 +116,9 @@ h4{ } .info{ text-align: center; +} + +.time-date{ + font-size: 0.7em; + color: #707070; } \ No newline at end of file diff --git a/main.js b/main.js old mode 100644 new mode 100755 index 3132ee5..4ee03db --- a/main.js +++ b/main.js @@ -1,123 +1,150 @@ // 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('sw.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.'); - } + console.log('CLIENT: service worker registration in progress.'); + navigator.serviceWorker.register('sw.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.'); +} + +let alllMessages = []; +let chatBox = document.querySelector("#chatBox"); +let newMsgInput = document.querySelector("#newMsg"); +let userName = localStorage.getItem('userName') || "Yucheng"; +let userStatus = localStorage.getItem('userStatus') || "update your profile to display a status"; +let userProfilePic = localStorage.getItem('userProfilePic'); +let usernameDisplay = document.querySelector("#usernameDisplay"); +let userStatusDisplay = document.querySelector("#userStatusDisplay"); +let userProfilePicDisplay = document.querySelector("#userProfilePicDisplay"); +let sendButton = document.querySelector("#sendBtn"); +let notifSound = 'notification.mp3'; +let notifSoundElement = new Audio(notifSound); + - let alllMessages = []; - let chatBox = document.querySelector("#chatBox"); - let newMsgInput = document.querySelector("#newMsg"); - let userName = localStorage.getItem('userName') || "Yucheng"; - let userStatus = localStorage.getItem('userStatus') || "update your profile to display a status"; - let userProfilePic = localStorage.getItem('userProfilePic'); - let notifSound = 'notification.mp3'; - let notifSoundElement = new Audio(notifSound); - let usernameDisplay = document.querySelector("#usernameDisplay"); - let userStatusDisplay = document.querySelector("#userStatusDisplay"); - let userProfilePicDisplay = document.querySelector("#userProfilePicDisplay"); - let sendButton = document.querySelector("#sendBtn") - - - usernameDisplay.innerHTML = userName; - userStatusDisplay.innerHTML = userStatus; - userProfilePicDisplay.src = userProfilePic; +usernameDisplay.innerHTML = userName; +userStatusDisplay.innerHTML = userStatus; +userProfilePicDisplay.src = userProfilePic; + +function clearChatInput() { + document.querySelector("#newMsg").value = ""; + document.querySelector("#newMsg").focus(); +} + +let curr_date = new Date(); +let month = curr_date.getMonth() + 1; +let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString(); + +let curr_time = new Date(); +let time_str = curr_time.getHours().toString() + ":" + curr_time.getMinutes().toString(); + + +//display message +function displayNewMessage(msg) { + var newMsgUsername = document.createElement('h4'); + var newMsgP = document.createElement("p"); - function clearChatInput() { - document.querySelector("#newMsg").value = ""; - document.querySelector("#newMsg").focus(); + // user's message on the right while others' message on the left + if(msg.sentBy == localStorage.userName){ + newMsgUsername.classList.add("user-name"); + newMsgP.classList.add("user-message"); + }else{ + newMsgUsername.classList.add("other-name"); + newMsgP.classList.add("other-message"); } - let curr_date = new Date(); - let month = curr_date.getMonth() + 1; - let date_str = month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString(); + - function displayNewMessage(msg) { - var newMsgUsername = document.createElement('h4'); - var newMsgP = document.createElement("p"); - newMsgUsername.innerHTML = msg.date_str + " " + msg.sentBy + " "; - newMsgP.innerHTML = msg.message; - chatBox.appendChild(newMsgUsername); - chatBox.appendChild(newMsgP); - - window.navigator.vibrate(200); - notifSoundElement.play(); + newMsgUsername.innerHTML ="" + msg.sentBy + "" + "
" + "" + msg.time_str + ""+ " " + "" + msg.date_str + ""; + newMsgP.innerHTML = msg.message; + chatBox.appendChild(newMsgUsername); + chatBox.appendChild(newMsgP); + + window.navigator.vibrate(200); - chatBox.scrollTop = chatBox.scrollHeight; + notifSoundElement.play(); - clearChatInput(); - } + chatBox.scrollTop = chatBox.scrollHeight; - function makeNewMessageFromLocalUser() { - let usrMsg = { - sentBy: userName, - date_str: month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString(), - //dateStamp: Date.now(), - message: newMsgInput.value - } + clearChatInput(); +} - if(usrMsg.message !== "") { - //allMessages.push(usrMsg); - // end make message - displayNewMessage(usrMsg); - saveMessageToFirebase(usrMsg); - } - } - watchFirebaseForChanges( + +watchFirebaseForChanges( function(msg){ - displayNewMessage(msg.data()) + displayMessage(msg.data()) } ); - /** All the triggers and event listener assignments down here... */ - // assign the "Make New Message" function to the button click - document.querySelector("#sendBtn").addEventListener('click', function(){ - makeNewMessageFromLocalUser() - }); - // since we're not using a real form, assign it to the "keyup return" of the message input too - document.querySelector("#newMsg").addEventListener('keyup', function(e) { - if (e.keyCode === 13) { - makeNewMessageFromLocalUser(); - } - }); - // when username input is changed, update localstorage and global variable - // usernameDisplay.addEventListener('blur', function() { - // var oldUsername = localStorage.getItem("userName"); - // var newUsername = this.innerHTML; +function makeNewMessageFromLocalUser() { + let usrMsg = { + sentBy: userName, + date_str: month.toString() + "/" + curr_date.getDate().toString() + "/" + curr_date.getFullYear().toString(), + //dateStamp: Date.now(), + message: newMsgInput.value + } - // var alertNew = { - // sentBy: "system", - // dateStamp: Date.now(), - // message: `${oldUsername} has changed their name to ${newUsername}` - // } + if(usrMsg.message !== "") { + //allMessages.push(usrMsg); + // end make message + displayNewMessage(usrMsg); + saveMessageToFirebase(usrMsg); + } +} +watchFirebaseForChanges( + function(msg){ + displayNewMessage(msg.data()) + } +); +/** All the triggers and event listener assignments down here... */ - // displayNewMessage(alertNew); +// assign the "Make New Message" function to the button click +document.querySelector("#sendBtn").addEventListener('click', function(){ + makeNewMessageFromLocalUser() +}); +// since we're not using a real form, assign it to the "keyup return" of the message input too - // localStorage.setItem("userName", newUsername); - // userName = localStorage.getItem("userName"); - // }); +document.querySelector("#newMsg").addEventListener('keyup', function(e) { + if (e.keyCode === 13) { + makeNewMessageFromLocalUser(); + } +}); - sendButton.addEventListener("click", function () { - var msgObj = { - dateStamp:Date.now(), - message: inputBox.value, - sentBy: username - } +// when username input is changed, update localstorage and global variable +// usernameDisplay.addEventListener('blur', function() { +// var oldUsername = localStorage.getItem("userName"); +// var newUsername = this.innerHTML; - saveMessageToFirebase(msgObj); +// var alertNew = { +// sentBy: "system", +// dateStamp: Date.now(), +// message: `${oldUsername} has changed their name to ${newUsername}` +// } - inputBox.value = ""; - inputBox.focus(); -}); +// displayNewMessage(alertNew); + + +// localStorage.setItem("userName", newUsername); +// userName = localStorage.getItem("userName"); +// }); + +sendButton.addEventListener("click", function () { + var msgObj = { + dateStamp:Date.now(), + message: inputBox.value, + sentBy: username + } + + saveMessageToFirebase(msgObj); + inputBox.value = ""; + inputBox.focus(); +}); \ No newline at end of file