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

Lots of widget updates

Browse Source
This commit is contained in:
Bill 2021-07-12 03:59:40 -04:00
parent 6302587ef8
commit fe998d1639
55 changed files with 499 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/images/room-widgets/avatar-info/monsterplant-preview.png → src/assets/images/room-widgets/furni-context-menu/monsterplant-preview.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

4
src/assets/styles/utils.scss
View File

@ -62,3 +62,7 @@ ul {
.filter-none {
filter: unset !important;
}
.w-unset {
width: unset;
}

3
src/views/room/RoomView.tsx
View File

@ -9,7 +9,7 @@ import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine';
import { useRoomEngineEvent } from '../../hooks/events';
import { RoomContextProvider } from './context/RoomContext';
import { RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from './events';
import { IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler } from './handlers';
import { FurnitureContextMenuWidgetHandler, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler } from './handlers';
import { RoomViewProps } from './RoomView.types';
import { RoomWidgetsView } from './widgets/RoomWidgetsView';
@ -37,6 +37,7 @@ export const RoomView: FC<RoomViewProps> = props =>
widgetHandlerManager.registerHandler(new RoomWidgetInfostandHandler());
widgetHandlerManager.registerHandler(new RoomWidgetChatInputHandler());
widgetHandlerManager.registerHandler(new RoomWidgetChatHandler());
widgetHandlerManager.registerHandler(new FurnitureContextMenuWidgetHandler());
setWidgetHandler(widgetHandlerManager);

40
src/views/room/handlers/FurnitureContextMenuWidgetHandler.ts Normal file
View File

@ -0,0 +1,40 @@
import { NitroEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
import { RoomWidgetUpdateEvent } from '../events';
import { RoomWidgetMessage, RoomWidgetUseProductMessage } from '../messages';
import { RoomWidgetHandler } from './RoomWidgetHandler';
export class FurnitureContextMenuWidgetHandler extends RoomWidgetHandler
{
public processEvent(event: NitroEvent): void
{
}
public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
{
switch(message.type)
{
case RoomWidgetUseProductMessage.MONSTERPLANT_SEED:
const productMessage = (message as RoomWidgetUseProductMessage);
this.container.roomSession.useMultistateItem(productMessage.objectId);
break;
}
return null;
}
public get eventTypes(): string[]
{
return [
RoomEngineTriggerWidgetEvent.OPEN_FURNI_CONTEXT_MENU,
RoomEngineTriggerWidgetEvent.CLOSE_FURNI_CONTEXT_MENU
];
}
public get messageTypes(): string[]
{
return [
RoomWidgetUseProductMessage.MONSTERPLANT_SEED
];
}
}

3
src/views/room/handlers/RoomWidgetAvatarInfoHandler.ts
View File

@ -168,8 +168,7 @@ export class RoomWidgetAvatarInfoHandler extends RoomWidgetHandler
RoomWidgetDanceMessage.DANCE,
RoomWidgetAvatarExpressionMessage.AVATAR_EXPRESSION,
RoomWidgetChangePostureMessage.CHANGE_POSTURE,
RoomWidgetUseProductMessage.PET_PRODUCT,
RoomWidgetUseProductMessage.MONSTERPLANT_SEED
RoomWidgetUseProductMessage.PET_PRODUCT
];
}
}

1
src/views/room/handlers/index.ts
View File

@ -1,3 +1,4 @@
export * from './FurnitureContextMenuWidgetHandler';
export * from './IRoomWidgetHandler';
export * from './IRoomWidgetHandlerManager';
export * from './RoomWidgetAvatarInfoHandler';

3
src/views/room/widgets/RoomWidgets.types.ts
View File

@ -1,5 +1,2 @@
export interface RoomWidgetViewProps
{}
export interface RoomWidgetProps
{}

20
src/views/room/widgets/avatar-info/AvatarInfoWidgetView.scss
View File

@ -1,6 +1,10 @@
.nitro-use-product-confirmation {
width: 350px;
.product-preview {
display: flex;
justify-content: center;
align-items: center;
width: 122px;
height: 130px;
background: url('../../../../assets/images/room-widgets/avatar-info/preview-background.png') no-repeat center;
@ -9,5 +13,21 @@
width: 122px;
height: 130px;
}
.monsterplant-image {
width: 122px;
height: 130px;
background: url('../../../../assets/images/room-widgets/furni-context-menu/monsterplant-preview.png') no-repeat center;
}
}
.mannequin-preview {
display: flex;
justify-content: center;
align-items: center;
width: 83px;
height: 130px;
background-image: url('../../../../assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
overflow: hidden;
}
}

3
src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx
View File

@ -7,7 +7,6 @@ import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispat
import { useRoomContext } from '../../context/RoomContext';
import { RoomWidgetObjectNameEvent, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateDanceStatusEvent, RoomWidgetUpdateInfostandEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRentableBotChatEvent, RoomWidgetUseProductBubbleEvent, UseProductItem } from '../../events';
import { RoomWidgetRoomObjectMessage } from '../../messages';
import { AvatarInfoWidgetViewProps } from './AvatarInfoWidgetView.types';
import { AvatarInfoWidgetAvatarView } from './views/avatar/AvatarInfoWidgetAvatarView';
import { AvatarInfoWidgetDecorateView } from './views/decorate/AvatarInfoWidgetDecorateView';
import { AvatarInfoWidgetNameView } from './views/name/AvatarInfoWidgetNameView';
@ -19,7 +18,7 @@ import { AvatarInfoWidgetRentableBotView } from './views/rentable-bot/AvatarInfo
import { AvatarInfoUseProductConfirmView } from './views/use-product-confirm/AvatarInfoUseProductConfirmView';
import { AvatarInfoUseProductView } from './views/use-product/AvatarInfoUseProductView';
export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = props =>
export const AvatarInfoWidgetView: FC<{}> = props =>
{
const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ name, setName ] = useState<RoomWidgetObjectNameEvent>(null);

4
src/views/room/widgets/avatar-info/AvatarInfoWidgetView.types.ts
View File

@ -1,4 +0,0 @@
import { RoomWidgetProps } from '../RoomWidgets.types';
export interface AvatarInfoWidgetViewProps extends RoomWidgetProps
{}

2
src/views/room/widgets/avatar-info/views/avatar/AvatarInfoWidgetAvatarView.tsx
View File

