Merge branch 'dev' of https://github.com/billsonnn/nitro-react into dev

src/api/nitro/room/widgets/events/RoomDimmerPreset.ts

@@ -0,0 +1,35 @@
+export class RoomDimmerPreset
+{
+    private _id: number;
+    private _bgOnly: boolean;
+    private _color: string;
+    private _brightness: number;
+
+    constructor(id: number, bgOnly: boolean, color: string, brightness: number)
+    {
+        this._id = id;
+        this._bgOnly = bgOnly;
+        this._color = color;
+        this._brightness = brightness;
+    }
+
+    public get id(): number
+    {
+        return this._id;
+    }
+
+    public get bgOnly(): boolean
+    {
+        return this._bgOnly;
+    }
+
+    public get color(): string
+    {
+        return this._color;
+    }
+
+    public get brightness(): number
+    {
+        return this._brightness;
+    }
+}

src/api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent.ts

@@ -0,0 +1,48 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetDimmerStateUpdateEvent extends RoomWidgetUpdateEvent
+{
+    public static DIMMER_STATE: string = 'RWDSUE_DIMMER_STATE';
+
+    private _state: number;
+    private _presetId: number;
+    private _effectId: number;
+    private _color: number;
+    private _brightness: number;
+
+    constructor(state: number, presetId: number, effectId: number, color: number, brightness: number)
+    {
+        super(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE);
+
+        this._state         = state;
+        this._presetId      = presetId;
+        this._effectId      = effectId;
+        this._color         = color;
+        this._brightness    = brightness;
+    }
+
+    public get state(): number
+    {
+        return this._state;
+    }
+
+    public get presetId(): number
+    {
+        return this._presetId;
+    }
+
+    public get effectId(): number
+    {
+        return this._effectId;
+    }
+
+    public get color(): number
+    {
+        return this._color;
+    }
+
+    public get brightness(): number
+    {
+        return this._brightness;
+    }
+}

src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts

@@ -0,0 +1,50 @@
+import { RoomDimmerPreset } from './RoomDimmerPreset';
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetDimmerUpdateEvent extends RoomWidgetUpdateEvent
+{
+    public static PRESETS: string = 'RWDUE_PRESETS';
+    public static HIDE: string = 'RWDUE_HIDE';
+
+    private _selectedPresetId: number = 0;
+    private _presets: RoomDimmerPreset[];
+
+    constructor(type: string)
+    {
+        super(type);
+
+        this._presets = [];
+    }
+
+    public get presetCount(): number
+    {
+        return this._presets.length;
+    }
+
+    public get presets(): RoomDimmerPreset[]
+    {
+        return this._presets;
+    }
+
+    public get selectedPresetId(): number
+    {
+        return this._selectedPresetId;
+    }
+
+    public set selectedPresetId(k: number)
+    {
+        this._selectedPresetId = k;
+    }
+
+    public setPresetValues(id: number, bgOnly: boolean, color: string, brightness: number):void
+    {
+        const preset = new RoomDimmerPreset(id, bgOnly, color, brightness);
+
+        this._presets[(id - 1)] = preset;
+    }
+
+    public getPresetNumber(id: number): RoomDimmerPreset
+    {
+        return this._presets[id];
+    }
+}

src/api/nitro/room/widgets/events/index.ts

@@ -2,6 +2,7 @@ export * from './IPhotoData';
 export * from './RoomObjectItem';
 export * from './RoomWidgetAvatarInfoEvent';
 export * from './RoomWidgetChooserContentEvent';
+export * from './RoomWidgetDimmerUpdateEvent';
 export * from './RoomWidgetDoorbellEvent';
 export * from './RoomWidgetFloodControlEvent';
 export * from './RoomWidgetObjectNameEvent';

src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts

