🆙 Updates

src/App.tsx

@@ -1,4 +1,25 @@
-import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer';
+import
+{
+    GetAssetManager,
+    GetAvatarRenderManager,
+    GetCommunication,
+    GetConfiguration,
+    GetLocalizationManager,
+    GetRoomCameraWidgetManager,
+    GetRoomEngine,
+    GetRoomSessionManager,
+    GetSessionDataManager,
+    GetSoundManager,
+    GetStage,
+    GetTexturePool,
+    GetTicker,
+    HabboWebTools,
+    LegacyExternalInterface,
+    LoadGameUrlEvent,
+    NitroLogger,
+    NitroVersion,
+    PrepareRenderer,
+} from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GetUIVersion } from './api';
 import { MainView } from './components/MainView';
@@ -44,32 +65,59 @@ export const App: FC<{}> = (props) =>
 
                 await GetConfiguration().init();
 
-                GetTicker().maxFPS = GetConfiguration().getValue<number>('system.fps.max', 24);
+                GetTicker().maxFPS = GetConfiguration().getValue<number>(
-                NitroLogger.LOG_DEBUG = GetConfiguration().getValue<boolean>('system.log.debug', true);
+                    'system.fps.max',
-                NitroLogger.LOG_WARN = GetConfiguration().getValue<boolean>('system.log.warn', false);
+                    24,
-                NitroLogger.LOG_ERROR = GetConfiguration().getValue<boolean>('system.log.error', false);
+                );
-                NitroLogger.LOG_EVENTS = GetConfiguration().getValue<boolean>('system.log.events', false);
+                NitroLogger.LOG_DEBUG = GetConfiguration().getValue<boolean>(
-                NitroLogger.LOG_PACKETS = GetConfiguration().getValue<boolean>('system.log.packets', false);
+                    'system.log.debug',
+                    true,
+                );
+                NitroLogger.LOG_WARN = GetConfiguration().getValue<boolean>(
+                    'system.log.warn',
+                    false,
+                );
+                NitroLogger.LOG_ERROR = GetConfiguration().getValue<boolean>(
+                    'system.log.error',
+                    false,
+                );
+                NitroLogger.LOG_EVENTS = GetConfiguration().getValue<boolean>(
+                    'system.log.events',
+                    false,
+                );
+                NitroLogger.LOG_PACKETS = GetConfiguration().getValue<boolean>(
+                    'system.log.packets',
+                    false,
+                );
 
-                const assetUrls = GetConfiguration().getValue<string[]>('preload.assets.urls').map(url => GetConfiguration().interpolate(url)) ?? [];
+                const assetUrls =
+                    GetConfiguration()
+                        .getValue<string[]>('preload.assets.urls')
+                        .map((url) => GetConfiguration().interpolate(url)) ??
+                    [];
 
-                await Promise.all(
+                await Promise.all([
-                    [
+                    GetRoomCameraWidgetManager().init(),
                     GetAssetManager().downloadAssets(assetUrls),
                     GetLocalizationManager().init(),
                     GetAvatarRenderManager().init(),
                     GetSoundManager().init(),
                     GetSessionDataManager().init(),
-                        GetRoomSessionManager().init()
+                    GetRoomSessionManager().init(),
-                    ]
+                    GetCommunication().init(),
-                );
+                ]);
 
                 await GetRoomEngine().init();
-                await GetCommunication().init();
 
                 // new GameMessageHandler();
 
-                if(LegacyExternalInterface.available) LegacyExternalInterface.call('legacyTrack', 'authentication', 'authok', []);
+                if(LegacyExternalInterface.available)
+                    LegacyExternalInterface.call(
+                        'legacyTrack',
+                        'authentication',
+                        'authok',
+                        [],
+                    );
 
                 HabboWebTools.sendHeartBeat();
 
