duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 14:26:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎴 Updated Animation

Browse Source 
Please run yarn install as we have added a other way to do animation
This commit is contained in:
duckietm 2025-03-31 13:56:50 +02:00
parent 44e2514921
commit 1949f7c807
17 changed files with 191 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -18,6 +18,7 @@
"dompurify": "^3.0.11",
"emoji-mart": "^5.5.2",
"emoji-toolkit": "8.0.0",
"framer-motion": "^11.2.12",
"react": "^18.2.0",
"react-bootstrap": "^2.7.2",
"react-dom": "^18.2.0",

10
src/App.tsx
View File

@ -1,7 +1,8 @@
import { ConfigurationEvent, GetAssetManager, HabboWebTools, LegacyExternalInterface, Nitro, NitroCommunicationDemoEvent, NitroConfiguration, NitroEvent, NitroLocalizationEvent, NitroVersion, RoomEngineEvent } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { Base } from './common';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetCommunication, GetConfiguration, GetNitroInstance, GetUIVersion } from './api';
import { Base, TransitionAnimation, TransitionAnimationTypes } from './common';
import { LoadingView } from './components/loading/LoadingView';
import { MainView } from './components/main/MainView';
import { useConfigurationEvent, useLocalizationEvent, useMainEvent, useRoomEngineEvent } from './hooks';
@ -132,9 +133,12 @@ export const App: FC<{}> = props =>
<Base fit overflow="hidden" className={ imageRendering && 'image-rendering-pixelated' }>
{ (!isReady || isError) &&
<LoadingView isError={ isError } message={ message } percent={ percent } /> }
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ (isReady) }>
<AnimatePresence>
{ isReady && ( <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.3 }}>
<MainView />
</TransitionAnimation>
</motion.div>
)}
</AnimatePresence>
<Base id="draggable-windows-container" />
</Base>
);

1
src/common/index.ts
View File

@ -18,6 +18,5 @@ export * from './layout';
export * from './layout/limited-edition';
export * from "./Slider";
export * from './Text';
export * from './transitions';
export * from './types';
export * from './utils';

12
src/common/layout/LayoutNotificationBubbleView.tsx
View File

@ -1,6 +1,6 @@
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useEffect, useMemo, useState } from 'react';
import { Flex, FlexProps } from '..';
import { TransitionAnimation, TransitionAnimationTypes } from '../transitions';
export interface LayoutNotificationBubbleViewProps extends FlexProps
{
@ -45,8 +45,14 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
}, [ fadesOut, timeoutMs, onClose ]);
return (
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isVisible } timeout={ 300 }>
<AnimatePresence>
{ isVisible &&
<motion.div
initial={ { opacity: 0 }}
animate={ { opacity: 1 }}
exit={ { opacity: 0 }}>
<Flex overflow={ overflow } classNames={ getClassNames } onClick={ onClose } { ...rest } />
</TransitionAnimation>
</motion.div> }
</AnimatePresence>
);
}

52
src/common/transitions/TransitionAnimation.tsx
View File

@ -1,52 +0,0 @@
import { FC, ReactNode, useEffect, useState } from 'react';
import { Transition } from 'react-transition-group';
import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
interface TransitionAnimationProps
{
type: string;
inProp: boolean;
timeout?: number;
className?: string;
children?: ReactNode;
}
export const TransitionAnimation: FC<TransitionAnimationProps> = props =>
{
const { type = null, inProp = false, timeout = 300, className = null, children = null } = props;
const [ isChildrenVisible, setChildrenVisible ] = useState(false);
useEffect(() =>
{
let timeoutData: ReturnType<typeof setTimeout> = null;
if(inProp)
{
setChildrenVisible(true);
}
else
{
timeoutData = setTimeout(() =>
{
setChildrenVisible(false);
clearTimeout(timeout);
}, timeout);
}
return () =>
{
if(timeoutData) clearTimeout(timeoutData);
}
}, [ inProp, timeout ]);
return (
<Transition in={ inProp } timeout={ timeout }>
{ state => (
<div className={ (className ?? '') + ' animate__animated' } style={ { ...getTransitionAnimationStyle(type, state, timeout) } }>
{ isChildrenVisible && children }
</div>
) }
</Transition>
);
}

