Updates

src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx

@@ -7,6 +7,7 @@ import { dispatchUiEvent } from '../../../../hooks/events';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
 import { LocalizeText } from '../../../../utils/LocalizeText';
+import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
 import { useNavigatorContext } from '../../context/NavigatorContext';
 import { NavigatorActions } from '../../reducers/NavigatorReducer';
 import { NavigatorRoomInfoViewProps } from './NavigatorRoomInfoView.types';
@@ -34,7 +35,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
         setIsRoomMuted(roomInfoData.enteredGuestRoom.allInRoomMuted);
     }, [ roomInfoData ]);
     
-    const processAction = useCallback((action: string) =>
+    const processAction = useCallback((action: string, value?: string) =>
     {
         if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
 
@@ -57,6 +58,12 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
 
                 SendMessageHook(new UserHomeRoomComposer(newRoomId));
                 return;
+            case 'navigator_search_tag':
+                return;
+            case 'open_room_thumbnail_camera':
+                return;
+            case 'open_group_info':
+                return;
             case 'toggle_room_link':
                 dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
                 return;
@@ -103,7 +110,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                     <div className="d-flex mb-1">
                         { roomInfoData.enteredGuestRoom.tags.map(tag =>
                             {
-                                return <div className="bg-muted p-1 rounded me-1 cursor-pointer">#{ tag }</div>
+                                return <div className="bg-muted p-1 rounded me-1 cursor-pointer" onClick={ () => processAction('navigator_search_tag', tag) }>#{ tag }</div>
                             }) }
                     </div>
                     <div>{ roomInfoData.enteredGuestRoom.description }</div>
@@ -111,12 +118,19 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                         <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" />
                         { roomThumbnail && <img alt="" src={ roomThumbnail } /> }
                     </div>
+                    { roomInfoData.enteredGuestRoom.habboGroupId > 0 && <div className="d-flex align-items-center mb-2 cursor-pointer" onClick={ () => processAction('open_group_info') }>
+                        <div className="me-2">
+                            <BadgeImageView badgeCode={ roomInfoData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
+                        </div>
+                        <div className="text-decoration-underline">
+                            { LocalizeText('navigator.guildbase', ['groupName'], [roomInfoData.enteredGuestRoom.groupName]) }
+                        </div>
+                    </div> }
                     <div className="cursor-pointer text-decoration-underline d-flex align-items-center mb-2" onClick={ () => processAction('toggle_room_link') }>
                         <i className="icon icon-arrows me-1" />
                         <span>{ LocalizeText('navigator.embed.caption') }</span>
                     </div>
                     <button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('navigator.room.popup.info.room.settings') }</button>
-                    <button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('navigator.roomsettings.roomfilter') }</button>
                     <button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('open.floor.plan.editor') }</button>
                     <button className="btn btn-sm btn-primary w-100 mb-1" onClick={ () => processAction('toggle_pick') }>{ LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }</button>
                     <button className="btn btn-sm btn-danger w-100 mb-1" disabled={ true }>{ LocalizeText('help.emergency.main.report.room') }</button>

src/views/room/widgets/RoomWidgets.scss

@@ -6,3 +6,4 @@
 @import './infostand/InfoStandWidgetView';
 @import './object-location/ObjectLocationView';
 @import './room-tools/RoomToolsWidgetView';
+@import './room-thumbnail/RoomThumbnailView';

src/views/room/widgets/RoomWidgetsView.tsx

@@ -9,9 +9,9 @@ import { ChatInputView } from './chat-input/ChatInputView';
 import { ChatWidgetView } from './chat/ChatWidgetView';
 import { FurnitureWidgetsView } from './furniture/FurnitureWidgetsView';
 import { InfoStandWidgetView } from './infostand/InfoStandWidgetView';
+import { RoomThumbnailWidgetView } from './room-thumbnail/RoomThumbnailWidgetView';
 import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView';
 import { RoomWidgetViewProps } from './RoomWidgets.types';
-
 export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
 {
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
@@ -110,6 +110,7 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
             <FurnitureWidgetsView />
             <InfoStandWidgetView />
             <RoomToolsWidgetView />
+            <RoomThumbnailWidgetView />
         </>
     );
 }