@ -194,7 +194,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
}, []);
return (
<ContextMenuView objectId={ userData.roomIndex } category={ RoomObjectCategory.UNIT } close={ close }>
<ContextMenuView objectId={ userData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ userData.userType } close={ close }>
<ContextMenuHeaderView>
{ userData.name }
</ContextMenuHeaderView>

2
src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx
View File

@ -13,7 +13,7 @@ export const AvatarInfoWidgetNameView: FC<AvatarInfoWidgetNameViewProps> = props
}, [ nameData ]);
return (
<ContextMenuView objectId={ nameData.roomIndex } category={ nameData.category } fades={ fades } className="name-only" close= { close }>
<ContextMenuView objectId={ nameData.roomIndex } category={ nameData.category } userType={ nameData.userType } fades={ fades } className="name-only" close= { close }>
<div className="text-shadow">
{ nameData.name }
</div>

2
src/views/room/widgets/avatar-info/views/own-avatar/AvatarInfoWidgetOwnAvatarView.tsx
View File

@ -105,7 +105,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
const isRidingHorse = IsRidingHorse();
return (
<ContextMenuView objectId={ userData.roomIndex } category={ RoomObjectCategory.UNIT } close={ close }>
<ContextMenuView objectId={ userData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ userData.userType } close={ close }>
<ContextMenuHeaderView>
{ userData.name }
</ContextMenuHeaderView>

4
src/views/room/widgets/avatar-info/views/own-pet/AvatarInfoWidgetOwnPetView.tsx
View File

@ -1,4 +1,4 @@
import { PetType, RoomObjectCategory, RoomObjectVariable } from 'nitro-renderer';
import { PetType, RoomObjectCategory, RoomObjectType, RoomObjectVariable } from 'nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { GetOwnRoomObject } from '../../../../../../api';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
@ -139,7 +139,7 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
}, []);
return (
<ContextMenuView objectId={ petData.roomIndex } category={ RoomObjectCategory.UNIT } close={ close }>
<ContextMenuView objectId={ petData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } close={ close }>
<ContextMenuHeaderView>
{ petData.name }
</ContextMenuHeaderView>

4
src/views/room/widgets/avatar-info/views/rentable-bot/AvatarInfoWidgetRentableBotView.tsx
View File

@ -1,4 +1,4 @@
import { BotCommandConfigurationEvent, BotRemoveComposer, BotSkillSaveComposer, Nitro, RequestBotCommandConfigurationComposer, RoomObjectCategory } from 'nitro-renderer';
import { BotCommandConfigurationEvent, BotRemoveComposer, BotSkillSaveComposer, Nitro, RequestBotCommandConfigurationComposer, RoomObjectCategory, RoomObjectType } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { CreateMessageHook, SendMessageHook } from '../../../../../../hooks/messages';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
@ -136,7 +136,7 @@ export const AvatarInfoWidgetRentableBotView: FC<AvatarInfoWidgetRentableBotView
const canControl = (rentableBotData.amIOwner || rentableBotData.amIAnyRoomController);
return (
<ContextMenuView objectId={ rentableBotData.roomIndex } category={ RoomObjectCategory.UNIT } close={ close }>
<ContextMenuView objectId={ rentableBotData.roomIndex } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.RENTABLE_BOT } close={ close }>
<ContextMenuHeaderView>
{ rentableBotData.name }
</ContextMenuHeaderView>

47
src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx
View File

@ -26,6 +26,13 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
const [ furniData, setFurniData ] = useState<IFurnitureData>(null);
const { roomSession = null, widgetHandler = null } = useRoomContext();
const selectRoomObject = useCallback(() =>
{
if(!petData) return;
GetRoomEngine().selectRoomObject(roomSession.roomId, petData.roomIndex, RoomObjectCategory.UNIT);
}, [ roomSession, petData ]);
const useProduct = useCallback(() =>
{
widgetHandler.processWidgetMessage(new RoomWidgetUseProductMessage(RoomWidgetUseProductMessage.PET_PRODUCT, item.requestRoomObjectId, petData.webID));
@ -217,49 +224,51 @@ export const AvatarInfoUseProductConfirmView: FC<AvatarInfoUseProductConfirmView
<NitroCardView className="nitro-use-product-confirmation">
<NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title', [ 'name' ], [ petData.name ]) } onCloseClick={ close } />
<NitroCardContentView>
<div className="d-flex">
<div className="product-preview">
<div className="row">
<div className="w-unset">
<div className="product-preview cursor-pointer" onClick={ selectRoomObject }>
{ getPetImage }
</div>
<div className="d-flex flex-column ms-2 mt-2">
<div className="d-flex flex-column justify-content-center align-items-center w-100 h-100">
</div>
<div className="col d-flex flex-column justify-content-between">
<div className="d-flex flex-column">
{ (mode === _Str_11906) &&
<>
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.shampoo', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black text-italics">{ LocalizeText('useproduct.widget.info.shampoo') }</div>
<div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.shampoo', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.shampoo') }</div>
</> }
{ (mode === _Str_11214) &&
<>
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.custompart', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black text-italics">{ LocalizeText('useproduct.widget.info.custompart') }</div>
<div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.custompart', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.custompart') }</div>
</> }
{ (mode === _Str_11733) &&
<>
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.custompartshampoo', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black text-italics">{ LocalizeText('useproduct.widget.info.custompartshampoo') }</div>
<div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.custompartshampoo', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.custompartshampoo') }</div>
</> }
{ (mode === _Str_11369) &&
<>
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.saddle', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black text-italics">{ LocalizeText('useproduct.widget.info.saddle') }</div>
<div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.saddle', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.saddle') }</div>
</> }
{ (mode === _Str_8759) &&
<>
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.revive_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black text-italics">{ LocalizeText('useproduct.widget.info.revive_monsterplant') }</div>
<div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.revive_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.revive_monsterplant') }</div>
</> }
{ (mode === _Str_8432) &&
<>
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.rebreed_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black text-italics">{ LocalizeText('useproduct.widget.info.rebreed_monsterplant') }</div>
<div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.rebreed_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.rebreed_monsterplant') }</div>
</> }
{ (mode === _Str_9653) &&
<>
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.fertilize_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black text-italics">{ LocalizeText('useproduct.widget.info.fertilize_monsterplant') }</div>
<div className="text-black mb-2">{ LocalizeText('useproduct.widget.text.fertilize_monsterplant', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.fertilize_monsterplant') }</div>
</> }
</div>
<div className="d-flex justify-content-between align-items-center w-100">
<div className="d-flex justify-content-between align-items-end w-100 h-100">
<button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
<button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('useproduct.widget.use') }</button>
</div>

4
src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx
View File

@ -1,4 +1,4 @@
import { RoomObjectCategory } from 'nitro-renderer';
import { RoomObjectCategory, RoomObjectType } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetFurnitureDataForRoomObject } from '../../../../../../api';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
@ -83,7 +83,7 @@ export const AvatarInfoUseProductView: FC<AvatarInfoUseProductViewProps> = props
}, [ item, updateConfirmingProduct ]);
return (
<ContextMenuView objectId={ item.id } category={ RoomObjectCategory.UNIT } close={ close }>
<ContextMenuView objectId={ item.id } category={ RoomObjectCategory.UNIT } userType={ RoomObjectType.PET } close={ close }>
<ContextMenuHeaderView>
{ item.name }
</ContextMenuHeaderView>

3
src/views/room/widgets/camera/CameraWidgetView.tsx
View File

@ -7,13 +7,12 @@ import { RoomWidgetCameraEvent } from '../../../../events/room-widgets/camera/Ro
import { useCameraEvent } from '../../../../hooks/events/nitro/camera/camera-event';
import { useUiEvent } from '../../../../hooks/events/ui/ui-event';
import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages/message-event';
import { CameraWidgetViewProps } from './CameraWidgetView.types';
import { CameraWidgetContextProvider } from './context/CameraWidgetContext';
import { CameraWidgetCaptureView } from './views/capture/CameraWidgetCaptureView';
import { CameraWidgetCheckoutView } from './views/checkout/CameraWidgetCheckoutView';
import { CameraWidgetEditorView } from './views/editor/CameraWidgetEditorView';
export const CameraWidgetView: FC<CameraWidgetViewProps> = props =>
export const CameraWidgetView: FC<{}> = props =>
{
const [ effectsReady, setEffectsReady ] = useState(false);

4
src/views/room/widgets/camera/CameraWidgetView.types.ts
View File

@ -1,4 +0,0 @@
import { RoomWidgetProps } from '../RoomWidgets.types';
export interface CameraWidgetViewProps extends RoomWidgetProps
{}

3
src/views/room/widgets/chat-input/ChatInputView.tsx
View File

@ -6,10 +6,9 @@ import { LocalizeText } from '../../../../utils/LocalizeText';
import { useRoomContext } from '../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent } from '../../events';
import { RoomWidgetChatMessage, RoomWidgetChatTypingMessage } from '../../messages';
import { ChatInputViewProps } from './ChatInputView.types';
import { ChatInputStyleSelectorView } from './style-selector/ChatInputStyleSelectorView';
export const ChatInputView: FC<ChatInputViewProps> = props =>
export const ChatInputView: FC<{}> = props =>
{
const [ chatValue, setChatValue ] = useState<string>('');
const [ selectedUsername, setSelectedUsername ] = useState('');

6
src/views/room/widgets/chat-input/ChatInputView.types.ts
View File

@ -1,6 +0,0 @@
import { RoomWidgetProps } from '../RoomWidgets.types';
export interface ChatInputViewProps extends RoomWidgetProps
{
}

3
src/views/room/widgets/chat/ChatWidgetView.tsx
View File

@ -3,11 +3,10 @@ import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../hooks/events';
import { useRoomContext } from '../../context/RoomContext';
import { RoomWidgetUpdateChatEvent } from '../../events';
import { ChatWidgetViewProps } from './ChatWidgetView.types';
import { ChatWidgetMessageView } from './message/ChatWidgetMessageView';
import { ChatBubbleMessage } from './utils/ChatBubbleMessage';
export const ChatWidgetView: FC<ChatWidgetViewProps> = props =>
export const ChatWidgetView: FC<{}> = props =>
{
const [ chatMessages, setChatMessages ] = useState<ChatBubbleMessage[]>([]);
const { roomSession = null, eventDispatcher = null } = useRoomContext();

6
src/views/room/widgets/chat/ChatWidgetView.types.ts
View File

@ -1,6 +0,0 @@
import { RoomWidgetProps } from '../RoomWidgets.types';
export interface ChatWidgetViewProps extends RoomWidgetProps
{
}

83
src/views/room/widgets/context-menu/ContextMenuView.tsx
View File

@ -1,24 +1,43 @@
import { FixedSizeStack, Nitro } from 'nitro-renderer';
import { FixedSizeStack, Nitro, NitroPoint, NitroRectangle, RoomObjectType } from 'nitro-renderer';
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api';
import { GetRoomEngine, GetRoomObjectBounds, GetRoomSession, GetTicker } from '../../../../api';
import { ContextMenuViewProps } from './ContextMenuView.types';
const LOCATION_STACK_SIZE: number = 25;
const BUBBLE_DROP_SPEED: number = 3;
const fadeDelay = 3000;
const fadeLength = 75;
const SPACE_AROUND_EDGES = 10;
export const ContextMenuView: FC<ContextMenuViewProps> = props =>
{
const { objectId = -1, category = -1, fades = false, className = '', close = null, children = null } = props;
const { objectId = -1, category = -1, userType = -1, fades = false, className = '', close = null, children = null } = props;
const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: null, y: null });
const [ stack, setStack ] = useState<FixedSizeStack>(null);
const [ deltaYStack, setDeltaYStack ] = useState<FixedSizeStack>(null);
const [ currentDeltaY, setCurrentDeltaY ] = useState(-1000000);
const [ opacity, setOpacity ] = useState(1);
const [ isFading, setIsFading ] = useState(false);
const [ fadeTime, setFadeTime ] = useState(0);
const [ frozen, setFrozen ] = useState(false);
const elementRef = useRef<HTMLDivElement>();
const update = useCallback((time: number) =>
const getOffset = useCallback((bounds: NitroRectangle) =>
{
let height = -(elementRef.current.offsetHeight);
if((userType > -1) && ((userType === RoomObjectType.USER) || (userType === RoomObjectType.BOT) || (userType === RoomObjectType.RENTABLE_BOT)))
{
height = (height + ((bounds.height > 50) ? 15 : 0));
}
else
{
height = (height - 14);
}
return height;
}, [ userType ]);
const updateFade = useCallback((time: number) =>
{
let newFadeTime = time;
let newOpacity = 1;
@ -38,37 +57,59 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
{
close();
return;
return false;
}
setOpacity(newOpacity);
}
const bounds = GetRoomObjectBounds(GetRoomSession().roomId, objectId, category);
return true;
}, [ isFading, close ]);
if(!bounds || !elementRef.current) return;
const updatePosition = useCallback((bounds: NitroRectangle, location: NitroPoint) =>
{
if(!bounds || !location || !deltaYStack) return;
let left = Math.round((bounds.left + (bounds.width / 2)) - (elementRef.current.offsetWidth / 2));
let top = Math.round((bounds.top - elementRef.current.offsetHeight));
const offset = getOffset(bounds);
deltaYStack.addValue((location.y - bounds.top));
let maxStack = deltaYStack.getMax();
if(maxStack < (currentDeltaY - BUBBLE_DROP_SPEED)) maxStack = (currentDeltaY - BUBBLE_DROP_SPEED);
const deltaY = (location.y - maxStack);
let x = (location.x - (elementRef.current.offsetWidth / 2));
let y = (deltaY + offset);
const maxLeft = ((Nitro.instance.width - elementRef.current.offsetWidth) - SPACE_AROUND_EDGES);
const maxTop = ((Nitro.instance.height - elementRef.current.offsetHeight) - SPACE_AROUND_EDGES);
if(left < SPACE_AROUND_EDGES) left = SPACE_AROUND_EDGES;
else if(left > maxLeft) left = maxLeft;
if(x < SPACE_AROUND_EDGES) x = SPACE_AROUND_EDGES;
else if(x > maxLeft) x = maxLeft;
if(top < SPACE_AROUND_EDGES) top = SPACE_AROUND_EDGES;
else if(top > maxTop) top = maxTop;
if(y < SPACE_AROUND_EDGES) y = SPACE_AROUND_EDGES;
else if(y > maxTop) y = maxTop;
setPos({
x: left,
y: top
});
}, [ objectId, category, isFading, close ]);
setCurrentDeltaY(maxStack);
setPos({ x, y });
}, [ deltaYStack, currentDeltaY, getOffset ]);
const update = useCallback((time: number) =>
{
if(!elementRef.current || !updateFade(time)) return;
const bounds = GetRoomObjectBounds(GetRoomSession().roomId, objectId, category);
const location = GetRoomEngine().getRoomObjectScreenLocation(GetRoomSession().roomId, objectId, category);
updatePosition(bounds, location);
}, [ objectId, category, updateFade, updatePosition ]);
useEffect(() =>
{
setStack(new FixedSizeStack(25));
setDeltaYStack(new FixedSizeStack(LOCATION_STACK_SIZE));
setCurrentDeltaY(-1000000);
}, []);
useEffect(() =>
@ -101,7 +142,7 @@ export const ContextMenuView: FC<ContextMenuViewProps> = props =>
}, [ fades ]);
return (
<div ref={ elementRef } className={ `position-absolute nitro-context-menu ${ className }${ (pos.x !== null ? ' visible' : ' invisible') }` } style={ { left: (pos.x || 0), top: (pos.y || 0), opacity: opacity } } onMouseEnter={ event => setFrozen(true) } onMouseLeave={ event => setFrozen(false) }>
<div ref={ elementRef } className={ `position-absolute nitro-context-menu ${ className }${ (pos.x !== null ? ' visible' : ' invisible') }` } style={ { left: (pos.x || 0), top: (pos.y || 0), opacity: opacity } }>
{ children }
</div>
);

