🆙 Fix effects in UI

src/App.tsx

@@ -1,39 +1,18 @@
-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 { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, 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';
+import { Base } from './common';
 import { LoadingView } from './components/loading/LoadingView';
+import { MainView } from './components/MainView';
 import { useMessageEvent } from './hooks';
-import { classNames } from './layout';
 
 NitroVersion.UI_VERSION = GetUIVersion();
 
-export const App: FC<{}> = (props) =>
+export const App: FC<{}> = props =>
 {
-    const [isReady, setIsReady] = useState(false);
+    const [ isReady, setIsReady ] = useState(false);
 
-    useMessageEvent<LoadGameUrlEvent>(LoadGameUrlEvent, (event) =>
+    useMessageEvent<LoadGameUrlEvent>(LoadGameUrlEvent, event =>
     {
         const parser = event.getParser();
 
@@ -48,91 +27,60 @@ export const App: FC<{}> = (props) =>
         {
             try
             {
-                if(!window.NitroConfig)
-                    throw new Error('NitroConfig is not defined!');
+                if(!window.NitroConfig) throw new Error('NitroConfig is not defined!');
 
                 const renderer = await PrepareRenderer({
-                    width: Math.floor(width),
-                    height: Math.floor(height),
-                    resolution: window.devicePixelRatio,
+                    width,
+                    height,
                     autoDensity: true,
                     backgroundAlpha: 0,
-                    preference: 'webgl',
-                    eventMode: 'none',
-                    failIfMajorPerformanceCaveat: false,
-                    roundPixels: true
+                    preference: 'webgl'
                 });
 
                 await GetConfiguration().init();
 
-                GetTicker().maxFPS = GetConfiguration().getValue<number>(
-                    'system.fps.max',
-                    24,
-                );
-                NitroLogger.LOG_DEBUG = GetConfiguration().getValue<boolean>(
-                    '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,
-                );
+                GetTicker().maxFPS = GetConfiguration().getValue<number>('system.fps.max', 24);
+                NitroLogger.LOG_DEBUG = GetConfiguration().getValue<boolean>('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([
-                    GetRoomCameraWidgetManager().init(),
+                await Promise.all(
+                    [
                         GetAssetManager().downloadAssets(assetUrls),
                         GetLocalizationManager().init(),
                         GetAvatarRenderManager().init(),
                         GetSoundManager().init(),
                         GetSessionDataManager().init(),
-                    GetRoomSessionManager().init(),
-                    GetCommunication().init(),
-                ]);
+                        GetRoomSessionManager().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();
 
                 setInterval(() => HabboWebTools.sendHeartBeat(), 10000);
 
-                GetTicker().add((ticker) => GetRoomEngine().update(ticker));
-                GetTicker().add((ticker) => renderer.render(GetStage()));
-                GetTicker().add((ticker) => GetTexturePool().run());
+                GetTicker().add(ticker => GetRoomEngine().update(ticker));
+                GetTicker().add(ticker => renderer.render(GetStage()));
+                GetTicker().add(ticker => GetTexturePool().run());
 
                 setIsReady(true);
 
                 // handle socket close
                 //canvas.addEventListener('webglcontextlost', () => instance.events.dispatchEvent(new NitroEvent(Nitro.WEBGL_CONTEXT_LOST)));
             }
-            catch (err)
+
+            catch(err)
             {
                 NitroLogger.error(err);
             }
@@ -142,15 +90,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]',
-            )}
-        >
-            {!isReady && <LoadingView />}
-            {isReady && <MainView />}
-            <div id="draggable-windows-container" />
-        </div>
+        <Base fit overflow="hidden" className={ !(window.devicePixelRatio % 1) && 'image-rendering-pixelated' }>
+            { !isReady &&
+                <LoadingView /> }
+            { isReady && <MainView /> }
+            <Base id="draggable-windows-container" />
+        </Base>
     );
 };

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

@@ -19,9 +19,6 @@ export const CameraWidgetEffectListItemView: FC<CameraWidgetEffectListItemViewPr
     const { effect = null, thumbnailUrl = null, isActive = false, isLocked = false, selectEffect = null, removeEffect = null } = props;
 
     return (
-        <>
-            asassa
-
             <LayoutGridItem itemActive={ isActive } title={ LocalizeText(!isLocked ? (`camera.effect.name.${ effect.name }`) : `camera.effect.required.level ${ effect.minLevel }`) } onClick={ event => (!isActive && selectEffect()) }>
                 { isActive &&
                     <Button className="rounded-circle remove-effect" variant="danger" onClick={ removeEffect }>
@@ -39,6 +36,5 @@ export const CameraWidgetEffectListItemView: FC<CameraWidgetEffectListItemViewPr
                         { effect.minLevel }
                     </Text> }
             </LayoutGridItem>
-        </>
     );
 };

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

@@ -24,7 +24,9 @@ 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 } isActive={ isActive } isLocked={ (effect.minLevel > myLevel) } removeEffect={ () => processAction('remove_effect', effect.name) } selectEffect={ () => processAction('select_effect', effect.name) } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } />;
+                // 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) } />;
+				
+				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) } />
             }) }
         </Grid>
     );

src/hooks/camera/useCamera.ts

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