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

🆙 Updates

Browse Source
This commit is contained in:
DuckieTM 2025-03-10 21:46:30 +01:00
parent f225a033f2
commit 3adddd3ad6
23 changed files with 2625 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
src/App.tsx
View File

@ -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);
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)) ?? [];
await Promise.all(
[
GetAssetManager().downloadAssets(assetUrls),
GetLocalizationManager().init(),
GetAvatarRenderManager().init(),
GetSoundManager().init(),
GetSessionDataManager().init(),
GetRoomSessionManager().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,
);
const assetUrls =
GetConfiguration()
.getValue<string[]>('preload.assets.urls')
.map((url) => GetConfiguration().interpolate(url)) ??
[];
await Promise.all([
GetRoomCameraWidgetManager().init(),
GetAssetManager().downloadAssets(assetUrls),
GetLocalizationManager().init(),
GetAvatarRenderManager().init(),
GetSoundManager().init(),
GetSessionDataManager().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" />

856
src/chats.css Normal file
View File

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

1
src/common/index.ts
View File

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

18
src/common/layout/LayoutNotificationBubbleView.tsx
View File

@ -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>
{ isVisible &&
<motion.div
initial={ { opacity: 0 }}
animate={ { opacity: 1 }}
exit={ { opacity: 0 }}>
<Flex overflow={ overflow } classNames={ getClassNames } onClick={ onClose } { ...rest } />
</motion.div> }
</AnimatePresence>
<TransitionAnimation inProp={ isVisible } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
<Flex classNames={ getClassNames } overflow={ overflow } onClick={ onClose } { ...rest } />
</TransitionAnimation>
);
};
};

43
src/common/layout/LayoutRoomPreviewerView.tsx
View File

@ -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;
}
export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
}> = 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 ref={ elementRef } className="room-preview-image" style={ { height } } onClick={ onClick } />
{ children }
</div>
<div
ref={ elementRef }
className="relative w-full rounded-md shadow-room-previewer"
style={ {
height,
minHeight: height,
maxHeight: height
} }
onClick={ onClick } />
);
};
};

14
src/components/MainView.tsx
View File

@ -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>
{ landingViewVisible &&
<motion.div
initial={ { opacity: 0 }}
animate={ { opacity: 1 }}
exit={ { opacity: 0 }}>
<HotelView />
</motion.div> }
</AnimatePresence>
<TransitionAnimation inProp={ landingViewVisible } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
<HotelView />
</TransitionAnimation>
<ToolbarView isInRoom={ !landingViewVisible } />
<ModToolsView />
<RoomView />

7
src/components/camera/CameraWidgetView.tsx
View File

@ -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_EDITOR) && <CameraWidgetEditorView picture={ cameraRoll[selectedPictureIndex] } myLevel={ myLevel } onClose={ () => processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } availableEffects={ availableEffects } /> }
{ (mode === MODE_CHECKOUT) && <CameraWidgetCheckoutView base64Url={ base64Url } onCloseClick={ () => processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }></CameraWidgetCheckoutView> }
{ (mode === MODE_CAPTURE) && <CameraWidgetCaptureView onClose={ () => processAction('close') } onDelete={ () => processAction('delete') } onEdit={ () => processAction('edit') } /> }
{ (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 } price={ price } onCancelClick={ () => processAction('editor_cancel') } onCloseClick={ () => processAction('close') }></CameraWidgetCheckoutView> }
</>
);
};

4
src/components/camera/views/CameraWidgetShowPhotoView.tsx
View File

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

12
src/components/camera/views/editor/CameraWidgetEditorView.tsx
View File

@ -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 }
onChange={ event => setSelectedEffectAlpha(event) } />
value={ getCurrentEffect.strength }
onChange={ event => setSelectedEffectAlpha(event) }
renderThumb={ ({ key, ...props }, state) => <div key={ key } { ...props }>{ state.valueNow }</div> } />
</Column> }
</Column>
<div className="flex justify-between">

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

@ -19,22 +19,26 @@ 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()) }>
{ isActive &&
<Button variant="danger" className="rounded-circle remove-effect" onClick={ removeEffect }>
<FaTimes className="fa-icon" />
</Button> }
{ !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) &&
<div className="effect-thumbnail-image border">
<img alt="" src={ thumbnailUrl } />
</div> }
{ isLocked &&
<Text center bold>
<div>
<FaLock className="fa-icon" />
</div>
{ effect.minLevel }
</Text> }
</LayoutGridItem>
<>
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 }>
<FaTimes className="fa-icon" />
</Button> }
{ !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) &&
<div className="effect-thumbnail-image border">
<img alt="" src={ thumbnailUrl } />
</div> }
{ isLocked &&
<Text bold center>
<div>
<FaLock className="fa-icon" />
</div>
{ effect.minLevel }
</Text> }
</LayoutGridItem>
</>
);
};

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

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

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

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

