Displayname

src/Firebase.js

@@ -39,6 +39,7 @@ async function loginWithGoogle() {
                     const newUserRef = collection(db, "userInfo");
                     await setDoc(doc(newUserRef, uid_str), {
                         "uid": uid_str,
+                        "name": user.displayName,
                         "coins": 0,
                         "rooms": ["Gray"],
                         "decorations": []
@@ -56,6 +57,8 @@ async function loginWithGoogle() {
                             // @ts-ignore
                             uid: doc.data().uid,
                             // @ts-ignore
+                            name: doc.data().name, // Add the user's name to the UserInfoStore
+                            // @ts-ignore
                             coins: doc.data().coins,
                             // @ts-ignore
                             rooms: doc.data().rooms,
@@ -168,10 +171,23 @@ async function buyRoom(room, price) {
     }
 }
 
-export {
-    loginWithGoogle,
-    logoutFromGoogle,
-    addActivity,
-    getActivities,
-    buyRoom
-}
+
+export const getGoogleUserDisplayName = () => {
+    const user = auth.currentUser;
+    if (user && user.providerData && user.providerData.length > 0) {
+      const providerData = user.providerData[0];
+      if (providerData.providerId === "google.com") {
+        return providerData.displayName;
+      }
+    }
+    return null;
+  };
+
+	export {
+		loginWithGoogle,
+		logoutFromGoogle,
+		addActivity,
+		getActivities,
+		buyRoom, 
+        auth
+	};

src/routes/Homepage.svelte

@@ -3,10 +3,12 @@
     import SessionStore from '../SessionStore';
     import InSession from './components/InSession.svelte';
     import ModalManager from './ModalManager.svelte';
-    import { logoutFromGoogle } from '../Firebase';
+    import { logoutFromGoogle, getGoogleUserDisplayName } from '../Firebase';
     import UserInfoStore from '../UserInfoStore';
     import { onMount } from 'svelte';
 
+
+
     /**
 	 * @type {string}
 	 */
@@ -45,6 +47,7 @@
             sessionActivity: ""
         });
     };
+    const displayName = getGoogleUserDisplayName();
 
     const logout = () => {
         SessionStore.set({
@@ -78,6 +81,17 @@
             }
         }
     }
+
+    const profileModal = () => {
+        SessionStore.set({
+            inSession: $SessionStore.inSession,
+            sessionLength: $SessionStore.sessionLength,
+            modalType: "profile",
+            counter: $SessionStore.counter+1,
+            sessionActivity: $SessionStore.sessionActivity
+        });
+    };
+
 </script>
 
 <style>
@@ -169,13 +183,14 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<img src="logout.png" alt="logout" class="logout_button" on:click={logout}>
+<img src="logout.png" alt="logout" class="logout_button" on:click={logout}> 
 {#if $SessionStore.inSession}
     <InSession/>
 {:else}
     <div class="buffer"></div>
     <div class="big">
         <div class="left-side">
+
             <button id='studyhouseStartButton' on:click={startSessionModal} class="button" disabled>Turn On The StudyHouse Extension</button>
             <br>
             <button id='seePreviousActivities' on:click={seeActivitiesModal} class="button">See Previous Activities</button>
@@ -199,7 +214,8 @@
                 <img src="coin-icon.png" alt="coin-icon" class="coin-icon"> 
                 <div class="coin-value">{ $UserInfoStore.coins }</div>
             </div>
-
+            <button id='profileButton' on:click={profileModal} class="button">Profile</button>
+            <br>
             <button class="button" on:click={customizationModal}>Customize Study House</button>
         </div>
     </div>

src/routes/ModalManager.svelte

@@ -6,6 +6,8 @@
     import CustomizationModal from './components/CustomizationModal.svelte';
     import { writable } from 'svelte/store';
     import Modal from 'svelte-simple-modal';
+    import ProfileModal from './components/ProfileModal.svelte';
+
 
     const modal = writable(null);
     let currModal = "";
@@ -32,6 +34,11 @@
                 // @ts-ignore
                 modal.set(CustomizationModal);
             }
+            if ($SessionStore.modalType == "profile") {
+                // @ts-ignore
+                modal.set(ProfileModal);
+            }
+
             currModal = $SessionStore.modalType;
             counter = $SessionStore.counter;
         }

src/routes/components/ProfileModal.svelte

@@ -0,0 +1,48 @@
+<script>
+    import SessionStore from '../../SessionStore';
+    import { onMount } from 'svelte';
+    import { logoutFromGoogle, auth } from "../../Firebase";
+    import { writable } from 'svelte/store';
+
+    const displayName = writable('');
+    const email = writable('');
+
+    onMount(() => {
+      auth.onAuthStateChanged((user) => {
+        if (user) {
+          const name = user.displayName || '';
+          const userEmail = user.email || '';
+          displayName.set(name);
+          email.set(userEmail);
+        }
+      });
+    });
+    const logout = () => {
+        SessionStore.set({
+            inSession: false,
+            sessionLength: 0,
+            modalType: "",
+            counter: $SessionStore.counter+1,
+            sessionActivity: ""
+        });
+        logoutFromGoogle();
+    };
+
+    export { displayName, email };
+  </script>
+
+  <style>
+    .logout_button {
+        cursor: pointer;
+        width: 4rem;
+        display: -webkit-box;
+        margin-left: auto;
+    }
+  </style>
+
+  <div class="modal-content">
+    <h1>Welcome, {$displayName || "Guest"}!</h1>
+    <p>Your email address is {$email}</p>
+    <img src="logout.png" alt="logout" class="logout_button" on:click={logout} on:keydown={(e) => {if (e.key === 'Enter') logout();}}> 
+  </div>
+