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

Updates

Browse Source
This commit is contained in:
MyNameIsBatman 2021-07-03 17:08:05 -03:00
parent efa0994d30
commit a25e84c7fb
13 changed files with 208 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 883 B

20
src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx
View File

@ -7,6 +7,7 @@ import { dispatchUiEvent } from '../../../../hooks/events';
import { SendMessageHook } from '../../../../hooks/messages';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { BadgeImageView } from '../../../shared/badge-image/BadgeImageView';
import { useNavigatorContext } from '../../context/NavigatorContext';
import { NavigatorActions } from '../../reducers/NavigatorReducer';
import { NavigatorRoomInfoViewProps } from './NavigatorRoomInfoView.types';
@ -34,7 +35,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
setIsRoomMuted(roomInfoData.enteredGuestRoom.allInRoomMuted);
}, [ roomInfoData ]);
const processAction = useCallback((action: string) =>
const processAction = useCallback((action: string, value?: string) =>
{
if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
@ -57,6 +58,12 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
SendMessageHook(new UserHomeRoomComposer(newRoomId));
return;
case 'navigator_search_tag':
return;
case 'open_room_thumbnail_camera':
return;
case 'open_group_info':
return;
case 'toggle_room_link':
dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
return;
@ -103,7 +110,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
<div className="d-flex mb-1">
{ roomInfoData.enteredGuestRoom.tags.map(tag =>
{
return <div className="bg-muted p-1 rounded me-1 cursor-pointer">#{ tag }</div>
return <div className="bg-muted p-1 rounded me-1 cursor-pointer" onClick={ () => processAction('navigator_search_tag', tag) }>#{ tag }</div>
}) }
</div>
<div>{ roomInfoData.enteredGuestRoom.description }</div>
@ -111,12 +118,19 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
<i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" />
{ roomThumbnail && <img alt="" src={ roomThumbnail } /> }
</div>
{ roomInfoData.enteredGuestRoom.habboGroupId > 0 && <div className="d-flex align-items-center mb-2 cursor-pointer" onClick={ () => processAction('open_group_info') }>
<div className="me-2">
<BadgeImageView badgeCode={ roomInfoData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
</div>
<div className="text-decoration-underline">
{ LocalizeText('navigator.guildbase', ['groupName'], [roomInfoData.enteredGuestRoom.groupName]) }
</div>
</div> }
<div className="cursor-pointer text-decoration-underline d-flex align-items-center mb-2" onClick={ () => processAction('toggle_room_link') }>
<i className="icon icon-arrows me-1" />
<span>{ LocalizeText('navigator.embed.caption') }</span>
</div>
<button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('navigator.room.popup.info.room.settings') }</button>
<button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('navigator.roomsettings.roomfilter') }</button>
<button className="btn btn-sm btn-primary w-100 mb-1" disabled={ true }>{ LocalizeText('open.floor.plan.editor') }</button>
<button className="btn btn-sm btn-primary w-100 mb-1" onClick={ () => processAction('toggle_pick') }>{ LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }</button>
<button className="btn btn-sm btn-danger w-100 mb-1" disabled={ true }>{ LocalizeText('help.emergency.main.report.room') }</button>

1
src/views/room/widgets/RoomWidgets.scss
View File

@ -6,3 +6,4 @@
@import './infostand/InfoStandWidgetView';
@import './object-location/ObjectLocationView';
@import './room-tools/RoomToolsWidgetView';
@import './room-thumbnail/RoomThumbnailView';

3
src/views/room/widgets/RoomWidgetsView.tsx
View File

@ -9,9 +9,9 @@ import { ChatInputView } from './chat-input/ChatInputView';
import { ChatWidgetView } from './chat/ChatWidgetView';
import { FurnitureWidgetsView } from './furniture/FurnitureWidgetsView';
import { InfoStandWidgetView } from './infostand/InfoStandWidgetView';
import { RoomThumbnailWidgetView } from './room-thumbnail/RoomThumbnailWidgetView';
import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView';
import { RoomWidgetViewProps } from './RoomWidgets.types';
export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
@ -110,6 +110,7 @@ export const RoomWidgetsView: FC<RoomWidgetViewProps> = props =>
<FurnitureWidgetsView />
<InfoStandWidgetView />
<RoomToolsWidgetView />
<RoomThumbnailWidgetView />
</>
);
}