@@ -0,0 +1,111 @@
+import { NitroEvent, RoomControllerLevel, RoomEngineDimmerStateEvent, RoomEngineTriggerWidgetEvent, RoomSessionDimmerPresetsEvent, RoomWidgetEnum } from '@nitrots/nitro-renderer';
+import { GetRoomEngine } from '../..';
+import { GetSessionDataManager } from '../../..';
+import { RoomWidgetDimmerUpdateEvent, RoomWidgetUpdateEvent } from '../events';
+import { RoomWidgetDimmerStateUpdateEvent } from '../events/RoomWidgetDimmerStateUpdateEvent';
+import { RoomWidgetDimmerChangeStateMessage, RoomWidgetDimmerPreviewMessage, RoomWidgetFurniToWidgetMessage, RoomWidgetMessage } from '../messages';
+import { RoomWidgetDimmerSavePresetMessage } from '../messages/RoomWidgetDimmerSavePresetMessage';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
+{
+    public processEvent(event: NitroEvent): void
+    {
+        switch(event.type)
+        {
+            case RoomSessionDimmerPresetsEvent.ROOM_DIMMER_PRESETS: {
+                const presetsEvent  = (event as RoomSessionDimmerPresetsEvent);
+                const updateEvent   = new RoomWidgetDimmerUpdateEvent(RoomWidgetDimmerUpdateEvent.PRESETS);
+
+                updateEvent.selectedPresetId = presetsEvent.selectedPresetId;
+
+                let i = 0;
+
+                while(i < presetsEvent.presetCount)
+                {
+                    const preset = presetsEvent.getPreset(i);
+
+                    if(preset) updateEvent.setPresetValues(preset.id, preset.bgOnly, preset.color, preset.brightness);
+
+                    i++;
+                }
+
+                this.container.eventDispatcher.dispatchEvent(updateEvent);
+                return;
+            }
+            case RoomEngineDimmerStateEvent.ROOM_COLOR: {
+                const stateEvent = (event as RoomEngineDimmerStateEvent);
+
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetDimmerStateUpdateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
+                return;
+            }
+            case RoomEngineTriggerWidgetEvent.REMOVE_DIMMER: {
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetDimmerUpdateEvent(RoomWidgetDimmerUpdateEvent.HIDE));
+                return;
+            }
+        }
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        switch(message.type)
+        {
+            case RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER: {
+                if(this.canOpenWidget()) this.container.roomSession.requestMoodlightSettings();
+                break;
+            }
+            case RoomWidgetDimmerSavePresetMessage.SAVE_PRESET: {
+                if(this.canOpenWidget())
+                {
+                    const savePresetMessage = (message as RoomWidgetDimmerSavePresetMessage);
+                    this.container.roomSession.updateMoodlightData(savePresetMessage.presetNumber, savePresetMessage.effectTypeId, savePresetMessage.color, savePresetMessage.brightness, savePresetMessage.apply);
+                }
+                break;
+            }
+            case RoomWidgetDimmerChangeStateMessage.CHANGE_STATE: {
+                if(this.canOpenWidget()) this.container.roomSession.toggleMoodlightState();
+                break;
+            }
+            case RoomWidgetDimmerPreviewMessage.PREVIEW_DIMMER_PRESET: {
+                const roomId            = this.container.roomSession.roomId;
+                const previewMessage    = (message as RoomWidgetDimmerPreviewMessage);
+
+                if(!previewMessage || !GetRoomEngine()) return null;
+
+                GetRoomEngine().updateObjectRoomColor(roomId, previewMessage.color, previewMessage.brightness, previewMessage.bgOnly);
+                break;
+            }
+        }
+
+        return null;
+    }
+
+    private canOpenWidget(): boolean
+    {
+        return (this.container.roomSession.isRoomOwner || (this.container.roomSession.controllerLevel >= RoomControllerLevel.GUEST) || GetSessionDataManager().isModerator);
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.ROOM_DIMMER;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [
+            RoomSessionDimmerPresetsEvent.ROOM_DIMMER_PRESETS,
+            RoomEngineDimmerStateEvent.ROOM_COLOR,
+            RoomEngineTriggerWidgetEvent.REMOVE_DIMMER
+        ];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [
+            RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER,
+            RoomWidgetDimmerSavePresetMessage.SAVE_PRESET,
+            RoomWidgetDimmerChangeStateMessage.CHANGE_STATE,
+            RoomWidgetDimmerPreviewMessage.PREVIEW_DIMMER_PRESET
+        ];
+    }
+}