1
src/views/room/widgets/context-menu/ContextMenuView.types.ts
View File

@ -2,6 +2,7 @@ export interface ContextMenuViewProps
{
objectId: number;
category: number;
userType?: number;
fades?: boolean;
className?: string;
close: () => void;

4
src/views/room/widgets/furniture/FurnitureWidget.types.ts
View File

@ -1,4 +0,0 @@
import { RoomWidgetProps } from '../RoomWidgets.types';
export interface FurnitureWidgetProps extends RoomWidgetProps
{}

2
src/views/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -1,6 +1,6 @@
@import './engraving-lock/FurnitureEngravingLockView';
@import './dimmer/FurnitureDimmerView';
@import './exchange-credit/FurnitureExchangeCreditView';
@import './friend-furni/FurnitureFriendFurniView';
@import './manipulation-menu/FurnitureManipulationMenuView';
@import './mannequin/FurnitureMannequinView';
@import './stickie/FurnitureStickieView';

7
src/views/room/widgets/furniture/FurnitureWidgetsView.tsx
View File

@ -2,9 +2,8 @@ import { FC } from 'react';
import { FurnitureBackgroundColorView } from './background-color/FurnitureBackgroundColorView';
import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
import { FurnitureDimmerView } from './dimmer/FurnitureDimmerView';
import { FurnitureEngravingLockView } from './engraving-lock/FurnitureEngravingLockView';
import { FurnitureExchangeCreditView } from './exchange-credit/FurnitureExchangeCreditView';
import { FurnitureWidgetsViewProps } from './FurnitureWidgetsView.types';
import { FurnitureFriendFurniView } from './friend-furni/FurnitureFriendFurniView';
import { FurnitureHighScoreView } from './high-score/FurnitureHighScoreView';
import { FurnitureManipulationMenuView } from './manipulation-menu/FurnitureManipulationMenuView';
import { FurnitureMannequinView } from './mannequin/FurnitureMannequinView';
@ -12,14 +11,14 @@ import { FurniturePresentView } from './present/FurniturePresentView';
import { FurnitureStickieView } from './stickie/FurnitureStickieView';
import { FurnitureTrophyView } from './trophy/FurnitureTrophyView';
export const FurnitureWidgetsView: FC<FurnitureWidgetsViewProps> = props =>
export const FurnitureWidgetsView: FC<{}> = props =>
{
return (
<div className="position-absolute nitro-room-widgets t-0 l-0">
<FurnitureBackgroundColorView />
<FurnitureContextMenuView />
<FurnitureDimmerView />
<FurnitureEngravingLockView />
<FurnitureFriendFurniView />
<FurnitureExchangeCreditView />
<FurnitureHighScoreView />
<FurnitureManipulationMenuView />

6
src/views/room/widgets/furniture/FurnitureWidgetsView.types.ts
View File

@ -1,6 +0,0 @@
import { FurnitureWidgetProps } from './FurnitureWidget.types';
export interface FurnitureWidgetsViewProps extends FurnitureWidgetProps
{
}

121
src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
View File

@ -1,73 +1,91 @@
import { ContextMenuEnum, IRoomObject, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomObjectCategory } from 'nitro-renderer';
import { ContextMenuEnum, RoomEngineTriggerWidgetEvent, RoomObjectCategory } from 'nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetRoomEngine, IsOwnerOfFurniture } from '../../../../../api';
import { useRoomEngineEvent } from '../../../../../hooks/events';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetFurniActionMessage } from '../../../messages';
import { ContextMenuView } from '../../context-menu/ContextMenuView';
import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
import { ContextMenuListItemView } from '../../context-menu/views/list-item/ContextMenuListItemView';
import { MonsterPlantSeedConfirmView } from './views/monsterplant-seed/MonsterPlantSeedConfirmView';
import { PurchasableClothingConfirmView } from './views/purchaseable-clothing/PurchasableClothingConfirmView';
const MONSTERPLANT_SEED_CONFIRMATION: string = 'MONSTERPLANT_SEED_CONFIRMATION';
const PURCHASABLE_CLOTHING_CONFIRMATION: string = 'PURCHASABLE_CLOTHING_CONFIRMATION';
export const FurnitureContextMenuView: FC<{}> = props =>
{
const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ roomObject, setRoomObject ] = useState<IRoomObject>(null);
const [ contextMenu, setContextMenu ] = useState<string>(null);
const [ objectId, setObjectId ] = useState(-1);
const [ mode, setMode ] = useState<string>(null);
const [ confirmMode, setConfirmMode ] = useState<string>(null);
const [ confirmingObjectId, setConfirmingObjectId ] = useState(-1);
const { roomSession = null, widgetHandler = null } = useRoomContext();
const close = useCallback(() =>
{
setRoomObject(null);
setContextMenu(null);
setObjectId(-1);
setMode(null);
}, []);
const closeConfirm = useCallback(() =>
{
setConfirmMode(null);
setConfirmingObjectId(-1);
}, []);
const onRoomEngineTriggerWidgetEvent = useCallback((event: RoomEngineTriggerWidgetEvent) =>
{
const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, event.objectId, event.category);
const object = GetRoomEngine().getRoomObject(roomSession.roomId, event.objectId, event.category);
if(!roomObject) return;
if(!object) return;
switch(event.type)
{
case RoomEngineTriggerWidgetEvent.REQUEST_MONSTERPLANT_SEED_PLANT_CONFIRMATION_DIALOG:
setConfirmingObjectId(object.id);
setConfirmMode(MONSTERPLANT_SEED_CONFIRMATION);
close();
return;
case RoomEngineTriggerWidgetEvent.REQUEST_PURCHASABLE_CLOTHING_CONFIRMATION_DIALOG:
setConfirmingObjectId(object.id);
setConfirmMode(PURCHASABLE_CLOTHING_CONFIRMATION);
close();
return;
case RoomEngineTriggerWidgetEvent.OPEN_FURNI_CONTEXT_MENU:
setObjectId(object.id);
switch(event.contextMenu)
{
case ContextMenuEnum.FRIEND_FURNITURE:
setMode(ContextMenuEnum.FRIEND_FURNITURE);
return;
case ContextMenuEnum.MONSTERPLANT_SEED:
if(IsOwnerOfFurniture(roomObject))
{
setRoomObject(roomObject);
setContextMenu(ContextMenuEnum.MONSTERPLANT_SEED);
}
if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.MONSTERPLANT_SEED);
return;
case ContextMenuEnum.MYSTERY_BOX:
return;
case ContextMenuEnum.RANDOM_TELEPORT:
setMode(ContextMenuEnum.RANDOM_TELEPORT);
return;
case ContextMenuEnum.PURCHASABLE_CLOTHING:
if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.PURCHASABLE_CLOTHING);
return;
}
return;
case RoomEngineTriggerWidgetEvent.CLOSE_FURNI_CONTEXT_MENU:
close();
if(object.id === objectId) close();
return;
}
}, [ roomSession, close ]);
}, [ roomSession, objectId, close ]);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.OPEN_FURNI_CONTEXT_MENU, onRoomEngineTriggerWidgetEvent);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.CLOSE_FURNI_CONTEXT_MENU, onRoomEngineTriggerWidgetEvent);
const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
{
if(!roomObject || (event.objectId !== roomObject.id)) return;
close();
}, [ roomObject, close ]);
useRoomEngineEvent(RoomEngineObjectEvent.REMOVED, onRoomEngineObjectEvent);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_MONSTERPLANT_SEED_PLANT_CONFIRMATION_DIALOG, onRoomEngineTriggerWidgetEvent);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PURCHASABLE_CLOTHING_CONFIRMATION_DIALOG, onRoomEngineTriggerWidgetEvent);
const processAction = useCallback((name: string) =>
{
@ -75,18 +93,42 @@ export const FurnitureContextMenuView: FC<{}> = props =>
{
switch(name)
{
case 'use_friend_furni':
roomSession.useMultistateItem(objectId);
break;
case 'use_monsterplant_seed':
setContextMenu(MONSTERPLANT_SEED_CONFIRMATION);
setConfirmMode(MONSTERPLANT_SEED_CONFIRMATION);
setConfirmingObjectId(objectId);
break;
case 'use_random_teleport':
widgetHandler.processWidgetMessage(new RoomWidgetFurniActionMessage(RoomWidgetFurniActionMessage.USE, objectId, RoomObjectCategory.FLOOR));
break;
case 'use_purchaseable_clothing':
setConfirmMode(PURCHASABLE_CLOTHING_CONFIRMATION);
setConfirmingObjectId(objectId);
break;
}
}
}, [ ]);
if(!roomObject || !contextMenu) return null;
close();
}, [ roomSession, widgetHandler, objectId, close ]);
return (
<ContextMenuView objectId={ roomObject.id } category={ RoomObjectCategory.FLOOR } close={ close }>
{ (contextMenu === ContextMenuEnum.MONSTERPLANT_SEED) &&
<>
{ (confirmMode === MONSTERPLANT_SEED_CONFIRMATION) && <MonsterPlantSeedConfirmView objectId={ confirmingObjectId } close={ closeConfirm } /> }
{ (confirmMode === PURCHASABLE_CLOTHING_CONFIRMATION) && <PurchasableClothingConfirmView objectId={ confirmingObjectId } close={ closeConfirm } /> }
{ (objectId >= 0) && mode &&
<ContextMenuView objectId={ objectId } category={ RoomObjectCategory.FLOOR } close={ close } fades={ true }>
{ (mode === ContextMenuEnum.FRIEND_FURNITURE) &&
<>
<ContextMenuHeaderView>
{ LocalizeText('friendfurni.context.title') }
</ContextMenuHeaderView>
<ContextMenuListItemView onClick={ event => processAction('use_friend_furni') }>
{ LocalizeText('friendfurni.context.use') }
</ContextMenuListItemView>
</> }
{ (mode === ContextMenuEnum.MONSTERPLANT_SEED) &&
<>
<ContextMenuHeaderView>
{ LocalizeText('furni.mnstr_seed.name') }
@ -95,6 +137,25 @@ export const FurnitureContextMenuView: FC<{}> = props =>
{ LocalizeText('widget.monsterplant_seed.button.use') }
</ContextMenuListItemView>
</> }
</ContextMenuView>
{ (mode === ContextMenuEnum.RANDOM_TELEPORT) &&
<>
<ContextMenuHeaderView>
{ LocalizeText('furni.random_teleport.name') }
</ContextMenuHeaderView>
<ContextMenuListItemView onClick={ event => processAction('use_random_teleport') }>
{ LocalizeText('widget.random_teleport.button.use') }
</ContextMenuListItemView>
</> }
{ (mode === ContextMenuEnum.PURCHASABLE_CLOTHING) &&
<>
<ContextMenuHeaderView>
{ LocalizeText('furni.generic_usable.name') }
</ContextMenuHeaderView>
<ContextMenuListItemView onClick={ event => processAction('use_purchaseable_clothing') }>
{ LocalizeText('widget.generic_usable.button.use') }
</ContextMenuListItemView>
</> }
</ContextMenuView> }
</>
)
}

