diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx index 8671afbf..9cfdadc1 100644 --- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx +++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx @@ -174,13 +174,18 @@ export const AvatarInfoWidgetView: FC = props => setInfoStandEvent(null); }, []); + const clearName = useCallback(() => + { + setName(null); + }, []); + const currentView = useMemo(() => { if(isGameMode) return null; if(decorateView) return decorateView; - if(name) return ; + if(name) return ; if(infoStandEvent) { diff --git a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx index 8c97bf51..abbe4e68 100644 --- a/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx +++ b/src/views/room/widgets/avatar-info/views/decorate/AvatarInfoWidgetDecorateView.tsx @@ -11,7 +11,7 @@ export const AvatarInfoWidgetDecorateView: FC const { userId = -1, userName = '', roomIndex = -1, setIsDecorating = null } = props; return ( - + setIsDecorating(false) }> { LocalizeText('widget.avatar.stop_decorating') } diff --git a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx b/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx index 0cb6d0fc..27a9a574 100644 --- a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx +++ b/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx @@ -1,21 +1,23 @@ -import { FC, useCallback } from 'react'; +import { FC, useMemo } from 'react'; +import { GetSessionDataManager } from '../../../../../../api'; import { ContextMenuView } from '../../../context-menu/ContextMenuView'; +import { ContextMenuHeaderView } from '../../../context-menu/views/header/ContextMenuHeaderView'; import { AvatarInfoWidgetNameViewProps } from './AvatarInfoWidgetNameView.types'; export const AvatarInfoWidgetNameView: FC = props => { - const { event = null } = props; + const { nameData = null, close = null } = props; - const onClose = useCallback(() => + const fades = useMemo(() => { - - }, []); + return (nameData.id !== GetSessionDataManager().userId); + }, [ nameData ]); return ( - -
- { event.name } -
+ + + { nameData.name } + ); } diff --git a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts b/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts index aa506777..f20941fa 100644 --- a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts +++ b/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.types.ts @@ -2,5 +2,6 @@ import { RoomWidgetObjectNameEvent } from '../../../../events'; export interface AvatarInfoWidgetNameViewProps { - event: RoomWidgetObjectNameEvent; + nameData: RoomWidgetObjectNameEvent; + close: () => void; } diff --git a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx index b39417fd..43be5dbb 100644 --- a/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx +++ b/src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx @@ -106,7 +106,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC + { userData.name } diff --git a/src/views/room/widgets/context-menu/ContextMenuView.tsx b/src/views/room/widgets/context-menu/ContextMenuView.tsx index 57cbbeba..9d886462 100644 --- a/src/views/room/widgets/context-menu/ContextMenuView.tsx +++ b/src/views/room/widgets/context-menu/ContextMenuView.tsx @@ -1,24 +1,45 @@ import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api'; -import { ContextMenuViewFadeOptions, ContextMenuViewProps } from './ContextMenuView.types'; +import { ContextMenuViewProps } from './ContextMenuView.types'; + +const fadeDelay = 3000; +const fadeLength = 75; export const ContextMenuView: FC = props => { - const { objectId = -1, category = -1, fades = false, onClose = null, children = null } = props; + const { objectId = -1, category = -1, fades = false, close = null, children = null } = props; const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: -1, y: -1}); const [ opacity, setOpacity ] = useState(1); - const [ fadeOptions, setFadeOptions ] = useState({ - firstFadeStarted: false, - fadeAfterDelay: true, - fadeLength: 75, - fadeTime: 0, - fadeStartDelay: 3000, - fadingOut: false - }); + const [ isFading, setIsFading ] = useState(false); + const [ fadeTime, setFadeTime ] = useState(0); const elementRef = useRef(); const update = useCallback((time: number) => { + let fadeTime = time; + let newOpacity = 1; + + if(isFading) + { + setFadeTime(prevValue => + { + fadeTime += prevValue; + + return fadeTime; + }); + + newOpacity = ((1 - (fadeTime / fadeLength)) * 1); + + if(newOpacity <= 0) + { + close(); + + return; + } + + setOpacity(newOpacity); + } + const bounds = GetRoomObjectBounds(GetRoomSession().roomId, objectId, category); if(!bounds || !elementRef.current) return; @@ -27,7 +48,7 @@ export const ContextMenuView: FC = props => x: Math.round(((bounds.left + (bounds.width / 2)) - (elementRef.current.offsetWidth / 2))), y: Math.round((bounds.top - elementRef.current.offsetHeight) + 10) }); - }, [ objectId, category ]); + }, [ objectId, category, isFading, close ]); useEffect(() => { @@ -39,8 +60,20 @@ export const ContextMenuView: FC = props => } }, [ update ]); + useEffect(() => + { + if(!fades) return; + + const timeout = setTimeout(() => setIsFading(true), fadeDelay); + + return () => + { + clearTimeout(timeout); + } + }, [ fades ]); + return ( -
-1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y } }> +
-1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y, opacity: opacity } }> { children }
); diff --git a/src/views/room/widgets/context-menu/ContextMenuView.types.ts b/src/views/room/widgets/context-menu/ContextMenuView.types.ts index 698a55b9..d9ba5843 100644 --- a/src/views/room/widgets/context-menu/ContextMenuView.types.ts +++ b/src/views/room/widgets/context-menu/ContextMenuView.types.ts @@ -3,15 +3,5 @@ export interface ContextMenuViewProps objectId: number; category: number; fades?: boolean; - onClose: () => void; -} - -export interface ContextMenuViewFadeOptions -{ - firstFadeStarted: boolean; - fadeAfterDelay: boolean; - fadeLength: number; - fadeTime: number; - fadeStartDelay: number; - fadingOut: boolean; + close: () => void; }