@@ -95,7 +143,11 @@ export const App: FC<{}> = (props) =>
 
     return (
         <div
-            className={classNames( 'w-full h-full overflow-hidden text-base bg-black', !(window.devicePixelRatio % 1) && '[image-rendering:pixelated]')}>
+            className={classNames(
+                'w-full h-full overflow-hidden text-base bg-black',
+                !(window.devicePixelRatio % 1) && '[image-rendering:pixelated]',
+            )}
+        >
             {!isReady && <LoadingView />}
             {isReady && <MainView />}
             <div id="draggable-windows-container" />

src/chats.css

@@ -0,0 +1,856 @@
+.bubble-container {
+    transition: top 0.2s ease 0s;
+
+    .chat-bubble {
+        border-image-slice: 17 6 6 29 fill;
+        border-image-width: 17px 6px 6px 29px;
+        border-image-outset: 2px 0px 0px 0px;
+        border-image-repeat: repeat repeat;
+
+        &.type-0 {
+
+            // normal
+            .message {
+                font-weight: 400;
+            }
+        }
+
+        &.type-1 {
+
+            // whisper
+            .message {
+                font-weight: 400;
+                font-style: italic;
+                color: #595959;
+            }
+        }
+
+        &.type-2 {
+
+            // shout
+            .message {
+                font-weight: 700;
+            }
+        }
+
+        &.bubble-0 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_0_transparent.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+                bottom: -5px;
+            }
+        }
+
+        &.bubble-1 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_1.png');
+
+            border-image-slice: 18 6 6 29 fill;
+            border-image-width: 18px 6px 6px 29px;
+            border-image-outset: 3px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                display: none;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-2,
+        &.bubble-31 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_2.png');
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                color: rgba($white, 1);
+            }
+
+            .message {
+                color: rgba($white, 1) !important;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_2_31_pointer.png');
+                height: 7px;
+            }
+        }
+
+        &.bubble-3 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_3.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_3_pointer.png');
+            }
+        }
+
+        &.bubble-4 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_4.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_4_pointer.png');
+            }
+        }
+
+        &.bubble-5 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_5.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_5_pointer.png');
+            }
+        }
+
+        &.bubble-6 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_6.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_6_pointer.png');
+            }
+        }
+
+        &.bubble-7 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_7.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_7_pointer.png');
+            }
+        }
+
+        &.bubble-8 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_8.png');
+
+            border-image-slice: 20 6 6 27 fill;
+            border-image-width: 20px 6px 6px 27px;
+            border-image-outset: 5px 0px 0px 0px;
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_8_pointer.png');
+            }
+        }
+
+        &.bubble-9 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_9.png');
+
+            border-image-slice: 17 18 12 19 fill;
+            border-image-width: 17px 18px 12px 19px;
+            border-image-outset: 7px 7px 0px 9px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_9_pointer.png');
+                width: 7px;
+                height: 10px;
+                bottom: -6px;
+            }
+        }
+
+        &.bubble-10 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_10.png');
+
+            border-image-slice: 29 18 8 37 fill;
+            border-image-width: 29px 18px 8px 37px;
+            border-image-outset: 12px 7px 1px 5px;
+
+            .chat-content {
+                margin-left: 24px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_10_pointer.png');
+                width: 7px;
+                height: 8px;
+                bottom: -3px;
+            }
+        }
+
+        &.bubble-11 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_11.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_11_pointer.png');
+            }
+        }
+
+        &.bubble-12 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_12.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_12_pointer.png');
+            }
+        }
+
+        &.bubble-13 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_13.png');
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_13_pointer.png');
+            }
+        }
+
+        &.bubble-14 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_14.png');
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_14_pointer.png');
+            }
+        }
+
+        &.bubble-15 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_15.png');
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_15_pointer.png');
+            }
+        }
+
+        &.bubble-16 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_16.png');
+
+            border-image-slice: 13 6 10 31 fill;
+            border-image-width: 13px 6px 10px 31px;
+            border-image-outset: 6px 0px 0px 0px;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_16_pointer.png');
+                height: 8px;
+            }
+        }
+
+        &.bubble-17 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_17.png');
+
+            border-image-slice: 24 6 8 35 fill;
+            border-image-width: 24px 6px 8px 35px;
+            border-image-outset: 9px 0px 2px 5px;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_17_pointer.png');
+            }
+        }
+
+        &.bubble-18 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_18.png');
+
+            border-image-slice: 7 16 8 16 fill;
+            border-image-width: 7px 16px 8px 16px;
+            border-image-outset: 3px 10px 2px 11px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_18_pointer.png');
+                height: 8px;
+            }
+        }
+
+        &.bubble-19 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_19.png');
+
+            border-image-slice: 17 6 9 19 fill;
+            border-image-width: 17px 6px 9px 19px;
+            border-image-outset: 5px 0px 0px 8px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
+            }
+        }
+
+        &.bubble-20 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_20.png');
+
+            border-image-slice: 18 6 8 19 fill;
+            border-image-width: 18px 6px 8px 19px;
+            border-image-outset: 5px 0px 0px 8px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_19_20_pointer.png');
+            }
+        }
+
+        &.bubble-21 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_21.png');
+
+            border-image-slice: 20 6 12 24 fill;
+            border-image-width: 20px 6px 12px 24px;
+            border-image-outset: 13px 2px 1px 3px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_21_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-22 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_22.png');
+
+            border-image-slice: 18 19 11 33 fill;
+            border-image-width: 18px 19px 11px 33px;
+            border-image-outset: 7px 1px 1px 5px;
+
+            .chat-content {
+                margin-left: 20px;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_22_pointer.png');
+            }
+        }
+
+        &.bubble-23 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_23.png');
+
+            border-image-slice: 16 6 7 32 fill;
+            border-image-width: 16px 6px 7px 32px;
+            border-image-outset: 5px 0px 0px 3px;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
+            }
+        }
+
+        &.bubble-24 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_24.png');
+
+            border-image-slice: 23 8 6 40 fill;
+            border-image-width: 23px 8px 6px 40px;
+            border-image-outset: 6px 0px 0px 6px;
+
+            .chat-content {
+                margin-left: 30px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_24_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-25 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_25.png');
+
+            border-image-slice: 10 13 8 28 fill;
+            border-image-width: 10px 13px 8px 28px;
+            border-image-outset: 6px 3px 2px 0px;
+
+            .chat-content {
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_25_pointer.png');
+                height: 9px;
+                bottom: -7px;
+            }
+        }
+
+        &.bubble-26 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_26.png');
+
+            border-image-slice: 16 9 8 29 fill;
+            border-image-width: 16px 9px 8px 29px;
+            border-image-outset: 2px 2px 2px 0px;
+
+            .chat-content {
+                color: #c59432;
+                text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_26_pointer.png');
+                height: 10px;
+                bottom: -6px;
+            }
+        }
+
+        &.bubble-27 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_27.png');
+
+            border-image-slice: 25 6 5 36 fill;
+            border-image-width: 25px 6px 5px 36px;
+            border-image-outset: 8px 0px 0px 5px;
+
+            .chat-content {
+                margin-left: 30px;
+                color: #fff;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_27_pointer.png');
+            }
+        }
+
+        &.bubble-28 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_28.png');
+
+            border-image-slice: 16 7 7 27 fill;
+            border-image-width: 16px 7px 7px 27px;
+            border-image-outset: 3px 0px 0px 0px;
+
+            .chat-content {
+                margin-left: 25px;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_28_pointer.png');
+            }
+        }
+
+        &.bubble-29 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_29.png');
+
+            border-image-slice: 10 7 15 31 fill;
+            border-image-width: 10px 7px 15px 31px;
+            border-image-outset: 2px 0px 0px 1px;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_29_pointer.png');
+                bottom: -4px;
+            }
+        }
+
+        &.bubble-30 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_30.png');
+
+            .user-container {
+                display: none;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_30_pointer.png');
+                height: 7px;
+            }
+        }
+
+        &.bubble-32 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_32.png');
+
+            border-image-slice: 15 7 7 30 fill;
+            border-image-width: 15px 7px 7px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_32_pointer.png');
+            }
+        }
+
+        &.bubble-33 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
+
+            border-image-slice: 7 6 6 39 fill;
+            border-image-width: 7px 6px 6px 39px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .chat-content {
+                margin-left: 35px;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 9px;
+                top: 2px;
+                background: url('@/assets/images/chat/chatbubbles/bubble_33_extra.png');
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-34 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
+
+            border-image-slice: 7 6 6 39 fill;
+            border-image-width: 7px 6px 6px 39px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            &.type-1 {
+                .message {
+                    font-style: unset;
+                    color: inherit;
+                }
+            }
+
+            .user-container {
+                display: none;
+            }
+
+            .username {
+                display: none;
+            }
+
+            .chat-content {
+                margin-left: 35px;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 9px;
+                top: 2px;
+                background: url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png');
+            }
+        }
+
+        &.bubble-35 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_35.png');
+
+            border-image-slice: 19 6 5 29 fill;
+            border-image-width: 19px 6px 5px 29px;
+            border-image-outset: 4px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_35_pointer.png');
+            }
+        }
+
+        &.bubble-36 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_36.png');
+
+            border-image-slice: 17 7 5 30 fill;
+            border-image-width: 17px 7px 5px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 13px;
+                height: 18px;
+                left: 5px;
+                top: 2px;
+                background: url('@/assets/images/chat/chatbubbles/bubble_36_extra.png');
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_36_pointer.png');
+            }
+        }
+
+        &.bubble-37 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_37.png');
+
+            border-image-slice: 16 6 7 32 fill;
+            border-image-width: 16px 6px 7px 32px;
+            border-image-outset: 5px 0px 0px 3px;
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_23_37_pointer.png');
+            }
+        }
+
+        &.bubble-38 {
+            border-image-source: url('@/assets/images/chat/chatbubbles/bubble_38.png');
+
+            border-image-slice: 17 7 5 30 fill;
+            border-image-width: 17px 7px 5px 30px;
+            border-image-outset: 2px 0px 0px 0px;
+
+            .user-container {
+                display: none;
+            }
+
+            &::before {
+                content: ' ';
+                position: absolute;
+                width: 19px;
+                height: 19px;
+                left: 3px;
+                top: 2px;
+                background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png');
+            }
+
+            .pointer {
+                background: url('@/assets/images/chat/chatbubbles/bubble_38_pointer.png');
+            }
+        }
+
+        .user-container {
+            z-index: 3;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 100%;
+            max-height: 24px;
+            overflow: hidden;
+
+            .user-image {
+                position: absolute;
+                top: -15px;
+                left: -9.25px;
+                width: 45px;
+                height: 65px;
+                background-repeat: no-repeat;
+                background-position: center;
+                transform: scale(0.5);
+                overflow: hidden;
+                image-rendering: initial;
+            }
+        }
+
+        .chat-content {
+            padding: 5px 6px 5px 4px;
+            margin-left: 27px;
+            line-height: 1;
+            color: $black;
+            min-height: 25px;
+        }
+    }
+}
+
+.chat-bubble-icon {
+    background-repeat: no-repeat;
+    background-position: center;
+
+    &.bubble-0 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_0.png');
+    }
+
+    &.bubble-1 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_1.png');
+        height: 25px;
+    }
+
+    &.bubble-2,
+    &.bubble-31 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_2.png');
+    }
+
+    &.bubble-3 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_3.png');
+    }
+
+    &.bubble-4 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_4.png');
+    }
+
+    &.bubble-5 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_5.png');
+    }
+
+    &.bubble-6 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_6.png');
+    }
+
+    &.bubble-7 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_7.png');
+    }
+
+    &.bubble-8 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_8.png');
+    }
+
+    &.bubble-9 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_9.png');
+    }
+
+    &.bubble-10 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_10.png');
+    }
+
+    &.bubble-11 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_11.png');
+    }
+
+    &.bubble-12 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_12.png');
+    }
+
+    &.bubble-13 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_13.png');
+    }
+
+    &.bubble-14 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_14.png');
+    }
+
+    &.bubble-15 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_15.png');
+    }
+
+    &.bubble-16 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_16.png');
+    }
+
+    &.bubble-17 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_17.png');
+    }
+
+    &.bubble-18 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_18.png');
+    }
+
+    &.bubble-19 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_19.png');
+    }
+
+    &.bubble-20 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_20.png');
+    }
+
+    &.bubble-21 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_21.png');
+    }
+
+    &.bubble-22 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_22.png');
+    }
+
+    &.bubble-23 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_23.png');
+    }
+
+    &.bubble-24 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_24.png');
+    }
+
+    &.bubble-25 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_25.png');
+    }
+
+    &.bubble-26 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_26.png');
+    }
+
+    &.bubble-27 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_27.png');
+    }
+
+    &.bubble-28 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_28.png');
+    }
+
+    &.bubble-29 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_29.png');
+    }
+
+    &.bubble-30 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_30.png');
+    }
+
+    &.bubble-32 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_32.png');
+    }
+
+    &.bubble-33 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('@/assets/images/chat/chatbubbles/bubble_33_extra.png');
+        }
+    }
+
+    &.bubble-34 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_33_34.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('@/assets/images/chat/chatbubbles/bubble_34_extra.png');
+        }
+    }
+
+    &.bubble-35 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_35.png');
+    }
+
+    &.bubble-36 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_36.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 13px;
+            height: 18px;
+            left: 13px;
+            top: 10px;
+            background: url('@/assets/images/chat/chatbubbles/bubble_36_extra.png');
+        }
+    }
+
+    &.bubble-37 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_35.png');
+    }
+
+    &.bubble-38 {
+        background-image: url('@/assets/images/chat/chatbubbles/bubble_38.png');
+
+        &::before {
+            content: ' ';
+            position: absolute;
+            width: 19px;
+            height: 19px;
+            left: 11px;
+            top: 10px;
+            background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png');
+        }
+    }
+}