src/api/nitro/room/widgets/handlers/index.ts

@@ -2,6 +2,7 @@ export * from './DoorbellWidgetHandler';
 export * from './FurniChooserWidgetHandler';
 export * from './FurnitureContextMenuWidgetHandler';
 export * from './FurnitureCustomStackHeightWidgetHandler';
+export * from './FurnitureDimmerWidgetHandler';
 export * from './FurnitureExternalImageWidgetHandler';
 export * from './FurniturePresentWidgetHandler';
 export * from './IRoomWidgetHandler';

src/api/nitro/room/widgets/messages/RoomWidgetDimmerChangeStateMessage.ts

@@ -0,0 +1,11 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetDimmerChangeStateMessage extends RoomWidgetMessage
+{
+    public static CHANGE_STATE: string = 'RWCDSM_CHANGE_STATE';
+
+    constructor()
+    {
+        super(RoomWidgetDimmerChangeStateMessage.CHANGE_STATE);
+    }
+}

src/api/nitro/room/widgets/messages/RoomWidgetDimmerPreviewMessage.ts

@@ -0,0 +1,34 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetDimmerPreviewMessage extends RoomWidgetMessage
+{
+    public static PREVIEW_DIMMER_PRESET: string = 'RWDPM_PREVIEW_DIMMER_PRESET';
+
+    private _color: number;
+    private _brightness: number;
+    private _bgOnly: boolean;
+
+    constructor(color: number, brightness: number, bgOnly: boolean)
+    {
+        super(RoomWidgetDimmerPreviewMessage.PREVIEW_DIMMER_PRESET);
+
+        this._color = color;
+        this._brightness = brightness;
+        this._bgOnly = bgOnly;
+    }
+
+    public get color(): number
+    {
+        return this._color;
+    }
+
+    public get brightness(): number
+    {
+        return this._brightness;
+    }
+
+    public get bgOnly(): boolean
+    {
+        return this._bgOnly;
+    }
+}

src/api/nitro/room/widgets/messages/RoomWidgetDimmerSavePresetMessage.ts

@@ -0,0 +1,48 @@
+import { RoomWidgetMessage } from './RoomWidgetMessage';
+
+export class RoomWidgetDimmerSavePresetMessage extends RoomWidgetMessage
+{
+    public static SAVE_PRESET: string = 'RWSDPM_SAVE_PRESET';
+
+    private _presetNumber: number;
+    private _effectTypeId: number;
+    private _color: number;
+    private _brightness: number;
+    private _apply: boolean;
+
+    constructor(presetNumber: number, effectTypeId: number, color: number, brightness: number, apply: boolean)
+    {
+        super(RoomWidgetDimmerSavePresetMessage.SAVE_PRESET);
+
+        this._presetNumber = presetNumber;
+        this._effectTypeId = effectTypeId;
+        this._color = color;
+        this._brightness = brightness;
+        this._apply = apply;
+    }
+
+    public get presetNumber(): number
+    {
+        return this._presetNumber;
+    }
+
+    public get effectTypeId(): number
+    {
+        return this._effectTypeId;
+    }
+
+    public get color(): number
+    {
+        return this._color;
+    }
+
+    public get brightness(): number
+    {
+        return this._brightness;
+    }
+
+    public get apply(): boolean
+    {
+        return this._apply;
+    }
+}

src/api/nitro/room/widgets/messages/index.ts

@@ -5,6 +5,9 @@ export * from './RoomWidgetChatMessage';
 export * from './RoomWidgetChatSelectAvatarMessage';
 export * from './RoomWidgetChatTypingMessage';
 export * from './RoomWidgetDanceMessage';
+export * from './RoomWidgetDimmerChangeStateMessage';
+export * from './RoomWidgetDimmerPreviewMessage';
+export * from './RoomWidgetDimmerSavePresetMessage';
 export * from './RoomWidgetFurniActionMessage';
 export * from './RoomWidgetFurniToWidgetMessage';
 export * from './RoomWidgetLetUserInMessage';

src/views/groups/views/members/GroupMembersView.tsx

