duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-20 07:26:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Small updates

Browse Source
This commit is contained in:
duckietm
2026-04-14 11:18:46 +02:00
parent 05c288b5db
commit 3a648663ec
5 changed files with 69 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/toolbar/ToolbarItemView.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ export const ToolbarItemView = forwardRef<HTMLDivElement, PropsWithChildren<{
<div
ref={ ref }
className={ classNames(
'relative h-[32px] w-[32px] shrink-0 cursor-pointer bg-center bg-no-repeat transition-transform duration-200 ease-out hover:-translate-y-[1px] active:translate-y-0',
'cursor-pointer relative',
`nitro-icon icon-${ icon }`,
className
) }
src/components/toolbar/ToolbarMeView.tsx
+26 -20
View File
@@ -1,9 +1,8 @@
import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, RoomObjectCategory } from '@nitrots/nitro-renderer';
import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile, LocalizeText } from '../../api';
import { LayoutItemCountView } from '../../common';
import { Flex, LayoutItemCountView } from '../../common';
import { GuideToolEvent } from '../../events';
import { ToolbarItemView } from './ToolbarItemView';
export const ToolbarMeView: FC<PropsWithChildren<{
useGuideTool: boolean;
@@ -11,8 +10,8 @@ export const ToolbarMeView: FC<PropsWithChildren<{
setMeExpanded: Dispatch<SetStateAction<boolean>>;
}>> = props =>
{
const { useGuideTool = false, unseenAchievementCount = 0, children = null } = props;
const elementRef = useRef<HTMLDivElement>(null);
const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
const elementRef = useRef<HTMLDivElement>();
useEffect(() =>
{
@@ -23,22 +22,29 @@ export const ToolbarMeView: FC<PropsWithChildren<{
GetRoomEngine().selectRoomObject(roomSession.roomId, roomSession.ownRoomIndex, RoomObjectCategory.UNIT);
}, []);
useEffect(() =>
{
const onClick = (event: MouseEvent) => setMeExpanded(false);
document.addEventListener('click', onClick);
return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
}, [ setMeExpanded ]);
return (
<div className="w-fit max-w-[min(calc(100vw-16px),520px)] rounded-[12px] border border-white/8 bg-[rgba(10,10,12,0.58)] px-[10px] py-[7px] shadow-[0_10px_24px_rgba(0,0,0,0.2)]" ref={ elementRef }>
<div className="flex items-center gap-[8px] overflow-x-auto overflow-y-visible whitespace-nowrap">
{ (GetConfigurationValue('guides.enabled') && useGuideTool) &&
<ToolbarItemView icon="me-helper-tool" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } title={ LocalizeText('guide.help.button.label') } /> }
<ToolbarItemView icon="me-achievements" onClick={ event => CreateLinkEvent('achievements/toggle') } title={ LocalizeText('toolbar.icon.label.achievements') }>
{ (unseenAchievementCount > 0) &&
<LayoutItemCountView count={ unseenAchievementCount } /> }
</ToolbarItemView>
<ToolbarItemView icon="me-profile" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } title={ LocalizeText('toolbar.icon.label.memenu') } />
<ToolbarItemView icon="me-rooms" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } title={ LocalizeText('navigator.myworlds') } />
<ToolbarItemView icon="me-clothing" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } title={ LocalizeText('widget.memenu.settings.avatar') } />
<ToolbarItemView icon="me-settings" onClick={ event => CreateLinkEvent('user-settings/toggle') } title={ LocalizeText('widget.memenu.settings.title') } />
<ToolbarItemView icon="me-forums" onClick={ event => CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
{ children }
<Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,20,20,.95)] border border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,255,255,.1),inset_-2px_-2px_rgba(255,255,255,.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
{ (GetConfigurationValue('guides.enabled') && useGuideTool) &&
<div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
<div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>
{ (unseenAchievementCount > 0) &&
<LayoutItemCountView count={ unseenAchievementCount } /> }
</div>
</div>
<div className="navigation-item relative nitro-icon icon-me-profile cursor-pointer" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } />
<div className="navigation-item relative nitro-icon icon-me-rooms cursor-pointer" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } />
<div className="navigation-item relative nitro-icon icon-me-clothing cursor-pointer" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } />
<div className="navigation-item relative nitro-icon icon-me-settings cursor-pointer" onClick={ event => CreateLinkEvent('user-settings/toggle') } />
<div className="navigation-item relative nitro-icon icon-me-forums cursor-pointer" onClick={ event => CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
{ children }
</Flex>
);
};
src/components/toolbar/ToolbarView.tsx
+3 -76
View File
@@ -3,28 +3,15 @@ import { AnimatePresence, motion } from 'framer-motion';
import { FC, useEffect, useState } from 'react';
import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo, useWiredTools } from '../../hooks';
import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
import { ToolbarItemView } from './ToolbarItemView';
import { ToolbarMeView } from './ToolbarMeView';
import { YouTubePlayerView } from './YouTubePlayerView';
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 [ youtubeEnabled, setYoutubeEnabled ] = useState(false);
const { userFigure = null } = useSessionInfo();
@@ -32,10 +19,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
const { getTotalUnseen = 0 } = useAchievements();
const { requests = [] } = useFriends();
const { iconState = MessengerIconState.HIDDEN } = useMessenger();
const { openMonitor, showToolbarButton } = useWiredTools();
const isMod = GetSessionDataManager().isModerator;
const hasDesktopUnifiedShell = (isInRoom && isToolbarOpen);
const showDesktopShell = (isToolbarOpen || !isInRoom);
useMessageEvent<YouTubeRoomSettingsEvent>(YouTubeRoomSettingsEvent, event =>
{
@@ -78,11 +62,13 @@ 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))
@@ -153,62 +139,3 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
</>
);
};
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;
}
`;