src/common/index.ts

@@ -17,5 +17,6 @@ export * from './card/tabs';
 export * from './draggable-window';
 export * from './layout';
 export * from './layout/limited-edition';
+export * from './transitions';
 export * from './types';
 export * from './utils';

src/common/layout/LayoutNotificationBubbleView.tsx

@@ -1,6 +1,6 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { Flex, FlexProps } from '../Flex';
+import { TransitionAnimation, TransitionAnimationTypes } from '../transitions';
 
 export interface LayoutNotificationBubbleViewProps extends FlexProps
 {
@@ -16,7 +16,7 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames: string[] = [ 'nitro-notification-bubble', 'rounded' ];
+        const newClassNames: string[] = [ 'text-sm bg-[#1c1c20f2] px-[5px] py-[6px] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] ', 'rounded' ];
 
         if(classNames.length) newClassNames.push(...classNames);
 
@@ -45,14 +45,8 @@ export const LayoutNotificationBubbleView: FC<LayoutNotificationBubbleViewProps>
     }, [ fadesOut, timeoutMs, onClose ]);
 
     return (
-        <AnimatePresence>
+        <TransitionAnimation inProp={ isVisible } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
-            { isVisible &&
+            <Flex classNames={ getClassNames } overflow={ overflow } onClick={ onClose } { ...rest } />
-                <motion.div
+        </TransitionAnimation>
-                    initial={ { opacity: 0 }}
-                    animate={ { opacity: 1 }}
-                    exit={ { opacity: 0 }}>
-                    <Flex overflow={ overflow } classNames={ getClassNames } onClick={ onClose } { ...rest } />
-                </motion.div> }
-        </AnimatePresence>
     );
 };

