statsUpdate

front-end/src/app/globals.css

@@ -195,7 +195,7 @@ body {
 .friends {
   position: absolute;
   top: 5.9px;
-  right: 0vw;
+  right: 0;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -429,6 +429,44 @@ body {
     padding-left: 0.4vw;
 }
 
+#adminOptionsSettings{
+    position: relative;
+    bottom: 0;
+    right: 0;
+    margin: 0.5em;
+    padding: 0.5em;
+    background: rgba(0, 0, 0, 0.47);
+    border: 2px rgba(0, 0, 0, 0.11);
+    box-shadow: 3px 4px 10px  rgba(0, 0, 0, 0.27);
+    border-radius: 8px;
+    z-index: 1;
+}
+
+#muteDuration{
+    position: relative;
+    width: 1vw;
+    bottom: 0;
+    right: 0;
+    margin: 0.5em;
+    padding: 0.5em;
+    background: rgba(0, 0, 0, 0.47);
+    border: 2px rgba(0, 0, 0, 0.11);
+    box-shadow: 3px 4px 10px  rgba(0, 0, 0, 0.27);
+    border-radius: 8px;
+    z-index: 1;
+}
+
+#muteDuration input{
+    background-color: #2d3748;
+    padding: 0.5rem;
+    border-radius: 0.5rem;
+    color: #f56565;
+    height: 1rem;
+    text-align: center;
+    outline:inset;
+    width:42%
+}
+
 .game{
     display: inline;
     margin-inline: auto;

front-end/src/app/home/page.tsx

@@ -18,6 +18,7 @@ export default function ShowHomePage() {
 			router.push("/auth");
 		else
 			setIsTokenExists(true);
+		return;
 	});
 	return (
 		isTokenExists ?

front-end/src/app/layout.tsx

@@ -1,5 +1,4 @@
 import { Providers } from "@/context/providers";
-import { NavBar } from '@/components/(ben_proto)/DevTools/NavBarDev'
 import './globals.css'
 import { Inter } from 'next/font/google'
 
@@ -24,7 +23,6 @@ export default function RootLayout({
 				{/* <div className='main-background'> */}
 					<Providers>
 						{children}
-            <NavBar className='absolute bottom-0 right-0 w-screen bg-slate-800' />
 					</Providers>
 				</div>
 			</body>

front-end/src/components/AvatarComponent.tsx

@@ -54,6 +54,7 @@ const Avatar: React.FC<avatarProps> = ({path, width, height, playerStatus, isMai
 
 	useEffect(() => {
 		setStatusColor(getEnumNameByIndex(Colors, playerStatus));
+        return;
 	}, [playerStatus]);
 
 	path = !path ? "/tests/avatar.jpg" : path;

front-end/src/components/LeaderboardComponent.tsx

@@ -1,15 +1,22 @@
-import React, {useEffect, useState} from "react";
-import {ILeaderboard} from "@/shared/types";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {EStatus, ILeaderboard, IUser} from "@/shared/types";
 import {getApi} from "@/components/api/ApiReq";
 import {v4 as uuidv4} from "uuid";
 import Profile from "@/components/ProfileComponent";
+import {SocketContextChat, UserContext} from "@/context/globalContext";
 
 const Leaderboard : React.FC = () => {
     const [leaderboard, setLeaderboard] = useState<ILeaderboard[]>([]);
     let leaderboardElements: React.JSX.Element[] = [];
+    const socketChat      = useContext(SocketContextChat);
+    const socketChatRef   = useRef(socketChat);
+    const {userContext} = useContext(UserContext);
+    let refreshLeaderboard = true;
 
     useEffect(() => {
-            if (leaderboard && leaderboard.length == 0)
+        if (refreshLeaderboard)
+        {
+            //if (leaderboard && leaderboard.length == 0)
                 getApi.getLeaderboard()
                     .then((res) => {
                         setLeaderboard(res.data);
@@ -20,12 +27,24 @@ const Leaderboard : React.FC = () => {
                         setLeaderboard(res.data);
                     })
             }, 30000);
-
+            refreshLeaderboard = false;
             return () => {
                 clearInterval(timer);
             };
-    }, )
 
+        }
+
+    }, [refreshLeaderboard] )
+
+    socketChatRef.current?.on("userUpdate", (data: IUser) => {
+        if (data.UserID == userContext.UserID && data.status == EStatus.Online)
+        {
+            refreshLeaderboard = true;
+            console.log("refresh leaderboard");
+        }
+    });
+
+    socketChatRef.current?.off("userUpdate", () => {});
 
     if (leaderboard.length > 0 ){
         const rankColorsArray = ["gold", "silver", "sienna"]

front-end/src/components/MatchHistoryComponent.tsx

@@ -1,8 +1,8 @@
-import React, {useContext, useEffect, useState} from "react";
-import {IMatch, IRelationships} from "@/shared/types";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {EStatus, IMatch, IRelationships, IUser} from "@/shared/types";
 import {getApi} from "@/components/api/ApiReq";
 import {v4 as uuidv4} from "uuid";
-import {SelectedUserContext} from "@/context/globalContext";
+import {SelectedUserContext, SocketContextChat} from "@/context/globalContext";
 import UserOptions from "@/components/UserOptions";
 
 const MatchHistory : React.FC = () => {
@@ -11,6 +11,8 @@ const MatchHistory : React.FC = () => {
     const [selectedUserRelationships, setSelectedUserRelationships] = useState<IRelationships>({followed:[], blocked:[]});
     const [refresh, setRefresh] = useState(false);
     let matchElements : React.JSX.Element[] = [];
+    const socketChat      = useContext(SocketContextChat);
+    const socketChatRef   = useRef(socketChat);
 
     useEffect(() => {
         if (selectedUserContext)
@@ -24,19 +26,29 @@ const MatchHistory : React.FC = () => {
                 .then((res) => {
                     setSelectedUserRelationships({followed:res.data.followed, blocked:res.data?.blocked});
                 });
-            const timer = setInterval(() => {
+            /*const timer = setInterval(() => {
                 getApi.getMatchHistoryFromUserId(selectedUserContext.UserID)
                     .then((res) => {
                         setMatchesList(res.data);
                     })
             }, 10000);
-
+*/
             return () => {
-                clearInterval(timer);
+                //clearInterval(timer);
             };
         }
     }, [selectedUserContext])
 
+    socketChatRef.current?.on("userUpdate", (data: IUser) => {
+        if (selectedUserContext && data.UserID == selectedUserContext.UserID && selectedUserContext.status == EStatus.Online)
+            setSelectedUserContext(data);
+    });
+
+    socketChatRef.current?.off("userUpdate", (data: IUser) => {
+        if (selectedUserContext && data.UserID == selectedUserContext.UserID && selectedUserContext.status == EStatus.Online)
+            setSelectedUserContext(data);
+    });
+
 
     if (matchesList.length > 0 && matchesList.at(0).ID >= 0){
         for (const match of matchesList) {
@@ -70,8 +82,9 @@ const MatchHistory : React.FC = () => {
             <h1>MATCHES HISTORY</h1>
             {selectedUserContext ?
                 <ul>
-                    <div>{selectedUserContext.nickname}</div>
-                        ({selectedUserContext.login}) <UserOptions user={selectedUserContext} relationships={selectedUserRelationships} setRefresh={setRefresh}/>
+                    {selectedUserContext.nickname}
+                        <span style={{position: "absolute", right: "0"}}>({selectedUserContext.login})</span>
+                    <UserOptions user={selectedUserContext} relationships={selectedUserRelationships} setRefresh={setRefresh}/>
                     <div>{matchElements}</div>
                 </ul>
                 : "No user selected"

front-end/src/components/ProfileComponent.tsx

@@ -32,6 +32,7 @@ const Profile: React.FC<ProfileProps> = ({children, className ,user, avatarSize,
 
     useEffect(() => {
         setStatusColor(getEnumNameByIndex(Colors, user.status));
+        return;
     }, [user.login]);
 
     socketChatRef.current?.on("userUpdate", (data: IUser) => {
@@ -42,6 +43,8 @@ const Profile: React.FC<ProfileProps> = ({children, className ,user, avatarSize,
         }
     });
 
+    socketChatRef.current?.off("userUpdate", () => {});
+
     useEffect(() => {
         if (isNicknameUsed && modifiedNick !== user.nickname) {
           setNickErrMsg("Unavailable");