@@ -115,7 +115,7 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
         }
 
         searchMembers(pageData.pageIndex);
-    }, [ pageData ]);
+    }, [ pageData, searchMembers ]);
 
     const acceptMembership = useCallback((member) =>
     {
@@ -124,7 +124,7 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
             SendMessageHook(new GroupMembershipAcceptComposer(pageData.groupId, member.id));
             searchMembers(pageData.pageIndex);
         }
-    }, [ pageData ]);
+    }, [ pageData, searchMembers ]);
 
     const removeMemberOrDeclineMembership = useCallback((member) =>
     {
@@ -138,66 +138,68 @@ export const GroupMembersView: FC<GroupMembersViewProps> = props =>
             setRemovingMemberName(member.name);
             SendMessageHook(new GroupConfirmRemoveMemberComposer(pageData.groupId, member.id));
         }
-    }, [ pageData ]);
+    }, [ pageData, searchMembers ]);
 
-    if(!pageData) return null;
+    if(!groupId) return null;
 
     return (
         <NitroCardView className="nitro-group-members" simple={ true }>
-            <NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData.groupTitle ]) } onCloseClick={ onClose } />
+            <NitroCardHeaderView headerText={ LocalizeText('group.members.title', ['groupName'], [ pageData ? pageData.groupTitle : '' ]) } onCloseClick={ onClose } />
-            <NitroCardContentView className="pb-2">
+            { pageData && <>
-                <div className="d-flex gap-2 align-items-center mb-2">
+                <NitroCardContentView className="pb-2">
-                    <div className="group-badge">
+                    <div className="d-flex gap-2 align-items-center mb-2">
-                        <BadgeImageView badgeCode={ pageData.badge } isGroup={ true } />
+                        <div className="group-badge">
+                            <BadgeImageView badgeCode={ pageData.badge } isGroup={ true } />
+                        </div>
+                        <div className="w-100">
+                            <input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } />
+                            <select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }>
+                                <option value="0">{ LocalizeText('group.members.search.all') }</option>
+                                <option value="1">{ LocalizeText('group.members.search.admins') }</option>
+                                <option value="2">{ LocalizeText('group.members.search.pending') }</option>
+                            </select>
+                        </div>
                     </div>
