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 @@
-
Welcome to Chatmate!  
+ DMD3440 Chat Room
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