Widget updates

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)

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;
+}

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;

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';

src/layout/card/NitroCardView.tsx

@@ -4,7 +4,16 @@ import { NitroCardViewProps } from './NitroCardView.types';
 
 export const NitroCardView: FC<NitroCardViewProps> = props =>
 {
-    const { className = '', disableDrag = false, children = null } = props;
+    const { className = '', simple = false, disableDrag = false, children = null } = props;
+
+    if(simple)
+    {
+        return (
+            <div className={ 'nitro-card d-flex flex-column rounded border shadow overflow-hidden ' + className }>
+                { children }
+            </div>
+        );
+    }
 
     return (
         <div className="nitro-card-responsive">

src/layout/card/NitroCardView.types.ts

@@ -1,5 +1,6 @@
 export interface NitroCardViewProps
 {
     className?: string;
+    simple?: boolean;
     disableDrag?: boolean;
 }

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<NitroCardContentViewProps> = props =>
 {
+    const { isDark = false } = props;
+
     return (
-        <div className="container-fluid bg-light content-area">
+        <div className={ 'container-fluid bg-light content-area ' + classNames({ 'bg-light': !isDark, 'bg-dark': isDark }) }>
             { props.children }
         </div>
     );

src/layout/card/content/NitroCardContextView.types.ts

@@ -1,4 +1,4 @@
 export interface NitroCardContentViewProps
 {
-    
+    isDark?: boolean;
 }

src/layout/card/header/NitroCardHeaderView.tsx

@@ -6,13 +6,17 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
     const { headerText = null, onCloseClick = null } = props;
 
     return (
-        <div className="drag-handler container-fluid d-flex align-items-center bg-primary py-1 nitro-card-header">
-            <div className="d-flex flex-grow-1 justify-content-center align-items-center">
+        <div className="drag-handler container-fluid bg-primary">
+            <div className="row nitro-card-header">
+                <div className="col-10 offset-1 d-flex justify-content-center align-items-center">
                     <div className="h4 m-0 text-white text-shadow">{ headerText }</div>
                 </div>
+                <div className="d-flex col-1 justify-content-center align-items-center">
                     <div className="cursor-pointer" onClick={ onCloseClick }>
                         <i className="fas fa-times"></i>
                     </div>
                 </div>
+            </div>
+        </div>
     );
 }

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
                     <ChatWidgetView />
                     <ChatInputView />
                     <FurnitureWidgetsView events={ events } />
+                    <InfoStandWidgetView events={ events } />
                 </> }
         </div>
     );

src/views/room/widgets/RoomWidgets.scss

@@ -2,3 +2,4 @@
 @import './chat/ChatWidgetView';
 @import './chat-input/ChatInputView';
 @import './furniture/FurnitureWidgets';
+@import './infostand/InfoStandWidgetView';

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<AvatarInfoWidgetViewProps> = props =>
@@ -17,18 +16,12 @@ export const AvatarInfoWidgetView: FC<AvatarInfoWidgetViewProps> = 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<AvatarInfoWidgetViewProps> = 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);
 

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

@@ -9,7 +9,9 @@ export const AvatarInfoWidgetNameView: FC<AvatarInfoWidgetNameViewProps> = props
 
     return (
         <ObjectLocationView objectId={ objectId } category={ category }>
+            <div className="d-flex justify-content-center align-items-center bg-dark border border-dark">
                 { name }
+            </div>
         </ObjectLocationView>
     );
 }

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
 {

src/views/room/widgets/camera/CameraWidgetView.tsx

@@ -49,8 +49,6 @@ export const CameraWidgetView: FC<CameraWidgetViewProps> = 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);
     }, []);
     

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;
+    }
+}

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<InfoStandWidgetViewProps> = props =>
+{
+    const { events = null } = props;
+    const [ objectInfo, setObjectInfo ] = useState<FurnitureInfoData | UserInfoData | RentableBotInfoData>(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 <InfoStandWidgetFurniView furnitureInfoData={ objectInfo }  close={ closeInfostand } />;
+        }
+
+        else if(objectInfo instanceof UserInfoData)
+        {
+            switch(objectInfo.type)
+            {
+                case UserInfoData.OWN_USER:
+                case UserInfoData.PEER:
+                    return <InfoStandWidgetUserView userInfoData={ objectInfo } close={ closeInfostand } />;
+                case UserInfoData.BOT:
+                    return <InfoStandWidgetBotView botInfoData={ objectInfo }  close={ closeInfostand } />;
+            }
+        }
+
+        else if(objectInfo instanceof RentableBotInfoData)
+        {
+            return <InfoStandWidgetRentableBotView rentableBotInfoData={ objectInfo }  close={ closeInfostand } />;
+        }
+
+        return null;
+    }, [ objectInfo, closeInfostand ]);
+
+    if(!objectInfo) return null;
+
+    return (
+        <div className="d-flex flex-column align-items-end nitro-infostand-container">
+            { getInfostandView() }
+        </div>
+    );
+}

