nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-22 22:30:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Feature - Mystery trophy (#135)

Browse Source
This commit is contained in:
object 2023-01-27 05:32:21 +01:00 committed by GitHub
parent 506fec2f61
commit 82f7cf13bb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 143 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/mysterytrophy/frank_mystery_trophy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

50
src/components/room/widgets/furniture/FurnitureMysteryTrophyOpenDialogView.tsx Normal file
View File

@ -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>
);
}

62
src/components/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -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;
}
}
}

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

@ -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) }>

19
src/hooks/rooms/widgets/furniture/useFurnitureContextMenuWidget.ts
View File

@ -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;