src/views/room/widgets/room-thumbnail/RoomThumbnailView.scss

@@ -0,0 +1,14 @@
+.nitro-room-thumbnail {
+    width: 300px;
+
+    .option {
+        font-size: 30px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+    }
+}
+
+@import './views/builder/RoomThumbnailWidgetBuilderView';
+@import './views/camera/RoomThumbnailWidgetCameraView';

src/views/room/widgets/room-thumbnail/RoomThumbnailView.types.ts

@@ -0,0 +1,4 @@
+import { RoomWidgetProps } from '../RoomWidgets.types';
+
+export class RoomThumbnailWidgetViewProps implements RoomWidgetProps
+{}

src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx

@@ -0,0 +1,44 @@
+import { FC, useCallback, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { RoomThumbnailWidgetViewProps } from './RoomThumbnailView.types';
+import { RoomThumbnailWidgetBuilderView } from './views/builder/RoomThumbnailWidgetBuilderView';
+import { RoomThumbnailWidgetCameraView } from './views/camera/RoomThumbnailWidgetCameraView';
+
+export const RoomThumbnailWidgetView: FC<RoomThumbnailWidgetViewProps> = props =>
+{
+    const [ isSelectorVisible, setIsSelectorVisible ] = useState(false);
+    const [ isBuilderVisible, setIsBuilderVisible ] = useState(false);
+    const [ isCameraVisible, setIsCameraVisible ] = useState(false);
+
+    const handleAction = useCallback((action: string) =>
+    {
+        switch(action)
+        {
+            case 'camera':
+                setIsSelectorVisible(false);
+                setIsCameraVisible(true);
+                return;
+            case 'builder':
+                setIsSelectorVisible(false);
+                setIsBuilderVisible(true);
+                return;
+        }
+    }, [ setIsSelectorVisible, setIsCameraVisible, setIsBuilderVisible ]);
+
+    return (<>
+        { isSelectorVisible && <NitroCardView className="nitro-room-thumbnail">
+            <NitroCardHeaderView headerText={ LocalizeText('navigator.thumbeditor.caption') } onCloseClick={ () => setIsSelectorVisible(false) } />
+            <NitroCardContentView className="d-flex align-items-center justify-content-center text-muted">
+                <div className="option me-5" onClick={ () => handleAction('camera') }>
+                    <i className="fas fa-camera" />
+                </div>
+                <div className="option" onClick={ () => handleAction('builder') }>
+                    <i className="fas fa-pencil-ruler" />
+                </div>
+            </NitroCardContentView>
+        </NitroCardView> }
+        { isBuilderVisible && <RoomThumbnailWidgetBuilderView onCloseClick={ () => setIsBuilderVisible(false) } /> }
+        { isCameraVisible && <RoomThumbnailWidgetCameraView onCloseClick={ () => setIsCameraVisible(false) } /> }
+    </>);
+};

src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.props.ts

@@ -0,0 +1,4 @@
+export class RoomThumbnailWidgetBuilderViewProps
+{
+    onCloseClick: () => void;
+}

src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.scss

@@ -0,0 +1,3 @@
+.nitro-room-thumbnail-builder {
+    width: 600px;
+}

src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.tsx

@@ -0,0 +1,63 @@
+import { FC, useCallback, useState } from 'react';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../../layout';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { RoomThumbnailWidgetBuilderViewProps } from './RoomThumbnailWidgetBuilderView.props';
+
+const TABS: string[] = [
+    'navigator.thumbeditor.bgtab',
+    'navigator.thumbeditor.objtab',
+    'navigator.thumbeditor.toptab',
+];
+
+export const RoomThumbnailWidgetBuilderView: FC<RoomThumbnailWidgetBuilderViewProps> = props =>
+{
+    const { onCloseClick = null } = props;
+
+    const [ currentTab, setCurrentTab ] = useState(TABS[0]);
+    
+    const processAction = useCallback((action: string, value?: string) =>
+    {
+        switch(action)
+        {
+            case 'change_tab':
+                setCurrentTab(value);
+                return;
+        }
+    }, [ setCurrentTab ]);
+    
+    return (
+        <NitroCardView className="nitro-room-thumbnail-builder">
+            <NitroCardHeaderView headerText={ LocalizeText('navigator.thumbeditor.caption') } onCloseClick={ onCloseClick } />
+            <div className="d-flex">
+                <div className="w-100">
+                    <NitroCardTabsView>
+                        { TABS.map(tab =>
+                            {
+                                return <NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ event => processAction('change_tab', tab) }>
+                                    { LocalizeText(tab) }
+                                </NitroCardTabsItemView>
+                            }) }
+                    </NitroCardTabsView>
+                    <NitroCardContentView>
+                        <div className="d-flex h-100 overflow-auto effects px-2">
+                            <div className="row row-cols-3">
+                                
+                            </div>
+                        </div>
+                    </NitroCardContentView>
+                </div>
+                <div>
+                    <NitroCardTabsView></NitroCardTabsView>
+                    <NitroCardContentView>
+                        <div className="d-flex justify-content-between mt-2">
+                            <div className="d-flex justify-content-end">
+                                <button className="btn btn-primary me-2" onClick={ event => processAction('cancel') }>{ LocalizeText('generic.cancel') }</button>
+                                <button className="btn btn-success" onClick={ event => processAction('checkout') }>{ LocalizeText('camera.preview.button.text') }</button>
+                            </div>
+                        </div>
+                    </NitroCardContentView>
+                </div>
+            </div>
+        </NitroCardView>
+    );
+};

