From 9d2674652453ff407a7a3717597f59957788cfe4 Mon Sep 17 00:00:00 2001 From: Bill Date: Tue, 15 Jun 2021 14:06:46 -0400 Subject: [PATCH] Widget updates --- src/api/nitro/session/GetFurnitureInfoData.ts | 4 +- src/api/nitro/session/GetObjectInfo.ts | 38 ++++ ...RoomObjectNameData.ts => GetObjectName.ts} | 2 +- src/api/nitro/session/index.ts | 3 +- src/layout/card/NitroCardView.tsx | 11 +- src/layout/card/NitroCardView.types.ts | 1 + .../card/content/NitroCardContentView.tsx | 5 +- .../content/NitroCardContextView.types.ts | 2 +- .../card/header/NitroCardHeaderView.tsx | 16 +- src/views/room/RoomView.tsx | 2 + src/views/room/widgets/RoomWidgets.scss | 1 + .../avatar-info/AvatarInfoWidgetView.tsx | 13 +- .../views/name/AvatarInfoWidgetNameView.tsx | 4 +- .../name/AvatarInfoWidgetNameView.types.ts | 2 +- .../room/widgets/camera/CameraWidgetView.tsx | 2 - .../infostand/InfoStandWidgetView.scss | 110 +++++++++++ .../widgets/infostand/InfoStandWidgetView.tsx | 113 +++++++++++ .../infostand/InfoStandWidgetView.types.ts | 6 + .../views/bot/InfoStandWidgetBotView.tsx | 9 + .../views/bot/InfoStandWidgetBotView.types.ts | 7 + .../views/furni/InfoStandWidgetFurniView.tsx | 181 ++++++++++++++++++ .../furni/InfoStandWidgetFurniView.types.ts | 7 + .../InfoStandWidgetRentableBotView.tsx | 9 + .../InfoStandWidgetRentableBotView.types.ts | 7 + .../views/user/InfoStandWidgetUserView.tsx | 9 + .../user/InfoStandWidgetUserView.types.ts | 7 + .../object-location/ObjectLocationView.tsx | 11 +- 27 files changed, 549 insertions(+), 33 deletions(-) create mode 100644 src/api/nitro/session/GetObjectInfo.ts rename src/api/nitro/session/{GetRoomObjectNameData.ts => GetObjectName.ts} (94%) create mode 100644 src/views/room/widgets/infostand/InfoStandWidgetView.scss create mode 100644 src/views/room/widgets/infostand/InfoStandWidgetView.tsx create mode 100644 src/views/room/widgets/infostand/InfoStandWidgetView.types.ts create mode 100644 src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx create mode 100644 src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.types.ts create mode 100644 src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx create mode 100644 src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.types.ts create mode 100644 src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx create mode 100644 src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.types.ts create mode 100644 src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx create mode 100644 src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.types.ts diff --git a/src/api/nitro/session/GetFurnitureInfoData.ts b/src/api/nitro/session/GetFurnitureInfoData.ts index a0f6537e..8ac717e9 100644 --- a/src/api/nitro/session/GetFurnitureInfoData.ts +++ b/src/api/nitro/session/GetFurnitureInfoData.ts @@ -47,12 +47,12 @@ export function GetFurnitureInfoData(roomId: number, objectId: number, category: if(category === RoomObjectCategory.FLOOR) { - furnitureData = this._container.sessionDataManager.getFloorItemData(typeId); + furnitureData = GetSessionDataManager().getFloorItemData(typeId); } else if(category === RoomObjectCategory.WALL) { - furnitureData = this._container.sessionDataManager.getWallItemData(typeId); + furnitureData = GetSessionDataManager().getWallItemData(typeId); } if(furnitureData) diff --git a/src/api/nitro/session/GetObjectInfo.ts b/src/api/nitro/session/GetObjectInfo.ts new file mode 100644 index 00000000..46b09706 --- /dev/null +++ b/src/api/nitro/session/GetObjectInfo.ts @@ -0,0 +1,38 @@ +import { RoomObjectCategory, RoomObjectType } from 'nitro-renderer'; +import { FurnitureInfoData } from './FurnitureInfoData'; +import { GetBotInfoData } from './GetBotInfoData'; +import { GetFurnitureInfoData } from './GetFurnitureInfoData'; +import { GetRentableBotInfoData } from './GetRentableBotInfoData'; +import { GetRoomSession } from './GetRoomSession'; +import { GetUserInfoData } from './GetUserInfoData'; +import { RentableBotInfoData } from './RentableBotInfoData'; +import { UserInfoData } from './UserInfoData'; + +export function GetObjectInfo(roomId: number, objectId: number, category: number): FurnitureInfoData | UserInfoData | RentableBotInfoData +{ + switch(category) + { + case RoomObjectCategory.FLOOR: + case RoomObjectCategory.WALL: + return GetFurnitureInfoData(roomId, objectId, category); + case RoomObjectCategory.UNIT: + const userData = GetRoomSession().userDataManager.getUserDataByIndex(objectId); + + if(!userData) return null; + + switch(userData.type) + { + case RoomObjectType.PET: + GetRoomSession().userDataManager.requestPetInfo(userData.webID); + return null; + case RoomObjectType.USER: + return GetUserInfoData(roomId, objectId, category, userData); + case RoomObjectType.BOT: + return GetBotInfoData(roomId, objectId, category, userData); + case RoomObjectType.RENTABLE_BOT: + return GetRentableBotInfoData(roomId, objectId, category, userData); + } + } + + return null; +} diff --git a/src/api/nitro/session/GetRoomObjectNameData.ts b/src/api/nitro/session/GetObjectName.ts similarity index 94% rename from src/api/nitro/session/GetRoomObjectNameData.ts rename to src/api/nitro/session/GetObjectName.ts index b68f96a6..dc47cc02 100644 --- a/src/api/nitro/session/GetRoomObjectNameData.ts +++ b/src/api/nitro/session/GetObjectName.ts @@ -4,7 +4,7 @@ import { GetRoomSession } from './GetRoomSession'; import { GetSessionDataManager } from './GetSessionDataManager'; import { RoomObjectNameData } from './RoomObjectNameData'; -export function GetRoomObjectNameData(roomId: number, objectId: number, category: number): RoomObjectNameData +export function GetObjectName(roomId: number, objectId: number, category: number): RoomObjectNameData { let id = -1; let name: string = null; diff --git a/src/api/nitro/session/index.ts b/src/api/nitro/session/index.ts index 4290c424..5340d167 100644 --- a/src/api/nitro/session/index.ts +++ b/src/api/nitro/session/index.ts @@ -3,9 +3,10 @@ export * from './FurnitureInfoData'; export * from './GetBotInfoData'; export * from './GetFurnitureDataForProductOffer'; export * from './GetFurnitureInfoData'; +export * from './GetObjectInfo'; +export * from './GetObjectName'; export * from './GetProductDataForLocalization'; export * from './GetRentableBotInfoData'; -export * from './GetRoomObjectNameData'; export * from './GetRoomSession'; export * from './GetRoomSessionManager'; export * from './GetSessionDataManager'; diff --git a/src/layout/card/NitroCardView.tsx b/src/layout/card/NitroCardView.tsx index 6c3b6848..11013c2f 100644 --- a/src/layout/card/NitroCardView.tsx +++ b/src/layout/card/NitroCardView.tsx @@ -4,7 +4,16 @@ import { NitroCardViewProps } from './NitroCardView.types'; export const NitroCardView: FC = props => { - const { className = '', disableDrag = false, children = null } = props; + const { className = '', simple = false, disableDrag = false, children = null } = props; + + if(simple) + { + return ( +
+ { children } +
+ ); + } return (
diff --git a/src/layout/card/NitroCardView.types.ts b/src/layout/card/NitroCardView.types.ts index 9b4c8cb4..404b6e0f 100644 --- a/src/layout/card/NitroCardView.types.ts +++ b/src/layout/card/NitroCardView.types.ts @@ -1,5 +1,6 @@ export interface NitroCardViewProps { className?: string; + simple?: boolean; disableDrag?: boolean; } diff --git a/src/layout/card/content/NitroCardContentView.tsx b/src/layout/card/content/NitroCardContentView.tsx index 4067d928..a2f1ab40 100644 --- a/src/layout/card/content/NitroCardContentView.tsx +++ b/src/layout/card/content/NitroCardContentView.tsx @@ -1,10 +1,13 @@ +import classNames from 'classnames'; import { FC } from 'react'; import { NitroCardContentViewProps } from './NitroCardContextView.types'; export const NitroCardContentView: FC = props => { + const { isDark = false } = props; + return ( -
+
{ props.children }
); diff --git a/src/layout/card/content/NitroCardContextView.types.ts b/src/layout/card/content/NitroCardContextView.types.ts index 4c529598..ae0dfc8a 100644 --- a/src/layout/card/content/NitroCardContextView.types.ts +++ b/src/layout/card/content/NitroCardContextView.types.ts @@ -1,4 +1,4 @@ export interface NitroCardContentViewProps { - + isDark?: boolean; } diff --git a/src/layout/card/header/NitroCardHeaderView.tsx b/src/layout/card/header/NitroCardHeaderView.tsx index 875671e5..df00422f 100644 --- a/src/layout/card/header/NitroCardHeaderView.tsx +++ b/src/layout/card/header/NitroCardHeaderView.tsx @@ -6,12 +6,16 @@ export const NitroCardHeaderView: FC = props => const { headerText = null, onCloseClick = null } = props; return ( -
-
-
{ headerText }
-
-
- +
+
+
+
{ headerText }
+
+
+
+ +
+
); diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index 99019599..0d44f6e3 100644 --- a/src/views/room/RoomView.tsx +++ b/src/views/room/RoomView.tsx @@ -11,6 +11,7 @@ import { CameraWidgetView } from './widgets/camera/CameraWidgetView'; import { ChatInputView } from './widgets/chat-input/ChatInputView'; import { ChatWidgetView } from './widgets/chat/ChatWidgetView'; import { FurnitureWidgetsView } from './widgets/furniture/FurnitureWidgetsView'; +import { InfoStandWidgetView } from './widgets/infostand/InfoStandWidgetView'; export function RoomView(props: RoomViewProps): JSX.Element { @@ -97,6 +98,7 @@ export function RoomView(props: RoomViewProps): JSX.Element + }
); diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss index 8b1fa8ca..764fc5cb 100644 --- a/src/views/room/widgets/RoomWidgets.scss +++ b/src/views/room/widgets/RoomWidgets.scss @@ -2,3 +2,4 @@ @import './chat/ChatWidgetView'; @import './chat-input/ChatInputView'; @import './furniture/FurnitureWidgets'; +@import './infostand/InfoStandWidgetView'; diff --git a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx index 22689633..12d825da 100644 --- a/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx +++ b/src/views/room/widgets/avatar-info/AvatarInfoWidgetView.tsx @@ -1,10 +1,9 @@ import { RoomObjectCategory } from 'nitro-renderer'; import { FC, useCallback, useState } from 'react'; +import { GetObjectName, RoomObjectNameData } from '../../../../api'; import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base'; import { RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../events'; import { AvatarInfoWidgetViewProps } from './AvatarInfoWidgetView.types'; -import { GetRoomObjectNameData } from './utils/GetRoomObjectNameData'; -import { RoomObjectNameData } from './utils/RoomObjectNameData'; import { AvatarInfoWidgetNameView } from './views/name/AvatarInfoWidgetNameView'; export const AvatarInfoWidgetView: FC = props => @@ -17,18 +16,12 @@ export const AvatarInfoWidgetView: FC = props => { switch(event.type) { - case RoomWidgetRoomObjectUpdateEvent.OBJECT_SELECTED: { - return; - } - case RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED: { - return; - } case RoomWidgetRoomObjectUpdateEvent.OBJECT_ROLL_OVER: { if(isGameMode) return; if(event.category !== RoomObjectCategory.UNIT) return; - const nameData = GetRoomObjectNameData(event.roomId, event.id, event.category); + const nameData = GetObjectName(event.roomId, event.id, event.category); if(nameData) { @@ -76,8 +69,6 @@ export const AvatarInfoWidgetView: FC = props => } }, []); - CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_SELECTED, events, onRoomWidgetRoomObjectUpdateEvent); - CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED, events, onRoomWidgetRoomObjectUpdateEvent); CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_ROLL_OVER, events, onRoomWidgetRoomObjectUpdateEvent); CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_ROLL_OUT, events, onRoomWidgetRoomObjectUpdateEvent); 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 0dfcfd4a..7c6830e9 100644 --- a/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx +++ b/src/views/room/widgets/avatar-info/views/name/AvatarInfoWidgetNameView.tsx @@ -9,7 +9,9 @@ export const AvatarInfoWidgetNameView: FC = props return ( - { name } +
+ { 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 7cf34445..7a5bea98 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 @@ -1,4 +1,4 @@ -import { RoomObjectNameData } from '../../utils/RoomObjectNameData'; +import { RoomObjectNameData } from '../../../../../../api'; export interface AvatarInfoWidgetNameViewProps { diff --git a/src/views/room/widgets/camera/CameraWidgetView.tsx b/src/views/room/widgets/camera/CameraWidgetView.tsx index 00c3284d..6b43ad2c 100644 --- a/src/views/room/widgets/camera/CameraWidgetView.tsx +++ b/src/views/room/widgets/camera/CameraWidgetView.tsx @@ -49,8 +49,6 @@ export const CameraWidgetView: FC = props => const rectangle = new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height)); - console.log(rectangle); - GetRoomEngine().createRoomScreenshot(GetRoomSession().roomId, 1, rectangle); }, []); diff --git a/src/views/room/widgets/infostand/InfoStandWidgetView.scss b/src/views/room/widgets/infostand/InfoStandWidgetView.scss new file mode 100644 index 00000000..f22f5907 --- /dev/null +++ b/src/views/room/widgets/infostand/InfoStandWidgetView.scss @@ -0,0 +1,110 @@ +.nitro-infostand-container { + position: absolute; + right: 10px; + bottom: $toolbar-height + 10px; + pointer-events: none; + z-index: $infostand-zindex; + + .nitro-infostand { + position: relative; + min-width: 200px; + max-width: 200px; + z-index: $infostand-zindex; + pointer-events: auto; + + .avatar-image { + position: relative; + width: 90px; + height: 130px; + background-repeat: no-repeat; + background-position-x: center; + background-position-y: -8px !important; + } + + .pet-image { + position: relative; + width: 100%; + height: 130px; + background-repeat: no-repeat; + background-position: center; + } + + .body-image { + display: flex; + align-items: center; + justify-content: center; + background-color: rgba($secondary, 1); + width: 100%; + max-width: 68px; + border-radius: 3px; + margin-right: 5px; + + &.bot { + background-image: url('../../../../assets/images/infostand/bot_background.png'); + background-repeat: no-repeat; + background-position: center; + } + + &.furni { + background-color: transparent; + margin-right: 0; + } + } + + .grid-container { + + .grid-items { + + .item-detail { + height: 40px; + max-height: 40px; + } + } + } + + .motto-container { + display: flex; + align-items: center; + min-height: 28px; + width: 100%; + padding: 5px 8px; + background-color: rgba($secondary, 1); + border-radius: 3px; + + i.icon { + margin-right: 5px; + } + + .motto { + font-size: 12px; + width: 100%; + word-break: break-word; + } + + .motto-input { + width: 100%; + height: 100%; + font-size: 12px; + padding: 0; + outline: 0; + border: 0; + color: rgba($white, 1); + position: relative; + background: transparent; + resize: none; + + &:focus { + font-style: italic; + } + } + } + + p { + display: block; + } + } + + .button-container { + pointer-events: auto; + } +} diff --git a/src/views/room/widgets/infostand/InfoStandWidgetView.tsx b/src/views/room/widgets/infostand/InfoStandWidgetView.tsx new file mode 100644 index 00000000..e76d6341 --- /dev/null +++ b/src/views/room/widgets/infostand/InfoStandWidgetView.tsx @@ -0,0 +1,113 @@ +import { RoomSessionUserBadgesEvent } from 'nitro-renderer'; +import { FC, useCallback, useState } from 'react'; +import { FurnitureInfoData, GetObjectInfo, RentableBotInfoData, UserInfoData } from '../../../../api'; +import { CreateEventDispatcherHook } from '../../../../hooks/events/event-dispatcher.base'; +import { useRoomSessionManagerEvent } from '../../../../hooks/events/nitro/session/room-session-manager-event'; +import { RoomWidgetRoomObjectUpdateEvent } from '../events'; +import { InfoStandWidgetViewProps } from './InfoStandWidgetView.types'; +import { InfoStandWidgetBotView } from './views/bot/InfoStandWidgetBotView'; +import { InfoStandWidgetFurniView } from './views/furni/InfoStandWidgetFurniView'; +import { InfoStandWidgetRentableBotView } from './views/rentable-bot/InfoStandWidgetRentableBotView'; +import { InfoStandWidgetUserView } from './views/user/InfoStandWidgetUserView'; + +export const InfoStandWidgetView: FC = props => +{ + const { events = null } = props; + const [ objectInfo, setObjectInfo ] = useState(null); + + const closeInfostand = useCallback(() => + { + setObjectInfo(null); + }, []); + + const objectSelectedHandler = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => + { + const objectInfo = GetObjectInfo(event.roomId, event.id, event.category); + + if(!objectInfo) return; + + setObjectInfo(objectInfo); + }, []); + + const objectDeselectedHandler = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => + { + closeInfostand(); + }, [ closeInfostand ]); + + const objectRemovedHandler = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => + { + if(!objectInfo) return; + + let remove = false; + + switch(event.type) + { + case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: + if(objectInfo instanceof FurnitureInfoData) + { + if(objectInfo.id === event.id) remove = true; + } + break; + case RoomWidgetRoomObjectUpdateEvent.USER_REMOVED: + if(objectInfo instanceof UserInfoData) + { + if(objectInfo.userRoomId === event.id) remove = true; + } + + else if(objectInfo instanceof RentableBotInfoData) + { + if(objectInfo.userRoomId === event.id) remove = true; + } + break; + } + + if(remove) closeInfostand(); + }, [ objectInfo, closeInfostand ]); + + CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_SELECTED, events, objectSelectedHandler); + CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED, events, objectDeselectedHandler); + CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_REMOVED, events, objectRemovedHandler); + CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, events, objectRemovedHandler); + + const onRoomSessionUserBadgesEvent = useCallback((event: RoomSessionUserBadgesEvent) => + { + console.log(event); + }, []); + + useRoomSessionManagerEvent(RoomSessionUserBadgesEvent.RSUBE_BADGES, onRoomSessionUserBadgesEvent); + + const getInfostandView = useCallback(() => + { + if(objectInfo instanceof FurnitureInfoData) + { + return ; + } + + else if(objectInfo instanceof UserInfoData) + { + switch(objectInfo.type) + { + case UserInfoData.OWN_USER: + case UserInfoData.PEER: + return ; + case UserInfoData.BOT: + return ; + } + } + + else if(objectInfo instanceof RentableBotInfoData) + { + return ; + } + + return null; + }, [ objectInfo, closeInfostand ]); + + if(!objectInfo) return null; + + return ( +
+ { getInfostandView() } +
+ ); +} diff --git a/src/views/room/widgets/infostand/InfoStandWidgetView.types.ts b/src/views/room/widgets/infostand/InfoStandWidgetView.types.ts new file mode 100644 index 00000000..b87ed575 --- /dev/null +++ b/src/views/room/widgets/infostand/InfoStandWidgetView.types.ts @@ -0,0 +1,6 @@ +import { RoomWidgetProps } from '../RoomWidgets.types'; + +export interface InfoStandWidgetViewProps extends RoomWidgetProps +{ + +} diff --git a/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx b/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx new file mode 100644 index 00000000..604ab2d6 --- /dev/null +++ b/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.tsx @@ -0,0 +1,9 @@ +import { FC } from 'react'; +import { InfoStandWidgetBotViewProps } from './InfoStandWidgetBotView.types'; + +export const InfoStandWidgetBotView: FC = props => +{ + const { botInfoData = null } = props; + + return null; +} diff --git a/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.types.ts b/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.types.ts new file mode 100644 index 00000000..81dacad3 --- /dev/null +++ b/src/views/room/widgets/infostand/views/bot/InfoStandWidgetBotView.types.ts @@ -0,0 +1,7 @@ +import { UserInfoData } from '../../../../../../api'; + +export interface InfoStandWidgetBotViewProps +{ + botInfoData: UserInfoData; + close: () => void; +} diff --git a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx new file mode 100644 index 00000000..6d85eabf --- /dev/null +++ b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx @@ -0,0 +1,181 @@ +import { CrackableDataType, RoomControllerLevel, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, StringDataType } from 'nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { FurniAction, ProcessFurniAction } from '../../../../../../api'; +import { NitroCardContentView, NitroCardView } from '../../../../../../layout'; +import { NitroCardSimpleHeaderView } from '../../../../../../layout/card/simple-header'; +import { LocalizeText } from '../../../../../../utils/LocalizeText'; +import { BadgeImageView } from '../../../../../badge-image/BadgeImageView'; +import { LimitedEditionCompactPlateView } from '../../../../../limited-edition/compact-plate/LimitedEditionCompactPlateView'; +import { InfoStandWidgetFurniViewProps } from './InfoStandWidgetFurniView.types'; + +const PICKUP_MODE_NONE: number = 0; +const PICKUP_MODE_EJECT: number = 1; +const PICKUP_MODE_FULL: number = 2; + +export const InfoStandWidgetFurniView: FC = props => +{ + const { furnitureInfoData = null, close = null } = props; + const [ pickupMode, setPickupMode ] = useState(0); + const [ canMove, setCanMove ] = useState(false); + const [ canRotate, setCanRotate ] = useState(false); + const [ canUse, setCanUse ] = useState(false); + const [ furniSettingsKeys, setFurniSettingsKeys ] = useState([]); + const [ furniSettingsValues, setFurniSettingsValues ] = useState([]); + const [ isCrackable, setIsCrackable ] = useState(false); + const [ crackableHits, setCrackableHits ] = useState(0); + const [ crackableTarget, setCrackableTarget ] = useState(0); + + useEffect(() => + { + const isValidController = (furnitureInfoData.roomControllerLevel >= RoomControllerLevel.GUEST); + + let godMode = false; + + if(isValidController || furnitureInfoData.isOwner || furnitureInfoData.isRoomOwner || furnitureInfoData.isAnyRoomController) + { + setCanMove(true); + setCanRotate(!furnitureInfoData.isWallItem); + + if(furnitureInfoData.roomControllerLevel >= RoomControllerLevel.MODERATOR) godMode = true; + } + + if((((furnitureInfoData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum._Str_18353) || ((furnitureInfoData.usagePolicy === RoomWidgetFurniInfoUsagePolicyEnum._Str_18194) && isValidController)) || ((furnitureInfoData.extraParam === RoomWidgetEnumItemExtradataParameter.JUKEBOX) && isValidController)) || ((furnitureInfoData.extraParam === RoomWidgetEnumItemExtradataParameter.USABLE_PRODUCT) && isValidController)) setCanUse(true); + + if(furnitureInfoData.extraParam) + { + if(furnitureInfoData.extraParam === RoomWidgetEnumItemExtradataParameter.CRACKABLE_FURNI) + { + const stuffData = (furnitureInfoData.stuffData as CrackableDataType); + + setCanUse(true); + setIsCrackable(true); + setCrackableHits(stuffData.hits); + setCrackableTarget(stuffData.target); + } + + if(godMode) + { + const extraParam = furnitureInfoData.extraParam.substr(RoomWidgetEnumItemExtradataParameter.BRANDING_OPTIONS.length); + + if(extraParam) + { + const parts = extraParam.split('\t'); + + let keys: string[] = []; + let values: string[] = []; + + for(const part of parts) + { + const value = part.split('='); + + if(value && (value.length === 2)) + { + keys.push(value[0]); + values.push(value[1]); + } + } + + setFurniSettingsKeys(keys); + setFurniSettingsValues(values); + } + } + } + + setPickupMode(PICKUP_MODE_NONE); + + if(furnitureInfoData.isOwner || furnitureInfoData.isAnyRoomController) + { + setPickupMode(PICKUP_MODE_FULL); + } + + else if(furnitureInfoData.isRoomOwner || (furnitureInfoData.roomControllerLevel >= RoomControllerLevel.GUILD_ADMIN)) + { + setPickupMode(PICKUP_MODE_EJECT); + } + + else if(furnitureInfoData.isStickie) setPickupMode(PICKUP_MODE_NONE); + }, [ furnitureInfoData ]); + + const openFurniGroupInfo = useCallback(() => + { + + }, []); + + const processButtonAction = useCallback((action: string) => + { + if(!action || (action === '')) return; + + let messageType: string = null; + let objectData: string = null; + + switch(action) + { + case 'move': + messageType = FurniAction.MOVE; + break; + case 'rotate': + messageType = FurniAction.ROTATE; + break; + case 'pickup': + if(pickupMode === PICKUP_MODE_FULL) messageType = FurniAction.PICKUP; + else messageType = FurniAction.EJECT; + break; + case 'use': + messageType = FurniAction.USE; + break; + // case 'save_branding_configuration': + // messageType = RoomWidgetFurniActionMessage.RWFAM_SAVE_STUFF_DATA; + // objectData = this.getSettingsAsString(); + // break; + } + + if(!messageType) return; + + ProcessFurniAction(messageType, furnitureInfoData.id, furnitureInfoData.category, furnitureInfoData.purchaseOfferId, objectData); + }, [ furnitureInfoData, pickupMode ]); + + if(!furnitureInfoData) return null; + + return ( + <> + + + +
+ { furnitureInfoData.stuffData.isUnique && + } + { furnitureInfoData.image.src.length && + } +
+
+

