RoomView changes

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

src/api/nitro/room/DispatchTouchEvent.ts

@@ -6,7 +6,7 @@ let lastClick = 0;
 let clickCount = 0;
 let touchTimer: ReturnType<typeof setTimeout> = 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;

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.x = Math.round(rectangle.x / window.devicePixelRatio);
-        rectangle.y /= window.devicePixelRatio;
+        rectangle.y = Math.round(rectangle.y / window.devicePixelRatio);
     }
 
     return rectangle;

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.x = Math.round(point.x / window.devicePixelRatio);
-        point.y /= window.devicePixelRatio;
+        point.y = Math.round(point.y / window.devicePixelRatio);
     }
 
     return point;

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

src/api/nitro/room/widgets/events/RoomWidgetUpdateRoomViewEvent.ts

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

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

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

src/api/nitro/room/widgets/handlers/RoomWidgetRoomToolsHandler.ts

@@ -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
-        ];
-    }
-}

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

src/api/nitro/room/widgets/messages/RoomWidgetZoomToggleMessage.ts

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

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

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 =>
             </TransitionAnimation>
             <ToolbarView isInRoom={ !landingViewVisible } />
             <ModToolsView />
-            <RoomHostView />
+            <RoomView />
             <ChatHistoryView />
             <WiredView />
             <AvatarEditorView />

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 { FC, useCallback, useEffect, useState } from 'react';
-import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent, RoomWidgetUpdateRoomViewEvent } from '../../api';
+import { GetNitroInstance, GetRoomEngine, RoomWidgetUpdateBackgroundColorPreviewEvent } from '../../api';
-import { UseEventDispatcherHook, UseMountEffect, UseRoomEngineEvent } from '../../hooks';
+import { UseEventDispatcherHook, UseRoomEngineEvent } from '../../hooks';
 import { useRoomContext } from './RoomContext';
 
 export const RoomColorView: FC<{}> = props =>
 {
     const [ roomBackground, setRoomBackground ] = useState<NitroSprite>(null);
-    const [ roomBackgroundColor, setRoomBackgroundColor ] = useState(0);
-    const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
     const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
-    const { roomSession = null, canvasId = -1, widgetHandler = null, eventDispatcher = null } = useRoomContext();
+    const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
-
+    const { roomSession = null, 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 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);
+            roomBackground.tint = newColor;
-
+            roomBackground.width = GetNitroInstance().width;
-            background.visible = true;
+            roomBackground.height = GetNitroInstance().height;
+            roomBackground.visible = true;
         }
-    }, [ getRoomBackground, updateRoomBackground ]);
+    }, [ roomBackground ]);
-
-    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 ]);
 
     const updateRoomFilter = useCallback((color: number) =>
     {
-        const colorMatrix = getRoomFilter();
+        if(!roomFilter) return;
-
-        if(!colorMatrix) return;
 
         const r = ((color >> 16) & 0xFF);
         const g = ((color >> 8) & 0xFF);
         const b = (color & 0xFF);
 
-        colorMatrix.red = (r / 255);
+        roomFilter.red = (r / 255);
-        colorMatrix.green = (g / 255);
+        roomFilter.green = (g / 255);
-        colorMatrix.blue = (b / 255);
+        roomFilter.blue = (b / 255);
-    }, [ getRoomFilter ]);
+    }, [ roomFilter ]);
-
-    const updateRoomFilterColor = useCallback((color: number, brightness: number) =>
-    {
-        const newColor = ColorConverter.hslToRGB(((ColorConverter.rgbToHSL(color) & 0xFFFF00) + brightness));
-
-        updateRoomFilter(newColor);
-    }, [ updateRoomFilter ]);
 
     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);
+                let color = 0x000000;
-                else updateRoomFilterColor(colorEvent.color, colorEvent.brightness);
+                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);
+                roomBackground.tint = originalRoomBackgroundColor;
-                updateRoomBackground(color);
+                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;
 }

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<IRoomContext>({
     roomSession: null,
-    canvasId: -1,
     eventDispatcher: null,
     widgetHandler: null
 });

