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

Room Widget: Engraving Lock and some other stuff

Browse Source
This commit is contained in:
MyNameIsBatman 2021-06-13 01:06:40 -03:00
parent 98ed484e01
commit 0a4f88f7a0
11 changed files with 251 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/images/room-widgets/lovelock-widget/lovelock-spritesheet.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

1
src/views/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -1,3 +1,4 @@
@import './engraving-lock/FurnitureEngravingLockView';
@import './exchange-credit/FurnitureExchangeCreditView';
@import './manipulation-menu/FurnitureManipulationMenuView';
@import './mannequin/FurnitureMannequinView';

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

@ -1,3 +1,4 @@
import { FurnitureEngravingLockView } from './engraving-lock/FurnitureEngravingLockView';
import { FurnitureExchangeCreditView } from './exchange-credit/FurnitureExchangeCreditView';
import { FurnitureWidgetsViewProps } from './FurnitureWidgetsView.types';
import { FurnitureHighScoreView } from './high-score/FurnitureHighScoreView';
@ -13,6 +14,7 @@ export function FurnitureWidgetsView(props: FurnitureWidgetsViewProps): JSX.Elem
return (
<div className="position-absolute nitro-room-widgets t-0 l-0">
<FurnitureEngravingLockView events={ events } />
<FurnitureExchangeCreditView events={ events } />
<FurnitureHighScoreView events={ events } />
<FurnitureManipulationMenuView events={ events } />

10
src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockData.ts Normal file
View File

@ -0,0 +1,10 @@
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/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.scss Normal file
View File

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

149
src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx Normal file
View File

@ -0,0 +1,149 @@
import { LoveLockFurniFinishedEvent, LoveLockFurniFriendConfirmedEvent, LoveLockFurniStartEvent, LoveLockStartConfirmComposer, NitroEvent, RoomEngineTriggerWidgetEvent, RoomObjectVariable } from 'nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { GetRoomSession } from '../../../../../api';
import { GetRoomEngine } from '../../../../../api/nitro/room/GetRoomEngine';
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 { CreateMessageHook } from '../../../../../hooks/messages/message-event';
import { NitroCardContentView } from '../../../../../layout/card/content/NitroCardContentView';
import { NitroCardHeaderView } from '../../../../../layout/card/header/NitroCardHeaderView';
import { NitroCardView } from '../../../../../layout/card/NitroCardView';
import { LocalizeText } from '../../../../../utils/LocalizeText';
import { AvatarImageView } from '../../../../avatar-image/AvatarImageView';
import { RoomWidgetRoomObjectUpdateEvent } from '../../events/RoomWidgetRoomObjectUpdateEvent';
import { FurnitureEngravingLockData } from './FurnitureEngravingLockData';
import { FurnitureEngravingLockViewProps } from './FurnitureEngravingLockView.types';
export const FurnitureEngravingLockView: FC<FurnitureEngravingLockViewProps> = props =>
{
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]));
}
return;
}
case RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED: {
const widgetEvent = (event as RoomWidgetRoomObjectUpdateEvent);
setEngravingLockData(prevState =>
{
if(!prevState || (widgetEvent.id !== prevState.objectId) || (widgetEvent.category !== prevState.category)) return prevState;
return null;
});
return;
}
}
};
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_FRIEND_FURNITURE_ENGRAVING, onNitroEvent);
CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, props.events, onNitroEvent);
const onLoveLockFurniStartEvent = useCallback((event: LoveLockFurniStartEvent) =>
{
const parser = event.getParser();
setEngravingLockData(new FurnitureEngravingLockData(parser.furniId));
if(parser.start)
setEngravingStage(1);
else
setEngravingStage(2);
}, [ engravingStage ]);
const onLoveLockDoneEvent = useCallback((event: LoveLockFurniFinishedEvent | LoveLockFurniFriendConfirmedEvent) =>
{
processAction('close_request');
}, []);
CreateMessageHook(LoveLockFurniStartEvent, onLoveLockFurniStartEvent);
CreateMessageHook(LoveLockFurniFinishedEvent, onLoveLockDoneEvent);
CreateMessageHook(LoveLockFurniFriendConfirmedEvent, onLoveLockDoneEvent);
const processAction = useCallback((type: string, value: string = null) =>
{
switch(type)
{
case 'close_view':
setEngravingLockData(null);
return;
case 'accept_request':
GetRoomSession().connection.send(new LoveLockStartConfirmComposer(engravingLockData.objectId, true));
return;
case 'reject_request':
GetRoomSession().connection.send(new LoveLockStartConfirmComposer(engravingLockData.objectId, false));
processAction('close_request');
return;
case 'close_request':
setEngravingStage(0);
setEngravingLockData(null);
return;
}
}, [ engravingLockData ]);
return (
<>
{ engravingStage > 0 && <NitroCardView className="nitro-engraving-lock">
<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 handle=".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">
<AvatarImageView figure={ engravingLockData.figures[0] } direction={ 2 } />
</div>
<div className="engraving-lock-avatar">
<AvatarImageView 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> }
</>
);
}

4
src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.types.ts Normal file
View File

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

2
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
View File

@ -23,6 +23,8 @@ export const FurnitureExchangeCreditView: FC<FurnitureExchangeCreditProps> = pro
const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
if(!roomObject) return;
const value = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_CREDIT_VALUE);
setExchangeCreditData(new FurnitureExchangeCreditData(widgetEvent.objectId, widgetEvent.category, value));

8
src/views/room/widgets/furniture/high-score/FurnitureHighScoreView.tsx
View File

@ -1,17 +1,17 @@
import { RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
import { NitroEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
import { FC } from 'react';
import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
import { FurnitureHighScoreViewProps } from './FurnitureHighScoreView.types';
export const FurnitureHighScoreView: FC<FurnitureHighScoreViewProps> = props =>
{
const onRoomEngineObjectEvent = (event: RoomEngineObjectEvent) =>
const onNitroEvent = (event: NitroEvent) =>
{
console.log(event);
};
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIGH_SCORE_DISPLAY, onRoomEngineObjectEvent);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIDE_HIGH_SCORE_DISPLAY, onRoomEngineObjectEvent);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIGH_SCORE_DISPLAY, onNitroEvent);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_HIDE_HIGH_SCORE_DISPLAY, onNitroEvent);
return null;
}

6
src/views/room/widgets/furniture/present/FurniturePresentView.tsx
View File

@ -1,16 +1,16 @@
import { RoomEngineObjectEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
import { NitroEvent, RoomEngineTriggerWidgetEvent } from 'nitro-renderer';
import { FC } from 'react';
import { useRoomEngineEvent } from '../../../../../hooks/events/nitro/room/room-engine-event';
import { FurniturePresentViewProps } from './FurniturePresentView.types';
export const FurniturePresentView: FC<FurniturePresentViewProps> = props =>
{
const onRoomEngineObjectEvent = (event: RoomEngineObjectEvent) =>
const onNitroEvent = (event: NitroEvent) =>
{
console.log(event);
};
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onRoomEngineObjectEvent);
useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PRESENT, onNitroEvent);
return null;
}