-                    <div className="w-100">
+                    <div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
-                        <input type="text" className="form-control form-control-sm w-100 mb-1" placeholder={ LocalizeText('group.members.searchinfo') } value={ searchQuery } onChange={ (e) => setSearchQuery(e.target.value) } onBlur={ () => searchMembers(pageData.pageIndex) } onKeyDown={ onKeyDown } />
+                        { pageData.result.map((member, index) =>
-                        <select className="form-select form-select-sm w-100" value={ searchLevelId } onChange={ (e) => selectSearchLevelId(Number(e.target.value)) }>
+                        {
-                            <option value="0">{ LocalizeText('group.members.search.all') }</option>
+                            return (
-                            <option value="1">{ LocalizeText('group.members.search.admins') }</option>
+                                <div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }>
-                            <option value="2">{ LocalizeText('group.members.search.pending') }</option>
+                                    <div className="list-member bg-white rounded d-flex text-black">
-                        </select>
+                                        <div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>
-                    </div>
+                                            <AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
-                </div>
+                                        </div>
-                <div className="row row-cols-2 align-content-start g-0 w-100 members-list overflow-auto">
+                                        <div className="p-1 w-100 d-flex flex-column justify-content-center">
-                    { pageData.result.map((member, index) =>
+                                            <div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div>
-                    {
+                                            { member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> }
-                        return (
+                                        </div>
-                            <div key={ index } className={ 'col pb-1' + classNames({ ' pe-1': index % 2 === 0 }) }>
+                                        <div className="d-flex flex-column pe-2 align-items-center justify-content-center">
-                                <div className="list-member bg-white rounded d-flex text-black">
+                                            <div className="d-flex align-items-center">
-                                    <div className="avatar-head flex-shrink-0 cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>
+                                                <i className={ 'icon icon-group-small-' + classNames({ 'owner': member.rank === GroupRank.OWNER, 'admin': member.rank === GroupRank.ADMIN, 'not-admin': member.rank === GroupRank.MEMBER, 'cursor-pointer': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
-                                        <AvatarImageView figure={ member.figure } headOnly={ true } direction={ 2 } />
+                                            </div>
-                                    </div>
+                                            { member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
-                                    <div className="p-1 w-100 d-flex flex-column justify-content-center">
+                                                <i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
-                                        <div className="fw-bold small cursor-pointer" onClick={ () => { GetUserProfile(member.id) } }>{ member.name }</div>
+                                            </div> }
-                                        { member.rank !== GroupRank.REQUESTED && <div className="text-muted fst-italic small">{ LocalizeText('group.members.since', ['date'], [member.joinedAt]) }</div> }
+                                            { member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
-                                    </div>
+                                                <i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
-                                    <div className="d-flex flex-column pe-2 align-items-center justify-content-center">
+                                            </div> }
-                                        <div className="d-flex align-items-center">
-                                            <i className={ 'icon icon-group-small-' + classNames({ 'owner': member.rank === GroupRank.OWNER, 'admin': member.rank === GroupRank.ADMIN, 'not-admin': member.rank === GroupRank.MEMBER, 'cursor-pointer': pageData.admin }) } title={ LocalizeText(getRankDescription(member)) } onClick={ () => toggleAdmin(member) } />
                                         </div>
-                                        { member.rank === GroupRank.REQUESTED && <div className="d-flex align-items-center">
-                                            <i className="icon cursor-pointer icon-accept" title={ LocalizeText('group.members.accept') } onClick={ () => acceptMembership(member) } />
-                                        </div> }
-                                        { member.rank !== GroupRank.OWNER && pageData.admin && member.id !== GetSessionDataManager().userId &&<div className="d-flex align-items-center mt-1">
-                                            <i className="icon cursor-pointer icon-deny" title={ LocalizeText(member.rank === GroupRank.REQUESTED ? 'group.members.reject' : 'group.members.kick') } onClick={ () => removeMemberOrDeclineMembership(member) } />
-                                        </div> }
                                     </div>
                                 </div>
-                            </div>
+                            );
-                        );
+                        }) }
-                    }) }
-                </div>
-                <div className="d-flex w-100 align-items-center">
-                    <div>
-                        <button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
                     </div>
-                    <div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div>
+                    <div className="d-flex w-100 align-items-center">
-                    <div>
+                        <div>
-                        <button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button>
+                            <button disabled={ pageData.pageIndex === 0 } className="btn btn-primary" onClick={ previousPage }><i className="fas fa-chevron-left" /></button>
+                        </div>
+                        <div className="text-center text-black w-100">{ LocalizeText('group.members.pageinfo', ['amount', 'page', 'totalPages'], [pageData.totalMembersCount.toString(), (pageData.pageIndex + 1).toString(), totalPages.toString()]) }</div>
+                        <div>
+                            <button disabled={ pageData.pageIndex === totalPages - 1 } className="btn btn-primary" onClick={ nextPage }><i className="fas fa-chevron-right" /></button>
+                        </div>
                     </div>
-                </div>
+                </NitroCardContentView>
-            </NitroCardContentView>
+            </> }
         </NitroCardView>
     );
 };

src/views/groups/views/room-information/GroupRoomInformationView.tsx

@@ -12,13 +12,13 @@ export const GroupRoomInformationView: FC<{}> = props =>
     const [ groupId, setGroupId ] = useState<number>(null);
     const [ groupInformation, setGroupInformation ] = useState<GroupInformationParser>(null);
     const [ isExpended, setIsExpended ] = useState<boolean>(true);
-    
+
     const onRoomInfoEvent = useCallback((event: RoomInfoEvent) =>
     {
         const parser = event.getParser();
         
         setGroupInformation(null);
-        
+
         if(parser.data.habboGroupId)
         {
             setGroupId(parser.data.habboGroupId);
@@ -33,7 +33,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
         const parser = event.getParser();
 
         if(parser.flag || groupId !== parser.id) return;
-
+        console.log(parser);
         setGroupInformation(null);
         setGroupInformation(parser);
     }, [ groupId ]);
@@ -110,7 +110,7 @@ export const GroupRoomInformationView: FC<{}> = props =>
                 <i className={ 'fas fa-chevron-' + (isExpended ? 'up' : 'down') } />
             </div>
             { isExpended && <>
-                <div className="d-flex cursor-pointer" onClick={ () => GetGroupInformation(groupInformation.id) }>
+                <div className="d-flex cursor-pointer" onClick={ () => GetGroupInformation(groupId) }>
                     <div className="group-badge flex-shrink-0 me-1">
                         <BadgeImageView badgeCode={ groupInformation.badge } isGroup={ true } />
                     </div>

src/views/room/RoomView.tsx

@@ -1,6 +1,6 @@
 import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
+import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomColorView } from './RoomColorView';
 import { RoomViewProps } from './RoomView.types';
@@ -42,6 +42,7 @@ export const RoomView: FC<RoomViewProps> = props =>
         widgetHandlerManager.registerHandler(new FurnitureCustomStackHeightWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureExternalImageWidgetHandler());
         widgetHandlerManager.registerHandler(new FurniturePresentWidgetHandler());
+        widgetHandlerManager.registerHandler(new FurnitureDimmerWidgetHandler());
 
         setWidgetHandler(widgetHandlerManager);
 

src/views/room/widgets/RoomWidgetsView.tsx

@@ -1,6 +1,7 @@
 import { RoomEngineDimmerStateEvent, RoomEngineEvent, RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent, RoomEngineUseProductEvent, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomSessionChatEvent, RoomSessionDanceEvent, RoomSessionDimmerPresetsEvent, RoomSessionDoorbellEvent, RoomSessionErrorMessageEvent, RoomSessionEvent, RoomSessionFriendRequestEvent, RoomSessionPetInfoUpdateEvent, RoomSessionPresentEvent, RoomSessionUserBadgesEvent, RoomZoomEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { CanManipulateFurniture, GetRoomEngine, IsFurnitureSelectionDisabled, LocalizeText, ProcessRoomObjectOperation, RoomWidgetFurniToWidgetMessage, RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../api';
+import { RoomWidgetDimmerStateUpdateEvent } from '../../../api/nitro/room/widgets/events/RoomWidgetDimmerStateUpdateEvent';
 import { useRoomEngineEvent, useRoomSessionManagerEvent } from '../../../hooks/events';
 import { useRoomContext } from '../context/RoomContext';
 import { AvatarInfoWidgetView } from './avatar-info/AvatarInfoWidgetView';
@@ -42,6 +43,9 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
                 return;
             }
             case RoomEngineDimmerStateEvent.ROOM_COLOR: {
+                const stateEvent = (event as RoomEngineDimmerStateEvent);
+
+                eventDispatcher.dispatchEvent(new RoomWidgetDimmerStateUpdateEvent(stateEvent.state, stateEvent.presetId, stateEvent.effectId, stateEvent.color, stateEvent.brightness));
                 return;
             }
         }

src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts

@@ -2,6 +2,5 @@ export class FurnitureDimmerData
 {
     constructor(
         public objectId: number,
-        public category: number,
+        public category: number) {}
-        public active: boolean) {}
 }

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

@@ -1,3 +1,9 @@
 .nitro-dimmer {
     width: 300px;
+
+    .dimmer-banner {
+        width: 56px;
+        height: 79px;
+        background: url(../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png) center no-repeat;
+    }
 }

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

@@ -1,6 +1,12 @@
-import { FC, useCallback, useState } from 'react';
+import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
-import { LocalizeText } from '../../../../../api';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import ReactSlider from 'react-slider';
+import { 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';
+import { CreateEventDispatcherHook, useRoomEngineEvent } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureDimmerData } from './FurnitureDimmerData';
 
@@ -9,72 +15,146 @@ export const FurnitureDimmerView: FC<{}> = props =>
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
 
-    // const onNitroEvent = useCallback((event: NitroEvent) =>
+    const [ isActive, setIsActive ] = useState<boolean>(false);
-    // {
+    const [ selectedPresetId, setSelectedPresetId ] = useState<number>(-1);
-    //     switch(event.type)
+    const [ presets, setPresets ] = useState<RoomDimmerPreset[]>([]);
-    //     {
-    //         case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER: {
-    //             const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
 