83
src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.tsx Normal file
View File

@ -0,0 +1,83 @@
import { IFurnitureData, RoomObjectCategory } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetFurnitureDataForRoomObject } from '../../../../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
import { LocalizeText } from '../../../../../../../utils/LocalizeText';
import { FurniCategory } from '../../../../../../inventory/common/FurniCategory';
import { useRoomContext } from '../../../../../context/RoomContext';
import { RoomWidgetUseProductMessage } from '../../../../../messages';
import { MonsterPlantSeedConfirmViewProps } from './MonsterPlantSeedConfirmView.types';
const MODE_DEFAULT: number = -1;
const MODE_MONSTERPLANT_SEED: number = 0;
export const MonsterPlantSeedConfirmView: FC<MonsterPlantSeedConfirmViewProps> = props =>
{
const { objectId = -1, close = null } = props;
const [ furniData, setFurniData ] = useState<IFurnitureData>(null);
const [ mode, setMode ] = useState(MODE_DEFAULT);
const { roomSession = null, widgetHandler = null } = useRoomContext();
const useProduct = useCallback(() =>
{
widgetHandler.processWidgetMessage(new RoomWidgetUseProductMessage(RoomWidgetUseProductMessage.MONSTERPLANT_SEED, objectId));
close();
}, [ widgetHandler, objectId, close ]);
useEffect(() =>
{
if(!roomSession || (objectId === -1)) return;
const furniData = GetFurnitureDataForRoomObject(roomSession.roomId, objectId, RoomObjectCategory.FLOOR);
if(!furniData) return;
setFurniData(furniData);
let mode = MODE_DEFAULT;
switch(furniData.specialType)
{
case FurniCategory.MONSTERPLANT_SEED:
mode = MODE_MONSTERPLANT_SEED;
break;
}
if(mode === MODE_DEFAULT)
{
close();
return;
}
setMode(mode);
}, [ roomSession, objectId, close ]);
if(mode === MODE_DEFAULT) return null;
return (
<NitroCardView className="nitro-use-product-confirmation">
<NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.plant_seed', [ 'name' ], [ furniData.name ]) } onCloseClick={ close } />
<NitroCardContentView className="d-flex">
<div className="row">
<div className="w-unset">
<div className="product-preview">
<div className="monsterplant-image" />
</div>
</div>
<div className="col d-flex flex-column justify-content-between">
<div className="d-flex flex-column">
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ] ) }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.plant_seed') }</div>
</div>
<div className="d-flex justify-content-between align-items-end w-100 h-100">
<button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
<button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('widget.monsterplant_seed.button.use') }</button>
</div>
</div>
</div>
</NitroCardContentView>
</NitroCardView>
);
}