src/components/room/RoomHostView.tsx

@@ -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<IRoomSession>(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 (
-        <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ !!roomSession } timeout={ 300 }>
-            <Base fit>
-                <RoomView roomSession={ roomSession } />
-            </Base>
-        </TransitionAnimation>
-    );
-}

src/components/room/RoomView.scss

@@ -1 +1 @@
-@import './widgets/RoomWidgets';
+@import "./widgets/RoomWidgets";

src/components/room/RoomView.tsx

@@ -1,30 +1,61 @@
-import { EventDispatcher, IRoomSession, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
+import { EventDispatcher, IRoomSession, RoomEngineEvent, RoomGeometry, RoomId, RoomSessionEvent, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, useCallback, 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 { 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;
+    const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
-}
-
-export const RoomView: FC<RoomViewProps> = props =>
-{
-    const { roomSession = null } = props;
-    const [ canvasId, setCanvasId ] = useState(-1);
     const [ widgetHandler, setWidgetHandler ] = useState<IRoomWidgetHandlerManager>(null);
     const elementRef = useRef<HTMLDivElement>();
 
+    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<RoomViewProps> = 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<RoomViewProps> = 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<number>(roomSession.roomId, RoomVariableEnum.ROOM_MIN_X) || 0);
+            const minX = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MIN_X) || 0);
-            const maxX = (GetRoomEngine().getRoomInstanceVariable<number>(roomSession.roomId, RoomVariableEnum.ROOM_MAX_X) || 0);
+            const maxX = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MAX_X) || 0);
-            const minY = (GetRoomEngine().getRoomInstanceVariable<number>(roomSession.roomId, RoomVariableEnum.ROOM_MIN_Y) || 0);
+            const minY = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MIN_Y) || 0);
-            const maxY = (GetRoomEngine().getRoomInstanceVariable<number>(roomSession.roomId, RoomVariableEnum.ROOM_MAX_Y) || 0);
+            const maxY = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MAX_Y) || 0);
 
             let x = ((minX + maxX) / 2);
             let y = ((minY + maxY) / 2);
@@ -91,57 +122,71 @@ export const RoomView: FC<RoomViewProps> = 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();
+            nitroInstance.render();
-            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();
         }
 
-        if(elementRef && elementRef.current) elementRef.current.replaceChildren(canvas);
+        const element = elementRef.current;
 
-        setCanvasId(canvasId);
+        if(!element) return;
-    }, [ roomSession ]);
 
-    if(!roomSession) return null;
+        element.appendChild(canvas);
+
+        return () =>
+        {
+            element.removeChild(canvas);
+            window.onresize = null;
+        }
+    }, []);
 
     return (
-        <RoomContextProvider value={ { roomSession, canvasId, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }>
+        <RoomContextProvider value={ { roomSession, eventDispatcher: (widgetHandler && widgetHandler.eventDispatcher), widgetHandler } }>
-            <Base innerRef={ elementRef } id="room-view" className="nitro-room-container" />
+            <Base fit className={ (!roomSession && 'd-none') }>
-            { widgetHandler && 
+                <Base innerRef={ elementRef } />
-                <>
+                { (roomSession && widgetHandler) &&
-                    <RoomColorView />
+                    <>
-                    <RoomWidgetsView />
+                        <RoomColorView />
-                </> }
+                        <RoomWidgetsView />
+                    </> }
+            </Base>
         </RoomContextProvider>
     );
 }

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)));
+                GetRoomEngine().setRoomInstanceRenderingCanvasScale(event.roomId, 1, zoomEvent.level, null, null, false, zoomEvent.asDelta);
-
-                if(zoomEvent.forceFlip || zoomEvent.asDelta) zoomLevel = zoomEvent.level;
-
-                GetRoomEngine().setRoomInstanceRenderingCanvasScale(event.roomId, 1, zoomLevel, null, null, false, zoomEvent.asDelta);
 
                 return;
             }

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<boolean>(false);
     const [ isOpen, setIsOpen ] = useState<boolean>(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(prevValue =>
-                setIsZoomedIn(value => !value);
+                {
+                    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');