src/views/room/widgets/infostand/InfoStandWidgetView.types.ts

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

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<InfoStandWidgetBotViewProps> = props =>
+{
+    const { botInfoData = null } = props;
+
+    return null;
+}

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;
+}

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<InfoStandWidgetFurniViewProps> = 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<string[]>([]);
+    const [ furniSettingsValues, setFurniSettingsValues ] = useState<string[]>([]);
+    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 (
+        <>
+            <NitroCardView className="nitro-infostand" simple={ true }>
+                <NitroCardSimpleHeaderView headerText={ furnitureInfoData.name } onCloseClick={ close } />
+                <NitroCardContentView>
+                    <div className="w-100">
+                        { furnitureInfoData.stuffData.isUnique &&
+                            <LimitedEditionCompactPlateView uniqueNumber={ furnitureInfoData.stuffData.uniqueNumber } uniqueSeries={ furnitureInfoData.stuffData.uniqueSeries } /> }
+                        { furnitureInfoData.image.src.length && 
+                            <img className="d-block mx-auto" src={ furnitureInfoData.image.src } alt="" /> }
+                    </div>
+                    <div className="d-flex flex-column mt-2">
+                        <p className="badge badge-secondary mb-0 text-wrap">{ furnitureInfoData.description }</p>
+                        <p className="badge badge-secondary mt-2 mb-0 text-wrap">{ LocalizeText('furni.owner', [ 'name' ], [ furnitureInfoData.ownerName ]) }</p>
+                        { isCrackable &&
+                            <p className="badge badge-secondary mt-2 mb-0 text-wrap">{ LocalizeText('infostand.crackable_furni.hits_remaining', ['hits', 'target'], [ crackableHits.toString(), crackableTarget.toString() ]) }</p> }
+                        { (furnitureInfoData.groupId > 0) &&
+                            <div className="badge badge-secondary mt-2 mb-0" onClick={ openFurniGroupInfo }>
+                                <BadgeImageView badgeCode={ (furnitureInfoData.stuffData as StringDataType).getValue(2) } />
+                            </div> }
+                    </div>
+                    {/* <div className="mt-3" *ngIf="((furniSettingsKeys.length && furniSettingsValues.length) && (furniSettingsKeys.length === furniSettingsValues.length))">
+                        <ng-container *ngFor="let setting of furniSettingsKeys; let i = index">
+                            <p className="badge badge-secondary mb-2">{{ furniSettingsKeys[i] }}</p>
+                            <input type="text" className="form-control rounded mb-2" [(ngModel)]="furniSettingsValues[i]">
+                        </ng-container>
+                    </div> */}
+                </NitroCardContentView>
+            </NitroCardView>
+            <div className="button-container btn-group mt-2">
+                { canMove &&
+                    <button type="button" className="btn btn-dark" onClick={ event => processButtonAction('move') }>{ LocalizeText('infostand.button.move') }</button> }
+                { canRotate &&
+                    <button type="button" className="btn btn-dark" onClick={ event => processButtonAction('rotate') }>{ LocalizeText('infostand.button.rotate') }</button> }
+                { (pickupMode !== PICKUP_MODE_NONE) &&
+                    <button type="button" className="btn btn-dark" onClick={ event => processButtonAction('pickup') }>{ LocalizeText((pickupMode === PICKUP_MODE_EJECT) ? 'infostand.button.eject' : 'infostand.button.pickup') }</button> }
+                { canUse &&
+                    <button type="button" className="btn btn-dark" onClick={ event => processButtonAction('use') }>{ LocalizeText('infostand.button.use') }</button> }
+                {/* <button *ngIf="((furniSettingsKeys.length && furniSettingsValues.length) && (furniSettingsKeys.length === furniSettingsValues.length))" className="btn btn-primary" (click)="processButtonAction('save_branding_configuration')">{{ 'save' | translate }}</button> */}
+            </div>
+        </>
+    );
+}

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;
+}

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<InfoStandWidgetRentableBotViewProps> = props =>
+{
+    const { rentableBotInfoData = null, close = null } = props;
+
+    return null;
+}

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;
+}

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<InfoStandWidgetUserViewProps> = props =>
+{
+    const { userInfoData = null, close = null } = props;
+
+    return null;
+}

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;
+}

src/views/room/widgets/object-location/ObjectLocationView.tsx

@@ -6,8 +6,7 @@ import { ObjectLocationViewProps } from './ObjectLocationView.types';
 export const ObjectLocationView: FC<ObjectLocationViewProps> = 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<HTMLDivElement>();
 
     const updatePosition = useCallback(() =>
@@ -17,8 +16,10 @@ export const ObjectLocationView: FC<ObjectLocationViewProps> = 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<ObjectLocationViewProps> = props =>
     }, [ updatePosition ]);
 
     return (
-        <div ref={ elementRef } className="position-absolute" style={ { left: posX, top: posY } }>
+        <div ref={ elementRef } className={ 'position-absolute ' + (pos.x > -1 ? 'visible' : 'invisible') } style={ { left: pos.x, top: pos.y } }>
             { children }
         </div>
     );