diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts index 4b8bd2f..61eee91 100644 --- a/frontend/src/pages/chat/chat.ts +++ b/frontend/src/pages/chat/chat.ts @@ -22,6 +22,18 @@ export type ClientMessage = { }; +export type ClientProfil = { + command: string, + destination: string, + type: string, + user: string, + loginName: string, + userID: string, + text: string, + timestamp: number, + SenderWindowID:string, +}; + // get the name of the machine used to connect const machineHostName = window.location.hostname; console.log('connect to login at %chttps://' + machineHostName + ':8888/app/login',color.yellow); @@ -68,14 +80,28 @@ function isLoggedIn() { return getUser() || null; }; -function actionBtnPopUp() { +function inviteToPlayPong(profil: ClientProfil, senderSocket: Socket) { + + + +}; + + + +function actionBtnPopUp(profil: ClientProfil, senderSocket: Socket) { setTimeout(() => { const clearTextBtn = document.querySelector("#popup-b-clear"); clearTextBtn?.addEventListener("click", () => { clearText(); }); + const InvitePongBtn = document.querySelector("#popup-b-invite"); + InvitePongBtn?.addEventListener("click", () => { + inviteToPlayPong(profil, senderSocket); + }); + + }, 0) -} +}; // getProfil get the profil of user function getProfil(socket: Socket, user: string) { @@ -192,14 +218,6 @@ async function listBuddies(socket: Socket, buddies: HTMLDivElement, listBuddies: buddiesElement.addEventListener("dblclick", () => { console.log("Open profile:", listBuddies); getProfil(socket, listBuddies); - // openProfilePopup(`${profile}`); - // setTimeout(() => { - // const clearTextBtn = document.querySelector("#popup-b-clear"); - // clearTextBtn?.addEventListener("click", () => { - // clearText(); - // }); - // }, 0) - // actionBtnPopUp(); }); buddies.appendChild(buddiesElement); @@ -326,12 +344,23 @@ async function whoami(socket: Socket) { } }; -async function openProfilePopup(profil: string) { +async function openProfilePopup(profil: ClientProfil) { const modalname = document.getElementById("modal-name") ?? null; if (modalname) - modalname.innerHTML = `${profil}`; + modalname.innerHTML = ` +
+ Profil of ${profil.user}
+ Login Name: '${profil.loginName ?? 'Guest'}' +
+ Login ID: '${profil.userID ?? ''}' +
+ + +
About: '${profil.text}'
+ + `; const profilList = document.getElementById("profile-modal") ?? null; if (profilList) profilList.classList.remove("hidden"); @@ -416,9 +445,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn console.log("Getuser():", getUser()); }); - socket.on('profilMessage', (profil) => { + socket.on('profilMessage', (profil: ClientProfil) => { openProfilePopup(profil); - actionBtnPopUp(); + actionBtnPopUp(profil, socket); }); @@ -535,21 +564,6 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn break; case '@profil': getProfil(socket, msgCommand[1]); - // Ensure we have a user AND socket is connected - // if (!socket.connected) return; - // const profil = { - // command: msgCommand[0], - // destination: 'profil', - // type: "chat", - // user: msgCommand[1], - // token: document.cookie ?? "", - // text: msgCommand[1], - // timestamp: Date.now(), - // SenderWindowID: socket.id, - // }; - // //socket.emit('MsgObjectServer', message); - // addMessage(JSON.stringify(profil)); - // socket.emit('profilMessage', JSON.stringify(profil)); break; case '@cls': chatWindow.innerHTML = ''; diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts index b980883..4c877a8 100644 --- a/src/chat/src/app.ts +++ b/src/chat/src/app.ts @@ -42,6 +42,19 @@ export type ClientMessage = { SenderWindowID: string; }; + +export type ClientProfil = { + command?: string, + destination?: string, + type?: string, + user?: string, + loginName?: string, + userID?: string, + text?: string, + timestamp?: number, + SenderWindowID?:string, +}; + const clientChat = new Map(); // @ts-expect-error: import.meta.glob is a vite thing. Typescript doesn't know this... @@ -85,7 +98,7 @@ declare module 'fastify' { hello: (message: string) => string; MsgObjectServer: (data: { message: ClientMessage }) => void; privMessage: (data: string) => void; - profilMessage: (data: string) => void; + profilMessage: (data: ClientProfil) => void; privMessageCopy: (msg: string) => void; message: (msg: string) => void; listBud: (msg: string) => void; @@ -185,39 +198,42 @@ async function onReady(fastify: FastifyInstance) { return users.find(u => u.name === name) || null; } + function getAboutPlayer( ): string{ + const description = 'Player is good Shape this needs to be replaced by a bd.function()'; + return description; + } // this function returns html the profil pop up in CHAT of a user 'nickname unique' TODO .... - async function getProfil(user: string): Promise { - let profilHtmlPopup = '404: Error: Profil not found'; + async function getProfil(user: string, socket: Socket): Promise { + + let clientProfil: ClientProfil = {}; const users: User[] = fastify.db.getAllUsers() ?? []; const allUsers: User | null = getUserByName(users, user); console.log(color.yellow, `'userFound is:'${allUsers?.name}`); if (user === allUsers?.name) { console.log(color.yellow, `'login Name: '${allUsers.login}' user: '${user}'`); - profilHtmlPopup = `
- Profil of ${allUsers.name}
- Login Name: '${allUsers?.login ?? 'Guest'}' -
- - -
About: No description
- `; - } - return profilHtmlPopup; + clientProfil = { + command: 'getProfil', + destination: 'profilMsg', + type: 'chat' as const, + user: `${allUsers.name}`, + loginName: `${allUsers?.login ?? 'Guest'}`, + userID: `${allUsers?.id ?? ''}`, + text: getAboutPlayer(), + timestamp: Date.now(), + SenderWindowID: socket.id, + }; + } + return clientProfil; }; - function sendProfil(data: ClientMessage, clientProfil?: string) { - + function sendProfil(data: ClientProfil, clientProfil?: string) { fastify.io.fetchSockets().then((sockets) => { const senderSocket = sockets.find(socket => socket.id === clientProfil); - for (const socket of sockets) { - const clientInfo = clientChat.get(socket.id); - if (clientInfo?.user === data.user) { - if (senderSocket) { - socket.emit('profilMessage', `${data.text}`); - } - } + if (senderSocket) { + console.log(color.yellow, 'user inFO:', data.user); + senderSocket.emit('profilMessage', data); } }); } @@ -436,22 +452,12 @@ async function onReady(fastify: FastifyInstance) { `DEBUG LOG: ClientName: '${clientName}' id Socket: '${socket.id}' target profil:`, profilMessage.user, ); - const profileHtml: string = await getProfil(profilMessage.user); + const profileHtml: ClientProfil = await getProfil(profilMessage.user, socket); if (clientName !== null) { const testuser: User | null = getUserByName(users, profilMessage.user); - console.log(color.yellow, 'user:', testuser?.login ?? 'Guest'); - const obj = { - command: profilMessage.command, - destination: 'profilMsg', - type: 'chat', - user: clientName, - token: '', - text: profileHtml, - timestamp: Date.now(), - SenderWindowID: socket.id, - }; - console.log(color.blue, 'DEBUG - profil message MESSAGE OUT :', obj.SenderWindowID); - sendProfil(obj, obj.SenderWindowID); + console.log(color.yellow, 'user:', testuser?.name ?? 'Guest'); + console.log(color.blue, 'DEBUG - profil message MESSAGE OUT :', profileHtml.SenderWindowID); + sendProfil(profileHtml, profileHtml.SenderWindowID); // clientChat.delete(obj.user); } });