Merge branch 'dev' of https://git.krews.org/nitro/nitro-react into dev

.github/workflows/build.yml

@@ -1,34 +0,0 @@
-name: Build
-
-on:
-    push:
-        branches: [dev]
-
-jobs:
-    build:
-        runs-on: dedicated-server
-        strategy:
-            matrix:
-                node-version: [16.x]
-
-        steps:
-            - name: Checkout Repository
-              uses: actions/checkout@v2
-            - name: Use Node.js ${{ matrix.node-version }}
-              uses: actions/setup-node@v2
-              with:
-                  node-version: ${{ matrix.node-version }}
-                  cache: "yarn"
-            - name: Install dependencies
-              run: |
-                  yarn remove @nitrots/nitro-renderer
-                  yarn add git+https://git@git.krews.org/nitro/nitro-renderer#dev
-                  yarn install
-            - name: Build Nitro
-              run: |
-                  yarn build
-            - name: Archive Artifacts
-              uses: actions/upload-artifact@v2
-              with:
-                  path: |
-                      build

src/api/notification/NotificationUtilities.ts

@@ -1,6 +1,5 @@
 import { HabboWebTools, RoomEnterEffect } from '@nitrots/nitro-renderer';
 import { CreateLinkEvent, GetConfiguration, GetNitroInstance, LocalizeText } from '..';
-import { CatalogPageName } from '../../components/catalog/common/CatalogPageName';
 import { NotificationAlertEvent, NotificationConfirmEvent } from '../../events';
 import { NotificationBubbleEvent } from '../../events/notification-center/NotificationBubbleEvent';
 import { DispatchUiEvent } from '../../hooks';

src/common/layout/LayoutRoomPreviewerView.tsx

@@ -1,5 +1,5 @@
 import { ColorConverter, IRoomRenderingCanvas, RoomPreviewer, TextureUtils } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FC, MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { GetNitroInstance } from '../../api';
 
 export interface LayoutRoomPreviewerViewProps
@@ -14,6 +14,20 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
     const [ renderingCanvas, setRenderingCanvas ] = useState<IRoomRenderingCanvas>(null);
     const elementRef = useRef<HTMLDivElement>();
 
+    const onClick = (event: MouseEvent<HTMLDivElement>) =>
+    {
+        if(!roomPreviewer) return;
+
+        if(event.shiftKey)
+        {
+            roomPreviewer.changeRoomObjectDirection();
+        }
+        else
+        {
+            roomPreviewer.changeRoomObjectState();
+        }
+    }
+
     const update = useCallback((time: number) =>
     {
         if(!roomPreviewer || !renderingCanvas || !elementRef.current) return;
@@ -83,7 +97,7 @@ export const LayoutRoomPreviewerView: FC<LayoutRoomPreviewerViewProps> = props =
 
     return (
         <div className="room-preview-container">
-            <div ref={ elementRef } className="room-preview-image" style={ { height } } />
+            <div ref={ elementRef } className="room-preview-image" style={ { height } } onClick={ onClick } />
             { props.children }
         </div>
     );

src/components/catalog/CatalogView.scss

@@ -98,7 +98,6 @@
 
     .layout-grid-item {
         height: 75px !important;
-        max-height: 75px !important;
     }
 }
 

src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx

@@ -67,7 +67,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
     }, [offerData]);
 
     return (
-        <LayoutGridItem center={ false } column={ false } alignItems="center" className="p-1">
+        <LayoutGridItem shrink center={ false } column={ false } alignItems="center" className="p-1">
             <LayoutImage imageUrl={ getImageUrlForOffer() } fit={ false } style={ { width: 50, height: 50 } } />
             <Column grow gap={ 0 }>
                 <Text fontWeight="bold">{ getMarketplaceOfferTitle }</Text>

src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx

@@ -83,7 +83,7 @@ export const CatalogLayoutMarketplaceOwnItemsView: FC<CatalogLayoutProps> = prop
     });
 
     return (
-        <Column>
+        <Column overflow="hidden">
             { (creditsWaiting <= 0) &&
                 <Text center className="bg-muted rounded p-1">
                     { LocalizeText('catalog.marketplace.redeem.no_sold_items') }

src/components/navigator/NavigatorMessageHandler.tsx

@@ -1,7 +1,7 @@
-import { CantConnectMessageParser, GenericErrorEvent, GetGuestRoomResultEvent, LegacyExternalInterface, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomDoorbellRejectedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomInfoComposer, RoomSettingsUpdatedEvent, UserInfoEvent } from '@nitrots/nitro-renderer';
+import { CantConnectMessageParser, GenericErrorEvent, GetGuestRoomResultEvent, LegacyExternalInterface, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomDoorbellRejectedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomInfoComposer, RoomSettingsUpdatedEvent, UserInfoEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CreateRoomSession, GetSessionDataManager, LocalizeText, NotificationAlertType, NotificationUtilities, SendMessageComposer, VisitDesktop } from '../../api';
-import { UpdateDoorStateEvent } from '../../events';
+import { NavigatorEvent, UpdateDoorStateEvent } from '../../events';
 import { DispatchUiEvent, UseMessageEventHook } from '../../hooks';
 import { useNavigatorContext } from './NavigatorContext';
 import { NavigatorActions } from './reducers/NavigatorReducer';
@@ -221,6 +221,11 @@ export const NavigatorMessageHandler: FC<{}> = props =>
         VisitDesktop();
     }, []);
 
