history games now in chat and profil

frontend/src/chat/chat.css

@@ -36,6 +36,24 @@
   active:shadow-[0_2px_0_0_black];
 }
 
+.btn-style-games {
+  @apply
+  w-35
+  h-8
+  border 
+  border-gray-500
+  rounded-3xl
+  bg-gray-500
+  text-white
+  cursor-pointer
+  shadow-[0_2px_0_0_black]
+  transition-all
+  hover:bg-blue-200
+  active:bg-gray-400
+  active:translate-y-px
+  active:shadow-[0_2px_0_0_black];
+}
+
 .send-btn-style {
   @apply 
   w-12.5 
@@ -106,6 +124,19 @@
 }
 
 
+.b-game {
+  @apply
+  absolute 
+  top-4 
+  left-6
+}
+
+.b-TTTgame {
+  @apply
+  absolute
+  left-6
+  top-14
+}
 
 .text-info {
   @apply
@@ -259,6 +290,20 @@ div-private {
   right-12
 }
 
+.popup-b-game {
+  @apply
+  absolute 
+  bottom-52 
+  left-12
+}
+
+.popup-b-TTTgame {
+  @apply
+  absolute 
+  bottom-42 
+  left-12
+}
+
 .popUpMessage {
   @apply
   bg-white 

frontend/src/chat/chat.html

@@ -5,6 +5,8 @@
     </h1><br>
     <button id="b-clear" class="btn-style absolute top-4 right-6">Clear Text</button>
     <button id="b-quit" class="btn-style absolute top-14 right-6">Quit Chat</button>
+    <button id="b-hGame" class="btn-style-games b-game">My Pong Games</button>
+    <button id="b-hTGame" class="btn-style-games b-TTTgame">My TTT Games</button>
     <!-- Horizontal Message Box -->
     <div id="chat-system-box" class="system-info">System: connecting ... </div>
     <div class="flex justify-center mt-2">

frontend/src/chat/chat.ts

@@ -21,6 +21,7 @@ import { addInviteMessage, addMessage } from "./chatHelperFunctions/addMessage";
 import { broadcastMsg } from "./chatHelperFunctions/broadcastMsg";
 import { openProfilePopup } from "./chatHelperFunctions/openProfilePopup";
 import { actionBtnPopUpBlock } from "./chatHelperFunctions/actionBtnPopUpBlock";
+import { actionBtnPongGames } from "./chatHelperFunctions/actionBtnPongGames";
 import { windowStateHidden } from "./chatHelperFunctions/windowStateHidden";
 import { blockUser } from "./chatHelperFunctions/blockUser";
 import { parseCmdMsg } from "./chatHelperFunctions/parseCmdMsg";
@@ -32,6 +33,7 @@ import { openMessagePopup } from "./chatHelperFunctions/openMessagePopup";
 import { windowStateVisable } from "./chatHelperFunctions/windowStateVisable";
 import { cmdList } from "./chatHelperFunctions/cmdList";
 import { showInfo } from "../toast";
+import { actionBtnTTTGames } from "./chatHelperFunctions/actionBtnTTTGames";
 
 const MAX_SYSTEM_MESSAGES = 10;
 let inviteMsgFlag: boolean = false;
@@ -71,6 +73,8 @@ const chatButton = document.querySelector("#chatButton");
 const chatWindow = document.querySelector("#t-chatbox")!;
 const clearText = document.getElementById("b-clear") as HTMLButtonElement;
 const gameMessage = document.getElementById("game-modal") ?? null;
+const myGames = document.getElementById("b-hGame") ?? null;
+const myTTTGames = document.getElementById("b-hTGame") ?? null;
 const modalmessage = document.getElementById("modal-message") ?? null;
 const noGuest = document.getElementById("noGuest") ?? null;
 const notify = document.getElementById("notify") ?? null;
@@ -176,6 +180,8 @@ function initChatSocket() {
 		socket.emit("check_Block_button", profil);
 		actionBtnPopUpInvite(profil, socket);
 		actionBtnPopUpBlock(profil, socket);
+		actionBtnPongGames(profil, socket);
+		actionBtnTTTGames(profil, socket);
 	});
 
 	socket.on("blockUser", (blocked: ClientProfil) => {
@@ -304,6 +310,20 @@ sendButton?.addEventListener("click", () => {
 					}
 					break;
 
+				case "@pong": 
+					if (msgCommand[1] === "") {
+						window.location.href = "/app/pong/games";
+						quitChat();
+					} 
+					break;
+
+				case "@ttt": 
+					if (msgCommand[1] === "") {
+						window.location.href = "/app/ttt/games";
+						quitChat();
+					} 
+					break;
+			
 				case "@guest":
 					if (!userId) {
 						return;
@@ -384,9 +404,6 @@ sendButton?.addEventListener("click", () => {
 
 let toggle = false;
 window.addEventListener("focus", async () => {
-	console.log('--------------------------')
-	console.log('Window focus called Called');
-	console.log('--------------------------')
 	setTimeout(() => {
 		if (window.__state.chatSock) connected(window.__state.chatSock);
 	}, 16);
@@ -411,8 +428,21 @@ clearText?.addEventListener("click", () => {
 
 bquit?.addEventListener("click", () => {
 	quitChat();
+	
 });
 
+myGames?.addEventListener("click", () => {
+	window.location.href = "/app/pong/games";
+	quitChat();
+});
+
+myTTTGames?.addEventListener("click", () => {
+	window.location.href = "/app/ttt/games";
+	quitChat();
+});
+
+
+
 // Enter key to send message
 sendtextbox.addEventListener("keydown", (event) => {
 	if (!sendtextbox) return;

frontend/src/chat/chatHelperFunctions/actionBtnPongGames.ts

@@ -0,0 +1,17 @@
+import type { ClientProfil } from "../types_front";
+import { Socket } from "socket.io-client";
+
+/**
+ * function listens for a click on the Pong Games history button 
+ * @param profile - Clients target profil
+ * @param senderSocket - socket from the sender
+**/
+
+export function actionBtnPongGames(profile: ClientProfil, senderSocket: Socket) {
+		setTimeout(() => {
+			const userGames = document.querySelector("#popup-b-hGame");
+			userGames?.addEventListener("click", () => {
+				window.location.href = `/app/pong/games/${profile.userID}`;
+			});
+    	}, 0)
+};

frontend/src/chat/chatHelperFunctions/actionBtnTTTGames.ts

@@ -0,0 +1,17 @@
+import type { ClientProfil } from "../types_front";
+import { Socket } from "socket.io-client";
+
+/**
+ * function listens for a click on the TTT game History button 
+ * @param profile - Clients target profil
+ * @param senderSocket - socket from the sender
+**/
+
+export function actionBtnTTTGames(profile: ClientProfil, senderSocket: Socket) {
+		setTimeout(() => {
+			const userGames = document.querySelector("#popup-b-hTGame");
+			userGames?.addEventListener("click", () => {
+				window.location.href = `/app/ttt/games/${profile.userID}`;
+			});
+    	}, 0)
+};

frontend/src/chat/chatHelperFunctions/cmdList.ts

@@ -14,6 +14,7 @@ export function cmdList() {
 	}
 	addMessage('\'@notify\' - toggles notifications on / off');
 	addMessage('\'@quit\' - disconnect user from the chat');
+	addMessage('\'@pong\' - displays your pong match results');
 	addMessage('** *********************************** **');
 	addMessage('*');
 }

frontend/src/chat/chatHelperFunctions/openMessagePopup.ts

@@ -17,7 +17,6 @@ export async function openMessagePopup(message: any) {
         			`;
 		modalmessage.appendChild(messageElement);
 		modalmessage.scrollTop = modalmessage.scrollHeight;
-
 	}
 	const gameMessage = document.getElementById("game-modal") ?? null;
 	if (gameMessage) {

frontend/src/chat/chatHelperFunctions/openProfilePopup.ts

@@ -13,7 +13,10 @@ export async function openProfilePopup(profil: ClientProfil) {
     			</br>
     			<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 text-amber-500">${profil.text}</span> </div>
+				<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-hTGame" class="btn-style-games popup-b-TTTgame">My TTT Games</button>
+
     		</div>
     	`;
 	const profilList = document.getElementById("profile-modal") ?? null;

frontend/src/chat/chatHelperFunctions/parseCmdMsg.ts

@@ -17,7 +17,7 @@ export function parseCmdMsg(msgText: string): string[] | undefined {
         command[1] = msgText;
         return command;
     }
-    const noArgCommands = ['@quit', '@help', '@cls'];
+    const noArgCommands = ['@quit', '@help', '@cls', '@pong', '@ttt'];
     if (noArgCommands.includes(msgText)) {
         command[0] = msgText;
         command[1] = '';

frontend/src/chat/chatHelperFunctions/windowStateHidden.ts

@@ -1,9 +1,6 @@
 import { updateUser } from "@app/auth";
 
 export async function windowStateHidden() {		
-	console.log('--------------------------')
-	console.log('WindowState Hidden Called');
-	console.log('--------------------------')
 	const socketId = window.__state.chatSock || undefined;
 	// let oldName = localStorage.getItem("oldName") ??  undefined;
 	let oldName: string;

frontend/src/chat/chatHelperFunctions/windowStateVisable.ts

@@ -8,10 +8,7 @@ import { updateUser } from "@app/auth";
  */
 
 export async function windowStateVisable() {
-
-	console.log('--------------------------')
-	console.log('WindowState Visable Called');
-	console.log('--------------------------')
+	
 	const buddies = document.getElementById('div-buddies') as HTMLDivElement;
 	const socketId = window.__state.chatSock || undefined;
 	let oldName = localStorage.getItem("oldName") || undefined;