From 85065d8bb35f0dd3548abd4d0dc981e80d57a27e Mon Sep 17 00:00:00 2001 From: NigeParis Date: Wed, 14 Jan 2026 12:51:59 +0100 Subject: [PATCH] Chat box can be called from F1 and buttons for Games History now in another look --- frontend/src/chat/chat.css | 7 +- frontend/src/chat/chat.ts | 82 +++++++++++++++++-- .../src/chat/chatHelperFunctions/cmdList.ts | 1 + .../chatHelperFunctions/openProfilePopup.ts | 2 +- src/chat/src/app.ts | 31 +++++-- 5 files changed, 103 insertions(+), 20 deletions(-) diff --git a/frontend/src/chat/chat.css b/frontend/src/chat/chat.css index 98b175b..1555807 100644 --- a/frontend/src/chat/chat.css +++ b/frontend/src/chat/chat.css @@ -38,13 +38,14 @@ .btn-style-games { @apply - w-35 + w-40 h-8 border border-gray-500 rounded-3xl - bg-gray-500 - text-white + bg-white + text-blue-800 + underline underline-offset-4 cursor-pointer shadow-[0_2px_0_0_black] transition-all diff --git a/frontend/src/chat/chat.ts b/frontend/src/chat/chat.ts index ff19c74..f654b93 100644 --- a/frontend/src/chat/chat.ts +++ b/frontend/src/chat/chat.ts @@ -28,6 +28,7 @@ import { openMessagePopup } from "./chatHelperFunctions/openMessagePopup"; import { windowStateVisable } from "./chatHelperFunctions/windowStateVisable"; import { cmdList } from "./chatHelperFunctions/cmdList"; import { actionBtnTTTGames } from "./chatHelperFunctions/actionBtnTTTGames"; +import { showError } from "@app/toast"; const MAX_SYSTEM_MESSAGES = 10; let inviteMsgFlag: boolean = false; @@ -81,9 +82,72 @@ const sendtextbox = document.getElementById( ) as HTMLButtonElement; const systemWindow = document.getElementById("chat-system-box") as HTMLDivElement; + + + +const keysPressed: Record = {}; +async function chatKeyToggle() { + document.addEventListener("keydown", (event) => { + // if (keysPressed[event.code]) {keysPressed[event.key.toLowerCase()] = false; chatBox.classList.remove("hidden"); return}; + if (event.repeat) {keysPressed[event.key.toLowerCase()] = false; chatBox.classList.remove("hidden"); return}; + keysPressed[event.key.toLowerCase()] = true; +}); +document.addEventListener("keyup", (event) => { + keysPressed[event.key.toLowerCase()] = false; +}); + + setInterval( () => { + if(keysPressed['f1'] === true) { + if (chatBox.classList.contains("hidden")) { + chatBox.classList.remove("hidden"); + overlay.classList.add("opacity-60"); + chatMessageIn?.classList.add("hidden"); + chatMessageIn!.textContent = ''; + sendtextbox.focus(); + } else { + overlay.classList.remove("opacity-60"); + chatBox.classList.add("hidden"); + overlay.classList.remove("opacity-60"); + chatMessageIn?.classList.add("hidden"); + chatMessageIn!.textContent = ''; + } + + } + else if(keysPressed['t'] === false) { + + } + }, 1000/10); +}; + + + + function initChatSocket() { let socket = getSocket(); - let blockMessage: boolean; + // let blockMessage: boolean; + if ( + !chatBox || + !chatMessageIn || + !bquit || + !buttonMessage || + !buttonPro || + !chatButton || + !chatWindow || + !clearText || + !gameMessage || + !myGames || + !myTTTGames || + !modalmessage || + !noGuest || + !notify || + !overlay || + !profilList || + !sendButton || + !sendtextbox || + !systemWindow + + ) return showError("fatal error"); + // Listen for the 'connect' event socket.on("connect", async () => { await waitSocketConnected(socket); @@ -125,7 +189,7 @@ function initChatSocket() { }); chatMessageIn?.classList.add("hidden"); - + chatKeyToggle(); // Listen for messages from the server "MsgObjectServer" socket.on("MsgObjectServer", (data: { message: ClientMessage }) => { if (socket) { @@ -165,12 +229,12 @@ function initChatSocket() { if (systemWindow && data.message.destination === "system-info") { const messageElement = document.createElement("div"); messageElement.textContent = `${data.message.user}: ${data.message.text}`; - systemWindow.appendChild(messageElement); - + // keep only last 10 while (systemWindow.children.length > MAX_SYSTEM_MESSAGES) { systemWindow.removeChild(systemWindow.firstChild!); } + systemWindow.appendChild(messageElement); systemWindow.scrollTop = systemWindow.scrollHeight; } }); @@ -205,9 +269,11 @@ function initChatSocket() { if (blockUserBtn) { let message = ""; if (data.userState === "block") { - ((message = "un-block"), (blockMessage = true)); + (message = "un-block"); + // ((message = "un-block"), (blockMessage = true)); } else { - ((message = "block"), (blockMessage = false)); + // ((message = "block"), (blockMessage = false)); + (message = "block"); } blockUserBtn.textContent = message; } @@ -464,8 +530,8 @@ chatButton!.addEventListener("click",() => { if (!socket) return; connected(socket); chatMessageIn?.classList.add("hidden"); - chatMessageIn!.textContent = ''; - + chatMessageIn!.textContent = ''; + sendtextbox.focus(); } else { chatBox.classList.toggle("hidden"); overlay.classList.remove("opacity-60"); diff --git a/frontend/src/chat/chatHelperFunctions/cmdList.ts b/frontend/src/chat/chatHelperFunctions/cmdList.ts index 523feda..06ad35d 100644 --- a/frontend/src/chat/chatHelperFunctions/cmdList.ts +++ b/frontend/src/chat/chatHelperFunctions/cmdList.ts @@ -16,6 +16,7 @@ export function cmdList() { addMessage('\'@quit\' - disconnect user from the chat'); addMessage('\'@pong\' - displays your pong match results'); addMessage('\'@ttt\' - displays your ttt match results'); + addMessage('\'F1\' - chat box display toggles on / off'); addMessage('** *********************************** **'); addMessage('*'); } \ No newline at end of file diff --git a/frontend/src/chat/chatHelperFunctions/openProfilePopup.ts b/frontend/src/chat/chatHelperFunctions/openProfilePopup.ts index c3f3011..4f3a255 100644 --- a/frontend/src/chat/chatHelperFunctions/openProfilePopup.ts +++ b/frontend/src/chat/chatHelperFunctions/openProfilePopup.ts @@ -14,7 +14,7 @@ export async function openProfilePopup(profil: ClientProfil) {
About: ${profil.text}
- + diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts index b3a6751..9787165 100644 --- a/src/chat/src/app.ts +++ b/src/chat/src/app.ts @@ -102,6 +102,20 @@ async function onReady(fastify: FastifyInstance) { socket.emit('welcome', { msg: 'Welcome to the chat! : ' }); broadcast(fastify, obj, obj.SenderWindowID); fastify.log.info(`Client connected: ${socket.id}`); + const clientInfo = clientChat.get(socket.id); + const clientName = clientInfo?.user; + + if (!clientName) return; + const connectionMsg: ClientMessage = { + command: '', + destination: 'system-info', + type: 'chat' as const, + user: clientName, + text: 'is connected au server', + timestamp: Date.now(), + SenderWindowID: socket.id, + }; + broadcast(fastify, connectionMsg, socket.id); }); list_SocketListener(fastify, socket); @@ -111,17 +125,17 @@ async function onReady(fastify: FastifyInstance) { const client = clientChat.get(socket.id) || null; if (userFromFrontend.oldUser !== userFromFrontend.user) { if (client) { - client.user = userFromFrontend.user; + client.user = userFromFrontend.user; } } }); socket.on('logout', () => { - const clientInfo = clientChat.get(socket.id); - const clientName = clientInfo?.user; + const clientInfo = clientChat.get(socket.id); + const clientName = clientInfo?.user; - if (!clientName) return; - const obj: ClientMessage = { + if (!clientName) return; + const obj: ClientMessage = { command: '', destination: 'system-info', type: 'chat' as const, @@ -322,7 +336,7 @@ async function onReady(fastify: FastifyInstance) { socket.on('client_entered', (data) => { - // data may be undefined (when frontend calls emit with no payload) + // data may be undefined (when frontend calls emit with no payload) const userNameFromFrontend = data?.userName || null; const userFromFrontend = data?.user || null; let clientName = clientChat.get(socket.id)?.user || null; @@ -339,7 +353,7 @@ async function onReady(fastify: FastifyInstance) { }; } if (clientName !== null) { - const obj: ClientMessage = { + const obj: ClientMessage = { command: '', destination: 'system-info', type: 'chat', @@ -355,4 +369,5 @@ async function onReady(fastify: FastifyInstance) { }); }); -} + +} \ No newline at end of file