+    const onRoomCreatorEvent = useCallback((event: RoomEnterErrorEvent) =>
+    {
+        DispatchUiEvent(new NavigatorEvent(NavigatorEvent.SHOW_ROOM_CREATOR));
+    },[]);
+
     UseMessageEventHook(UserInfoEvent, onUserInfoEvent);
     UseMessageEventHook(RoomForwardEvent, onRoomForwardEvent);
     UseMessageEventHook(RoomEntryInfoMessageEvent, onRoomEntryInfoMessageEvent);
@@ -236,6 +241,7 @@ export const NavigatorMessageHandler: FC<{}> = props =>
     UseMessageEventHook(NavigatorHomeRoomEvent, onNavigatorHomeRoomEvent);
     UseMessageEventHook(RoomSettingsUpdatedEvent, onRoomSettingsUpdatedEvent);
     UseMessageEventHook(RoomEnterErrorEvent, onRoomEnterErrorEvent);
+    UseMessageEventHook(NavigatorOpenRoomCreatorEvent, onRoomCreatorEvent);
 
     return null;
 }

src/components/navigator/NavigatorView.scss

@@ -52,8 +52,7 @@
     width: 400px;
 
     .list-container {
-        min-height: 100px;
+        height: 100px;
-        max-height: 100px;
 
         .list-item {
             background-color: $grid-active-bg-color;

src/components/navigator/NavigatorView.tsx

@@ -46,6 +46,10 @@ export const NavigatorView: FC<{}> = props =>
             case NavigatorEvent.TOGGLE_ROOM_LINK:
                 setRoomLinkOpen(value => !value);
                 return;
+            case NavigatorEvent.SHOW_ROOM_CREATOR:
+                setIsVisible(true);
+                setCreatorOpen(true);
+                return;
         }
     }, []);
 
@@ -54,6 +58,7 @@ export const NavigatorView: FC<{}> = props =>
     UseUiEvent(NavigatorEvent.TOGGLE_NAVIGATOR, onNavigatorEvent);
     UseUiEvent(NavigatorEvent.TOGGLE_ROOM_INFO, onNavigatorEvent);
     UseUiEvent(NavigatorEvent.TOGGLE_ROOM_LINK, onNavigatorEvent);
+    UseUiEvent(NavigatorEvent.SHOW_ROOM_CREATOR, onNavigatorEvent);
 
     const onUpdateDoorStateEvent = useCallback((event: UpdateDoorStateEvent) =>
     {

src/components/navigator/views/creator/NavigatorRoomCreatorView.tsx

@@ -21,13 +21,13 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
 
     const getRoomModelImage = (name: string) => GetConfiguration<string>('images.url') + `/navigator/models/model_${ name }.png`;
 
-    const selectModel = (model: IRoomModel) =>
+    const selectModel = (model: IRoomModel, index) =>
     {
         if(!model) return;
 
         if(model.clubLevel > GetClubMemberLevel()) return;
 
-        setSelectedModelName(name);
+        setSelectedModelName(RoomModels[index].name);
     }
 
     const createRoom = () =>
@@ -97,9 +97,9 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                 </Column>
                 <Column size={ 6 } gap={ 1 } overflow="auto">
                     {
-                        RoomModels.map(model =>
+                        RoomModels.map((model, index )=>
                             {
-                                return (<LayoutGridItem fullHeight key={ model.name } onClick={ () => selectModel(model) } itemActive={ (selectedModelName === model.name) } overflow="unset" gap={ 0 } className="p-1" disabled={ (GetClubMemberLevel() < model.clubLevel) }>
+                                return (<LayoutGridItem fullHeight key={ model.name } onClick={ () => selectModel(model, index) } itemActive={ (selectedModelName === model.name) } overflow="unset" gap={ 0 } className="p-1" disabled={ (GetClubMemberLevel() < model.clubLevel) }>
                                     <Flex fullHeight center overflow="hidden">
                                         <img alt="" src={ getRoomModelImage(model.name) } />
                                     </Flex>

src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx

@@ -111,7 +111,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                     <>
                         <Flex gap={ 2 } overflow="hidden">
                             <LayoutRoomThumbnailView roomId={ roomInfoData.enteredGuestRoom.roomId } customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef }>
-                                { hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
+                                { hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer top-0" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
                             </LayoutRoomThumbnailView>
                             <Column grow gap={ 1 } overflow="hidden">
                                 <Flex gap={ 1 }>
@@ -140,12 +140,10 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                                                     }) }
                                             </Flex> }
                                     </Column>
-                                    <Column>
+                                    <Column alignItems="center" gap={ 1 }>
-                                        <Flex alignItems="center" gap={ 1 }>
+                                        { hasPermission('settings') &&
-                                            <FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer" onClick={ event => DispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
+                                            <i className="icon icon-cog cursor-pointer" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
-                                            { hasPermission('settings') &&
+                                        <FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer" onClick={ event => DispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
-                                                <i className="icon icon-cog cursor-pointer" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
-                                        </Flex>
                                     </Column>
                                 </Flex>
                                 <Text overflow="auto" style={ { maxHeight: 50 } }>{ roomInfoData.enteredGuestRoom.description }</Text>

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsRightsTabView.tsx

@@ -23,22 +23,24 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
     }, [ roomSettingsData, handleChange ]);
 
     return (
-        <Grid overflow="auto">
+        <Grid>
             <Column size={ 6 }>
                 <Text bold>
                     { LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString() ]) }
                 </Text>
-                <Column fullWidth className="bg-white rounded list-container p-2" overflow="auto" gap={ 1 }>
+                <Flex overflow="hidden" className="bg-white rounded list-container p-2">
-                    { Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
+                    <Column fullWidth overflow="auto" gap={ 1 }>
-                        {
+                        { Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
-                            return (
+                            {
-                                <Flex key={ index } alignItems="center" gap={ 1 } overflow="hidden">
+                                return (
-                                    <UserProfileIconView userName={ name } />
+                                    <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <Text pointer grow key={index} onClick={ event => removeUserRights(id) }> { name }</Text>
+                                        <UserProfileIconView userName={ name } />
-                                </Flex>
+                                        <Text pointer grow key={index} onClick={ event => removeUserRights(id) }> { name }</Text>
-                            );
+                                    </Flex>
-                        }) }
+                                );
-                </Column>
+                            }) }
+                    </Column>
+                </Flex>
                 <Button variant="danger" disabled={ !roomSettingsData.usersWithRights.size } onClick={ removeAllRights } >
                     { LocalizeText('navigator.flatctrls.clear') }
                 </Button>

src/components/notification-center/views/alert-layouts/GetAlertLayout.tsx

@@ -1,6 +1,5 @@
-import { NotificationAlertItem, NotificationAlertType } from '../../../../api';
+import { NotificationAlertItem } from '../../../../api';
 import { NotificationDefaultAlertView } from './NotificationDefaultAlertView';
-import { NotificationEventAlertView } from './NotificationEventAlertView';
 
 export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =>
 {
@@ -8,11 +7,5 @@ export const GetAlertLayout = (item: NotificationAlertItem, close: () => void) =
 
     const props = { key: item.id, item, close };
 
-    switch(item.alertType)
+    return <NotificationDefaultAlertView { ...props } />
-    {
-        case NotificationAlertType.EVENT:
-            return <NotificationEventAlertView { ...props } />
-        default:
-            return <NotificationDefaultAlertView { ...props } />
-    }
 }

src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx

@@ -18,6 +18,8 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
         close();
     }, [ item, close ]);
 
+    const isAction = (item.clickUrl && item.clickUrl.startsWith('event:'));
+
     return (
         <LayoutNotificationAlertView title={ title } close={ close } { ...rest }>
             { (item.messages.length > 0) && item.messages.map((message, index) =>
@@ -27,9 +29,12 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
                     return <Base grow fullHeight overflow="auto" key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />;
                 }) }
             <Column alignItems="center" center gap={ 1 }>
