nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 15:40:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update animations

Browse Source
This commit is contained in:
Bill 2024-07-02 21:57:29 -04:00
parent 23f6bdbf4b
commit 36f9c0ff0e
15 changed files with 90 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -11,12 +11,12 @@
},
"dependencies": {
"@tanstack/react-virtual": "3.5.1",
"framer-motion": "^11.2.12",
"react": "^18.3.1",
"react-bootstrap": "^2.2.2",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
"react-slider": "^2.0.6",
"react-transition-group": "^4.4.5",
"react-youtube": "^7.13.1",
"use-between": "^1.3.5"
},

1
src/common/index.ts
View File

@ -18,6 +18,5 @@ export * from './classNames';
export * from './draggable-window';
export * from './layout';
export * from './layout/limited-edition';
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 '../Flex';
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>
);
};

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

@ -1,49 +0,0 @@
import { FC, ReactNode, useEffect, useState } from 'react';
import { Transition } from 'react-transition-group';
import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
export const TransitionAnimation: FC<{
type: string;
inProp: boolean;
timeout?: number;
className?: string;
children?: ReactNode;
}> = 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,6 +1,7 @@
import { AddLinkEventTracker, GetCommunication, HabboWebTools, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useEffect, useState } from 'react';
import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { Base } from '../../common';
import { useNitroEvent } from '../../hooks';
import { AchievementsView } from '../achievements/AchievementsView';
import { AvatarEditorView } from '../avatar-editor';
@ -80,9 +81,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 />

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

@ -1,7 +1,7 @@
import { GetRenderer } from '@nitrots/nitro-renderer';
import { GetRenderer, RoomSession } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useEffect, useRef } from 'react';
import { DispatchMouseEvent, DispatchTouchEvent } from '../../api';
import { Base } from '../../common';
import { useRoom } from '../../hooks';
import { RoomSpectatorView } from './spectator/RoomSpectatorView';
import { RoomWidgetsView } from './widgets/RoomWidgetsView';
@ -13,6 +13,8 @@ export const RoomView: FC<{}> = props =>
useEffect(() =>
{
if(!roomSession) return;
const canvas = GetRenderer().canvas;
if(!canvas) return;
@ -32,15 +34,23 @@ export const RoomView: FC<{}> = props =>
if(!element) return;
element.appendChild(canvas);
}, []);
}, [ roomSession ]);
return (
<Base fit innerRef={ elementRef } className={ (!roomSession && 'd-none') }>
{ roomSession &&
<AnimatePresence>
{ !!roomSession &&
<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>
);
};

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

@ -12,9 +12,10 @@ 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(() =>
{

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

@ -1,7 +1,8 @@
import { CreateLinkEvent, GetGuestRoomResultEvent, GetRoomEngine, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useEffect, useState } from 'react';
import { LocalizeText, SendMessageComposer } 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 =>
@ -80,7 +81,12 @@ export const RoomToolsWidgetView: FC<{}> = props =>
<Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
</Column>
<Column justifyContent="center">
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 300 }>
<AnimatePresence>
{ isOpen &&
<motion.div
initial={ { x: -400 }}
animate={ { x: 0 }}
exit={ { x: -400 }}>
<Column center>
<Column className="nitro-room-tools-info rounded py-2 px-3">
<Column gap={ 1 }>
@ -93,7 +99,8 @@ export const RoomToolsWidgetView: FC<{}> = props =>
</Flex> }
</Column>
</Column>
</TransitionAnimation>
</motion.div> }
</AnimatePresence>
</Column>
</Flex>
);

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

@ -4,14 +4,11 @@ import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile
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
src/components/toolbar/ToolbarView.tsx
View File

@ -1,7 +1,8 @@
import { CreateLinkEvent, Dispose, DropBounce, EaseOut, GetSessionDataManager, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useState } from 'react';
import { GetConfigurationValue, 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, useNitroEvent, useSessionInfo } from '../../hooks';
import { ToolbarMeView } from './ToolbarMeView';
@ -65,13 +66,23 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
return (
<>
<TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
<AnimatePresence>
{ isMeExpanded &&
<motion.div
initial={ { opacity: 0 }}
animate={ { opacity: 1 }}
exit={ { opacity: 0 }}>
<ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
</TransitionAnimation>
</motion.div> }
</AnimatePresence>
<Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar py-1 px-3">
<Flex gap={ 2 } alignItems="center">
<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={ event =>
{
setMeExpanded(!isMeExpanded);
event.stopPropagation();
} }>
<LayoutAvatarImageView figure={ userFigure } direction={ 2 } position="absolute" />
{ (getTotalUnseen > 0) &&
<LayoutItemCountView 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 ]);

7
yarn.lock
View File

@ -1519,6 +1519,13 @@ for-each@^0.3.3:
dependencies:
is-callable "^1.1.3"
framer-motion@^11.2.12:
version "11.2.12"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.2.12.tgz#ca5c49f8a1c70163cbadabcbd318acdcfea569fb"
integrity sha512-lCjkV4nA9rWOy2bhR4RZzkp2xpB++kFmUZ6D44V9VQaxk+JDmbDd5lq+u58DjJIIllE8AZEXp9OG/TyDN4FB/w==
dependencies:
tslib "^2.4.0"
fsevents@~2.3.2, fsevents@~2.3.3:
version "2.3.3"
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"