From ff206386f1de534152a69b55a9b790a869b8b8df Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Wed, 30 Jun 2021 14:08:24 -0300 Subject: [PATCH 01/10] Room Tools --- src/views/room/RoomView.tsx | 18 +++++- .../handlers/RoomWidgetRoomToolsHandler.ts | 33 +++++++++++ .../messages/RoomWidgetZoomToggleMessage.ts | 18 ++++++ src/views/room/messages/index.ts | 1 + src/views/room/widgets/RoomWidgets.scss | 1 + src/views/room/widgets/RoomWidgetsView.tsx | 2 + .../room-tools/RoomToolsWidgetView.scss | 15 +++++ .../room-tools/RoomToolsWidgetView.tsx | 58 +++++++++++++++++++ .../room-tools/RoomToolsWidgetView.types.ts | 4 ++ 9 files changed, 148 insertions(+), 2 deletions(-) create mode 100644 src/views/room/handlers/RoomWidgetRoomToolsHandler.ts create mode 100644 src/views/room/messages/RoomWidgetZoomToggleMessage.ts create mode 100644 src/views/room/widgets/room-tools/RoomToolsWidgetView.scss create mode 100644 src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx create mode 100644 src/views/room/widgets/room-tools/RoomToolsWidgetView.types.ts diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index f0afb252..5f1cdf3b 100644 --- a/src/views/room/RoomView.tsx +++ b/src/views/room/RoomView.tsx @@ -1,4 +1,4 @@ -import { EventDispatcher, Nitro, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomVariableEnum, Vector3d } from 'nitro-renderer'; +import { EventDispatcher, Nitro, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomVariableEnum, RoomZoomEvent, Vector3d } from 'nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import { CanManipulateFurniture, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation } from '../../api'; @@ -10,6 +10,7 @@ import { useRoomEngineEvent } from '../../hooks/events'; import { RoomContextProvider } from './context/RoomContext'; import { RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from './events'; import { IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler } from './handlers'; +import { RoomWidgetRoomToolsHandler } from './handlers/RoomWidgetRoomToolsHandler'; import { RoomViewProps } from './RoomView.types'; import { RoomWidgetsView } from './widgets/RoomWidgetsView'; @@ -35,6 +36,7 @@ export const RoomView: FC = props => widgetHandlerManager.registerHandler(new RoomWidgetAvatarInfoHandler()); widgetHandlerManager.registerHandler(new RoomWidgetInfostandHandler()); + widgetHandlerManager.registerHandler(new RoomWidgetRoomToolsHandler()); setWidgetHandler(widgetHandlerManager); @@ -96,7 +98,7 @@ export const RoomView: FC = props => const onRoomEngineEvent = useCallback((event: RoomEngineEvent) => { if(!widgetHandler || RoomId.isRoomPreviewerId(event.roomId)) return; - + switch(event.type) { case RoomEngineEvent.NORMAL_MODE: @@ -105,11 +107,23 @@ export const RoomView: FC = props => case RoomEngineEvent.GAME_MODE: widgetHandler.eventDispatcher.dispatchEvent(new RoomWidgetRoomEngineUpdateEvent(RoomWidgetRoomEngineUpdateEvent.GAME_MODE, event.roomId)); return; + case RoomZoomEvent.ROOM_ZOOM: + const zoomEvent = (event as RoomZoomEvent); + + let zoomLevel = ((zoomEvent.level < 1) ? 0.5 : (1 << (Math.floor(zoomEvent.level) - 1))); + + if(zoomEvent.forceFlip || zoomEvent.asDelta) zoomLevel = zoomEvent.level; + + const canvasId = 1; + + GetRoomEngine().setRoomInstanceRenderingCanvasScale(GetRoomEngine().activeRoomId, canvasId, zoomLevel, null, null, false, zoomEvent.asDelta); + return; } }, [ widgetHandler ]); useRoomEngineEvent(RoomEngineEvent.NORMAL_MODE, onRoomEngineEvent); useRoomEngineEvent(RoomEngineEvent.GAME_MODE, onRoomEngineEvent); + useRoomEngineEvent(RoomZoomEvent.ROOM_ZOOM, onRoomEngineEvent); const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) => { diff --git a/src/views/room/handlers/RoomWidgetRoomToolsHandler.ts b/src/views/room/handlers/RoomWidgetRoomToolsHandler.ts new file mode 100644 index 00000000..9f5d8ccc --- /dev/null +++ b/src/views/room/handlers/RoomWidgetRoomToolsHandler.ts @@ -0,0 +1,33 @@ +import { NitroEvent, RoomZoomEvent } from 'nitro-renderer'; +import { GetRoomEngine } from '../../../api'; +import { RoomWidgetUpdateEvent } from '../events'; +import { RoomWidgetMessage, RoomWidgetZoomToggleMessage } from '../messages'; +import { RoomWidgetHandler } from './RoomWidgetHandler'; + +export class RoomWidgetRoomToolsHandler extends RoomWidgetHandler +{ + public processEvent(event: NitroEvent): void + {} + + public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent + { + if(message instanceof RoomWidgetZoomToggleMessage) + { + GetRoomEngine().events.dispatchEvent(new RoomZoomEvent(GetRoomEngine().activeRoomId, message.zoomedIn ? 0 : 1, false)); + } + + return null; + } + + public get eventTypes(): string[] + { + return []; + } + + public get messageTypes(): string[] + { + return [ + RoomWidgetZoomToggleMessage.ZOOM_TOGGLE + ]; + } +} diff --git a/src/views/room/messages/RoomWidgetZoomToggleMessage.ts b/src/views/room/messages/RoomWidgetZoomToggleMessage.ts new file mode 100644 index 00000000..dae47e5b --- /dev/null +++ b/src/views/room/messages/RoomWidgetZoomToggleMessage.ts @@ -0,0 +1,18 @@ +import { RoomWidgetMessage } from '.'; + +export class RoomWidgetZoomToggleMessage extends RoomWidgetMessage +{ + public static ZOOM_TOGGLE: string = 'RWZTM_ZOOM_TOGGLE'; + private _zoomedIn: boolean; + + constructor(zoomedIn: boolean) + { + super(RoomWidgetZoomToggleMessage.ZOOM_TOGGLE); + this._zoomedIn = zoomedIn; + } + + public get zoomedIn(): boolean + { + return this._zoomedIn; + } +} diff --git a/src/views/room/messages/index.ts b/src/views/room/messages/index.ts index 320b77c2..c256d9d4 100644 --- a/src/views/room/messages/index.ts +++ b/src/views/room/messages/index.ts @@ -6,3 +6,4 @@ export * from './RoomWidgetFurniActionMessage'; export * from './RoomWidgetMessage'; export * from './RoomWidgetRoomObjectMessage'; export * from './RoomWidgetUserActionMessage'; +export * from './RoomWidgetZoomToggleMessage'; diff --git a/src/views/room/widgets/RoomWidgets.scss b/src/views/room/widgets/RoomWidgets.scss index 982c8ade..6f4cfbb9 100644 --- a/src/views/room/widgets/RoomWidgets.scss +++ b/src/views/room/widgets/RoomWidgets.scss @@ -5,3 +5,4 @@ @import './furniture/FurnitureWidgets'; @import './infostand/InfoStandWidgetView'; @import './object-location/ObjectLocationView'; +@import './room-tools/RoomToolsWidgetView'; diff --git a/src/views/room/widgets/RoomWidgetsView.tsx b/src/views/room/widgets/RoomWidgetsView.tsx index e0cd7f19..c95aaaa1 100644 --- a/src/views/room/widgets/RoomWidgetsView.tsx +++ b/src/views/room/widgets/RoomWidgetsView.tsx @@ -9,6 +9,7 @@ import { ChatInputView } from './chat-input/ChatInputView'; import { ChatWidgetView } from './chat/ChatWidgetView'; import { FurnitureWidgetsView } from './furniture/FurnitureWidgetsView'; import { InfoStandWidgetView } from './infostand/InfoStandWidgetView'; +import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView'; import { RoomWidgetViewProps } from './RoomWidgets.types'; export const RoomWidgetsView: FC = props => @@ -108,6 +109,7 @@ export const RoomWidgetsView: FC = props => + ); } diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss new file mode 100644 index 00000000..1f15d7c7 --- /dev/null +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss @@ -0,0 +1,15 @@ +.nitro-room-tools { + position: fixed; + bottom: 125px; + left: -133px; + background: rgba(20, 20, 20, .95); + border: 1px solid #101010; + box-shadow: inset 0px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1); + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; + transition: all .2s ease; + + &.open { + left: 0px; + } +} diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx new file mode 100644 index 00000000..b3c32b35 --- /dev/null +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -0,0 +1,58 @@ +import classNames from 'classnames'; +import { FC, useCallback, useState } from 'react'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import { useRoomContext } from '../../context/RoomContext'; +import { RoomWidgetZoomToggleMessage } from '../../messages'; +import { RoomToolsWidgetViewProps } from './RoomToolsWidgetView.types'; + +export const RoomToolsWidgetView: FC = props => +{ + const { widgetHandler = null } = useRoomContext(); + + const [ isExpended, setIsExpanded ] = useState(false); + const [ isZoomedIn, setIsZoomedIn ] = useState(false); + + const handleToolClick = useCallback((action: string) => + { + switch(action) + { + case 'settings': + return; + case 'zoom': + widgetHandler.processWidgetMessage(new RoomWidgetZoomToggleMessage(!isZoomedIn)); + setIsZoomedIn(value => !value); + return; + case 'chat_history': + return; + case 'like_room': + return; + case 'room_link': + return; + } + }, [ isZoomedIn, widgetHandler ]); + + return ( +
+
+
handleToolClick('settings') }> + { LocalizeText('room.settings.button.text') } +
+
handleToolClick('zoom') }> + { LocalizeText('room.zoom.button.text') } +
+
handleToolClick('chat_history') }> + { LocalizeText('room.chathistory.button.text') } +
+
handleToolClick('like_room') }> + { LocalizeText('room.like.button.text') } +
+
handleToolClick('room_link') }> + { LocalizeText('navigator.embed.caption') } +
+
+
setIsExpanded(value => !value)}> + +
+
+ ); +}; diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.types.ts b/src/views/room/widgets/room-tools/RoomToolsWidgetView.types.ts new file mode 100644 index 00000000..f539ea58 --- /dev/null +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.types.ts @@ -0,0 +1,4 @@ +import { RoomWidgetProps } from '../RoomWidgets.types'; + +export class RoomToolsWidgetViewProps implements RoomWidgetProps +{} From 226c280fdabd175bf0261c57dd156884126ec847 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Wed, 30 Jun 2021 14:13:29 -0300 Subject: [PATCH 02/10] Updates --- .../widgets/room-tools/RoomToolsWidgetView.scss | 16 +++++++++++++--- .../widgets/room-tools/RoomToolsWidgetView.tsx | 12 ++++++------ 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss index 1f15d7c7..088ab7c2 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss @@ -2,9 +2,8 @@ position: fixed; bottom: 125px; left: -133px; - background: rgba(20, 20, 20, .95); - border: 1px solid #101010; - box-shadow: inset 0px 2px rgba(255, 255, 255, .1), inset -2px -2px rgba(255, 255, 255, .1); + background: rgba($dark,.95); + box-shadow: inset 0px 5px lighten(rgba($dark,.6),2.5), inset 0 -4px darken(rgba($dark,.6),4); border-top-right-radius: $border-radius; border-bottom-right-radius: $border-radius; transition: all .2s ease; @@ -12,4 +11,15 @@ &.open { left: 0px; } + + .list-group-item { + background: transparent; + padding: 3px 0px; + color: $white; + border-color: rgba($black, 0.3); + + &:last-child { + border-bottom: none; + } + } } diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx index b3c32b35..d3fd1fee 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -33,20 +33,20 @@ export const RoomToolsWidgetView: FC = props => return (
-
-
handleToolClick('settings') }> +
+
handleToolClick('settings') }> { LocalizeText('room.settings.button.text') }
-
handleToolClick('zoom') }> +
handleToolClick('zoom') }> { LocalizeText('room.zoom.button.text') }
-
handleToolClick('chat_history') }> +
handleToolClick('chat_history') }> { LocalizeText('room.chathistory.button.text') }
-
handleToolClick('like_room') }> +
handleToolClick('like_room') }> { LocalizeText('room.like.button.text') }
-
handleToolClick('room_link') }> +
handleToolClick('room_link') }> { LocalizeText('navigator.embed.caption') }
From 876ef7ac1fa7b3d43dd2b5f90170251e8aa4062c Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Wed, 30 Jun 2021 14:21:50 -0300 Subject: [PATCH 03/10] Updates --- .../room/widgets/room-tools/RoomToolsWidgetView.scss | 10 ++++++++++ .../room/widgets/room-tools/RoomToolsWidgetView.tsx | 12 ++++++------ 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss index 088ab7c2..7f313a8c 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss @@ -17,9 +17,19 @@ padding: 3px 0px; color: $white; border-color: rgba($black, 0.3); + cursor: pointer; + + &:hover { + text-decoration: underline; + } + + &:first-child { + padding-top: 8px; + } &:last-child { border-bottom: none; + padding-bottom: 8px; } } } diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx index d3fd1fee..fb800bfe 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -32,21 +32,21 @@ export const RoomToolsWidgetView: FC = props => }, [ isZoomedIn, widgetHandler ]); return ( -
+
-
handleToolClick('settings') }> +
handleToolClick('settings') }> { LocalizeText('room.settings.button.text') }
-
handleToolClick('zoom') }> +
handleToolClick('zoom') }> { LocalizeText('room.zoom.button.text') }
-
handleToolClick('chat_history') }> +
handleToolClick('chat_history') }> { LocalizeText('room.chathistory.button.text') }
-
handleToolClick('like_room') }> +
handleToolClick('like_room') }> { LocalizeText('room.like.button.text') }
-
handleToolClick('room_link') }> +
handleToolClick('room_link') }> { LocalizeText('navigator.embed.caption') }
From ce613166cac3f1f4a9b2231630c18ba2f4a491e2 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Wed, 30 Jun 2021 14:29:07 -0300 Subject: [PATCH 04/10] Room Like button --- .../room/widgets/room-tools/RoomToolsWidgetView.scss | 4 ++++ .../room/widgets/room-tools/RoomToolsWidgetView.tsx | 11 +++++++++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss index 7f313a8c..33313ed6 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.scss @@ -31,5 +31,9 @@ border-bottom: none; padding-bottom: 8px; } + + &.disabled { + opacity: .5; + } } } diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx index fb800bfe..0ce23306 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -1,5 +1,7 @@ import classNames from 'classnames'; +import { RoomLikeRoomComposer } from 'nitro-renderer'; import { FC, useCallback, useState } from 'react'; +import { SendMessageHook } from '../../../../hooks/messages'; import { LocalizeText } from '../../../../utils/LocalizeText'; import { useRoomContext } from '../../context/RoomContext'; import { RoomWidgetZoomToggleMessage } from '../../messages'; @@ -11,6 +13,7 @@ export const RoomToolsWidgetView: FC = props => const [ isExpended, setIsExpanded ] = useState(false); const [ isZoomedIn, setIsZoomedIn ] = useState(false); + const [ liked, setLiked ] = useState(false); const handleToolClick = useCallback((action: string) => { @@ -25,11 +28,15 @@ export const RoomToolsWidgetView: FC = props => case 'chat_history': return; case 'like_room': + if(liked) return; + + SendMessageHook(new RoomLikeRoomComposer(1)); + setLiked(true); return; case 'room_link': return; } - }, [ isZoomedIn, widgetHandler ]); + }, [ isZoomedIn, liked, widgetHandler ]); return (
@@ -43,7 +50,7 @@ export const RoomToolsWidgetView: FC = props =>
handleToolClick('chat_history') }> { LocalizeText('room.chathistory.button.text') }
-
handleToolClick('like_room') }> +
handleToolClick('like_room') }> { LocalizeText('room.like.button.text') }
handleToolClick('room_link') }> From efa0994d3038e52380cc5173418705225a8154d3 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Fri, 2 Jul 2021 01:37:31 -0300 Subject: [PATCH 05/10] updates --- public/configuration.json | 2 +- src/assets/images/icons/arrows.png | Bin 0 -> 222 bytes src/assets/images/icons/camera-small.png | Bin 0 -> 296 bytes src/assets/images/icons/house-small.png | Bin 0 -> 361 bytes .../navigator/thumbnail_placeholder.png | Bin 3313 -> 1801 bytes src/assets/styles/icons.scss | 18 +++ src/events/navigator/NavigatorEvent.ts | 2 + .../navigator/NavigatorMessageHandler.tsx | 61 ++++++--- src/views/navigator/NavigatorView.tsx | 14 ++ src/views/navigator/common/RoomInfoData.ts | 60 ++++++++ .../navigator/reducers/NavigatorReducer.tsx | 21 ++- src/views/navigator/views/NavigatorViews.scss | 2 + .../room-info/NavigatorRoomInfoView.scss | 20 +++ .../views/room-info/NavigatorRoomInfoView.tsx | 129 ++++++++++++++++++ .../room-info/NavigatorRoomInfoView.types.ts | 5 + .../room-link/NavigatorRoomLinkView.scss | 14 ++ .../views/room-link/NavigatorRoomLinkView.tsx | 70 ++++++++++ .../room-link/NavigatorRoomLinkView.types.ts | 5 + .../room-tools/RoomToolsWidgetView.tsx | 18 ++- 19 files changed, 416 insertions(+), 25 deletions(-) create mode 100644 src/assets/images/icons/arrows.png create mode 100644 src/assets/images/icons/camera-small.png create mode 100644 src/assets/images/icons/house-small.png create mode 100644 src/views/navigator/common/RoomInfoData.ts create mode 100644 src/views/navigator/views/room-info/NavigatorRoomInfoView.scss create mode 100644 src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx create mode 100644 src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts create mode 100644 src/views/navigator/views/room-link/NavigatorRoomLinkView.scss create mode 100644 src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx create mode 100644 src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts diff --git a/public/configuration.json b/public/configuration.json index 965bc29c..35ba1570 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -19,7 +19,7 @@ "avatar.asset.url": "${asset.url}/bundled/figure/%libname%.nitro", "avatar.asset.effect.url": "${asset.url}/bundled/effect/%libname%.nitro", "furni.extras.url": "${asset.url}/images/furniextras/%image%.png", - "url.prefix": "", + "url.prefix": "http://localhost:3000", "chat.viewer.height.percentage": 0.40, "auth.system.enabled": true, "auth.system.http.enabled": true, diff --git a/src/assets/images/icons/arrows.png b/src/assets/images/icons/arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..47a833ce7ac60dea4318cfe4659d7876fec1db7d GIT binary patch literal 222 zcmeAS@N?(olHy`uVBq!ia0vp^fanMpx^{g z7srr_TgeqaKPfVEFdwX!kd}Qsnfdf#5z8-Y{`dPD+F7cY3b=OOewUanMpx`Y} z7srr_TggApf0*Cc*!a@E?o3ZG-y-=F6<=NmdP=O|>^%ELe!b!eGbQN-nK_*19Lp77 zNL@U-VHb;Rvx>M*Y?Bh(qr*pRn4K?tVc=YUAYcc}CdRONj{kLSnGc$nH4C&k@;-bj z&cdzJqP6J@$DjM=x!3;RTWS2ze*;i#dn0VMaPS0RS zX1J-~(KF$J&4{_+Xc+UuoWirlCoaA^TiDwDlYVQe#Ra=yn3rDO;IKro? qDYjcGKy4921FxcpG8%ab#RCwB*l1~o7KorJ%50urP_03t*v%M6j@s zXhi2_X+HZj)0tS<40t3`I`Xwi8yqf-H27P&1ajGlb+57&h;CN(~)7YwlwK z7`EK*U@#u(gg689pf74E>>3xqRtapfSwM8YSi6T^4|)ppygC$rhGq3I$83-+XGO<6 z=;|ekjrf@8j_g2qjnz!va1 zi&rtbrvN=&*+ZUjAtK!i%B6Cy$K4IJE>H1iLjd2d2}@+dIv`n_{;__5mLq z9WDO5^~@pDXaU{?yA`qz`0()11wv!A2Cs_U0yzZigB}9B8g@-&O9oq@TZ0#eu9eLe zV2p!HGVi z{l55N87a_bXJ@_OQ!aQ`R+m7w07LdtY|LgFfQ-=anhRY6JQ+I&IVOX7S0UA84h>NP zx-@t+bZR!o4060KYlGi?0$c+cBe#Y}XLT%cN*5v3WnV^1*fpR_44PG-t$T9Pj)#=p zp-#h?&4_JO5Br+}NwhlXqgrk#V9$)TMRUpbMW zHLz4@{+Sg#2(4vvs6=3!CY1%gD=jS}wRO^lfaP+bL!WD9$Oj&k)uC+0Rwz_cIT~N) z=JpF0A3u2^{yjIh|LM)+dx}Fs^R^KFJ<(a63vH>n0LX)`&*w@1OInr=ZNnr%hXz3o z9qJlx{sF7+K!F|x`%D)G^C6U)l{i$NZ1q==lkmUMS%8Zbu6@2 zlO=4r49{kY&r6Y%^(zIf^~;tvjsnuGrr5rky^r<}n{N<|3kz-C z8}yY9X@`T>U9B_W87sAZysn3!wN7CuXoqb%wxMOTY0v~Nem*NxED4?p|mi>Dn3{CU#Q+VNxlXWquq z8tlX7T?w{!2u*{7O){hD0VSzCz|+pRP&9bJY4_%eKho(~W+n;+-Ea>Icke*Nl?E)d*O zI!XNc;_(ySc1mD4$H5q zKKbj03+)&N1^)8i&s|)5u(SB!!JlSeTpp**%}p1jU}FyaSKDFnwR;Zv?~gj{^O=1f zmFDBheZ~$1mvP7l{rVNl$>uk2x>)SKB?iTY_xnFzTI~IFsRIUF zK&GgCBhjfecouZZ(YwQ~^*%Hk5PQ(e2my0!{uy8+Fh|v(W5GimO7uac+ynm<_~7BX z*jEGayWhRj0|qb%D>PjmKEM9-stb}qd5&sqfcO@K>*`E>8f9T($-raLE|(t*IfL5>H2(hTMAL%~6L220l{(%|4F zOGi;?c!h|m!BXI$XBi~Vl?iEm12PA<)bMO*(|H|Rq!vGtfh{#yD|C`(4^L2YX-x73drHQlA-;4rG#)`YnRgGOeOdM8(+tjh^UP9 ztna|JK~Bm3*cu)JF9I!{5P5#1No)~{TH5j+Ms8`^SZ z7XAZ{AHM=e^b}xPbHxp&Oi;6Px{8zx&c3KK=Q=~o@RO4h7nTgt2DK1a?)+TftZTw^ zE>Z3>{P_6QzzJQ703HGkEk8sJ9_97m6da%tedsw<~^0LoM1^ATMce@^Qzjn zW1|_4=$4XFt4*8yz3-$9xAfsHfhTo0$Jjx$74T&5Pbz`a3~vd%5_jC?B?Vqv0i~F00000NkvXXu0mjfBEV%1 literal 3313 zcmcImX;f2Z8ot30DFUW~Hq=x@3doj?>``P3N`OF&LB(;&&CLa32?L8s` zgo271S(I(Wg^m=pKtWNfBDT1Wf?z>#K}AsTSm#E8>6z2^_-F1p_vTxk?|Gkh`QDSi ziz1iW+kR>b0D!$9lrKhpLy5Zln2_2i>of-+ZpA zDWI9==IrL%kpzEm2QLgi3sbP|=uqq2BRHeuo+BGxqWSe}@_WWp9Q^CQOVbZQ=jl9G}_ zPN9=knm7uL%SAYRDZaiW1VPdo5_O=Sl&JlDl7SCvA&o+YRN7DiB}O4j)i5vA{4 zP^zbB6SWgzLIOt7gK7$mOtrW)2^0$d8md%Ip|!e@jfj;Ay?;ool^E18MGR|I$r=a_ z*$5}nuu86oHGBwEDC7wewK^~nf(3j(A|i^cP{?_{4A7S&&m=KFa=dhS04hYjp z3>kw%;xIUJ5<|}B%3|pn8qM6SaO&I z!oJ9e4l>ztUp7+zG9p0^@nTgPC5TjtLJ7vf6m?=8k?>zN!Kwt6MyQe_F{l52U4XPk zjVe}=fNV^(NK3gR#t|n&6>hKUQb98Q`TB`65*s*(pnmdoHrge+A6%ZU@qia!YM zhq>{dHYFZLNdKZX-ov!2SX~OJfdk`^M0`N?QT|N67ToyP;y4||K{x7-tT(WBphjkmf=(fMkZ4|98N^2HAsi9ZfXff8vkYiKTx8- z^|-h(%4r$4ZER+ZU2EeR?3=kZOC0Upz1&-IbL*b2KSEr(;H!=z(T#Xxkd03EB;Kbk z|Gt^KoyA~0ykxq0(P6mn((V02v)ImscQ#kQT%6Xw@Ob}|NH~U75SH`FtIxv+>28>_ zB+v9PTf4QF3rBYX1x`i1y}gfydiI%uOT$G1BbUe1q#LPXpa6}VZ*~euK8%}TCI=>C zFc1gdXAUwp0G-Y_yDC?2Gb`}BK3d*tR}sy43+T*lQ`_h^Jw9Lf=rQL4z+1S`8@+xI z=)~bfGqN%V51`aoY)!S*1}h1aeJ?ufIo`ph#33L#qv}rD_e1dqPc3O;plnLBmv*iz zaP4~L8Jh76+Uym(u5!5G)5QYefeXK0ee^7DHg<1(OaL6vd95vTH0yGw)BQcjoMtX* zx)N6Ax!@PO@vD(mWx_fi!Vgi?n6ty&e6EYfpN3-;Ig-0>M(SZN^OY^6wX;Rb4FWp@ zX1~w;<3~0>=(%_Kz^j)&32({x-o43%M*SvWf1BO89#3l0yccO(BE;|>&x5FFR901P zdp>wo5?Fr;Rg#_7StATsZE}`~&e6+W4*v)#(y;HvzE@_1JCjcB&-hG zW8Z3dNmWGK^Zf$HazZ7)h2<4&3VpNWxvRr0s7D;J;YCGle8E4w`5RF6sw_ZJaLCa* z=Gv`7a2DR7$mCOUz50z&$jt*VI~#|5lIYo1z$=)*UmVJ-_O%udNAJyY+5mZh73G-*htz zT@iMx)4^j%cj939S`%oPS!n}}j%4pBpWjdRsNex-R`_ePf6cZM^*-HoRMk`Ay5+O2 ziu26@X{pahGtsc%XoHpj-cFjzt+bgVDR+WjN` za_w|(S#?;0?bhiLtEZi5?luV1y;7K84*0L?Q0JITM)LKdjn%b>zdtw5ZZ+phUw5~R zBs~2s)d6D$@V2Iw^6)$6NA9P&YtgMa4M05Jg^HimH9Z$=x9tEb+j@4Del*s1Pxv9AceIa$&^v|7lrGqz%$*)AAw8bJ$ z$EHo%tll+lHWy9+PPSVq-p79;4_fp01Vv@L;P#I_2e6Wl(-u16(JOOwUo-6;s#a%z zWR%)}+)ERio&R?6br?_3Ket;gn)CJ5>KpFQc9WcQ&OmjN54Ts&iHNy!dR==63VYh$ z2H5-LV*L?gPhVwfZZ6s7xV^A$Fv$T^s{S%px6Rq=dAjYcTFyNGioRv`o~`V4)1Zc> z-(+NLXRcptcp3QJ@Z3=x8b&!L7e0LO(Apz28e=!&^l{xWjKD z*01b?yOi-I(O<7bEgy({-4U+?ABaZKA{Xj`XUf!w()JC22atKB;fd*jKEgZdwTOwT ztCF6obbMOFYi2w@g-dm`s%|N@ZSynk27Z3vxXnf6X^1$~UL(5&4wgTl2^NjyZ1^$x zX1S2McM&^kHat+;fc|-4&nGppcioCy@7@UvTozIexL2NN6nz = props => { - const { dispatchNavigatorState = null } = useNavigatorContext(); + const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext(); const onUserInfoEvent = useCallback((event: UserInfoEvent) => { @@ -28,8 +28,19 @@ export const NavigatorMessageHandler: FC = props = { const parser = event.getParser(); + const roomInfoData = navigatorState.roomInfoData; + roomInfoData.currentRoomOwner = parser.isOwner; + roomInfoData.currentRoomId = parser.roomId; + + dispatchNavigatorState({ + type: NavigatorActions.SET_ROOM_INFO_DATA, + payload: { + roomInfoData: roomInfoData + } + }); + SendMessageHook(new RoomInfoComposer(parser.roomId, true, false)); - }, []); + }, [ navigatorState, dispatchNavigatorState ]); const onRoomInfoEvent = useCallback((event: RoomInfoEvent) => { @@ -37,17 +48,15 @@ export const NavigatorMessageHandler: FC = props = if(parser.roomEnter) { - // this._data.enteredGuestRoom = parser.data; - // this._data.staffPick = parser.data.roomPicker; + const roomInfoData = navigatorState.roomInfoData; + roomInfoData.enteredGuestRoom = parser.data; - // const isCreatedRoom = (this._data.createdRoomId === parser.data.roomId); - - // if(!isCreatedRoom && parser.data.displayRoomEntryAd) - // { - // // display ad - // } - - // this._data.createdRoomId = 0; + dispatchNavigatorState({ + type: NavigatorActions.SET_ROOM_INFO_DATA, + payload: { + roomInfoData: roomInfoData + } + }); } else if(parser.roomForward) { @@ -66,10 +75,17 @@ export const NavigatorMessageHandler: FC = props = } else { - // this._data.enteredGuestRoom = parser.data; - // this._data.staffPick = parser.data.roomPicker; + const roomInfoData = navigatorState.roomInfoData; + roomInfoData.enteredGuestRoom = parser.data; + + dispatchNavigatorState({ + type: NavigatorActions.SET_ROOM_INFO_DATA, + payload: { + roomInfoData: roomInfoData + } + }); } - }, []); + }, [ dispatchNavigatorState, navigatorState ]); const onRoomDoorbellEvent = useCallback((event: RoomDoorbellEvent) => { @@ -146,6 +162,18 @@ export const NavigatorMessageHandler: FC = props = VisitRoom(parser.roomId); }, []); + const onNavigatorHomeRoomEvent = useCallback((event: NavigatorHomeRoomEvent) => + { + const parser = event.getParser(); + + dispatchNavigatorState({ + type: NavigatorActions.SET_HOME_ROOM_ID, + payload: { + homeRoomId: parser.homeRoomId + } + }); + }, [ dispatchNavigatorState ]); + CreateMessageHook(UserInfoEvent, onUserInfoEvent); CreateMessageHook(RoomForwardEvent, onRoomForwardEvent); CreateMessageHook(RoomInfoOwnerEvent, onRoomInfoOwnerEvent); @@ -157,6 +185,7 @@ export const NavigatorMessageHandler: FC = props = CreateMessageHook(NavigatorSearchEvent, onNavigatorSearchEvent); CreateMessageHook(NavigatorCategoriesEvent, onNavigatorCategoriesEvent); CreateMessageHook(RoomCreatedEvent, onRoomCreatedEvent); + CreateMessageHook(NavigatorHomeRoomEvent, onNavigatorHomeRoomEvent); return null; } diff --git a/src/views/navigator/NavigatorView.tsx b/src/views/navigator/NavigatorView.tsx index e1c1ecb3..123b4044 100644 --- a/src/views/navigator/NavigatorView.tsx +++ b/src/views/navigator/NavigatorView.tsx @@ -11,6 +11,8 @@ import { NavigatorMessageHandler } from './NavigatorMessageHandler'; import { NavigatorViewProps } from './NavigatorView.types'; import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer'; import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView'; +import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView'; +import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView'; import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView'; import { NavigatorSearchView } from './views/search/NavigatorSearchView'; @@ -18,6 +20,8 @@ export const NavigatorView: FC = props => { const [ isVisible, setIsVisible ] = useState(false); const [ isCreatorOpen, setCreatorOpen ] = useState(false); + const [ isRoomInfoOpen, setRoomInfoOpen ] = useState(false); + const [ isRoomLinkOpen, setRoomLinkOpen ] = useState(false); const [ navigatorState, dispatchNavigatorState ] = useReducer(NavigatorReducer, initialNavigator); const { needsNavigatorUpdate = false, topLevelContext = null, topLevelContexts = null } = navigatorState; @@ -34,12 +38,20 @@ export const NavigatorView: FC = props => case NavigatorEvent.TOGGLE_NAVIGATOR: setIsVisible(value => !value); return; + case NavigatorEvent.TOGGLE_ROOM_INFO: + setRoomInfoOpen(value => !value); + return; + case NavigatorEvent.TOGGLE_ROOM_LINK: + setRoomLinkOpen(value => !value); + return; } }, []); useUiEvent(NavigatorEvent.SHOW_NAVIGATOR, onNavigatorEvent); useUiEvent(NavigatorEvent.HIDE_NAVIGATOR, onNavigatorEvent); useUiEvent(NavigatorEvent.TOGGLE_NAVIGATOR, onNavigatorEvent); + useUiEvent(NavigatorEvent.TOGGLE_ROOM_INFO, onNavigatorEvent); + useUiEvent(NavigatorEvent.TOGGLE_ROOM_LINK, onNavigatorEvent); const onRoomSessionEvent = useCallback((event: RoomSessionEvent) => { @@ -110,6 +122,8 @@ export const NavigatorView: FC = props =>
} + { isRoomInfoOpen && setRoomInfoOpen(false) } /> } + { isRoomLinkOpen && setRoomLinkOpen(false) } /> } ); } diff --git a/src/views/navigator/common/RoomInfoData.ts b/src/views/navigator/common/RoomInfoData.ts new file mode 100644 index 00000000..3b251b1c --- /dev/null +++ b/src/views/navigator/common/RoomInfoData.ts @@ -0,0 +1,60 @@ +import { RoomDataParser } from 'nitro-renderer'; + +export class RoomInfoData +{ + private _enteredGuestRoom: RoomDataParser = null; + private _createdRoomId: number = 0; + private _currentRoomId: number = 0; + private _currentRoomOwner: boolean = false; + private _canRate: boolean = false; + + public get enteredGuestRoom(): RoomDataParser + { + return this._enteredGuestRoom; + } + + public set enteredGuestRoom(data: RoomDataParser) + { + this._enteredGuestRoom = data; + } + + public get createdRoomId(): number + { + return this._createdRoomId; + } + + public set createdRoomId(id: number) + { + this._createdRoomId = id; + } + + public get currentRoomId(): number + { + return this._currentRoomId; + } + + public set currentRoomId(id: number) + { + this._currentRoomId = id; + } + + public get currentRoomOwner(): boolean + { + return this._currentRoomOwner; + } + + public set currentRoomOwner(flag: boolean) + { + this._currentRoomOwner = flag; + } + + public get canRate(): boolean + { + return this._canRate; + } + + public set canRate(flag: boolean) + { + this._canRate = flag; + } +} diff --git a/src/views/navigator/reducers/NavigatorReducer.tsx b/src/views/navigator/reducers/NavigatorReducer.tsx index f6da40e4..16cdce5d 100644 --- a/src/views/navigator/reducers/NavigatorReducer.tsx +++ b/src/views/navigator/reducers/NavigatorReducer.tsx @@ -1,5 +1,6 @@ import { NavigatorCategoryDataParser, NavigatorSearchResultSet, NavigatorTopLevelContext } from 'nitro-renderer'; import { Reducer } from 'react'; +import { RoomInfoData } from '../common/RoomInfoData'; export interface INavigatorState { @@ -8,6 +9,8 @@ export interface INavigatorState topLevelContexts: NavigatorTopLevelContext[]; searchResult: NavigatorSearchResultSet; categories: NavigatorCategoryDataParser[]; + roomInfoData: RoomInfoData; + homeRoomId: number; } export interface INavigatorAction @@ -19,6 +22,8 @@ export interface INavigatorAction topLevelContexts?: NavigatorTopLevelContext[]; searchResult?: NavigatorSearchResultSet; categories?: NavigatorCategoryDataParser[]; + roomInfoData?: RoomInfoData; + homeRoomId?: number; } } @@ -29,6 +34,8 @@ export class NavigatorActions public static SET_TOP_LEVEL_CONTEXTS: string = 'NA_SET_TOP_LEVEL_CONTEXTS'; public static SET_SEARCH_RESULT: string = 'NA_SET_SEARCH_RESULT'; public static SET_CATEGORIES: string = 'NA_SET_CATEGORIES'; + public static SET_ROOM_INFO_DATA: string = 'NA_SET_ROOM_INFO_DATA'; + public static SET_HOME_ROOM_ID: string = 'NA_SET_HOME_ROOM_ID'; } export const initialNavigator: INavigatorState = { @@ -36,7 +43,9 @@ export const initialNavigator: INavigatorState = { topLevelContext: null, topLevelContexts: null, searchResult: null, - categories: null + categories: null, + roomInfoData: new RoomInfoData(), + homeRoomId: null } export const NavigatorReducer: Reducer = (state, action) => @@ -90,6 +99,16 @@ export const NavigatorReducer: Reducer = (sta return { ...state, categories }; } + case NavigatorActions.SET_ROOM_INFO_DATA: { + const roomInfoData = (action.payload.roomInfoData || state.roomInfoData || null); + + return { ...state, roomInfoData }; + } + case NavigatorActions.SET_HOME_ROOM_ID: { + const homeRoomId = (action.payload.homeRoomId || state.homeRoomId || null); + + return { ...state, homeRoomId }; + } default: return state; } diff --git a/src/views/navigator/views/NavigatorViews.scss b/src/views/navigator/views/NavigatorViews.scss index 60c10722..174445ad 100644 --- a/src/views/navigator/views/NavigatorViews.scss +++ b/src/views/navigator/views/NavigatorViews.scss @@ -2,3 +2,5 @@ @import './search/NavigatorSearchView'; @import './search-result/NavigatorSearchResultView'; @import './search-result-item/NavigatorSearchResultItemView'; +@import './room-info/NavigatorRoomInfoView'; +@import './room-link/NavigatorRoomLinkView'; diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.scss b/src/views/navigator/views/room-info/NavigatorRoomInfoView.scss new file mode 100644 index 00000000..9763a4fc --- /dev/null +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.scss @@ -0,0 +1,20 @@ +.nitro-room-info { + width: 230px; + + .gray { + filter: grayscale(1); + opacity: .5; + } + + .room-thumbnail { + position: relative; + width: 110px; + height: 110px; + margin: 0 auto; + background-image: url(../../../../assets/images/navigator/thumbnail_placeholder.png); + background-repeat: no-repeat; + background-position: center; + background-color: rgba($black, .125); + border-color: $black !important; + } +} diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx new file mode 100644 index 00000000..1f0e656d --- /dev/null +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx @@ -0,0 +1,129 @@ +import classNames from 'classnames'; +import { RoomMuteComposer, RoomStaffPickComposer, UserHomeRoomComposer } from 'nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { GetConfiguration } from '../../../../api'; +import { NavigatorEvent } from '../../../../events'; +import { dispatchUiEvent } from '../../../../hooks/events'; +import { SendMessageHook } from '../../../../hooks/messages'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import { useNavigatorContext } from '../../context/NavigatorContext'; +import { NavigatorActions } from '../../reducers/NavigatorReducer'; +import { NavigatorRoomInfoViewProps } from './NavigatorRoomInfoView.types'; + +export const NavigatorRoomInfoView: FC = props => +{ + const { onCloseClick = null } = props; + + const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext(); + const { roomInfoData = null, homeRoomId = null } = navigatorState; + const [ roomThumbnail, setRoomThumbnail ] = useState(null); + const [ isRoomPicked, setIsRoomPicked ] = useState(false); + const [ isRoomMuted, setIsRoomMuted ] = useState(false); + + useEffect(() => + { + if(!roomInfoData || !roomInfoData.enteredGuestRoom) return; + + if(roomInfoData.enteredGuestRoom.officialRoomPicRef) + { + setRoomThumbnail(GetConfiguration('image.library.url') + roomInfoData.enteredGuestRoom.officialRoomPicRef); + } + + setIsRoomPicked(roomInfoData.enteredGuestRoom.roomPicker); + setIsRoomMuted(roomInfoData.enteredGuestRoom.allInRoomMuted); + }, [ roomInfoData ]); + + const processAction = useCallback((action: string) => + { + if(!roomInfoData || !roomInfoData.enteredGuestRoom) return; + + switch(action) + { + case 'set_home_room': + let newRoomId = -1; + + if(homeRoomId !== roomInfoData.enteredGuestRoom.roomId) + { + newRoomId = roomInfoData.enteredGuestRoom.roomId; + } + + dispatchNavigatorState({ + type: NavigatorActions.SET_HOME_ROOM_ID, + payload: { + homeRoomId: newRoomId + } + }); + + SendMessageHook(new UserHomeRoomComposer(newRoomId)); + return; + case 'toggle_room_link': + dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)); + return; + case 'toggle_pick': + setIsRoomPicked(value => !value); + SendMessageHook(new RoomStaffPickComposer(roomInfoData.enteredGuestRoom.roomId)); + return; + case 'toggle_mute': + setIsRoomMuted(value => !value); + SendMessageHook(new RoomMuteComposer()); + return; + case 'close': + onCloseClick(); + return; + } + + }, [ onCloseClick, dispatchNavigatorState, roomInfoData, homeRoomId ]); + + if(!roomInfoData) return null; + + return ( + + processAction('close') } /> + + { roomInfoData.enteredGuestRoom && <> +
+
+ { roomInfoData.enteredGuestRoom.roomName } +
+ processAction('set_home_room') } className={ 'icon icon-house-small cursor-pointer' + classNames({' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } /> +
+
+ { roomInfoData.enteredGuestRoom.showOwner && <> +
{ LocalizeText('navigator.roomownercaption') }
+
+ +
{ roomInfoData.enteredGuestRoom.ownerName }
+
+ } +
+
+ { LocalizeText('navigator.roomrating') } { roomInfoData.enteredGuestRoom.score } +
+
+ { roomInfoData.enteredGuestRoom.tags.map(tag => + { + return
#{ tag }
+ }) } +
+
{ roomInfoData.enteredGuestRoom.description }
+
+ + { roomThumbnail && } +
+
processAction('toggle_room_link') }> + + { LocalizeText('navigator.embed.caption') } +
+ + + + + + + } + + + + ); +}; diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts b/src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts new file mode 100644 index 00000000..a4b6b81b --- /dev/null +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.types.ts @@ -0,0 +1,5 @@ + +export class NavigatorRoomInfoViewProps +{ + onCloseClick: () => void; +} diff --git a/src/views/navigator/views/room-link/NavigatorRoomLinkView.scss b/src/views/navigator/views/room-link/NavigatorRoomLinkView.scss new file mode 100644 index 00000000..ae215535 --- /dev/null +++ b/src/views/navigator/views/room-link/NavigatorRoomLinkView.scss @@ -0,0 +1,14 @@ +.nitro-room-link { + width: 400px; + + .room-thumbnail { + position: relative; + width: 110px; + height: 110px; + background-image: url(../../../../assets/images/navigator/thumbnail_placeholder.png); + background-repeat: no-repeat; + background-position: center; + background-color: rgba($black, .125); + border-color: $black !important; + } +} diff --git a/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx b/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx new file mode 100644 index 00000000..c36f9d86 --- /dev/null +++ b/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx @@ -0,0 +1,70 @@ +import { FC, useCallback, useEffect, useRef, useState } from 'react'; +import { GetConfiguration } from '../../../../api'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import { useNavigatorContext } from '../../context/NavigatorContext'; +import { NavigatorRoomLinkViewProps } from './NavigatorRoomLinkView.types'; + +export const NavigatorRoomLinkView: FC = props => +{ + const { onCloseClick = null } = props; + const { navigatorState = null } = useNavigatorContext(); + const { roomInfoData = null } = navigatorState; + + const [ roomThumbnail, setRoomThumbnail ] = useState(null); + const [ roomLink, setRoomLink ] = useState(null); + + const elementRef = useRef(); + + useEffect(() => + { + if(!roomInfoData || !roomInfoData.enteredGuestRoom) return; + + if(roomInfoData.enteredGuestRoom.officialRoomPicRef) + { + setRoomThumbnail(GetConfiguration('image.library.url') + roomInfoData.enteredGuestRoom.officialRoomPicRef); + } + + const urlPrefix = GetConfiguration('url.prefix'); + const roomLinkRaw = LocalizeText('navigator.embed.src', ['roomId'], [roomInfoData.enteredGuestRoom.roomId.toString()]).replace('${url.prefix}', urlPrefix); + + setRoomLink(roomLinkRaw); + }, [ roomInfoData ]); + + const processAction = useCallback((action: string) => + { + if(!roomInfoData || !roomInfoData.enteredGuestRoom) return; + + switch(action) + { + case 'copy_room_link': + elementRef.current.select(); + document.execCommand('copy'); + return; + case 'close': + onCloseClick(); + return; + } + + }, [onCloseClick, roomInfoData]); + + if(!roomInfoData) return null; + + return ( + + processAction('close') } /> + +
+
+ { roomThumbnail && } +
+
+
+
{ LocalizeText('navigator.embed.headline') }
+
{ LocalizeText('navigator.embed.info') }
+ { roomLink && } +
+ + + ); +}; diff --git a/src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts b/src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts new file mode 100644 index 00000000..3c206b6f --- /dev/null +++ b/src/views/navigator/views/room-link/NavigatorRoomLinkView.types.ts @@ -0,0 +1,5 @@ + +export class NavigatorRoomLinkViewProps +{ + onCloseClick: () => void; +} diff --git a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx index 0ce23306..1146b4a4 100644 --- a/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx +++ b/src/views/room/widgets/room-tools/RoomToolsWidgetView.tsx @@ -1,6 +1,8 @@ import classNames from 'classnames'; import { RoomLikeRoomComposer } from 'nitro-renderer'; import { FC, useCallback, useState } from 'react'; +import { NavigatorEvent } from '../../../../events'; +import { dispatchUiEvent } from '../../../../hooks/events'; import { SendMessageHook } from '../../../../hooks/messages'; import { LocalizeText } from '../../../../utils/LocalizeText'; import { useRoomContext } from '../../context/RoomContext'; @@ -13,13 +15,14 @@ export const RoomToolsWidgetView: FC = props => const [ isExpended, setIsExpanded ] = useState(false); const [ isZoomedIn, setIsZoomedIn ] = useState(false); - const [ liked, setLiked ] = useState(false); + const [ isLiked, setIsLiked ] = useState(false); const handleToolClick = useCallback((action: string) => { switch(action) { case 'settings': + dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_INFO)); return; case 'zoom': widgetHandler.processWidgetMessage(new RoomWidgetZoomToggleMessage(!isZoomedIn)); @@ -28,15 +31,16 @@ export const RoomToolsWidgetView: FC = props => case 'chat_history': return; case 'like_room': - if(liked) return; + if(isLiked) return; SendMessageHook(new RoomLikeRoomComposer(1)); - setLiked(true); + setIsLiked(true); return; - case 'room_link': + case 'toggle_room_link': + dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)); return; } - }, [ isZoomedIn, liked, widgetHandler ]); + }, [ isZoomedIn, isLiked, widgetHandler ]); return (
@@ -50,10 +54,10 @@ export const RoomToolsWidgetView: FC = props =>
handleToolClick('chat_history') }> { LocalizeText('room.chathistory.button.text') }
-
handleToolClick('like_room') }> +
handleToolClick('like_room') }> { LocalizeText('room.like.button.text') }
-
handleToolClick('room_link') }> +
handleToolClick('toggle_room_link') }> { LocalizeText('navigator.embed.caption') }
From a25e84c7fbae188fc3215a37fa629eda3a404ad7 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Sat, 3 Jul 2021 17:08:05 -0300 Subject: [PATCH 06/10] 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; +} From b2009d3553e10be8ef50c446eba5d6426a538035 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Sat, 3 Jul 2021 22:35:48 -0300 Subject: [PATCH 07/10] Updates --- .../navigator/views/room-link/NavigatorRoomLinkView.tsx | 4 ++-- .../views/room-settings/NavigatorRoomSettingsView.tsx | 6 ++++++ 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx diff --git a/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx b/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx index c36f9d86..cf697e19 100644 --- a/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx +++ b/src/views/navigator/views/room-link/NavigatorRoomLinkView.tsx @@ -1,3 +1,4 @@ +import { Nitro } from 'nitro-renderer'; import { FC, useCallback, useEffect, useRef, useState } from 'react'; import { GetConfiguration } from '../../../../api'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; @@ -25,8 +26,7 @@ export const NavigatorRoomLinkView: FC = props => setRoomThumbnail(GetConfiguration('image.library.url') + roomInfoData.enteredGuestRoom.officialRoomPicRef); } - const urlPrefix = GetConfiguration('url.prefix'); - const roomLinkRaw = LocalizeText('navigator.embed.src', ['roomId'], [roomInfoData.enteredGuestRoom.roomId.toString()]).replace('${url.prefix}', urlPrefix); + const roomLinkRaw = Nitro.instance.core.configuration.interpolate(LocalizeText('navigator.embed.src', ['roomId'], [roomInfoData.enteredGuestRoom.roomId.toString()])); setRoomLink(roomLinkRaw); }, [ roomInfoData ]); diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx new file mode 100644 index 00000000..a214d88e --- /dev/null +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx @@ -0,0 +1,6 @@ +import { FC } from 'react'; + +export const NavigatorRoomSettingsView: FC<{}> = props => +{ + return null; +}; From 5fa79d6420542de0e3ab9a84e8a24a5fc0d89219 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Sat, 3 Jul 2021 23:09:33 -0300 Subject: [PATCH 08/10] Engranving header --- .../furniture/engraving-lock/FurnitureEngravingLockView.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx b/src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx index 80e87d07..b3df1687 100644 --- a/src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx +++ b/src/views/room/widgets/furniture/engraving-lock/FurnitureEngravingLockView.tsx @@ -104,7 +104,7 @@ export const FurnitureEngravingLockView: FC = p return ( <> - { engravingStage > 0 && + { engravingStage > 0 && processAction('close_request') } />
From 5eeeb2bed8d0f58357ed3d3781ec1444867413e4 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Sun, 4 Jul 2021 18:18:09 -0300 Subject: [PATCH 09/10] Config sound fix --- public/configuration.json | 1 - 1 file changed, 1 deletion(-) diff --git a/public/configuration.json b/public/configuration.json index 457b921d..c2a60512 100644 --- a/public/configuration.json +++ b/public/configuration.json @@ -2,7 +2,6 @@ "socket.url": "wss://ws.nitrots.co:2096", "asset.url": "https://nitro.nitrots.co", "image.library.url": "https://swf.nitrots.co/c_images/", - "internal.samples.url": "", "external.samples.url": "https://swf.nitrots.co/dcr/hof_furni/mp3/sound_machine_sample_%sample%.mp3", "image.library.notifications.url": "${image.library.url}notifications/%image%.png", "achievements.images.url": "${image.library.url}Quests/%image%.png", From 4afad291a8752ea1234cf9179b26bec8867969f1 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Mon, 5 Jul 2021 00:44:15 -0300 Subject: [PATCH 10/10] RoomSettings --- src/events/navigator/NavigatorEvent.ts | 1 + .../thumbnail/RoomWidgetThumbnailEvent.ts | 8 ++ src/events/room-widgets/thumbnail/index.ts | 1 + .../navigator/NavigatorMessageHandler.tsx | 10 +- src/views/navigator/NavigatorView.tsx | 2 + .../navigator/common/RoomSettingsData.ts | 95 +++++++++++++ src/views/navigator/views/NavigatorViews.scss | 1 + .../views/room-info/NavigatorRoomInfoView.tsx | 11 +- .../NavigatorRoomSettingsView.scss | 3 + .../NavigatorRoomSettingsView.tsx | 125 +++++++++++++++++- .../NavigatorRoomSettingsView.types.ts | 8 ++ .../NavigatorRoomSettingsAccessTabView.tsx | 96 ++++++++++++++ .../NavigatorRoomSettingsBasicTabView.tsx | 107 +++++++++++++++ .../RoomThumbnailWidgetView.tsx | 26 ++++ 14 files changed, 488 insertions(+), 6 deletions(-) create mode 100644 src/events/room-widgets/thumbnail/RoomWidgetThumbnailEvent.ts create mode 100644 src/events/room-widgets/thumbnail/index.ts create mode 100644 src/views/navigator/common/RoomSettingsData.ts create mode 100644 src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss create mode 100644 src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts create mode 100644 src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx create mode 100644 src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx diff --git a/src/events/navigator/NavigatorEvent.ts b/src/events/navigator/NavigatorEvent.ts index 0ee65a70..19f3a81c 100644 --- a/src/events/navigator/NavigatorEvent.ts +++ b/src/events/navigator/NavigatorEvent.ts @@ -7,6 +7,7 @@ export class NavigatorEvent extends NitroEvent public static TOGGLE_NAVIGATOR: string = 'NE_TOGGLE_NAVIGATOR'; public static TOGGLE_ROOM_INFO: string = 'NE_TOGGLE_ROOM_INFO'; public static TOGGLE_ROOM_LINK: string = 'NE_TOGGLE_ROOM_LINK'; + public static TOGGLE_ROOM_SETTINGS: string = 'NE_TOGGLE_ROOM_SETTINGS'; private _roomId: number; private _password: string; diff --git a/src/events/room-widgets/thumbnail/RoomWidgetThumbnailEvent.ts b/src/events/room-widgets/thumbnail/RoomWidgetThumbnailEvent.ts new file mode 100644 index 00000000..03451226 --- /dev/null +++ b/src/events/room-widgets/thumbnail/RoomWidgetThumbnailEvent.ts @@ -0,0 +1,8 @@ +import { RoomWidgetUpdateEvent } from '../../../views/room/events/RoomWidgetUpdateEvent'; + +export class RoomWidgetThumbnailEvent extends RoomWidgetUpdateEvent +{ + public static SHOW_THUMBNAIL: string = 'NE_SHOW_THUMBNAIL'; + public static HIDE_THUMBNAIL: string = 'NE_HIDE_THUMBNAIL'; + public static TOGGLE_THUMBNAIL: string = 'NE_TOGGLE_THUMBNAIL'; +} diff --git a/src/events/room-widgets/thumbnail/index.ts b/src/events/room-widgets/thumbnail/index.ts new file mode 100644 index 00000000..56f116d3 --- /dev/null +++ b/src/events/room-widgets/thumbnail/index.ts @@ -0,0 +1 @@ +export * from './RoomWidgetThumbnailEvent'; diff --git a/src/views/navigator/NavigatorMessageHandler.tsx b/src/views/navigator/NavigatorMessageHandler.tsx index 3303559c..f3a62300 100644 --- a/src/views/navigator/NavigatorMessageHandler.tsx +++ b/src/views/navigator/NavigatorMessageHandler.tsx @@ -1,4 +1,4 @@ -import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer'; +import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, RoomSettingsUpdatedEvent, UserInfoEvent } from 'nitro-renderer'; import { FC, useCallback } from 'react'; import { GetRoomSessionManager, GetSessionDataManager } from '../../api'; import { VisitRoom } from '../../api/navigator/VisitRoom'; @@ -174,6 +174,13 @@ export const NavigatorMessageHandler: FC = props = }); }, [ dispatchNavigatorState ]); + const onRoomSettingsUpdatedEvent = useCallback((event: RoomSettingsUpdatedEvent) => + { + const parser = event.getParser(); + + SendMessageHook(new RoomInfoComposer(parser.roomId, false, false)); + }, []); + CreateMessageHook(UserInfoEvent, onUserInfoEvent); CreateMessageHook(RoomForwardEvent, onRoomForwardEvent); CreateMessageHook(RoomInfoOwnerEvent, onRoomInfoOwnerEvent); @@ -186,6 +193,7 @@ export const NavigatorMessageHandler: FC = props = CreateMessageHook(NavigatorCategoriesEvent, onNavigatorCategoriesEvent); CreateMessageHook(RoomCreatedEvent, onRoomCreatedEvent); CreateMessageHook(NavigatorHomeRoomEvent, onNavigatorHomeRoomEvent); + CreateMessageHook(RoomSettingsUpdatedEvent, onRoomSettingsUpdatedEvent); return null; } diff --git a/src/views/navigator/NavigatorView.tsx b/src/views/navigator/NavigatorView.tsx index 123b4044..3b4d5c52 100644 --- a/src/views/navigator/NavigatorView.tsx +++ b/src/views/navigator/NavigatorView.tsx @@ -13,6 +13,7 @@ import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView'; import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView'; import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView'; +import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView'; import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView'; import { NavigatorSearchView } from './views/search/NavigatorSearchView'; @@ -124,6 +125,7 @@ export const NavigatorView: FC = props => } { isRoomInfoOpen && setRoomInfoOpen(false) } /> } { isRoomLinkOpen && setRoomLinkOpen(false) } /> } + ); } diff --git a/src/views/navigator/common/RoomSettingsData.ts b/src/views/navigator/common/RoomSettingsData.ts new file mode 100644 index 00000000..95837d6a --- /dev/null +++ b/src/views/navigator/common/RoomSettingsData.ts @@ -0,0 +1,95 @@ +export default class RoomSettingsData +{ + public roomId: number; + public roomName: string; + public roomOriginalName: string; + public roomDescription: string; + public categoryId: number; + public userCount: number; + public tags: string[]; + public tradeState: number; + public allowWalkthrough: boolean; + + public lockState: number; + public originalLockState: number; + public password: string; + public confirmPassword: string; + public allowPets: boolean; + public allowPetsEat: boolean; + + public usersWithRights: Map; + public friendsWithoutRights: Map; + + public hideWalls: boolean; + public wallThickness: number; + public floorThickness: number; + public chatBubbleMode: number; + public chatBubbleWeight: number; + public chatBubbleSpeed: number; + public chatFloodProtection: number; + public chatDistance: number; + + public muteState: number; + public kickState: number; + public banState: number; + public bannedUsers: Map; + public selectedUserToUnban: number; + + constructor() + { + this.roomId = 0; + this.roomName = null; + this.roomOriginalName = null; + this.roomDescription = null; + this.categoryId = 0; + this.userCount = 0; + this.tags = []; + this.tradeState = 0; + this.allowWalkthrough = false; + + this.lockState = 0; + this.originalLockState = 0; + this.password = null; + this.confirmPassword = null; + this.allowPets = false; + this.allowPetsEat = false; + + this.usersWithRights = new Map(); + this.friendsWithoutRights = new Map(); + + this.hideWalls = false; + this.wallThickness = 0; + this.floorThickness = 0; + this.chatBubbleMode = 0; + this.chatBubbleWeight = 0; + this.chatBubbleSpeed = 0; + this.chatFloodProtection = 0; + this.chatDistance = 0; + + this.muteState = 0; + this.kickState = 0; + this.banState = 0; + this.bannedUsers = new Map(); + this.selectedUserToUnban = 0; + } + + public selectUserToUnban(userId: number): void + { + if(this.selectedUserToUnban === userId) + { + this.selectedUserToUnban = 0; + } + else + { + this.selectedUserToUnban = userId; + } + } + + public get selectedUsernameToUnban(): string + { + if(this.selectedUserToUnban > 0) + return this.bannedUsers.get(this.selectedUserToUnban); + + return null; + } +} diff --git a/src/views/navigator/views/NavigatorViews.scss b/src/views/navigator/views/NavigatorViews.scss index 174445ad..91af623e 100644 --- a/src/views/navigator/views/NavigatorViews.scss +++ b/src/views/navigator/views/NavigatorViews.scss @@ -4,3 +4,4 @@ @import './search-result-item/NavigatorSearchResultItemView'; @import './room-info/NavigatorRoomInfoView'; @import './room-link/NavigatorRoomLinkView'; +@import './room-settings/NavigatorRoomSettingsView'; diff --git a/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx index d7c483aa..d927791d 100644 --- a/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx +++ b/src/views/navigator/views/room-info/NavigatorRoomInfoView.tsx @@ -1,8 +1,9 @@ import classNames from 'classnames'; -import { RoomMuteComposer, RoomStaffPickComposer, UserHomeRoomComposer } from 'nitro-renderer'; +import { RoomMuteComposer, RoomSettingsComposer, RoomStaffPickComposer, UserHomeRoomComposer } from 'nitro-renderer'; import { FC, useCallback, useEffect, useState } from 'react'; import { GetConfiguration } from '../../../../api'; import { NavigatorEvent } from '../../../../events'; +import { RoomWidgetThumbnailEvent } from '../../../../events/room-widgets/thumbnail'; import { dispatchUiEvent } from '../../../../hooks/events'; import { SendMessageHook } from '../../../../hooks/messages'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; @@ -61,12 +62,16 @@ export const NavigatorRoomInfoView: FC = props => case 'navigator_search_tag': return; case 'open_room_thumbnail_camera': + dispatchUiEvent(new RoomWidgetThumbnailEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL)); return; case 'open_group_info': return; case 'toggle_room_link': dispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)); return; + case 'open_room_settings': + SendMessageHook(new RoomSettingsComposer(roomInfoData.enteredGuestRoom.roomId)); + return; case 'toggle_pick': setIsRoomPicked(value => !value); SendMessageHook(new RoomStaffPickComposer(roomInfoData.enteredGuestRoom.roomId)); @@ -115,7 +120,7 @@ export const NavigatorRoomInfoView: FC = props =>
{ roomInfoData.enteredGuestRoom.description }
- + processAction('open_room_thumbnail_camera') } /> { roomThumbnail && }
{ roomInfoData.enteredGuestRoom.habboGroupId > 0 &&
processAction('open_group_info') }> @@ -130,7 +135,7 @@ export const NavigatorRoomInfoView: FC = props => { LocalizeText('navigator.embed.caption') }
- + diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss new file mode 100644 index 00000000..ac5adf97 --- /dev/null +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.scss @@ -0,0 +1,3 @@ +.nitro-room-settings { + width: 400px; +} diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx index a214d88e..c9fe09a0 100644 --- a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.tsx @@ -1,6 +1,127 @@ -import { FC } from 'react'; +import { RoomSettingsEvent, SaveRoomSettingsComposer } from 'nitro-renderer'; +import { FC, useCallback, useState } from 'react'; +import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages'; +import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import RoomSettingsData from '../../common/RoomSettingsData'; +import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView'; +import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView'; + +const TABS: string[] = [ + 'navigator.roomsettings.tab.1', + 'navigator.roomsettings.tab.2', + 'navigator.roomsettings.tab.3', + 'navigator.roomsettings.tab.4', + 'navigator.roomsettings.tab.5' +]; export const NavigatorRoomSettingsView: FC<{}> = props => { - return null; + const [ roomSettingsData, setRoomSettingsData ] = useState(null); + const [ currentTab, setCurrentTab ] = useState(TABS[0]); + + const updateSettings = useCallback((roomSettings: RoomSettingsData) => + { + console.log('update', roomSettings); + setRoomSettingsData(roomSettings); + }, [ setRoomSettingsData ]); + + const onRoomSettingsEvent = useCallback((event: RoomSettingsEvent) => + { + const parser = event.getParser(); + + const roomSettingsData = new RoomSettingsData(); + + roomSettingsData.roomId = parser.roomId; + roomSettingsData.roomName = parser.name; + roomSettingsData.roomOriginalName = parser.name; + roomSettingsData.roomDescription = parser.description; + roomSettingsData.categoryId = parser.categoryId; + roomSettingsData.userCount = parser.userCount; + roomSettingsData.tradeState = parser.tradeMode; + roomSettingsData.allowWalkthrough = parser.allowWalkthrough; + + roomSettingsData.lockState = parser.state; + roomSettingsData.originalLockState = parser.state; + roomSettingsData.allowPets = parser.allowPets; + + roomSettingsData.hideWalls = parser.hideWalls; + roomSettingsData.wallThickness = parser.thicknessWall; + roomSettingsData.floorThickness = parser.thicknessFloor; + roomSettingsData.chatBubbleMode = parser.chatSettings.mode; + roomSettingsData.chatBubbleWeight = parser.chatSettings.weight; + roomSettingsData.chatBubbleSpeed = parser.chatSettings.speed; + roomSettingsData.chatFloodProtection = parser.chatSettings.protection; + roomSettingsData.chatDistance = parser.chatSettings.distance; + + roomSettingsData.muteState = parser.moderationSettings.allowMute; + roomSettingsData.kickState = parser.moderationSettings.allowKick; + roomSettingsData.banState = parser.moderationSettings.allowBan; + + setRoomSettingsData(roomSettingsData); + }, []); + + CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent); + + const save = useCallback(() => + { + console.log('save', roomSettingsData) + const composer = new SaveRoomSettingsComposer( + roomSettingsData.roomId, + roomSettingsData.roomName, + roomSettingsData.roomDescription, + roomSettingsData.lockState, + roomSettingsData.password, + roomSettingsData.userCount, + roomSettingsData.categoryId, + roomSettingsData.tags.length, + roomSettingsData.tags, + roomSettingsData.tradeState, + roomSettingsData.allowPets, + roomSettingsData.allowPetsEat, + roomSettingsData.allowWalkthrough, + roomSettingsData.hideWalls, + roomSettingsData.wallThickness, + roomSettingsData.floorThickness, + roomSettingsData.muteState, + roomSettingsData.kickState, + roomSettingsData.banState, + roomSettingsData.chatBubbleMode, + roomSettingsData.chatBubbleWeight, + roomSettingsData.chatBubbleSpeed, + roomSettingsData.chatDistance, + roomSettingsData.chatFloodProtection + ); + + SendMessageHook(composer); + }, [ roomSettingsData ]); + + const processAction = useCallback((action: string) => + { + switch(action) + { + case 'close': + setRoomSettingsData(null); + setCurrentTab(TABS[0]); + return; + } + }, [ setRoomSettingsData ]); + + if(!roomSettingsData) return null; + + return ( + + processAction('close') } /> + + { TABS.map(tab => + { + return setCurrentTab(tab) }>{ LocalizeText(tab) } + }) } + + + { currentTab === TABS[0] && } + { currentTab === TABS[1] && } + + + ); }; diff --git a/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts new file mode 100644 index 00000000..52eded57 --- /dev/null +++ b/src/views/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts @@ -0,0 +1,8 @@ +import RoomSettingsData from '../../common/RoomSettingsData'; + +export class NavigatorRoomSettingsTabViewProps +{ + roomSettingsData: RoomSettingsData; + setRoomSettingsData: (roomSettings: RoomSettingsData) => void; + onSave: () => void; +} diff --git a/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx b/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx new file mode 100644 index 00000000..579f2e55 --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx @@ -0,0 +1,96 @@ +import { FC, useCallback } from 'react'; +import { LocalizeText } from '../../../../../../utils/LocalizeText'; +import RoomSettingsData from '../../../../common/RoomSettingsData'; +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export const NavigatorRoomSettingsAccessTabView: FC = props => +{ + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + + const handleChange = useCallback((field: string, value: string | number | boolean) => + { + const roomSettings = ({...roomSettingsData} as RoomSettingsData); + let save = true; + + switch(field) + { + case 'lock_state': + roomSettings.lockState = Number(value); + + if(Number(value) === 3) save = false; + break; + case 'password': + roomSettings.password = String(value); + save = false; + break; + case 'confirm_password': + roomSettings.confirmPassword = String(value); + save = false; + break; + case 'allow_pets': + roomSettings.allowPets = Boolean(value); + break; + case 'allow_pets_eat': + roomSettings.allowPetsEat = Boolean(value); + break; + } + + setRoomSettingsData(roomSettings); + + if(save) onSave(); + }, [ roomSettingsData, setRoomSettingsData, onSave ]); + + const isPasswordValid = useCallback(() => + { + return (roomSettingsData.password && roomSettingsData.password.length > 0 && roomSettingsData.password === roomSettingsData.confirmPassword); + }, [ roomSettingsData ]); + + const trySave = useCallback(() => + { + if(isPasswordValid()) onSave(); + }, [ isPasswordValid, onSave ]); + + return ( + <> +
{ LocalizeText('navigator.roomsettings.doormode') }
+
+ handleChange('lock_state', 0) } /> + +
+
+ handleChange('lock_state', 1) } /> + +
+
+ handleChange('lock_state', 2) } /> + +
+
+ handleChange('lock_state', 3) } /> + +
+ { roomSettingsData.lockState === 3 && <> +
+ + handleChange('password', e.target.value) } onBlur={ trySave } placeholder="*****" /> +
+
+ + handleChange('confirm_password', e.target.value) } onBlur={ trySave } placeholder="*****" /> + { !isPasswordValid() && + { LocalizeText('navigator.roomsettings.invalidconfirm') } + } +
+ } +
{ LocalizeText('navigator.roomsettings.pets') }
+
+ handleChange('allow_pets', e.target.checked) } /> + +
+
+ handleChange('allow_pets_eat', e.target.checked) } /> + +
+ + ); +}; diff --git a/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx b/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx new file mode 100644 index 00000000..1a362e82 --- /dev/null +++ b/src/views/navigator/views/room-settings/views/tab-basic/NavigatorRoomSettingsBasicTabView.tsx @@ -0,0 +1,107 @@ +import { FC, useCallback, useEffect, useState } from 'react'; +import { LocalizeText } from '../../../../../../utils/LocalizeText'; +import RoomSettingsData from '../../../../common/RoomSettingsData'; +import { useNavigatorContext } from '../../../../context/NavigatorContext'; +import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types'; + +export const NavigatorRoomSettingsBasicTabView: FC = props => +{ + const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props; + + const { navigatorState = null } = useNavigatorContext(); + const { categories = null } = navigatorState; + + const [ maxVisitorsList, setMaxVisitorsList ] = useState(null); + + useEffect(() => + { + if(!maxVisitorsList) + { + const list = []; + + for(let i = 10; i <= 100; i = i + 10) + { + list.push(i); + } + + setMaxVisitorsList(list); + } + }, [ maxVisitorsList ]); + + const handleChange = useCallback((field: string, value: string | number | boolean) => + { + const roomSettings = ({...roomSettingsData} as RoomSettingsData); + let save = true; + + switch(field) + { + case 'name': + roomSettings.roomName = String(value); + save = false; + break; + case 'description': + roomSettings.roomDescription = String(value); + save = false; + break; + case 'category': + roomSettings.categoryId = Number(value); + break; + case 'max_visitors': + roomSettings.userCount = Number(value); + break; + case 'trade_state': + roomSettings.tradeState = Number(value); + break; + case 'allow_walkthrough': + roomSettings.allowWalkthrough = Boolean(value); + break; + } + + setRoomSettingsData(roomSettings); + + if(save) onSave(); + }, [ roomSettingsData, setRoomSettingsData, onSave ]); + + return ( + <> +
+ + handleChange('name', e.target.value) } onBlur={ onSave } /> +
+
+ + handleChange('description', e.target.value) } onBlur={ () => onSave() } /> +
+
+ + +
+
+ + +
+
+ + +
+
+ handleChange('allow_walkthrough', e.target.checked) } /> + +
+ + ); +}; diff --git a/src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx b/src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx index 90d7fb63..29b94fed 100644 --- a/src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx +++ b/src/views/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx @@ -1,4 +1,6 @@ import { FC, useCallback, useState } from 'react'; +import { RoomWidgetThumbnailEvent } from '../../../../events/room-widgets/thumbnail'; +import { useUiEvent } from '../../../../hooks/events'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout'; import { LocalizeText } from '../../../../utils/LocalizeText'; import { RoomThumbnailWidgetViewProps } from './RoomThumbnailView.types'; @@ -11,6 +13,30 @@ export const RoomThumbnailWidgetView: FC = props = const [ isBuilderVisible, setIsBuilderVisible ] = useState(false); const [ isCameraVisible, setIsCameraVisible ] = useState(false); + const onNitroEvent = useCallback((event: RoomWidgetThumbnailEvent) => + { + switch(event.type) + { + case RoomWidgetThumbnailEvent.SHOW_THUMBNAIL: + setIsSelectorVisible(true); + return; + case RoomWidgetThumbnailEvent.HIDE_THUMBNAIL: + setIsSelectorVisible(false); + setIsBuilderVisible(false); + setIsCameraVisible(false); + return; + case RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL: + setIsSelectorVisible(value => !value); + setIsBuilderVisible(false); + setIsCameraVisible(false); + return; + } + }, []); + + useUiEvent(RoomWidgetThumbnailEvent.SHOW_THUMBNAIL, onNitroEvent); + useUiEvent(RoomWidgetThumbnailEvent.HIDE_THUMBNAIL, onNitroEvent); + useUiEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL, onNitroEvent); + const handleAction = useCallback((action: string) => { switch(action)