-                <Button onClick={ close }>{ LocalizeText('generic.close') }</Button>
+                { !isAction &&
-                { item.clickUrl && item.clickUrl.length &&
+                    <Button onClick={ close }>{ LocalizeText('generic.close') }</Button> }
+                { !isAction && item.clickUrl && (item.clickUrl.length > 0) &&
                     <Button variant="link" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
+                { isAction && item.clickUrl && (item.clickUrl.length > 0) &&
+                    <Button onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</Button> }
             </Column>
         </LayoutNotificationAlertView>
     );

src/components/notification-center/views/alert-layouts/NotificationEventAlertView.tsx

@@ -1,36 +0,0 @@
-import { FC, useCallback } from 'react';
-import { LocalizeText, NotificationAlertItem, NotificationUtilities } from '../../../../api';
-import { LayoutNotificationAlertView, LayoutNotificationAlertViewProps } from '../../../../common';
-
-export interface NotificationEventAlertViewProps extends LayoutNotificationAlertViewProps
-{
-    item: NotificationAlertItem;
-}
-
-export const NotificationEventAlertView: FC<NotificationEventAlertViewProps> = props =>
-{
-    const { item = null, title = ((props.item && props.item.title) || ''), close = null, ...rest } = props;
-
-    const visitUrl = useCallback(() =>
-    {
-        NotificationUtilities.openUrl(item.clickUrl);
-        
-        close();
-    }, [ item, close ]);
-
-    return (
-        <LayoutNotificationAlertView title={ item.title } close={ close } { ...rest }>
-            { (item.messages.length > 0) && item.messages.map((message, index) =>
-                {
-                    const htmlText = message.replace(/\r\n|\r|\n/g, '<br />');
-
-                    return (
-                        <div key={ index } dangerouslySetInnerHTML={ { __html: htmlText } } />
-                    );
-                }) }
-            <div className="d-flex justify-content-center align-items-center mt-1">
-                <button type="button" className="btn btn-primary" onClick={ visitUrl }>{ LocalizeText(item.clickUrlText) }</button>
-            </div>
-        </LayoutNotificationAlertView>
-    );
-}

src/components/purse/views/SeasonalView.tsx

@@ -13,7 +13,7 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
     const { type = -1, amount = -1 } = props;
 
     return (
-        <Flex justifyContent="between" className="nitro-purse-seasonal-currency p-2 rounded">
+        <Flex fullWidth justifyContent="between" className="nitro-purse-seasonal-currency p-2 rounded">
             <Text variant="white">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</Text>
             <Flex gap={ 1 }>
                 <Text variant="white">{ LocalizeFormattedNumber(amount) }</Text>

src/components/room/widgets/infostand/InfoStandWidgetUserView.tsx

@@ -138,14 +138,18 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                 <Column gap={ 1 }>
                     <Flex alignItems="center" className="bg-light-dark rounded py-1 px-2">
                         { (userData.type !== RoomWidgetUpdateInfostandUserEvent.OWN_USER) &&
-                            <Text fullWidth wrap textBreak variant="white" small className="motto-content">{ motto }</Text> }
+                            <Flex grow alignItems="center" className="motto-content">
+                                <Text fullWidth pointer wrap textBreak small variant="white">{ motto }</Text>
+                            </Flex> }
                         { userData.type === RoomWidgetUpdateInfostandUserEvent.OWN_USER &&
                             <Flex grow alignItems="center" gap={ 2 }>
                                 <FontAwesomeIcon icon="pencil-alt" className="small" />
-                                { !isEditingMotto &&
+                                <Flex grow alignItems="center" className="motto-content">
-                                    <Text fullWidth pointer wrap textBreak small variant="white" className="motto-content" onClick={ event => setIsEditingMotto(true) }>{ motto }</Text> }
+                                    { !isEditingMotto &&
-                                { isEditingMotto &&
+                                        <Text fullWidth pointer wrap textBreak small variant="white" onClick={ event => setIsEditingMotto(true) }>{ motto }</Text> }
-                                    <input type="text" className="motto-input" maxLength={ 38 } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
+                                    { isEditingMotto &&
+                                        <input type="text" className="motto-input" maxLength={ 38 } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
+                                </Flex>
                             </Flex> }
                     </Flex>
                     <hr className="m-0" />

src/events/navigator/NavigatorEvent.ts

@@ -8,6 +8,7 @@ export class NavigatorEvent extends NitroEvent
     public static TOGGLE_ROOM_INFO: string = 'NE_TOGGLE_ROOM_INFO';
     public static TOGGLE_ROOM_LINK: string = 'NE_TOGGLE_ROOM_LINK';
     public static TOGGLE_ROOM_SETTINGS: string = 'NE_TOGGLE_ROOM_SETTINGS';
+    public static SHOW_ROOM_CREATOR: string = 'NE_TOGGLE_CREATOR';
 
     private _roomId: number;
     private _password: string;