src/common/layout/LayoutRoomPreviewerView.tsx

@@ -1,16 +1,12 @@
 import { GetRenderer, GetTicker, NitroTicker, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, ReactNode, useEffect, useRef } from 'react';
+import { FC, MouseEvent, useEffect, useRef } from 'react';
 
-export interface LayoutRoomPreviewerViewProps
+export const LayoutRoomPreviewerView: FC<{
-{
     roomPreviewer: RoomPreviewer;
     height?: number;
-    children?: ReactNode;
+}> = props =>
-}
-
-export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
 {
-    const { roomPreviewer = null, height = 0, children = null } = props;
+    const { roomPreviewer = null, height = 0 } = props;
     const elementRef = useRef<HTMLDivElement>();
 
     const onClick = (event: MouseEvent<HTMLDivElement>) =>
@@ -32,24 +28,24 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
         {
             if(!roomPreviewer || !elementRef.current) return;
 
-            const canvas = roomPreviewer.getRoomCanvas(width, height);
+            roomPreviewer.updatePreviewRoomView();
+
             const renderingCanvas = roomPreviewer.getRenderingCanvas();
 
             if(!renderingCanvas.canvasUpdated) return;
 
-            roomPreviewer.updatePreviewRoomView();
-
             GetRenderer().render({
                 target: texture,
-                container: canvas,
+                container: renderingCanvas.master,
                 clear: true
             });
 
-            const url = await TextureUtils.generateImageUrl(texture);
+            let canvas = GetRenderer().texture.generateCanvas(texture);
+            const base64 = canvas.toDataURL('image/png');
 
-            if(!elementRef || !elementRef.current) return;
+            canvas = null;
 
-            elementRef.current.style.backgroundImage = `url(${ url })`;
+            elementRef.current.style.backgroundImage = `url(${ base64 })`;
         };
 
         GetTicker().add(update);
@@ -65,6 +61,8 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
             update(GetTicker());
         });
 
+        roomPreviewer.getRoomCanvas(width, height);
+
         resizeObserver.observe(elementRef.current);
 
         return () =>
@@ -78,9 +76,14 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
     }, [ roomPreviewer, elementRef, height ]);
 
     return (
-        <div className="room-preview-container">
+        <div
-            <div ref={ elementRef } className="room-preview-image" style={ { height } } onClick={ onClick } />
+            ref={ elementRef }
-            { children }
+            className="relative w-full rounded-md shadow-room-previewer"
-        </div>
+            style={ {
+                height,
+                minHeight: height,
+                maxHeight: height
+            } }
+            onClick={ onClick } />
     );
 };

src/components/MainView.tsx

