Chat box can be called from F1 and buttons for Games History now in another look

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

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<string, boolean> = {};
+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");

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('*');
 }

frontend/src/chat/chatHelperFunctions/openProfilePopup.ts

@@ -14,7 +14,7 @@ export async function openProfilePopup(profil: ClientProfil) {
     			<button id="popup-b-invite" class="btn-style popup-b-invite">U Game ?</button>
     			<button id="popup-b-block" class="btn-style popup-b-block">Block User</button>
 				<div id="profile-about" class="text-2xl">About: <span class="recessed">${profil.text}</span> </div>
-				<button id="popup-b-hGame" class="btn-style-games popup-b-game">My Pong Games</button>
+				<button id="popup-b-hGame" class="btn-style-games popup-b-game">Your Pong Games</button>
 				<button id="popup-b-hTGame" class="btn-style-games popup-b-TTTgame">My TTT Games</button>
 
     		</div>

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) {
 		});
 
 	});
-}
+
+}