Trophy Room Widget

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

@@ -1,2 +1,3 @@
 @import './manipulation-menu/FurnitureManipulationMenuView';
 @import './stickie/FurnitureStickieView';
+@import './trophy/FurnitureTrophyView';

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

@@ -4,6 +4,7 @@ import { FurnitureManipulationMenuView } from './manipulation-menu/FurnitureMani
 import { FurnitureMannequinView } from './mannequin/FurnitureMannequinView';
 import { FurniturePresentView } from './present/FurniturePresentView';
 import { FurnitureStickieView } from './stickie/FurnitureStickieView';
+import { FurnitureTrophyView } from './trophy/FurnitureTrophyView';
 
 export function FurnitureWidgetsView(props: FurnitureWidgetsViewProps): JSX.Element
 {
@@ -16,6 +17,7 @@ export function FurnitureWidgetsView(props: FurnitureWidgetsViewProps): JSX.Elem
             <FurnitureMannequinView events={ events } />
             <FurniturePresentView events={ events } />
             <FurnitureStickieView events={ events } />
+            <FurnitureTrophyView events={ events } />
         </div>
     );
 }

src/views/room/widgets/furniture/trophy/FurnitureTrophyData.ts

@@ -0,0 +1,10 @@
+export class FurnitureTrophyData
+{
+    constructor(
+        public objectId: number,
+        public category: number,
+        public color: string,
+        public ownerName: string,
+        public date: string,
+        public message: string) {}
+}

src/views/room/widgets/furniture/trophy/FurnitureTrophyView.scss

@@ -0,0 +1,47 @@
+.nitro-trophy {
+    position: relative;
+    width: 340px;
+    height: 173px;
+    top: 25px;
+    left: 25px;
+    color: black;
+    
+    background-position: 0px 0px;
+    background-image: url('../../../../../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
+    
+    &.trophy-2 {
+        background-position: 0px 173px;
+    }
+
+    &.trophy-3 {
+        background-position: 0px 346px;
+    }
+
+    .trophy-header {
+        .trophy-close {
+            position: absolute;
+            cursor: pointer;
+            width: 15px;
+            height: 15px;
+            top: 5px;
+            right: 5px;
+        }
+
+        .trophy-title {
+            padding-top: 3px;
+        }
+    }
+
+    .trophy-content {
+        width: 297px;
+        height: 110px;
+        margin-top: 3px;
+        margin-left: 23px;
+    }
+
+    .trophy-footer {
+        width: 297px;
+        margin-top: 5px;
+        margin-left: 23px;
+    }
+}

src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx

@@ -0,0 +1,90 @@
+import { NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from 'nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { GetRoomEngine } from '../../../../../api';
+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 { RoomWidgetRoomObjectUpdateEvent } from '../../events';
+import { FurnitureTrophyData } from './FurnitureTrophyData';
+import { FurnitureTrophyViewProps } from './FurnitureTrophyView.types';
+
+export const FurnitureTrophyView: FC<FurnitureTrophyViewProps> = props =>
+{
+    const [ trophyData, setTrophyData ] = useState<FurnitureTrophyData>(null);
+
+    const onNitroEvent = useCallback((event: NitroEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomEngineTriggerWidgetEvent.REQUEST_TROPHY: {
+                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
+
+                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
+
+                if(!roomObject) return;
+                
+                let data  = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
+                let extra = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_EXTRAS);
+
+                if(!extra) extra = '0';
+
+                const color     = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_COLOR);
+                const ownerName = data.substring(0, data.indexOf('\t'));
+
+                data = data.substring((ownerName.length + 1), data.length);
+
+                const trophyDate    = data.substring(0, data.indexOf('\t'));
+                const trophyText    = data.substr((trophyDate.length + 1), data.length);
+
+                setTrophyData(new FurnitureTrophyData(widgetEvent.objectId, widgetEvent.category, color, ownerName, trophyDate, trophyText));
+                return;
+            }
+            case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
+                const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
+
+                setTrophyData(prevState =>
+                    {
+                        if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
+
+                        return null;
+                    });
+                return;
+            }
+        }
+    }, []);
+
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_TROPHY, onNitroEvent);
+    CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, props.events, onNitroEvent);
+
+    const processAction = useCallback((type: string, value: string = null) =>
+    {
+        switch(type)
+        {
+            case 'close':
+                setTrophyData(null);
+                return;
+        }
+    }, []);
+
+    if(!trophyData) return null;
+
+    return (
+        <DraggableWindow handle=".drag-handler">
+            <div className={ "nitro-trophy trophy-" + trophyData.color }>
+                <div className="trophy-header drag-handler">
+                    <div className="float-end trophy-close" onClick={ event => processAction('close') }></div>
+                    <div className="trophy-title fw-bold text-center">
+                        Trophy
+                    </div>
+                </div>
+                <div className="trophy-content">
+                    { trophyData.message }
+                </div>
+                <div className="trophy-footer d-flex justify-content-between fw-bold">
+                    <div>{ trophyData.date }</div>
+                    <div>{ trophyData.ownerName }</div>
+                </div>
+            </div>
+        </DraggableWindow>
+    );
+}

src/views/room/widgets/furniture/trophy/FurnitureTrophyView.types.ts

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