5
src/views/room/widgets/furniture/context-menu/views/monsterplant-seed/MonsterPlantSeedConfirmView.types.ts Normal file
View File

@ -0,0 +1,5 @@
export interface MonsterPlantSeedConfirmViewProps
{
objectId: number;
close: () => void;
}

102
src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.tsx Normal file
View File

@ -0,0 +1,102 @@
import { FigureData, RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager } from '../../../../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
import { LocalizeText } from '../../../../../../../utils/LocalizeText';
import { FurniCategory } from '../../../../../../inventory/common/FurniCategory';
import { AvatarImageView } from '../../../../../../shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../../../context/RoomContext';
import { PurchasableClothingConfirmViewProps } from './PurchasableClothingConfirmView.types';
const MODE_DEFAULT: number = -1;
const MODE_PURCHASABLE_CLOTHING: number = 0;
export const PurchasableClothingConfirmView: FC<PurchasableClothingConfirmViewProps> = props =>
{
const { objectId = -1, close = null } = props;
const [ mode, setMode ] = useState(MODE_DEFAULT);
const [ gender, setGender ] = useState<string>(FigureData.MALE);
const [ newFigure, setNewFigure ] = useState<string>(null);
const { roomSession = null } = useRoomContext();
const useProduct = useCallback(() =>
{
GetConnection().send(new RedeemItemClothingComposer(objectId));
GetConnection().send(new UserFigureComposer(gender, newFigure));
close();
}, [ objectId, gender, newFigure, close ]);
useEffect(() =>
{
let mode = MODE_DEFAULT;
const figure = GetSessionDataManager().figure;
const gender = GetSessionDataManager().gender;
const validSets: number[] = [];
if(roomSession && (objectId >= 0))
{
const furniData = GetFurnitureDataForRoomObject(roomSession.roomId, objectId, RoomObjectCategory.FLOOR);
if(furniData)
{
switch(furniData.specialType)
{
case FurniCategory._Str_12534:
mode = MODE_PURCHASABLE_CLOTHING;
const setIds = furniData.customParams.split(',').map(part => parseInt(part));
for(const setId of setIds)
{
if(GetAvatarRenderManager().isValidFigureSetForGender(setId, gender)) validSets.push(setId);
}
break;
}
}
}
if(mode === MODE_DEFAULT)
{
close();
return;
}
setGender(gender);
setNewFigure(GetAvatarRenderManager().getFigureStringWithFigureIds(figure, gender, validSets));
// if owns clothing, change to it
setMode(mode);
}, [ roomSession, objectId, close ]);
if(mode === MODE_DEFAULT) return null;
return (
<NitroCardView className="nitro-use-product-confirmation">
<NitroCardHeaderView headerText={ LocalizeText('useproduct.widget.title.bind_clothing') } onCloseClick={ close } />
<NitroCardContentView className="d-flex">
<div className="row">
<div className="w-unset">
<div className="mannequin-preview">
<AvatarImageView figure={ newFigure } direction={ 2 } />
</div>
</div>
<div className="col d-flex flex-column justify-content-between">
<div className="d-flex flex-column">
<div className="text-black mb-3">{ LocalizeText('useproduct.widget.text.bind_clothing') }</div>
<div className="text-black">{ LocalizeText('useproduct.widget.info.bind_clothing') }</div>
</div>
<div className="d-flex justify-content-between align-items-end w-100 h-100">
<button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('useproduct.widget.cancel') }</button>
<button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('useproduct.widget.bind_clothing') }</button>
</div>
</div>
</div>
</NitroCardContentView>
</NitroCardView>
);
}