-    //             const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
+    const [ previewColor, setPreviewColor ] = useState<string>('#000000');
+    const [ previewBrightness, setPreviewBrightness ] = useState<number>(125);
+    const [ previewBgOnly, setPreviewBgOnly ] = useState<boolean>(false);
+
+    const previewColorInt = useMemo(() =>
+    {
+        return parseInt(previewColor.replace('#', ''), 16);
+    }, [ previewColor ]);
+
+    useEffect(() =>
+    {
+        if(selectedPresetId === -1 || presets.length === 0 || !isActive) return;
+
+        const preset = presets[selectedPresetId - 1];
+
+        if(!preset) return;
+
+        setPreviewColor(preset.color);
+        setPreviewBrightness(preset.brightness);
+        setPreviewBgOnly(preset.bgOnly);
+    }, [ selectedPresetId, presets ]);
+
+    useEffect(() =>
+    {
+        if(!widgetHandler || selectedPresetId === -1 || !isActive) return;
         
-    //             if(!roomObject) return;
+        widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(previewColorInt, previewBrightness, previewBgOnly));
+    }, [ previewBgOnly, previewBrightness, previewColor ]);
 
-    //             const data = roomObject.model.getValue<string[]>(RoomObjectVariable.FURNITURE_DATA);
+    const onNitroEvent = useCallback((event: NitroEvent) =>
-
+    {
-    //             console.log('data', data);
+        switch(event.type)
+        {
+            case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER: {
+                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
                 
-    //             setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category, false));
+                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
-    //             return;
+        
-    //         }
+                if(!roomObject) return;
-    //         case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
-    //             const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
 
-    //             setDimmerData(prevState =>
+                setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category));
-    //                 {
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, widgetEvent.objectId, widgetEvent.category, widgetEvent.roomId));
-    //                     if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
+                return;
+            }
+            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
+                const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
 
-    //                     return null;
+                setDimmerData(prevState =>
-    //                 });
+                    {
-    //             return;
+                        if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
-    //         }
-    //         case RoomWidgetDimmerUpdateEvent.RWDUE_PRESETS: {
-    //             const widgetEvent = (event as RoomWidgetDimmerUpdateEvent);
 
-    //             console.log(widgetEvent);
+                        return null;
-    //             return;
+                    });
-    //         }
+                return;
-    //         case RoomWidgetDimmerStateUpdateEvent.RWDSUE_DIMMER_STATE: {
+            }
-    //             const widgetEvent = (event as RoomWidgetDimmerStateUpdateEvent);
+            case RoomWidgetDimmerUpdateEvent.PRESETS: {
+                const widgetEvent = (event as RoomWidgetDimmerUpdateEvent);
 
-    //             console.log(widgetEvent);
+                setPresets(widgetEvent.presets);
-    //             return;
+                setSelectedPresetId(widgetEvent.selectedPresetId);
-    //         }
+                return;
-    //     }
+            }
-    // }, []);
+            case RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE: {
+                const widgetEvent = (event as RoomWidgetDimmerStateUpdateEvent);
 
-    // useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onNitroEvent);
+                setIsActive(widgetEvent.state === 1);
-    // CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, props.events, onNitroEvent);
+                return;
-    // CreateEventDispatcherHook(RoomWidgetDimmerUpdateEvent.RWDUE_PRESETS, props.events, onNitroEvent);
+            }
-    // CreateEventDispatcherHook(RoomWidgetDimmerStateUpdateEvent.RWDSUE_DIMMER_STATE, props.events, onNitroEvent);
+        }
+    }, [ widgetHandler ]);
 
