Merge branch 'dev' into @update/room-widgets

package.json

@@ -15,7 +15,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.1.0",
     "@fortawesome/free-solid-svg-icons": "^6.1.0",
     "@fortawesome/react-fontawesome": "^0.1.17",
-    "@nitrots/nitro-renderer": "^1.2.3",
+    "@nitrots/nitro-renderer": "^1.2.5",
+    "@types/react-transition-group": "^4.4.4",
     "animate.css": "^4.1.1",
     "classnames": "^2.3.1",
     "cross-env": "^7.0.3",
@@ -33,14 +34,15 @@
     "use-between": "^1.3.1"
   },
   "resolutions": {
-    "react-error-overlay": "6.0.9"
+    "react-error-overlay": "6.0.9",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3"
   },
   "devDependencies": {
     "@types/node": "^12.20.19",
-    "@types/react": "^17.0.15",
+    "@types/react": "^18.0.8",
-    "@types/react-dom": "^17.0.9",
+    "@types/react-dom": "^18.0.3",
     "@types/react-slider": "^1.3.1",
-    "@types/react-transition-group": "^4.4.2",
     "@types/react-virtualized": "^9.21.13",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",

src/common/Base.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, MutableRefObject, useMemo } from 'react';
+import { CSSProperties, DetailedHTMLProps, FC, HTMLAttributes, MutableRefObject, ReactNode, useMemo } from 'react';
 import { ColorVariantType, DisplayType, FloatType, OverflowType, PositionType } from './types';
 
 export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttributes<T>, T>
@@ -18,11 +18,12 @@ export interface BaseProps<T = HTMLElement> extends DetailedHTMLProps<HTMLAttrib
     visible?: boolean;
     textColor?: ColorVariantType;
     classNames?: string[];
+    children?: ReactNode;
 }
 
 export const Base: FC<BaseProps<HTMLDivElement>> = props =>
 {
-    const { ref = null, innerRef = null, display = null, fit = false, fitV = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, visible = null, textColor = null, classNames = [], className = '', style = {}, ...rest } = props;
+    const { ref = null, innerRef = null, display = null, fit = false, fitV = false, grow = false, shrink = false, fullWidth = false, fullHeight = false, overflow = null, position = null, float = null, pointer = false, visible = null, textColor = null, classNames = [], className = '', style = {}, children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -75,5 +76,9 @@ export const Base: FC<BaseProps<HTMLDivElement>> = props =>
         return newStyle;
     }, [ style ]);
     
-    return <div ref={ innerRef } className={ getClassName } style={ getStyle } { ...rest } />;
+    return (
+        <div ref={ innerRef } className={ getClassName } style={ getStyle } { ...rest }>
+            { children }
+        </div>
+    );
 }

src/common/draggable-window/DraggableWindow.tsx

@@ -1,5 +1,5 @@
 import { MouseEventType, TouchEventType } from '@nitrots/nitro-renderer';
-import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { CSSProperties, FC, Key, MouseEvent as ReactMouseEvent, ReactNode, TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { Base } from '..';
 import { DraggableWindowPosition } from './DraggableWindowPosition';
@@ -18,6 +18,7 @@ export interface DraggableWindowProps
     dragStyle?: CSSProperties;
     offsetLeft?: number;
     offsetTop?: number;
+    children?: ReactNode;
 }
 
 export const DraggableWindow: FC<DraggableWindowProps> = props =>

src/common/layout/LayoutRoomPreviewerView.tsx

@@ -1,16 +1,17 @@
 import { ColorConverter, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, MouseEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { GetNitroInstance } from '../../api';
 
 export interface LayoutRoomPreviewerViewProps
 {
     roomPreviewer: RoomPreviewer;
     height?: number;
+    children?: ReactNode;
 }
 
 export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =>
 {
-    const { roomPreviewer = null, height = 0 } = props;
+    const { roomPreviewer = null, height = 0, children = null } = props;
     const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
     const elementRef = useRef<HTMLDivElement>();
 
@@ -98,7 +99,7 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
     return (
         <div className="room-preview-container">
             <div ref={ elementRef } className="room-preview-image" style={ { height } } onClick={ onClick } />
-            { props.children }
+            { children }
         </div>
     );
 }

src/common/transitions/TransitionAnimation.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, ReactNode, useEffect, useState } from 'react';
 import { Transition } from 'react-transition-group';
 import { getTransitionAnimationStyle } from './TransitionAnimationStyles';
 
@@ -8,6 +8,7 @@ interface TransitionAnimationProps
     inProp: boolean;
     timeout?: number;
     className?: string;
