+
diff --git a/src/common/card/NitroCardContentView.tsx b/src/common/card/NitroCardContentView.tsx
index a93703b..fa2f976 100644
--- a/src/common/card/NitroCardContentView.tsx
+++ b/src/common/card/NitroCardContentView.tsx
@@ -8,7 +8,7 @@ export const NitroCardContentView: FC
{ content }
+
diff --git a/src/common/card/NitroCardView.tsx b/src/common/card/NitroCardView.tsx
index 8684ccd..2d028f2 100644
--- a/src/common/card/NitroCardView.tsx
+++ b/src/common/card/NitroCardView.tsx
@@ -16,10 +16,7 @@ export const NitroCardView: FC = props =>
const getClassNames = useMemo(() =>
{
- const newClassNames: string[] = [ isResizable ? 'resize' : 'resize-none', 'rounded', 'shadow' ];
-
- // Card Theme Changer
- newClassNames.push('border border-[#283F5D]');
+ const newClassNames: string[] = [ isResizable ? 'resize' : 'resize-none', 'nitro-card-shell' ];
if(classNames.length) newClassNames.push(...classNames);
diff --git a/src/common/card/tabs/NitroCardTabsItemView.tsx b/src/common/card/tabs/NitroCardTabsItemView.tsx
index 2f6b823..96eb702 100644
--- a/src/common/card/tabs/NitroCardTabsItemView.tsx
+++ b/src/common/card/tabs/NitroCardTabsItemView.tsx
@@ -14,8 +14,8 @@ export const NitroCardTabsItemView: FC = props =>
const getClassNames = useMemo(() =>
{
- const newClassNames: string[] = [ 'overflow-hidden relative cursor-pointer rounded-t-md flex bg-card-tab-item px-3 py-1 z-1 border-card-border border-t border-l border-r before:absolute before:w-[93%] before:h-[3px] before:rounded-md before:top-[1.5px] before:left-0 before:right-0 before:m-auto before:z-1 before:bg-[#C2C9D1]',
- isActive && 'bg-card-tab-item-active -mb-px before:bg-white' ];
+ const newClassNames: string[] = [ 'nitro-card-tab-item overflow-hidden relative cursor-pointer rounded-t-[8px] flex px-3 py-[6px] z-1',
+ isActive && 'nitro-card-tab-item-active -mb-px' ];
//if (isActive) newClassNames.push('bg-[#dfdfdf] border-b-[1px_solid_black]');
diff --git a/src/common/card/tabs/NitroCardTabsView.tsx b/src/common/card/tabs/NitroCardTabsView.tsx
index 5e14506..27a4b99 100644
--- a/src/common/card/tabs/NitroCardTabsView.tsx
+++ b/src/common/card/tabs/NitroCardTabsView.tsx
@@ -7,7 +7,7 @@ export const NitroCardTabsView: FC = props =>
const getClassNames = useMemo(() =>
{
- const newClassNames: string[] = [ 'justify-center gap-0.5 flex bg-card-tabs min-h-card-tabs max-h-card-tabs pt-1 border-b border-card-border px-2 -mt-px' ];
+ const newClassNames: string[] = [ 'nitro-card-tabs-shell justify-center gap-1 flex min-h-card-tabs max-h-card-tabs px-2 pt-1' ];
if(classNames.length) newClassNames.push(...classNames);
diff --git a/src/common/layout/LayoutGridItem.tsx b/src/common/layout/LayoutGridItem.tsx
index 1c719bd..e8d66ef 100644
--- a/src/common/layout/LayoutGridItem.tsx
+++ b/src/common/layout/LayoutGridItem.tsx
@@ -24,10 +24,10 @@ export const LayoutGridItem: FC = props =>
const getClassNames = useMemo(() =>
{
- const newClassNames: string[] = [ 'layout-grid-item', 'border', 'border-2', 'border-muted', 'rounded' ];
+ const newClassNames: string[] = [ 'layout-grid-item', 'border', 'border-2', 'border-[#c4cabf]', 'rounded-[6px]' ];
- if(itemActive) newClassNames.push('bg-[#ececec]! border-[#fff]!');
+ if(itemActive) newClassNames.push('bg-[#e4e7df]! border-[#aeb7aa]!');
if(itemUniqueSoldout || (itemUniqueNumber > 0)) newClassNames.push('unique-item');
diff --git a/src/common/layout/LayoutRoomThumbnailView.tsx b/src/common/layout/LayoutRoomThumbnailView.tsx
index d85daea..f90c675 100644
--- a/src/common/layout/LayoutRoomThumbnailView.tsx
+++ b/src/common/layout/LayoutRoomThumbnailView.tsx
@@ -14,7 +14,7 @@ export const LayoutRoomThumbnailView: FC = props =
const getClassNames = useMemo(() =>
{
- const newClassNames: string[] = [ 'relative w-[110px] h-[110px] bg-[url("@/assets/images/navigator/thumbnail_placeholder.png")] bg-no-repeat bg-center', 'rounded', 'border! border-[solid]! border-[#283F5D]!' ];
+ const newClassNames: string[] = [ 'relative w-[110px] h-[110px] bg-[url("@/assets/images/navigator/thumbnail_placeholder.png")] bg-no-repeat bg-center', 'rounded-[6px]', 'border! border-[solid]! border-[#c4cabf]!' ];
if(classNames.length) newClassNames.push(...classNames);
diff --git a/src/components/catalog/CatalogModernView.tsx b/src/components/catalog/CatalogModernView.tsx
index 95368b0..8dd86f8 100644
--- a/src/components/catalog/CatalogModernView.tsx
+++ b/src/components/catalog/CatalogModernView.tsx
@@ -256,7 +256,7 @@ const CatalogModernViewInner: FC<{}> = () =>
{ /* Content area */ }
{ showFavorites
- ?
+ ?
setShowFavorites(false) } />
: <>
@@ -264,7 +264,7 @@ const CatalogModernViewInner: FC<{}> = () =>
+
{ adminMode &&
diff --git a/src/components/catalog/views/admin/CatalogAdminOfferEditView.tsx b/src/components/catalog/views/admin/CatalogAdminOfferEditView.tsx
index f6da55a..aa89b82 100644
--- a/src/components/catalog/views/admin/CatalogAdminOfferEditView.tsx
+++ b/src/components/catalog/views/admin/CatalogAdminOfferEditView.tsx
@@ -110,9 +110,9 @@ export const CatalogAdminOfferEditView: FC<{}> = () =>
setEditingOffer(null) }>
-
e.stopPropagation() }>
+
e.stopPropagation() }>
{ /* Header */ }
-
+
{ isNew ? LocalizeText('catalog.admin.offer.new') : `${ LocalizeText('catalog.admin.offer.edit') } #${ editingOffer.offerId }` }
diff --git a/src/components/friends/FriendsView.tsx b/src/components/friends/FriendsView.tsx
index e29b9f8..031fa82 100644
--- a/src/components/friends/FriendsView.tsx
+++ b/src/components/friends/FriendsView.tsx
@@ -1,19 +1,50 @@
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { useFriends } from '../../hooks';
import { FriendBarView } from './views/friends-bar/FriendsBarView';
import { FriendsListView } from './views/friends-list/FriendsListView';
import { FriendsMessengerView } from './views/messenger/FriendsMessengerView';
-export const FriendsView: FC<{}> = props =>
-{
- const { settings = null, onlineFriends = [] } = useFriends();
+const FRIEND_BAR_TARGET_IDS = [ 'toolbar-friend-bar-container-desktop' ];
+
+export const FriendsView: FC<{}> = props => {
+ const { settings = null, onlineFriends = [], requests = [] } = useFriends();
+ const [ portalTarget, setPortalTarget ] = useState(null);
+
+ useEffect(() =>
+ {
+ if(typeof document === 'undefined') return;
+
+ const resolveTarget = () =>
+ {
+ for(const id of FRIEND_BAR_TARGET_IDS)
+ {
+ const element = document.getElementById(id);
+
+ if(element)
+ {
+ setPortalTarget(previous => ((previous === element) ? previous : element));
+ return;
+ }
+ }
+
+ setPortalTarget(null);
+ };
+
+ resolveTarget();
+
+ const observer = new MutationObserver(resolveTarget);
+
+ observer.observe(document.body, { childList: true, subtree: true });
+
+ return () => observer.disconnect();
+ }, []);
if(!settings) return null;
return (
<>
- { createPortal(();
+ const elementRef = useRef(null);
- useEffect(() =>
- {
- const onClick = (event: MouseEvent) =>
- {
+ useEffect(() => {
+ const onClick = (event: MouseEvent) => {
const element = elementRef.current;
-
- if(!element) return;
-
- if((event.target !== element) && !element.contains((event.target as Node)))
- {
+ if (!element) return;
+ if ((event.target !== element) && !element.contains((event.target as Node))) {
setVisible(false);
}
};
-
document.addEventListener(MouseEventType.MOUSE_CLICK, onClick);
-
return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
}, []);
- if(!friend)
- {
+ if (!friend) {
return (
-
setVisible(prev => !prev) }>
-
-
{ LocalizeText('friend.bar.find.title') }
- { isVisible &&
-
-
}
+ { LocalizeText('friend.bar.find.text') }
-
-
+ setVisible(prev => !prev)}
+ >
+
+
+
+
+ {isVisible && (
+
+
+ )}
+
);
}
return (
- {LocalizeText('friend.bar.find.title')}
+ {LocalizeText('friend.bar.find.title')}
+ {LocalizeText('friend.bar.find.text')}
+
+ 0 ? '70px' : '46px', paddingRight: isVisible ? '4px' : undefined }} onClick={ () => setVisible(prev => !prev) }>
-
0 ? '-top-[31px] -left-[25px]' : '-top-[5px] -left-[3.5px]' }` }>
- { (friend.id > 0) &&
-
+
+ {(friend.id > 0) ? (
+
- { friend.name }
- { isVisible &&
-
-
{ event.stopPropagation(); OpenMessengerChat(friend.id); } } />
- { friend.followingAllowed &&
-
{ event.stopPropagation(); followFriend(friend); } } /> }
- setVisible(prev => !prev)}
+ >
+
+
+
+ {isVisible && (
+
+
{ event.stopPropagation(); GetUserProfile(friend.id); } } />
-
}
+ {friend.name}
+ {friend.name}
+
+
{ event.stopPropagation(); OpenMessengerChat(friend.id); setVisible(false); }} />
+ {friend.followingAllowed &&
+ ();
+ const elementRef = useRef(null);
+ const hasScrollableFriends = (onlineFriends.length > MAX_DISPLAY_COUNT);
+ const visibleFriends = onlineFriends.slice(indexOffset, (indexOffset + MAX_DISPLAY_COUNT));
return (
-
+ { (requestsCount > 0) &&
+
+ }
+
+
+
+
+ { visibleFriends.map(friend => (
+
+
+ )) }
+
+
+ { (!onlineFriends.length && (requestsCount <= 0)) &&
+
+ }
+
+
+
+
+
+
+
);
};
+
+const FRIENDBAR_STYLES = `
+ .tbme-panel {
+ background: rgba(18, 16, 14, 0.88);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ border-radius: 14px;
+ padding: 10px 12px;
+ box-shadow:
+ 0 10px 36px rgba(0, 0, 0, 0.65),
+ 0 1px 0 rgba(255, 255, 255, 0.05) inset;
+ }
+
+ .tbme-icon {
+ opacity: 0.72;
+ cursor: pointer;
+ transition: opacity 0.15s ease, transform 0.15s ease;
+ }
+
+ .tbme-icon:hover {
+ opacity: 1;
+ transform: translateY(-2px);
+ }
+
+ .tbme-icon:active {
+ opacity: 0.85;
+ transform: translateY(0);
+ }
+`;
diff --git a/src/components/groups/views/GroupRoomInformationView.tsx b/src/components/groups/views/GroupRoomInformationView.tsx
index 267ecf0..0607d31 100644
--- a/src/components/groups/views/GroupRoomInformationView.tsx
+++ b/src/components/groups/views/GroupRoomInformationView.tsx
@@ -1,7 +1,8 @@
import { DesktopViewEvent, GetGuestRoomResultEvent, GetSessionDataManager, GroupInformationComposer, GroupInformationEvent, GroupInformationParser, GroupRemoveMemberComposer, HabboGroupDeactivatedMessageEvent, RoomEntryInfoMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useEffect, useRef, useState } from 'react';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { FaChevronDown } from 'react-icons/fa';
import { GetGroupInformation, GetGroupManager, GroupMembershipType, GroupType, LocalizeText, SendMessageComposer, TryJoinGroup } from '../../../api';
+import groupIcon from '../../../assets/images/rightside/group.png';
import { Button, Flex, LayoutBadgeImageView, Text } from '../../../common';
import { useMessageEvent, useNotification } from '../../../hooks';
@@ -12,6 +13,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
const requestRetryTimeoutRef = useRef>(null);
const [ groupInformation, setGroupInformation ] = useState(null);
const [ isOpen, setIsOpen ] = useState(true);
+ const [ isCompact, setIsCompact ] = useState(false);
const { showConfirm = null } = useNotification();
const clearRequestRetryTimeout = () =>
@@ -113,6 +115,19 @@ export const GroupRoomInformationView: FC<{}> = props =>
useEffect(() => () => clearRequestRetryTimeout(), []);
+ useEffect(() =>
+ {
+ if(isOpen)
+ {
+ setIsCompact(false);
+ return;
+ }
+
+ const timeout = window.setTimeout(() => setIsCompact(true), 220);
+
+ return () => window.clearTimeout(timeout);
+ }, [ isOpen ]);
+
const leaveGroup = () =>
{
showConfirm(LocalizeText('group.leaveconfirm.desc'), () =>
@@ -157,27 +172,43 @@ export const GroupRoomInformationView: FC<{}> = props =>
if(!groupInformation) return null;
return (
-
{ event.stopPropagation(); followFriend(friend); setVisible(false); }} />}
+
);
};
diff --git a/src/components/friends/views/friends-bar/FriendsBarView.tsx b/src/components/friends/views/friends-bar/FriendsBarView.tsx
index 18b19ad..52055d5 100644
--- a/src/components/friends/views/friends-bar/FriendsBarView.tsx
+++ b/src/components/friends/views/friends-bar/FriendsBarView.tsx
@@ -1,26 +1,133 @@
import { FC, useRef, useState } from 'react';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
-import { MessengerFriend } from '../../../../api';
-import { Button } from '../../../../common';
+import { LocalizeText, MessengerFriend } from '../../../../api';
import { FriendBarItemView } from './FriendBarItemView';
+import { motion, AnimatePresence } from 'framer-motion';
const MAX_DISPLAY_COUNT = 3;
-export const FriendBarView: FC<{ onlineFriends: MessengerFriend[] }> = props =>
-{
- const { onlineFriends = null } = props;
+// Mirrored from Toolbar to keep physics identical
+const containerVariants = {
+ hidden: {},
+ visible: { transition: { staggerChildren: 0.05 } },
+ exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 as const } },
+};
+
+const itemVariants = {
+ hidden: { opacity: 0, y: 10, scale: 0.8 },
+ visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
+ exit: { opacity: 0, y: 6, scale: 0.85, transition: { duration: 0.1 } },
+};
+
+export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount?: number }> = props => {
+ const { onlineFriends = [], requestsCount = 0 } = props;
const [ indexOffset, setIndexOffset ] = useState(0);
- const elementRef = useRef { event.stopPropagation(); GetUserProfile(friend.id); setVisible(false); }} />
+
+
+ )}
+
-
- { Array.from(Array(MAX_DISPLAY_COUNT), (e, i) =>
+
+ { requestsCount } richieste
+
+ { if(indexOffset > 0) setIndexOffset(indexOffset - 1); } }
+ >
+
+
+ Nessun amico online
+
+ MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1)))) ? 'opacity-30 cursor-not-allowed' : 'cursor-pointer hover:text-white active:scale-95' }` }
+ onClick={ () => { if((onlineFriends.length > MAX_DISPLAY_COUNT) && ((indexOffset + MAX_DISPLAY_COUNT) <= (onlineFriends.length - 1))) setIndexOffset(indexOffset + 1); } }
+ >
+
+
-
- setIsOpen(value => !value) }>
- { LocalizeText('group.homeroominfo.title') }
- { isOpen &&
+ = props =>
return (
+ setIsOpen(value => !value) }>
+
+ { LocalizeText('group.homeroominfo.title') } }
+
+
- { isOpen &&
+
);
diff --git a/src/components/guide-tool/views/GuideToolAcceptView.tsx b/src/components/guide-tool/views/GuideToolAcceptView.tsx
index 981149b..1ec0231 100644
--- a/src/components/guide-tool/views/GuideToolAcceptView.tsx
+++ b/src/components/guide-tool/views/GuideToolAcceptView.tsx
@@ -17,7 +17,7 @@ export const GuideToolAcceptView: FC
+ 
+
+ { !isCompact &&
+
<>
- GetGroupInformation(groupInformation.id) }>
-
- GetGroupInformation(groupInformation.id) }>
+ { groupInformation.title }
{ (groupInformation.type !== GroupType.PRIVATE || isRealOwner) &&
-
+
+
+
+ { groupInformation.title }
-
+
+
}
- }
+
+
-
+
{ LocalizeText('guide.help.request.guide.accept.request.title') }
{ LocalizeText('guide.help.request.type.1') }
{ helpRequestDescription }
diff --git a/src/components/guide-tool/views/GuideToolMenuView.tsx b/src/components/guide-tool/views/GuideToolMenuView.tsx
index fcaaf93..cc3ad5f 100644
--- a/src/components/guide-tool/views/GuideToolMenuView.tsx
+++ b/src/components/guide-tool/views/GuideToolMenuView.tsx
@@ -35,7 +35,7 @@ export const GuideToolMenuView: FC = props =>
return (
+
-
+
diff --git a/src/components/guide-tool/views/GuideToolOngoingView.tsx b/src/components/guide-tool/views/GuideToolOngoingView.tsx
index 9d0a4be..3c34631 100644
--- a/src/components/guide-tool/views/GuideToolOngoingView.tsx
+++ b/src/components/guide-tool/views/GuideToolOngoingView.tsx
@@ -73,7 +73,7 @@ export const GuideToolOngoingView: FC = props =>
return (
-
+
{ isGuide &&
-
+
- processAction('toggle_duty') } />
{ LocalizeText('guide.help.guide.tool.yourstatus') }
@@ -57,7 +57,7 @@ export const GuideToolMenuView: FC = props =>
{ LocalizeText('guide.help.guide.tool.tickettypeselection.bullyreports') }
+
@@ -66,7 +66,7 @@ export const GuideToolMenuView: FC = props =>
+
@@ -86,7 +86,7 @@ export const GuideToolOngoingView: FC = props =>
}
-
+
{ messageGroups.map((group, index) =>
{
@@ -96,7 +96,7 @@ export const GuideToolOngoingView: FC = props =>
{ (!isOwnChat(group.userId)) &&
-
+
{ (isOwnChat(group.userId)) && GetSessionDataManager().userName }
{ (!isOwnChat(group.userId)) && userName }
diff --git a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
index e76b669..7ed4ffd 100644
--- a/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserFeedbackView.tsx
@@ -16,7 +16,7 @@ export const GuideToolUserFeedbackView: FC = pro
return (
+
{ LocalizeText('guide.help.request.user.feedback.question') }
-
+
{ userName }
{ LocalizeText('guide.help.request.user.feedback.guide.desc') }
@@ -29,7 +29,7 @@ export const GuideToolUserFeedbackView: FC = pro
{ userName && (userName.length > 0) &&
<>
- +
diff --git a/src/components/guide-tool/views/GuideToolUserPendingView.tsx b/src/components/guide-tool/views/GuideToolUserPendingView.tsx
index d897ced..334c8f7 100644
--- a/src/components/guide-tool/views/GuideToolUserPendingView.tsx
+++ b/src/components/guide-tool/views/GuideToolUserPendingView.tsx
@@ -17,7 +17,7 @@ export const GuideToolUserPendingView: FC = props
return (
-
+
{ LocalizeText('guide.help.request.guide.accept.request.title') }
{ LocalizeText('guide.help.request.type.1') }
{ helpRequestDescription }
diff --git a/src/components/help/views/name-change/NameChangeConfirmationView.tsx b/src/components/help/views/name-change/NameChangeConfirmationView.tsx
index b73dd20..ca490ba 100644
--- a/src/components/help/views/name-change/NameChangeConfirmationView.tsx
+++ b/src/components/help/views/name-change/NameChangeConfirmationView.tsx
@@ -30,7 +30,7 @@ export const NameChangeConfirmationView: FC = props =
return (
-
= props =>
return (
{ LocalizeText('tutorial.name_change.info.confirm') }
+ { LocalizeText('tutorial.name_change.info.confirm') }
{ LocalizeText('tutorial.name_change.confirm') }
{ username }
diff --git a/src/components/help/views/name-change/NameChangeInitView.tsx b/src/components/help/views/name-change/NameChangeInitView.tsx
index f8d83a2..b810a8f 100644
--- a/src/components/help/views/name-change/NameChangeInitView.tsx
+++ b/src/components/help/views/name-change/NameChangeInitView.tsx
@@ -9,7 +9,7 @@ export const NameChangeInitView: FC
-
{ LocalizeText('tutorial.name_change.info.main') }
+ { LocalizeText('tutorial.name_change.info.main') }
{ LocalizeText('tutorial.name_change.current', [ 'name' ], [ GetSessionDataManager().userName ]) }
diff --git a/src/components/help/views/name-change/NameChangeInputView.tsx b/src/components/help/views/name-change/NameChangeInputView.tsx
index e530fee..ef9795a 100644
--- a/src/components/help/views/name-change/NameChangeInputView.tsx
+++ b/src/components/help/views/name-change/NameChangeInputView.tsx
@@ -80,14 +80,14 @@ export const NameChangeInputView: FC = props =>
{ !errorCode && !canProceed &&
- { LocalizeText('help.tutorial.name.info') }
}
+ { LocalizeText('help.tutorial.name.info') }
}
{ errorCode &&
{ LocalizeText(`help.tutorial.name.${ errorCode }`, [ 'name' ], [ newUsername ]) }
}
{ canProceed &&
{ LocalizeText('help.tutorial.name.available', [ 'name' ], [ newUsername ]) }
}
{ suggestions &&
- { suggestions.map((suggestion, index) =>
}
handleUsernameChange(suggestion) }>{ suggestion }
) }
+ { suggestions.map((suggestion, index) => handleUsernameChange(suggestion) }>{ suggestion }
) }
diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index 820220a..313e4db 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@@ -244,8 +244,12 @@ export const NavigatorView: FC<{}> = props =>
+
= props =>
{ (navigatorData.enteredGuestRoom.tags.length > 0) &&
{ (searchResult && searchResult.results.map((result, index) =>
-
+ { LocalizeText(searchResult.code === 'myworld_view' ? 'navigator.no.user.rooms.to.show' : 'navigator.no.results') }
+
}
{ navigatorData.enteredGuestRoom.tags.map(tag => (
- processAction('navigator_search_tag', tag) }>
+ processAction('navigator_search_tag', tag) }>
#{ tag }
)) }
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
index 36206a7..320be69 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
@@ -52,7 +52,7 @@ export const NavigatorRoomSettingsModTabView: FC
{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })
-
+
{ bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
{
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
index 6f166ae..d9eb3f7 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
@@ -116,7 +116,7 @@ export const NavigatorRoomSettingsRightsTabView: FC
-
+
{ Array.from(filteredUsersWithRights.entries()).map(([ id, name ], index) =>
{
@@ -155,7 +155,7 @@ export const NavigatorRoomSettingsRightsTabView: FC
-
+
{ friendsWithoutRights.map((friend, index) =>
{
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
index dc548ce..645e5c9 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
@@ -89,7 +89,7 @@ export const NavigatorSearchResultItemInfoView: FC (
- e.stopPropagation() }>
+ e.stopPropagation() }>
{ roomData.habboGroupId > 0 && (
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
index 2f746e9..686d598 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
@@ -129,7 +129,7 @@ export const NavigatorSearchResultItemView: FC = pro
{
if(!searchResult) return;
- setIsExtended(!searchResult.closed);
+ setIsExtended((searchResult.code === 'myworld_view') ? true : !searchResult.closed);
setDisplayMode(searchResult.mode);
}, [ searchResult ]);
const gridHasTwoColumns = (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS);
return (
-
+
setIsExtended(prevValue => !prevValue) }>
{ isExtended && = pro
/>
)) }
}
+ { (searchResult.rooms.length === 0) &&
+
+ { LocalizeText(searchResult.code === 'myworld_view' ? 'navigator.no.user.rooms.to.show' : 'navigator.no.results') }
+ }
}
);
diff --git a/src/components/plugins/NitroPluginApi.ts b/src/components/plugins/NitroPluginApi.ts
index 5fbbf8b..1a8d373 100644
--- a/src/components/plugins/NitroPluginApi.ts
+++ b/src/components/plugins/NitroPluginApi.ts
@@ -56,6 +56,7 @@ export interface INitroPluginApi
// Internal plugin storage
const _plugins: INitroPlugin[] = [];
const _listeners: Array<() => void> = [];
+const _windowCleanup = new Map void>();
function notifyListeners()
{
@@ -182,7 +183,7 @@ const pluginApi: INitroPluginApi = {
let isDragging = false;
let offsetX = 0, offsetY = 0;
- header.addEventListener('mousedown', (e: MouseEvent) =>
+ const onMouseDown = (e: MouseEvent) =>
{
isDragging = true;
const rect = overlay.getBoundingClientRect();
@@ -191,16 +192,20 @@ const pluginApi: INitroPluginApi = {
overlay.style.transform = 'none';
overlay.style.left = rect.left + 'px';
overlay.style.top = rect.top + 'px';
- });
+ };
- document.addEventListener('mousemove', (e: MouseEvent) =>
+ const onMouseMove = (e: MouseEvent) =>
{
if (!isDragging) return;
overlay.style.left = (e.clientX - offsetX) + 'px';
overlay.style.top = (e.clientY - offsetY) + 'px';
- });
+ };
- document.addEventListener('mouseup', () => { isDragging = false; });
+ const onMouseUp = () => { isDragging = false; };
+
+ header.addEventListener('mousedown', onMouseDown);
+ document.addEventListener('mousemove', onMouseMove);
+ document.addEventListener('mouseup', onMouseUp);
// Content area
const content = document.createElement('div');
@@ -211,11 +216,23 @@ const pluginApi: INitroPluginApi = {
overlay.appendChild(card);
document.body.appendChild(overlay);
+ _windowCleanup.set(id, () =>
+ {
+ header.removeEventListener('mousedown', onMouseDown);
+ document.removeEventListener('mousemove', onMouseMove);
+ document.removeEventListener('mouseup', onMouseUp);
+ });
+
return content;
},
destroyWindow(id: string)
{
+ const cleanup = _windowCleanup.get(id);
+
+ cleanup?.();
+ _windowCleanup.delete(id);
+
const existing = document.getElementById(`nitro-plugin-window-${id}`);
if (existing) existing.remove();
}
diff --git a/src/components/purse/PurseView.tsx b/src/components/purse/PurseView.tsx
index fa24f2e..4f6bb8b 100644
--- a/src/components/purse/PurseView.tsx
+++ b/src/components/purse/PurseView.tsx
@@ -1,17 +1,21 @@
import { CreateLinkEvent, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
-import { FC, useMemo } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { FaChevronDown, FaQuestionCircle } from 'react-icons/fa';
import { FriendlyTime, GetConfigurationValue, LocalizeText } from '../../api';
-import { Column, Flex, Grid, LayoutCurrencyIcon, Text } from '../../common';
+import { Column, Flex, LayoutCurrencyIcon, Text } from '../../common';
import { usePurse } from '../../hooks';
+import purseIcon from '../../assets/images/rightside/purse.gif';
import { CurrencyView } from './views/CurrencyView';
import { SeasonalView } from './views/SeasonalView';
export const PurseView: FC<{}> = props => {
const { purse = null, hcDisabled = false } = usePurse();
+ const [ isOpen, setIsOpen ] = useState(true);
+ const [ isCompact, setIsCompact ] = useState(false);
const displayedCurrencies = useMemo(() => GetConfigurationValue('system.currency.types', []), []);
const currencyDisplayNumberShort = useMemo(() => GetConfigurationValue('currency.display.number.short', false), []);
-
+
const getClubText = (() => {
if (!purse) return null;
@@ -23,11 +27,10 @@ export const PurseView: FC<{}> = props => {
else return FriendlyTime.shortFormat(totalDays * 86400);
})();
- const getCurrencyElements = (offset: number, limit: number = -1, seasonal: boolean = false) => {
- if (!purse || !purse.activityPoints || !purse.activityPoints.size) return null;
+ const currencyTypes = useMemo(() => {
+ if (!purse || !purse.activityPoints || !purse.activityPoints.size) return [];
const types = Array.from(purse.activityPoints.keys()).filter(type => (displayedCurrencies.indexOf(type) >= 0));
-
types.sort((a, b) => {
if (a === 0) return -1;
if (b === 0) return 1;
@@ -36,60 +39,73 @@ export const PurseView: FC<{}> = props => {
return a - b;
});
- let count = 0;
+ return types;
+ }, [ displayedCurrencies, purse ]);
- while (count < offset) {
- types.shift();
- count++;
+ const primaryCurrencies = currencyTypes.slice(0, 2);
+ const seasonalCurrencies = currencyTypes.slice(2);
+
+ useEffect(() =>
+ {
+ if(isOpen)
+ {
+ setIsCompact(false);
+ return;
}
- count = 0;
- const elements: JSX.Element[] = [];
+ const timeout = window.setTimeout(() => setIsCompact(true), 220);
- for (const type of types) {
- if ((limit > -1) && (count === limit)) break;
-
- if (seasonal) {
- elements.push(
-
-
-
-
- {!hcDisabled &&
- CreateLinkEvent('habboUI/open/hccenter')}>
- {getClubText}
- }
-
- CreateLinkEvent('help/show')}>
-
+
+
);
-}
\ No newline at end of file
+};
diff --git a/src/components/purse/views/SeasonalView.tsx b/src/components/purse/views/SeasonalView.tsx
index adf4884..bfc96a7 100644
--- a/src/components/purse/views/SeasonalView.tsx
+++ b/src/components/purse/views/SeasonalView.tsx
@@ -1,6 +1,6 @@
import { FC } from 'react';
import { GetConfigurationValue, LocalizeFormattedNumber, LocalizeText } from '../../../api';
-import { Flex, LayoutCurrencyIcon, Text } from '../../../common';
+import { Flex, Text } from '../../../common';
interface SeasonalViewProps {
type: number;
@@ -10,6 +10,8 @@ interface SeasonalViewProps {
export const SeasonalView: FC = props => {
const { type = -1, amount = -1 } = props;
const seasonalColor = GetConfigurationValue('currency.seasonal.color', 'blue');
+ const formattedAmount = LocalizeFormattedNumber(amount);
+ const iconUrl = GetConfigurationValue('currency.asset.icon.url', '').replace('%type%', type.toString());
return (
= props => {
justifyContent="between"
className={`nitro-purse-seasonal-currency nitro-notification ${seasonalColor}`}
>
-
+
+
+
+
{LocalizeText(`purse.seasonal.currency.${type}`)}
99999 ? LocalizeFormattedNumber(amount) : ''}
+ title={formattedAmount}
>
- {amount > 99999 ? '99 999' : LocalizeFormattedNumber(amount)}
+ {formattedAmount}
-
-
);
-};
\ No newline at end of file
+};
diff --git a/src/components/right-side/RightSideView.tsx b/src/components/right-side/RightSideView.tsx
index 454e366..d4e31b0 100644
--- a/src/components/right-side/RightSideView.tsx
+++ b/src/components/right-side/RightSideView.tsx
@@ -10,8 +10,8 @@ import { RoomPromotesWidgetView } from '../room/widgets/room-promotes/RoomPromot
export const RightSideView: FC<{}> = props =>
{
return (
-
+
+
+ setIsOpen(value => !value) }>
+
+
- CreateLinkEvent('user-settings/toggle')}>
-
-
-
-
- {getCurrencyElements(2, -1, true)}
-
-
-
-
+
+
+
+
+
+
+
+
+
+ { seasonalCurrencies.length > 0 &&
+
+
+ { !hcDisabled &&
+ { event.stopPropagation(); CreateLinkEvent('habboUI/open/hccenter'); } }>
+
}
+
+
+
+ HC
+ { getClubText }
+
+
+
+
+
+
+ { seasonalCurrencies.map(type =>
}
+
-
+
+
();
+ const inputRef = useRef(null);
const { isVisible: commandSelectorVisible, filteredCommands, selectedIndex, setSelectedIndex, moveUp, moveDown, selectCurrent, close: closeCommandSelector } = useChatCommandSelector(chatValue);
const chatModeIdWhisper = useMemo(() => LocalizeText('widgets.chatinput.mode.whisper'), []);
@@ -279,7 +279,7 @@ export const ChatInputView: FC<{}> = props =>
return (
createPortal(
-
+
{ commandSelectorVisible &&
= props =>
/> }
(null);
const [isOpen, setIsOpen] = useState(false);
const [isOpenHistory, setIsOpenHistory] = useState(false);
+ const [isCollapsed, setIsCollapsed] = useState(false);
const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
const [plugins, setPlugins] = useState([]);
const { navigatorData = null } = useNavigator();
@@ -79,10 +81,11 @@ export const RoomToolsWidgetView: FC<{}> = props => {
const onChangeRoomHistory = (roomId: number, roomName: string) => {
let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]');
- if (newStorage.some((room: { roomId: number }) => room.roomId === roomId)) return;
- if (newStorage.length >= 10) newStorage.shift();
- newStorage = [...newStorage, { roomId, roomName }];
+ newStorage = newStorage.filter((room: { roomId: number }) => room.roomId !== roomId);
+ newStorage = [ ...newStorage, { roomId, roomName } ];
+
+ if (newStorage.length > 10) newStorage = newStorage.slice(-10);
setRoomHistory(newStorage);
SetLocalStorage('nitro.room.history', newStorage);
@@ -99,48 +102,55 @@ export const RoomToolsWidgetView: FC<{}> = props => {
});
useEffect(() => {
- setIsOpen(true);
- const timeout = setTimeout(() => setIsOpen(false), 5000);
- return () => clearTimeout(timeout);
+ if(roomName || roomOwner || (roomTags && roomTags.length)) setIsOpen(true);
}, [roomName, roomOwner, roomTags]);
+ useEffect(() => {
+ if(!isCollapsed && (roomName || roomOwner || (roomTags && roomTags.length))) setIsOpen(true);
+ }, [ isCollapsed, roomName, roomOwner, roomTags ]);
+
useEffect(() => {
setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]'));
}, []);
- useEffect(() => {
- const handleTabClose = () => {
- window.localStorage.removeItem('nitro.room.history');
- };
- window.addEventListener('beforeunload', handleTabClose);
- return () => window.removeEventListener('beforeunload', handleTabClose);
- }, []);
-
return (
-
{ !floodBlocked &&
- updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
+ updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
{ floodBlocked &&
{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } }
diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 5105cf5..f740853 100644
--- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -6,6 +6,7 @@ import { GetConfigurationValue, LocalizeText, SendMessageComposer, SetLocalStora
import { Text } from '../../../../common';
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
import { getRegisteredPlugins, INitroPlugin, subscribePlugins } from '../../../plugins/NitroPluginApi';
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
export const RoomToolsWidgetView: FC<{}> = props => {
const [areBubblesMuted, setAreBubblesMuted] = useState(false);
@@ -15,6 +16,7 @@ export const RoomToolsWidgetView: FC<{}> = props => {
const [roomTags, setRoomTags] = useState
-
-
handleToolClick('settings')} />
-
handleToolClick('zoom')} />
-
handleToolClick('chat_history')} />
-
handleToolClick('hiddenbubbles')} />
+
+
+
+
+ { !isCollapsed &&
+
+
handleToolClick('settings')} />
+
handleToolClick('zoom')} />
+
handleToolClick('chat_history')} />
+
handleToolClick('hiddenbubbles')} />
- {navigatorData.canRate && (
-
handleToolClick('like_room')} />
- )}
-
handleToolClick('toggle_room_link')} />
-
handleToolClick('room_history')} />
- {plugins.map(plugin => (
-
plugin.onOpen()}
- />
- ))}
+ {navigatorData.canRate && (
+
handleToolClick('like_room')} />
+ )}
+
handleToolClick('toggle_room_link')} />
+
handleToolClick('room_history')} />
+ {plugins.map(plugin => (
+
plugin.onOpen()}
+ />
+ ))}
+ }
+
-
+
- {isOpen && (
+ {(!isCollapsed && (isOpen || !!roomName || !!roomOwner || !!(roomTags && roomTags.length))) && (
@@ -161,7 +171,7 @@ export const RoomToolsWidgetView: FC<{}> = props => {
)}
- {isOpenHistory && (
+ {(!isCollapsed && isOpenHistory) && (
{roomHistory.map(history => (
diff --git a/src/components/toolbar/ToolbarItemView.tsx b/src/components/toolbar/ToolbarItemView.tsx
index 3a0822a..8789403 100644
--- a/src/components/toolbar/ToolbarItemView.tsx
+++ b/src/components/toolbar/ToolbarItemView.tsx
@@ -11,7 +11,7 @@ export const ToolbarItemView = forwardRef>;
}>> = props =>
{
- const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
- const elementRef = useRef();
+ const { useGuideTool = false, unseenAchievementCount = 0, children = null } = props;
+ const elementRef = useRef(null);
useEffect(() =>
{
@@ -22,29 +23,22 @@ export const ToolbarMeView: FC
- {
- const onClick = (event: MouseEvent) => setMeExpanded(false);
-
- document.addEventListener('click', onClick);
-
- return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
- }, [ setMeExpanded ]);
-
return (
-
- { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
-
DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
-
CreateLinkEvent('achievements/toggle') }>
- { (unseenAchievementCount > 0) &&
-
+
+ { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
+ DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } title={ LocalizeText('guide.help.button.label') } /> }
+ CreateLinkEvent('achievements/toggle') } title={ LocalizeText('toolbar.icon.label.achievements') }>
+ { (unseenAchievementCount > 0) &&
+
+ GetUserProfile(GetSessionDataManager().userId) } title={ LocalizeText('toolbar.icon.label.memenu') } />
+ CreateLinkEvent('navigator/search/myworld_view') } title={ LocalizeText('navigator.myworlds') } />
+ CreateLinkEvent('avatar-editor/toggle') } title={ LocalizeText('widget.memenu.settings.avatar') } />
+ CreateLinkEvent('user-settings/toggle') } title={ LocalizeText('widget.memenu.settings.title') } />
+ CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
+ { children }
- GetUserProfile(GetSessionDataManager().userId) } />
-
CreateLinkEvent('navigator/search/myworld_view') } />
-
CreateLinkEvent('avatar-editor/toggle') } />
-
CreateLinkEvent('user-settings/toggle') } />
- (PerkAllowancesMessageEvent, event =>
{
@@ -42,13 +57,11 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
const targetBounds = target.getBoundingClientRect();
const imageBounds = image.getBoundingClientRect();
-
const left = (imageBounds.x - targetBounds.x);
const top = (imageBounds.y - targetBounds.y);
const squared = Math.sqrt(((left * left) + (top * top)));
const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
const height = 20;
-
const motionName = (`ToolbarBouncing[${ iconName }]`);
if(!Motions.getMotionByTag(motionName))
@@ -66,55 +79,266 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
return (
<>
- { isMeExpanded && (
- )}
-
-
-
-
- {
- setMeExpanded(!isMeExpanded);
- event.stopPropagation();
- } }>
-
- { isInRoom &&
- VisitDesktop() } /> }
- { !isInRoom &&
- CreateLinkEvent('navigator/goto/home') } /> }
- CreateLinkEvent('navigator/toggle') } />
- { GetConfigurationValue('game.center.enabled') &&
- CreateLinkEvent('games/toggle') } /> }
- CreateLinkEvent('catalog/toggle') } />
- CreateLinkEvent('inventory/toggle') }>
- { (getFullCount > 0) &&
-
- { (isInRoom && showToolbarButton) &&
- CreateLinkEvent('camera/toggle') } /> }
- { isMod &&
- CreateLinkEvent('mod-tools/toggle') } /> }
- { isMod &&
- CreateLinkEvent('furni-editor/toggle') } /> }
-
-
-
- CreateLinkEvent('friends/toggle') }>
- { (requests.length > 0) &&
-
- { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
- OpenMessengerChat() } /> }
-
-
-
-
+
+
+ { isInRoom &&
+
+ { (isToolbarOpen || !isInRoom) &&
+ <>
+ { showDesktopShell &&
+
+
+
+ { isInRoom
+ ? VisitDesktop() } className="tb-icon" />
+ : CreateLinkEvent('navigator/goto/home') } className="tb-icon" /> }
+
+
+ CreateLinkEvent('navigator/toggle') } className="tb-icon" />
+
+ { GetConfigurationValue('game.center.enabled') &&
+
+ CreateLinkEvent('games/toggle') } className="tb-icon" />
+ }
+
+ CreateLinkEvent('catalog/toggle') } className="tb-icon" />
+
+
+ CreateLinkEvent('inventory/toggle') } className="tb-icon" />
+ { (getFullCount > 0) &&
+
+
+
+ { isMeExpanded &&
+
+ }
+
+ { setMeExpanded(value => !value); event.stopPropagation(); } }>
+
+ { (getTotalUnseen > 0) &&
+
+ { (isInRoom && showToolbarButton) &&
+
+ }
+ { isInRoom &&
+
+ CreateLinkEvent('camera/toggle') } className="tb-icon" />
+ }
+ { isMod &&
+
+ CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
+ }
+ { isMod &&
+
+ CreateLinkEvent('furni-editor/toggle') } className="tb-icon" />
+ }
+
+
+
+
+
+
+ CreateLinkEvent('friends/toggle') } className="tb-icon" />
+ { (requests.length > 0) &&
+
+ { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
+
+ OpenMessengerChat() } />
+ }
+
+
+
+
+
+
+
+
+ { isInRoom
+ ? VisitDesktop() } className="tb-icon" />
+ : CreateLinkEvent('navigator/goto/home') } className="tb-icon" /> }
+
+
+ CreateLinkEvent('navigator/toggle') } className="tb-icon" />
+
+ { GetConfigurationValue('game.center.enabled') &&
+
+ CreateLinkEvent('games/toggle') } className="tb-icon" />
+ }
+
+ CreateLinkEvent('catalog/toggle') } className="tb-icon" />
+
+
+ CreateLinkEvent('inventory/toggle') } className="tb-icon" />
+ { (getFullCount > 0) &&
+
+
+
+
+ { isMeExpanded &&
+
+ }
+
+ { setMeExpanded(value => !value); event.stopPropagation(); } }>
+
+ { (getTotalUnseen > 0) &&
+
+
+ { (isInRoom && showToolbarButton) &&
+
+ }
+ { isInRoom &&
+
+ CreateLinkEvent('camera/toggle') } className="tb-icon" />
+ }
+ { isMod &&
+
+ CreateLinkEvent('mod-tools/toggle') } className="tb-icon" />
+ }
+ { isMod &&
+
+ CreateLinkEvent('furni-editor/toggle') } className="tb-icon" />
+ }
+ { !isInRoom &&
+
+ CreateLinkEvent('friends/toggle') } className="tb-icon" />
+ { (requests.length > 0) &&
+ }
+
+
+ }
+
);
};
+
+const TOOLBAR_STYLES = `
+ .tb-icon {
+ opacity: 1;
+ transition: transform 0.15s ease;
+ cursor: pointer;
+ }
+
+ .tb-icon:hover {
+ transform: translateY(-2px);
+ }
+
+ .tb-icon:active {
+ transform: translateY(0);
+ }
+
+ .tb-toggle {
+ width: 32px;
+ height: 32px;
+ flex-shrink: 0;
+ border-radius: 9px;
+ background: rgba(18, 16, 14, 0.80);
+ backdrop-filter: blur(16px);
+ -webkit-backdrop-filter: blur(16px);
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
+ transition: background 0.15s, border-color 0.15s;
+ }
+
+ .tb-toggle:hover {
+ background: rgba(30, 26, 20, 0.88);
+ border-color: rgba(255, 255, 255, 0.13);
+ }
+
+ .tb-bar-scroll {
+ overflow-x: auto;
+ overflow-y: visible;
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ flex-wrap: nowrap;
+ }
+
+ .tb-bar-scroll::-webkit-scrollbar {
+ display: none;
+ }
+
+ .tb-open-shell {
+ scrollbar-width: none;
+ -ms-overflow-style: none;
+ }
+
+ .tb-open-shell::-webkit-scrollbar {
+ display: none;
+ }
+`;
diff --git a/src/components/user-profile/BadgeInfoView.tsx b/src/components/user-profile/BadgeInfoView.tsx
index a06c11e..c4186d5 100644
--- a/src/components/user-profile/BadgeInfoView.tsx
+++ b/src/components/user-profile/BadgeInfoView.tsx
@@ -14,14 +14,14 @@ export const BadgeInfoView: FC = props =>
return (
setIsHovered(true) }
onMouseLeave={ () => setIsHovered(false) }
>
CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
- { children }
-
+
);
};
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index e2917df..5657643 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -7,10 +7,23 @@ import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent
import { ToolbarItemView } from './ToolbarItemView';
import { ToolbarMeView } from './ToolbarMeView';
+const containerVariants = {
+ hidden: {},
+ visible: { transition: { staggerChildren: 0.05 } },
+ exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 as const } }
+};
+
+const itemVariants = {
+ hidden: { opacity: 0, y: 10, scale: 0.8 },
+ visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
+ exit: { opacity: 0, y: 6, scale: 0.85, transition: { duration: 0.1 } }
+};
+
export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
{
const { isInRoom } = props;
const [ isMeExpanded, setMeExpanded ] = useState(false);
+ const [ isToolbarOpen, setIsToolbarOpen ] = useState(false);
const [ useGuideTool, setUseGuideTool ] = useState(false);
const { userFigure = null } = useSessionInfo();
const { getFullCount = 0 } = useInventoryUnseenTracker();
@@ -19,6 +32,8 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
const { iconState = MessengerIconState.HIDDEN } = useMessenger();
const { openMonitor, showToolbarButton } = useWiredTools();
const isMod = GetSessionDataManager().isModerator;
+ const hasDesktopUnifiedShell = (isInRoom && isToolbarOpen);
+ const showDesktopShell = (isToolbarOpen || !isInRoom);
useMessageEvent
+ setIsToolbarOpen(value => !value) }
+ whileTap={ { scale: 0.9 } }>
+
+
+
}
+
+
+ CreateLinkEvent('friends/toggle') } className="tb-icon" />
+ { (requests.length > 0) &&
+
+
-
+ = p
+
diff --git a/src/components/user-profile/RelationshipsContainerView.tsx b/src/components/user-profile/RelationshipsContainerView.tsx
index 0c2a231..52ef6a8 100644
--- a/src/components/user-profile/RelationshipsContainerView.tsx
+++ b/src/components/user-profile/RelationshipsContainerView.tsx
@@ -28,7 +28,7 @@ export const RelationshipsContainerView: FC{ LocalizeBadgeName(badgeCode) }
{ LocalizeBadgeDescription(badgeCode) }
-
+
(relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }> { (!relationshipInfo || (relationshipInfo.friendCount === 0)) && LocalizeText('extendedprofile.add.friends') } diff --git a/src/components/user-profile/UserProfileView.tsx b/src/components/user-profile/UserProfileView.tsx index b294346..eb8f09e 100644 --- a/src/components/user-profile/UserProfileView.tsx +++ b/src/components/user-profile/UserProfileView.tsx @@ -159,7 +159,7 @@ export const UserProfileView: FC<{}> = props =>
{ activeTab === 'badge' && (
-
+
{ userBadges && (userBadges.length > 0)
? userBadges.map((badge, index) => (
CreateRoomSession(room.roomId) }>
+ CreateRoomSession(room.roomId) }>
{ room.roomName }
{ room.description && { room.description } }
diff --git a/src/components/wired-tools/WiredCreatorToolsView.tsx b/src/components/wired-tools/WiredCreatorToolsView.tsx
index 80c3b98..3f9e0f4 100644
--- a/src/components/wired-tools/WiredCreatorToolsView.tsx
+++ b/src/components/wired-tools/WiredCreatorToolsView.tsx
@@ -1,4 +1,4 @@
-import { AddLinkEventTracker, AvatarExpressionEnum, FigureUpdateEvent, FurnitureFloorUpdateEvent, FurnitureMultiStateComposer, FurnitureWallMultiStateComposer, FurnitureWallUpdateComposer, FurnitureWallUpdateEvent, GetLocalizationManager, GetRoomEngine, GetSessionDataManager, ILinkEventTracker, PetMoveComposer, RemoveLinkEventTracker, RoomControllerLevel, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomUnitDanceEvent, RoomUnitEffectEvent, RoomUnitExpressionEvent, RoomUnitHandItemEvent, RoomUnitInfoEvent, RoomUnitLookComposer, RoomUnitStatusEvent, RoomUnitWalkComposer, UpdateFurniturePositionComposer, Vector3d } from '@nitrots/nitro-renderer';
+import { AddLinkEventTracker, AvatarExpressionEnum, FigureUpdateEvent, FurnitureFloorUpdateEvent, FurnitureMultiStateComposer, FurnitureWallMultiStateComposer, FurnitureWallUpdateComposer, FurnitureWallUpdateEvent, GetLocalizationManager, GetRoomEngine, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker, RoomControllerLevel, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomUnitDanceEvent, RoomUnitEffectEvent, RoomUnitExpressionEvent, RoomUnitHandItemEvent, RoomUnitInfoEvent, RoomUnitStatusEvent, UpdateFurniturePositionComposer, Vector3d, WiredUserInspectMoveComposer } from '@nitrots/nitro-renderer';
import { WiredMonitorDataEvent, WiredMonitorRequestComposer } from '@nitrots/nitro-renderer';
import { FC, KeyboardEvent, useCallback, useEffect, useMemo, useState } from 'react';
import furniInspectionIcon from '../../assets/images/wiredtools/furni.png';
@@ -433,16 +433,6 @@ const VARIABLE_DEFINITIONS: Record =
createVariableDefinition('@chat_style', 'Context', 'Conditional')
]
};
-const USER_DIRECTION_VECTORS: Array<{ x: number; y: number; }> = [
- { x: 0, y: -1 },
- { x: 1, y: -1 },
- { x: 1, y: 0 },
- { x: 1, y: 1 },
- { x: 0, y: 1 },
- { x: -1, y: 1 },
- { x: -1, y: 0 },
- { x: -1, y: -1 }
-];
const WIRED_FREEZE_EFFECT_IDS: Set = new Set([ 218, 12, 11, 53, 163 ]);
const TEAM_COLOR_NAMES: Record = {
1: 'red',
@@ -641,6 +631,7 @@ export const WiredCreatorToolsView: FC<{}> = () =>
const [ isManagedGiveOpen, setIsManagedGiveOpen ] = useState(false);
const [ managedGiveVariableItemId, setManagedGiveVariableItemId ] = useState(0);
const [ managedGiveValue, setManagedGiveValue ] = useState('0');
+ const shouldPauseVariableSnapshotRefresh = (!!editingVariable || !!editingManagedHolderVariableId || isInspectionGiveOpen || isManagedGiveOpen);
const [ selectedVariableKeys, setSelectedVariableKeys ] = useState>({
furni: VARIABLE_DEFINITIONS.furni[0].key,
user: VARIABLE_DEFINITIONS.user[0].key,
@@ -1296,14 +1287,14 @@ export const WiredCreatorToolsView: FC<{}> = () =>
useEffect(() =>
{
- if(!isVisible || !roomSession?.roomId || !roomSettings.canInspect) return;
+ if(!isVisible || !roomSession?.roomId || !roomSettings.canInspect || shouldPauseVariableSnapshotRefresh) return;
requestUserVariables();
const interval = window.setInterval(requestUserVariables, WIRED_VARIABLES_POLL_MS);
return () => window.clearInterval(interval);
- }, [ isVisible, roomSession?.roomId, roomSettings.canInspect, requestUserVariables ]);
+ }, [ isVisible, roomSession?.roomId, roomSettings.canInspect, requestUserVariables, shouldPauseVariableSnapshotRefresh ]);
useEffect(() =>
{
@@ -2789,9 +2780,8 @@ export const WiredCreatorToolsView: FC<{}> = () =>
break;
}
- requestUserVariables();
setEditingManagedHolderVariableId(0);
- }, [ selectedManagedVariableEntry, selectedManagedHolderVariableEntry, roomSettings.canModify, editingManagedHolderValue, variablesType, updateUserVariableValue, updateFurniVariableValue, updateRoomVariableValue, requestUserVariables ]);
+ }, [ selectedManagedVariableEntry, selectedManagedHolderVariableEntry, roomSettings.canModify, editingManagedHolderValue, variablesType, updateUserVariableValue, updateFurniVariableValue, updateRoomVariableValue ]);
const giveManagedHolderVariable = useCallback(() =>
{
if(!selectedManagedVariableEntry || !selectedManagedGiveDefinition || !roomSettings.canModify) return;
@@ -2803,11 +2793,10 @@ export const WiredCreatorToolsView: FC<{}> = () =>
if(variablesType === 'user') assignUserVariable(selectedManagedVariableEntry.entityId, selectedManagedGiveDefinition.itemId, nextValue);
else assignFurniVariable(selectedManagedVariableEntry.entityId, selectedManagedGiveDefinition.itemId, nextValue);
- requestUserVariables();
setSelectedManagedHolderVariableId(selectedManagedGiveDefinition.itemId);
setManagedGiveValue('0');
setIsManagedGiveOpen(false);
- }, [ selectedManagedVariableEntry, selectedManagedGiveDefinition, roomSettings.canModify, variablesType, managedGiveValue, assignUserVariable, assignFurniVariable, requestUserVariables ]);
+ }, [ selectedManagedVariableEntry, selectedManagedGiveDefinition, roomSettings.canModify, variablesType, managedGiveValue, assignUserVariable, assignFurniVariable ]);
const removeManagedHolderVariable = useCallback(() =>
{
if(!selectedManagedVariableEntry || !selectedManagedHolderVariableEntry || !roomSettings.canModify || selectedManagedHolderVariableEntry.isReadOnly) return;
@@ -2816,9 +2805,8 @@ export const WiredCreatorToolsView: FC<{}> = () =>
if(variablesType === 'user') removeUserVariable(selectedManagedVariableEntry.entityId, selectedManagedHolderVariableEntry.variableItemId);
else removeFurniVariable(selectedManagedVariableEntry.entityId, selectedManagedHolderVariableEntry.variableItemId);
- requestUserVariables();
setEditingManagedHolderVariableId(0);
- }, [ selectedManagedVariableEntry, selectedManagedHolderVariableEntry, roomSettings.canModify, variablesType, removeUserVariable, removeFurniVariable, requestUserVariables ]);
+ }, [ selectedManagedVariableEntry, selectedManagedHolderVariableEntry, roomSettings.canModify, variablesType, removeUserVariable, removeFurniVariable ]);
const clearMonitorLogs = () =>
{
@@ -3012,28 +3000,7 @@ export const WiredCreatorToolsView: FC<{}> = () =>
return;
}
- if(selectedUser.kind === 'pet')
- {
- SendMessageComposer(new PetMoveComposer(selectedUser.userId, nextX, nextY, nextDirection));
- }
- else if((selectedUser.kind === 'user') && (selectedUser.roomIndex === roomSession.ownRoomIndex))
- {
- if(editingVariable === '@direction')
- {
- const directionVector = USER_DIRECTION_VECTORS[nextDirection] ?? USER_DIRECTION_VECTORS[0];
-
- SendMessageComposer(new RoomUnitLookComposer((currentLiveState.positionX + directionVector.x), (currentLiveState.positionY + directionVector.y)));
- }
- else
- {
- SendMessageComposer(new RoomUnitWalkComposer(nextX, nextY));
- }
- }
- else
- {
- cancelVariableEdit();
- return;
- }
+ SendMessageComposer(new WiredUserInspectMoveComposer(selectedUser.roomIndex, nextX, nextY, nextDirection));
setSelectedUserLiveState({
...currentLiveState,
@@ -3352,10 +3319,9 @@ export const WiredCreatorToolsView: FC<{}> = () =>
setSelectedInspectionVariableKeys(prev => ({ ...prev, furni: selectedInspectionGiveDefinition.name }));
}
- requestUserVariables();
setInspectionGiveValue('0');
setIsInspectionGiveOpen(false);
- }, [ canManageInspectionVariableAssignments, selectedInspectionGiveDefinition, inspectionGiveValue, inspectionType, selectedUser, assignUserVariable, selectedFurni, assignFurniVariable, requestUserVariables ]);
+ }, [ canManageInspectionVariableAssignments, selectedInspectionGiveDefinition, inspectionGiveValue, inspectionType, selectedUser, assignUserVariable, selectedFurni, assignFurniVariable ]);
const removeInspectionVariable = useCallback(() =>
{
if(!canManageInspectionVariableAssignments || !selectedInspectionCustomDefinition || selectedInspectionCustomDefinition.isReadOnly) return;
@@ -3373,25 +3339,44 @@ export const WiredCreatorToolsView: FC<{}> = () =>
setSelectedInspectionVariableKeys(prev => ({ ...prev, furni: '' }));
}
- requestUserVariables();
setIsInspectionGiveOpen(false);
- }, [ canManageInspectionVariableAssignments, selectedInspectionCustomDefinition, inspectionType, selectedUser, removeUserVariable, selectedFurni, removeFurniVariable, requestUserVariables ]);
+ }, [ canManageInspectionVariableAssignments, selectedInspectionCustomDefinition, inspectionType, selectedUser, removeUserVariable, selectedFurni, removeFurniVariable ]);
const onVariableInputKeyDown = (event: KeyboardEvent) =>
{
event.stopPropagation();
- if(event.nativeEvent.stopImmediatePropagation) event.nativeEvent.stopImmediatePropagation();
-
switch(event.key)
{
case 'Enter':
+ case 'NumpadEnter':
event.preventDefault();
commitVariableEdit();
+ window.requestAnimationFrame(() => event.currentTarget.blur());
return;
case 'Escape':
event.preventDefault();
cancelVariableEdit();
+ window.requestAnimationFrame(() => event.currentTarget.blur());
+ return;
+ }
+ };
+ const onManagedHolderValueInputKeyDown = (event: KeyboardEvent) =>
+ {
+ event.stopPropagation();
+
+ switch(event.key)
+ {
+ case 'Enter':
+ case 'NumpadEnter':
+ event.preventDefault();
+ commitManagedHolderValueEdit();
+ window.requestAnimationFrame(() => event.currentTarget.blur());
+ return;
+ case 'Escape':
+ event.preventDefault();
+ setEditingManagedHolderVariableId(0);
+ window.requestAnimationFrame(() => event.currentTarget.blur());
return;
}
};
@@ -3731,15 +3716,9 @@ export const WiredCreatorToolsView: FC<{}> = () =>
type="text"
value={ editingValue }
onClick={ event => event.stopPropagation() }
- onBlur={ commitVariableEdit }
+ onBlur={ cancelVariableEdit }
onChange={ event => setEditingValue(event.target.value) }
- onKeyDownCapture={ event =>
- {
- event.stopPropagation();
-
- if(event.nativeEvent.stopImmediatePropagation) event.nativeEvent.stopImmediatePropagation();
- } }
- onKeyDown={ onVariableInputKeyDown } /> }
+ onKeyDownCapture={ onVariableInputKeyDown } /> }
{ (editingVariable !== variable.key) && !variable.editable && { variable.value } }
{ (editingVariable !== variable.key) && variable.editable &&