diff --git a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts index 8e695992..cfae6512 100644 --- a/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts +++ b/src/api/nitro/room/widgets/events/RoomDimmerPreset.ts @@ -1,16 +1,16 @@ export class RoomDimmerPreset { - private _id: number = 0; - private _type: number = 0; - private _color: number = 0; - private _intensity: number = 0; + private _id: number; + private _bgOnly: boolean; + private _color: string; + 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; } } diff --git a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts index 9ff12a50..74f149b7 100644 --- a/src/api/nitro/room/widgets/events/RoomWidgetDimmerUpdateEvent.ts +++ b/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; } diff --git a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts index 36d6aa58..0695304a 100644 --- a/src/api/nitro/room/widgets/handlers/FurnitureDimmerWidgetHandler.ts +++ b/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++; } diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx index 2b5dee4e..5033181f 100644 --- a/src/views/room/widgets/RoomWidgetsView.tsx +++ b/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 = 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; } } diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts index 3076cea2..0836e20f 100644 --- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts +++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerData.ts @@ -2,6 +2,5 @@ export class FurnitureDimmerData { constructor( public objectId: number, - public category: number, - public active: boolean) {} + public category: number) {} } diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx index d94202dc..18cd0bcf 100644 --- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx +++ b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.tsx @@ -1,10 +1,12 @@ -import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer'; -import { FC, useCallback, useState } from 'react'; -import { GetRoomEngine, LocalizeText, RoomWidgetDimmerUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from '../../../../../api'; +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 { 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(null); + const [ isActive, setIsActive ] = useState(false); + const [ selectedPresetId, setSelectedPresetId ] = useState(-1); + const [ presets, setPresets ] = useState([]); + + const [ previewColor, setPreviewColor ] = useState('#000000'); + const [ previewBrightness, setPreviewBrightness ] = useState(125); + const [ previewBgOnly, setPreviewBgOnly ] = useState(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(RoomObjectVariable.FURNITURE_DATA); - - setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category, false)); + setDimmerData(new FurnitureDimmerData(widgetEvent.objectId, widgetEvent.category)); + widgetHandler.processWidgetMessage(new RoomWidgetFurniToWidgetMessage(RoomWidgetFurniToWidgetMessage.REQUEST_DIMMER, widgetEvent.objectId, widgetEvent.category, widgetEvent.roomId)); 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 ( - + processAction('close') } /> - - { !dimmerData.active &&
+ + { !isActive &&
{ LocalizeText('widget.dimmer.info.off') }
} + { isActive && <> + + { presets.map(preset => + { + return setSelectedPresetId(preset.id) }>{ LocalizeText(`widget.dimmer.tab.${preset.id}`) } + }) } + +
+
+ + setPreviewColor(e.target.value) } /> +
+
+ + setPreviewBrightness(newValue) } + thumbClassName={ 'thumb degree' } + renderThumb={ (props, state) =>
{ state.valueNow - 75 }
} /> +
+
+ setPreviewBgOnly(e.target.checked) } /> + +
+
+ + +
+
+ } );