Dimmer and Friends stuff

public/renderer-config.json

@@ -33,6 +33,7 @@
     "system.packet.log": false,
     "system.pong.manually": true,
     "system.pong.interval.ms": 20000,
+    "room.color.skip.transition": true,
     "avatar.mandatory.libraries": [
         "bd:1",
         "li:0"

public/ui-config.json

@@ -5,24 +5,7 @@
     "thumbnails.url": "https://nitro.nitrots.co/camera/thumbnail/%thumbnail%.png",
     "url.prefix": "http://localhost:3000",
     "chat.viewer.height.percentage": 0.40,
-    "navigator.slider.enabled": true,
+    "widget.dimmer.colorwheel": true,
-    "navigator.slider.content": [
-        {
-            "title": "Games Hub",
-            "image": "https://i.imgur.com/TFoivxi.png",
-            "roomId": 2240
-        },
-        {
-            "title": "Help Desk",
-            "image": "https://i.imgur.com/GO981GC.png",
-            "roomId": 2351
-        },
-        {
-            "title": "The Lido",
-            "image": "https://i.imgur.com/NVH38bV.png",
-            "roomId": 2346
-        }
-    ],
     "hotelview": {
         "widgets": {
             "slot.1.widget": "promoarticle",

src/events/friend-list/FriendListContentEvent.ts

@@ -1,4 +1,4 @@
-import { MessengerFriend } from '../../views/friend-list/common/MessengerFriend';
+import { MessengerFriend } from '../../views/friends/common/MessengerFriend';
 import { FriendListEvent } from './FriendListEvent';
 
 export class FriendListContentEvent extends FriendListEvent

src/layout/card/accordion/item/NitroCardAccordionItemView.tsx

@@ -1,12 +1,17 @@
-import { FC, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { NitroCardAccordionItemViewProps } from './NitroCardAccordionItemView.types';
 
 export const NitroCardAccordionItemView: FC<NitroCardAccordionItemViewProps> = props =>
 {
-    const { className = '', headerClassName = '', contentClassName = '', headerText = '' } = props;
+    const { className = '', headerClassName = '', contentClassName = '', headerText = '', defaultState = false } = props;
 
     const [ isExpanded, setIsExpanded ] = useState(false);
 
+    useEffect(() =>
+    {
+        setIsExpanded(defaultState);
+    }, [ defaultState ]);
+
     return (
         <div className={ 'nitro-card-accordion-item ' + className + (isExpanded ? ' active' : '') }>
             <div className={ 'nitro-card-accordion-item-header px-2 py-1 d-flex ' + headerClassName } onClick={ () => setIsExpanded((value) => !value) }>

src/layout/card/accordion/item/NitroCardAccordionItemView.types.ts

@@ -4,4 +4,5 @@ export interface NitroCardAccordionItemViewProps
     headerClassName?: string;
     contentClassName?: string;
     headerText: string;
+    defaultState?: boolean;
 }

src/views/Styles.scss

@@ -2,7 +2,7 @@
 @import './avatar-editor/AvatarEditorView';
 @import './camera/CameraWidgetView';
 @import './catalog/CatalogView';
-@import './friend-list/FriendListView';
+@import './friends/FriendsView';
 @import './groups/GroupView';
 @import './hotel-view/HotelView';
 @import './inventory/InventoryView';

src/views/friend-list/FriendListView.scss

@@ -1,5 +0,0 @@
-.nitro-friend-list {
-    width: 250px;
-}
-
-@import './views//friend-bar/FriendBarView';

src/views/friend-list/views/friends/FriendListFriendsView.tsx

@@ -1,17 +0,0 @@
-import { FC } from 'react';
-import { FriendListFriendsItemView } from '../friends-item/FriendListFriendsItemView';
-import { FriendListFriendsViewProps } from './FriendListFriendsView.types';
-
-export const FriendListFriendsView: FC<FriendListFriendsViewProps> = props =>
-{
-    const { list = null } = props;
-
-    if(!list) return null;
-
-    return (<>
-        { list.map((friend, index) =>
-        {
-            return <FriendListFriendsItemView key={ index } friend={ friend } />
-        }) }
-    </>);
-}

src/views/friend-list/views/friends/FriendListFriendsView.types.ts

@@ -1,5 +0,0 @@
-import { MessengerFriend } from './../../common/MessengerFriend';
-export interface FriendListFriendsViewProps
-{
-    list: MessengerFriend[];
-}

src/views/friend-list/views/requests-item/FriendListRequestsItemView.types.ts

@@ -1,6 +0,0 @@
-import { MessengerRequest } from './../../common/MessengerRequest';
-
-export interface FriendListRequestsItemViewProps
-{
-    request: MessengerRequest;
-}

src/views/friend-list/views/requests/FriendListRequestsView.tsx

@@ -1,17 +0,0 @@
-import { FC } from 'react';
-import { FriendListRequestsItemView } from '../requests-item/FriendListRequestsItemView';
-import { FriendListRequestsViewProps } from './FriendListRequestsView.types';
-
-export const FriendListRequestsView: FC<FriendListRequestsViewProps> = props =>
-{
-    const { list = null } = props;
-
-    if(!list) return null;
-
-    return (<>
-        { list.map((request, index) =>
-        {
-            return <FriendListRequestsItemView key={ index } request={ request } />
-        }) }
-    </>);
-};

src/views/friend-list/views/requests/FriendListRequestsView.types.ts

@@ -1,6 +0,0 @@
-import { MessengerRequest } from './../../common/MessengerRequest';
-
-export interface FriendListRequestsViewProps
-{
-    list: MessengerRequest[];
-}

src/views/friends/FriendsView.scss

@@ -0,0 +1,5 @@
+.nitro-friend-list {
+    width: 250px;
+}
+
+@import './views/friend-bar/FriendBarView';

src/views/friends/FriendsView.tsx

@@ -11,15 +11,13 @@ import { SendMessageHook } from '../../hooks/messages/message-event';
 import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
 import { FriendListContextProvider } from './context/FriendListContext';
 import { FriendListMessageHandler } from './FriendListMessageHandler';
-import { FriendListViewProps } from './FriendListView.types';
 import { FriendListReducer, initialFriendList } from './reducers/FriendListReducer';
 import { FriendBarView } from './views/friend-bar/FriendBarView';
-import { FriendListFriendsView } from './views/friends/FriendListFriendsView';
+import { FriendsListView } from './views/list/FriendsListView';
-import { FriendListRequestsView } from './views/requests/FriendListRequestsView';
 
 const TABS: string[] = ['friendlist.friends', 'generic.search'];
 
-export const FriendListView: FC<FriendListViewProps> = props =>
+export const FriendsView: FC<{}> = props =>
 {
     const [ friendListState, dispatchFriendListState ] = useReducer(FriendListReducer, initialFriendList);
     const { friends = null, requests = null, settings = null } = friendListState;
@@ -120,14 +118,14 @@ export const FriendListView: FC<FriendListViewProps> = props =>
                         </NitroCardTabsView>
                         <div className="text-black">
                             { currentTab === 0 && <NitroCardAccordionView>
-                                <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` }>
+                                <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends') + ` (${onlineFriends.length})` } defaultState={ true }>
-                                   <FriendListFriendsView list={ onlineFriends } />
+                                   <FriendsListView list={ onlineFriends } />
                                 </NitroCardAccordionItemView>
                                 <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${offlineFriends.length})` }>
-                                    <FriendListFriendsView list={ offlineFriends } />
+                                    <FriendsListView list={ offlineFriends } />
                                 </NitroCardAccordionItemView>
                                 { requests.length > 0 && <NitroCardAccordionItemView headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${requests.length})` }>
-                                    <FriendListRequestsView list={ requests } />
+                                    <FriendsListView list={ requests } />
                                 </NitroCardAccordionItemView> }
                             </NitroCardAccordionView> }
                         </div>

src/views/friends/FriendsView.types.ts

@@ -1,6 +1,3 @@
-export interface FriendListViewProps
-{}
-
 export class FriendListTabs
 {
     public static readonly FRIENDS: string  = 'friendlist.friends';

src/views/friends/views/friend-item/FriendsListItemView.tsx

@@ -4,9 +4,9 @@ import { LocalizeText } from '../../../../api';
 import { SendMessageHook } from '../../../../hooks';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
 import { MessengerFriend } from '../../common/MessengerFriend';
-import { FriendListFriendsItemViewProps } from './FriendListFriendsItemView.types';
+import { FriendsListItemViewProps } from './FriendsListItemView.types';
 
-export const FriendListFriendsItemView: FC<FriendListFriendsItemViewProps> = props =>
+export const FriendsListItemView: FC<FriendsListItemViewProps> = props =>
 {
     const { friend = null } = props;
 

src/views/friends/views/friend-item/FriendsListItemView.types.ts

@@ -1,6 +1,6 @@
 import { MessengerFriend } from '../../common/MessengerFriend';
 
-export interface FriendListFriendsItemViewProps
+export interface FriendsListItemViewProps
 {
     friend: MessengerFriend;
 }

src/views/friends/views/list/FriendsListView.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import { MessengerFriend } from '../../common/MessengerFriend';
+import { MessengerRequest } from '../../common/MessengerRequest';
+import { FriendsListItemView } from '../friend-item/FriendsListItemView';
+import { FriendsRequestItemView } from '../request-item/FriendsRequestItemView';
+import { FriendsListViewProps } from './FriendsListView.types';
+
+export const FriendsListView: FC<FriendsListViewProps> = props =>
+{
+    const { list =  null } = props;
+
+    if(!list) return null;
+
+    return (<>
+        { list.map((item, index) =>
+        {
+            if(item instanceof MessengerFriend)
+                return <FriendsListItemView key={ index } friend={ item } />
+            else if(item instanceof MessengerRequest)
+                return  <FriendsRequestItemView key={ index } request={ item } />
+            else
+                return null;
+        }) }
+    </>);
+}

src/views/friends/views/list/FriendsListView.types.ts

@@ -0,0 +1,7 @@
+import { MessengerFriend } from '../../common/MessengerFriend';
+import { MessengerRequest } from '../../common/MessengerRequest';
+
+export interface FriendsListViewProps
+{
+    list: MessengerFriend[] | MessengerRequest[];
+}

src/views/friends/views/request-item/FriendsRequestItemView.tsx

@@ -2,9 +2,9 @@ import { AcceptFriendComposer, DeclineFriendComposer } from '@nitrots/nitro-rend
 import { FC, useCallback } from 'react';
 import { SendMessageHook } from '../../../../hooks/messages/message-event';
 import { UserProfileIconView } from '../../../shared/user-profile-icon/UserProfileIconView';
-import { FriendListRequestsItemViewProps } from './FriendListRequestsItemView.types';
+import { FriendsRequestItemViewProps } from './FriendsRequestItemView.types';
 
-export const FriendListRequestsItemView: FC<FriendListRequestsItemViewProps> = props =>
+export const FriendsRequestItemView: FC<FriendsRequestItemViewProps> = props =>
 {
     const { request = null } = props;
 

src/views/friends/views/request-item/FriendsRequestItemView.types.ts

@@ -0,0 +1,6 @@
+import { MessengerRequest } from '../../common/MessengerRequest';
+
+export interface FriendsRequestItemViewProps
+{
+    request: MessengerRequest;
+}

src/views/main/MainView.tsx

@@ -7,7 +7,7 @@ import { AchievementsView } from '../achievements/AchievementsView';
 import { AvatarEditorView } from '../avatar-editor/AvatarEditorView';
 import { CameraWidgetView } from '../camera/CameraWidgetView';
 import { CatalogView } from '../catalog/CatalogView';
-import { FriendListView } from '../friend-list/FriendListView';
+import { FriendsView } from '../friends/FriendsView';
 import { GroupsView } from '../groups/GroupsView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
@@ -63,7 +63,7 @@ export const MainView: FC<MainViewProps> = props =>
             <NavigatorView />
             <InventoryView />
             <CatalogView />
-            <FriendListView />
+            <FriendsView />
             <RightSideView />
             <UserSettingsView />
             <UserProfileView />

src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss

@@ -6,4 +6,8 @@
         height: 79px;
         background: url(../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png) center no-repeat;
     }
+
+    .color-swatch {
+        height: 30px;
+    }
 }

src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx

@@ -1,7 +1,7 @@
 import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import ReactSlider from 'react-slider';
-import { GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+import { GetConfiguration, GetRoomEngine, LocalizeText, RoomWidgetDimmerPreviewMessage, RoomWidgetDimmerSavePresetMessage, RoomWidgetDimmerUpdateEvent, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
 import { RoomDimmerPreset } from '../../../../../api/nitro/room/widgets/events/RoomDimmerPreset';
 import { RoomWidgetDimmerStateUpdateEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
 import { RoomWidgetDimmerChangeStateMessage } from '../../../../../api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage';
@@ -10,12 +10,15 @@ import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, Nitro
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureDimmerData } from './FurnitureDimmerData';
 
+const DEFAULT_COLORS: string[] = ['#74F5F5', '#0053F7', '#E759DE', '#EA4532', '#F2F851', '#82F349', '#000000'];
+
 export const FurnitureDimmerView: FC<{}> = props =>
 {
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
 
     const [ isActive, setIsActive ] = useState<boolean>(false);
+    const [ isFreeColorMode, setIsFreeColorMode ] = useState<boolean>(false);
     const [ selectedPresetId, setSelectedPresetId ] = useState<number>(-1);
     const [ presets, setPresets ] = useState<RoomDimmerPreset[]>([]);
 
@@ -28,6 +31,11 @@ export const FurnitureDimmerView: FC<{}> = props =>
         return parseInt(previewColor.replace('#', ''), 16);
     }, [ previewColor ]);
 
+    useEffect(() =>
+    {
+        if(GetConfiguration<boolean>('widget.dimmer.colorwheel')) setIsFreeColorMode(true);
+    }, []);
+
     useEffect(() =>
     {
         if(selectedPresetId === -1 || presets.length === 0 || !isActive) return;
@@ -132,7 +140,14 @@ export const FurnitureDimmerView: FC<{}> = props =>
                     <div className="p-2">
                         <div className="form-group mb-2">
                             <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.hue') }</label>
-                            <input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } />
+                            { isFreeColorMode && <input type="color" className="form-control" value={ previewColor } onChange={ (e) => setPreviewColor(e.target.value) } /> }
+                            { !isFreeColorMode && <div className="d-flex gap-2">
+                                { DEFAULT_COLORS.map((color, index) =>
+                                {
+                                    return <div key={ index } className="rounded w-100 color-swatch cursor-pointer" onClick={ () => setPreviewColor(color) } style={{ backgroundColor: color }}></div>;
+                                }) }
+                            </div> }
+                            
                         </div>
                         <div className="form-group mb-2">
                             <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>