-    const processAction = useCallback((type: string, value: string = null) =>
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_DIMMER, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetDimmerUpdateEvent.PRESETS, eventDispatcher, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE, eventDispatcher, onNitroEvent);
+
+    const processAction = useCallback((type: string) =>
     {
         switch(type)
         {
+            case 'toggle_state':
+                widgetHandler.processWidgetMessage(new RoomWidgetDimmerChangeStateMessage());
+                return;
             case 'close':
                 setDimmerData(null);
                 return;
+            case 'save':
+                widgetHandler.processWidgetMessage(new RoomWidgetDimmerSavePresetMessage(selectedPresetId, previewBgOnly ? 2 : 1, previewColorInt, previewBrightness, true));
+                return;
         }
-    }, []);
+    }, [ previewBgOnly, previewBrightness, previewColorInt, selectedPresetId, widgetHandler ]);
 
     if(!dimmerData) return null;
 
     return (
         <NitroCardView className="nitro-dimmer">
-            <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ event => processAction('close') } />
+            <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ () => processAction('close') } />
-            <NitroCardContentView>
+            <NitroCardContentView className="p-0">
-                
+                { !isActive && <div className="d-flex flex-column gap-2 align-items-center p-2">
+                    <div className="dimmer-banner"></div>
+                    <div className="bg-muted rounded p-1 text-center text-black">{ LocalizeText('widget.dimmer.info.off') }</div>
+                    <button className="btn-success btn w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.on') }</button>
+                </div> }
+                { isActive && <>
+                    <NitroCardTabsView>
+                        { presets.map(preset =>
+                            {
+                                return <NitroCardTabsItemView key={ preset.id } isActive={ selectedPresetId === preset.id } onClick={ () => setSelectedPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) }</NitroCardTabsItemView>
+                            }) }
+                    </NitroCardTabsView>
+                    <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) } />
+                        </div>
+                        <div className="form-group mb-2">
+                            <label className="fw-bold text-black">{ LocalizeText('widget.backgroundcolor.lightness') }</label>
+                            <ReactSlider
+                                className={ 'nitro-slider' }
+                                min={ 75 }
+                                max={ 255 }
+                                value={ previewBrightness }
+                                onChange={ newValue => setPreviewBrightness(newValue) }
+                                thumbClassName={ 'thumb degree' }
+                                renderThumb={ (props, state) => <div {...props}>{ state.valueNow - 75 }</div> } />
+                        </div>
+                        <div className="form-check mb-2">
+                            <input className="form-check-input" type="checkbox" checked={ previewBgOnly } onChange={ (e) => setPreviewBgOnly(e.target.checked) } />
+                            <label className="form-check-label text-black">{ LocalizeText('widget.dimmer.type.checkbox') }</label>
+                        </div>
+                        <div className="d-flex gap-2">
+                            <button className="btn btn-danger w-100" onClick={ () => processAction('toggle_state') }>{ LocalizeText('widget.dimmer.button.off') }</button>
+                            <button className="btn btn-success w-100" onClick={ () => processAction('save') }>{ LocalizeText('widget.dimmer.button.apply') }</button>
+                        </div>
+                    </div>
+                </> }
             </NitroCardContentView>
         </NitroCardView>
     );

src/views/shared/currency-icon/CurrencyIcon.scss

@@ -1,6 +1,6 @@
 .nitro-currency-icon {
     background-position: center;
     background-repeat: no-repeat;
-    width: 15px;
+    width: 18px;
-    height: 15px;
+    height: 17px;
 }

src/views/toolbar/ToolbarView.tsx

@@ -178,11 +178,6 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                             { (unseenInventoryCount > 0) && (
                                 <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenInventoryCount }</div>) }
                         </div>
-                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
-                            <i className="icon icon-friendall"></i>
-                            { (unseenFriendListCount > 0) && (
-                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
-                        </div>
                         { isInRoom && (
                             <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
                                 <i className="icon icon-camera"></i>
@@ -194,6 +189,13 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                     <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
                 </div>
                 <div className="d-flex toolbar-right-side">
+                    <div className="navigation-items">
+                        <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.FRIEND_LIST_ITEM) }>
+                            <i className="icon icon-friendall"></i>
+                            { (unseenFriendListCount > 0) && (
+                                <div className="position-absolute bg-danger px-1 py-0 rounded shadow count">{ unseenFriendListCount }</div>) }
+                        </div>
+                    </div>
                     <div id="toolbar-friend-bar-container" />
                 </div>
             </div>