🆙 Update the navigator

2026-06-20 15:36:18 +00:00 · 2026-02-26 10:25:04 +01:00
parent faadd0cf31
commit 7ab3b24331
49 changed files with 716 additions and 282 deletions
@@ -1,5 +1,5 @@
 import { GetSessionDataManager, RoomDataParser } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent } from 'react';
+import React, { FC, MouseEvent, useEffect } from 'react';
 import { FaUser } from 'react-icons/fa';
 import { CreateRoomSession, DoorStateType, TryVisitRoom } from '../../../../api';
 import { Column, Flex, LayoutBadgeImageView, LayoutGridItemProps, LayoutRoomThumbnailView, Text } from '../../../../common';
@@ -8,35 +8,84 @@ import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemIn

 export interface NavigatorSearchResultItemViewProps extends LayoutGridItemProps
 {
-    roomData: RoomDataParser
-    thumbnail?: boolean
+    roomData: RoomDataParser;
+    thumbnail?: boolean;
+    selectedRoomId?: number | null;
+    setSelectedRoomId?: React.Dispatch<React.SetStateAction<number | null>>;
+    isPopoverActive?: boolean;
+    setIsPopoverActive?: React.Dispatch<React.SetStateAction<boolean>>;
 }

 export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProps> = props =>
 {
-    const { roomData = null, children = null, thumbnail = false, ...rest } = props;
+    const { roomData = null, children = null, thumbnail = false, selectedRoomId, setSelectedRoomId, isPopoverActive, setIsPopoverActive, ...rest } = props;
    const { setDoorData = null } = useNavigator();

+    const handleMouseEnter = () =>
+    {
+        if(isPopoverActive && setSelectedRoomId) setSelectedRoomId(roomData.roomId);
+    };
+
+    const handleMouseLeave = () =>
+    {
+        if(setSelectedRoomId && setIsPopoverActive)
+        {
+            setSelectedRoomId(null);
+            setIsPopoverActive(false);
+        }
+    };
+
+    const handleInfoClick = (e: React.MouseEvent) =>
+    {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if(setIsPopoverActive && setSelectedRoomId)
+        {
+            if(!isPopoverActive)
+            {
+                setSelectedRoomId(roomData.roomId);
+                setIsPopoverActive(true);
+            }
+            else if(selectedRoomId === roomData.roomId)
+            {
+                setSelectedRoomId(null);
+                setIsPopoverActive(false);
+            }
+            else
+            {
+                setSelectedRoomId(roomData.roomId);
+            }
+        }
+    };
+
+    useEffect(() =>
+    {
+        const handleClickOutside = (event: Event) =>
+        {
+            const target = event.target as HTMLElement;
+            const navigatorItem = target.closest('.navigator-item');
+
+            if(!navigatorItem && setIsPopoverActive && setSelectedRoomId)
+            {
+                setIsPopoverActive(false);
+                setSelectedRoomId(null);
+            }
+        };
+
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, [ setIsPopoverActive, setSelectedRoomId ]);
+
    const getUserCounterColor = () =>
    {
        const num: number = (100 * (roomData.userCount / roomData.maxUserCount));

-        let bg = 'bg-primary';
+        if(num >= 92) return 'bg-danger';
+        if(num >= 50) return 'bg-warning';
+        if(num > 0) return 'bg-success';

-        if(num >= 92)
-        {
-            bg = 'bg-danger';
-        }
-        else if(num >= 50)
-        {
-            bg = 'bg-warning';
-        }
-        else if(num > 0)
-        {
-            bg = 'bg-success';
-        }
-
-        return bg;
+        return 'bg-primary';
    };

    const visitRoom = (event: MouseEvent) =>
@@ -46,7 +95,6 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
            if(roomData.habboGroupId !== 0)
            {
                TryVisitRoom(roomData.roomId);
-
                return;
            }

@@ -56,10 +104,8 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
                    setDoorData(prevValue =>
                    {
                        const newValue = { ...prevValue };
-
                        newValue.roomInfo = roomData;
                        newValue.state = DoorStateType.START_DOORBELL;
-
                        return newValue;
                    });
                    return;
@@ -67,10 +113,8 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
                    setDoorData(prevValue =>
                    {
                        const newValue = { ...prevValue };
-
                        newValue.roomInfo = roomData;
                        newValue.state = DoorStateType.START_PASSWORD;
-
                        return newValue;
                    });
                    return;
@@ -81,10 +125,20 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
    };

    if(thumbnail) return (
-        <Column pointer alignItems="center" className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-col border border-muted" gap={ 0 } overflow="hidden" onClick={ visitRoom } { ...rest }>
+        <Column
+            pointer
+            overflow="hidden"
+            alignItems="center"
+            className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-col border border-muted"
+            gap={ 0 }
+            onClick={ visitRoom }
+            onMouseEnter={ handleMouseEnter }
+            onMouseLeave={ handleMouseLeave }
+            { ...rest }
+        >
            <LayoutRoomThumbnailView className="flex flex-col items-center justify-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
-                { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className={ 'absolute top-0 inset-s-0 m-1' } isGroup={ true } /> }
-                <Flex center className={ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-[#fff] text-center whitespace-nowrap align-baseline rounded-[.25rem] p-1 absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
+                { roomData.habboGroupId > 0 && <LayoutBadgeImageView badgeCode={ roomData.groupBadgeCode } className="absolute top-0 inset-s-0 m-1" isGroup={ true } /> }
+                <Flex center className={ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-white text-center whitespace-nowrap align-baseline rounded-[.25rem] p-1 absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
                    <FaUser className="fa-icon" />
                    { roomData.userCount }
                </Flex>
@@ -94,23 +148,42 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
            <Flex className="w-full">
                <Text truncate className="grow!">{ roomData.roomName }</Text>
                <Flex reverse alignItems="center" gap={ 1 }>
-                    <NavigatorSearchResultItemInfoView roomData={ roomData } />
+                    <NavigatorSearchResultItemInfoView
+                        isVisible={ selectedRoomId === roomData.roomId }
+                        onToggle={ handleInfoClick }
+                        setIsPopoverActive={ setIsPopoverActive }
+                        roomData={ roomData }
+                    />
                </Flex>
                { children }
            </Flex>
-
        </Column>
    );

    return (
-        <Flex pointer alignItems="center" className="navigator-item px-2 py-1 small" gap={ 2 } overflow="hidden" onClick={ visitRoom } { ...rest }>
-            <Flex center className={ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-[#fff] text-center whitespace-nowrap align-baseline rounded-[.25rem] p-1 ' + getUserCounterColor() } gap={ 1 }>
+        <Flex
+            pointer
+            alignItems="center"
+            className="navigator-item px-2 py-1 small"
+            gap={ 2 }
+            overflow="hidden"
+            onClick={ visitRoom }
+            onMouseEnter={ handleMouseEnter }
+            onMouseLeave={ handleMouseLeave }
+            { ...rest }
+        >
+            <Flex center className={ 'inline-block px-[.65em] py-[.35em] text-[.75em] font-bold leading-none text-white text-center whitespace-nowrap align-baseline rounded-[.25rem] p-1 ' + getUserCounterColor() } gap={ 1 }>
                <FaUser className="fa-icon" />
                { roomData.userCount }
            </Flex>
-            <Text grow truncate>{ roomData.roomName }</Text>
-            <Flex reverse alignItems="center" gap={ 1 }>
-                <NavigatorSearchResultItemInfoView roomData={ roomData } />
+            <Text grow truncate className="min-w-0">{ roomData.roomName }</Text>
+            <Flex reverse alignItems="center" gap={ 1 } className="shrink-0">
+                <NavigatorSearchResultItemInfoView
+                    isVisible={ selectedRoomId === roomData.roomId && isPopoverActive }
+                    onToggle={ handleInfoClick }
+                    setIsPopoverActive={ setIsPopoverActive }
+                    roomData={ roomData }
+                />
                { roomData.habboGroupId > 0 && <i className="nitro-icon icon-navigator-room-group" /> }
                { (roomData.doorMode !== RoomDataParser.OPEN_STATE) &&
                    <i className={ ('nitro-icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }