diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index f0afb252..5f1cdf3b 100644 --- a/src/views/room/RoomView.tsx +++ b/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 = props => widgetHandlerManager.registerHandler(new RoomWidgetAvatarInfoHandler()); widgetHandlerManager.registerHandler(new RoomWidgetInfostandHandler()); + widgetHandlerManager.registerHandler(new RoomWidgetRoomToolsHandler()); setWidgetHandler(widgetHandlerManager); @@ -96,7 +98,7 @@ export const RoomView: FC = 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 = 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) => { diff --git a/src/views/room/handlers/RoomWidgetRoomToolsHandler.ts b/src/views/room/handlers/RoomWidgetRoomToolsHandler.ts new file mode 100644 index 00000000..9f5d8ccc --- /dev/null +++ b/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 + ]; + } +} diff --git a/src/views/room/messages/RoomWidgetZoomToggleMessage.ts b/src/views/room/messages/RoomWidgetZoomToggleMessage.ts new file mode 100644 index 00000000..dae47e5b --- /dev/null +++ b/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; + } +} diff --git a/src/views/room/messages/index.ts b/src/views/room/messages/index.ts index 320b77c2..c256d9d4 100644 --- a/src/views/room/messages/index.ts +++ b/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'; diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss index 982c8ade..6f4cfbb9 100644 --- a/src/views/room/widgets/RoomWidgets.scss +++ b/src/views/room/widgets/RoomWidgets.scss @@ -5,3 +5,4 @@ @import './furniture/FurnitureWidgets'; @import './infostand/InfoStandWidgetView'; @import './object-location/ObjectLocationView'; +@import './room-tools/RoomToolsWidgetView'; diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx index e0cd7f19..c95aaaa1 100644 --- a/src/views/room/widgets/RoomWidgetsView.tsx +++ b/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 = props => @@ -108,6 +109,7 @@ export const RoomWidgetsView: FC = props => + ); } diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss new file mode 100644 index 00000000..1f15d7c7 --- /dev/null +++ b/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; + } +} diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx new file mode 100644 index 00000000..b3c32b35 --- /dev/null +++ b/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 = 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 ( +
+
+
handleToolClick('settings') }> + { LocalizeText('room.settings.button.text') } +
+
handleToolClick('zoom') }> + { LocalizeText('room.zoom.button.text') } +
+
handleToolClick('chat_history') }> + { LocalizeText('room.chathistory.button.text') } +
+
handleToolClick('like_room') }> + { LocalizeText('room.like.button.text') } +
+
handleToolClick('room_link') }> + { LocalizeText('navigator.embed.caption') } +
+
+
setIsExpanded(value => !value)}> + +
+
+ ); +}; diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.types.ts b/src/views/room/widgets/room-tools/RoomToolsWidgetView.types.ts new file mode 100644 index 00000000..f539ea58 --- /dev/null +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.types.ts @@ -0,0 +1,4 @@ +import { RoomWidgetProps } from '../RoomWidgets.types'; + +export class RoomToolsWidgetViewProps implements RoomWidgetProps +{}