136
src/common/transitions/TransitionAnimationStyles.ts
View File

@ -1,136 +0,0 @@
import { CSSProperties } from 'react';
import { TransitionStatus } from 'react-transition-group';
import { ENTERING, EXITING } from 'react-transition-group/Transition';
import { TransitionAnimationTypes } from './TransitionAnimationTypes';
export function getTransitionAnimationStyle(type: string, transition: TransitionStatus, timeout: number = 300): Partial<CSSProperties>
{
switch(type)
{
case TransitionAnimationTypes.BOUNCE:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: 'bounceIn',
animationDuration: `${ timeout }ms`
}
case EXITING:
return {
animationName: 'bounceOut',
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.SLIDE_LEFT:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: 'slideInLeft',
animationDuration: `${ timeout }ms`
}
case EXITING:
return {
animationName: 'slideOutLeft',
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.SLIDE_RIGHT:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: 'slideInRight',
animationDuration: `${ timeout }ms`
}
case EXITING:
return {
animationName: 'slideOutRight',
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.FLIP_X:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: 'flipInX',
animationDuration: `${ timeout }ms`
}
case EXITING:
return {
animationName: 'flipOutX',
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.FADE_UP:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: 'fadeInUp',
animationDuration: `${ timeout }ms`
}
case EXITING:
return {
animationName: 'fadeOutDown',
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.FADE_IN:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: 'fadeIn',
animationDuration: `${ timeout }ms`
}
case EXITING:
return {
animationName: 'fadeOut',
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.FADE_DOWN:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: 'fadeInDown',
animationDuration: `${ timeout }ms`
}
case EXITING:
return {
animationName: 'fadeOutUp',
animationDuration: `${ timeout }ms`
}
}
case TransitionAnimationTypes.HEAD_SHAKE:
switch(transition)
{
default:
return {}
case ENTERING:
return {
animationName: 'headShake',
animationDuration: `${ timeout }ms`
}
}
}
return null;
}

11
src/common/transitions/TransitionAnimationTypes.ts
View File

@ -1,11 +0,0 @@
export class TransitionAnimationTypes
{
public static BOUNCE: string = 'bounce';
public static SLIDE_LEFT: string = 'slideLeft';
public static SLIDE_RIGHT: string = 'slideRight';
public static FLIP_X: string = 'flipX';
public static FADE_IN: string = 'fadeIn';
public static FADE_DOWN: string = 'fadeDown';
public static FADE_UP: string = 'fadeUp';
public static HEAD_SHAKE: string = 'headShake';
}

3
src/common/transitions/index.ts
View File

@ -1,3 +0,0 @@
export * from './TransitionAnimation';
export * from './TransitionAnimationStyles';
export * from './TransitionAnimationTypes';

13
src/components/main/MainView.tsx
View File

