Room Widget: Engraving Lock and some other stuff

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

@@ -1,3 +1,4 @@
+@import './engraving-lock/FurnitureEngravingLockView';
 @import './exchange-credit/FurnitureExchangeCreditView';
 @import './manipulation-menu/FurnitureManipulationMenuView';
 @import './mannequin/FurnitureMannequinView';

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

@@ -1,3 +1,4 @@
+import { FurnitureEngravingLockView } from './engraving-lock/FurnitureEngravingLockView';
 import { FurnitureExchangeCreditView } from './exchange-credit/FurnitureExchangeCreditView';
 import { FurnitureWidgetsViewProps } from './FurnitureWidgetsView.types';
 import { FurnitureHighScoreView } from './high-score/FurnitureHighScoreView';
@@ -13,6 +14,7 @@ export function FurnitureWidgetsView(props: FurnitureWidgetsViewProps): JSX.Elem
 
     return (
         <div className="position-absolute nitro-room-widgets t-0 l-0">
+            <FurnitureEngravingLockView events={ events } />
             <FurnitureExchangeCreditView events={ events } />
             <FurnitureHighScoreView events={ events } />
             <FurnitureManipulationMenuView events={ events } />

src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockData.ts

@@ -0,0 +1,10 @@
+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/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.scss

@@ -0,0 +1,76 @@
+.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/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx

@@ -0,0 +1,149 @@
+import { LoveLockFurniFinishedEvent, LoveLockFurniFriendConfirmedEvent, LoveLockFurniStartEvent, LoveLockStartConfirmComposer, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from 'nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { GetRoomSession } from '../../../../../api';
+import { GetRoomEngine } from '../../../../../api/nitro/room/GetRoomEngine';
+import { DraggableWindow } from '../../../../../hooks/draggable-window/DraggableWindow';
+import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
+import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
+import { CreateMessageHook } from '../../../../../hooks/messages/message-event';
+import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
+import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
+import { NitroCardView } from '../../../../../layout/card/NitroCardView';
+import { LocalizeText } from '../../../../../utils/LocalizeText';
+import { AvatarImageView } from '../../../../avatar-image/AvatarImageView';
+import { RoomWidgetRoomObjectUpdateEvent } from '../../events/RoomWidgetRoomObjectUpdateEvent';
+import { FurnitureEngravingLockData } from './FurnitureEngravingLockData';
+import { FurnitureEngravingLockViewProps } from './FurnitureEngravingLockView.types';
+
+export const FurnitureEngravingLockView: FC<FurnitureEngravingLockViewProps> = props =>
+{
+    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]));
+                }
+                return;
+            }
+            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
+                const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
+
+                setEngravingLockData(prevState =>
+                    {
+                        if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
+
+                        return null;
+                    });
+                return;
+            }
+        }
+    };
+
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, props.events, onNitroEvent);
+
+    const onLoveLockFurniStartEvent = useCallback((event: LoveLockFurniStartEvent) =>
+    {
+        const parser = event.getParser();
+
+        setEngravingLockData(new FurnitureEngravingLockData(parser.furniId));
+
+        if(parser.start)
+            setEngravingStage(1);
+        else
+            setEngravingStage(2);
+
+    }, [ engravingStage ]);
+
+    const onLoveLockDoneEvent = useCallback((event: LoveLockFurniFinishedEvent | LoveLockFurniFriendConfirmedEvent) =>
+    {
+        processAction('close_request');
+    }, []);
+
+    CreateMessageHook(LoveLockFurniStartEvent, onLoveLockFurniStartEvent);
+    CreateMessageHook(LoveLockFurniFinishedEvent, onLoveLockDoneEvent);
+    CreateMessageHook(LoveLockFurniFriendConfirmedEvent, onLoveLockDoneEvent);
+
+    const processAction = useCallback((type: string, value: string = null) =>
+    {
+        switch(type)
+        {
+            case 'close_view':
+                setEngravingLockData(null);
+                return;
+            case 'accept_request':
+                GetRoomSession().connection.send(new LoveLockStartConfirmComposer(engravingLockData.objectId, true));
+                return;
+            case 'reject_request':
+                GetRoomSession().connection.send(new LoveLockStartConfirmComposer(engravingLockData.objectId, false));
+                processAction('close_request');
+                return;
+            case 'close_request':
+                setEngravingStage(0);
+                setEngravingLockData(null);
+                return;
+        }
+    }, [ engravingLockData ]);
+
+    return (
+        <>
+            { engravingStage > 0 && <NitroCardView className="nitro-engraving-lock">
+                <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 handle=".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">
+                            <AvatarImageView figure={ engravingLockData.figures[0] } direction={ 2 } />
+                        </div>
+                        <div className="engraving-lock-avatar">
+                            <AvatarImageView 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/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.types.ts

@@ -0,0 +1,4 @@
+import { FurnitureWidgetProps } from '../FurnitureWidget.types';
+
+export interface FurnitureEngravingLockViewProps extends FurnitureWidgetProps
+{}

src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx

@@ -23,6 +23,8 @@ export const FurnitureExchangeCreditView: FC<FurnitureExchangeCreditProps> = pro
 
                 const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
 
+                if(!roomObject) return;
+
                 const value = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_CREDIT_VALUE);
 
                 setExchangeCreditData(new FurnitureExchangeCreditData(widgetEvent.objectId, widgetEvent.category, value));

src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.tsx

@@ -1,17 +1,17 @@
-import { RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
+import { NitroEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
 import { FC } from 'react';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
 import { FurnitureHighScoreViewProps } from './FurnitureHighScoreView.types';
 
 export const FurnitureHighScoreView: FC<FurnitureHighScoreViewProps> = props =>
 {
-    const onRoomEngineObjectEvent = (event: RoomEngineObjectEvent) =>
+    const onNitroEvent = (event: NitroEvent) =>
     {
         console.log(event);
     };
 
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIGH_SCORE_DISPLAY, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIGH_SCORE_DISPLAY, onNitroEvent);
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIDE_HIGH_SCORE_DISPLAY, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIDE_HIGH_SCORE_DISPLAY, onNitroEvent);
 
     return null;
 }

src/views/room/widgets/furniture/present/FurniturePresentView.tsx

@@ -1,16 +1,16 @@
-import { RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
+import { NitroEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
 import { FC } from 'react';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
 import { FurniturePresentViewProps } from './FurniturePresentView.types';
 
 export const FurniturePresentView: FC<FurniturePresentViewProps> = props =>
 {
-    const onRoomEngineObjectEvent = (event: RoomEngineObjectEvent) =>
+    const onNitroEvent = (event: NitroEvent) =>
     {
         console.log(event);
     };
 
-    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onRoomEngineObjectEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onNitroEvent);
 
     return null;
 }