diff --git a/frontend/package.json b/frontend/package.json index 3780d3c..24f3aa9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -19,7 +19,7 @@ "@types/qrcode": "^1.5.6", "js-cookie": "^3.0.5", "qrcode": "^1.5.4", - "socket.io-client": "^4.8.2", + "socket.io-client": "^4.8.3", "tailwindcss": "^4.1.18" } } diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 32fa6d4..5d76465 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -21,8 +21,8 @@ importers: specifier: ^1.5.4 version: 1.5.4 socket.io-client: - specifier: ^4.8.2 - version: 4.8.2 + specifier: ^4.8.3 + version: 4.8.3 tailwindcss: specifier: ^4.1.18 version: 4.1.18 @@ -451,15 +451,6 @@ packages: color-name@1.1.4: resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} - debug@4.3.7: - resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} - engines: {node: '>=6.0'} - peerDependencies: - supports-color: '*' - peerDependenciesMeta: - supports-color: - optional: true - debug@4.4.3: resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} engines: {node: '>=6.0'} @@ -483,8 +474,8 @@ packages: emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} - engine.io-client@6.6.3: - resolution: {integrity: sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==} + engine.io-client@6.6.4: + resolution: {integrity: sha512-+kjUJnZGwzewFDw951CDWcwj35vMNf2fcj7xQWOctq1F2i1jkDdVvdFG9kM/BEChymCH36KgjnW0NsL58JYRxw==} engine.io-parser@5.2.3: resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==} @@ -675,12 +666,12 @@ packages: set-blocking@2.0.0: resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==} - socket.io-client@4.8.2: - resolution: {integrity: sha512-4MY14EMsyEPFA6lM01XIYepRdV8P6dUir2hxAlAysOYcbNAy5QNHYgIHOcQ1KYM7wTcKnKEW/ZRoIxRinWRXvA==} + socket.io-client@4.8.3: + resolution: {integrity: sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==} engines: {node: '>=10.0.0'} - socket.io-parser@4.2.4: - resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==} + socket.io-parser@4.2.5: + resolution: {integrity: sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==} engines: {node: '>=10.0.0'} source-map-js@1.2.1: @@ -779,8 +770,8 @@ packages: resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==} engines: {node: '>=8'} - ws@8.17.1: - resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==} + ws@8.18.3: + resolution: {integrity: sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==} engines: {node: '>=10.0.0'} peerDependencies: bufferutil: ^4.0.1 @@ -1073,10 +1064,6 @@ snapshots: color-name@1.1.4: {} - debug@4.3.7: - dependencies: - ms: 2.1.3 - debug@4.4.3: dependencies: ms: 2.1.3 @@ -1089,12 +1076,12 @@ snapshots: emoji-regex@8.0.0: {} - engine.io-client@6.6.3: + engine.io-client@6.6.4: dependencies: '@socket.io/component-emitter': 3.1.2 - debug: 4.3.7 + debug: 4.4.3 engine.io-parser: 5.2.3 - ws: 8.17.1 + ws: 8.18.3 xmlhttprequest-ssl: 2.1.2 transitivePeerDependencies: - bufferutil @@ -1286,21 +1273,21 @@ snapshots: set-blocking@2.0.0: {} - socket.io-client@4.8.2: + socket.io-client@4.8.3: dependencies: '@socket.io/component-emitter': 3.1.2 debug: 4.4.3 - engine.io-client: 6.6.3 - socket.io-parser: 4.2.4 + engine.io-client: 6.6.4 + socket.io-parser: 4.2.5 transitivePeerDependencies: - bufferutil - supports-color - utf-8-validate - socket.io-parser@4.2.4: + socket.io-parser@4.2.5: dependencies: '@socket.io/component-emitter': 3.1.2 - debug: 4.3.7 + debug: 4.4.3 transitivePeerDependencies: - supports-color @@ -1366,7 +1353,7 @@ snapshots: string-width: 4.2.3 strip-ansi: 6.0.1 - ws@8.17.1: {} + ws@8.18.3: {} xmlhttprequest-ssl@2.1.2: {} diff --git a/frontend/src/pages/chat/chat.css b/frontend/src/pages/chat/chat.css index d71cb55..a25c3e2 100644 --- a/frontend/src/pages/chat/chat.css +++ b/frontend/src/pages/chat/chat.css @@ -233,24 +233,17 @@ div-private { items-center; } -.popup-b-clear { +.popup-b-invite { @apply absolute bottom-42 right-12 } -.popup-b-invite { - @apply - absolute - bottom-52 - right-12 -} - .popup-b-block { @apply absolute - bottom-62 + bottom-52 right-12 } diff --git a/frontend/src/pages/chat/chat.html b/frontend/src/pages/chat/chat.html index 68410d7..c5e0d75 100644 --- a/frontend/src/pages/chat/chat.html +++ b/frontend/src/pages/chat/chat.html @@ -1,13 +1,11 @@
- - +

ChatterBox


-
System: connecting ...
diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts index 65d421c..94f6752 100644 --- a/frontend/src/pages/chat/chat.ts +++ b/frontend/src/pages/chat/chat.ts @@ -1,4 +1,4 @@ -import "./chat.css"; +import './chat.css'; import { addRoute, setTitle, type RouteHandlerParams, type RouteHandlerReturn } from "@app/routing"; import { showError } from "@app/toast"; import authHtml from './chat.html?raw'; @@ -47,6 +47,8 @@ export type obj = Sendertext: string, }; +const MAX_SYSTEM_MESSAGES = 10; + // 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); @@ -215,33 +217,33 @@ async function connected(socket: Socket): Promise { }, 16); }; -async function whoami(socket: Socket) { - try { - const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; - const loggedIn = isLoggedIn(); +// async function whoami(socket: Socket) { +// try { +// const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; +// const loggedIn = isLoggedIn(); - const res = (getUser()); - console.log('loginGuest():', res?.name); - if (res) { - let user = await updateUser(); - if (chatWindow) { - socket.emit('updateClientName', { - oldUser: '', - user: user?.name - }); - } - if (user === null) - return showError('Failed to get user: no user ?'); - setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`); - } else { - showError(`Failed to login: ${res}`); - } +// const res = (getUser()); +// console.log('loginGuest():', res?.name); +// if (res) { +// let user = await updateUser(); +// if (chatWindow) { +// socket.emit('updateClientName', { +// oldUser: '', +// user: user?.name +// }); +// } +// if (user === null) +// return showError('Failed to get user: no user ?'); +// setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`); +// } else { +// showError(`Failed to login: ${res}`); +// } - } catch (e) { - console.error("Login error:", e); - showError('Failed to login: Unknown error'); - } -}; +// } catch (e) { +// console.error("Login error:", e); +// showError('Failed to login: Unknown error'); +// } +// }; let count = 0; function incrementCounter(): number { @@ -340,27 +342,14 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn } - - - - if (chatWindow && data.message.destination === "inviteMsg") { const messageElement = document.createElement("div-private"); const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; - messageElement.innerHTML = `🎃${data.message.SenderUserName}: ${data.message.innerHtml}`; + messageElement.innerHTML = `🏓${data.message.SenderUserName}: ${data.message.innerHtml}`; chatWindow.appendChild(messageElement); chatWindow.scrollTop = chatWindow.scrollHeight; } - - - - - - - - const MAX_SYSTEM_MESSAGES = 10; - if (systemWindow && data.message.destination === "system-info") { const messageElement = document.createElement("div"); messageElement.textContent = `${data.message.user}: ${data.message.text}`; @@ -380,21 +369,21 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn profil.SenderName = getUser()?.name ?? ""; openProfilePopup(profil); socket.emit('isBlockdBtn', profil); - console.log(`DEBUG LOG: userId:${profil.userID}: senderID${profil.SenderID}' senderID:${getUser()?.id}`); - console.log(`DEBUG LOG: user:${profil.user}: sender:${profil.SenderName}' senderID:${getUser()?.name}`); + // console.log(`DEBUG LOG: userId:${profil.userID}: senderID${profil.SenderID}' senderID:${getUser()?.id}`); + // console.log(`DEBUG LOG: user:${profil.user}: sender:${profil.SenderName}' senderID:${getUser()?.name}`); socket.emit('check_Block_button', profil); actionBtnPopUpClear(profil, socket); actionBtnPopUpInvite(profil, socket); actionBtnPopUpBlock(profil, socket); }); - socket.on('inviteGame', (invite: ClientProfil) => { - const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; - const messageElement = document.createElement("div"); - messageElement.innerHTML =`🏓${invite.SenderName}: ${invite.innerHtml}`; - chatWindow.appendChild(messageElement); - chatWindow.scrollTop = chatWindow.scrollHeight; - }); + // socket.on('inviteGame', (invite: ClientProfil) => { + // const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement; + // const messageElement = document.createElement("div"); + // messageElement.innerHTML =`🏓${invite.SenderName}: ${invite.innerHtml}`; + // chatWindow.appendChild(messageElement); + // chatWindow.scrollTop = chatWindow.scrollHeight; + // }); socket.on('blockUser', (blocked: ClientProfil) => { @@ -413,9 +402,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn const blockUserBtn = document.querySelector("#popup-b-block"); if (blockUserBtn) { - console.log(' =================== >>> User State:', data.userState); - console.log(' =================== >>> UserTarget:', data.userTarget); - console.log(' =================== >>> By:', data.by); + // console.log(' =================== >>> User State:', data.userState); + // console.log(' =================== >>> UserTarget:', data.userTarget); + // console.log(' =================== >>> By:', data.by); let message = ""; if (data.userState === "block") {message = "un-block", blockMessage = true} else{message = "block", blockMessage = false} blockUserBtn.textContent = message; @@ -427,7 +416,7 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn quitChat(socket); }); - socket.on('privMessageCopy', (message) => { + socket.on('privMessageCopy', (message: string) => { addMessage(message); }) @@ -485,8 +474,8 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement; const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement; const clearText = document.getElementById('b-clear') as HTMLButtonElement; - const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement; - const bconnected = document.getElementById('b-help') as HTMLButtonElement; + // const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement; + // const bconnected = document.getElementById('b-help') as HTMLButtonElement; const username = document.getElementById('username') as HTMLDivElement; const buddies = document.getElementById('div-buddies') as HTMLDivElement; const bquit = document.getElementById('b-quit') as HTMLDivElement; @@ -532,9 +521,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn case '@msg': broadcastMsg(socket, msgCommand); break; - case '@who': - whoami(socket); - break; + // case '@who': + // whoami(socket); + // break; case '@profil': getProfil(socket, msgCommand[1]); break; @@ -601,9 +590,9 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn // Whoami button to display user name addMessage(msgCommand[0]); - bwhoami?.addEventListener('click', async () => { - whoami(socket); - }); + // bwhoami?.addEventListener('click', async () => { + // whoami(socket); + // }); } } diff --git a/frontend/src/pages/chat/openProfilePopup.ts b/frontend/src/pages/chat/openProfilePopup.ts index 4ffe17d..0245366 100644 --- a/frontend/src/pages/chat/openProfilePopup.ts +++ b/frontend/src/pages/chat/openProfilePopup.ts @@ -11,7 +11,6 @@ export async function openProfilePopup(profil: ClientProfil) {
Login ID: '${profil.userID ?? ''}'

-
About: '${profil.text}'