58
src/components/room/widgets/furniture/FurnitureAreaHideView.tsx
View File

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

2
src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
View File

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

147
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -1,126 +1,101 @@
import { CreateLinkEvent, GetGuestRoomResultEvent, GetRoomEngine, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion } from 'framer-motion';
import { FC, useCallback, useEffect, useState } from 'react';
import { FC, 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<{}> = () => {
const [isZoomedIn, setIsZoomedIn] = useState<boolean>(false);
const [roomName, setRoomName] = useState<string | null>(null);
const [roomOwner, setRoomOwner] = useState<string | null>(null);
const [roomTags, setRoomTags] = useState<string[] | null>(null);
const [isOpen, setIsOpen] = useState<boolean>(false);
export const RoomToolsWidgetView: FC<{}> = props =>
{
const [ isZoomedIn, setIsZoomedIn ] = useState<boolean>(false);
const [ roomName, setRoomName ] = useState<string>(null);
const [ roomOwner, setRoomOwner ] = useState<string>(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) => {
if (!roomSession?.roomId) return;
switch (action) {
const handleToolClick = (action: string, value?: string) =>
{
switch(action)
{
case 'settings':
CreateLinkEvent('navigator/toggle-room-info');
break;
return;
case 'zoom':
setIsZoomedIn(prevValue => {
const scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
const newScale = prevValue ? scale * 2 : scale / 2;
GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, newScale);
setIsZoomedIn(prevValue =>
{
let scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
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}`));
}
break;
default:
break;
CreateLinkEvent(`navigator/search/${ value }`);
SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${ value }`));
return;
}
}, [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);
setRoomOwner(prev => prev !== parser.data.ownerName ? parser.data.ownerName : prev);
setRoomTags(prev => prev !== parser.data.tags ? parser.data.tags : prev);
if(!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
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(() => {
if (!roomName && !roomOwner && !roomTags) return;
useEffect(() =>
{
setIsOpen(true);
const timeout = setTimeout(() => setIsOpen(false), 5000);
return () => clearTimeout(timeout);
}, [roomName, roomOwner, roomTags]);
if (!roomSession) return null;
}, [ roomName, roomOwner, roomTags ]);
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
className="cursor-pointer nitro-icon icon-cog"
title={LocalizeText('room.settings.button.text')}
onClick={() => handleToolClick('settings')}
/>
<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 className="cursor-pointer nitro-icon icon-cog" title={ LocalizeText('room.settings.button.text') } onClick={ () => handleToolClick('settings') } />
<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>
{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 && (
<div className="flex gap-2">
{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>
))}
</div>
)}
</div>
<TransitionAnimation inProp={ isOpen } timeout={ 300 } type={ TransitionAnimationTypes.SLIDE_LEFT }>
<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>
</motion.div>
)}
</AnimatePresence>
{ roomTags && roomTags.length > 0 &&
<div className="flex gap-2">
{ 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>) }
</div> }
</div>
</div>
</TransitionAnimation>
</div>
</div>
);
};
};

10
src/components/toolbar/ToolbarView.tsx
View File

@ -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 }}>
<ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
</motion.div> }
</AnimatePresence>
<TransitionAnimation inProp={ isMeExpanded } timeout={ 300 } type={ TransitionAnimationTypes.FADE_IN }>
<ToolbarMeView setMeExpanded={ setMeExpanded } unseenAchievementCount={ getTotalUnseen } useGuideTool={ useGuideTool } />
</TransitionAnimation>
<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 }>

0
src/components/camera/CameraWidgetView.scss → src/css/CameraWidgetView.css
View File

2
src/css/NotificationCenterView.css
View File

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

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

@ -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,14 +27,17 @@ const useCameraState = () =>
useEffect(() =>
{
if(GetRoomCameraWidgetManager().isLoaded) return;
if(!GetRoomCameraWidgetManager().isLoaded)
{
GetRoomCameraWidgetManager().init();
GetRoomCameraWidgetManager().init();
SendMessageComposer(new RequestCameraConfigurationComposer());
SendMessageComposer(new RequestCameraConfigurationComposer());
return;
}
}, []);
return { availableEffects, cameraRoll, setCameraRoll, selectedPictureIndex, setSelectedPictureIndex, myLevel, price };
};
export const useCamera = () => useBetween(useCameraState);
export const useCamera = () => useBetween(useCameraState);

