Update friend furni widget

src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx

@@ -0,0 +1,66 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../api';
+import { Button, Column, DraggableWindow, Flex, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { useFurnitureFriendFurniWidget } from '../../../../hooks';
+
+export const FurnitureFriendFurniView: FC<{}> = props =>
+{
+    const { objectId = -1, type = 0, stage = 0, usernames = [], figures = [], date = null, close = null, respond = null } = useFurnitureFriendFurniWidget();
+
+    if(objectId === -1) return null;
+
+    if(stage > 0)
+    {
+        return (
+            <NitroCardView className="nitro-engraving-lock" theme="primary-slim">
+                <NitroCardHeaderView headerText={ LocalizeText('friend.furniture.confirm.lock.caption') } onCloseClick={ close } />
+                <NitroCardContentView>
+                    <h5 className="text-black text-center fw-bold mt-2 mb-2">
+                        { LocalizeText('friend.furniture.confirm.lock.subtitle') }
+                    </h5>
+                    <div className="d-flex justify-content-center mb-2">
+                        <div className={ `engraving-lock-stage-${ stage }` }></div>
+                    </div>
+                    { (stage === 2) &&
+                        <div className="text-small text-black text-center mb-2">{ LocalizeText('friend.furniture.confirm.lock.other.locked') }</div> }
+                    <Flex gap={ 1 }>
+                        <Button fullWidth onClick={ event => respond(false) }>{ LocalizeText('friend.furniture.confirm.lock.button.cancel') }</Button>
+                        <Button fullWidth variant="success" onClick={ event => respond(true) }>{ LocalizeText('friend.furniture.confirm.lock.button.confirm') }</Button>
+                    </Flex>
+                </NitroCardContentView>
+            </NitroCardView>
+        );
+    }
+
+    if(usernames.length > 0)
+    {
+        return (
+            <DraggableWindow handleSelector=".nitro-engraving-lock-view">
+                <div className={ `nitro-engraving-lock-view engraving-lock-${ type }` }>
+                    <div className="engraving-lock-close" onClick={ close } />
+                    <Flex justifyContent="center">
+                        <div className="engraving-lock-avatar">
+                            <LayoutAvatarImageView figure={ figures[0] } direction={ 2 } />
+                        </div>
+                        <div className="engraving-lock-avatar">
+                            <LayoutAvatarImageView figure={ figures[1] } direction={ 4 } />
+                        </div>
+                    </Flex>
+                    <Column justifyContent="between" className="mt-1">
+                        <Column alignItems="center" justifyContent="center" gap={ 1 }>
+                            <div>
+                                { (type === 0) && LocalizeText('lovelock.engraving.caption') }
+                                { (type === 3) && LocalizeText('wildwest.engraving.caption') }
+                            </div>
+                            <div>{ date }</div>
+                        </Column>
+                        <Flex justifyContent="center" gap={ 4 }>
+                            <div>{ usernames[0] }</div>
+                            <div>{ usernames[1] }</div>
+                        </Flex>
+                    </Column>
+                </div>
+            </DraggableWindow>
+        );
+    }
+}

src/components/room/widgets/furniture/FurnitureWidgets.scss

@@ -174,6 +174,82 @@
     }
 }
 