@ -1,7 +1,8 @@
import { HabboWebTools, ILinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { AddEventLinkTracker, GetCommunication, RemoveLinkEventTracker } from '../../api';
import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { AnimatePresence, motion } from 'framer-motion';
import { Base } from '../../common';
import { useRoomSessionManagerEvent } from '../../hooks';
import { AchievementsView } from '../achievements/AchievementsView';
import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
@ -83,9 +84,15 @@ export const MainView: FC<{}> = props =>
return (
<Base fit>
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ landingViewVisible } timeout={ 300 }>
<AnimatePresence>
{ landingViewVisible &&
<motion.div
initial={ { opacity: 0 }}
animate={ { opacity: 1 }}
exit={ { opacity: 0 }}>
<HotelView />
</TransitionAnimation>
</motion.div> }
</AnimatePresence>
<ToolbarView isInRoom={ !landingViewVisible } />
<ModToolsView />
<RoomView />

23
src/components/room/RoomView.tsx
View File

@ -1,3 +1,5 @@
import { RoomSession } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useEffect, useRef } from 'react';
import { DispatchMouseEvent, DispatchTouchEvent, GetNitroInstance } from '../../api';
import { Base } from '../../common';
@ -12,6 +14,8 @@ export const RoomView: FC<{}> = props =>
useEffect(() =>
{
if(!roomSession) return;
const canvas = GetNitroInstance().application.renderer.view;
if(!canvas) return;
@ -31,15 +35,24 @@ export const RoomView: FC<{}> = props =>
if(!element) return;
element.appendChild(canvas);
}, []);
}, [ roomSession ]);
return (
<Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
{ roomSession &&
<AnimatePresence>
{
<motion.div
initial={ { opacity: 0 }}
animate={ { opacity: 1 }}
exit={ { opacity: 0 }}>
<div ref={ elementRef } className="w-100 h-100">
{ roomSession instanceof RoomSession &&
<>
<RoomWidgetsView />
{ roomSession.isSpectator && <RoomSpectatorView /> }
</> }
</Base>
</div>
</motion.div>
}
</AnimatePresence>
);
}
};

17
src/components/room/widgets/RoomWidgets.scss
View File