+    children?: ReactNode;
 }
 
 export const TransitionAnimation: FC<TransitionAnimationProps> = props =>

src/components/achievements/views/AchievementDetailsView.tsx

@@ -1,5 +1,5 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { GetAchievementBadgeCode, GetAchievementLevel, LocalizeBadgeDescription, LocalizeBadgeName, LocalizeText } from '../../../api';
 import { Column, Flex, LayoutCurrencyIcon, LayoutProgressBar, Text } from '../../../common';
 import { AchievementBadgeView } from './AchievementBadgeView';
@@ -9,7 +9,7 @@ interface AchievementDetailsViewProps
     achievement: AchievementData;
 }
 
-export const AchievementDetailsView: FC<AchievementDetailsViewProps> = props =>
+export const AchievementDetailsView: FC<PropsWithChildren<AchievementDetailsViewProps>> = props =>
 {
     const { achievement = null, children = null, ...rest } = props;
 

src/components/achievements/views/achievement-list/AchievementListItemView.tsx

@@ -1,5 +1,5 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
 import { LayoutGridItem } from '../../../../common';
 import { AchievementBadgeView } from '../AchievementBadgeView';
 
@@ -10,7 +10,7 @@ interface AchievementListItemViewProps
     setSelectedAchievementId: Dispatch<SetStateAction<number>>;
 }
 
-export const AchievementListItemView: FC<AchievementListItemViewProps> = props =>
+export const AchievementListItemView: FC<PropsWithChildren<AchievementListItemViewProps>> = props =>
 {
     const { achievement = null, selectedAchievementId = -1, setSelectedAchievementId = null, children = null, ...rest } = props;
 

src/components/achievements/views/achievement-list/AchievementListView.tsx

@@ -1,5 +1,5 @@
 import { AchievementData } from '@nitrots/nitro-renderer';
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
 import { AutoGrid } from '../../../../common';
 import { AchievementListItemView } from './AchievementListItemView';
 
@@ -10,7 +10,7 @@ interface AchievementListViewProps
     setSelectedAchievementId: Dispatch<SetStateAction<number>>;
 }
 
-export const AchievementListView: FC<AchievementListViewProps> = props =>
+export const AchievementListView: FC<PropsWithChildren<AchievementListViewProps>> = props =>
 {
     const { achievements = null, selectedAchievementId = -1, setSelectedAchievementId = null, children = null, ...rest } = props;
 

src/components/achievements/views/category-list/AchievementsCategoryListItemView.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
 import { GetAchievementCategoryImageUrl, GetAchievementCategoryMaxProgress, GetAchievementCategoryProgress, GetAchievementCategoryTotalUnseen, IAchievementCategory, LocalizeText } from '../../../../api';
 import { LayoutBackgroundImage, LayoutGridItem, Text } from '../../../../common';
 
@@ -9,7 +9,7 @@ interface AchievementCategoryListItemViewProps
     setSelectedCategoryCode: Dispatch<SetStateAction<string>>;
 }
 
-export const AchievementsCategoryListItemView: FC<AchievementCategoryListItemViewProps> = props =>
+export const AchievementsCategoryListItemView: FC<PropsWithChildren<AchievementCategoryListItemViewProps>> = props =>
 {
     const { category = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null, ...rest } = props;
 

src/components/achievements/views/category-list/AchievementsCategoryListView.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, FC, SetStateAction } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction } from 'react';
 import { IAchievementCategory } from '../../../../api';
 import { AutoGrid } from '../../../../common';
 import { AchievementsCategoryListItemView } from './AchievementsCategoryListItemView';
@@ -10,7 +10,7 @@ interface AchievementsCategoryListViewProps
     setSelectedCategoryCode: Dispatch<SetStateAction<string>>;
 }
 