{ furnitureInfoData.description }

+

{ LocalizeText('furni.owner', [ 'name' ], [ furnitureInfoData.ownerName ]) }

+ { isCrackable && +

{ LocalizeText('infostand.crackable_furni.hits_remaining', ['hits', 'target'], [ crackableHits.toString(), crackableTarget.toString() ]) }

} + { (furnitureInfoData.groupId > 0) && +
+ +
} +
+ {/*
+ +

{{ furniSettingsKeys[i] }}

+ + +
*/} + + +
+ { canMove && + } + { canRotate && + } + { (pickupMode !== PICKUP_MODE_NONE) && + } + { canUse && + } + {/* */} +
+ + ); +} diff --git a/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.types.ts b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.types.ts new file mode 100644 index 00000000..85f8dc8a --- /dev/null +++ b/src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.types.ts @@ -0,0 +1,7 @@ +import { FurnitureInfoData } from '../../../../../../api'; + +export interface InfoStandWidgetFurniViewProps +{ + furnitureInfoData: FurnitureInfoData; + close: () => void; +} diff --git a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx new file mode 100644 index 00000000..cdc43f6e --- /dev/null +++ b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.tsx @@ -0,0 +1,9 @@ +import { FC } from 'react'; +import { InfoStandWidgetRentableBotViewProps } from './InfoStandWidgetRentableBotView.types'; + +export const InfoStandWidgetRentableBotView: FC = props => +{ + const { rentableBotInfoData = null, close = null } = props; + + return null; +} diff --git a/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.types.ts b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.types.ts new file mode 100644 index 00000000..09850215 --- /dev/null +++ b/src/views/room/widgets/infostand/views/rentable-bot/InfoStandWidgetRentableBotView.types.ts @@ -0,0 +1,7 @@ +import { RentableBotInfoData } from '../../../../../../api'; + +export interface InfoStandWidgetRentableBotViewProps +{ + rentableBotInfoData: RentableBotInfoData; + close: () => void; +} diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx new file mode 100644 index 00000000..5cd4c3bd --- /dev/null +++ b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx @@ -0,0 +1,9 @@ +import { FC } from 'react'; +import { InfoStandWidgetUserViewProps } from './InfoStandWidgetUserView.types'; + +export const InfoStandWidgetUserView: FC = props => +{ + const { userInfoData = null, close = null } = props; + + return null; +} diff --git a/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.types.ts b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.types.ts new file mode 100644 index 00000000..5a181589 --- /dev/null +++ b/src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.types.ts @@ -0,0 +1,7 @@ +import { UserInfoData } from '../../../../../../api'; + +export interface InfoStandWidgetUserViewProps +{ + userInfoData: UserInfoData; + close: () => void; +} diff --git a/src/views/room/widgets/object-location/ObjectLocationView.tsx b/src/views/room/widgets/object-location/ObjectLocationView.tsx index e13baa94..8fd41a41 100644 --- a/src/views/room/widgets/object-location/ObjectLocationView.tsx +++ b/src/views/room/widgets/object-location/ObjectLocationView.tsx @@ -6,8 +6,7 @@ import { ObjectLocationViewProps } from './ObjectLocationView.types'; export const ObjectLocationView: FC = props => { const { objectId = -1, category = -1, children = null } = props; - const [ posX, setPosX ] = useState(0); - const [ posY, setPosY ] = useState(0); + const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: -1, y: -1}); const elementRef = useRef(); const updatePosition = useCallback(() => @@ -17,8 +16,10 @@ export const ObjectLocationView: FC = props => if(!objectBounds || !elementRef.current) return; - setPosX(Math.round(((objectBounds.left + (objectBounds.width / 2)) - (elementRef.current.offsetWidth / 2)))); - setPosY(Math.round((objectBounds.top - elementRef.current.offsetHeight) + 10)); + setPos({ + x: Math.round(((objectBounds.left + (objectBounds.width / 2)) - (elementRef.current.offsetWidth / 2))), + y: Math.round((objectBounds.top - elementRef.current.offsetHeight) + 10) + }); }, [ objectId, category ]); useEffect(() => @@ -32,7 +33,7 @@ export const ObjectLocationView: FC = props => }, [ updatePosition ]); return ( -
+
-1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y } }> { children }
);