Feature - Mystery trophy (#135)

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

@@ -0,0 +1,50 @@
+import { OpenMysteryTrophyMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { LocalizeText, SendMessageComposer } from '../../../../api';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+
+interface FurnitureMysteryTrophyOpenDialogViewProps
+{
+    objectId: number;
+    onClose: () => void;
+}
+
+export const FurnitureMysteryTrophyOpenDialogView: FC<FurnitureMysteryTrophyOpenDialogViewProps> = props =>
+{
+    const { objectId = -1, onClose = null } = props;
+    const [ description, setDescription ] = useState<string>('');
+
+    const onConfirm = () =>
+    {
+        SendMessageComposer(new OpenMysteryTrophyMessageComposer(objectId, description));
+        onClose();
+    }
+    
+    if(objectId === -1) return null;
+
+    return (
+        <NitroCardView className="nitro-mysterytrophy-dialog no-resize" theme="primary-slim">
+            <NitroCardHeaderView center headerText={ LocalizeText('mysterytrophy.header.title') } onCloseClick={ onClose } />
+            <NitroCardContentView>
+                <Flex className="mysterytrophy-dialog-top p-3">
+                    <div className="mysterytrophy-image flex-shrink-0"></div>
+                    <div className="m-2">
+                        <Text variant="white" className="mysterytrophy-text-big">{ LocalizeText('mysterytrophy.header.description') }</Text>
+                    </div>
+                </Flex>
+                <Flex className="mysterytrophy-dialog-bottom p-2">
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center" className="bg-white rounded py-1 px-2 input-mysterytrophy-dialog">
+                            <textarea className="form-control form-control-sm input-mysterytrophy" value={ description } onChange={ event => setDescription(event.target.value) } />
+                            <div className="mysterytrophy-pencil-image flex-shrink-0 small fa-icon"></div>
+                        </Flex>
+                        <Flex className="mt-2" gap={ 5 } display="flex" justifyContent="center" alignItems="center">
+                            <Text pointer className="text-decoration" onClick={ () => onClose() }>{ LocalizeText('cancel') }</Text>
+                            <Button variant="success" onClick={ () => onConfirm() }>{ LocalizeText('generic.ok') }</Button>
+                        </Flex>
+                    </Column>
+                </Flex>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

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

@@ -462,3 +462,65 @@
         background-position: center;
     }
 }
+
+.nitro-mysterytrophy-dialog
+{
+    .mysterytrophy-dialog-top
+    {
+        width: 400px;
+        height: 120px;
+        border-radius: 2px;
+        background-color: #0E3F52;
+
+        .mysterytrophy-image
+        {
+            width: 80px;
+            height: 84px;
+            position: relative;
+            background-image: url('@/assets/images/mysterytrophy/frank_mystery_trophy.png');
+            background-repeat: no-repeat;
+        }
+
+        .mysterytrophy-text-big
+        {
+            font-size: 16px;
+        }
+    }
+
+    .mysterytrophy-dialog-bottom
+    {
+        display: flex;
+        justify-content: center;
+        width: 400px;
+        height: 120px;
+        border-radius: 2px;
+        background-color: #E9E9E1;
+
+        .input-mysterytrophy-dialog
+        {
+            width: 380px;
+            border: 1px solid black;
+
+            .input-mysterytrophy
+            {
+                width: 350px;
+                border: 0;
+                outline: 0;
+            }
+
+            .mysterytrophy-pencil-image
+            {
+                width: 16px;
+                height: 16px;
+                position: relative;
+                background-image: url('@/assets/images/infostand/pencil-icon.png');
+                background-repeat: no-repeat;
+            }
+        }
+
+        .text-decoration
+        {
+            text-decoration: underline;
+        }
+    }
+}

src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx

@@ -1,11 +1,12 @@
 import { ContextMenuEnum, CustomUserNotificationMessageEvent, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { GetGroupInformation, GetSessionDataManager, LocalizeText } from '../../../../../api';
-import { EFFECTBOX_OPEN, GROUP_FURNITURE, MONSTERPLANT_SEED_CONFIRMATION, PURCHASABLE_CLOTHING_CONFIRMATION, useFurnitureContextMenuWidget, useMessageEvent, useNotification } from '../../../../../hooks';
+import { EFFECTBOX_OPEN, GROUP_FURNITURE, MONSTERPLANT_SEED_CONFIRMATION, MYSTERYTROPHY_OPEN_DIALOG, PURCHASABLE_CLOTHING_CONFIRMATION, useFurnitureContextMenuWidget, useMessageEvent, useNotification } from '../../../../../hooks';
 import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
 import { FurnitureMysteryBoxOpenDialogView } from '../FurnitureMysteryBoxOpenDialogView';
+import { FurnitureMysteryTrophyOpenDialogView } from '../FurnitureMysteryTrophyOpenDialogView';
 import { EffectBoxConfirmView } from './EffectBoxConfirmView';
 import { MonsterPlantSeedConfirmView } from './MonsterPlantSeedConfirmView';
 import { PurchasableClothingConfirmView } from './PurchasableClothingConfirmView';
@@ -47,6 +48,8 @@ export const FurnitureContextMenuView: FC<{}> = props =>
                 <PurchasableClothingConfirmView objectId={ confirmingObjectId } onClose={ closeConfirm } /> }
             { (confirmMode === EFFECTBOX_OPEN) &&
                 <EffectBoxConfirmView objectId={ confirmingObjectId } onClose={ closeConfirm } /> }
+            { (confirmMode === MYSTERYTROPHY_OPEN_DIALOG) &&
+                <FurnitureMysteryTrophyOpenDialogView objectId={ confirmingObjectId } onClose={ closeConfirm } /> }
             <FurnitureMysteryBoxOpenDialogView ownerId={ objectOwnerId } />
             { (objectId >= 0) && mode &&
                 <ContextMenuView objectId={ objectId } category={ RoomObjectCategory.FLOOR } onClose={ onClose } fades={ true }>
@@ -95,6 +98,15 @@ export const FurnitureContextMenuView: FC<{}> = props =>
                                 { LocalizeText('mysterybox.context.' + ((isOwner) ? 'owner' : 'other') + '.use') }
                             </ContextMenuListItemView>
                         </> }
+                    { (mode === ContextMenuEnum.MYSTERY_TROPHY) &&
+                    <>
+                        <ContextMenuHeaderView>
+                            { LocalizeText('mysterytrophy.header.title') }
+                        </ContextMenuHeaderView>
+                        <ContextMenuListItemView onClick={ event => processAction('use_mystery_trophy') }>
+                            { LocalizeText('friendfurni.context.use') }
+                        </ContextMenuListItemView>
+                    </> }
                     { (mode === GROUP_FURNITURE) && groupData &&
                         <>
                             <ContextMenuHeaderView className="cursor-pointer text-truncate" onClick={ () => GetGroupInformation(groupData.guildId) }>

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

@@ -8,6 +8,7 @@ export const MONSTERPLANT_SEED_CONFIRMATION: string = 'MONSTERPLANT_SEED_CONFIRM
 export const PURCHASABLE_CLOTHING_CONFIRMATION: string = 'PURCHASABLE_CLOTHING_CONFIRMATION';
 export const GROUP_FURNITURE: string = 'GROUP_FURNITURE';
 export const EFFECTBOX_OPEN: string = 'EFFECTBOX_OPEN';
+export const MYSTERYTROPHY_OPEN_DIALOG: string = 'MYSTERYTROPHY_OPEN_DIALOG';
 
 const useFurnitureContextMenuWidgetState = () =>
 {
@@ -57,6 +58,10 @@ const useFurnitureContextMenuWidgetState = () =>
                 case 'use_mystery_box':
                     roomSession.useMultistateItem(objectId);
                     break;
+                case 'use_mystery_trophy':
+                    setConfirmMode(MYSTERYTROPHY_OPEN_DIALOG);
+                    setConfirmingObjectId(objectId);
+                    break;
                 case 'join_group':
                     TryJoinGroup(groupData.guildId);
                     setIsGroupMember(true);
@@ -76,7 +81,8 @@ const useFurnitureContextMenuWidgetState = () =>
         RoomEngineTriggerWidgetEvent.REQUEST_MONSTERPLANT_SEED_PLANT_CONFIRMATION_DIALOG,
         RoomEngineTriggerWidgetEvent.REQUEST_PURCHASABLE_CLOTHING_CONFIRMATION_DIALOG,
         RoomEngineTriggerWidgetEvent.REQUEST_EFFECTBOX_OPEN_DIALOG,
-        RoomEngineTriggerWidgetEvent.REQUEST_MYSTERYBOX_OPEN_DIALOG
+        RoomEngineTriggerWidgetEvent.REQUEST_MYSTERYBOX_OPEN_DIALOG,
+        RoomEngineTriggerWidgetEvent.REQUEST_MYSTERYTROPHY_OPEN_DIALOG
     ], event =>
     {
         const object = GetRoomEngine().getRoomObject(roomSession.roomId, event.objectId, event.category);
@@ -114,6 +120,14 @@ const useFurnitureContextMenuWidgetState = () =>
             case RoomEngineTriggerWidgetEvent.REQUEST_MYSTERYBOX_OPEN_DIALOG:
                 roomSession.useMultistateItem(object.id);
 
+                onClose();
+                return;
+            case RoomEngineTriggerWidgetEvent.REQUEST_MYSTERYTROPHY_OPEN_DIALOG:
+                if(!IsOwnerOfFurniture(object)) return;
+
+                setConfirmingObjectId(object.id);
+                setConfirmMode(MYSTERYTROPHY_OPEN_DIALOG);
+
                 onClose();
                 return;
             case RoomEngineTriggerWidgetEvent.OPEN_FURNI_CONTEXT_MENU:
@@ -131,6 +145,9 @@ const useFurnitureContextMenuWidgetState = () =>
                     case ContextMenuEnum.MYSTERY_BOX:
                         setMode(ContextMenuEnum.MYSTERY_BOX);
                         return;
+                    case ContextMenuEnum.MYSTERY_TROPHY:
+                        if(IsOwnerOfFurniture(object)) setMode(ContextMenuEnum.MYSTERY_TROPHY);
+                        return;
                     case ContextMenuEnum.RANDOM_TELEPORT:
                         setMode(ContextMenuEnum.RANDOM_TELEPORT);
                         return;