From 705569a5d1d34fa1600b3c95f6ade1af92f8cae2 Mon Sep 17 00:00:00 2001
From: Bill <billsonnn@live.com>
Date: Tue, 27 Jul 2021 03:28:26 -0400
Subject: [PATCH] Add trophy layout

---
 src/layout/Layout.scss                        |  1 +
 src/layout/index.ts                           |  1 +
 .../trophy/NitroLayoutTrophyView.scss}        |  4 +--
 src/layout/trophy/NitroLayoutTrophyView.tsx   | 29 +++++++++++++++++++
 .../trophy/NitroLayoutTrophyView.types.ts     |  8 +++++
 src/layout/trophy/index.ts                    |  2 ++
 .../widgets/furniture/FurnitureWidgets.scss   |  1 -
 .../furniture/trophy/FurnitureTrophyView.tsx  | 23 ++-------------
 8 files changed, 45 insertions(+), 24 deletions(-)
 rename src/{views/room/widgets/furniture/trophy/FurnitureTrophyView.scss => layout/trophy/NitroLayoutTrophyView.scss} (86%)
 create mode 100644 src/layout/trophy/NitroLayoutTrophyView.tsx
 create mode 100644 src/layout/trophy/NitroLayoutTrophyView.types.ts
 create mode 100644 src/layout/trophy/index.ts

diff --git a/src/layout/Layout.scss b/src/layout/Layout.scss
index a65b9d94..29d09c48 100644
--- a/src/layout/Layout.scss
+++ b/src/layout/Layout.scss
@@ -25,3 +25,4 @@
 @import './card/NitroCardView';
 @import './draggable-window/DraggableWindow';
 @import './loading-spinner/LoadingSpinnerView';
+@import './trophy/NitroLayoutTrophyView';
diff --git a/src/layout/index.ts b/src/layout/index.ts
index 2e0226d7..c9708368 100644
--- a/src/layout/index.ts
+++ b/src/layout/index.ts
@@ -2,3 +2,4 @@ export * from './card';
 export * from './draggable-window';
 export * from './loading-spinner';
 export * from './transitions';
+export * from './trophy';
diff --git a/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.scss b/src/layout/trophy/NitroLayoutTrophyView.scss
similarity index 86%
rename from src/views/room/widgets/furniture/trophy/FurnitureTrophyView.scss
rename to src/layout/trophy/NitroLayoutTrophyView.scss
index 878a0565..ded18038 100644
--- a/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.scss
+++ b/src/layout/trophy/NitroLayoutTrophyView.scss
@@ -1,4 +1,4 @@
-.nitro-trophy {
+.nitro-layout-trophy {
     position: relative;
     width: 340px;
     height: 173px;
@@ -7,7 +7,7 @@
     color: black;
     
     background-position: 0px 0px;
-    background-image: url('../../../../../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
+    background-image: url('../../assets/images/room-widgets/trophy-widget/trophy-spritesheet.png');
     
     &.trophy-2 {
         background-position: 0px 173px;
diff --git a/src/layout/trophy/NitroLayoutTrophyView.tsx b/src/layout/trophy/NitroLayoutTrophyView.tsx
new file mode 100644
index 00000000..0d66ef49
--- /dev/null
+++ b/src/layout/trophy/NitroLayoutTrophyView.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../utils/LocalizeText';
+import { DraggableWindow } from '../draggable-window';
+import { NitroLayoutTrophyViewProps } from './NitroLayoutTrophyView.types';
+
+export const NitroLayoutTrophyView: FC<NitroLayoutTrophyViewProps> = props =>
+{
+    const { color = '', message = '', date = '', senderName = '', onCloseClick = null } = props;
+
+    return (
+        <DraggableWindow handle=".drag-handler">
+            <div className={ `nitro-layout-trophy trophy-${ color }` }>
+                <div className="trophy-header drag-handler">
+                    <div className="float-end trophy-close" onClick={ onCloseClick }></div>
+                    <div className="trophy-title fw-bold text-center">
+                        { LocalizeText('widget.furni.trophy.title') }
+                    </div>
+                </div>
+                <div className="trophy-content">
+                    { message }
+                </div>
+                <div className="trophy-footer d-flex justify-content-between fw-bold">
+                    <div>{ date }</div>
+                    <div>{ senderName }</div>
+                </div>
+            </div>
+        </DraggableWindow>
+    );
+}
diff --git a/src/layout/trophy/NitroLayoutTrophyView.types.ts b/src/layout/trophy/NitroLayoutTrophyView.types.ts
new file mode 100644
index 00000000..fd196e94
--- /dev/null
+++ b/src/layout/trophy/NitroLayoutTrophyView.types.ts
@@ -0,0 +1,8 @@
+export interface NitroLayoutTrophyViewProps
+{
+    color: string;
+    message: string;
+    date: string;
+    senderName: string;
+    onCloseClick: () => void;
+}
diff --git a/src/layout/trophy/index.ts b/src/layout/trophy/index.ts
new file mode 100644
index 00000000..5adbb8fe
--- /dev/null
+++ b/src/layout/trophy/index.ts
@@ -0,0 +1,2 @@
+export * from './NitroLayoutTrophyView';
+export * from './NitroLayoutTrophyView.types';
diff --git a/src/views/room/widgets/furniture/FurnitureWidgets.scss b/src/views/room/widgets/furniture/FurnitureWidgets.scss
index 1a56f4e1..9f5271ea 100644
--- a/src/views/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/views/room/widgets/furniture/FurnitureWidgets.scss
@@ -4,4 +4,3 @@
 @import './manipulation-menu/FurnitureManipulationMenuView';
 @import './mannequin/FurnitureMannequinView';
 @import './stickie/FurnitureStickieView';
-@import './trophy/FurnitureTrophyView';
diff --git a/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx b/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx
index 9a1e6b45..98b8c543 100644
--- a/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx
+++ b/src/views/room/widgets/furniture/trophy/FurnitureTrophyView.tsx
@@ -3,8 +3,7 @@ import { FC, useCallback, useState } from 'react';
 import { GetRoomEngine } from '../../../../../api';
 import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
 import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
-import { DraggableWindow } from '../../../../../layout/draggable-window/DraggableWindow';
-import { LocalizeText } from '../../../../../utils/LocalizeText';
+import { NitroLayoutTrophyView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 import { RoomWidgetRoomObjectUpdateEvent } from '../../../events';
 import { FurnitureTrophyData } from './FurnitureTrophyData';
@@ -70,23 +69,5 @@ export const FurnitureTrophyView: FC<{}> = props =>
 
     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">
-                        { LocalizeText('widget.furni.trophy.title') }
-                    </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>
-    );
+    return <NitroLayoutTrophyView color={ trophyData.color } message={ trophyData.message } date={ trophyData.date } senderName={ trophyData.ownerName } onCloseClick={ () => processAction('close') } />;
 }