@ -1,7 +1,9 @@
.nitro-room-tools-container {
position: absolute;
bottom: $toolbar-height + 25px;
left: 0;
left: 0px;
display: flex; // Lay out children side by side
align-items: flex-start; // Align items to the top
.nitro-room-tools {
background: #212131;
@ -9,13 +11,13 @@
border-top-right-radius: $border-radius;
border-bottom-right-radius: $border-radius;
transition: all .2s ease;
z-index: 71;
z-index: 2;
margin-left: -20px;
.list-group-item {
background: transparent;
padding: 3px 0px;
color: $white;
color: #FFF;
border-color: rgba($black, 0.3);
cursor: pointer;
@ -46,13 +48,20 @@
}
}
.nitro-room-tools-side-container {
display: flex;
flex-direction: column; // Stack children vertically
margin-left: 10px; // Space between nitro-room-tools and side container
gap: 10px; // Space between history and info
}
.nitro-room-history {
background: #212131;
box-shadow: inset 0px 5px lighten(rgba($dark, .6), 2.5), inset 0 -4px darken(rgba($dark, .6), 4);
transition: all .2s ease;
width: 150px;
overflow: hidden;
z-index: 3;
z-index: 1;
}
.nitro-room-tools-info {

4
src/components/room/widgets/furniture/FurnitureCraftingView.tsx
View File

@ -12,9 +12,11 @@ export const FurnitureCraftingView: FC<{}> = props =>
const isOwner = useMemo(() =>
{
if(!roomSession) return false;
const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, objectId, RoomObjectCategory.FLOOR);
return IsOwnerOfFurniture(roomObject);
}, [ objectId, roomSession.roomId ]);
}, [ objectId, roomSession ]);
const canCraft = useMemo(() =>
{

70
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -1,7 +1,8 @@
import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer, RoomDataParser } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useEffect, useState } from 'react';
import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
import { Base, Column, Flex, Text, classNames } from '../../../../common';
import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
export const RoomToolsWidgetView: FC<{}> = props =>
@ -31,12 +32,9 @@ export const RoomToolsWidgetView: FC<{}> = props =>
setIsZoomedIn(prevValue =>
{
let scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
if(!prevValue) scale /= 2;
else scale *= 2;
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale);
return !prevValue;
});
return;
@ -85,13 +83,9 @@ export const RoomToolsWidgetView: FC<{}> = props =>
const onChangeRoomHistory = (roomId: number, roomName: string) =>
{
let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history'));
if (newStorage && newStorage.filter( (room: RoomDataParser) => room.roomId === roomId ).length > 0) return;
if (newStorage && newStorage.length >= 10) newStorage.shift();
const newData = !newStorage ? [ { roomId: roomId, roomName: roomName } ] : [ ...newStorage, { roomId: roomId, roomName: roomName } ];
setRoomHistory(newData);
return SetLocalStorage('nitro.room.history', newData );
}
@ -99,13 +93,11 @@ export const RoomToolsWidgetView: FC<{}> = props =>
useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event =>
{
const parser = event.getParser();
if(!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
if(roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
onChangeRoomHistory(parser.data.roomId, parser.data.roomName);
});
@ -115,21 +107,14 @@ export const RoomToolsWidgetView: FC<{}> = props =>
{
if (JSON.parse(window.localStorage.getItem('nitro.room.history'))) window.localStorage.removeItem('nitro.room.history');
};
window.addEventListener('beforeunload', handleTabClose);
return () =>
{
window.removeEventListener('beforeunload', handleTabClose);
};
return () => window.removeEventListener('beforeunload', handleTabClose);
}, []);
useEffect(() =>
{
setIsOpen(true);
const timeout = setTimeout(() => setIsOpen(false), 5000);
return () => clearTimeout(timeout);
}, [ roomName, roomOwner, roomTags, show ]);
@ -164,7 +149,8 @@ export const RoomToolsWidgetView: FC<{}> = props =>
<Text variant="muted" underline small onClick={ () => handleToolClick('zoom') }>{ LocalizeText('room.zoom.button.text') }</Text>
</Flex>
<Flex className="w-100 room-tool-item">
<Text variant="muted" underline small onClick={ () => handleToolClick('chat_history') }>{ LocalizeText('room.chathistory.button.text') }</Text></Flex>
<Text variant="muted" underline small onClick={ () => handleToolClick('chat_history') }>{ LocalizeText('room.chathistory.button.text') }</Text>
</Flex>
{ navigatorData.canRate &&
<Flex className="w-100 room-tool-item">
<Text variant="muted" underline small onClick={ () => handleToolClick('like_room') }>{ LocalizeText('room.like.button.text') }</Text>
@ -183,34 +169,50 @@ export const RoomToolsWidgetView: FC<{}> = props =>
<Base pointer={ roomHistory.length > 1 && roomHistory[roomHistory.length - 1]?.roomId !== navigatorData.currentRoomId } title={ LocalizeText('room.history.button.forward.tooltip') } className={ `icon ${ (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? 'icon-room-history-next-disabled' : 'icon-room-history-next-enabled' }` } onClick={ () => (roomHistory?.length === 0 || roomHistory[roomHistory.length - 1]?.roomId === navigatorData.currentRoomId) ? null : handleToolClick('room_history_next') } />
</Flex>
</Column>
<Flex className="nitro-room-tools-history" style={ { bottom: !navigatorData.canRate ? '180px' : '210px' } }>
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpenHistory }>
<Flex className="nitro-room-tools-side-container">
<AnimatePresence>
{ isOpenHistory && ( <motion.div initial={{ x: -400 }} animate={{ x: 0 }} exit={{ x: -400 }}>
<Column center>
<Column className="px-3 py-2 rounded nitro-room-history">
<Column gap={ 1 }>
{ (roomHistory.length > 0) && roomHistory.map(history =>
{
return <Text key={ history.roomId } bold={ history.roomId === navigatorData.currentRoomId } variant={ history.roomId === navigatorData.currentRoomId ? 'white' : 'muted' } pointer onClick={ () => TryVisitRoom(history.roomId) }>{ history.roomName }</Text>;
}) }
<Text key={ history.roomId } bold={ history.roomId === navigatorData.currentRoomId } variant={ history.roomId === navigatorData.currentRoomId ? 'white' : 'muted' } pointer onClick={ () => TryVisitRoom(history.roomId) }>{ history.roomName }</Text>
) }
</Column>
</Column>
</Column>
</TransitionAnimation>
</Flex>
<Column justifyContent="center">
<TransitionAnimation type={TransitionAnimationTypes.SLIDE_LEFT} inProp={isOpen} timeout={300}>
</motion.div>
)}
</AnimatePresence>
<AnimatePresence>
{ isOpen && ( <motion.div initial={{ x: -400 }} animate={{ x: 0 }} exit={{ x: -400 }}>
<Column center>
<Column className="px-3 py-2 rounded nitro-room-tools-info" overflow="hidden">
<Column gap={1}> <Text wrap variant="white" fontSize={4} truncate>{roomName}</Text> <Text variant="muted" fontSize={5} truncate>{roomOwner}</Text> </Column>
<Column gap={1}>
<Text wrap variant="white" fontSize={4} truncate>{roomName}</Text>
<Text variant="muted" fontSize={5} truncate>{roomOwner}</Text>
</Column>
{roomTags && roomTags.length > 0 ? (
<Flex gap={2}> {roomTags.map((tag, index) => ( <Text key={index} small pointer truncate variant="white" className="rounded bg-primary p-1" onClick={() => handleToolClick('navigator_search_tag', tag)} > #{tag} </Text> ))}
</Flex> ) : ( <Text variant="muted"> { LocalizeText('navigator.notagsfound') } </Text> )}
<Flex gap={2}>
{roomTags.map((tag, index) => (
<Text key={index} small pointer truncate variant="white" className="rounded bg-primary p-1" onClick={() => handleToolClick('navigator_search_tag', tag)}>
#{tag}
</Text>
))}
</Flex>
) : (
<Text variant="muted">{ LocalizeText('navigator.notagsfound') }</Text>
)}
</Column>
</Column>
</TransitionAnimation>
</Column>
</motion.div>
)}
</AnimatePresence>
</Flex>
</>
) }
)}
</Flex>
);
}