5
src/views/room/widgets/furniture/context-menu/views/purchaseable-clothing/PurchasableClothingConfirmView.types.ts Normal file
View File

@ -0,0 +1,5 @@
export interface PurchasableClothingConfirmViewProps
{
objectId: number;
close: () => void;
}

3
src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx
View File

@ -3,9 +3,8 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { useRoomContext } from '../../../context/RoomContext';
import { FurnitureDimmerData } from './FurnitureDimmerData';
import { FurnitureDimmerViewProps } from './FurnitureDimmerView.types';
export const FurnitureDimmerView: FC<FurnitureDimmerViewProps> = props =>
export const FurnitureDimmerView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);

4
src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.types.ts
View File

@ -1,4 +0,0 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurnitureDimmerViewProps extends FurnitureWidgetProps
{}

4
src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.types.ts
View File

@ -1,4 +0,0 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurnitureEngravingLockViewProps extends FurnitureWidgetProps
{}

3
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
View File

@ -8,9 +8,8 @@ import { LocalizeText } from '../../../../../utils/LocalizeText';
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
import { FurnitureExchangeCreditData } from './FurnitureExchangeCreditData';
import { FurnitureExchangeCreditProps } from './FurnitureExchangeCreditView.types';
export const FurnitureExchangeCreditView: FC<FurnitureExchangeCreditProps> = props =>
export const FurnitureExchangeCreditView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ exchangeCreditData, setExchangeCreditData ] = useState<FurnitureExchangeCreditData>(null);