@@ -1,6 +1,6 @@
 import { AddLinkEventTracker, GetCommunication, HabboWebTools, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
+import { TransitionAnimation, TransitionAnimationTypes } from '../common';
 import { useNitroEvent } from '../hooks';
 import { AchievementsView } from './achievements/AchievementsView';
 import { AvatarEditorView } from './avatar-editor';
@@ -80,15 +80,9 @@ export const MainView: FC<{}> = props =>
 
     return (
         <>
-            <AnimatePresence>
+            <TransitionAnimation inProp={ landingViewVisible } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
-                { landingViewVisible &&
-                    <motion.div
-                        initial={ { opacity: 0 }}
-                        animate={ { opacity: 1 }}
-                        exit={ { opacity: 0 }}>
                 <HotelView />
-                    </motion.div> }
+            </TransitionAnimation>
-            </AnimatePresence>
             <ToolbarView isInRoom={ !landingViewVisible } />
             <ModToolsView />
             <RoomView />

src/components/camera/CameraWidgetView.tsx

@@ -16,6 +16,7 @@ export const CameraWidgetView: FC<{}> = props =>
     const [ base64Url, setSavedPictureUrl ] = useState<string>(null);
     const { availableEffects = [], selectedPictureIndex = -1, cameraRoll = [], setCameraRoll = null, myLevel = 0, price = { credits: 0, duckets: 0, publishDucketPrice: 0 } } = useCamera();
 
+
     const processAction = (type: string) =>
     {
         switch(type)
@@ -88,9 +89,9 @@ export const CameraWidgetView: FC<{}> = props =>
 
     return (
         <>
-            { (mode === MODE_CAPTURE) && <CameraWidgetCaptureView onClose={ () => processAction('close') } onEdit={ () => processAction('edit') } onDelete={ () => processAction('delete') } /> }
+            { (mode === MODE_CAPTURE) && <CameraWidgetCaptureView onClose={ () => processAction('close') } onDelete={ () => processAction('delete') } onEdit={ () => processAction('edit') } /> }
-            { (mode === MODE_EDITOR) && <CameraWidgetEditorView picture={ cameraRoll[selectedPictureIndex] } myLevel={ myLevel } onClose={ () => processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } availableEffects={ availableEffects } /> }
+            { (mode === MODE_EDITOR) && <CameraWidgetEditorView availableEffects={ availableEffects } myLevel={ myLevel } picture={ cameraRoll[selectedPictureIndex] } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } onClose={ () => processAction('close') } /> }
-            { (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView base64Url={ base64Url } onCloseClick={ () => processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }></CameraWidgetCheckoutView> }
+            { (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView base64Url={ base64Url } price={ price } onCancelClick={ () => processAction('editor_cancel') } onCloseClick={ () => processAction('close') }></CameraWidgetCheckoutView> }
         </>
     );
 };

src/components/camera/views/CameraWidgetShowPhotoView.tsx

@@ -55,10 +55,10 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
             </Flex>
             { currentImage.m && currentImage.m.length &&
                 <Text center>{ currentImage.m }</Text> }
-            <Flex alignItems="center" justifyContent="between">
+            <div className="flex items-center justify-between">
                 <Text>{ (currentImage.n || '') }</Text>
                 <Text>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
-            </Flex>
+            </div>
             { (currentPhotos.length > 1) &&
                 <Flex className="picture-preview-buttons">
                     <FaArrowLeft className="cursor-pointer picture-preview-buttons-previous fa-icon" onClick={ previous } />

src/components/camera/views/editor/CameraWidgetEditorView.tsx

@@ -195,7 +195,7 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
             <NitroCardContentView>
                 <Grid>
                     <Column overflow="hidden" size={ 5 }>
-                        <CameraWidgetEffectListView effects={ getEffectList() } myLevel={ myLevel } processAction={ processAction } selectedEffects={ selectedEffects } thumbnails={ effectsThumbnails } />
+                        <CameraWidgetEffectListView myLevel={ myLevel } selectedEffects={ selectedEffects } effects={ getEffectList() } thumbnails={ effectsThumbnails } processAction={ processAction } />
                     </Column>
                     <Column justifyContent="between" overflow="hidden" size={ 7 }>
                         <Column center>
@@ -205,14 +205,12 @@ export const CameraWidgetEditorView: FC<CameraWidgetEditorViewProps> = props =>
                                     <Text>{ LocalizeText('camera.effect.name.' + selectedEffectName) }</Text>
                                     <ReactSlider
                                         className={ 'nitro-slider' }
-												 
-                                        max={ 1 }
                                         min={ 0 }
-                                        renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> }
+                                        max={ 1 }
                                         step={ 0.01 }
-                                        value={ getCurrentEffect.alpha }
+                                        value={ getCurrentEffect.strength }
-                                        onChange={ event => setSelectedEffectAlpha(event) } />
+                                        onChange={ event => setSelectedEffectAlpha(event) }
-																																			   
+                                        renderThumb={ ({ key, ...props }, state) => <div key={ key } { ...props }>{ state.valueNow }</div> } />
                                 </Column> }
                         </Column>
                         <div className="flex justify-between">

src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx

@@ -19,9 +19,12 @@ export const CameraWidgetEffectListItemView: FC<CameraWidgetEffectListItemViewPr
     const { effect = null, thumbnailUrl = null, isActive = false, isLocked = false, selectEffect = null, removeEffect = null } = props;
 
     return (
-        <LayoutGridItem title={ LocalizeText(!isLocked ? (`camera.effect.name.${ effect.name }`) : `camera.effect.required.level ${ effect.minLevel }`) } itemActive={ isActive } onClick={ event => (!isActive && selectEffect()) }>
+        <>
+            asassa
+
+            <LayoutGridItem itemActive={ isActive } title={ LocalizeText(!isLocked ? (`camera.effect.name.${ effect.name }`) : `camera.effect.required.level ${ effect.minLevel }`) } onClick={ event => (!isActive && selectEffect()) }>
                 { isActive &&
-                <Button variant="danger" className="rounded-circle remove-effect" onClick={ removeEffect }>
+                    <Button className="rounded-circle remove-effect" variant="danger" onClick={ removeEffect }>
                         <FaTimes className="fa-icon" />
                     </Button> }
                 { !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) &&
@@ -29,12 +32,13 @@ export const CameraWidgetEffectListItemView: FC<CameraWidgetEffectListItemViewPr
                         <img alt="" src={ thumbnailUrl } />
                     </div> }
                 { isLocked &&
-                <Text center bold>
+                    <Text bold center>
                         <div>
                             <FaLock className="fa-icon" />
                         </div>
                         { effect.minLevel }
                     </Text> }
             </LayoutGridItem>
+        </>
     );
 };

src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx

@@ -24,7 +24,7 @@ export const CameraWidgetEffectListView: FC<CameraWidgetEffectListViewProps> = p
                 const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name)));
                 const isActive = (selectedEffects.findIndex(selectedEffect => (selectedEffect.effect.name === effect.name)) > -1);
 
-                return <CameraWidgetEffectListItemView key={ index } effect={ effect } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } isActive={ isActive } isLocked={ (effect.minLevel > myLevel) } selectEffect={ () => processAction('select_effect', effect.name) } removeEffect={ () => processAction('remove_effect', effect.name) } />;
+                return <CameraWidgetEffectListItemView key={ index } effect={ effect } isActive={ isActive } isLocked={ (effect.minLevel > myLevel) } removeEffect={ () => processAction('remove_effect', effect.name) } selectEffect={ () => processAction('select_effect', effect.name) } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } />;
             }) }
         </Grid>
     );

src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx

@@ -12,7 +12,7 @@ export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewPr
     const { item = null, onClose = null, ...rest } = props;
 
     return (
-        <LayoutNotificationBubbleView className="flex-col club-gift" fadesOut={ false } onClose={ onClose } { ...rest }>
+        <LayoutNotificationBubbleView className="flex-col nitro-notification-bubble" fadesOut={ false } onClose={ onClose } { ...rest }>
             <div className="flex items-center gap-2 mb-2">
                 <LayoutCurrencyIcon className="flex-shrink-0" type="hc" />
                 <span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>

src/components/room/widgets/furniture/FurnitureAreaHideView.tsx

@@ -1,58 +0,0 @@
-import { GetRoomEngine } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
-import { LocalizeText } from '../../../../api';
-import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
-import { useFurnitureAreaHideWidget } from '../../../../hooks';
-
-export const FurnitureAreaHideView: FC<{}> = props =>
-{
-    const { objectId = -1, isOn, setIsOn, wallItems, setWallItems, inverted, setInverted, invisibility, setInvisibility, onClose = null } = useFurnitureAreaHideWidget();
-
-    if(objectId === -1) return null;
-
-    return (
-        <NitroCardView theme="primary-slim" className="nitro-room-widget-area-hide" style={ { maxWidth: '400px' }}>
-            <NitroCardHeaderView headerText={ LocalizeText('widget.areahide.title') } onCloseClick={ onClose } />
-            <NitroCardContentView overflow="hidden" justifyContent="between">
-                <Column gap={ 2 }>
-                    <Column gap={ 1 }>
-                        <Text bold>{ LocalizeText('wiredfurni.params.area_selection') }</Text>
-                        <Text bold>{ LocalizeText('wiredfurni.params.area_selection.info') }</Text>
-                    </Column>
-                    <Flex gap={ 1 }>
-                        <Button fullWidth variant="primary" onClick={ event => GetRoomEngine().areaSelectionManager.startSelecting() }>
-                            { LocalizeText('wiredfurni.params.area_selection.select') }
-                        </Button>
-                        <Button fullWidth variant="primary" onClick={ event => GetRoomEngine().areaSelectionManager.clearHighlight() }>
-                            { LocalizeText('wiredfurni.params.area_selection.clear') }
-                        </Button>
-                    </Flex>
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('widget.areahide.options') }</Text>
-                    <Flex gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" id="setWallItems" checked={ wallItems } onChange={ event => setWallItems(event.target.checked ? true : false) } />
-                        <Text>{ LocalizeText('widget.areahide.options.wallitems') }</Text>
-                    </Flex>
-                    <Flex gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" id="setInverted" checked={ inverted } onChange={ event => setInverted(event.target.checked ? true : false) } />
-                        <Column gap={ 1 }>
-                            <Text>{ LocalizeText('widget.areahide.options.invert') }</Text>
-                            <Text>{ LocalizeText('widget.areahide.options.invert.info') }</Text>
-                        </Column>
-                    </Flex>
-                    <Flex gap={ 1 }>
-                        <input className="form-check-input" type="checkbox" id="setInvisibility" checked={ invisibility } onChange={ event => setInvisibility(event.target.checked ? true : false) } />
-                        <Column gap={ 1 }>
-                            <Text>{ LocalizeText('widget.areahide.options.invisibility') }</Text>
-                            <Text>{ LocalizeText('widget.areahide.options.invisibility.info') }</Text>
-                        </Column>
-                    </Flex>
-                </Column>
-                <Button fullWidth variant="primary">
-                    { LocalizeText(isOn ? 'widget.dimmer.button.off' : 'widget.dimmer.button.on') }
-                </Button>
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-};

src/components/room/widgets/furniture/FurnitureWidgetsView.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { FurnitureAreaHideView } from './FurnitureAreaHideView';
 import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
 import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
 import { FurnitureCraftingView } from './FurnitureCraftingView';
@@ -43,7 +42,6 @@ export const FurnitureWidgetsView: FC<{}> = props =>
             <FurnitureTrophyView />
             <FurnitureContextMenuView />
             <FurnitureYoutubeDisplayView />
-			<FurnitureAreaHideView />
         </>
     );
 };

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