30
src/components/toolbar/ToolbarMeView.tsx
View File

@ -1,17 +1,14 @@
import { MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
import { CreateLinkEvent, DispatchUiEvent, GetConfiguration, GetRoomEngine, GetRoomSession, GetSessionDataManager, GetUserProfile } from '../../api';
import { CreateLinkEvent, DispatchUiEvent, GetConfiguration, GetRoomEngine, GetRoomSession, GetUserProfile } from '../../api';
import { Base, Flex, LayoutItemCountView } from '../../common';
import { GuideToolEvent } from '../../events';
interface ToolbarMeViewProps
{
export const ToolbarMeView: FC<PropsWithChildren<{
useGuideTool: boolean;
unseenAchievementCount: number;
setMeExpanded: Dispatch<SetStateAction<boolean>>;
}
export const ToolbarMeView: FC<PropsWithChildren<ToolbarMeViewProps>> = props =>
}>> = props =>
{
const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
const elementRef = useRef<HTMLDivElement>();
@ -19,7 +16,6 @@ export const ToolbarMeView: FC<PropsWithChildren<ToolbarMeViewProps>> = props =>
useEffect(() =>
{
const roomSession = GetRoomSession();
if(!roomSession) return;
GetRoomEngine().selectRoomObject(roomSession.roomId, roomSession.ownRoomIndex, RoomObjectCategory.UNIT);
@ -27,15 +23,25 @@ export const ToolbarMeView: FC<PropsWithChildren<ToolbarMeViewProps>> = props =>
useEffect(() =>
{
const onClick = (event: MouseEvent) => setMeExpanded(false);
const handleClickOutside = (event: MouseEvent) =>
{
if (elementRef.current && !elementRef.current.contains(event.target as Node))
{
setMeExpanded(false);
}
};
document.addEventListener('click', onClick);
return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
document.addEventListener('click', handleClickOutside);
return () => document.removeEventListener('click', handleClickOutside);
}, [ setMeExpanded ]);
const handleMenuClick = (event: React.MouseEvent) =>
{
event.stopPropagation();
};
return (
<Flex innerRef={ elementRef } alignItems="center" className="nitro-toolbar-me p-2" gap={ 2 }>
<Flex innerRef={ elementRef } alignItems="center" className="nitro-toolbar-me p-2" gap={ 2 } onClick={ handleMenuClick } >
{ (GetConfiguration('guides.enabled') && useGuideTool) &&
<Base pointer className="navigation-item icon icon-me-helper-tool click-box" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
<Base pointer className="navigation-item icon icon-me-achievements click-box" onClick={ event => CreateLinkEvent('achievements/toggle') }>

4
src/components/toolbar/ToolbarView.scss
View File

@ -70,7 +70,7 @@
.nitro-toolbar-me {
position: absolute;
bottom: 68px;
bottom: 35px;
left: 15px;
z-index: $toolbar-memenu-zindex;
//background: rgba(20, 20, 20, .95);
@ -87,7 +87,7 @@
row-gap: 0rem!important;
height: 200px;
left: 62px;
z-index: 9999999;
z-index: 1;
}
.navigation-item {

43
src/components/toolbar/ToolbarView.tsx
View File

@ -1,7 +1,8 @@
import { Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
import { FC, useState } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useState, useEffect } from 'react';
import { CreateLinkEvent, GetConfiguration, GetSessionDataManager, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useRoomEngineEvent, useSessionInfo } from '../../hooks';
import { ToolbarMeView } from './ToolbarMeView';
@ -20,7 +21,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
useMessageEvent<PerkAllowancesMessageEvent>(PerkAllowancesMessageEvent, event =>
{
const parser = event.getParser();
setUseGuideTool(parser.isAllowed(PerkEnum.USE_GUIDE_TOOL));
});
@ -29,25 +29,21 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
const animationIconToToolbar = (iconName: string, image: HTMLImageElement, x: number, y: number) =>
{
const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
if(!target) return;
image.className = 'toolbar-icon-animation';
image.style.visibility = 'visible';
image.style.left = (x + 'px');
image.style.top = (y + 'px');
document.body.append(image);
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))
@ -56,22 +52,45 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
}
const motion = new Queue(new EaseOut(new JumpBy(image, wait, ((targetBounds.x - imageBounds.x) + height), (targetBounds.y - imageBounds.y), 100, 1), 1), new Dispose(image));
Motions.runMotion(motion);
}
animationIconToToolbar('icon-inventory', event.image, event.x, event.y);
});
const handleAvatarClick = (event: React.MouseEvent) => {
event.stopPropagation();
setMeExpanded(prev => !prev);
};
return (
<>
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
<ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
</TransitionAnimation>
<AnimatePresence>
{ isMeExpanded && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.3 }}
className="nitro-toolbar-me"
>
<ToolbarMeView
useGuideTool={ useGuideTool }
unseenAchievementCount={ getTotalUnseen }
setMeExpanded={ setMeExpanded }
/>
</motion.div>
)}
</AnimatePresence>
<Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar py-1 px-3">
<Flex gap={ 2 } alignItems="center" className="widthsizemax">
<Flex alignItems="center" gap={ 2 }>
<Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
<Flex
center
pointer
className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') }
onClick={ handleAvatarClick }
>
<LayoutAvatarImageView figure={ userFigure } headOnly={ true } direction={ 2 } position="absolute" />
{ (getTotalUnseen > 0) &&
<LayoutItemCountView className="text-black" count={ getTotalUnseen } /> }

2
src/hooks/rooms/widgets/useAvatarInfoWidget.ts
View File

@ -346,6 +346,8 @@ const useAvatarInfoWidgetState = () =>
useEffect(() =>
{
if(!roomSession) return;
roomSession.isDecorating = isDecorating;
}, [ roomSession, isDecorating ]);