73
src/hooks/rooms/useRoom.ts
View File

@ -6,20 +6,20 @@ import { useNitroEvent, useUiEvent } from '../events';
const useRoomState = () =>
{
const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
const [ roomBackground, setRoomBackground ] = useState<NitroSprite>(null);
const [ roomFilter, setRoomFilter ] = useState<NitroAdjustmentFilter>(null);
const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0);
const [roomSession, setRoomSession] = useState<IRoomSession>(null);
const [roomBackground, setRoomBackground] = useState<NitroSprite>(null);
const [roomFilter, setRoomFilter] = useState<NitroAdjustmentFilter>(null);
const [originalRoomBackgroundColor, setOriginalRoomBackgroundColor] = useState(0);
const updateRoomBackgroundColor = (hue: number, saturation: number, lightness: number, original: boolean = false) =>
{
if(!roomBackground) return;
if (!roomBackground) return;
const newColor = ColorConverter.hslToRGB(((((hue & 0xFF) << 16) + ((saturation & 0xFF) << 8)) + (lightness & 0xFF)));
if(original) setOriginalRoomBackgroundColor(newColor);
if (original) setOriginalRoomBackgroundColor(newColor);
if(!hue && !saturation && !lightness)
if (!hue && !saturation && !lightness)
{
roomBackground.tint = 0;
}
@ -31,7 +31,7 @@ const useRoomState = () =>
const updateRoomFilter = (color: number) =>
{
if(!roomFilter) return;
if (!roomFilter) return;
const r = ((color >> 16) & 0xFF);
const g = ((color >> 8) & 0xFF);
@ -46,27 +46,27 @@ const useRoomState = () =>
useUiEvent<RoomWidgetUpdateBackgroundColorPreviewEvent>(RoomWidgetUpdateBackgroundColorPreviewEvent.CLEAR_PREVIEW, event =>
{
if(!roomBackground) return;
if (!roomBackground) return;
roomBackground.tint = originalRoomBackgroundColor;
});
useNitroEvent<RoomObjectHSLColorEnabledEvent>(RoomObjectHSLColorEnabledEvent.ROOM_BACKGROUND_COLOR, event =>
{
if(RoomId.isRoomPreviewerId(event.roomId)) return;
if (RoomId.isRoomPreviewerId(event.roomId)) return;
if(event.enable) updateRoomBackgroundColor(event.hue, event.saturation, event.lightness, true);
if (event.enable) updateRoomBackgroundColor(event.hue, event.saturation, event.lightness, true);
else updateRoomBackgroundColor(0, 0, 0, true);
});
useNitroEvent<RoomBackgroundColorEvent>(RoomBackgroundColorEvent.ROOM_COLOR, event =>
{
if(RoomId.isRoomPreviewerId(event.roomId)) return;
if (RoomId.isRoomPreviewerId(event.roomId)) return;
let color = 0x000000;
let brightness = 0xFF;
if(!event.bgOnly)
if (!event.bgOnly)
{
color = event.color;
brightness = event.brightness;
@ -80,13 +80,13 @@ const useRoomState = () =>
RoomEngineEvent.DISPOSED
], event =>
{
if(RoomId.isRoomPreviewerId(event.roomId)) return;
if (RoomId.isRoomPreviewerId(event.roomId)) return;
const session = GetRoomSession();
if(!session) return;
if (!session) return;
switch(event.type)
switch (event.type)
{
case RoomEngineEvent.INITIALIZED:
SetActiveRoomId(event.roomId);
@ -103,7 +103,7 @@ const useRoomState = () =>
RoomSessionEvent.ENDED
], event =>
{
switch(event.type)
switch (event.type)
{
case RoomSessionEvent.CREATED:
StartRoomSession(event.session);
@ -127,14 +127,14 @@ const useRoomState = () =>
RoomEngineObjectEvent.DOUBLE_CLICK
], event =>
{
if(RoomId.isRoomPreviewerId(event.roomId)) return;
if (RoomId.isRoomPreviewerId(event.roomId)) return;
let updateEvent: RoomWidgetUpdateRoomObjectEvent = null;
switch(event.type)
switch (event.type)
{
case RoomEngineObjectEvent.SELECTED:
if(!IsFurnitureSelectionDisabled(event)) updateEvent = new RoomWidgetUpdateRoomObjectEvent(RoomWidgetUpdateRoomObjectEvent.OBJECT_SELECTED, event.objectId, event.category, event.roomId);
if (!IsFurnitureSelectionDisabled(event)) updateEvent = new RoomWidgetUpdateRoomObjectEvent(RoomWidgetUpdateRoomObjectEvent.OBJECT_SELECTED, event.objectId, event.category, event.roomId);
break;
case RoomEngineObjectEvent.DESELECTED:
updateEvent = new RoomWidgetUpdateRoomObjectEvent(RoomWidgetUpdateRoomObjectEvent.OBJECT_DESELECTED, event.objectId, event.category, event.roomId);
@ -142,7 +142,7 @@ const useRoomState = () =>
case RoomEngineObjectEvent.ADDED: {
let addedEventType: string = null;
switch(event.category)
switch (event.category)
{
case RoomObjectCategory.FLOOR:
case RoomObjectCategory.WALL:
@ -153,13 +153,13 @@ const useRoomState = () =>
break;
}
if(addedEventType) updateEvent = new RoomWidgetUpdateRoomObjectEvent(addedEventType, event.objectId, event.category, event.roomId);
if (addedEventType) updateEvent = new RoomWidgetUpdateRoomObjectEvent(addedEventType, event.objectId, event.category, event.roomId);
break;
}
case RoomEngineObjectEvent.REMOVED: {
let removedEventType: string = null;
switch(event.category)
switch (event.category)
{
case RoomObjectCategory.FLOOR:
case RoomObjectCategory.WALL:
@ -170,14 +170,14 @@ const useRoomState = () =>
break;
}
if(removedEventType) updateEvent = new RoomWidgetUpdateRoomObjectEvent(removedEventType, event.objectId, event.category, event.roomId);
if (removedEventType) updateEvent = new RoomWidgetUpdateRoomObjectEvent(removedEventType, event.objectId, event.category, event.roomId);
break;
}
case RoomEngineObjectEvent.REQUEST_MOVE:
if(CanManipulateFurniture(roomSession, event.objectId, event.category)) ProcessRoomObjectOperation(event.objectId, event.category, RoomObjectOperationType.OBJECT_MOVE);
if (CanManipulateFurniture(roomSession, event.objectId, event.category)) ProcessRoomObjectOperation(event.objectId, event.category, RoomObjectOperationType.OBJECT_MOVE);
break;
case RoomEngineObjectEvent.REQUEST_ROTATE:
if(CanManipulateFurniture(roomSession, event.objectId, event.category)) ProcessRoomObjectOperation(event.objectId, event.category, RoomObjectOperationType.OBJECT_ROTATE_POSITIVE);
if (CanManipulateFurniture(roomSession, event.objectId, event.category)) ProcessRoomObjectOperation(event.objectId, event.category, RoomObjectOperationType.OBJECT_ROTATE_POSITIVE);
break;
case RoomEngineObjectEvent.MOUSE_ENTER:
updateEvent = new RoomWidgetUpdateRoomObjectEvent(RoomWidgetUpdateRoomObjectEvent.OBJECT_ROLL_OVER, event.objectId, event.category, event.roomId);
@ -190,12 +190,12 @@ const useRoomState = () =>
break;
}
if(updateEvent) DispatchUiEvent(updateEvent);
if (updateEvent) DispatchUiEvent(updateEvent);
});
useEffect(() =>
{
if(!roomSession) return;
if (!roomSession) return;
const roomEngine = GetRoomEngine();
const roomId = roomSession.roomId;
@ -204,12 +204,12 @@ 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);
if(!displayObject || !canvas) return;
if (!displayObject || !canvas) return;
const background = new NitroSprite(NitroTexture.WHITE);
const filter = new NitroAdjustmentFilter();
@ -220,14 +220,14 @@ const useRoomState = () =>
background.height = height;
master.addChildAt(background, 0);
master.filters = [ filter ];
master.filters = [filter];
setRoomBackground(background);
setRoomFilter(filter);
const geometry = (roomEngine.getRoomInstanceGeometry(roomId, canvasId) as RoomGeometry);
if(geometry)
if (geometry)
{
const minX = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MIN_X) || 0);
const maxX = (roomEngine.getRoomInstanceVariable<number>(roomId, RoomVariableEnum.ROOM_MAX_X) || 0);
@ -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);
@ -275,9 +274,9 @@ const useRoomState = () =>
window.removeEventListener('resize', resize);
};
}, [ roomSession ]);
}, [roomSession]);
return { roomSession };
};
export const useRoom = () => useBetween(useRoomState);
export const useRoom = () => useBetween(useRoomState);

1
src/hooks/rooms/widgets/furniture/index.ts
View File

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

93
src/hooks/rooms/widgets/furniture/useFurnitureAreaHideWidget.ts
View File

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

1517
src/index.css Normal file
View File

File diff suppressed because it is too large Load Diff