4
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.types.ts
View File

@ -1,4 +0,0 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurnitureExchangeCreditProps extends FurnitureWidgetProps
{}

0
src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockData.ts → src/views/room/widgets/furniture/friend-furni/FriendFurniLockData.ts
View File

0
src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.scss → src/views/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.scss
View File

5
src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx → src/views/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx
View File

@ -10,10 +10,9 @@ import { LocalizeText } from '../../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
import { FurnitureEngravingLockData } from './FurnitureEngravingLockData';
import { FurnitureEngravingLockViewProps } from './FurnitureEngravingLockView.types';
import { FurnitureEngravingLockData } from './FriendFurniLockData';
export const FurnitureEngravingLockView: FC<FurnitureEngravingLockViewProps> = props =>
export const FurnitureFriendFurniView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ engravingLockData, setEngravingLockData ] = useState<FurnitureEngravingLockData>(null);

3
src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.tsx
View File

@ -2,9 +2,8 @@ import { NitroEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
import { FC } from 'react';
import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
import { useRoomContext } from '../../../context/RoomContext';
import { FurnitureHighScoreViewProps } from './FurnitureHighScoreView.types';
export const FurnitureHighScoreView: FC<FurnitureHighScoreViewProps> = props =>
export const FurnitureHighScoreView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();

6
src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.types.ts
View File

@ -1,6 +0,0 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurnitureHighScoreViewProps extends FurnitureWidgetProps
{
}

3
src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.tsx
View File

@ -5,9 +5,8 @@ import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dis
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
import { ObjectLocationView } from '../../object-location/ObjectLocationView';
import { FurnitureManipulationMenuViewProps } from './FurnitureManipulationMenuView.types';
export const FurnitureManipulationMenuView: FC<FurnitureManipulationMenuViewProps> = props =>
export const FurnitureManipulationMenuView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ isVisible, setIsVisible ] = useState(false);

6
src/views/room/widgets/furniture/manipulation-menu/FurnitureManipulationMenuView.types.ts
View File

@ -1,6 +0,0 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurnitureManipulationMenuViewProps extends FurnitureWidgetProps
{
}

26
src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.tsx
View File

