From a25e84c7fbae188fc3215a37fa629eda3a404ad7 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Sat, 3 Jul 2021 17:08:05 -0300 Subject: [PATCH] Updates --- .../thumbnail-camera-spritesheet.png | Bin 0 -> 883 bytes .../views/room-info/NavigatorRoomInfoView.tsx | 20 +++++- src/views/room/widgets/RoomWidgets.scss | 1 + src/views/room/widgets/RoomWidgetsView.tsx | 3 +- .../room-thumbnail/RoomThumbnailView.scss | 14 ++++ .../room-thumbnail/RoomThumbnailView.types.ts | 4 ++ .../RoomThumbnailWidgetView.tsx | 44 ++++++++++++ .../RoomThumbnailWidgetBuilderView.props.ts | 4 ++ .../RoomThumbnailWidgetBuilderView.scss | 3 + .../RoomThumbnailWidgetBuilderView.tsx | 63 ++++++++++++++++++ .../camera/RoomThumbnailWidgetCameraView.scss | 13 ++++ .../camera/RoomThumbnailWidgetCameraView.tsx | 39 +++++++++++ .../RoomThumbnailWidgetCameraView.types.ts | 4 ++ 13 files changed, 208 insertions(+), 4 deletions(-) create mode 100644 src/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png create mode 100644 src/views/room/widgets/room-thumbnail/RoomThumbnailView.scss create mode 100644 src/views/room/widgets/room-thumbnail/RoomThumbnailView.types.ts create mode 100644 src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx create mode 100644 src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.props.ts create mode 100644 src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.scss create mode 100644 src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.tsx create mode 100644 src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.scss create mode 100644 src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.tsx create mode 100644 src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.types.ts diff --git a/src/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png b/src/assets/images/room-widgets/thumbnail-widget/thumbnail-camera-spritesheet.png new file mode 100644 index 0000000000000000000000000000000000000000..63a9397f20e4cedf864e6111ce0bd850044caaba GIT binary patch literal 883 zcmeAS@N?(olHy`uVBq!ia0vp^EkJyLgAGU??LB=LNO2Z;L>4nJa0`Jj~)z5CGjwu3~&!|3L`3*X{5dqp$~ewyAF_-w~YBi2$S9>0Q1Y`rw`FhJ+3mYt`#1Emm*(1S@9pcB?R#5R{pLp@-=hDgOXk1s zF74j^tIa^KiD6+aN3wyNDJTIkwikl7b4s3}RGN0Ly|*?NH;J z5VMm>kiq5OBhd~v$0sw_IfU>iiSJ@!be^lx5W(im#?+=2=)yj6Aw!Z@*K+RbY5_9@ zE(@5nD;ag{G`!Qr+~FWG&!^*?noA~+WQT=>Pe+$SiblhZ>n$tzS~(e;IT=|6zT5mv zaWXMbJhaF_F~LAl?9P%Lr!AjndkG(EnNhp>&$3G`E55%xRM}B9`>Bn~;pd7)B0OqG zYBc7oEP1u-Z1XmU0}L(VuNfXbt#PP0s4sAji-99wim7G0D98gG5Z`Rr;lRMiB7h*6 zoVc4$i0xeW{}ww!6*MG4T3~ALuqEX$T%DQkbRxLz9seR1vkxV<--_3+4!$1s?8??x zxnTnBeDw=ny}fmhiSbB@K){yHL?Mo?l8`8Y*o|Z=G_oRO6tD$0)U9CkAlEWE{bylh z<&l^8^;?sH@rb|?PA-E-4i@#RB<__y73SJ{|KxsYKE88#M<@TX-Vm`yKp@VZw{7BY jW7X{{T$ef9oa-6y>7~B8=s#DM0SG)@{an^LB{Ts5nJ6~q literal 0 HcmV?d00001 diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx index 1f0e656d..d7c483aa 100644 --- a/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx @@ -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 = 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 = 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 = props =>
{ roomInfoData.enteredGuestRoom.tags.map(tag => { - return
#{ tag }
+ return
processAction('navigator_search_tag', tag) }>#{ tag }
}) }
{ roomInfoData.enteredGuestRoom.description }
@@ -111,12 +118,19 @@ export const NavigatorRoomInfoView: FC = props => { roomThumbnail && } + { roomInfoData.enteredGuestRoom.habboGroupId > 0 &&
processAction('open_group_info') }> +
+ +
+
+ { LocalizeText('navigator.guildbase', ['groupName'], [roomInfoData.enteredGuestRoom.groupName]) } +
+
}
processAction('toggle_room_link') }> { LocalizeText('navigator.embed.caption') }
- diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss index 6f4cfbb9..5ebe757a 100644 --- a/src/views/room/widgets/RoomWidgets.scss +++ b/src/views/room/widgets/RoomWidgets.scss @@ -6,3 +6,4 @@ @import './infostand/InfoStandWidgetView'; @import './object-location/ObjectLocationView'; @import './room-tools/RoomToolsWidgetView'; +@import './room-thumbnail/RoomThumbnailView'; diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx index c95aaaa1..66fe44cd 100644 --- a/src/views/room/widgets/RoomWidgetsView.tsx +++ b/src/views/room/widgets/RoomWidgetsView.tsx @@ -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 = props => { const { eventDispatcher = null, widgetHandler = null } = useRoomContext(); @@ -110,6 +110,7 @@ export const RoomWidgetsView: FC = props => + ); } diff --git a/src/views/room/widgets/room-thumbnail/RoomThumbnailView.scss b/src/views/room/widgets/room-thumbnail/RoomThumbnailView.scss new file mode 100644 index 00000000..0e39af10 --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/RoomThumbnailView.scss @@ -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'; diff --git a/src/views/room/widgets/room-thumbnail/RoomThumbnailView.types.ts b/src/views/room/widgets/room-thumbnail/RoomThumbnailView.types.ts new file mode 100644 index 00000000..68969857 --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/RoomThumbnailView.types.ts @@ -0,0 +1,4 @@ +import { RoomWidgetProps } from '../RoomWidgets.types'; + +export class RoomThumbnailWidgetViewProps implements RoomWidgetProps +{} diff --git a/src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx b/src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx new file mode 100644 index 00000000..90d7fb63 --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx @@ -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 = 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 && + setIsSelectorVisible(false) } /> + +
handleAction('camera') }> + +
+
handleAction('builder') }> + +
+ + } + { isBuilderVisible && setIsBuilderVisible(false) } /> } + { isCameraVisible && setIsCameraVisible(false) } /> } + ); +}; diff --git a/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.props.ts b/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.props.ts new file mode 100644 index 00000000..77c8b94b --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.props.ts @@ -0,0 +1,4 @@ +export class RoomThumbnailWidgetBuilderViewProps +{ + onCloseClick: () => void; +} diff --git a/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.scss b/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.scss new file mode 100644 index 00000000..d011f674 --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.scss @@ -0,0 +1,3 @@ +.nitro-room-thumbnail-builder { + width: 600px; +} diff --git a/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.tsx b/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.tsx new file mode 100644 index 00000000..f5061555 --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/views/builder/RoomThumbnailWidgetBuilderView.tsx @@ -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 = 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 ( + + +
+
+ + { TABS.map(tab => + { + return processAction('change_tab', tab) }> + { LocalizeText(tab) } + + }) } + + +
+
+ +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + ); +}; diff --git a/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.scss b/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.scss new file mode 100644 index 00000000..b472dcda --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.scss @@ -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; + } +} diff --git a/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.tsx b/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.tsx new file mode 100644 index 00000000..ffe7439d --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.tsx @@ -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 = props => +{ + const { onCloseClick = null } = props; + + const cameraFrameRef = useRef(); + + 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 ( + +
+
+
+ + +
+
+ + ); +}; diff --git a/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.types.ts b/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.types.ts new file mode 100644 index 00000000..ec49ac02 --- /dev/null +++ b/src/views/room/widgets/room-thumbnail/views/camera/RoomThumbnailWidgetCameraView.types.ts @@ -0,0 +1,4 @@ +export class RoomThumbnailWidgetCameraViewProps +{ + onCloseClick: () => void; +}