duckietm/Nitro-Cool-UI
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-Cool-UI.git synced 2025-06-21 22:36:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Fix effects in UI

Browse Source
This commit is contained in:
DuckieTM 2025-03-10 23:12:52 +01:00
parent 3adddd3ad6
commit 74b59bffaf
4 changed files with 48 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/App.tsx
View File

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

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

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

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

@ -24,7 +24,9 @@ export const CameraWidgetEffectListView: FC<CameraWidgetEffectListViewProps> = p
const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name))); const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name)));
const isActive = (selectedEffects.findIndex(selectedEffect => (selectedEffect.effect.name === effect.name)) > -1); 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> </Grid>
); );

12
src/hooks/camera/useCamera.ts
View File

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