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

Update friend furni widget

Browse Source
This commit is contained in:
Bill 2022-04-20 23:59:38 -04:00
parent f57df3b57f
commit 0be763c59b
8 changed files with 228 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/room/widgets/furniture/FurnitureFriendFurniView.tsx Normal file
View File

@ -0,0 +1,66 @@
import { FC } from 'react';
import { LocalizeText } from '../../../../api';
import { Button, Column, DraggableWindow, Flex, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { useFurnitureFriendFurniWidget } from '../../../../hooks';
export const FurnitureFriendFurniView: FC<{}> = props =>
{
const { objectId = -1, type = 0, stage = 0, usernames = [], figures = [], date = null, close = null, respond = null } = useFurnitureFriendFurniWidget();
if(objectId === -1) return null;
if(stage > 0)
{
return (
<NitroCardView className="nitro-engraving-lock" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('friend.furniture.confirm.lock.caption') } onCloseClick={ close } />
<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-${ stage }` }></div>
</div>
{ (stage === 2) &&
<div className="text-small text-black text-center mb-2">{ LocalizeText('friend.furniture.confirm.lock.other.locked') }</div> }
<Flex gap={ 1 }>
<Button fullWidth onClick={ event => respond(false) }>{ LocalizeText('friend.furniture.confirm.lock.button.cancel') }</Button>
<Button fullWidth variant="success" onClick={ event => respond(true) }>{ LocalizeText('friend.furniture.confirm.lock.button.confirm') }</Button>
</Flex>
</NitroCardContentView>
</NitroCardView>
);
}
if(usernames.length > 0)
{
return (
<DraggableWindow handleSelector=".nitro-engraving-lock-view">
<div className={ `nitro-engraving-lock-view engraving-lock-${ type }` }>
<div className="engraving-lock-close" onClick={ close } />
<Flex justifyContent="center">
<div className="engraving-lock-avatar">
<LayoutAvatarImageView figure={ figures[0] } direction={ 2 } />
</div>
<div className="engraving-lock-avatar">
<LayoutAvatarImageView figure={ figures[1] } direction={ 4 } />
</div>
</Flex>
<Column justifyContent="between" className="mt-1">
<Column alignItems="center" justifyContent="center" gap={ 1 }>
<div>
{ (type === 0) && LocalizeText('lovelock.engraving.caption') }
{ (type === 3) && LocalizeText('wildwest.engraving.caption') }
</div>
<div>{ date }</div>
</Column>
<Flex justifyContent="center" gap={ 4 }>
<div>{ usernames[0] }</div>
<div>{ usernames[1] }</div>
</Flex>
</Column>
</div>
</DraggableWindow>
);
}
}

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

@ -174,6 +174,82 @@
}
}
@import "./friend-furni/FurnitureFriendFurniView";
.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;
}
}
}
}
@import "./high-score/FurnitureHighScoreView";
@import "./youtube-tv/FurnitureYoutubeDisplayView";

2
src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
View File

@ -2,12 +2,12 @@ import { FC } from 'react';
import { Base } from '../../../../common';
import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
import { FurnitureDimmerView } from './dimmer/FurnitureDimmerView';
import { FurnitureFriendFurniView } from './friend-furni/FurnitureFriendFurniView';
import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
import { FurnitureCustomStackHeightView } from './FurnitureCustomStackHeightView';
import { FurnitureExchangeCreditView } from './FurnitureExchangeCreditView';
import { FurnitureExternalImageView } from './FurnitureExternalImageView';
import { FurnitureFriendFurniView } from './FurnitureFriendFurniView';
import { FurnitureGiftOpeningView } from './FurnitureGiftOpeningView';
import { FurnitureManipulationMenuView } from './FurnitureManipulationMenuView';
import { FurnitureMannequinView } from './FurnitureMannequinView';

11
src/components/room/widgets/furniture/friend-furni/FriendFurniLockData.ts
View File

@ -1,11 +0,0 @@
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)
{}
}

76
src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.scss
View File

@ -1,76 +0,0 @@
.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;
}
}
}
}

139
src/components/room/widgets/furniture/friend-furni/FurnitureFriendFurniView.tsx
View File

@ -1,139 +0,0 @@
import { FriendFurniConfirmLockMessageComposer, LoveLockFurniFinishedEvent, LoveLockFurniFriendConfirmedEvent, LoveLockFurniStartEvent, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetRoomEngine, GetRoomSession, LocalizeText, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
import { DraggableWindow, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../common';
import { UseEventDispatcherHook, UseMessageEventHook, UseRoomEngineEvent } from '../../../../../hooks';
import { useRoomContext } from '../../../RoomContext';
import { FurnitureEngravingLockData } from './FriendFurniLockData';
export const FurnitureFriendFurniView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
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]));
setEngravingStage(0);
}
return;
}
case RoomWidgetUpdateRoomObjectEvent.FURNI_REMOVED: {
const widgetEvent = (event as RoomWidgetUpdateRoomObjectEvent);
setEngravingLockData(prevState =>
{
if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
return null;
});
return;
}
}
};
UseRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING, onNitroEvent);
UseEventDispatcherHook(RoomWidgetUpdateRoomObjectEvent.FURNI_REMOVED, eventDispatcher, onNitroEvent);
const onLoveLockFurniStartEvent = useCallback((event: LoveLockFurniStartEvent) =>
{
const parser = event.getParser();
setEngravingLockData(new FurnitureEngravingLockData(parser.furniId));
setEngravingStage(parser.start ? 1 : 2);
}, []);
UseMessageEventHook(LoveLockFurniStartEvent, onLoveLockFurniStartEvent);
const processAction = useCallback((type: string, value: string = null) =>
{
switch(type)
{
case 'close_view':
setEngravingLockData(null);
return;
case 'accept_request':
GetRoomSession().connection.send(new FriendFurniConfirmLockMessageComposer(engravingLockData.objectId, true));
processAction('close_request');
return;
case 'reject_request':
GetRoomSession().connection.send(new FriendFurniConfirmLockMessageComposer(engravingLockData.objectId, false));
processAction('close_request');
return;
case 'close_request':
setEngravingStage(0);
setEngravingLockData(null);
return;
}
}, [ engravingLockData ]);
const onLoveLockDoneEvent = useCallback((event: LoveLockFurniFinishedEvent | LoveLockFurniFriendConfirmedEvent) =>
{
processAction('close_request');
}, [ processAction ]);
UseMessageEventHook(LoveLockFurniFinishedEvent, onLoveLockDoneEvent);
UseMessageEventHook(LoveLockFurniFriendConfirmedEvent, onLoveLockDoneEvent);
return (
<>
{ (engravingStage > 0) && <NitroCardView className="nitro-engraving-lock" theme="primary-slim">
<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 handleSelector=".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">
<LayoutAvatarImageView figure={ engravingLockData.figures[0] } direction={ 2 } />
</div>
<div className="engraving-lock-avatar">
<LayoutAvatarImageView 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> }
</>
);
}

1
src/hooks/rooms/widgets/furniture/index.ts
View File

@ -2,6 +2,7 @@ export * from './useFurnitureBackgroundColorWidget';
export * from './useFurnitureBadgeDisplayWidget';
export * from './useFurnitureExchangeWidget';
export * from './useFurnitureExternalImageWidget';
export * from './useFurnitureFriendFurniWidget';
export * from './useFurnitureManipulationWidget';
export * from './useFurnitureMannequinWidget';
export * from './useFurniturePresentWidget';

83
src/hooks/rooms/widgets/furniture/useFurnitureFriendFurniWidget.ts Normal file
View File

@ -0,0 +1,83 @@
import { FriendFurniConfirmLockMessageComposer, LoveLockFurniFinishedEvent, LoveLockFurniFriendConfirmedEvent, LoveLockFurniStartEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from '@nitrots/nitro-renderer';
import { useCallback, useState } from 'react';
import { GetRoomEngine, GetRoomSession } from '../../../../api';
import { UseRoomEngineEvent } from '../../../events';
import { UseMessageEventHook } from '../../../messages';
import { useFurniRemovedEvent } from '../../useFurniRemovedEvent';
const useFurnitureFriendFurniWidgetState = () =>
{
const [ objectId, setObjectId ] = useState(-1);
const [ category, setCategory ] = useState(-1);
const [ type, setType ] = useState(0);
const [ usernames, setUsernames ] = useState<string[]>([]);
const [ figures, setFigures ] = useState<string[]>([]);
const [ date, setDate ] = useState<string>(null);
const [ stage, setStage ] = useState(0);
const close = useCallback(() =>
{
setObjectId(-1);
setCategory(-1);
setType(0);
setUsernames([]);
setFigures([]);
setDate(null);
}, []);
const respond = (flag: boolean) =>
{
GetRoomSession().connection.send(new FriendFurniConfirmLockMessageComposer(objectId, flag));
close();
}
const onLoveLockFurniStartEvent = useCallback((event: LoveLockFurniStartEvent) =>
{
const parser = event.getParser();
setObjectId(parser.furniId);
setStage(parser.start ? 1 : 2);
}, []);
UseMessageEventHook(LoveLockFurniStartEvent, onLoveLockFurniStartEvent);
const onLoveLockDoneEvent = useCallback((event: LoveLockFurniFinishedEvent | LoveLockFurniFriendConfirmedEvent) =>
{
close();
}, [ close ]);
UseMessageEventHook(LoveLockFurniFinishedEvent, onLoveLockDoneEvent);
UseMessageEventHook(LoveLockFurniFriendConfirmedEvent, onLoveLockDoneEvent);
UseRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING, event =>
{
const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.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') || (data.length !== 6)) return;
setObjectId(event.objectId);
setCategory(event.category);
setType(type);
setUsernames([ data[1], data[2] ]);
setFigures([ data[3], data[4] ]);
setDate(data[5]);
setStage(0);
});
useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event =>
{
if((event.id !== objectId) || (event.category !== category)) return;
close();
});
return { objectId, type, usernames, figures, date, stage, close, respond };
}
export const useFurnitureFriendFurniWidget = useFurnitureFriendFurniWidgetState;