Added message dot

frontend/index.html

@@ -53,6 +53,7 @@
 	<main class="pt-16 px-6 pb-8 w-full h-full container" id="app">
 	</main>
 	<button id="chatButton" class="chat-button transition">💬</button>
+	<div id="chatMessageIn" class="chat-buttonMsg transition">🔴</div>
 	<!-- Scripts -->
 	<script type="module" src="/src/pages/"></script>
 	<script type="module" src="/src/carousel"></script>

frontend/src/chat/chat.css

@@ -130,7 +130,7 @@
   top-4 
   left-6
 }
-
+overlay
 .b-TTTgame {
   @apply
   absolute
@@ -343,6 +343,23 @@ div-private {
   hover:bg-red-700
 }
 
+.chat-buttonMsg {
+  @apply
+  z-100 
+  align-text-top
+  text-xs 
+  fixed bottom-15 
+  right-9 
+  w-2 
+  h-2 
+  z-300
+  rounded-full 
+  shadow-lg 
+  flex items-center 
+  justify-center 
+  hover:bg-red-700
+  
+}
 
 
 .hidden{

frontend/src/chat/chat.ts

@@ -7,13 +7,7 @@ import type {
 	ClientProfilPartial,
 } from "./types_front";
 import type { User } from "@app/auth";
-import {
+import { navigateTo } from "@app/routing";
-	addRoute,
-	navigateTo,
-	setTitle,
-	type RouteHandlerParams,
-	type RouteHandlerReturn,
-} from "@app/routing";
 import authHtml from "./chat.html?raw";
 import { getUser } from "@app/auth";
 import { listBuddies } from "./chatHelperFunctions/listBuddies";
@@ -33,7 +27,6 @@ import { quitChat } from "./chatHelperFunctions/quitChat";
 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;
@@ -71,6 +64,7 @@ const buddies = document.getElementById("div-buddies") as HTMLDivElement;
 const buttonMessage = document.getElementById("close-modal-message") ?? null;
 const buttonPro = document.getElementById("close-modal") ?? null;
 const chatButton = document.querySelector("#chatButton");
+const chatMessageIn = document.querySelector("#chatMessageIn");
 const chatWindow = document.querySelector("#t-chatbox")!;
 const clearText = document.getElementById("b-clear") as HTMLButtonElement;
 const gameMessage = document.getElementById("game-modal") ?? null;
@@ -129,14 +123,18 @@ function initChatSocket() {
 		systemWindow.appendChild(messageElement);
 		systemWindow.scrollTop = systemWindow.scrollHeight;
 	});
+	chatMessageIn?.classList.add("hidden");
 
+	
 	// Listen for messages from the server "MsgObjectServer"
 	socket.on("MsgObjectServer", (data: { message: ClientMessage }) => {
 		if (socket) {
 			connected(socket);
 		}
-
+		
 		if (chatWindow && data.message.destination === "") {
+			chatMessageIn?.classList.remove("hidden");
+			chatMessageIn!.textContent = '🔵';
 			const messageElement = document.createElement("div");
 			messageElement.textContent = `${data.message.user}: ${data.message.text}`;
 			chatWindow.appendChild(messageElement);
@@ -144,6 +142,8 @@ function initChatSocket() {
 		}
 
 		if (chatWindow && data.message.destination === "privateMsg") {
+			chatMessageIn?.classList.remove("hidden");
+			chatMessageIn!.textContent = '🔴';
 			const messageElement = document.createElement("div-private");
 			messageElement.textContent = `🔒${data.message.user}: ${data.message.text}`;
 			chatWindow.appendChild(messageElement);
@@ -151,6 +151,8 @@ function initChatSocket() {
 		}
 
 		if (chatWindow && data.message.destination === "inviteMsg") {
+			chatMessageIn?.classList.remove("hidden");
+			chatMessageIn!.textContent = '🟢';
 			const messageElement = document.createElement("div-private");
 			const chatWindow = document.getElementById(
 				"t-chatbox",
@@ -460,12 +462,15 @@ chatButton!.addEventListener("click",() => {
 		windowStateVisable();
 		let socket = window.__state.chatSock;
 		if (!socket) return;
-		connected(socket);		
+		connected(socket);
+		chatMessageIn?.classList.add("hidden");
+		chatMessageIn!.textContent = '';		
 		
 	} else {
 		chatBox.classList.toggle("hidden");
 		overlay.classList.remove("opacity-60");
 		windowStateHidden();
+		
 	}
 });
 

frontend/src/chat/chatHelperFunctions/quitChat.ts

@@ -10,7 +10,8 @@ import { windowStateHidden } from "./windowStateHidden";
 export async function quitChat () {
 	const chatBox = document.getElementById("chatBox")!;
 	const overlay = document.querySelector('#overlay')!;
-	
+	const chatMessageIn = document.querySelector("#chatMessageIn");
+
 	try {
 		if (chatBox.classList.contains('hidden')) {
 			// chatBox.classList.toggle('hidden');
@@ -21,6 +22,8 @@ export async function quitChat () {
 			await windowStateHidden();
 			chatBox.classList.toggle('hidden');
 			overlay.classList.remove('opacity-60');
+			chatMessageIn?.classList.remove("hidden");
+			chatMessageIn!.textContent = '';
 		}
 	} catch (e) {
 		showError('Failed to Quit Chat: Unknown error');