Added NotificationBell, Moved FriendRequest to Activity Center

vue/conf/src/components/Home.vue

@@ -44,10 +44,7 @@ const handleInviteClick = async () => {
 
 <template>
   <div class="home">
-    <!-- <RouterLink class="navButton" :class="'play-button'" to="/game">PLAY</RouterLink> -->
-    <button @click="handleInviteClick" class="send-game-invitation-button">
-      START A CUSTOM GAME
-    </button>
+    <button @click="handleInviteClick" class="dynamic-button">START A CUSTOM GAME</button>
   </div>
 </template>
 
@@ -86,7 +83,7 @@ const handleInviteClick = async () => {
   border: 1px solid #ea9f42;
   color: #ea9f42;
   transition: 0.3s;
-  padding: 0.55rem 0.5rem;
+  padding: 0.55rem 1rem;
   font-size: 1rem;
   text-transform: uppercase;
   cursor: pointer;

vue/conf/src/components/Login.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="login">
     <form @submit.prevent="submitForm" class="login-form">
-      <label for="username">Username:</label>
+      <label for="username" class="font-color">Username:</label>
       <input type="text" id="username" v-model="username" required />
-      <button type="submit" role="link">42 Login</button>
+      <button type="submit" role="link" class="dynamic-button">42 Login</button>
     </form>
   </div>
 </template>
@@ -78,7 +78,7 @@ const submitForm = async () => {
   height: 300px;
   position: absolute;
   top: 50%;
-  left: 50%;
+  left: 60%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
   -moz-transform: translateX(-50%) translateY(-50%);
@@ -96,19 +96,59 @@ const submitForm = async () => {
   outline: solid 2px #ea9f42;
 }
 
-.login button {
-  text-align: center;
-  border: 0.1rem solid #e6edf3;
-  color: #e6edf3;
-  font-size: 1.75rem;
+.font-color {
+  color: #ea9f42;
+}
+
+@keyframes entranceAnimation {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dynamic-button {
+  animation: entranceAnimation 0.5s forwards;
   background-color: transparent;
-  padding: 0.25rem 2rem;
+  border: 1px solid #ea9f42;
+  color: #ea9f42;
+  font-size: 1rem;
+  padding: 0.5rem 1.5rem;
+  transition: all 0.3s ease;
   cursor: pointer;
-  transition: 0.15s ease-in-out;
+  position: relative;
+  overflow: hidden;
 }
 
-.login button:hover {
-  color: aliceblue;
+.dynamic-button:hover {
   background-color: #ea9f42;
+  color: white;
+}
+
+.dynamic-button:active {
+  transform: scale(0.95);
+  background-color: #d97c30;
+}
+
+.dynamic-button:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+  background: linear-gradient(45deg, #ea9f42, transparent, #ea9f42);
+  transform: skewX(-20deg) scaleX(0);
+  transform-origin: right;
+  transition: transform 0.5s ease;
+}
+
+.dynamic-button:hover:before {
+  transform: skewX(-20deg) scaleX(1);
 }
 </style>

vue/conf/src/components/activity/FriendRequests.vue

@@ -1,8 +1,18 @@
 <template>
   <div class="friend-requests">
     <ScrollViewer :maxHeight="'75vh'" :paddingRight="'.5rem'">
-      <div v-for="(user, index) in dummyUserData" :key="index">
-        <FriendRequestsItem :username="user.username" />
+      <div v-if="friendRequests && friendRequests.length">
+        <div v-for="request in friendRequests" :key="request.id">
+          <FriendRequestsItem
+            v-if="isValidRequest(request)"
+            :username="request.friend.username"
+            :requestId="request.id"
+            @remove-friend-request="handleRemoveFriendRequest"
+          />
+        </div>
+      </div>
+      <div v-else>
+        <p class="empty-list-info">No Pending Friend Requests</p>
       </div>
     </ScrollViewer>
   </div>
@@ -15,6 +25,10 @@ import FriendRequestsItem from './FriendRequestsItem.vue'
 import ScrollViewer from '../utils/ScrollViewer.vue'
 import { useUserStore } from '../../stores/userInfo'
 import { useNotificationStore } from '../../stores/notification'
+import { useFriendRequestStore } from '../../stores/friendRequests'
+
+const friendRequestStore = useFriendRequestStore()
+const friendRequests = computed(() => friendRequestStore.friendRequests)
 
 const notificationStore = useNotificationStore()
 const userStore = useUserStore()
@@ -23,17 +37,21 @@ const props = defineProps({
   channelId: Number
 })
 
-type User = {
-  username: string
+const isValidRequest = (request: any) => {
+  return request && request.friend && request.friend.username
 }
 
-const dummyUserData: User[] = Array.from({ length: 7 }, (_, i) => ({
-  username: `Thomas ${i + 1}`
-}))
+const handleRemoveFriendRequest = (requestId: number) => {
+  friendRequestStore.removeFriendRequestById(requestId)
+}
 </script>
 
 <style>
 .friend-requests {
   padding: 1.5rem 0 0 0;
 }
+
+.empty-list-info {
+  color: lightgray;
+}
 </style>

vue/conf/src/components/activity/FriendRequestsItem.vue

@@ -5,10 +5,10 @@
       <p class="friend-username">{{ username }}</p>
     </div>
     <div class="request-actions">
-      <button class="icon-button-accept" @click="acceptRequest" title="Accept">
+      <button class="icon-button-accept" @click="acceptFriendRequest" title="Accept">
         <font-awesome-icon :icon="['fas', 'check']" />
       </button>
-      <button class="icon-button-reject" @click="rejectRequest" title="Reject">
+      <button class="icon-button-reject" @click="rejectFriendRequest" title="Reject">
         <font-awesome-icon :icon="['fas', 'times']" />
       </button>
       <button class="icon-button-view-profile" @click="viewProfile" title="View Profile">
@@ -22,30 +22,71 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
+import { Socket } from 'socket.io-client'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { useNotificationStore } from '../../stores/notification'
+import { connectWebSocket } from '../../websocket'
+import type { FriendshipI } from '../../model/friendship/friendship.interface'
+import type { ErrorI } from '../../model/error.interface'
 
 library.add(fas)
 const router = useRouter()
 const notificationStore = useNotificationStore()
+const socket = ref<Socket | null>(null)
+
+const emit = defineEmits(['remove-friend-request'])
 
 const props = defineProps({
-  username: String
+  username: String,
+  requestId: Number
 })
 
 const viewProfile = () => {
   router.push(`/profile/${props.username}`)
 }
 
-const acceptRequest = () => {
-  notificationStore.showNotification(`You accepted ${props.username}'s friend request`, true)
+const initSocket = () => {
+  const accessToken = localStorage.getItem('ponggame') ?? ''
+  socket.value = connectWebSocket('http://localhost:3000', accessToken)
+}
+
+onMounted(() => {
+  initSocket()
+})
+
+const acceptFriendRequest = () => {
+  if (!socket || !socket.value) {
+    notificationStore.showNotification(`Error: Connection problems`, false)
+    return
+  }
+
+  socket.value.emit('acceptFriendRequest', props.requestId, (response: FriendshipI | ErrorI) => {
+    if ('error' in response) {
+      notificationStore.showNotification(response.error, false)
+    } else {
+      notificationStore.showNotification(`You accepted ${props.username}'s friend request`, true)
+      emit('remove-friend-request', props.requestId)
+    }
+  })
 }
 
-const rejectRequest = () => {
-  notificationStore.showNotification(`You rejected ${props.username}'s friend request`, true)
+const rejectFriendRequest = () => {
+  if (!socket || !socket.value) {
+    notificationStore.showNotification(`Error: Connection problems`, false)
+    return
+  }
+  socket.value.emit('rejectFriendRequest', props.requestId, (response: FriendshipI | ErrorI) => {
+    if ('error' in response) {
+      notificationStore.showNotification(response.error, false)
+    } else {
+      notificationStore.showNotification(`You rejected ${props.username}'s friend request`, true)
+      emit('remove-friend-request', props.requestId)
+    }
+  })
 }
 
 const blockUser = () => {

vue/conf/src/components/channels/ChannelListItem.vue

@@ -45,16 +45,16 @@ const handleJoin = () => {
   if (props.isPasswordProtected && password.value === '') {
     showPasswordField.value = true
   } else {
-    console.log(
-      'password: ' +
-        password.value +
-        ', channel name: ' +
-        props.channelName +
-        ', owner: ' +
-        props.ownerName +
-        ', channelId: ' +
-        props.channelId
-    )
+    // console.log(
+    //   'password: ' +
+    //     password.value +
+    //     ', channel name: ' +
+    //     props.channelName +
+    //     ', owner: ' +
+    //     props.ownerName +
+    //     ', channelId: ' +
+    //     props.channelId
+    // )
     emit('channel-entered', props.channelId)
   }
 }

vue/conf/src/components/chat/FriendMessages.vue

@@ -49,7 +49,6 @@ const setNewDirectMessageListener = () => {
     return
   }
   socket.value.on('newDirectMessage', (newMessageData: directMessageI) => {
-    console.log('newDirectMessage listener fired')
     setDirectMessages()
   })
 }
@@ -131,8 +130,6 @@ const sendMessage = () => {
     return
   }
 
-  console.log(loggedUser.value.id + ' ' + selectedUser.id + ' ' + newMessage.value)
-
   socket.value.emit('sendDirectMessage', {
     senderId: loggedUser.value.id,
     receiverId: selectedUser.id,