Moodlight update

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

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

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

@@ -36,9 +36,9 @@ export class RoomWidgetDimmerUpdateEvent extends RoomWidgetUpdateEvent
         this._selectedPresetId = k;
     }
 
-    public setPresetValues(id: number, type: number, color: number, intensity: number):void
+    public setPresetValues(id: number, bgOnly: boolean, color: string, brightness: number):void
     {
-        const preset = new RoomDimmerPreset(id, type, color, intensity);
+        const preset = new RoomDimmerPreset(id, bgOnly, color, brightness);
 
         this._presets[(id - 1)] = preset;
     }

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

@@ -25,7 +25,7 @@ export class FurnitureDimmerWidgetHandler extends RoomWidgetHandler
                 {
                     const preset = presetsEvent.getPreset(i);
 
-                    if(preset) updateEvent.setPresetValues(preset.id, preset.type, preset.color, preset.light);
+                    if(preset) updateEvent.setPresetValues(preset.id, preset.bgOnly, preset.color, preset.brightness);
 
                     i++;
                 }

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.tsx

@@ -1,10 +1,12 @@
-import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
+import { NitroEvent, RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useState } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { GetRoomEngine, LocalizeText, RoomWidgetDimmerUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api';
+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, NitroCardView } from '../../../../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 import { FurnitureDimmerData } from './FurnitureDimmerData';
 
@@ -13,21 +15,52 @@ export const FurnitureDimmerView: FC<{}> = props =>
     const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
     const [ dimmerData, setDimmerData ] = useState<FurnitureDimmerData>(null);
 
+    const [ isActive, setIsActive ] = useState<boolean>(false);
+    const [ selectedPresetId, setSelectedPresetId ] = useState<number>(-1);
+    const [ presets, setPresets ] = useState<RoomDimmerPreset[]>([]);
+
+    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;
+        
+        widgetHandler.processWidgetMessage(new RoomWidgetDimmerPreviewMessage(previewColorInt, previewBrightness, previewBgOnly));
+    }, [ previewBgOnly, previewBrightness, previewColor ]);
+
     const onNitroEvent = useCallback((event: NitroEvent) =>
     {
         switch(event.type)
         {
             case RoomEngineTriggerWidgetEvent.REQUEST_DIMMER: {
                 const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
-                console.log(widgetEvent);
                 
                 const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
         
                 if(!roomObject) return;
 
-                const data = roomObject.model.getValue<string[]>(RoomObjectVariable.FURNITURE_DATA);
+                setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category));
-                
+                widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, widgetEvent.objectId, widgetEvent.category, widgetEvent.roomId));
-                setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category, false));
                 return;
             }
             case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
@@ -44,24 +77,25 @@ export const FurnitureDimmerView: FC<{}> = props =>
             case RoomWidgetDimmerUpdateEvent.PRESETS: {
                 const widgetEvent = (event as RoomWidgetDimmerUpdateEvent);
 
-                console.log(widgetEvent);
+                setPresets(widgetEvent.presets);
+                setSelectedPresetId(widgetEvent.selectedPresetId);
                 return;
             }
             case RoomWidgetDimmerStateUpdateEvent.DIMMER_STATE: {
                 const widgetEvent = (event as RoomWidgetDimmerStateUpdateEvent);
 
-                console.log(widgetEvent);
+                setIsActive(widgetEvent.state === 1);
                 return;
             }
         }
-    }, []);
+    }, [ widgetHandler ]);
 
     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, value: string = null) =>
+    const processAction = useCallback((type: string) =>
     {
         switch(type)
         {
@@ -71,20 +105,56 @@ export const FurnitureDimmerView: FC<{}> = props =>
             case 'close':
                 setDimmerData(null);
                 return;
+            case 'save':
+                widgetHandler.processWidgetMessage(new RoomWidgetDimmerSavePresetMessage(selectedPresetId, previewBgOnly ? 2 : 1, previewColorInt, previewBrightness, true));
+                return;
         }
-    }, [ widgetHandler ]);
+    }, [ previewBgOnly, previewBrightness, previewColorInt, selectedPresetId, widgetHandler ]);
 
     if(!dimmerData) return null;
 
     return (
-        <NitroCardView className="nitro-dimmer" simple={ true }>
+        <NitroCardView className="nitro-dimmer">
             <NitroCardHeaderView headerText={ LocalizeText('widget.dimmer.title') } onCloseClick={ () => processAction('close') } />
-            <NitroCardContentView>
+            <NitroCardContentView className="p-0">
-                { !dimmerData.active && <div className="d-flex flex-column gap-2 align-items-center">
+                { !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>
     );