14
src/views/room/widgets/room-thumbnail/RoomThumbnailView.scss Normal file
View File

@ -0,0 +1,14 @@
.nitro-room-thumbnail {
width: 300px;
.option {
font-size: 30px;
height: 50px;
display: flex;
align-items: center;
cursor: pointer;
}
}
@import './views/builder/RoomThumbnailWidgetBuilderView';
@import './views/camera/RoomThumbnailWidgetCameraView';

4
src/views/room/widgets/room-thumbnail/RoomThumbnailView.types.ts Normal file
View File

@ -0,0 +1,4 @@
import { RoomWidgetProps } from '../RoomWidgets.types';
export class RoomThumbnailWidgetViewProps implements RoomWidgetProps
{}

44
src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx Normal file
View File

@ -0,0 +1,44 @@
import { FC, useCallback, useState } from 'react';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
import { LocalizeText } from '../../../../utils/LocalizeText';
import { RoomThumbnailWidgetViewProps } from './RoomThumbnailView.types';
import { RoomThumbnailWidgetBuilderView } from './views/builder/RoomThumbnailWidgetBuilderView';
import { RoomThumbnailWidgetCameraView } from './views/camera/RoomThumbnailWidgetCameraView';
export const RoomThumbnailWidgetView: FC<RoomThumbnailWidgetViewProps> = props =>
{
const [ isSelectorVisible, setIsSelectorVisible ] = useState(false);
const [ isBuilderVisible, setIsBuilderVisible ] = useState(false);
const [ isCameraVisible, setIsCameraVisible ] = useState(false);
const handleAction = useCallback((action: string) =>
{
switch(action)
{
case 'camera':
setIsSelectorVisible(false);
setIsCameraVisible(true);
return;
case 'builder':
setIsSelectorVisible(false);
setIsBuilderVisible(true);
return;
}
}, [ setIsSelectorVisible, setIsCameraVisible, setIsBuilderVisible ]);
return (<>
{ isSelectorVisible && <NitroCardView className="nitro-room-thumbnail">
<NitroCardHeaderView headerText={ LocalizeText('navigator.thumbeditor.caption') } onCloseClick={ () => setIsSelectorVisible(false) } />
<NitroCardContentView className="d-flex align-items-center justify-content-center text-muted">
<div className="option me-5" onClick={ () => handleAction('camera') }>
<i className="fas fa-camera" />
</div>
<div className="option" onClick={ () => handleAction('builder') }>
<i className="fas fa-pencil-ruler" />
</div>
</NitroCardContentView>
</NitroCardView> }
{ isBuilderVisible && <RoomThumbnailWidgetBuilderView onCloseClick={ () => setIsBuilderVisible(false) } /> }
{ isCameraVisible && <RoomThumbnailWidgetCameraView onCloseClick={ () => setIsCameraVisible(false) } /> }
</>);
};

4
src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.props.ts Normal file
View File

@ -0,0 +1,4 @@
export class RoomThumbnailWidgetBuilderViewProps
{
onCloseClick: () => void;
}

3
src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.scss Normal file
View File

@ -0,0 +1,3 @@
.nitro-room-thumbnail-builder {
width: 600px;
}

63
src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.tsx Normal file
View File

