Room Tools

src/views/room/RoomView.tsx

@@ -1,4 +1,4 @@
-import { EventDispatcher, Nitro, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomVariableEnum, Vector3d } from 'nitro-renderer';
+import { EventDispatcher, Nitro, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomVariableEnum, RoomZoomEvent, Vector3d } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { CanManipulateFurniture, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation } from '../../api';
@@ -10,6 +10,7 @@ import { useRoomEngineEvent } from '../../hooks/events';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from './events';
 import { IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler } from './handlers';
+import { RoomWidgetRoomToolsHandler } from './handlers/RoomWidgetRoomToolsHandler';
 import { RoomViewProps } from './RoomView.types';
 import { RoomWidgetsView } from './widgets/RoomWidgetsView';
 
@@ -35,6 +36,7 @@ export const RoomView: FC<RoomViewProps> = props =>
 
         widgetHandlerManager.registerHandler(new RoomWidgetAvatarInfoHandler());
         widgetHandlerManager.registerHandler(new RoomWidgetInfostandHandler());
+        widgetHandlerManager.registerHandler(new RoomWidgetRoomToolsHandler());
 
         setWidgetHandler(widgetHandlerManager);
 
@@ -96,7 +98,7 @@ export const RoomView: FC<RoomViewProps> = props =>
     const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
     {
         if(!widgetHandler || RoomId.isRoomPreviewerId(event.roomId)) return;
-
+        
         switch(event.type)
         {
             case RoomEngineEvent.NORMAL_MODE:
@@ -105,11 +107,23 @@ export const RoomView: FC<RoomViewProps> = props =>
             case RoomEngineEvent.GAME_MODE:
                 widgetHandler.eventDispatcher.dispatchEvent(new RoomWidgetRoomEngineUpdateEvent(RoomWidgetRoomEngineUpdateEvent.GAME_MODE, event.roomId));
                 return;
+            case RoomZoomEvent.ROOM_ZOOM:
+                const zoomEvent = (event as RoomZoomEvent);
+
+                let zoomLevel = ((zoomEvent.level < 1) ? 0.5 : (1 << (Math.floor(zoomEvent.level) - 1)));
+
+                if(zoomEvent.forceFlip || zoomEvent.asDelta) zoomLevel = zoomEvent.level;
+
+                const canvasId = 1;
+
+                GetRoomEngine().setRoomInstanceRenderingCanvasScale(GetRoomEngine().activeRoomId, canvasId, zoomLevel, null, null, false, zoomEvent.asDelta);
+                return;
         }
     }, [ widgetHandler ]);
 
     useRoomEngineEvent(RoomEngineEvent.NORMAL_MODE, onRoomEngineEvent);
     useRoomEngineEvent(RoomEngineEvent.GAME_MODE, onRoomEngineEvent);
+    useRoomEngineEvent(RoomZoomEvent.ROOM_ZOOM, onRoomEngineEvent);
 
     const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
     {

src/views/room/handlers/RoomWidgetRoomToolsHandler.ts

@@ -0,0 +1,33 @@
+import { NitroEvent, RoomZoomEvent } from 'nitro-renderer';
+import { GetRoomEngine } from '../../../api';
+import { RoomWidgetUpdateEvent } from '../events';
+import { RoomWidgetMessage, RoomWidgetZoomToggleMessage } from '../messages';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class RoomWidgetRoomToolsHandler extends RoomWidgetHandler
+{
+    public processEvent(event: NitroEvent): void
+    {}
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        if(message instanceof RoomWidgetZoomToggleMessage)
+        {
+            GetRoomEngine().events.dispatchEvent(new RoomZoomEvent(GetRoomEngine().activeRoomId, message.zoomedIn ? 0 : 1, false));
+        }
+
+        return null;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [
+            RoomWidgetZoomToggleMessage.ZOOM_TOGGLE
+        ];
+    }
+}

src/views/room/messages/RoomWidgetZoomToggleMessage.ts

@@ -0,0 +1,18 @@
+import { RoomWidgetMessage } from '.';
+
+export class RoomWidgetZoomToggleMessage extends RoomWidgetMessage
+{
+    public static ZOOM_TOGGLE: string = 'RWZTM_ZOOM_TOGGLE';
+    private _zoomedIn: boolean;
+
+    constructor(zoomedIn: boolean)
+    {
+        super(RoomWidgetZoomToggleMessage.ZOOM_TOGGLE);
+        this._zoomedIn = zoomedIn;
+    }
+    
+    public get zoomedIn(): boolean
+    {
+        return this._zoomedIn;
+    }
+}