-export const AchievementsCategoryListView: FC<AchievementsCategoryListViewProps> = props =>
+export const AchievementsCategoryListView: FC<PropsWithChildren<AchievementsCategoryListViewProps>> = props =>
 {
     const { categories = null, selectedCategoryCode = null, setSelectedCategoryCode = null, children = null, ...rest } = props;
     

src/components/inventory/views/badge/InventoryBadgeItemView.tsx

@@ -1,9 +1,9 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { UnseenItemCategory } from '../../../../api';
 import { LayoutBadgeImageView, LayoutGridItem } from '../../../../common';
 import { useInventoryBadges, useInventoryUnseenTracker } from '../../../../hooks';
 
-export const InventoryBadgeItemView: FC<{ badgeCode: string }> = props =>
+export const InventoryBadgeItemView: FC<PropsWithChildren<{ badgeCode: string }>> = props =>
 {
     const { badgeCode = null, children = null, ...rest } = props;
     const { selectedBadgeCode = null, setSelectedBadgeCode = null, getBadgeId = null } = useInventoryBadges();

src/components/inventory/views/bot/InventoryBotItemView.tsx

@@ -1,10 +1,10 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useState } from 'react';
+import { FC, MouseEvent, PropsWithChildren, useState } from 'react';
 import { attemptBotPlacement, IBotItem, UnseenItemCategory } from '../../../../api';
 import { LayoutAvatarImageView, LayoutGridItem } from '../../../../common';
 import { useInventoryBots, useInventoryUnseenTracker } from '../../../../hooks';
 
-export const InventoryBotItemView: FC<{ botItem: IBotItem }> = props =>
+export const InventoryBotItemView: FC<PropsWithChildren<{ botItem: IBotItem }>> = props =>
 {
     const { botItem = null, children = null, ...rest } = props;
     const [ isMouseDown, setMouseDown ] = useState(false);

src/components/inventory/views/pet/InventoryPetItemView.tsx

@@ -1,10 +1,10 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
-import { FC, MouseEvent, useState } from 'react';
+import { FC, MouseEvent, PropsWithChildren, useState } from 'react';
 import { attemptPetPlacement, IPetItem, UnseenItemCategory } from '../../../../api';
 import { LayoutGridItem, LayoutPetImageView } from '../../../../common';
 import { useInventoryPets, useInventoryUnseenTracker } from '../../../../hooks';
 
-export const InventoryPetItemView: FC<{ petItem: IPetItem }> = props =>
+export const InventoryPetItemView: FC<PropsWithChildren<{ petItem: IPetItem }>> = props =>
 {
     const { petItem = null, children = null, ...rest } = props;
     const [ isMouseDown, setMouseDown ] = useState(false);

src/components/room/RoomView.scss

@@ -1 +1,2 @@
+@import "./spectator/RoomSpectatorView";
 @import "./widgets/RoomWidgets";

src/components/room/RoomView.tsx

@@ -4,6 +4,7 @@ import { Base } from '../../common';
 import { useRoom } from '../../hooks';
 import { RoomColorView } from './RoomColorView';
 import { RoomContextProvider } from './RoomContext';
+import { RoomSpectatorView } from './spectator/RoomSpectatorView';
 import { RoomWidgetsView } from './widgets/RoomWidgetsView';
 
 export const RoomView: FC<{}> = props =>
@@ -50,6 +51,7 @@ export const RoomView: FC<{}> = props =>
                     <>
                         <RoomColorView />
                         <RoomWidgetsView />
+                        { roomSession.isSpectator && <RoomSpectatorView /> }
                     </> }
             </Base>
         </RoomContextProvider>

src/components/room/spectator/RoomSpectatorView.scss

@@ -0,0 +1,26 @@
+.room-spectator {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 50px);
+  user-select: none;
+  pointer-events: none;
+  opacity: 0.8;
+  background: url("../../../assets/images/room-spectator/room_spectator_top_left.png") no-repeat top left,
+              url("../../../assets/images/room-spectator/room_spectator_top_right.png") no-repeat top right,
+              url("../../../assets/images/room-spectator/room_spectator_bottom_right.png") no-repeat bottom right,
+              url("../../../assets/images/room-spectator/room_spectator_bottom_left.png") no-repeat bottom left,
+              url("../../../assets/images/room-spectator/room_spectator_middle_left.png") repeat-y left,
+              url("../../../assets/images/room-spectator/room_spectator_middle_top.png") repeat-x top,
+              url("../../../assets/images/room-spectator/room_spectator_middle_right.png") repeat-y right,
+              url("../../../assets/images/room-spectator/room_spectator_middle_bottom.png") repeat-x bottom
+  ;
+}
+/*
+border-image-slice: 91 91 110 91 fill;
+border-image-width: 79px 79px 79px 79px;
+border-image-outset: 0px 0px 0px 0px;
+border-image-repeat: repeat repeat;
+border-image-source: url("../../../assets/images/room-spectator/room_spectator.png");
+*/

src/components/room/spectator/RoomSpectatorView.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+export const RoomSpectatorView: FC<{}> = props =>
+{
+    return (
+        <div className="room-spectator"></div>
+    );
+};

src/components/room/widgets/chat-input/ChatInputView.tsx

@@ -1,7 +1,7 @@
 import { HabboClubLevelEnum, RoomControllerLevel } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetFloodControlEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
+import { GetClubMemberLevel, GetConfiguration, GetRoomSession, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetFloodControlEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api';
 import { Text } from '../../../../common';
 import { UseEventDispatcherHook } from '../../../../hooks';
 import { useRoomContext } from '../../RoomContext';
@@ -355,6 +355,8 @@ export const ChatInputView: FC<{}> = props =>
         inputRef.current.parentElement.dataset.value = chatValue;
     }, [ chatValue ]);
 