src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.scss

@@ -0,0 +1,13 @@
+.nitro-room-thumbnail-camera {
+    width: 132px;
+    height: 192px;
+    background-image: url('../../../../../../assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
+
+    .camera-frame {
+        position: absolute;
+        width: 110px;
+        height: 110px;
+        margin-top: 38px;
+        margin-left: 3px;
+    }
+}

src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.tsx

@@ -0,0 +1,39 @@
+import { NitroRectangle } from 'nitro-renderer';
+import { FC, useCallback, useRef } from 'react';
+import { GetRoomEngine, GetRoomSession } from '../../../../../../api';
+import { DraggableWindow } from '../../../../../../layout';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { RoomThumbnailWidgetCameraViewProps } from './RoomThumbnailWidgetCameraView.types';
+
+export const RoomThumbnailWidgetCameraView: FC<RoomThumbnailWidgetCameraViewProps> = props =>
+{
+    const { onCloseClick = null } = props;
+
+    const cameraFrameRef = useRef<HTMLDivElement>();
+
+    const takePicture = useCallback(() =>
+    {
+        const frameBounds = cameraFrameRef.current.getBoundingClientRect();
+
+        if(!frameBounds) return;
+
+        const rectangle = new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height));
+
+        const image = GetRoomEngine().createRoomScreenshot(GetRoomSession().roomId, 1, rectangle);
+
+        //SendMessageHook(new RoomWidgetCameraRoomThumbnailComposer(0, []));
+        onCloseClick();
+    }, [ onCloseClick ]);
+    
+    return (
+        <DraggableWindow handle=".nitro-room-thumbnail-camera">
+            <div className="nitro-room-thumbnail-camera px-2">
+            <div ref={ cameraFrameRef } className={ 'camera-frame' }></div>
+                <div className="d-flex align-items-end h-100 pb-2">
+                    <button className="btn btn-sm btn-danger w-100 mb-1 me-2" onClick={ onCloseClick }>{ LocalizeText('cancel') }</button>
+                    <button className="btn btn-sm btn-success w-100 mb-1" onClick={ () => takePicture() }>{ LocalizeText('navigator.thumbeditor.save') }</button>
+                </div>
+            </div>
+        </DraggableWindow>
+    );
+};

src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.types.ts

@@ -0,0 +1,4 @@
+export class RoomThumbnailWidgetCameraViewProps
+{
+    onCloseClick: () => void;
+}