-@import "./friend-furni/FurnitureFriendFurniView";
+.nitro-engraving-lock {
+    width: 300px;
+
+    .engraving-lock-stage-1 {
+        width: 31px;
+        height: 39px;
+        background-position: -380px -43px;
+        background-image: url('../../../../assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
+    }
+
+    .engraving-lock-stage-2 {
+        width: 36px;
+        height: 43px;
+        background-position: -375px 0px;
+        background-image: url('../../../../assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
+    }
+}
+
+.nitro-engraving-lock-view {
+    width: 375px;
+    height: 210px;
+    background-position: 0px 0px;
+    background-image: url('../../../../assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
+
+    color: #622e54;
+    font-weight: bold;
+    font-size: 16px;
+    text-shadow: 0px 1px white;
+    
+    &.engraving-lock-3 {
+        background-position: 0px -210px;
+        color: #614110;
+    }
+
+    &.engraving-lock-4 {
+        background-position: 0px -420px;
+        color: #f1dcc8;
+        text-shadow: 0px 2px rgba(0, 0, 0, .4);
+
+        .engraving-lock-avatar {
+            margin-bottom: 10px;
+        }
+    }
+
+    .engraving-lock-close {
+        position: absolute;
+        cursor: pointer;
+        width: 15px;
+        height: 15px;
+        top: 34px;
+        right: 27px;
+    }
+
+    .engraving-lock-avatar {
+        width: 70px;
+        height: 120px;
+
+        div {
+            position: absolute;
+            margin-top: -5px;
+        }
+
+        &:nth-child(1) {
+            div {
+                margin-left: -10px;
+            }
+        }
+
+        &:nth-child(2) {
+            div {
+                margin-left: -15px;
+            }
+        }
+    }
+       
+}
+
 @import "./high-score/FurnitureHighScoreView";
 @import "./youtube-tv/FurnitureYoutubeDisplayView";

src/components/room/widgets/furniture/FurnitureWidgetsView.tsx

@@ -2,12 +2,12 @@ import { FC } from 'react';
 import { Base } from '../../../../common';
 import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
 import { FurnitureDimmerView } from './dimmer/FurnitureDimmerView';
-import { FurnitureFriendFurniView } from './friend-furni/FurnitureFriendFurniView';
 import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
 import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
 import { FurnitureCustomStackHeightView } from './FurnitureCustomStackHeightView';
 import { FurnitureExchangeCreditView } from './FurnitureExchangeCreditView';
 import { FurnitureExternalImageView } from './FurnitureExternalImageView';
+import { FurnitureFriendFurniView } from './FurnitureFriendFurniView';
 import { FurnitureGiftOpeningView } from './FurnitureGiftOpeningView';
 import { FurnitureManipulationMenuView } from './FurnitureManipulationMenuView';
 import { FurnitureMannequinView } from './FurnitureMannequinView';

src/components/room/widgets/furniture/friend-furni/FriendFurniLockData.ts

@@ -1,11 +0,0 @@
-export class FurnitureEngravingLockData
-{
-    constructor(
-        public objectId: number,
-        public category: number = 0,
-        public type: number = 0,
-        public usernames: string[] = [],
-        public figures: string[] = [],
-        public date: string = null) 
-    {}
-}

src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.scss

@@ -1,76 +0,0 @@
-.nitro-engraving-lock {
-    width: 300px;
-
-    .engraving-lock-stage-1 {
-        width: 31px;
-        height: 39px;
-        background-position: -380px -43px;
-        background-image: url('../../../../../assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
-    }
-
-    .engraving-lock-stage-2 {
-        width: 36px;
-        height: 43px;
-        background-position: -375px 0px;
-        background-image: url('../../../../../assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
-    }
-}
-
-.nitro-engraving-lock-view {
-    width: 375px;
-    height: 210px;
-    background-position: 0px 0px;
-    background-image: url('../../../../../assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
-
-    color: #622e54;
-    font-weight: bold;
-    font-size: 16px;
-    text-shadow: 0px 1px white;
-    
-    &.engraving-lock-3 {
-        background-position: 0px -210px;
-        color: #614110;
-    }
-
-    &.engraving-lock-4 {
-        background-position: 0px -420px;
-        color: #f1dcc8;
-        text-shadow: 0px 2px rgba(0, 0, 0, .4);
-
-        .engraving-lock-avatar {
-            margin-bottom: 10px;
-        }
-    }
-
-    .engraving-lock-close {
-        position: absolute;
-        cursor: pointer;
-        width: 15px;
-        height: 15px;
-        top: 34px;
-        right: 27px;
-    }
-
-    .engraving-lock-avatar {
-        width: 70px;
-        height: 120px;
-
-        div {
-            position: absolute;
-            margin-top: -5px;
-        }
-
-        &:nth-child(1) {
-            div {
-                margin-left: -10px;
-            }
-        }
-
-        &:nth-child(2) {
-            div {
-                margin-left: -15px;
-            }
-        }
-    }
-       
-}

src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx

@@ -1,139 +0,0 @@
-import { FriendFurniConfirmLockMessageComposer, LoveLockFurniFinishedEvent, LoveLockFurniFriendConfirmedEvent, LoveLockFurniStartEvent, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useState } from 'react';
-import { GetRoomEngine, GetRoomSession, LocalizeText, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
-import { DraggableWindow, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../common';
-import { UseEventDispatcherHook, UseMessageEventHook, UseRoomEngineEvent } from '../../../../../hooks';
-import { useRoomContext } from '../../../RoomContext';
-import { FurnitureEngravingLockData } from './FriendFurniLockData';
-
-export const FurnitureFriendFurniView: FC<{}> = props =>
-{
-    const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
-    const [ engravingLockData, setEngravingLockData ] = useState<FurnitureEngravingLockData>(null);
-    const [ engravingStage, setEngravingStage ] = useState(0);
-    
-    const onNitroEvent = (event: NitroEvent) =>
-    {
-        switch(event.type)
-        {
-            case RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING: {
-                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
-
-                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
-        
-                if(!roomObject) return;
-                
-                const data = roomObject.model.getValue<string[]>(RoomObjectVariable.FURNITURE_DATA);
-                const type = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_FRIENDFURNI_ENGRAVING);
-                
-                if(data[0] === '1')
-                {
-                    if(data.length !== 6) return;
-                    
-                    setEngravingLockData(new FurnitureEngravingLockData(widgetEvent.objectId, widgetEvent.category, type, [ data[1], data[2] ], [ data[3], data[4] ], data[5]));
-                    setEngravingStage(0);
-                }
-                return;
-            }
-            case RoomWidgetUpdateRoomObjectEvent.FURNI_REMOVED: {
-                const widgetEvent = (event as RoomWidgetUpdateRoomObjectEvent);
-
-                setEngravingLockData(prevState =>
-                {
-                    if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
-
-                    return null;
-                });
-                return;
-            }
-        }
-    };
-
-    UseRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING, onNitroEvent);
-    UseEventDispatcherHook(RoomWidgetUpdateRoomObjectEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
-
-    const onLoveLockFurniStartEvent = useCallback((event: LoveLockFurniStartEvent) =>
-    {
-        const parser = event.getParser();
-
-        setEngravingLockData(new FurnitureEngravingLockData(parser.furniId));
-        setEngravingStage(parser.start ? 1 : 2);
-    }, []);
-
-    UseMessageEventHook(LoveLockFurniStartEvent, onLoveLockFurniStartEvent);
-
-    const processAction = useCallback((type: string, value: string = null) =>
-    {
-        switch(type)
-        {
-            case 'close_view':
-                setEngravingLockData(null);
-                return;
-            case 'accept_request':
-                GetRoomSession().connection.send(new FriendFurniConfirmLockMessageComposer(engravingLockData.objectId, true));
-                processAction('close_request');
-                return;
-            case 'reject_request':
-                GetRoomSession().connection.send(new FriendFurniConfirmLockMessageComposer(engravingLockData.objectId, false));
-                processAction('close_request');
-                return;
-            case 'close_request':
-                setEngravingStage(0);
-                setEngravingLockData(null);
-                return;
-        }
-    }, [ engravingLockData ]);
-
-    const onLoveLockDoneEvent = useCallback((event: LoveLockFurniFinishedEvent | LoveLockFurniFriendConfirmedEvent) =>
-    {
-        processAction('close_request');
-    }, [ processAction ]);
-
-    UseMessageEventHook(LoveLockFurniFinishedEvent, onLoveLockDoneEvent);
-    UseMessageEventHook(LoveLockFurniFriendConfirmedEvent, onLoveLockDoneEvent);
-
-    return (
-        <>
-            { (engravingStage > 0) && <NitroCardView className="nitro-engraving-lock" theme="primary-slim">
-                <NitroCardHeaderView headerText={ LocalizeText('friend.furniture.confirm.lock.caption') } onCloseClick={ event => processAction('close_request') } />
-                <NitroCardContentView>
-                    <h5 className="text-black text-center fw-bold mt-2 mb-2">
-                        { LocalizeText('friend.furniture.confirm.lock.subtitle') }
-                    </h5>
-                    <div className="d-flex justify-content-center mb-2">
-                        <div className={ 'engraving-lock-stage-' + engravingStage }></div>
-                    </div>
-                    { engravingStage === 2 && <div className="text-small text-black text-center mb-2">{ LocalizeText('friend.furniture.confirm.lock.other.locked') }</div> }
-                    <div className="d-flex">
-                        <button className="btn btn-primary w-100 me-2" onClick={ event => processAction('reject_request') }>{ LocalizeText('friend.furniture.confirm.lock.button.cancel') }</button>
-                        <button className="btn btn-success w-100" onClick={ event => processAction('accept_request') }>{ LocalizeText('friend.furniture.confirm.lock.button.confirm') }</button>
-                    </div>
-                </NitroCardContentView>
-            </NitroCardView> }
-            { engravingLockData && engravingLockData.usernames.length > 0 && <DraggableWindow handleSelector=".nitro-engraving-lock-view">
-                <div className={ 'nitro-engraving-lock-view engraving-lock-' + engravingLockData.type }>
-                    <div className="engraving-lock-close" onClick={ event => processAction('close_view') }></div>
-                    <div className="d-flex justify-content-center">
-                        <div className="engraving-lock-avatar">
-                            <LayoutAvatarImageView figure={ engravingLockData.figures[0] } direction={ 2 } />
-                        </div>
-                        <div className="engraving-lock-avatar">
-                            <LayoutAvatarImageView figure={ engravingLockData.figures[1] } direction={ 4 } />
-                        </div>
-                    </div>
-                    <div className="text-center mt-1">
-                        <div>
-                            { engravingLockData.type === 0 && LocalizeText('lovelock.engraving.caption') }
-                            { engravingLockData.type === 3 && LocalizeText('wildwest.engraving.caption') }
-                        </div>
-                        <div>{ engravingLockData.date }</div>
-                        <div className="d-flex justify-content-center">
-                            <div className="me-4">{ engravingLockData.usernames[0] }</div>
-                            <div>{ engravingLockData.usernames[1] }</div>
-                        </div>
-                    </div>
-                </div>
-            </DraggableWindow> }
-        </>
-    );
-}

src/hooks/rooms/widgets/furniture/index.ts

@@ -2,6 +2,7 @@ export * from './useFurnitureBackgroundColorWidget';
 export * from './useFurnitureBadgeDisplayWidget';
 export * from './useFurnitureExchangeWidget';
 export * from './useFurnitureExternalImageWidget';
+export * from './useFurnitureFriendFurniWidget';
 export * from './useFurnitureManipulationWidget';
 export * from './useFurnitureMannequinWidget';
 export * from './useFurniturePresentWidget';

src/hooks/rooms/widgets/furniture/useFurnitureFriendFurniWidget.ts

@@ -0,0 +1,83 @@
+import { FriendFurniConfirmLockMessageComposer, LoveLockFurniFinishedEvent, LoveLockFurniFriendConfirmedEvent, LoveLockFurniStartEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
+import { useCallback, useState } from 'react';
+import { GetRoomEngine, GetRoomSession } from '../../../../api';
+import { UseRoomEngineEvent } from '../../../events';
+import { UseMessageEventHook } from '../../../messages';
+import { useFurniRemovedEvent } from '../../useFurniRemovedEvent';
+
+const useFurnitureFriendFurniWidgetState = () =>
+{
+    const [ objectId, setObjectId ] = useState(-1);
+    const [ category, setCategory ] = useState(-1);
+    const [ type, setType ] = useState(0);
+    const [ usernames, setUsernames ] = useState<string[]>([]);
+    const [ figures, setFigures ] = useState<string[]>([]);
+    const [ date, setDate ] = useState<string>(null);
+    const [ stage, setStage ] = useState(0);
+
+    const close = useCallback(() =>
+    {
+        setObjectId(-1);
+        setCategory(-1);
+        setType(0);
+        setUsernames([]);
+        setFigures([]);
+        setDate(null);
+    }, []);
+
+    const respond = (flag: boolean) =>
+    {
+        GetRoomSession().connection.send(new FriendFurniConfirmLockMessageComposer(objectId, flag));
+
+        close();
+    }
+
+    const onLoveLockFurniStartEvent = useCallback((event: LoveLockFurniStartEvent) =>
+    {
+        const parser = event.getParser();
+
+        setObjectId(parser.furniId);
+        setStage(parser.start ? 1 : 2);
+    }, []);
+
+    UseMessageEventHook(LoveLockFurniStartEvent, onLoveLockFurniStartEvent);
+
+    const onLoveLockDoneEvent = useCallback((event: LoveLockFurniFinishedEvent | LoveLockFurniFriendConfirmedEvent) =>
+    {
+        close();
+    }, [ close ]);
+
+    UseMessageEventHook(LoveLockFurniFinishedEvent, onLoveLockDoneEvent);
+    UseMessageEventHook(LoveLockFurniFriendConfirmedEvent, onLoveLockDoneEvent);
+
+    UseRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING, event =>
+    {
+        const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
+
+        if(!roomObject) return;
+
+        const data = roomObject.model.getValue<string[]>(RoomObjectVariable.FURNITURE_DATA);
+        const type = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_FRIENDFURNI_ENGRAVING);
+
+        if((data[0] !== '1') || (data.length !== 6)) return;
+        
+        setObjectId(event.objectId);
+        setCategory(event.category);
+        setType(type);
+        setUsernames([ data[1], data[2] ]);
+        setFigures([ data[3], data[4] ]);
+        setDate(data[5]);
+        setStage(0);
+    });
+
+    useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event =>
+    {
+        if((event.id !== objectId) || (event.category !== category)) return;
+
+        close();
+    });
+
+    return { objectId, type, usernames, figures, date, stage, close, respond };
+}
+
+export const useFurnitureFriendFurniWidget = useFurnitureFriendFurniWidgetState;