Fixes

src/App.tsx

@@ -1,4 +1,4 @@
-import { GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, 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 { Base } from './common';
@@ -11,8 +11,15 @@ NitroVersion.UI_VERSION = GetUIVersion();
 export const App: FC<{}> = props =>
 {
     const [ isReady, setIsReady ] = useState(false);
-    const [ message, setMessage ] = useState('Getting Ready');
-    const [ imageRendering, setImageRendering ] = useState<boolean>(true);
+
+    useMessageEvent<LoadGameUrlEvent>(LoadGameUrlEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if(!parser) return;
+
+        LegacyExternalInterface.callGame('showGame', parser.url);
+    });
 
     useEffect(() =>
     {
@@ -31,8 +38,6 @@ export const App: FC<{}> = props =>
                     resolution: window.devicePixelRatio
                 });
 
-                GetTicker().add(ticker => renderer.render(GetStage()));
-
                 await GetConfiguration().init();
 
                 GetTicker().maxFPS = GetConfiguration().getValue<number>('system.fps.max', 24);
@@ -41,12 +46,21 @@ export const App: FC<{}> = props =>
                 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);
-                
-                await GetLocalizationManager().init();
-                await GetAvatarRenderManager().init();
-                await GetSoundManager().init();
-                await GetSessionDataManager().init();
-                await GetRoomSessionManager().init();
+
+                const assetUrls = GetConfiguration().getValue<string[]>('preload.assets.urls').map(url => GetConfiguration().interpolate(url)) ?? [];
+
+                await Promise.all(
+                    [
+                        GetAssetManager().downloadAssets(assetUrls),
+                        GetLocalizationManager().init(),
+                        GetAvatarRenderManager().init(),
+                        GetSoundManager().init(),
+                        GetSessionDataManager().init(),
+                        GetRoomSessionManager().init(),
+                        GetRoomCameraWidgetManager().init()
+                    ]
+                );
+
                 await GetRoomEngine().init();
                 await GetCommunication().init();
 
@@ -58,6 +72,10 @@ export const App: FC<{}> = props =>
 
                 setInterval(() => HabboWebTools.sendHeartBeat(), 10000);
 
+                GetTicker().add(ticker => GetRoomEngine().update(ticker));
+                GetTicker().add(ticker => renderer.render(GetStage()));
+                GetTicker().add(ticker => GetTexturePool().run());
+
                 setIsReady(true);
 
                 // handle socket close
@@ -69,34 +87,14 @@ export const App: FC<{}> = props =>
                 NitroLogger.error(err);
             }
         }
-    
-        const resize = (event: UIEvent) => setImageRendering(!(window.devicePixelRatio % 1));
-
-        window.addEventListener('resize', resize);
-
-        resize(null);
 
         prepare(window.innerWidth, window.innerHeight);
-
-        return () =>
-        {
-            window.removeEventListener('resize', resize);
-        }
     }, []);
-
-    useMessageEvent<LoadGameUrlEvent>(LoadGameUrlEvent, event =>
-    {
-        const parser = event.getParser();
-
-        if(!parser) return;
-
-        LegacyExternalInterface.callGame('showGame', parser.url);
-    });
     
     return (
-        <Base fit overflow="hidden" className={ imageRendering && 'image-rendering-pixelated' }>
+        <Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
             { !isReady &&
-                <LoadingView isError={ false } message={ message } percent={ 0 } showPercent={ false } /> }
+                <LoadingView /> }
             { isReady && <MainView /> }
             <Base id="draggable-windows-container" />
         </Base>

src/api/avatar/BodyModel.ts

@@ -47,7 +47,7 @@ export class BodyModel extends CategoryBaseModel
                 const figureString = AvatarEditorUtilities.CURRENT_FIGURE.getFigureStringWithFace(part.id);
                 const avatarImage = GetAvatarRenderManager().createAvatarImage(figureString, AvatarScaleType.LARGE, null, { resetFigure, dispose: null, disposed: false });
     