src/views/room/messages/index.ts

@@ -6,3 +6,4 @@ export * from './RoomWidgetFurniActionMessage';
 export * from './RoomWidgetMessage';
 export * from './RoomWidgetRoomObjectMessage';
 export * from './RoomWidgetUserActionMessage';
+export * from './RoomWidgetZoomToggleMessage';

src/views/room/widgets/RoomWidgets.scss

@@ -5,3 +5,4 @@
 @import './furniture/FurnitureWidgets';
 @import './infostand/InfoStandWidgetView';
 @import './object-location/ObjectLocationView';
+@import './room-tools/RoomToolsWidgetView';

src/views/room/widgets/RoomWidgetsView.tsx

@@ -9,6 +9,7 @@ import { ChatInputView } from './chat-input/ChatInputView';
 import { ChatWidgetView } from './chat/ChatWidgetView';
 import { FurnitureWidgetsView } from './furniture/FurnitureWidgetsView';
 import { InfoStandWidgetView } from './infostand/InfoStandWidgetView';
+import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView';
 import { RoomWidgetViewProps } from './RoomWidgets.types';
 
 export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
@@ -108,6 +109,7 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
             <ChatInputView />
             <FurnitureWidgetsView />
             <InfoStandWidgetView />
+            <RoomToolsWidgetView />
         </>
     );
 }

src/views/room/widgets/room-tools/RoomToolsWidgetView.scss

@@ -0,0 +1,15 @@
+.nitro-room-tools {
+    position: fixed;
+    bottom: 125px;
+    left: -133px;
+    background: rgba(20, 20, 20, .95);
+    border: 1px solid #101010;
+    box-shadow: inset 0px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1);
+    border-top-right-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
+    transition: all .2s ease;
+    
+    &.open {
+        left: 0px;
+    }
+}

src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../../utils/LocalizeText';
+import { useRoomContext } from '../../context/RoomContext';
+import { RoomWidgetZoomToggleMessage } from '../../messages';
+import { RoomToolsWidgetViewProps } from './RoomToolsWidgetView.types';
+
+export const RoomToolsWidgetView: FC<RoomToolsWidgetViewProps> = props =>
+{
+    const { widgetHandler = null } = useRoomContext();
+
+    const [ isExpended, setIsExpanded ] = useState(false);
+    const [ isZoomedIn, setIsZoomedIn ] = useState(false);
+
+    const handleToolClick = useCallback((action: string) =>
+    {
+        switch(action)
+        {
+            case 'settings':
+                return;
+            case 'zoom':
+                widgetHandler.processWidgetMessage(new RoomWidgetZoomToggleMessage(!isZoomedIn));
+                setIsZoomedIn(value => !value);
+                return;
+            case 'chat_history':
+                return;
+            case 'like_room':
+                return;
+            case 'room_link':
+                return;
+        }
+    }, [ isZoomedIn, widgetHandler ]);
+    
+    return (
+        <div className={'nitro-room-tools py-2 ps-3 d-flex' + classNames({' open': isExpended})}>
+            <div className="w-100 me-1">
+                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('settings') }>
+                    <i className="fas fa-cog me-2" />{ LocalizeText('room.settings.button.text') }
+                </div>
+                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('zoom') }>
+                    <i className={ 'fas me-2 ' +classNames({'fa-search-minus': !isZoomedIn, 'fa-search-plus': isZoomedIn}) } />{ LocalizeText('room.zoom.button.text') }
+                </div>
+                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('chat_history') }>
+                    <i className="fas fa-comment-alt me-2" />{ LocalizeText('room.chathistory.button.text') }
+                </div>
+                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('like_room') }>
+                    <i className="fas fa-heart me-2" />{ LocalizeText('room.like.button.text') }
+                </div>
+                <div className="text-decoration-underline cursor-pointer" onClick={ () => handleToolClick('room_link') }>
+                    <i className="fas fa-link me-2" />{ LocalizeText('navigator.embed.caption') }
+                </div>
+            </div>
+            <div className="cursor-pointer d-flex align-items-center px-2" onClick={() => setIsExpanded(value => !value)}>
+                <i className={ 'fas ' + classNames({'fa-chevron-left': isExpended, 'fa-chevron-right': !isExpended}) } />
+            </div>
+        </div>
+    );
+};

src/views/room/widgets/room-tools/RoomToolsWidgetView.types.ts

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