diff --git a/src/api/nitro/room/DispatchMouseEvent.ts b/src/api/nitro/room/DispatchMouseEvent.ts index 6a0ebba2..7376c7ea 100644 --- a/src/api/nitro/room/DispatchMouseEvent.ts +++ b/src/api/nitro/room/DispatchMouseEvent.ts @@ -1,12 +1,11 @@ import { MouseEventType } from '@nitrots/nitro-renderer'; import { GetRoomEngine } from './GetRoomEngine'; -import { SetActiveRoomId } from './SetActiveRoomId'; let didMouseMove = false; let lastClick = 0; let clickCount = 0; -export function DispatchMouseEvent(roomId: number, canvasId: number, event: MouseEvent) +export const DispatchMouseEvent = (event: MouseEvent, canvasId: number = 1) => { const x = (event.clientX * window.devicePixelRatio); const y = (event.clientY * window.devicePixelRatio); @@ -51,7 +50,6 @@ export function DispatchMouseEvent(roomId: number, canvasId: number, event: Mous break; default: return; } - - SetActiveRoomId(roomId); + GetRoomEngine().dispatchMouseEvent(canvasId, x, y, eventType, event.altKey, (event.ctrlKey || event.metaKey), event.shiftKey, false); } diff --git a/src/api/nitro/room/DispatchTouchEvent.ts b/src/api/nitro/room/DispatchTouchEvent.ts index a04d515c..669fa089 100644 --- a/src/api/nitro/room/DispatchTouchEvent.ts +++ b/src/api/nitro/room/DispatchTouchEvent.ts @@ -6,7 +6,7 @@ let lastClick = 0; let clickCount = 0; let touchTimer: ReturnType = null; -export function DispatchTouchEvent(roomId: number, canvasId: number, event: TouchEvent, longTouch: boolean = false, altKey: boolean = false, ctrlKey: boolean = false, shiftKey: boolean = false) +export const DispatchTouchEvent = (event: TouchEvent, canvasId: number = 1, longTouch: boolean = false, altKey: boolean = false, ctrlKey: boolean = false, shiftKey: boolean = false) => { let eventType = event.type; @@ -51,8 +51,6 @@ export function DispatchTouchEvent(roomId: number, canvasId: number, event: Touc y = event.changedTouches[0].clientY; } - GetRoomEngine().setActiveRoomId(roomId); - switch(eventType) { case MouseEventType.MOUSE_CLICK: @@ -64,7 +62,7 @@ export function DispatchTouchEvent(roomId: number, canvasId: number, event: Touc { if(didMouseMove) return; - DispatchTouchEvent(roomId, canvasId, event, true); + DispatchTouchEvent(event, canvasId, true); }, 300); eventType = MouseEventType.MOUSE_DOWN; diff --git a/src/api/nitro/room/GetRoomObjectBounds.ts b/src/api/nitro/room/GetRoomObjectBounds.ts index ef1c7488..66bac87f 100644 --- a/src/api/nitro/room/GetRoomObjectBounds.ts +++ b/src/api/nitro/room/GetRoomObjectBounds.ts @@ -8,8 +8,8 @@ export const GetRoomObjectBounds = (roomId: number, objectId: number, category: if(window.devicePixelRatio !== 1) { - rectangle.x /= window.devicePixelRatio; - rectangle.y /= window.devicePixelRatio; + rectangle.x = Math.round(rectangle.x / window.devicePixelRatio); + rectangle.y = Math.round(rectangle.y / window.devicePixelRatio); } return rectangle; diff --git a/src/api/nitro/room/GetRoomObjectScreenLocation.ts b/src/api/nitro/room/GetRoomObjectScreenLocation.ts index 9bd9acbe..2776ed7a 100644 --- a/src/api/nitro/room/GetRoomObjectScreenLocation.ts +++ b/src/api/nitro/room/GetRoomObjectScreenLocation.ts @@ -8,8 +8,8 @@ export const GetRoomObjectScreenLocation = (roomId: number, objectId: number, ca if(window.devicePixelRatio !== 1) { - point.x /= window.devicePixelRatio; - point.y /= window.devicePixelRatio; + point.x = Math.round(point.x / window.devicePixelRatio); + point.y = Math.round(point.y / window.devicePixelRatio); } return point; diff --git a/src/api/nitro/room/InitializeRoomInstanceRenderingCanvas.ts b/src/api/nitro/room/InitializeRoomInstanceRenderingCanvas.ts index 342e4985..d85d739c 100644 --- a/src/api/nitro/room/InitializeRoomInstanceRenderingCanvas.ts +++ b/src/api/nitro/room/InitializeRoomInstanceRenderingCanvas.ts @@ -1,6 +1,9 @@ import { GetRoomEngine } from './GetRoomEngine'; -export function InitializeRoomInstanceRenderingCanvas(roomId: number, canvasId: number, width: number, height: number): void +export const InitializeRoomInstanceRenderingCanvas = (width: number, height: number, canvasId: number = 1) => { - GetRoomEngine().initializeRoomInstanceRenderingCanvas(roomId, canvasId, width, height); + const roomEngine = GetRoomEngine(); + const roomId = roomEngine.activeRoomId; + + roomEngine.initializeRoomInstanceRenderingCanvas(roomId, canvasId, width, height); } diff --git a/src/api/nitro/room/widgets/events/RoomWidgetUpdateRoomViewEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateRoomViewEvent.ts deleted file mode 100644 index fce35aaf..00000000 --- a/src/api/nitro/room/widgets/events/RoomWidgetUpdateRoomViewEvent.ts +++ /dev/null @@ -1,21 +0,0 @@ -import { NitroRectangle } from '@nitrots/nitro-renderer'; -import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent'; - -export class RoomWidgetUpdateRoomViewEvent extends RoomWidgetUpdateEvent -{ - public static SIZE_CHANGED: string = 'RWURVE_SIZE_CHANGED'; - - private _roomViewRectangle: NitroRectangle; - - constructor(type: string, view: NitroRectangle) - { - super(type); - - this._roomViewRectangle = view; - } - - public get roomViewRectangle(): NitroRectangle - { - return this._roomViewRectangle; - } -} diff --git a/src/api/nitro/room/widgets/events/index.ts b/src/api/nitro/room/widgets/events/index.ts index 58abd356..ca4183f4 100644 --- a/src/api/nitro/room/widgets/events/index.ts +++ b/src/api/nitro/room/widgets/events/index.ts @@ -27,7 +27,6 @@ export * from './RoomWidgetUpdatePresentDataEvent'; export * from './RoomWidgetUpdateRentableBotChatEvent'; export * from './RoomWidgetUpdateRoomEngineEvent'; export * from './RoomWidgetUpdateRoomObjectEvent'; -export * from './RoomWidgetUpdateRoomViewEvent'; export * from './RoomWidgetUpdateSongEvent'; export * from './RoomWidgetUpdateTrophyEvent'; export * from './RoomWidgetUpdateUserDataEvent'; diff --git a/src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts b/src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts index 31404de8..a02fc4a0 100644 --- a/src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts +++ b/src/api/nitro/room/widgets/handlers/RoomWidgetChatInputHandler.ts @@ -124,7 +124,7 @@ export class RoomWidgetChatInputHandler extends RoomWidgetHandler return null; case ':zoom': - GetRoomEngine().events.dispatchEvent(new RoomZoomEvent(this.container.roomSession.roomId, parseInt(secondPart), false)); + GetRoomEngine().events.dispatchEvent(new RoomZoomEvent(this.container.roomSession.roomId, parseFloat(secondPart), false)); return null; case ':screenshot': diff --git a/src/api/nitro/room/widgets/handlers/RoomWidgetRoomToolsHandler.ts b/src/api/nitro/room/widgets/handlers/RoomWidgetRoomToolsHandler.ts deleted file mode 100644 index c99518da..00000000 --- a/src/api/nitro/room/widgets/handlers/RoomWidgetRoomToolsHandler.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { NitroEvent, RoomWidgetEnum, RoomZoomEvent } from '@nitrots/nitro-renderer'; -import { GetRoomEngine } from '../../../..'; -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 type(): string - { - return RoomWidgetEnum.ROOM_TOOLS; - } - - public get eventTypes(): string[] - { - return []; - } - - public get messageTypes(): string[] - { - return [ - RoomWidgetZoomToggleMessage.ZOOM_TOGGLE - ]; - } -} diff --git a/src/api/nitro/room/widgets/handlers/index.ts b/src/api/nitro/room/widgets/handlers/index.ts index d0fed191..67260528 100644 --- a/src/api/nitro/room/widgets/handlers/index.ts +++ b/src/api/nitro/room/widgets/handlers/index.ts @@ -19,6 +19,5 @@ export * from './RoomWidgetChatInputHandler'; export * from './RoomWidgetHandler'; export * from './RoomWidgetHandlerManager'; export * from './RoomWidgetInfostandHandler'; -export * from './RoomWidgetRoomToolsHandler'; export * from './UserChooserWidgetHandler'; export * from './WordQuizWidgetHandler'; diff --git a/src/api/nitro/room/widgets/messages/RoomWidgetZoomToggleMessage.ts b/src/api/nitro/room/widgets/messages/RoomWidgetZoomToggleMessage.ts deleted file mode 100644 index dae47e5b..00000000 --- a/src/api/nitro/room/widgets/messages/RoomWidgetZoomToggleMessage.ts +++ /dev/null @@ -1,18 +0,0 @@ -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/api/nitro/room/widgets/messages/index.ts b/src/api/nitro/room/widgets/messages/index.ts index 75b9cae3..f7a371e6 100644 --- a/src/api/nitro/room/widgets/messages/index.ts +++ b/src/api/nitro/room/widgets/messages/index.ts @@ -18,4 +18,3 @@ export * from './RoomWidgetRequestWidgetMessage'; export * from './RoomWidgetRoomObjectMessage'; export * from './RoomWidgetUseProductMessage'; export * from './RoomWidgetUserActionMessage'; -export * from './RoomWidgetZoomToggleMessage'; diff --git a/src/components/main/MainView.tsx b/src/components/main/MainView.tsx index f7059685..d106e159 100644 --- a/src/components/main/MainView.tsx +++ b/src/components/main/MainView.tsx @@ -21,7 +21,7 @@ import { ModToolsView } from '../mod-tools/ModToolsView'; import { NavigatorView } from '../navigator/NavigatorView'; import { NitropediaView } from '../nitropedia/NitropediaView'; import { RightSideView } from '../right-side/RightSideView'; -import { RoomHostView } from '../room/RoomHostView'; +import { RoomView } from '../room/RoomView'; import { ToolbarView } from '../toolbar/ToolbarView'; import { UserProfileView } from '../user-profile/UserProfileView'; import { UserSettingsView } from '../user-settings/UserSettingsView'; @@ -99,7 +99,7 @@ export const MainView: FC<{}> = props => - + diff --git a/src/components/room/RoomColorView.tsx b/src/components/room/RoomColorView.tsx index 12ecf48a..adc6c349 100644 --- a/src/components/room/RoomColorView.tsx +++ b/src/components/room/RoomColorView.tsx @@ -1,118 +1,49 @@ import { ColorConverter, NitroAdjustmentFilter, NitroContainer, NitroSprite, NitroTexture, RoomBackgroundColorEvent, RoomEngineDimmerStateEvent, RoomEngineEvent, RoomId, RoomObjectHSLColorEnabledEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; -import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomViewEvent } from '../../api'; -import { UseEventDispatcherHook, UseMountEffect, UseRoomEngineEvent } from '../../hooks'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent } from '../../api'; +import { UseEventDispatcherHook, UseRoomEngineEvent } from '../../hooks'; import { useRoomContext } from './RoomContext'; export const RoomColorView: FC<{}> = props => { const [ roomBackground, setRoomBackground ] = useState(null); - const [ roomBackgroundColor, setRoomBackgroundColor ] = useState(0); - const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0); const [ roomFilter, setRoomFilter ] = useState(null); - const { roomSession = null, canvasId = -1, widgetHandler = null, eventDispatcher = null } = useRoomContext(); - - const getRenderingCanvas = useCallback(() => - { - return GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId, canvasId); - }, [ roomSession, canvasId ]); - - const getRoomBackground = useCallback(() => - { - if(roomBackground) return roomBackground; - - const canvas = getRenderingCanvas(); - - if(!canvas) return null; - - const displayObject = (canvas.master as NitroContainer); - const background = new NitroSprite(NitroTexture.WHITE); - - displayObject.addChildAt(background, 0); - - setRoomBackground(background); - - return background; - }, [ roomBackground, getRenderingCanvas ]); - - const updateRoomBackground = useCallback((color: number) => - { - const background = getRoomBackground(); - - if(!background) return; - - if(color === undefined) color = 0x000000; - - background.tint = color; - background.width = GetNitroInstance().width; - background.height = GetNitroInstance().height; - }, [ getRoomBackground ]); + const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0); + const { roomSession = null, widgetHandler = null, eventDispatcher = null } = useRoomContext(); const updateRoomBackgroundColor = useCallback((hue: number, saturation: number, lightness: number, original: boolean = false) => { + if(!roomBackground) return; + const newColor = ColorConverter.hslToRGB(((((hue & 0xFF) << 16) + ((saturation & 0xFF) << 8)) + (lightness & 0xFF))); - setRoomBackgroundColor(newColor); if(original) setOriginalRoomBackgroundColor(newColor); - const background = getRoomBackground(); - - if(!background) return; - if(!hue && !saturation && !lightness) { - background.visible = false; + roomBackground.visible = false; } else { - updateRoomBackground(newColor); - - background.visible = true; + roomBackground.tint = newColor; + roomBackground.width = GetNitroInstance().width; + roomBackground.height = GetNitroInstance().height; + roomBackground.visible = true; } - }, [ getRoomBackground, updateRoomBackground ]); - - const getRoomFilter = useCallback(() => - { - if(roomFilter) return roomFilter; - - const canvas = getRenderingCanvas(); - - if(!canvas) return null; - - const display = canvas.master; - - if(!display) return null; - - const filter = new NitroAdjustmentFilter(); - - setRoomFilter(filter); - - display.filters = [ filter ]; - - return filter; - }, [ roomFilter, getRenderingCanvas ]); + }, [ roomBackground ]); const updateRoomFilter = useCallback((color: number) => { - const colorMatrix = getRoomFilter(); - - if(!colorMatrix) return; + if(!roomFilter) return; const r = ((color >> 16) & 0xFF); const g = ((color >> 8) & 0xFF); const b = (color & 0xFF); - colorMatrix.red = (r / 255); - colorMatrix.green = (g / 255); - colorMatrix.blue = (b / 255); - }, [ getRoomFilter ]); - - const updateRoomFilterColor = useCallback((color: number, brightness: number) => - { - const newColor = ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness)); - - updateRoomFilter(newColor); - }, [ updateRoomFilter ]); + roomFilter.red = (r / 255); + roomFilter.green = (g / 255); + roomFilter.blue = (b / 255); + }, [ roomFilter ]); const onRoomEngineEvent = useCallback((event: RoomEngineEvent) => { @@ -131,8 +62,16 @@ export const RoomColorView: FC<{}> = props => case RoomBackgroundColorEvent.ROOM_COLOR: { const colorEvent = (event as RoomBackgroundColorEvent); - if(colorEvent.bgOnly) updateRoomFilterColor(0x000000, 0xFF); - else updateRoomFilterColor(colorEvent.color, colorEvent.brightness); + let color = 0x000000; + let brightness = 0xFF; + + if(!colorEvent.bgOnly) + { + color = colorEvent.color; + brightness = colorEvent.brightness; + } + + updateRoomFilter(ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness))); return; } @@ -140,19 +79,12 @@ export const RoomColorView: FC<{}> = props => widgetHandler.processEvent(event); } } - }, [ widgetHandler, updateRoomBackgroundColor, updateRoomFilterColor ]); + }, [ widgetHandler, updateRoomBackgroundColor, updateRoomFilter ]); UseRoomEngineEvent(RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR, onRoomEngineEvent); UseRoomEngineEvent(RoomBackgroundColorEvent.ROOM_COLOR, onRoomEngineEvent); UseRoomEngineEvent(RoomEngineDimmerStateEvent.ROOM_COLOR, onRoomEngineEvent); - const onRoomWidgetUpdateRoomViewEvent = useCallback((event: RoomWidgetUpdateRoomViewEvent) => - { - updateRoomBackground(roomBackgroundColor); - }, [ roomBackgroundColor, updateRoomBackground ]); - - UseEventDispatcherHook(RoomWidgetUpdateRoomViewEvent.SIZE_CHANGED, eventDispatcher, onRoomWidgetUpdateRoomViewEvent); - const onRoomWidgetUpdateBackgroundColorPreviewEvent = useCallback((event: RoomWidgetUpdateBackgroundColorPreviewEvent) => { switch(event.type) @@ -162,19 +94,60 @@ export const RoomColorView: FC<{}> = props => return; } case RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW: { - const color = originalRoomBackgroundColor; + if(!roomBackground) return; - setRoomBackgroundColor(color); - updateRoomBackground(color); + roomBackground.tint = originalRoomBackgroundColor; + roomBackground.width = GetNitroInstance().width; + roomBackground.height = GetNitroInstance().height; + roomBackground.visible = true; + return; } } - }, [ originalRoomBackgroundColor, updateRoomBackgroundColor, updateRoomBackground ]); + }, [ roomBackground, originalRoomBackgroundColor, updateRoomBackgroundColor ]); UseEventDispatcherHook(RoomWidgetUpdateBackgroundColorPreviewEvent.PREVIEW, eventDispatcher, onRoomWidgetUpdateBackgroundColorPreviewEvent); UseEventDispatcherHook(RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW, eventDispatcher, onRoomWidgetUpdateBackgroundColorPreviewEvent); - UseMountEffect(updateRoomBackground); + useEffect(() => + { + if(!roomSession) return; + + const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomSession.roomId); + + if(!canvas) return; + + const background = new NitroSprite(NitroTexture.WHITE); + const filter = new NitroAdjustmentFilter(); + const master = (canvas.master as NitroContainer); + + background.visible = false; + + master.addChildAt(background, 0); + master.filters = [ filter ]; + + setRoomBackground(background); + setRoomFilter(filter); + + return () => + { + setRoomBackground(prevValue => + { + if(prevValue) prevValue.destroy(); + + return null; + }); + + setRoomFilter(prevValue => + { + if(prevValue) prevValue.destroy(); + + return null; + }); + + setOriginalRoomBackgroundColor(0); + } + }, [ roomSession ]); return null; } diff --git a/src/components/room/RoomContext.tsx b/src/components/room/RoomContext.tsx index d26cbf1d..26f4dff8 100644 --- a/src/components/room/RoomContext.tsx +++ b/src/components/room/RoomContext.tsx @@ -5,14 +5,12 @@ import { IRoomWidgetHandlerManager } from '../../api'; interface IRoomContext { roomSession: IRoomSession; - canvasId: number; eventDispatcher: IEventDispatcher; widgetHandler: IRoomWidgetHandlerManager; } const RoomContext = createContext({ roomSession: null, - canvasId: -1, eventDispatcher: null, widgetHandler: null }); diff --git a/src/components/room/RoomHostView.tsx b/src/components/room/RoomHostView.tsx deleted file mode 100644 index 42979d29..00000000 --- a/src/components/room/RoomHostView.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { IRoomSession, RoomEngineEvent, RoomId, RoomSessionEvent } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; -import { GetRoomSession, SetActiveRoomId, StartRoomSession } from '../../api'; -import { Base, TransitionAnimation, TransitionAnimationTypes } from '../../common'; -import { UseRoomEngineEvent, UseRoomSessionManagerEvent } from '../../hooks'; -import { RoomView } from './RoomView'; - -export const RoomHostView: FC<{}> = props => -{ - const [ roomSession, setRoomSession ] = useState(null); - - const onRoomEngineEvent = useCallback((event: RoomEngineEvent) => - { - if(RoomId.isRoomPreviewerId(event.roomId)) return; - - const session = GetRoomSession(); - - if(!session) return; - - switch(event.type) - { - case RoomEngineEvent.INITIALIZED: - SetActiveRoomId(event.roomId); - setRoomSession(session); - return; - case RoomEngineEvent.DISPOSED: - setRoomSession(null); - return; - } - }, []); - - UseRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent); - UseRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent); - - const onRoomSessionEvent = useCallback((event: RoomSessionEvent) => - { - switch(event.type) - { - case RoomSessionEvent.CREATED: - StartRoomSession(event.session); - return; - case RoomSessionEvent.ENDED: - setRoomSession(null); - return; - } - }, []); - - UseRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent); - UseRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent); - - return ( - - - - - - ); -} diff --git a/src/components/room/RoomView.scss b/src/components/room/RoomView.scss index b356e1af..7cd8fbe4 100644 --- a/src/components/room/RoomView.scss +++ b/src/components/room/RoomView.scss @@ -1 +1 @@ -@import './widgets/RoomWidgets'; +@import "./widgets/RoomWidgets"; diff --git a/src/components/room/RoomView.tsx b/src/components/room/RoomView.tsx index 2da0cc8b..77255369 100644 --- a/src/components/room/RoomView.tsx +++ b/src/components/room/RoomView.tsx @@ -1,30 +1,61 @@ -import { EventDispatcher, IRoomSession, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer'; -import { FC, useEffect, useRef, useState } from 'react'; -import { DispatchMouseEvent, DispatchTouchEvent, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureInternalLinkHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, FurnitureRoomLinkHandler, FurnitureYoutubeDisplayWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, PollWidgetHandler, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler, WordQuizWidgetHandler } from '../../api'; +import { EventDispatcher, IRoomSession, RoomEngineEvent, RoomGeometry, RoomId, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { DispatchMouseEvent, DispatchTouchEvent, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurnitureInternalLinkHandler, FurnitureMannequinWidgetHandler, FurniturePresentWidgetHandler, FurnitureRoomLinkHandler, FurnitureYoutubeDisplayWidgetHandler, GetNitroInstance, GetRoomEngine, GetRoomSession, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, PollWidgetHandler, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, SetActiveRoomId, StartRoomSession, UserChooserWidgetHandler, WordQuizWidgetHandler } from '../../api'; import { Base } from '../../common'; +import { UseRoomEngineEvent, UseRoomSessionManagerEvent } from '../../hooks'; import { RoomColorView } from './RoomColorView'; import { RoomContextProvider } from './RoomContext'; import { RoomWidgetsView } from './widgets/RoomWidgetsView'; -interface RoomViewProps +export const RoomView: FC<{}> = props => { - roomSession: IRoomSession; -} - -export const RoomView: FC = props => -{ - const { roomSession = null } = props; - const [ canvasId, setCanvasId ] = useState(-1); + const [ roomSession, setRoomSession ] = useState(null); const [ widgetHandler, setWidgetHandler ] = useState(null); const elementRef = useRef(); + const onRoomEngineEvent = useCallback((event: RoomEngineEvent) => + { + if(RoomId.isRoomPreviewerId(event.roomId)) return; + + const session = GetRoomSession(); + + if(!session) return; + + switch(event.type) + { + case RoomEngineEvent.INITIALIZED: + SetActiveRoomId(event.roomId); + setRoomSession(session); + return; + case RoomEngineEvent.DISPOSED: + setRoomSession(null); + return; + } + }, []); + + UseRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent); + UseRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent); + + const onRoomSessionEvent = useCallback((event: RoomSessionEvent) => + { + switch(event.type) + { + case RoomSessionEvent.CREATED: + StartRoomSession(event.session); + return; + case RoomSessionEvent.ENDED: + setRoomSession(null); + return; + } + }, []); + + UseRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent); + UseRoomSessionManagerEvent(RoomSessionEvent.ENDED, onRoomSessionEvent); + useEffect(() => { if(!roomSession) { - window.onresize = null; - - setCanvasId(-1); setWidgetHandler(null); return; @@ -34,7 +65,6 @@ export const RoomView: FC = props => widgetHandlerManager.registerHandler(new RoomWidgetAvatarInfoHandler()); widgetHandlerManager.registerHandler(new RoomWidgetInfostandHandler()); - widgetHandlerManager.registerHandler(new RoomWidgetRoomToolsHandler()); widgetHandlerManager.registerHandler(new RoomWidgetChatInputHandler()); widgetHandlerManager.registerHandler(new RoomWidgetChatHandler()); widgetHandlerManager.registerHandler(new UserChooserWidgetHandler()); @@ -55,22 +85,23 @@ export const RoomView: FC = props => setWidgetHandler(widgetHandlerManager); - GetNitroInstance().renderer.resize((window.innerWidth * window.devicePixelRatio), (window.innerHeight * window.devicePixelRatio)); - + const roomEngine = GetRoomEngine(); + const roomId = roomSession.roomId; const canvasId = 1; + const displayObject = roomEngine.getRoomInstanceDisplay(roomId, canvasId, GetNitroInstance().width, GetNitroInstance().height, RoomGeometry.SCALE_ZOOMED_IN); - const displayObject = GetRoomEngine().getRoomInstanceDisplay(roomSession.roomId, canvasId, GetNitroInstance().width, GetNitroInstance().height, RoomGeometry.SCALE_ZOOMED_IN); + if((window.devicePixelRatio !== 1) && ((window.devicePixelRatio % 1) === 0)) roomEngine.setRoomInstanceRenderingCanvasScale(roomId, canvasId, window.devicePixelRatio); if(!displayObject) return; - const geometry = (GetRoomEngine().getRoomInstanceGeometry(roomSession.roomId, canvasId) as RoomGeometry); + const geometry = (roomEngine.getRoomInstanceGeometry(roomId, canvasId) as RoomGeometry); if(geometry) { - const minX = (GetRoomEngine().getRoomInstanceVariable(roomSession.roomId, RoomVariableEnum.ROOM_MIN_X) || 0); - const maxX = (GetRoomEngine().getRoomInstanceVariable(roomSession.roomId, RoomVariableEnum.ROOM_MAX_X) || 0); - const minY = (GetRoomEngine().getRoomInstanceVariable(roomSession.roomId, RoomVariableEnum.ROOM_MIN_Y) || 0); - const maxY = (GetRoomEngine().getRoomInstanceVariable(roomSession.roomId, RoomVariableEnum.ROOM_MAX_Y) || 0); + const minX = (roomEngine.getRoomInstanceVariable(roomId, RoomVariableEnum.ROOM_MIN_X) || 0); + const maxX = (roomEngine.getRoomInstanceVariable(roomId, RoomVariableEnum.ROOM_MAX_X) || 0); + const minY = (roomEngine.getRoomInstanceVariable(roomId, RoomVariableEnum.ROOM_MIN_Y) || 0); + const maxY = (roomEngine.getRoomInstanceVariable(roomId, RoomVariableEnum.ROOM_MAX_Y) || 0); let x = ((minX + maxX) / 2); let y = ((minY + maxY) / 2); @@ -91,57 +122,71 @@ export const RoomView: FC = props => stage.addChild(displayObject); + SetActiveRoomId(roomSession.roomId); + }, [ roomSession ]); + + useEffect(() => + { const canvas = GetNitroInstance().renderer.view; if(!canvas) return; + canvas.onclick = event => DispatchMouseEvent(event); + canvas.onmousemove = event => DispatchMouseEvent(event); + canvas.onmousedown = event => DispatchMouseEvent(event); + canvas.onmouseup = event => DispatchMouseEvent(event); + + canvas.ontouchstart = event => DispatchTouchEvent(event); + canvas.ontouchmove = event => DispatchTouchEvent(event); + canvas.ontouchend = event => DispatchTouchEvent(event); + canvas.ontouchcancel = event => DispatchTouchEvent(event); + if(window.devicePixelRatio !== 1) { let scaleValue = (1 / window.devicePixelRatio); canvas.style.transform = `scale(${ scaleValue })`; canvas.style.transformOrigin = 'top left'; + canvas.style.width = `${ (100 * window.devicePixelRatio) }%`; + canvas.style.height = `${ (100 * window.devicePixelRatio) }%`; } - canvas.onclick = event => DispatchMouseEvent(roomSession.roomId, canvasId, event); - canvas.onmousemove = event => DispatchMouseEvent(roomSession.roomId, canvasId, event); - canvas.onmousedown = event => DispatchMouseEvent(roomSession.roomId, canvasId, event); - canvas.onmouseup = event => DispatchMouseEvent(roomSession.roomId, canvasId, event); - - canvas.ontouchstart = event => DispatchTouchEvent(roomSession.roomId, canvasId, event); - canvas.ontouchmove = event => DispatchTouchEvent(roomSession.roomId, canvasId, event); - canvas.ontouchend = event => DispatchTouchEvent(roomSession.roomId, canvasId, event); - canvas.ontouchcancel = event => DispatchTouchEvent(roomSession.roomId, canvasId, event); - window.onresize = () => { - GetNitroInstance().renderer.resize((window.innerWidth * window.devicePixelRatio), (window.innerHeight * window.devicePixelRatio)); + const nitroInstance = GetNitroInstance(); + const width = (window.innerWidth * window.devicePixelRatio); + const height = (window.innerHeight * window.devicePixelRatio); + + nitroInstance.renderer.resize(width, height); - InitializeRoomInstanceRenderingCanvas(roomSession.roomId, canvasId, GetNitroInstance().width, GetNitroInstance().height); + InitializeRoomInstanceRenderingCanvas(width, height, 1); - const bounds = canvas.getBoundingClientRect(); - const rectangle = new NitroRectangle((bounds.x || 0), (bounds.y || 0), (bounds.width || 0), (bounds.height || 0)); - - widgetHandlerManager.eventDispatcher.dispatchEvent(new RoomWidgetUpdateRoomViewEvent(RoomWidgetUpdateRoomViewEvent.SIZE_CHANGED, rectangle)); - - GetNitroInstance().render(); + nitroInstance.render(); } - if(elementRef && elementRef.current) elementRef.current.replaceChildren(canvas); + const element = elementRef.current; - setCanvasId(canvasId); - }, [ roomSession ]); + if(!element) return; - if(!roomSession) return null; + element.appendChild(canvas); + + return () => + { + element.removeChild(canvas); + window.onresize = null; + } + }, []); return ( - - - { widgetHandler && - <> - - - } + + + + { (roomSession && widgetHandler) && + <> + + + } + ); } diff --git a/src/components/room/widgets/RoomWidgetsView.tsx b/src/components/room/widgets/RoomWidgetsView.tsx index 0fe4097f..2dc51479 100644 --- a/src/components/room/widgets/RoomWidgetsView.tsx +++ b/src/components/room/widgets/RoomWidgetsView.tsx @@ -35,11 +35,7 @@ export const RoomWidgetsView: FC<{}> = props => 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; - - GetRoomEngine().setRoomInstanceRenderingCanvasScale(event.roomId, 1, zoomLevel, null, null, false, zoomEvent.asDelta); + GetRoomEngine().setRoomInstanceRenderingCanvasScale(event.roomId, 1, zoomEvent.level, null, null, false, zoomEvent.asDelta); return; } diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx index e765e948..776529d3 100644 --- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -1,7 +1,7 @@ import { GetGuestRoomResultEvent, RoomLikeRoomComposer } from '@nitrots/nitro-renderer'; import classNames from 'classnames'; import { FC, useCallback, useEffect, useState } from 'react'; -import { CreateLinkEvent, LocalizeText, RoomWidgetZoomToggleMessage, SendMessageComposer } from '../../../../api'; +import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../api'; import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common'; import { UseMessageEventHook, useSharedNavigatorData } from '../../../../hooks'; import { useRoomContext } from '../../RoomContext'; @@ -15,7 +15,7 @@ export const RoomToolsWidgetView: FC<{}> = props => const [ roomInfoDisplay, setRoomInfoDisplay ] = useState(false); const [ isOpen, setIsOpen ] = useState(false); const [ navigatorData, setNavigatorData ] = useSharedNavigatorData(); - const { widgetHandler = null } = useRoomContext(); + const { roomSession = null, widgetHandler = null } = useRoomContext(); const handleToolClick = (action: string) => { @@ -25,8 +25,16 @@ export const RoomToolsWidgetView: FC<{}> = props => CreateLinkEvent('navigator/toggle-room-info'); return; case 'zoom': - widgetHandler.processWidgetMessage(new RoomWidgetZoomToggleMessage(!isZoomedIn)); - setIsZoomedIn(value => !value); + setIsZoomedIn(prevValue => + { + let scale = ((window.devicePixelRatio !== 1) && ((window.devicePixelRatio % 1) === 0)) ? window.devicePixelRatio : 1; + + if(!prevValue) scale /= 2; + + GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale); + + return !prevValue; + }); return; case 'chat_history': CreateLinkEvent('chat-history/toggle');