Clean up starting

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"
   }
 }

frontend/pnpm-lock.yaml

@@ -21,8 +21,8 @@ importers:
         specifier: ^1.5.4
         version: 1.5.4
       socket.io-client:
-        specifier: ^4.8.2
+        specifier: ^4.8.3
-        version: 4.8.2
+        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:
+  engine.io-client@6.6.4:
-    resolution: {integrity: sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==}
+    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:
+  socket.io-client@4.8.3:
-    resolution: {integrity: sha512-4MY14EMsyEPFA6lM01XIYepRdV8P6dUir2hxAlAysOYcbNAy5QNHYgIHOcQ1KYM7wTcKnKEW/ZRoIxRinWRXvA==}
+    resolution: {integrity: sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==}
     engines: {node: '>=10.0.0'}
 
-  socket.io-parser@4.2.4:
+  socket.io-parser@4.2.5:
-    resolution: {integrity: sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==}
+    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:
+  ws@8.18.3:
-    resolution: {integrity: sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==}
+    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
+      engine.io-client: 6.6.4
-      socket.io-parser: 4.2.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: {}
 

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
 }
 

frontend/src/pages/chat/chat.html

@@ -1,13 +1,11 @@
 <div class="displaybox">
   <div id="mainbox" class="mainboxDisplay">
-    <button id="b-whoami" class="btn-style absolute top-4 left-6">Who am i</button>
+    <button id="b-nextGame" class="btn-style absolute top-4 left-14">nextGame</button>
-    <button id="b-nextGame" class="btn-style absolute top-4 left-34">nextGame</button>
     <h1 class="text-3xl font-bold text-gray-800">
 		  ChatterBox<span id="t-username"></span>
     </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-help" class="btn-style absolute top-14 left-6">Connected</button>
     <!-- Horizontal Message Box -->
     <div id="system-box" class="system-info">System: connecting ... </div>
     <div class="flex justify-center mt-2">

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<void> {
 		}, 16);
 	};
 		
-async function whoami(socket: Socket) {
+// async function whoami(socket: Socket) {
-	try {
+// 	try {
-		const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
+// 		const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
-		const loggedIn = isLoggedIn();
+// 		const loggedIn = isLoggedIn();
 
-		const res = (getUser());
+// 		const res = (getUser());
-		console.log('loginGuest():', res?.name);
+// 		console.log('loginGuest():', res?.name);
-		if (res) {
+// 		if (res) {
-				let user = await updateUser();
+// 				let user = await updateUser();
-				if (chatWindow) {
+// 				if (chatWindow) {
-					socket.emit('updateClientName', {
+// 					socket.emit('updateClientName', {
-						oldUser: '',
+// 						oldUser: '',
-						user: user?.name
+// 						user: user?.name
-					});
+// 					});
-				}
+// 				}
-				if (user === null)
+// 				if (user === null)
-					return showError('Failed to get user: no user ?');
+// 					return showError('Failed to get user: no user ?');
-				setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
+// 				setTitle(`Welcome ${user.guest ? '[GUEST] ' : ''}${user.name}`);
-			} else {
+// 			} else {
-				showError(`Failed to login: ${res}`);
+// 				showError(`Failed to login: ${res}`);
-			}
+// 			}
 
-	} catch (e) {
+// 	} catch (e) {
-		console.error("Login error:", e);
+// 		console.error("Login error:", e);
-		showError('Failed to login: Unknown error');
+// 		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: 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: 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) => {
+	// socket.on('inviteGame', (invite: ClientProfil) => {
-		const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
+	// 	const chatWindow = document.getElementById("t-chatbox") as HTMLDivElement;
-		const messageElement = document.createElement("div");
+	// 	const messageElement = document.createElement("div");
-    	messageElement.innerHTML =`🏓${invite.SenderName}:  ${invite.innerHtml}`;
+    // 	messageElement.innerHTML =`🏓${invite.SenderName}:  ${invite.innerHtml}`;
-    	chatWindow.appendChild(messageElement);
+    // 	chatWindow.appendChild(messageElement);
-		chatWindow.scrollTop = chatWindow.scrollHeight;
+	// 	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(' =================== >>> User State:', data.userState);
-			console.log(' =================== >>> UserTarget:', data.userTarget);
+			// console.log(' =================== >>> UserTarget:', data.userTarget);
-			console.log(' =================== >>> By:', data.by);
+			// 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 bwhoami = document.getElementById('b-whoami') as HTMLButtonElement;
-			const bconnected = document.getElementById('b-help') 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':
+    						// case '@who':
-								whoami(socket);
+							// 	whoami(socket);
-								break;
+							// 	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 () => {
+			// bwhoami?.addEventListener('click', async () => {
-				whoami(socket);
+			// 	whoami(socket);
-			});
+			// });
 		}
 	}
 	

frontend/src/pages/chat/openProfilePopup.ts

@@ -11,7 +11,6 @@ export async function openProfilePopup(profil: ClientProfil) {
     			</br>
     			<div-login-name id="loginName"> Login ID: '${profil.userID ?? ''}' </div> 
     			</br>
-    			<button id="popup-b-clear" class="btn-style popup-b-clear">Clear Text</button>
     			<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">About: '${profil.text}' </div>