+    if(GetRoomSession().isSpectator) return null;
+
     return (
         createPortal(
             <div className="nitro-chat-input-container">

src/components/toolbar/ToolbarMeView.tsx

@@ -1,5 +1,5 @@
 import { MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
-import { Dispatch, FC, SetStateAction, useEffect, useRef } from 'react';
+import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
 import { CreateLinkEvent, GetRoomEngine, GetRoomSession, GetSessionDataManager, GetUserProfile } from '../../api';
 import { Base, Flex, LayoutItemCountView } from '../../common';
 import { GuideToolEvent } from '../../events';
@@ -12,7 +12,7 @@ interface ToolbarMeViewProps
     setMeExpanded: Dispatch<SetStateAction<boolean>>;
 }
 
-export const ToolbarMeView: FC<ToolbarMeViewProps> = props =>
+export const ToolbarMeView: FC<PropsWithChildren<ToolbarMeViewProps>> = props =>
 {
     const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
     const elementRef = useRef<HTMLDivElement>();

src/components/wired/views/WiredBaseView.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, PropsWithChildren, useEffect, useState } from 'react';
 import { GetSessionDataManager, LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../api';
 import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useWiredContext } from '../WiredContext';
@@ -13,7 +13,7 @@ export interface WiredBaseViewProps
     validate?: () => boolean;
 }
 
-export const WiredBaseView: FC<WiredBaseViewProps> = props =>
+export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
 {
     const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null, hasSpecialInput = false } = props;
     const [ wiredName, setWiredName ] = useState<string>(null);

src/components/wired/views/actions/WiredActionBaseView.tsx

@@ -1,5 +1,5 @@
 import { WiredActionDefinition } from '@nitrots/nitro-renderer';
-import { FC, useEffect } from 'react';
+import { FC, PropsWithChildren, useEffect } from 'react';
 import ReactSlider from 'react-slider';
 import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
 import { Column, Text } from '../../../../common';
@@ -13,7 +13,7 @@ export interface WiredActionBaseViewProps
     save: () => void;
 }
 
-export const WiredActionBaseView: FC<WiredActionBaseViewProps> = props =>
+export const WiredActionBaseView: FC<PropsWithChildren<WiredActionBaseViewProps>> = props =>
 {
     const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
     const { trigger = null, actionDelay = 0, setActionDelay = null } = useWiredContext();

src/components/wired/views/conditions/WiredConditionBaseView.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { WiredFurniType } from '../../../../api';
 import { WiredBaseView } from '../WiredBaseView';
 
@@ -9,7 +9,7 @@ export interface WiredConditionBaseViewProps
     save: () => void;
 }
 
-export const WiredConditionBaseView: FC<WiredConditionBaseViewProps> = props =>
+export const WiredConditionBaseView: FC<PropsWithChildren<WiredConditionBaseViewProps>> = props =>
 {
     const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
     

src/components/wired/views/triggers/WiredTriggerBaseView.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { WiredFurniType } from '../../../../api';
 import { WiredBaseView } from '../WiredBaseView';
 
@@ -9,7 +9,7 @@ export interface WiredTriggerBaseViewProps
     save: () => void;
 }
 
-export const WiredTriggerBaseView: FC<WiredTriggerBaseViewProps> = props =>
+export const WiredTriggerBaseView: FC<PropsWithChildren<WiredTriggerBaseViewProps>> = props =>
 {
     const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
     

src/hooks/catalog/useCatalog.ts

@@ -880,7 +880,7 @@ const useCatalogState = () =>
         switch(requestedPage.current.requestType)
         {
             case RequestedPage.REQUEST_TYPE_NONE:
-                if(activeNodes && activeNodes.length) return;
+                if(currentPage) return;
 
                 if(rootNode.isBranch)
                 {
@@ -908,7 +908,7 @@ const useCatalogState = () =>
                 requestedPage.current.resetRequest();
                 return;
         }
-    }, [ isVisible, rootNode, activeNodes, activateNode, openPageById, openPageByOfferId, openPageByName ]);
+    }, [ isVisible, rootNode, currentPage, activateNode, openPageById, openPageByOfferId, openPageByName ]);
 
     useEffect(() =>
     {

tsconfig.json

@@ -14,7 +14,7 @@
     "strict": false,
     "downlevelIteration": true,
     "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
+    "noFallthroughCasesInSwitch": false,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,