-                const sprite = avatarImage.getImageAsSprite(AvatarSetType.HEAD);
+                const sprite = avatarImage.processAsContainer(AvatarSetType.HEAD);
     
                 if(sprite)
                 {

src/api/room/widgets/ChatBubbleUtilities.ts

@@ -25,7 +25,7 @@ export class ChatBubbleUtilities
 
         figure = avatarImage.getFigure().getFigureString();
 
-        const imageUrl = await avatarImage.getCroppedImageUrl(AvatarSetType.HEAD);
+        const imageUrl = avatarImage.processAsImageUrl(AvatarSetType.HEAD);
         const color = avatarImage.getPartColor(AvatarFigurePartType.CHEST);
 
         if(isPlaceholder) this.placeHolderImageUrl = imageUrl;

src/api/wired/WiredSelectionVisualizer.ts

@@ -1,9 +1,11 @@
-import { GetRoomEngine, IRoomObject, IRoomObjectSpriteVisualization, NitroFilter, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { GetRoomEngine, IRoomObject, IRoomObjectSpriteVisualization, RoomObjectCategory, WiredFilter } from '@nitrots/nitro-renderer';
 
 export class WiredSelectionVisualizer
 {
-    // private static _selectionShader: NitroFilter = new WiredSelectionFilter([ 1, 1, 1 ], [ 0.6, 0.6, 0.6 ]);
-    private static _selectionShader: NitroFilter = null;
+    private static _selectionShader: WiredFilter = new WiredFilter({
+        lineColor: [ 1, 1, 1 ],
+        color: [ 0.6, 0.6, 0.6 ]
+    });
 
     public static show(furniId: number): void
     {
@@ -50,7 +52,11 @@ export class WiredSelectionVisualizer
         {
             if(sprite.blendMode === 'add') continue;
 
-            sprite.filters = [ WiredSelectionVisualizer._selectionShader ];
+            if(!sprite.filters) sprite.filters = [];
+
+            sprite.filters.push(WiredSelectionVisualizer._selectionShader);
+
+            sprite.increaseUpdateCounter();
         }
     }
 
@@ -62,6 +68,18 @@ export class WiredSelectionVisualizer
 
         if(!visualization) return;
 
-        for(const sprite of visualization.sprites) sprite.filters = [];
+        for(const sprite of visualization.sprites)
+        {
+            if(!sprite.filters) continue;
+
+            const index = sprite.filters.indexOf(WiredSelectionVisualizer._selectionShader);
+
+            if(index >= 0)
+            {
+                sprite.filters.splice(index, 1);
+
+                sprite.increaseUpdateCounter();
+            }
+        }
     }
 }

src/common/layout/LayoutAvatarImageView.tsx

@@ -2,6 +2,8 @@ import { AvatarScaleType, AvatarSetType, GetAvatarRenderManager } from '@nitrots
 import { CSSProperties, FC, useEffect, useMemo, useRef, useState } from 'react';
 import { Base, BaseProps } from '../Base';
 
+const AVATAR_IMAGE_CACHE: Map<string, string> = new Map();
+
 export interface LayoutAvatarImageViewProps extends BaseProps<HTMLDivElement>
 {
     figure: string;
@@ -49,31 +51,40 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
     {
         if(!isReady) return;
 
-        const resetFigure = (_figure: string) =>
+        const figureKey = [ figure, gender, direction, headOnly ].join('-');
+
+        if(AVATAR_IMAGE_CACHE.has(figureKey))
         {
-            if(isDisposed.current) return;
-            
-            const avatarImage = GetAvatarRenderManager().createAvatarImage(_figure, AvatarScaleType.LARGE, gender, { resetFigure: (figure: string) => resetFigure(figure), dispose: null, disposed: false });
-
-            let setType = AvatarSetType.FULL;
-
-            if(headOnly) setType = AvatarSetType.HEAD;
-
-            avatarImage.setDirection(setType, direction);
-
-            const loadImage = async () =>
+            setAvatarUrl(AVATAR_IMAGE_CACHE.get(figureKey));
+        }
+        else
+        {
+            const resetFigure = (_figure: string) =>
             {
-                const imageUrl = await avatarImage.getCroppedImageUrl(setType);
+                if(isDisposed.current) return;
+                
+                const avatarImage = GetAvatarRenderManager().createAvatarImage(_figure, AvatarScaleType.LARGE, gender, { resetFigure: (figure: string) => resetFigure(figure), dispose: null, disposed: false });
 
-                if(imageUrl && !isDisposed.current) setAvatarUrl(imageUrl);
+                let setType = AvatarSetType.FULL;
 
-                avatarImage.dispose();
+                if(headOnly) setType = AvatarSetType.HEAD;
+
+                avatarImage.setDirection(setType, direction);
+
+                const imageUrl = avatarImage.processAsImageUrl(setType);
+
+                if(imageUrl && !isDisposed.current)
+                {
+                    if(!avatarImage.isPlaceholder()) AVATAR_IMAGE_CACHE.set(figureKey, imageUrl);
+
+                    setAvatarUrl(imageUrl);
+                }
+
+                avatarImage.dispose(true);
             }
 
-            loadImage();
+            resetFigure(figure);
         }
-
-        resetFigure(figure);
     }, [ figure, gender, direction, headOnly, isReady ]);
 
     useEffect(() =>

src/components/loading/LoadingView.tsx

@@ -1,34 +1,19 @@
 import { FC } from 'react';
-import { Base, Column, LayoutProgressBar, Text } from '../../common';
+import { Base, Column } from '../../common';
 
 interface LoadingViewProps
 {
-    isError: boolean;
-    message: string;
-    percent: number;
-    showPercent?: boolean;
 }
 
 export const LoadingView: FC<LoadingViewProps> = props =>
 {
-    const { isError = false, message = '', percent = 0, showPercent = true } = props;
+    const {} = props;
     
     return (
         <Column fullHeight position="relative" className="nitro-loading">
             <Base fullHeight className="container h-100">
                 <Column fullHeight alignItems="center" justifyContent="end">
                     <Base className="connecting-duck" />
-                    { showPercent && <Column size={ 6 } className="text-center py-4">
-                        { isError && (message && message.length) ?
-                            <Base className="fs-4 text-shadow">{ message }</Base>
-                            :
-                            <>
-                                <Text fontSize={ 4 } variant="white" className="text-shadow">{ percent.toFixed() }%</Text>
-                                <LayoutProgressBar progress={ percent } className="mt-2 large" />
-                            </>
-                        }
-                        
-                    </Column> }
                 </Column>
             </Base>
         </Column>

src/components/room/widgets/chat/ChatWidgetView.tsx

@@ -149,6 +149,8 @@ export const ChatWidgetView: FC<{}> = props =>
         return () =>
         {
             worker.postMessage({ action: 'STOP' });
+
+            worker.terminate();
         }
     }, [ getScrollSpeed, removeHiddenChats, setChatMessages ]);
 

src/hooks/rooms/useRoom.ts

@@ -256,14 +256,13 @@ const useRoomState = () =>
             const width = Math.floor(window.innerWidth);
             const height = Math.floor(window.innerHeight);
 
+            renderer.resolution = window.devicePixelRatio;
             renderer.resize(width, height);
 
             background.width = width;
             background.height = height;
 
             InitializeRoomInstanceRenderingCanvas(width, height, 1);
-
-            renderer.render(GetStage());
         }
 
         window.addEventListener('resize', resize);

src/hooks/rooms/widgets/useAvatarInfoWidget.ts

@@ -121,7 +121,7 @@ const useAvatarInfoWidgetState = () =>
 
         event.addedUsers.forEach(user =>
         {
-            if(user.webID === GetSessionDataManager().userId) return;
+            if(user.webID === GetSessionDataManager().userId || user.type !== RoomObjectType.USER) return;
 
             if(friends.find(friend => (friend.id === user.webID)))
             {