@ -10,8 +10,8 @@ import { LocalizeText } from '../../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
import { MannequinViewMode } from './common/MannequinViewMode';
import { FurnitureMannequinData } from './FurnitureMannequinData';
import { FurnitureMannequinViewMode, FurnitureMannequinViewProps } from './FurnitureMannequinView.types';
const parts = [
AvatarFigurePartType.CHEST_ACCESSORY,
@ -23,7 +23,7 @@ const parts = [
];
const baseAvatar = ['hd', 99999, 99998];
export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
export const FurnitureMannequinView: FC<{}> = props =>
{
const { eventDispatcher = null } = useRoomContext();
@ -64,7 +64,7 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
if(userCanEdit)
{
setViewMode(FurnitureMannequinViewMode.EDIT);
setViewMode(MannequinViewMode.EDIT);
}
else
{
@ -72,15 +72,15 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
if(userGender.toUpperCase() !== mannequinData.gender.toUpperCase())
{
setViewMode(FurnitureMannequinViewMode.INCOMPATIBLE_GENDER);
setViewMode(MannequinViewMode.INCOMPATIBLE_GENDER);
}
else if(userClubLevel < mannequinData.clubLevel)
{
setViewMode(FurnitureMannequinViewMode.CLUB);
setViewMode(MannequinViewMode.CLUB);
}
else
{
setViewMode(FurnitureMannequinViewMode.DEFAULT);
setViewMode(MannequinViewMode.DEFAULT);
}
}
}, []);
@ -138,11 +138,11 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
return;
case 'load_figure':
loadMannequinFigure(Nitro.instance.avatar.createFigureContainer(Nitro.instance.sessionDataManager.figure));
setViewMode(FurnitureMannequinViewMode.SAVE);
setViewMode(MannequinViewMode.SAVE);
return;
case 'back':
loadMannequinFigure(Nitro.instance.avatar.createFigureContainer(mannequinData.figure));
setViewMode(FurnitureMannequinViewMode.EDIT);
setViewMode(MannequinViewMode.EDIT);
return;
case 'save_name':
GetRoomSession().connection.send(new FurnitureMannequinSaveNameComposer(mannequinData.objectId, mannequinData.name));
@ -179,7 +179,7 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
</div>
</div>
<div className="d-flex flex-column justify-content-between col">
{ viewMode === FurnitureMannequinViewMode.DEFAULT &&
{ viewMode === MannequinViewMode.DEFAULT &&
<>
<div className="h-100">
<div className="mb-1 text-black fw-bold">{ mannequinData.name }</div>
@ -187,7 +187,7 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
</div>
<div className="btn btn-success float-end" onClick={ event => processAction('wear') }>{ LocalizeText('mannequin.widget.wear') }</div>
</> }
{ viewMode === FurnitureMannequinViewMode.EDIT &&
{ viewMode === MannequinViewMode.EDIT &&
<>
<input type="text" className="form-control mb-2" value={ mannequinData.name } onChange={ event => processAction('set_name', event.target.value) } onKeyDown={ event => handleKeyDown(event) } />
<div className="d-flex flex-column w-100">
@ -195,7 +195,7 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
<div className="btn btn-success w-100" onClick={ event => processAction('wear') }>{ LocalizeText('mannequin.widget.wear') }</div>
</div>
</> }
{ viewMode === FurnitureMannequinViewMode.SAVE &&
{ viewMode === MannequinViewMode.SAVE &&
<>
<div className="h-100">
<div className="mb-1 text-black fw-bold">{ mannequinData.name }</div>
@ -206,9 +206,9 @@ export const FurnitureMannequinView: FC<FurnitureMannequinViewProps> = props =>
<div className="btn btn-success" onClick={ event => processAction('save_figure') }>{ LocalizeText('mannequin.widget.save') }</div>
</div>
</> }
{ viewMode === FurnitureMannequinViewMode.CLUB &&
{ viewMode === MannequinViewMode.CLUB &&
<div className="text-black">{ LocalizeText('mannequin.widget.clubnotification') }</div> }
{ viewMode === FurnitureMannequinViewMode.INCOMPATIBLE_GENDER &&
{ viewMode === MannequinViewMode.INCOMPATIBLE_GENDER &&
<div className="text-black">{ LocalizeText('mannequin.widget.wronggender') }</div> }
</div>
</div>

7
src/views/room/widgets/furniture/mannequin/FurnitureMannequinView.types.tsx → src/views/room/widgets/furniture/mannequin/common/MannequinViewMode.ts
View File

@ -1,9 +1,4 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurnitureMannequinViewProps extends FurnitureWidgetProps
{}
export class FurnitureMannequinViewMode
export class MannequinViewMode
{
public static readonly EDIT: string = 'edit';
public static readonly SAVE: string = 'save';

3
src/views/room/widgets/furniture/present/FurniturePresentView.tsx
View File

@ -2,9 +2,8 @@ import { NitroEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
import { FC } from 'react';
import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
import { useRoomContext } from '../../../context/RoomContext';
import { FurniturePresentViewProps } from './FurniturePresentView.types';
export const FurniturePresentView: FC<FurniturePresentViewProps> = props =>
export const FurniturePresentView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();

6
src/views/room/widgets/furniture/present/FurniturePresentView.types.ts
View File

@ -1,6 +0,0 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurniturePresentViewProps extends FurnitureWidgetProps
{
}

3
src/views/room/widgets/furniture/stickie/FurnitureStickieView.tsx
View File

@ -9,9 +9,8 @@ import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
import { FurnitureStickieData } from './FurnitureStickieData';
import { getStickieColorName, STICKIE_COLORS } from './FurnitureStickieUtils';
import { FurnitureStickieViewProps } from './FurnitureStickieView.types';
export const FurnitureStickieView: FC<FurnitureStickieViewProps> = props =>
export const FurnitureStickieView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ stickieData, setStickieData ] = useState<FurnitureStickieData>(null);

6
src/views/room/widgets/furniture/stickie/FurnitureStickieView.types.ts
View File

@ -1,6 +0,0 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurnitureStickieViewProps extends FurnitureWidgetProps
{
}

3
src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx
View File

@ -8,9 +8,8 @@ import { LocalizeText } from '../../../../../utils/LocalizeText';
import { useRoomContext } from '../../../context/RoomContext';
import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
import { FurnitureTrophyData } from './FurnitureTrophyData';
import { FurnitureTrophyViewProps } from './FurnitureTrophyView.types';
export const FurnitureTrophyView: FC<FurnitureTrophyViewProps> = props =>
export const FurnitureTrophyView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ trophyData, setTrophyData ] = useState<FurnitureTrophyData>(null);

4
src/views/room/widgets/furniture/trophy/FurnitureTrophyView.types.ts
View File

@ -1,4 +0,0 @@
import { FurnitureWidgetProps } from '../FurnitureWidget.types';
export interface FurnitureTrophyViewProps extends FurnitureWidgetProps
{}

5
src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx
View File

@ -3,6 +3,7 @@ import { FC, useCallback, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
import { LimitedEditionCompactPlateView } from '../../../../../shared/limited-edition/compact-plate/LimitedEditionCompactPlateView';
import { RarityLevelView } from '../../../../../shared/rarity-level/RarityLevelView';
import { useRoomContext } from '../../../../context/RoomContext';
import { RoomWidgetFurniActionMessage } from '../../../../messages';
import { InfoStandBaseView } from '../base/InfoStandBaseView';
@ -183,6 +184,10 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
<div className="position-absolute r-0">
<LimitedEditionCompactPlateView uniqueNumber={ furniData.stuffData.uniqueNumber } uniqueSeries={ furniData.stuffData.uniqueSeries } />
</div> }
{ (furniData.stuffData.rarityLevel > -1) &&
<div className="position-absolute r-0">
<RarityLevelView level={ furniData.stuffData.rarityLevel } />
</div> }
{ furniData.image.src.length &&
<img className="d-block mx-auto" src={ furniData.image.src } alt="" /> }
</div>