From d9a68771a662c822f951ce3a696803ae7c220890 Mon Sep 17 00:00:00 2001
From: NigeParis <nrobinso@student.42.fr>
Date: Wed, 14 Jan 2026 14:07:20 +0100
Subject: [PATCH] Fix flicker f1 call on chat box + fix button Aless

---
 frontend/src/chat/chat.ts       | 51 ++++++++++++++++-----------------
 frontend/src/pages/ttt/ttt.html |  4 +--
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/frontend/src/chat/chat.ts b/frontend/src/chat/chat.ts
index f654b93..a1121c2 100644
--- a/frontend/src/chat/chat.ts
+++ b/frontend/src/chat/chat.ts
@@ -87,41 +87,40 @@ const systemWindow = document.getElementById("chat-system-box") as HTMLDivElemen
 
 const keysPressed: Record<string, boolean> = {};
 async function chatKeyToggle() {
+	const chat_toggle_key = 'f1';
+	let anti_flicker_control = false;
 	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;
-});
-
+		if (event.repeat && keysPressed[chat_toggle_key] === true) {
+			anti_flicker_control = true;
+			return ;
+		};
+		keysPressed[event.key.toLowerCase()] = true;
+	});
+	document.addEventListener("keyup", (event) => {
+		keysPressed[event.key.toLowerCase()] = false;
+		if (event.key.toLowerCase() === chat_toggle_key)
+			anti_flicker_control = 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 {
+		if(keysPressed[chat_toggle_key] === true) {
+			if (!chatBox.classList.contains("hidden") && anti_flicker_control === false) {
 				overlay.classList.remove("opacity-60");
-			chatBox.classList.add("hidden");
-			overlay.classList.remove("opacity-60");
-			chatMessageIn?.classList.add("hidden");
-			chatMessageIn!.textContent = '';
+				chatBox.classList.add("hidden");
+				overlay.classList.remove("opacity-60");
+				chatMessageIn?.classList.add("hidden");
+				chatMessageIn!.textContent = '';
+			} else {
+				chatBox.classList.remove("hidden");
+				overlay.classList.add("opacity-60");
+				chatMessageIn?.classList.add("hidden");
+				chatMessageIn!.textContent = '';
+				sendtextbox.focus();
 			}
 
-		}
-		else if(keysPressed['t'] === false) {
-			
 		}
 	}, 1000/10);
 };
 
-
-
-
 function initChatSocket() {
 	let socket = getSocket();
 	// let blockMessage: boolean;
diff --git a/frontend/src/pages/ttt/ttt.html b/frontend/src/pages/ttt/ttt.html
index 1c21357..a6cdd32 100644
--- a/frontend/src/pages/ttt/ttt.html
+++ b/frontend/src/pages/ttt/ttt.html
@@ -2,13 +2,13 @@
     <div class="game-mainBoxDisplay rounded-elem" id="mainbox">
         <div class="grid grid-cols-[1fr_2fr_1fr] items-center">
             <div class="flex flex-col gap-2 p-8">
-                <button class="dflt-btn-style fit-all gray-color rounded-elem" id="historyBtn">History</button>
+                <button class="dflt-btn-style fit-all gray-color rounded-elem blue-hover" id="historyBtn">History</button>
             </div>
             <div class="flex flex-col gap-2">
                 <h1 class="page-title">Tic-tac-toe Box<span id="t-username"></span></h1>
             </div>
             <div class="flex flex-col gap-2 p-8 items-end">
-                <button class="dflt-btn-style fit-all gray-color rounded-elem" id="JoinQueueBtn">Join Queue</button>
+                <button class="dflt-btn-style fit-all gray-color rounded-elem blue-hover" id="JoinQueueBtn">Join Queue</button>
             </div>
         </div>
         <div class="grid grid-cols-[auto_1fr_auto_1fr_auto] items-center px-4 py-3">