From 3adddd3ad62626aaab93c6bacf23e6a2dde72b31 Mon Sep 17 00:00:00 2001 From: DuckieTM Date: Mon, 10 Mar 2025 21:46:30 +0100 Subject: [PATCH] :up: Updates --- src/App.tsx | 96 +- src/chats.css | 856 ++++++++++ src/common/index.ts | 1 + .../layout/LayoutNotificationBubbleView.tsx | 18 +- src/common/layout/LayoutRoomPreviewerView.tsx | 43 +- src/components/MainView.tsx | 14 +- src/components/camera/CameraWidgetView.tsx | 7 +- .../views/CameraWidgetShowPhotoView.tsx | 4 +- .../views/editor/CameraWidgetEditorView.tsx | 12 +- .../CameraWidgetEffectListItemView.tsx | 38 +- .../CameraWidgetEffectListView.tsx | 2 +- .../NotificationClubGiftBubbleView.tsx | 2 +- .../furniture/FurnitureAreaHideView.tsx | 58 - .../furniture/FurnitureWidgetsView.tsx | 2 - .../room-tools/RoomToolsWidgetView.tsx | 147 +- src/components/toolbar/ToolbarView.tsx | 10 +- .../CameraWidgetView.css} | 0 src/css/NotificationCenterView.css | 2 +- src/hooks/camera/useCamera.ts | 12 +- src/hooks/rooms/useRoom.ts | 73 +- src/hooks/rooms/widgets/furniture/index.ts | 1 - .../furniture/useFurnitureAreaHideWidget.ts | 93 - src/index.css | 1517 +++++++++++++++++ 23 files changed, 2625 insertions(+), 383 deletions(-) create mode 100644 src/chats.css delete mode 100644 src/components/room/widgets/furniture/FurnitureAreaHideView.tsx rename src/{components/camera/CameraWidgetView.scss => css/CameraWidgetView.css} (100%) delete mode 100644 src/hooks/rooms/widgets/furniture/useFurnitureAreaHideWidget.ts create mode 100644 src/index.css diff --git a/src/App.tsx b/src/App.tsx index ec9b037..2c7cbc1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,25 @@ -import { GetAssetManager, GetAvatarRenderManager, GetCommunication, GetConfiguration, GetLocalizationManager, GetRoomEngine, GetRoomSessionManager, GetSessionDataManager, GetSoundManager, GetStage, GetTexturePool, GetTicker, HabboWebTools, LegacyExternalInterface, LoadGameUrlEvent, NitroLogger, NitroVersion, PrepareRenderer } from '@nitrots/nitro-renderer'; +import +{ + GetAssetManager, + GetAvatarRenderManager, + GetCommunication, + GetConfiguration, + GetLocalizationManager, + GetRoomCameraWidgetManager, + GetRoomEngine, + GetRoomSessionManager, + GetSessionDataManager, + GetSoundManager, + GetStage, + GetTexturePool, + GetTicker, + HabboWebTools, + LegacyExternalInterface, + LoadGameUrlEvent, + NitroLogger, + NitroVersion, + PrepareRenderer, +} from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; import { GetUIVersion } from './api'; import { MainView } from './components/MainView'; @@ -44,32 +65,59 @@ export const App: FC<{}> = (props) => await GetConfiguration().init(); - GetTicker().maxFPS = GetConfiguration().getValue('system.fps.max', 24); - NitroLogger.LOG_DEBUG = GetConfiguration().getValue('system.log.debug', true); - NitroLogger.LOG_WARN = GetConfiguration().getValue('system.log.warn', false); - NitroLogger.LOG_ERROR = GetConfiguration().getValue('system.log.error', false); - NitroLogger.LOG_EVENTS = GetConfiguration().getValue('system.log.events', false); - NitroLogger.LOG_PACKETS = GetConfiguration().getValue('system.log.packets', false); - - const assetUrls = GetConfiguration().getValue('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( + 'system.fps.max', + 24, + ); + NitroLogger.LOG_DEBUG = GetConfiguration().getValue( + 'system.log.debug', + true, + ); + NitroLogger.LOG_WARN = GetConfiguration().getValue( + 'system.log.warn', + false, + ); + NitroLogger.LOG_ERROR = GetConfiguration().getValue( + 'system.log.error', + false, + ); + NitroLogger.LOG_EVENTS = GetConfiguration().getValue( + 'system.log.events', + false, + ); + NitroLogger.LOG_PACKETS = GetConfiguration().getValue( + 'system.log.packets', + false, ); + const assetUrls = + GetConfiguration() + .getValue('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 (
+ className={classNames( + 'w-full h-full overflow-hidden text-base bg-black', + !(window.devicePixelRatio % 1) && '[image-rendering:pixelated]', + )} + > {!isReady && } {isReady && }
diff --git a/src/chats.css b/src/chats.css new file mode 100644 index 0000000..c381e39 --- /dev/null +++ b/src/chats.css @@ -0,0 +1,856 @@ +.bubble-container { + transition: top 0.2s ease 0s; + + .chat-bubble { + border-image-slice: 17 6 6 29 fill; + border-image-width: 17px 6px 6px 29px; + border-image-outset: 2px 0px 0px 0px; + border-image-repeat: repeat repeat; + + &.type-0 { + + // normal + .message { + font-weight: 400; + } + } + + &.type-1 { + + // whisper + .message { + font-weight: 400; + font-style: italic; + color: #595959; + } + } + + &.type-2 { + + // shout + .message { + font-weight: 700; + } + } + + &.bubble-0 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_0_transparent.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png'); + bottom: -5px; + } + } + + &.bubble-1 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_1.png'); + + border-image-slice: 18 6 6 29 fill; + border-image-width: 18px 6px 6px 29px; + border-image-outset: 3px 0px 0px 0px; + + .user-container { + display: none; + } + + .username { + display: none; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png'); + } + } + + &.bubble-2, + &.bubble-31 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_2.png'); + + .user-container { + display: none; + } + + .username { + color: rgba($white, 1); + } + + .message { + color: rgba($white, 1) !important; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_2_31_pointer.png'); + height: 7px; + } + } + + &.bubble-3 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_3.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_3_pointer.png'); + } + } + + &.bubble-4 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_4.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_4_pointer.png'); + } + } + + &.bubble-5 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_5.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_5_pointer.png'); + } + } + + &.bubble-6 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_6.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_6_pointer.png'); + } + } + + &.bubble-7 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_7.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_7_pointer.png'); + } + } + + &.bubble-8 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_8.png'); + + border-image-slice: 20 6 6 27 fill; + border-image-width: 20px 6px 6px 27px; + border-image-outset: 5px 0px 0px 0px; + + .chat-content { + color: #fff; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_8_pointer.png'); + } + } + + &.bubble-9 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_9.png'); + + border-image-slice: 17 18 12 19 fill; + border-image-width: 17px 18px 12px 19px; + border-image-outset: 7px 7px 0px 9px; + + .chat-content { + margin-left: 20px; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_9_pointer.png'); + width: 7px; + height: 10px; + bottom: -6px; + } + } + + &.bubble-10 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_10.png'); + + border-image-slice: 29 18 8 37 fill; + border-image-width: 29px 18px 8px 37px; + border-image-outset: 12px 7px 1px 5px; + + .chat-content { + margin-left: 24px; + color: #fff; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_10_pointer.png'); + width: 7px; + height: 8px; + bottom: -3px; + } + } + + &.bubble-11 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_11.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_11_pointer.png'); + } + } + + &.bubble-12 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_12.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_12_pointer.png'); + } + } + + &.bubble-13 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_13.png'); + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_13_pointer.png'); + } + } + + &.bubble-14 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_14.png'); + + .chat-content { + color: #fff; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_14_pointer.png'); + } + } + + &.bubble-15 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_15.png'); + + .chat-content { + color: #fff; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_15_pointer.png'); + } + } + + &.bubble-16 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_16.png'); + + border-image-slice: 13 6 10 31 fill; + border-image-width: 13px 6px 10px 31px; + border-image-outset: 6px 0px 0px 0px; + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_16_pointer.png'); + height: 8px; + } + } + + &.bubble-17 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_17.png'); + + border-image-slice: 24 6 8 35 fill; + border-image-width: 24px 6px 8px 35px; + border-image-outset: 9px 0px 2px 5px; + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_17_pointer.png'); + } + } + + &.bubble-18 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_18.png'); + + border-image-slice: 7 16 8 16 fill; + border-image-width: 7px 16px 8px 16px; + border-image-outset: 3px 10px 2px 11px; + + .chat-content { + margin-left: 20px; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_18_pointer.png'); + height: 8px; + } + } + + &.bubble-19 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_19.png'); + + border-image-slice: 17 6 9 19 fill; + border-image-width: 17px 6px 9px 19px; + border-image-outset: 5px 0px 0px 8px; + + .chat-content { + margin-left: 20px; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_19_20_pointer.png'); + } + } + + &.bubble-20 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_20.png'); + + border-image-slice: 18 6 8 19 fill; + border-image-width: 18px 6px 8px 19px; + border-image-outset: 5px 0px 0px 8px; + + .chat-content { + margin-left: 20px; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_19_20_pointer.png'); + } + } + + &.bubble-21 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_21.png'); + + border-image-slice: 20 6 12 24 fill; + border-image-width: 20px 6px 12px 24px; + border-image-outset: 13px 2px 1px 3px; + + .chat-content { + margin-left: 20px; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_21_pointer.png'); + bottom: -4px; + } + } + + &.bubble-22 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_22.png'); + + border-image-slice: 18 19 11 33 fill; + border-image-width: 18px 19px 11px 33px; + border-image-outset: 7px 1px 1px 5px; + + .chat-content { + margin-left: 20px; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_22_pointer.png'); + } + } + + &.bubble-23 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_23.png'); + + border-image-slice: 16 6 7 32 fill; + border-image-width: 16px 6px 7px 32px; + border-image-outset: 5px 0px 0px 3px; + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_23_37_pointer.png'); + } + } + + &.bubble-24 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_24.png'); + + border-image-slice: 23 8 6 40 fill; + border-image-width: 23px 8px 6px 40px; + border-image-outset: 6px 0px 0px 6px; + + .chat-content { + margin-left: 30px; + color: #fff; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_24_pointer.png'); + bottom: -4px; + } + } + + &.bubble-25 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_25.png'); + + border-image-slice: 10 13 8 28 fill; + border-image-width: 10px 13px 8px 28px; + border-image-outset: 6px 3px 2px 0px; + + .chat-content { + color: #fff; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_25_pointer.png'); + height: 9px; + bottom: -7px; + } + } + + &.bubble-26 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_26.png'); + + border-image-slice: 16 9 8 29 fill; + border-image-width: 16px 9px 8px 29px; + border-image-outset: 2px 2px 2px 0px; + + .chat-content { + color: #c59432; + text-shadow: 1px 1px rgba(0, 0, 0, 0.3); + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_26_pointer.png'); + height: 10px; + bottom: -6px; + } + } + + &.bubble-27 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_27.png'); + + border-image-slice: 25 6 5 36 fill; + border-image-width: 25px 6px 5px 36px; + border-image-outset: 8px 0px 0px 5px; + + .chat-content { + margin-left: 30px; + color: #fff; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_27_pointer.png'); + } + } + + &.bubble-28 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_28.png'); + + border-image-slice: 16 7 7 27 fill; + border-image-width: 16px 7px 7px 27px; + border-image-outset: 3px 0px 0px 0px; + + .chat-content { + margin-left: 25px; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_28_pointer.png'); + } + } + + &.bubble-29 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_29.png'); + + border-image-slice: 10 7 15 31 fill; + border-image-width: 10px 7px 15px 31px; + border-image-outset: 2px 0px 0px 1px; + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_29_pointer.png'); + bottom: -4px; + } + } + + &.bubble-30 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_30.png'); + + .user-container { + display: none; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_30_pointer.png'); + height: 7px; + } + } + + &.bubble-32 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_32.png'); + + border-image-slice: 15 7 7 30 fill; + border-image-width: 15px 7px 7px 30px; + border-image-outset: 2px 0px 0px 0px; + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_32_pointer.png'); + } + } + + &.bubble-33 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_33_34.png'); + + border-image-slice: 7 6 6 39 fill; + border-image-width: 7px 6px 6px 39px; + border-image-outset: 2px 0px 0px 0px; + + .user-container { + display: none; + } + + .chat-content { + margin-left: 35px; + } + + &::before { + content: ' '; + position: absolute; + width: 19px; + height: 19px; + left: 9px; + top: 2px; + background: url('@/assets/images/chat/chatbubbles/bubble_33_extra.png'); + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png'); + } + } + + &.bubble-34 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_33_34.png'); + + border-image-slice: 7 6 6 39 fill; + border-image-width: 7px 6px 6px 39px; + border-image-outset: 2px 0px 0px 0px; + + &.type-1 { + .message { + font-style: unset; + color: inherit; + } + } + + .user-container { + display: none; + } + + .username { + display: none; + } + + .chat-content { + margin-left: 35px; + } + + &::before { + content: ' '; + position: absolute; + width: 19px; + height: 19px; + left: 9px; + top: 2px; + background: url('@/assets/images/chat/chatbubbles/bubble_34_extra.png'); + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_0_1_33_34_pointer.png'); + } + } + + &.bubble-35 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_35.png'); + + border-image-slice: 19 6 5 29 fill; + border-image-width: 19px 6px 5px 29px; + border-image-outset: 4px 0px 0px 0px; + + .user-container { + display: none; + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_35_pointer.png'); + } + } + + &.bubble-36 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_36.png'); + + border-image-slice: 17 7 5 30 fill; + border-image-width: 17px 7px 5px 30px; + border-image-outset: 2px 0px 0px 0px; + + .user-container { + display: none; + } + + &::before { + content: ' '; + position: absolute; + width: 13px; + height: 18px; + left: 5px; + top: 2px; + background: url('@/assets/images/chat/chatbubbles/bubble_36_extra.png'); + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_36_pointer.png'); + } + } + + &.bubble-37 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_37.png'); + + border-image-slice: 16 6 7 32 fill; + border-image-width: 16px 6px 7px 32px; + border-image-outset: 5px 0px 0px 3px; + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_23_37_pointer.png'); + } + } + + &.bubble-38 { + border-image-source: url('@/assets/images/chat/chatbubbles/bubble_38.png'); + + border-image-slice: 17 7 5 30 fill; + border-image-width: 17px 7px 5px 30px; + border-image-outset: 2px 0px 0px 0px; + + .user-container { + display: none; + } + + &::before { + content: ' '; + position: absolute; + width: 19px; + height: 19px; + left: 3px; + top: 2px; + background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png'); + } + + .pointer { + background: url('@/assets/images/chat/chatbubbles/bubble_38_pointer.png'); + } + } + + .user-container { + z-index: 3; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + max-height: 24px; + overflow: hidden; + + .user-image { + position: absolute; + top: -15px; + left: -9.25px; + width: 45px; + height: 65px; + background-repeat: no-repeat; + background-position: center; + transform: scale(0.5); + overflow: hidden; + image-rendering: initial; + } + } + + .chat-content { + padding: 5px 6px 5px 4px; + margin-left: 27px; + line-height: 1; + color: $black; + min-height: 25px; + } + } +} + +.chat-bubble-icon { + background-repeat: no-repeat; + background-position: center; + + &.bubble-0 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_0.png'); + } + + &.bubble-1 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_1.png'); + height: 25px; + } + + &.bubble-2, + &.bubble-31 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_2.png'); + } + + &.bubble-3 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_3.png'); + } + + &.bubble-4 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_4.png'); + } + + &.bubble-5 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_5.png'); + } + + &.bubble-6 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_6.png'); + } + + &.bubble-7 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_7.png'); + } + + &.bubble-8 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_8.png'); + } + + &.bubble-9 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_9.png'); + } + + &.bubble-10 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_10.png'); + } + + &.bubble-11 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_11.png'); + } + + &.bubble-12 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_12.png'); + } + + &.bubble-13 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_13.png'); + } + + &.bubble-14 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_14.png'); + } + + &.bubble-15 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_15.png'); + } + + &.bubble-16 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_16.png'); + } + + &.bubble-17 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_17.png'); + } + + &.bubble-18 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_18.png'); + } + + &.bubble-19 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_19.png'); + } + + &.bubble-20 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_20.png'); + } + + &.bubble-21 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_21.png'); + } + + &.bubble-22 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_22.png'); + } + + &.bubble-23 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_23.png'); + } + + &.bubble-24 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_24.png'); + } + + &.bubble-25 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_25.png'); + } + + &.bubble-26 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_26.png'); + } + + &.bubble-27 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_27.png'); + } + + &.bubble-28 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_28.png'); + } + + &.bubble-29 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_29.png'); + } + + &.bubble-30 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_30.png'); + } + + &.bubble-32 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_32.png'); + } + + &.bubble-33 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_33_34.png'); + + &::before { + content: ' '; + position: absolute; + width: 19px; + height: 19px; + left: 11px; + top: 10px; + background: url('@/assets/images/chat/chatbubbles/bubble_33_extra.png'); + } + } + + &.bubble-34 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_33_34.png'); + + &::before { + content: ' '; + position: absolute; + width: 19px; + height: 19px; + left: 11px; + top: 10px; + background: url('@/assets/images/chat/chatbubbles/bubble_34_extra.png'); + } + } + + &.bubble-35 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_35.png'); + } + + &.bubble-36 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_36.png'); + + &::before { + content: ' '; + position: absolute; + width: 13px; + height: 18px; + left: 13px; + top: 10px; + background: url('@/assets/images/chat/chatbubbles/bubble_36_extra.png'); + } + } + + &.bubble-37 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_35.png'); + } + + &.bubble-38 { + background-image: url('@/assets/images/chat/chatbubbles/bubble_38.png'); + + &::before { + content: ' '; + position: absolute; + width: 19px; + height: 19px; + left: 11px; + top: 10px; + background: url('@/assets/images/chat/chatbubbles/bubble_38_extra.png'); + } + } +} diff --git a/src/common/index.ts b/src/common/index.ts index 10f2bf3..2dc9a26 100644 --- a/src/common/index.ts +++ b/src/common/index.ts @@ -17,5 +17,6 @@ export * from './card/tabs'; export * from './draggable-window'; export * from './layout'; export * from './layout/limited-edition'; +export * from './transitions'; export * from './types'; export * from './utils'; diff --git a/src/common/layout/LayoutNotificationBubbleView.tsx b/src/common/layout/LayoutNotificationBubbleView.tsx index bda4d47..1f6e3ac 100644 --- a/src/common/layout/LayoutNotificationBubbleView.tsx +++ b/src/common/layout/LayoutNotificationBubbleView.tsx @@ -1,6 +1,6 @@ -import { AnimatePresence, motion } from 'framer-motion'; import { FC, useEffect, useMemo, useState } from 'react'; import { Flex, FlexProps } from '../Flex'; +import { TransitionAnimation, TransitionAnimationTypes } from '../transitions'; export interface LayoutNotificationBubbleViewProps extends FlexProps { @@ -16,7 +16,7 @@ export const LayoutNotificationBubbleView: FC 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 }, [ fadesOut, timeoutMs, onClose ]); return ( - - { isVisible && - - - } - + + + ); -}; \ No newline at end of file +}; diff --git a/src/common/layout/LayoutRoomPreviewerView.tsx b/src/common/layout/LayoutRoomPreviewerView.tsx index c4c12e5..daceeef 100644 --- a/src/common/layout/LayoutRoomPreviewerView.tsx +++ b/src/common/layout/LayoutRoomPreviewerView.tsx @@ -1,16 +1,12 @@ import { GetRenderer, GetTicker, NitroTicker, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer'; -import { FC, MouseEvent, ReactNode, useEffect, useRef } from 'react'; +import { FC, MouseEvent, useEffect, useRef } from 'react'; -export interface LayoutRoomPreviewerViewProps -{ +export const LayoutRoomPreviewerView: FC<{ roomPreviewer: RoomPreviewer; height?: number; - children?: ReactNode; -} - -export const LayoutRoomPreviewerView: FC = props => +}> = props => { - const { roomPreviewer = null, height = 0, children = null } = props; + const { roomPreviewer = null, height = 0 } = props; const elementRef = useRef(); const onClick = (event: MouseEvent) => @@ -32,24 +28,24 @@ export const LayoutRoomPreviewerView: FC = 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 = props = update(GetTicker()); }); + roomPreviewer.getRoomCanvas(width, height); + resizeObserver.observe(elementRef.current); return () => @@ -78,9 +76,14 @@ export const LayoutRoomPreviewerView: FC = props = }, [ roomPreviewer, elementRef, height ]); return ( -
-
- { children } -
+
); -}; \ No newline at end of file +}; diff --git a/src/components/MainView.tsx b/src/components/MainView.tsx index 99b728d..b86ac44 100644 --- a/src/components/MainView.tsx +++ b/src/components/MainView.tsx @@ -1,6 +1,6 @@ import { AddLinkEventTracker, GetCommunication, HabboWebTools, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer'; import { FC, useEffect, useState } from 'react'; -import { AnimatePresence, motion } from 'framer-motion'; +import { TransitionAnimation, TransitionAnimationTypes } from '../common'; import { useNitroEvent } from '../hooks'; import { AchievementsView } from './achievements/AchievementsView'; import { AvatarEditorView } from './avatar-editor'; @@ -80,15 +80,9 @@ export const MainView: FC<{}> = props => return ( <> - - { landingViewVisible && - - - } - + + + diff --git a/src/components/camera/CameraWidgetView.tsx b/src/components/camera/CameraWidgetView.tsx index 68e394e..d4221e8 100644 --- a/src/components/camera/CameraWidgetView.tsx +++ b/src/components/camera/CameraWidgetView.tsx @@ -16,6 +16,7 @@ export const CameraWidgetView: FC<{}> = props => const [ base64Url, setSavedPictureUrl ] = useState(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) && processAction('close') } onEdit={ () => processAction('edit') } onDelete={ () => processAction('delete') } /> } - { (mode === MODE_EDITOR) && processAction('close') } onCancel={ () => processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } availableEffects={ availableEffects } /> } - { (mode === MODE_CHECKOUT) && processAction('close') } onCancelClick={ () => processAction('editor_cancel') } price={ price }> } + { (mode === MODE_CAPTURE) && processAction('close') } onDelete={ () => processAction('delete') } onEdit={ () => processAction('edit') } /> } + { (mode === MODE_EDITOR) && processAction('editor_cancel') } onCheckout={ checkoutPictureUrl } onClose={ () => processAction('close') } /> } + { (mode === MODE_CHECKOUT) && processAction('editor_cancel') } onCloseClick={ () => processAction('close') }> } ); }; diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx index 4f4a59f..08d3a29 100644 --- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx +++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx @@ -55,10 +55,10 @@ export const CameraWidgetShowPhotoView: FC = pro { currentImage.m && currentImage.m.length && { currentImage.m } } - +
{ (currentImage.n || '') } { new Date(currentImage.t * 1000).toLocaleDateString() } - +
{ (currentPhotos.length > 1) && diff --git a/src/components/camera/views/editor/CameraWidgetEditorView.tsx b/src/components/camera/views/editor/CameraWidgetEditorView.tsx index d9973c0..68a4399 100644 --- a/src/components/camera/views/editor/CameraWidgetEditorView.tsx +++ b/src/components/camera/views/editor/CameraWidgetEditorView.tsx @@ -195,7 +195,7 @@ export const CameraWidgetEditorView: FC = props => - + @@ -205,14 +205,12 @@ export const CameraWidgetEditorView: FC = props => { LocalizeText('camera.effect.name.' + selectedEffectName) }
{ state.valueNow }
} + max={ 1 } step={ 0.01 } - value={ getCurrentEffect.alpha } - onChange={ event => setSelectedEffectAlpha(event) } /> - + value={ getCurrentEffect.strength } + onChange={ event => setSelectedEffectAlpha(event) } + renderThumb={ ({ key, ...props }, state) =>
{ state.valueNow }
} /> }
diff --git a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx index d090889..cda9f19 100644 --- a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx +++ b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListItemView.tsx @@ -19,22 +19,26 @@ export const CameraWidgetEffectListItemView: FC (!isActive && selectEffect()) }> - { isActive && - } - { !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) && -
- -
} - { isLocked && - -
- -
- { effect.minLevel } - } - + <> + asassa + + (!isActive && selectEffect()) }> + { isActive && + } + { !isLocked && (thumbnailUrl && thumbnailUrl.length > 0) && +
+ +
} + { isLocked && + +
+ +
+ { effect.minLevel } + } + + ); }; diff --git a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx index 1cceefd..a006a79 100644 --- a/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx +++ b/src/components/camera/views/editor/effect-list/CameraWidgetEffectListView.tsx @@ -24,7 +24,7 @@ export const CameraWidgetEffectListView: FC = p const thumbnailUrl = (thumbnails.find(thumbnail => (thumbnail.effectName === effect.name))); const isActive = (selectedEffects.findIndex(selectedEffect => (selectedEffect.effect.name === effect.name)) > -1); - return myLevel) } selectEffect={ () => processAction('select_effect', effect.name) } removeEffect={ () => processAction('remove_effect', effect.name) } />; + return myLevel) } removeEffect={ () => processAction('remove_effect', effect.name) } selectEffect={ () => processAction('select_effect', effect.name) } thumbnailUrl={ ((thumbnailUrl && thumbnailUrl.thumbnailUrl) || null) } />; }) } ); diff --git a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx index b1080a0..9170ebf 100644 --- a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx +++ b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx @@ -12,7 +12,7 @@ export const NotificationClubGiftBubbleView: FC +
{ LocalizeText('notifications.text.club_gift') } diff --git a/src/components/room/widgets/furniture/FurnitureAreaHideView.tsx b/src/components/room/widgets/furniture/FurnitureAreaHideView.tsx deleted file mode 100644 index 8b7bd82..0000000 --- a/src/components/room/widgets/furniture/FurnitureAreaHideView.tsx +++ /dev/null @@ -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 ( - - - - - - { LocalizeText('wiredfurni.params.area_selection') } - { LocalizeText('wiredfurni.params.area_selection.info') } - - - - - - - - { LocalizeText('widget.areahide.options') } - - setWallItems(event.target.checked ? true : false) } /> - { LocalizeText('widget.areahide.options.wallitems') } - - - setInverted(event.target.checked ? true : false) } /> - - { LocalizeText('widget.areahide.options.invert') } - { LocalizeText('widget.areahide.options.invert.info') } - - - - setInvisibility(event.target.checked ? true : false) } /> - - { LocalizeText('widget.areahide.options.invisibility') } - { LocalizeText('widget.areahide.options.invisibility.info') } - - - - - - - ); -}; \ No newline at end of file diff --git a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx index 807846a..8c6dba2 100644 --- a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx +++ b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx @@ -1,5 +1,4 @@ import { FC } from 'react'; -import { FurnitureAreaHideView } from './FurnitureAreaHideView'; import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView'; import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView'; import { FurnitureCraftingView } from './FurnitureCraftingView'; @@ -43,7 +42,6 @@ export const FurnitureWidgetsView: FC<{}> = props => - ); }; diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx index b504d97..9b65104 100644 --- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -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(false); - const [roomName, setRoomName] = useState(null); - const [roomOwner, setRoomOwner] = useState(null); - const [roomTags, setRoomTags] = useState(null); - const [isOpen, setIsOpen] = useState(false); +export const RoomToolsWidgetView: FC<{}> = props => +{ + const [ isZoomedIn, setIsZoomedIn ] = useState(false); + const [ roomName, setRoomName ] = useState(null); + const [ roomOwner, setRoomOwner ] = useState(null); + const [ roomTags, setRoomTags ] = useState(null); + const [ isOpen, setIsOpen ] = useState(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, event => { + useMessageEvent(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 (
-
handleToolClick('settings')} - /> -
handleToolClick('zoom')} - /> -
handleToolClick('chat_history')} - /> - {navigatorData?.canRate && ( -
handleToolClick('like_room')} - /> - )} +
handleToolClick('settings') } /> +
handleToolClick('zoom') } /> +
handleToolClick('chat_history') } /> + { navigatorData.canRate && +
handleToolClick('like_room') } /> }
- - {isOpen && ( - -
-
-
- {roomName} - {roomOwner} -
- {roomTags?.length > 0 && ( -
- {roomTags.map((tag, index) => ( - handleToolClick('navigator_search_tag', tag)}> - #{tag} - - ))} -
- )} -
+ +
+
+
+ { roomName } + { roomOwner }
- - )} - + { roomTags && roomTags.length > 0 && +
+ { roomTags.map((tag, index) => handleToolClick('navigator_search_tag', tag) }>#{ tag }) } +
} +
+
+
); -}; \ No newline at end of file +}; diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index 5f97b58..150425c 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -1,8 +1,7 @@ import { CreateLinkEvent, Dispose, DropBounce, EaseOut, GetSessionDataManager, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer'; -import { AnimatePresence, motion } from 'framer-motion'; import { FC, useState } from 'react'; import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api'; -import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common'; +import { Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common'; import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks'; import { ToolbarItemView } from './ToolbarItemView'; import { ToolbarMeView } from './ToolbarMeView'; @@ -65,10 +64,9 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => return ( <> - { isMeExpanded && - - } - + + + diff --git a/src/components/camera/CameraWidgetView.scss b/src/css/CameraWidgetView.css similarity index 100% rename from src/components/camera/CameraWidgetView.scss rename to src/css/CameraWidgetView.css diff --git a/src/css/NotificationCenterView.css b/src/css/NotificationCenterView.css index 5a6bd1a..af7ba41 100644 --- a/src/css/NotificationCenterView.css +++ b/src/css/NotificationCenterView.css @@ -41,7 +41,7 @@ padding: 6px 5px; pointer-events: all; padding: 10px; - background-color: #212121; + background-color: #262626; box-shadow: inset 0 5px rgba(38,38,57,.6), inset 0 -4px rgba(25,25,37,.6); font-size: .7875rem; border-radius: 0.5rem; diff --git a/src/hooks/camera/useCamera.ts b/src/hooks/camera/useCamera.ts index 45cb8ea..e236fa2 100644 --- a/src/hooks/camera/useCamera.ts +++ b/src/hooks/camera/useCamera.ts @@ -19,6 +19,7 @@ const useCameraState = () => useMessageEvent(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); \ No newline at end of file +export const useCamera = () => useBetween(useCameraState); diff --git a/src/hooks/rooms/useRoom.ts b/src/hooks/rooms/useRoom.ts index 540f2aa..743ce87 100644 --- a/src/hooks/rooms/useRoom.ts +++ b/src/hooks/rooms/useRoom.ts @@ -6,20 +6,20 @@ import { useNitroEvent, useUiEvent } from '../events'; const useRoomState = () => { - const [ roomSession, setRoomSession ] = useState(null); - const [ roomBackground, setRoomBackground ] = useState(null); - const [ roomFilter, setRoomFilter ] = useState(null); - const [ originalRoomBackgroundColor, setOriginalRoomBackgroundColor ] = useState(0); + const [roomSession, setRoomSession] = useState(null); + const [roomBackground, setRoomBackground] = useState(null); + const [roomFilter, setRoomFilter] = useState(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.CLEAR_PREVIEW, event => { - if(!roomBackground) return; + if (!roomBackground) return; roomBackground.tint = originalRoomBackgroundColor; }); useNitroEvent(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.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(roomId, RoomVariableEnum.ROOM_MIN_X) || 0); const maxX = (roomEngine.getRoomInstanceVariable(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); \ No newline at end of file +export const useRoom = () => useBetween(useRoomState); diff --git a/src/hooks/rooms/widgets/furniture/index.ts b/src/hooks/rooms/widgets/furniture/index.ts index d9eccba..37fa573 100644 --- a/src/hooks/rooms/widgets/furniture/index.ts +++ b/src/hooks/rooms/widgets/furniture/index.ts @@ -1,4 +1,3 @@ -export * from './useFurnitureAreaHideWidget'; export * from './useFurnitureBackgroundColorWidget'; export * from './useFurnitureBadgeDisplayWidget'; export * from './useFurnitureContextMenuWidget'; diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureAreaHideWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureAreaHideWidget.ts deleted file mode 100644 index a454401..0000000 --- a/src/hooks/rooms/widgets/furniture/useFurnitureAreaHideWidget.ts +++ /dev/null @@ -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(-1); - const [ category, setCategory ] = useState(-1); - const [ isOn, setIsOn ] = useState(false); - const [ rootX, setRootX ] = useState(0); - const [ rootY, setRootY ] = useState(0); - const [ width, setWidth ] = useState(0); - const [ length, setLength ] = useState(0); - const [ invisibility, setInvisibility ] = useState(false); - const [ wallItems, setWallItems ] = useState(false); - const [ inverted, setInverted ] = useState(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.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(RoomObjectVariable.FURNITURE_AREA_HIDE_ROOT_X) ?? 0); - setRootY(model.getValue(RoomObjectVariable.FURNITURE_AREA_HIDE_ROOT_Y) ?? 0); - setWidth(model.getValue(RoomObjectVariable.FURNITURE_AREA_HIDE_WIDTH) ?? 0); - setLength(model.getValue(RoomObjectVariable.FURNITURE_AREA_HIDE_LENGTH) ?? 0); - setInvisibility(model.getValue(RoomObjectVariable.FURNITURE_AREA_HIDE_INVISIBILITY) === 1); - setWallItems(model.getValue(RoomObjectVariable.FURNITURE_AREA_HIDE_WALL_ITEMS) === 1); - setInverted(model.getValue(RoomObjectVariable.FURNITURE_AREA_HIDE_INVERT) === 1); - }); - - useNitroEvent(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; \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..93ff440 --- /dev/null +++ b/src/index.css @@ -0,0 +1,1517 @@ +@font-face { + font-family: Ubuntu; + src: url("@/assets/webfonts/Ubuntu-C.ttf"); +} + +@tailwind base; +@tailwind components; +@tailwind utilities; + +html, +body { + padding: 0; + width: 100%; + height: 100%; + overflow: hidden; + -webkit-user-select: none; + user-select: none; + scrollbar-width: thin; +} + +*, +*:focus, +*:hover { + @apply outline-0; +} + +::-webkit-scrollbar { + width: .5rem +} + +::-webkit-scrollbar:horizontal { + height: .5rem +} + +::-webkit-scrollbar:not(:horizontal) { + width: .5rem +} + +::-webkit-scrollbar-track:horizontal { + border-bottom: .25rem solid rgba(0, 0, 0, .1) +} + +::-webkit-scrollbar-track:not(:horizontal) { + border-right: .25rem solid rgba(0, 0, 0, .1) +} + +::-webkit-scrollbar-thumb:horizontal { + border-bottom: .25rem solid rgba(30, 114, 149, .4) +} + +::-webkit-scrollbar-thumb:horizontal:hover { + border-bottom: .25rem solid rgba(30, 114, 149, .8) +} + +::-webkit-scrollbar-thumb:horizontal:active { + border-bottom: .25rem solid #185D79 +} + +::-webkit-scrollbar-thumb:not(:horizontal) { + border-right: .25rem solid rgba(30, 114, 149, .4) +} + +::-webkit-scrollbar-thumb:not(:horizontal):hover { + border-right: .25rem solid rgba(30, 114, 149, .8) +} + +::-webkit-scrollbar-thumb:not(:horizontal):active { + border-right: .25rem solid #185D79 +} + +::-webkit-scrollbar-corner { + background: rgba(0, 0, 0, .1) +} + +@layer components { + @keyframes blink { + + 0%, + 100% { + opacity: 1; + } + + 50% { + opacity: 0; + } + } + + @keyframes scale { + + 0%, + 100% { + transform: scale(1); + } + + 50% { + transform: scale(1.5); + } + } + + .dot { + position: absolute; + width: 2px; + height: 2px; + background-color: white; + animation: blink 2s infinite; + } + + .star { + position: absolute; + width: 10px; + height: 10px; + color: #ffffff; + + &:after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: currentColor; + width: 5px; + height: 5px; + -webkit-animation: blink 1s linear infinite; + animation: blink 1s linear infinite; + } + + .star-part { + position: absolute; + background-color: currentColor; + + &:nth-child(1) { + top: 0; + left: 50%; + width: 1px; + height: 100%; + transform: translateX(-50%); + } + + &:nth-child(2) { + top: 50%; + left: 0; + width: 100%; + height: 1px; + transform: translateY(-50%); + } + } + } + + .connecting-duck { + @apply absolute inset-0 m-auto; + background: url("@/assets/images/loading/connecting-duck-spritesheet.png") no-repeat top left; + width: 235px; + height: 127px; + animation: connecting-duck 1.5s infinite step-end; + transform: scale(0.5); + } + + @keyframes connecting-duck { + 0% { + background-position: 0 0; + width: 235px; + height: 127px; + } + + 15% { + background-position: 0 -132px; + width: 280px; + height: 151px; + } + + 30% { + background-position: 0 -288px; + width: 326px; + height: 174px; + } + + 45% { + background-position: 0 -467px; + width: 235px; + height: 127px; + } + + 60% { + background-position: 0 -599px; + width: 280px; + height: 151px; + } + + 75% { + background-position: 0 -755px; + width: 326px; + height: 174px; + } + + 90% { + background-position: 0 -934px; + width: 190px; + height: 104px; + } + } + + .toolbar { + @apply relative; + background: rgb(33, 33, 33); + background: linear-gradient(0deg, rgba(33, 33, 33, 0.9) 0%, rgba(51, 51, 51, 0.9) 100%); + + &::before { + content: ""; + display: block; + position: absolute; + top: 1px; + left: 0; + right: 0; + height: 2px; + background-color: rgba(255, 255, 255, 0.05); + } + + &::after { + content: ""; + display: block; + position: absolute; + bottom: 2px; + left: 0; + right: 0; + height: 2px; + background-color: rgba(0, 0, 0, 0.1); + } + } + + .avatar-image { + @apply pointer-events-none relative h-[130px] w-[90px] bg-[center_-8px] bg-no-repeat; + } + + .ubuntu-close-button { + @apply inline-block h-[20px] w-[19px] bg-transparent bg-[0px_0px] bg-no-repeat outline-0; + background-image: url("@/assets/images/ui/ubuntu-close-buttons.png"); + + &:hover { + @apply bg-[-38px]; + } + + &:active { + @apply bg-[-19px]; + } + } + + .nitro-icon { + @apply inline-block bg-transparent bg-center bg-no-repeat outline-0; + + &:hover { + @apply translate-x-[-1px] translate-y-[-1px] drop-shadow-hover + } + + &:active { + @apply transform-none filter-none + } + + &.icon-nitro-light { + background-image: url("@/assets/images/nitro/nitro-n-light.svg"); + } + + &.icon-nitro-dark { + background-image: url("@/assets/images/nitro/nitro-n-dark.svg"); + } + + &.icon-nitro-light, + &.icon-nitro-dark { + width: 100%; + height: 40px; + } + + &.icon-catalog { + background-image: url("@/assets/images/toolbar/icons/catalog.png"); + width: 37px; + height: 36px; + } + + &.icon-game { + background-image: url("@/assets/images/toolbar/icons/game.png"); + width: 44px; + height: 25px; + } + + &.icon-rooms { + background-image: url("@/assets/images/toolbar/icons/rooms.png"); + width: 44px; + height: 30px; + } + + &.icon-house { + background-image: url("@/assets/images/toolbar/icons/house.png"); + height: 30px; + width: 32px; + } + + &.gray { + opacity: 0.5; + } + + &.icon-inventory { + background-image: url("@/assets/images/toolbar/icons/inventory.png"); + height: 41px; + width: 44px; + } + + &.icon-modtools { + background-image: url("@/assets/images/toolbar/icons/modtools.png"); + height: 34px; + width: 29px; + } + + &.icon-friendall { + background-image: url("@/assets/images/toolbar/icons/friend_all.png"); + height: 33px; + width: 32px; + } + + &.icon-friendsearch { + background-image: url("@/assets/images/toolbar/icons/friend_search.png"); + height: 33px; + width: 29px; + } + + &.icon-sendmessage { + background-image: url("@/assets/images/toolbar/icons/sendmessage.png"); + width: 20px; + height: 21px; + } + + &.icon-me-talents { + background-image: url("@/assets/images/toolbar/icons/me-menu/talents.png"); + width: 32px; + height: 30px; + } + + &.icon-me-helper-tool { + background-image: url("@/assets/images/toolbar/icons/me-menu/helper-tool.png"); + width: 32px; + height: 30px; + } + + &.icon-me-profile { + background-image: url("@/assets/images/toolbar/icons/me-menu/profile.png"); + width: 32px; + height: 30px; + } + + &.icon-me-forums { + background-image: url("@/assets/images/toolbar/icons/me-menu/forums.png"); + width: 32px; + height: 30px; + } + + &.icon-me-rooms { + background-image: url("@/assets/images/toolbar/icons/me-menu/my-rooms.png"); + width: 30px; + height: 30px; + } + + &.icon-me-achievements { + background-image: url("@/assets/images/toolbar/icons/me-menu/achievements.png"); + width: 31px; + height: 30px; + } + + &.icon-me-clothing { + background-image: url("@/assets/images/toolbar/icons/me-menu/clothing.png"); + width: 27px; + height: 30px; + } + + &.icon-me-settings { + background-image: url("@/assets/images/toolbar/icons/me-menu/cog.png"); + width: 28px; + height: 34px; + } + + &.icon-cog { + background: url("@/assets/images/icons/icon_cog.png"); + width: 14px; + height: 15px; + } + + &.icon-help { + background: url("@/assets/images/icons/help.png"); + width: 13px; + height: 23px; + } + + &.icon-joinroom { + background-image: url("@/assets/images/toolbar/icons/joinroom.png"); + width: 21px; + height: 21px; + } + + &.icon-habbo { + background-image: url("@/assets/images/toolbar/icons/habbo.png"); + width: 28px; + height: 28px; + } + + &.icon-camera { + background-image: url("@/assets/images/toolbar/icons/camera.png"); + width: 38px; + height: 45px; + } + + &.icon-message { + background-image: url("@/assets/images/toolbar/icons/message.png"); + width: 36px; + height: 32px; + + &.is-unseen { + background-image: url("@/assets/images/toolbar/icons/message_unsee.gif"); + } + } + + &.icon-wired-trigger { + background-image: url("@/assets/images/wired/icon_trigger.png"); + width: 13px; + height: 14px; + } + + &.icon-wired-condition { + background-image: url("@/assets/images/wired/icon_condition.png"); + width: 13px; + height: 14px; + } + + &.icon-wired-action { + background-image: url("@/assets/images/wired/icon_action.png"); + width: 13px; + height: 14px; + } + + &.chatstyles-icon { + background-image: url("@/assets/images/chat/styles-icon.png"); + width: 17px; + height: 19px; + filter: grayscale(100%); + + &:hover { + filter: grayscale(0%); + } + } + + &.pencil-icon { + background-image: url("@/assets/images/infostand/pencil-icon.png"); + width: 17px; + height: 18px; + } + + &.disk-icon { + background-image: url("@/assets/images/infostand/disk-icon.png"); + width: 14px; + height: 14px; + } + + &.disk-creator { + background-image: url("@/assets/images/infostand/disk-creator.png"); + width: 14px; + height: 14px; + } + + &.trade-locked-icon { + background-image: url("@/assets/images/inventory/trading/locked-icon.png"); + width: 29px; + height: 43px; + } + + &.trade-unlocked-icon { + background-image: url("@/assets/images/inventory/trading/unlocked-icon.png"); + width: 29px; + height: 43px; + } + + &.modtool-room-icon { + background-image: url("@/assets/images/modtool/room.png"); + width: 20px; + height: 15px; + } + + &.modtool-chatlog-icon { + background-image: url("@/assets/images/modtool/chatlog.gif"); + width: 20px; + height: 15px; + } + + &.modtool-user-icon { + background-image: url("@/assets/images/modtool/user.gif"); + width: 20px; + height: 15px; + } + + &.modtool-reports-icon { + background-image: url("@/assets/images/modtool/reports.png"); + width: 20px; + height: 15px; + } + + &.modtool-wrench-icon { + background-image: url("@/assets/images/modtool/wrench.gif"); + width: 20px; + height: 15px; + } + + &.modtool-key-icon { + background-image: url("@/assets/images/modtool/key.gif"); + width: 20px; + height: 15px; + } + + &.icon-catalogue-hc_small { + background-image: url("@/assets/images/catalog/hc_small.png"); + height: 17px; + width: 31px; + } + + &.icon-catalogue-hc_big { + background: url("@/assets/images/catalog/hc_big.png"); + width: 68px; + height: 40px; + } + + &.icon-sign-exclamation { + background: url("@/assets/images/icons/sign-exclamation.png"); + width: 7px; + height: 17px; + } + + &.icon-sign-heart { + background: url("@/assets/images/icons/sign-heart.png"); + width: 15px; + height: 13px; + } + + &.icon-sign-red { + background: url("@/assets/images/icons/sign-red.png"); + width: 11px; + height: 19px; + } + + &.icon-sign-yellow { + background: url("@/assets/images/icons/sign-yellow.png"); + width: 11px; + height: 19px; + } + + &.icon-sign-skull { + background: url("@/assets/images/icons/sign-skull.png"); + width: 12px; + height: 12px; + } + + &.icon-sign-smile { + background: url("@/assets/images/icons/sign-smile.png"); + width: 7px; + height: 14px; + } + + &.icon-sign-soccer { + background: url("@/assets/images/icons/sign-soccer.png"); + width: 20px; + height: 20px; + } + + &.icon-house-small { + background: url("@/assets/images/icons/house-small.png"); + width: 19px; + height: 14px; + } + + &.icon-camera-small { + background: url("@/assets/images/icons/camera-small.png"); + width: 17px; + height: 15px; + } + + &.icon-small-room { + background: url("@/assets/images/icons/small-room.png"); + width: 17px; + height: 16px; + } + + &.icon-cog { + background: url("@/assets/images/icons/cog.png"); + width: 21px; + height: 21px; + } + + &.icon-chat-history { + background: url("@/assets/images/icons/chat-history.png"); + width: 17px; + height: 21px; + } + + &.icon-room-link { + background: url("@/assets/images/icons/room-link.png"); + width: 17px; + height: 15px; + } + + &.icon-zoom-more { + background: url("@/assets/images/icons/zoom-more.png"); + width: 12px; + height: 22px; + } + + &.icon-zoom-less { + background: url("@/assets/images/icons/zoom-less.png"); + width: 12px; + height: 22px; + } + + &.icon-like-room { + background: url("@/assets/images/icons/like-room.png"); + width: 20px; + height: 22px; + } + + &.icon-arrows { + background: url("@/assets/images/icons/arrows.png"); + width: 17px; + height: 15px; + } + + &.icon-camera-colormatrix { + background: url("@/assets/images/icons/camera-colormatrix.png"); + width: 32px; + height: 21px; + } + + &.icon-camera-composite { + background: url("@/assets/images/icons/camera-composite.png"); + width: 32px; + height: 21px; + } + + &.icon-pf-online { + background: url("@/assets/images/profile/icons/online.gif"); + width: 40px; + height: 16px; + } + + &.icon-pf-offline { + background: url("@/assets/images/profile/icons/offline.png"); + width: 39px; + height: 16px; + } + + &.icon-pf-tick { + background: url("@/assets/images/profile/icons/tick.png"); + width: 11px; + height: 10px; + } + + &.icon-group-type-0 { + background: url("@/assets/images/groups/icons/grouptype_icon_0.png"); + width: 16px; + height: 16px; + } + + &.icon-group-type-1 { + background: url("@/assets/images/groups/icons/grouptype_icon_1.png"); + width: 16px; + height: 16px; + } + + &.icon-group-type-2 { + background: url("@/assets/images/groups/icons/grouptype_icon_2.png"); + width: 16px; + height: 16px; + } + + &.icon-group-decorate { + background: url("@/assets/images/groups/icons/group_decorate_icon.png"); + width: 15px; + height: 15px; + } + + &.icon-group-member { + background: url("@/assets/images/groups/icons/group_icon_big_member.png"); + width: 20px; + height: 20px; + } + + &.icon-group-admin { + background: url("@/assets/images/groups/icons/group_icon_big_admin.png"); + width: 20px; + height: 20px; + } + + &.icon-group-owner { + background: url("@/assets/images/groups/icons/group_icon_big_owner.png"); + width: 20px; + height: 20px; + } + + &.icon-group-favorite { + background: url("@/assets/images/groups/icons/group_favorite.png"); + width: 14px; + height: 14px; + } + + &.icon-group-not-favorite { + background: url("@/assets/images/groups/icons/group_notfavorite.png"); + width: 14px; + height: 14px; + } + + &.icon-group-small-admin { + background: url("@/assets/images/groups/icons/group_icon_admin.png"); + width: 11px; + height: 13px; + } + + &.icon-group-small-not-admin { + background: url("@/assets/images/groups/icons/group_icon_not_admin.png"); + width: 11px; + height: 13px; + } + + &.icon-group-small-owner { + background: url("@/assets/images/groups/icons/group_icon_small_owner.png"); + width: 13px; + height: 13px; + } + + &.icon-navigator-info { + background: url("@/assets/images/navigator/icons/info.png"); + width: 18px; + height: 18px; + } + + &.icon-navigator-room-locked { + background: url("@/assets/images/navigator/icons/room_locked.png"); + width: 13px; + height: 16px; + } + + &.icon-navigator-room-password { + background: url("@/assets/images/navigator/icons/room_password.png"); + width: 13px; + height: 16px; + } + + &.icon-navigator-room-invisible { + background: url("@/assets/images/navigator/icons/room_invisible.png"); + width: 13px; + height: 16px; + } + + &.icon-navigator-room-group { + background: url("@/assets/images/navigator/icons/room_group.png"); + width: 13px; + height: 11px; + } + + &.icon-youtube-next { + background: url("@/assets/images/room-widgets/youtube-widget/next.png"); + width: 21px; + height: 16px; + } + + &.icon-youtube-prev { + background: url("@/assets/images/room-widgets/youtube-widget/prev.png"); + width: 21px; + height: 16px; + } + + &.icon-hc-banner { + background: url("@/assets/images/catalog/hc_big.png"); + width: 68px; + height: 40px; + } + + &.icon-set-tile { + background-image: url("@/assets/images/floorplaneditor/icon-tile-set.png"); + width: 40px; + height: 40px; + } + + &.icon-unset-tile { + background-image: url("@/assets/images/floorplaneditor/icon-tile-unset.png"); + width: 40px; + height: 40px; + } + + &.icon-increase-height { + background-image: url("@/assets/images/floorplaneditor/icon-tile-up.png"); + width: 40px; + height: 40px; + } + + &.icon-decrease-height { + background-image: url("@/assets/images/floorplaneditor/icon-tile-down.png"); + width: 40px; + height: 40px; + } + + &.icon-set-door { + background-image: url("@/assets/images/floorplaneditor/icon-door.png"); + width: 40px; + height: 40px; + } + + &.icon-door-direction-0 { + background-image: url("@/assets/images/floorplaneditor/door-direction-0.png"); + width: 80px; + height: 45px; + } + + &.icon-door-direction-1 { + background-image: url("@/assets/images/floorplaneditor/door-direction-1.png"); + width: 80px; + height: 45px; + } + + &.icon-door-direction-2 { + background-image: url("@/assets/images/floorplaneditor/door-direction-2.png"); + width: 80px; + height: 45px; + } + + &.icon-door-direction-3 { + background-image: url("@/assets/images/floorplaneditor/door-direction-3.png"); + width: 80px; + height: 45px; + } + + &.icon-door-direction-4 { + background-image: url("@/assets/images/floorplaneditor/door-direction-4.png"); + width: 80px; + height: 45px; + } + + &.icon-door-direction-5 { + background-image: url("@/assets/images/floorplaneditor/door-direction-5.png"); + width: 80px; + height: 45px; + } + + &.icon-door-direction-6 { + background-image: url("@/assets/images/floorplaneditor/door-direction-6.png"); + width: 80px; + height: 45px; + } + + &.icon-door-direction-7 { + background-image: url("@/assets/images/floorplaneditor/door-direction-7.png"); + width: 80px; + height: 45px; + } + + &.icon-tickets { + background-image: url("@/assets/images/icons/tickets.png"); + width: 17px; + height: 17px; + } + + &.icon-user { + background-image: url("@/assets/images/icons/user.png"); + width: 18px; + height: 19px; + } + + &.icon-loading { + background-image: url("@/assets/images/ui/loading_icon.png"); + + &.with-size { + width: 16px; + height: 16px; + } + } + } +} + +.unique-item { + .unique-bg-override { + @apply z-[2] bg-center bg-no-repeat; + } + + &:before { + @apply absolute z-[1] size-full bg-center bg-no-repeat [content:""]; + background-image: url("@/assets/images/unique/grid-bg.png"); + } + + &:after { + @apply absolute bottom-0 z-[4] size-full bg-center bg-no-repeat [content:""]; + background-image: url("@/assets/images/unique/grid-bg-glass.png"); + } + + &.sold-out:after { + @apply bg-center bg-no-repeat; + background-image: url("@/assets/images/unique/grid-bg-sold-out.png"), + url("@/assets/images/unique/grid-bg-glass.png"); + } + + .unique-item-counter { + background-image: url("@/assets/images/unique/grid-count-bg.png"); + @apply bottom-[1px] z-[3] mx-auto my-0 flex h-[9px] w-full items-center justify-center bg-center bg-no-repeat; + } +} + +.unique-sold-out-blocker { + width: 364px; + height: 30px; + background: url("@/assets/images/unique/catalog-info-sold-out.png"); + + div { + float: right; + width: 140px; + text-align: center; + font-weight: bold; + margin-top: 5px; + margin-right: 17px; + color: #000; + } +} + +.unique-compact-plate { + display: flex; + flex-direction: column; + justify-content: flex-end; + align-items: center; + right: 16px; + width: 34px; + height: 37px; + background: url("@/assets/images/unique/inventory-info-amount-bg.png"); + + div { + display: flex; + justify-content: center; + align-items: center; + height: 9.5px; + } +} + +.unique-complete-plate { + width: 170px; + height: 29px; + background: url("@/assets/images/unique/catalog-info-amount-bg.png") no-repeat center; + z-index: 1; + padding-top: 3px; + + .plate-container { + margin-left: 45px; + width: 100px; + font-size: 10px; + color: black; + + > :first-child { + margin-bottom: 2px; + } + } +} + +.limited-edition-number { + display: inline-block; + outline: 0; + height: 5px; + margin-right: 1px; + background-image: url("@/assets/images/unique/numbers.png"); + background-repeat: no-repeat; + + &:last-child { + margin-right: 0px; + } + + &.n-0 { + width: 4px; + background-position: -1px 0px; + } + + &.n-1 { + width: 2px; + background-position: -6px 0px; + } + + &.n-2 { + width: 4px; + background-position: -9px 0px; + } + + &.n-3 { + width: 4px; + background-position: -14px 0px; + } + + &.n-4 { + width: 4px; + background-position: -19px 0px; + } + + &.n-5 { + width: 4px; + background-position: -24px 0px; + } + + &.n-6 { + width: 4px; + background-position: -29px 0px; + } + + &.n-7 { + width: 4px; + background-position: -34px 0px; + } + + &.n-8 { + width: 4px; + background-position: -39px 0px; + } + + &.n-9 { + width: 4px; + background-position: -44px 0px; + } +} + +.nitro-slider { + display: flex; + align-items: center; + width: 100%; + height: 25px; + + .track { + height: 3px; + border-radius: .25rem; + overflow: hidden; + + &.track-0 { + background-color: #1e7295; + } + + &.track-1 { + background-color: #b6bec5; + } + } + + .thumb { + border-radius: 50%; + width: 25px; + height: 25px; + background-color: gray; + font-size: 10px; + text-align: center; + line-height: 25px; + padding: 0 3px; + + &:hover, + .active { + cursor: pointer; + } + + &.active { + outline: none; + } + + &.degree { + + &:after { + content: '\00b0' + } + } + + &.percent { + + &:after { + content: '\0025' + } + } + } +} + +.layout-grid-item { + height: var(--nitro-grid-column-min-height, unset); + background-position: center; + background-repeat: no-repeat; + background-color: #cdd3d9; +} + +.nitro-friends-spritesheet { + background: url('@/assets/images/friends/friends-spritesheet.png') transparent no-repeat; + + &.icon-friendbar-visit { + width: 21px; + height: 21px; + background-position: -38px -5px; + } + + &.icon-heart { + width: 16px; + height: 14px; + background-position: -5px -67px; + } + + &.icon-new-message { + width: 14px; + height: 14px; + background-position: -96px -53px; + } + + &.icon-none { + width: 16px; + height: 14px; + background-position: -31px -67px; + } + + &.icon-profile { + width: 21px; + height: 21px; + background-position: -5px -36px; + } + + &.icon-profile-sm { + width: 13px; + height: 11px; + background-position: -51px -91px; + + &:hover { + width: 13px; + height: 11px; + background-position: -74px -91px; + } + } + + &.icon-smile { + width: 16px; + height: 14px; + background-position: -57px -67px; + } + + &.icon-warning { + width: 23px; + height: 21px; + background-position: -5px -5px; + } + + &.icon-accept { + width: 13px; + height: 14px; + background-position: -5px -91px; + } + + &.icon-add { + width: 16px; + height: 15px; + background-position: -69px -31px; + } + + &.icon-bobba { + width: 16px; + height: 14px; + background-position: -96px -5px; + } + + &.icon-chat { + width: 17px; + height: 16px; + background-position: -69px -5px; + } + + &.icon-deny { + width: 13px; + height: 14px; + background-position: -28px -91px; + } + + &.icon-follow { + width: 16px; + height: 14px; + background-position: -96px -29px; + } + + &.icon-friendbar-chat { + width: 20px; + height: 21px; + background-position: -36px -36px; + } +} + +.nitro-avatar-editor-spritesheet { + background: url('@/assets/images/avatareditor/avatar-editor-spritesheet.png') transparent no-repeat; + + &.arrow-left-icon { + width: 28px; + height: 21px; + background-position: -226px -131px; + } + + &.arrow-right-icon { + width: 28px; + height: 21px; + background-position: -226px -162px; + } + + &.ca-icon { + width: 25px; + height: 25px; + background-position: -226px -61px; + + &.selected { + width: 25px; + height: 25px; + background-position: -226px -96px; + } + } + + &.cc-icon { + width: 31px; + height: 29px; + background-position: -145px -5px; + + &.selected { + width: 31px; + height: 29px; + background-position: -145px -44px; + } + } + + &.ch-icon { + width: 29px; + height: 24px; + background-position: -186px -39px; + + &.selected { + width: 29px; + height: 24px; + background-position: -186px -73px; + } + } + + &.clear-icon { + width: 27px; + height: 27px; + background-position: -145px -157px; + } + + &.cp-icon { + width: 30px; + height: 24px; + background-position: -145px -264px; + + &.selected { + width: 30px; + height: 24px; + background-position: -186px -5px; + } + } + + + &.ea-icon { + width: 35px; + height: 16px; + background-position: -226px -193px; + + &.selected { + width: 35px; + height: 16px; + background-position: -226px -219px; + } + } + + &.fa-icon { + width: 27px; + height: 20px; + background-position: -186px -137px; + + &.selected { + width: 27px; + height: 20px; + background-position: -186px -107px; + } + } + + &.female-icon { + width: 18px; + height: 27px; + background-position: -186px -202px; + + &.selected { + width: 18px; + height: 27px; + background-position: -186px -239px; + } + } + + &.ha-icon { + width: 25px; + height: 22px; + background-position: -226px -245px; + + &.selected { + width: 25px; + height: 22px; + background-position: -226px -277px; + } + } + + &.he-icon { + width: 31px; + height: 27px; + background-position: -145px -83px; + + &.selected { + width: 31px; + height: 27px; + background-position: -145px -120px; + } + } + + &.hr-icon { + width: 29px; + height: 25px; + background-position: -145px -194px; + + &.selected { + width: 29px; + height: 25px; + background-position: -145px -229px; + } + } + + &.lg-icon { + width: 19px; + height: 20px; + background-position: -303px -45px; + + &.selected { + width: 19px; + height: 20px; + background-position: -303px -75px; + } + } + + &.loading-icon { + width: 21px; + height: 25px; + background-position: -186px -167px; + } + + + &.male-icon { + width: 21px; + height: 21px; + background-position: -186px -276px; + + &.selected { + width: 21px; + height: 21px; + background-position: -272px -5px; + } + } + + + &.sellable-icon { + width: 17px; + height: 15px; + background-position: -303px -105px; + } + + + &.sh-icon { + width: 37px; + height: 10px; + background-position: -303px -5px; + + &.selected { + width: 37px; + height: 10px; + background-position: -303px -25px; + } + } + + + &.spotlight-icon { + width: 130px; + height: 305px; + background-position: -5px -5px; + } + + + &.wa-icon { + width: 36px; + height: 18px; + background-position: -226px -5px; + + &.selected { + width: 36px; + height: 18px; + background-position: -226px -33px; + } + } +} + +.nitro-avatar-editor-wardrobe-figure-preview { + background-color: #677181; + overflow: hidden; + z-index: 1; + + .avatar-image { + position: absolute; + bottom: 15px; + margin: 0 auto; + z-index: 4; + } + + .avatar-shadow { + position: absolute; + left: 0; + right: 0; + bottom: 25px; + width: 40px; + height: 20px; + margin: 0 auto; + border-radius: 100%; + background-color: rgba(0, 0, 0, 0.20); + z-index: 2; + } + + &:after { + position: absolute; + content: ''; + top: 75%; + bottom: 0; + left: 0; + right: 0; + border-radius: 50%; + background-color: #677181; + box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6); + transform: scale(2); + } + + .button-container { + position: absolute; + bottom: 0; + z-index: 5; + } +} + +.nitro-avatar-editor { + + + .category-item { + height: 40px; + } + + .figure-preview-container { + position: relative; + height: 100%; + background-color: #677181; + overflow: hidden; + z-index: 1; + + .arrow-container { + position: absolute; + width: 100%; + margin: 0 auto; + padding: 0 10px; + display: flex; + justify-content: space-between; + bottom: 12px; + z-index: 5; + + .icon { + cursor: pointer; + } + } + + .avatar-image { + position: absolute; + left: 0; + right: 0; + bottom: 50px; + margin: 0 auto; + z-index: 4; + } + + .avatar-spotlight { + position: absolute; + top: -10px; + left: 0; + right: 0; + margin: 0 auto; + opacity: 0.3; + pointer-events: none; + z-index: 3; + } + + .avatar-shadow { + position: absolute; + left: 0; + right: 0; + bottom: 15px; + width: 70px; + height: 30px; + margin: 0 auto; + border-radius: 100%; + background-color: rgba(0, 0, 0, 0.20); + z-index: 2; + } + + &:after { + position: absolute; + content: ''; + top: 75%; + bottom: 0; + left: 0; + right: 0; + border-radius: 50%; + background-color: #677181; + box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.6); + transform: scale(2); + } + } +}