From ba3572512dff62d7f0e767e877a37963e30ce246 Mon Sep 17 00:00:00 2001 From: AntoninoP Date: Wed, 4 Sep 2024 00:21:19 +0200 Subject: [PATCH] head integration and console disconnect bug fixxed --- src/pages/PlayersStatus/PlayersStatus.jsx | 86 ++++++++++--------- .../PlayersStatus/PlayersStatus.module.scss | 18 ++++ src/pages/ServerDetails/ServerDetails.jsx | 24 +++--- 3 files changed, 78 insertions(+), 50 deletions(-) diff --git a/src/pages/PlayersStatus/PlayersStatus.jsx b/src/pages/PlayersStatus/PlayersStatus.jsx index 621c221..7a0cccb 100644 --- a/src/pages/PlayersStatus/PlayersStatus.jsx +++ b/src/pages/PlayersStatus/PlayersStatus.jsx @@ -3,25 +3,32 @@ import serviiApi from "../../service/api.tsx"; import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; +const getPlayerhead = async (username) => { + try { + const response = await fetch(`https://mc-heads.net/avatar/${username}/64.png`); + return response.url; + } catch (error) { + console.error('Error fetching player head:', error); + } +} + const PlayerStatus = () => { const { serverName } = useParams(); const [whiteListUsername, setWhiteListUsername] = useState(''); const [adminUsername, setAdminUsername] = useState(''); const [banUsername, setBanUsername] = useState(''); - const [banipUsername, setBanipUsername] = useState(''); const [whitelist, setWhitelist] = useState([]); const [operators, setOperators] = useState([]); const [bannedPlayers, setBannedPlayers] = useState([]); - const [bannedIps, setBannedIps] = useState([]); + + const [avatars, setAvatars] = useState({}); const loadPlayersStatus = async () => { try { const ApiResponse = await serviiApi.fetchPlayersStatus(serverName); - console.log("API Response:", ApiResponse); - const cleanAndParse = (data) => { if (data) { const cleanedData = data.replace(/\\n/g, '').replace(/\\r/g, ''); @@ -33,12 +40,20 @@ const PlayerStatus = () => { const parsedWhitelist = cleanAndParse(ApiResponse.message.Whitelist); const parsedOperators = cleanAndParse(ApiResponse.message.Operators); const parsedBannedPlayers = cleanAndParse(ApiResponse.message.BannedPlayers); - const parsedBannedIps = cleanAndParse(ApiResponse.message.BannedIps); setWhitelist(parsedWhitelist || []); setOperators(parsedOperators || []); setBannedPlayers(parsedBannedPlayers || []); - setBannedIps(parsedBannedIps || []); + + const allPlayers = [...parsedWhitelist, ...parsedOperators, ...parsedBannedPlayers]; + const avatarsPromises = allPlayers.map(player => + getPlayerhead(player.name).then(url => ({ [player.uuid]: url })) + ); + + const avatarsArray = await Promise.all(avatarsPromises); + const avatarsMap = Object.assign({}, ...avatarsArray); + + setAvatars(avatarsMap); } catch (error) { console.error('Error fetching data:', error); @@ -76,12 +91,8 @@ const PlayerStatus = () => { serverCommande = `op ${username}`; break; case 'ban': - serverCommande = `ban ${username}`; + serverCommande = `ban ${username}`; break; - case 'banip': - serverCommande = `banip ${username}`; - break; - default: break; } @@ -95,7 +106,28 @@ const PlayerStatus = () => { useEffect(() => { loadPlayersStatus(); - }, []); // Dependency array added + }, []); + + const renderPlayerItem = (player) => { + const avatarUrl = avatars[player.uuid]; + + const isIp = /^[0-9]+\.[0-9]+\.[0-9]+\.[0-9]+$/.test(player.name); + + if (isIp) { + return null; + } + + return ( +
+ {avatarUrl ? ( + head + ) : ( +
Avatar non disponible
+ )} + {player.name} +
+ ); + } return (
@@ -117,7 +149,7 @@ const PlayerStatus = () => {
{whitelist.length > 0 ? ( - whitelist.map(player =>
{player.name}
) + whitelist.map(renderPlayerItem) ) : (
Aucun joueur dans la liste blanche
)} @@ -141,7 +173,7 @@ const PlayerStatus = () => {
{operators.length > 0 ? ( - operators.map(player =>
{player.name}
) + operators.map(renderPlayerItem) ) : (
Aucun administrateur
)} @@ -165,36 +197,12 @@ const PlayerStatus = () => {
{bannedPlayers.length > 0 ? ( - bannedPlayers.map(player =>
{player.name}
) + bannedPlayers.map(renderPlayerItem) ) : (
Aucun joueur banni
)}
-
-
IP bannies
-
- setBanipUsername(e.target.value)} - /> - -
-
- {bannedIps.length > 0 ? ( - bannedIps.map(ip =>
{ip}
) - ) : ( -
Aucune IP bannie
- )} -
-
); } diff --git a/src/pages/PlayersStatus/PlayersStatus.module.scss b/src/pages/PlayersStatus/PlayersStatus.module.scss index c6f77d8..6b0daed 100644 --- a/src/pages/PlayersStatus/PlayersStatus.module.scss +++ b/src/pages/PlayersStatus/PlayersStatus.module.scss @@ -35,3 +35,21 @@ input { font-weight: 400; margin-top: 3rem; } + +.playerItem { + display: flex; + align-items: center; + margin: 1rem 0; +} + +.playerAvatar { + width: 3rem; + height: 3rem; + margin-right: 0.5rem; + border-radius: 4px; +} + +.playerName { + font-size: 1.5rem; + font-weight: 400; +} \ No newline at end of file diff --git a/src/pages/ServerDetails/ServerDetails.jsx b/src/pages/ServerDetails/ServerDetails.jsx index 296152a..93c8d73 100644 --- a/src/pages/ServerDetails/ServerDetails.jsx +++ b/src/pages/ServerDetails/ServerDetails.jsx @@ -5,30 +5,32 @@ import ServerProperties from '../ServerProperties/ServerProperties'; import ServerConsole from '../ServerConsole/ServerConsole'; import ServerHistory from '../ServerHistory/ServerHistory'; import PlayerStatus from '../PlayersStatus/PlayersStatus'; -// import ServerWorlds from '../ServerWorlds/ServerWorlds'; -// import ServerBackups from '../ServerBackups/ServerBackups'; -// import ServerAccess from '../ServerAccess/ServerAccess'; import FeatureSoon from './FeatureSoon'; import styles from './ServerDetails.module.scss'; import PropTypes from "prop-types"; import { FaCogs, FaUserFriends, FaGlobe, FaHistory, FaClipboardList, FaSave, FaLock } from 'react-icons/fa'; import { TbArrowBackUp } from 'react-icons/tb'; -import { FiChevronsLeft,FiChevronsRight } from "react-icons/fi"; +import { FiChevronsLeft, FiChevronsRight } from "react-icons/fi"; import NotFoundPage from '../NotFoundPage/NotFoundPage'; import { useLocation } from 'react-router-dom'; const ServerDetails = ({ user }) => { const { serverName } = useParams(); const location = useLocation(); - const initialStatus = location.state?.status || false; + + const initialStatus = location.state?.status ?? JSON.parse(localStorage.getItem('status')) ?? false; const [status, setStatus] = useState(initialStatus); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); useEffect(() => { - if (location.state?.status !== undefined) { - setStatus(location.state.status); + if (location.pathname.includes('/console')) { + setStatus(initialStatus); } - }, [location]); + }, [location.pathname, initialStatus]); + + useEffect(() => { + localStorage.setItem('status', JSON.stringify(status)); + }, [status]); const handleSidebarToggle = () => { setIsSidebarCollapsed(!isSidebarCollapsed); @@ -40,9 +42,9 @@ const ServerDetails = ({ user }) => {
-
- {isSidebarCollapsed ? : } -
+
+ {isSidebarCollapsed ? : } +
isActive ? `${styles.menuItem} ${styles.active}` : styles.menuItem}>