@@ -1,125 +1,100 @@
 import { CreateLinkEvent, GetGuestRoomResultEvent, GetRoomEngine, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer';
-import { AnimatePresence, motion } from 'framer-motion';
+import { FC, useEffect, useState } from 'react';
-import { FC, useCallback, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../api';
-import { Text } from '../../../../common';
+import { Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common';
 import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
 import { classNames } from '../../../../layout';
 
-export const RoomToolsWidgetView: FC<{}> = () => {
+export const RoomToolsWidgetView: FC<{}> = props =>
+{
     const [ isZoomedIn, setIsZoomedIn ] = useState<boolean>(false);
-    const [roomName, setRoomName] = useState<string | null>(null);
+    const [ roomName, setRoomName ] = useState<string>(null);
-    const [roomOwner, setRoomOwner] = useState<string | null>(null);
+    const [ roomOwner, setRoomOwner ] = useState<string>(null);
-    const [roomTags, setRoomTags] = useState<string[] | null>(null);
+    const [ roomTags, setRoomTags ] = useState<string[]>(null);
     const [ isOpen, setIsOpen ] = useState<boolean>(false);
     const { navigatorData = null } = useNavigator();
     const { roomSession = null } = useRoom();
 
-    const handleToolClick = useCallback((action: string, value?: string) => {
+    const handleToolClick = (action: string, value?: string) =>
-        if (!roomSession?.roomId) return;
+    {
-
+        switch(action)
-        switch (action) {
+        {
             case 'settings':
                 CreateLinkEvent('navigator/toggle-room-info');
-                break;
+                return;
             case 'zoom':
-                setIsZoomedIn(prevValue => {
+                setIsZoomedIn(prevValue =>
-                    const scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
+                {
-                    const newScale = prevValue ? scale * 2 : scale / 2;
+                    let scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
-                    GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, newScale);
+
+                    if(!prevValue) scale /= 2;
+                    else scale *= 2;
+
+                    GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale);
+
                     return !prevValue;
                 });
-                break;
+                return;
             case 'chat_history':
                 CreateLinkEvent('chat-history/toggle');
-                break;
+                return;
             case 'like_room':
                 SendMessageComposer(new RateFlatMessageComposer(1));
-                break;
+                return;
             case 'toggle_room_link':
                 CreateLinkEvent('navigator/toggle-room-link');
-                break;
+                return;
             case 'navigator_search_tag':
-                if (value) {
                 CreateLinkEvent(`navigator/search/${ value }`);
                 SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${ value }`));
+                return;
         }
-                break;
+    };
-            default:
-                break;
-        }
-    }, [roomSession]);
 
-    useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event => {
+    useMessageEvent<GetGuestRoomResultEvent>(GetGuestRoomResultEvent, event =>
+    {
         const parser = event.getParser();
-        if (!parser.roomEnter || parser.data.roomId !== roomSession?.roomId) return;
 
-        setRoomName(prev => prev !== parser.data.roomName ? parser.data.roomName : prev);
+        if(!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
-        setRoomOwner(prev => prev !== parser.data.ownerName ? parser.data.ownerName : prev);
+
-        setRoomTags(prev => prev !== parser.data.tags ? parser.data.tags : prev);
+        if(roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
+        if(roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
+        if(roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
     });
 
-    useEffect(() => {
+    useEffect(() =>
-        if (!roomName && !roomOwner && !roomTags) return;
+    {
-
         setIsOpen(true);
+
         const timeout = setTimeout(() => setIsOpen(false), 5000);
 
         return () => clearTimeout(timeout);
     }, [ roomName, roomOwner, roomTags ]);
 
-    if (!roomSession) return null;
-
     return (
         <div className="flex gap-2 nitro-room-tools-container">
             <div className="flex flex-col items-center justify-center p-2 nitro-room-tools">
-                <div 
+                <div className="cursor-pointer nitro-icon icon-cog" title={ LocalizeText('room.settings.button.text') } onClick={ () => handleToolClick('settings') } />
-                    className="cursor-pointer nitro-icon icon-cog" 
+                <div className={ classNames('cursor-pointer', 'icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more')) } title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } />
-                    title={LocalizeText('room.settings.button.text')} 
+                <div className="cursor-pointer nitro-icon icon-chat-history" title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } />
-                    onClick={() => handleToolClick('settings')} 
+                { navigatorData.canRate &&
-                />
+                    <div className="cursor-pointer nitro-icon icon-like-room" title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } /> }
-                <div 
-                    className={classNames('cursor-pointer', 'icon', !isZoomedIn && 'icon-zoom-less', isZoomedIn && 'icon-zoom-more')} 
-                    title={LocalizeText('room.zoom.button.text')} 
-                    onClick={() => handleToolClick('zoom')} 
-                />
-                <div 
-                    className="cursor-pointer nitro-icon icon-chat-history" 
-                    title={LocalizeText('room.chathistory.button.text')} 
-                    onClick={() => handleToolClick('chat_history')} 
-                />
-                {navigatorData?.canRate && (
-                    <div 
-                        className="cursor-pointer nitro-icon icon-like-room" 
-                        title={LocalizeText('room.like.button.text')} 
-                        onClick={() => handleToolClick('like_room')} 
-                    />
-                )}
             </div>
             <div className="flex flex-col justify-center">
-                <AnimatePresence>
+                <TransitionAnimation inProp={ isOpen } timeout={ 300 } type={ TransitionAnimationTypes.SLIDE_LEFT }>
-                    {isOpen && (
-                        <motion.div initial={{ x: -400 }} animate={{ x: 0 }} exit={{ x: -400 }}>
                     <div className="flex flex-col items-center justify-center">
                         <div className="flex flex-col px-3 py-2 rounded nitro-room-tools-info">
                             <div className="flex flex-col gap-1">
                                 <Text wrap fontSize={ 4 } variant="white">{ roomName }</Text>
                                 <Text fontSize={ 5 } variant="muted">{ roomOwner }</Text>
                             </div>
-                                    {roomTags?.length > 0 && (
+                            { roomTags && roomTags.length > 0 &&
                                 <div className="flex gap-2">
-                                            {roomTags.map((tag, index) => (
+                                    { roomTags.map((tag, index) => <Text key={ index } pointer small className="p-1 rounded bg-primary" variant="white" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
-                                                <Text key={index} pointer small className="p-1 rounded bg-primary"  variant="white" onClick={() => handleToolClick('navigator_search_tag', tag)}>
+                                </div> }
-                                                    #{tag}
-                                                </Text>
-                                            ))}
-                                        </div>
-                                    )}
                         </div>
                     </div>
-                        </motion.div>
+                </TransitionAnimation>
-                    )}
-                </AnimatePresence>
             </div>
         </div>
     );

src/components/toolbar/ToolbarView.tsx

@@ -1,8 +1,7 @@
 import { CreateLinkEvent, Dispose, DropBounce, EaseOut, GetSessionDataManager, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
-import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useState } from 'react';
 import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
-import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
+import { Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
 import { ToolbarItemView } from './ToolbarItemView';
 import { ToolbarMeView } from './ToolbarMeView';
@@ -65,10 +64,9 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 
     return (
         <>
-            <AnimatePresence> { isMeExpanded && <motion.div initial={ { opacity: 0 }} animate={ { opacity: 1 }} exit={ { opacity: 0 }}>
+            <TransitionAnimation inProp={ isMeExpanded } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
-					<ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
+                <ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
-				</motion.div> }
+            </TransitionAnimation>
-            </AnimatePresence>
             <Flex alignItems="center" className="absolute bottom-[0] left-[0] w-full h-[55px] bg-[rgba(28,_28,_32,_.95)] [box-shadow:inset_0_5px_#22222799,_inset_0_-4px_#12121599] py-1 px-3" gap={ 2 } justifyContent="between">
                 <Flex alignItems="center" gap={ 2 }>
                     <Flex alignItems="center" gap={ 2 }>

src/css/NotificationCenterView.css

@@ -41,7 +41,7 @@
     padding: 6px 5px;
     pointer-events: all;
     padding: 10px;
-    background-color: #212121;
+    background-color: #262626;
     box-shadow: inset 0 5px rgba(38,38,57,.6), inset 0 -4px rgba(25,25,37,.6);
     font-size: .7875rem;
     border-radius: 0.5rem;

src/hooks/camera/useCamera.ts

@@ -19,6 +19,7 @@ const useCameraState = () =>
 
     useMessageEvent<InitCameraMessageEvent>(InitCameraMessageEvent, event =>
     {
+
         const parser = event.getParser();
 
         setPrice({ credits: parser.creditPrice, duckets: parser.ducketPrice, publishDucketPrice: parser.publishDucketPrice });
@@ -26,11 +27,14 @@ const useCameraState = () =>
 
     useEffect(() =>
     {
-        if(GetRoomCameraWidgetManager().isLoaded) return;
+        if(!GetRoomCameraWidgetManager().isLoaded)
-
+        {
             GetRoomCameraWidgetManager().init();
 
             SendMessageComposer(new RequestCameraConfigurationComposer());
+
+            return;
+        }
     }, []);
 
     return { availableEffects, cameraRoll, setCameraRoll, selectedPictureIndex, setSelectedPictureIndex, myLevel, price };

src/hooks/rooms/useRoom.ts

@@ -204,7 +204,7 @@ const useRoomState = () =>
         const height = Math.floor(window.innerHeight);
         const renderer = GetRenderer();
 
-        if(renderer) renderer.resize(width, height, window.devicePixelRatio);
+        if (renderer) renderer.resize(width, height);
 
         const displayObject = roomEngine.getRoomInstanceDisplay(roomId, canvasId, width, height, RoomGeometry.SCALE_ZOOMED_IN);
         const canvas = GetRoomEngine().getRoomInstanceRenderingCanvas(roomId, canvasId);
@@ -256,13 +256,12 @@ const useRoomState = () =>
             const width = Math.floor(window.innerWidth);
             const height = Math.floor(window.innerHeight);
 
+            renderer.resize(width, height, window.devicePixelRatio);
+
             background.width = width;
             background.height = height;
 
-            renderer.resize(width, height, window.devicePixelRatio);
-
             InitializeRoomInstanceRenderingCanvas(width, height, 1);
-            GetRenderer().render(GetStage());
         };
 
         window.addEventListener('resize', resize);

src/hooks/rooms/widgets/furniture/index.ts

@@ -1,4 +1,3 @@
-export * from './useFurnitureAreaHideWidget';
 export * from './useFurnitureBackgroundColorWidget';
 export * from './useFurnitureBadgeDisplayWidget';
 export * from './useFurnitureContextMenuWidget';

src/hooks/rooms/widgets/furniture/useFurnitureAreaHideWidget.ts

@@ -1,93 +0,0 @@
-import { GetRoomEngine, RoomAreaSelectionManager, RoomEngineAreaHideStateEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { useEffect, useState } from 'react';
-import { CanManipulateFurniture } from '../../../../api';
-import { useNitroEvent } from '../../../events';
-import { useRoom } from '../../useRoom';
-
-const useFurnitureAreaHideWidgetState = () =>
-{
-    const [ objectId, setObjectId ] = useState<number>(-1);
-    const [ category, setCategory ] = useState<number>(-1);
-    const [ isOn, setIsOn ] = useState<boolean>(false);
-    const [ rootX, setRootX ] = useState<number>(0);
-    const [ rootY, setRootY ] = useState<number>(0);
-    const [ width, setWidth ] = useState<number>(0);
-    const [ length, setLength ] = useState<number>(0);
-    const [ invisibility, setInvisibility ] = useState<boolean>(false);
-    const [ wallItems, setWallItems ] = useState<boolean>(false);
-    const [ inverted, setInverted ] = useState<boolean>(false);
-    const { roomSession = null } = useRoom();
-
-    const onClose = () =>
-    {
-        setObjectId(-1);
-        setCategory(-1);
-        setIsOn(false);
-        setRootX(0);
-        setRootY(0);
-        setWidth(0);
-        setLength(0);
-        setInvisibility(false);
-        setWallItems(false);
-        setInverted(false);
-
-        GetRoomEngine().areaSelectionManager.deactivate();
-    };
-
-    useNitroEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_AREA_HIDE, event =>
-    {
-        if(!CanManipulateFurniture(roomSession, event.objectId, event.category)) return;
-
-        setObjectId(event.objectId);
-        setCategory(event.category);
-
-        const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
-
-        const model = roomObject.model;
-
-        setIsOn(roomObject.getState(0) === 1);
-        setRootX(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_ROOT_X) ?? 0);
-        setRootY(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_ROOT_Y) ?? 0);
-        setWidth(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_WIDTH) ?? 0);
-        setLength(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_LENGTH) ?? 0);
-        setInvisibility(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_INVISIBILITY) === 1);
-        setWallItems(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_WALL_ITEMS) === 1);
-        setInverted(model.getValue<number>(RoomObjectVariable.FURNITURE_AREA_HIDE_INVERT) === 1);
-    });
-
-    useNitroEvent<RoomEngineAreaHideStateEvent>(RoomEngineAreaHideStateEvent.UPDATE_STATE_AREA_HIDE, event =>
-    {
-        setObjectId(event.objectId);
-        setCategory(event.category);
-        setIsOn(event.isOn);
-    });
-
-    useEffect(() =>
-    {
-        if(objectId === -1) return;
-
-        if(!isOn)
-        {
-            const callback = (rootX: number, rootY: number, width: number, height: number) =>
-            {
-                setRootX(rootX);
-                setRootY(rootY);
-                setWidth(width);
-                setLength(height);
-            };
-
-            if(GetRoomEngine().areaSelectionManager.activate(callback, RoomAreaSelectionManager.HIGHLIGHT_DARKEN))
-            {
-                GetRoomEngine().areaSelectionManager.setHighlight(rootX, rootY, width, length);
-            }
-        }
-        else
-        {
-            GetRoomEngine().areaSelectionManager.deactivate();
-        }
-    }, [ objectId, isOn, rootX, rootY, width, length ]);
-
-    return { objectId, category, isOn, setIsOn, rootX, setRootX, rootY, setRootY, width, setWidth, length, setLength, invisibility, setInvisibility, wallItems, setWallItems, inverted, setInverted, onClose };
-};
-
-export const useFurnitureAreaHideWidget = useFurnitureAreaHideWidgetState;