@ -0,0 +1,63 @@
import { FC, useCallback, useState } from 'react';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../../../layout';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { RoomThumbnailWidgetBuilderViewProps } from './RoomThumbnailWidgetBuilderView.props';
const TABS: string[] = [
'navigator.thumbeditor.bgtab',
'navigator.thumbeditor.objtab',
'navigator.thumbeditor.toptab',
];
export const RoomThumbnailWidgetBuilderView: FC<RoomThumbnailWidgetBuilderViewProps> = props =>
{
const { onCloseClick = null } = props;
const [ currentTab, setCurrentTab ] = useState(TABS[0]);
const processAction = useCallback((action: string, value?: string) =>
{
switch(action)
{
case 'change_tab':
setCurrentTab(value);
return;
}
}, [ setCurrentTab ]);
return (
<NitroCardView className="nitro-room-thumbnail-builder">
<NitroCardHeaderView headerText={ LocalizeText('navigator.thumbeditor.caption') } onCloseClick={ onCloseClick } />
<div className="d-flex">
<div className="w-100">
<NitroCardTabsView>
{ TABS.map(tab =>
{
return <NitroCardTabsItemView key={ tab } isActive={ currentTab === tab } onClick={ event => processAction('change_tab', tab) }>
{ LocalizeText(tab) }
</NitroCardTabsItemView>
}) }
</NitroCardTabsView>
<NitroCardContentView>
<div className="d-flex h-100 overflow-auto effects px-2">
<div className="row row-cols-3">
</div>
</div>
</NitroCardContentView>
</div>
<div>
<NitroCardTabsView></NitroCardTabsView>
<NitroCardContentView>
<div className="d-flex justify-content-between mt-2">
<div className="d-flex justify-content-end">
<button className="btn btn-primary me-2" onClick={ event => processAction('cancel') }>{ LocalizeText('generic.cancel') }</button>
<button className="btn btn-success" onClick={ event => processAction('checkout') }>{ LocalizeText('camera.preview.button.text') }</button>
</div>
</div>
</NitroCardContentView>
</div>
</div>
</NitroCardView>
);
};

13
src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.scss Normal file
View File

@ -0,0 +1,13 @@
.nitro-room-thumbnail-camera {
width: 132px;
height: 192px;
background-image: url('../../../../../../assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png');
.camera-frame {
position: absolute;
width: 110px;
height: 110px;
margin-top: 38px;
margin-left: 3px;
}
}

39
src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.tsx Normal file
View File

@ -0,0 +1,39 @@
import { NitroRectangle } from 'nitro-renderer';
import { FC, useCallback, useRef } from 'react';
import { GetRoomEngine, GetRoomSession } from '../../../../../../api';
import { DraggableWindow } from '../../../../../../layout';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { RoomThumbnailWidgetCameraViewProps } from './RoomThumbnailWidgetCameraView.types';
export const RoomThumbnailWidgetCameraView: FC<RoomThumbnailWidgetCameraViewProps> = props =>
{
const { onCloseClick = null } = props;
const cameraFrameRef = useRef<HTMLDivElement>();
const takePicture = useCallback(() =>
{
const frameBounds = cameraFrameRef.current.getBoundingClientRect();
if(!frameBounds) return;
const rectangle = new NitroRectangle(Math.floor(frameBounds.x), Math.floor(frameBounds.y), Math.floor(frameBounds.width), Math.floor(frameBounds.height));
const image = GetRoomEngine().createRoomScreenshot(GetRoomSession().roomId, 1, rectangle);
//SendMessageHook(new RoomWidgetCameraRoomThumbnailComposer(0, []));
onCloseClick();
}, [ onCloseClick ]);
return (
<DraggableWindow handle=".nitro-room-thumbnail-camera">
<div className="nitro-room-thumbnail-camera px-2">
<div ref={ cameraFrameRef } className={ 'camera-frame' }></div>
<div className="d-flex align-items-end h-100 pb-2">
<button className="btn btn-sm btn-danger w-100 mb-1 me-2" onClick={ onCloseClick }>{ LocalizeText('cancel') }</button>
<button className="btn btn-sm btn-success w-100 mb-1" onClick={ () => takePicture() }>{ LocalizeText('navigator.thumbeditor.save') }</button>
</div>
</div>
</DraggableWindow>
);
};

4
src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.types.ts Normal file
View File

@ -0,0 +1,4 @@
export class RoomThumbnailWidgetCameraViewProps
{
onCloseClick: () => void;
}