diff --git a/src/assets/images/room-spectator/room_spectator_bottom_left.png b/src/assets/images/room-spectator/room_spectator_bottom_left.png new file mode 100644 index 00000000..01688cb2 Binary files /dev/null and b/src/assets/images/room-spectator/room_spectator_bottom_left.png differ diff --git a/src/assets/images/room-spectator/room_spectator_bottom_right.png b/src/assets/images/room-spectator/room_spectator_bottom_right.png new file mode 100644 index 00000000..59c8ef2c Binary files /dev/null and b/src/assets/images/room-spectator/room_spectator_bottom_right.png differ diff --git a/src/assets/images/room-spectator/room_spectator_middle_bottom.png b/src/assets/images/room-spectator/room_spectator_middle_bottom.png new file mode 100644 index 00000000..ba6fdecc Binary files /dev/null and b/src/assets/images/room-spectator/room_spectator_middle_bottom.png differ diff --git a/src/assets/images/room-spectator/room_spectator_middle_left.png b/src/assets/images/room-spectator/room_spectator_middle_left.png new file mode 100644 index 00000000..6d9aaa79 Binary files /dev/null and b/src/assets/images/room-spectator/room_spectator_middle_left.png differ diff --git a/src/assets/images/room-spectator/room_spectator_middle_right.png b/src/assets/images/room-spectator/room_spectator_middle_right.png new file mode 100644 index 00000000..9d963b3d Binary files /dev/null and b/src/assets/images/room-spectator/room_spectator_middle_right.png differ diff --git a/src/assets/images/room-spectator/room_spectator_middle_top.png b/src/assets/images/room-spectator/room_spectator_middle_top.png new file mode 100644 index 00000000..f6559cee Binary files /dev/null and b/src/assets/images/room-spectator/room_spectator_middle_top.png differ diff --git a/src/assets/images/room-spectator/room_spectator_top_left.png b/src/assets/images/room-spectator/room_spectator_top_left.png new file mode 100644 index 00000000..5e62a3c9 Binary files /dev/null and b/src/assets/images/room-spectator/room_spectator_top_left.png differ diff --git a/src/assets/images/room-spectator/room_spectator_top_right.png b/src/assets/images/room-spectator/room_spectator_top_right.png new file mode 100644 index 00000000..825f3fb1 Binary files /dev/null and b/src/assets/images/room-spectator/room_spectator_top_right.png differ diff --git a/src/components/room/RoomView.scss b/src/components/room/RoomView.scss index 7cd8fbe4..739e3cbb 100644 --- a/src/components/room/RoomView.scss +++ b/src/components/room/RoomView.scss @@ -1 +1,2 @@ +@import "./spectator/RoomSpectatorView"; @import "./widgets/RoomWidgets"; diff --git a/src/components/room/RoomView.tsx b/src/components/room/RoomView.tsx index b30fec81..661d1452 100644 --- a/src/components/room/RoomView.tsx +++ b/src/components/room/RoomView.tsx @@ -5,12 +5,14 @@ import { Base } from '../../common'; import { UseRoomEngineEvent, UseRoomSessionManagerEvent } from '../../hooks'; import { RoomColorView } from './RoomColorView'; import { RoomContextProvider } from './RoomContext'; +import { RoomSpectatorView } from './spectator/RoomSpectatorView'; import { RoomWidgetsView } from './widgets/RoomWidgetsView'; export const RoomView: FC<{}> = props => { const [ roomSession, setRoomSession ] = useState(null); const [ widgetHandler, setWidgetHandler ] = useState(null); + const [ isSpectator, setIsSpectator ] = useState(false); const elementRef = useRef(); const onRoomEngineEvent = useCallback((event: RoomEngineEvent) => @@ -143,6 +145,7 @@ export const RoomView: FC<{}> = props => stage.addChild(displayObject); SetActiveRoomId(roomSession.roomId); + setIsSpectator(roomSession.isSpectator); }, [ roomSession, resize ]); useEffect(() => @@ -184,6 +187,7 @@ export const RoomView: FC<{}> = props => <> + { isSpectator && } } diff --git a/src/components/room/spectator/RoomSpectatorView.scss b/src/components/room/spectator/RoomSpectatorView.scss new file mode 100644 index 00000000..4663566f --- /dev/null +++ b/src/components/room/spectator/RoomSpectatorView.scss @@ -0,0 +1,26 @@ +.room-spectator { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: calc(100% - 50px); + user-select: none; + pointer-events: none; + opacity: 0.8; + background: url("../../../assets/images/room-spectator/room_spectator_top_left.png") no-repeat top left, + url("../../../assets/images/room-spectator/room_spectator_top_right.png") no-repeat top right, + url("../../../assets/images/room-spectator/room_spectator_bottom_right.png") no-repeat bottom right, + url("../../../assets/images/room-spectator/room_spectator_bottom_left.png") no-repeat bottom left, + url("../../../assets/images/room-spectator/room_spectator_middle_left.png") repeat-y left, + url("../../../assets/images/room-spectator/room_spectator_middle_top.png") repeat-x top, + url("../../../assets/images/room-spectator/room_spectator_middle_right.png") repeat-y right, + url("../../../assets/images/room-spectator/room_spectator_middle_bottom.png") repeat-x bottom + ; +} +/* +border-image-slice: 91 91 110 91 fill; +border-image-width: 79px 79px 79px 79px; +border-image-outset: 0px 0px 0px 0px; +border-image-repeat: repeat repeat; +border-image-source: url("../../../assets/images/room-spectator/room_spectator.png"); +*/ diff --git a/src/components/room/spectator/RoomSpectatorView.tsx b/src/components/room/spectator/RoomSpectatorView.tsx new file mode 100644 index 00000000..909b1cc5 --- /dev/null +++ b/src/components/room/spectator/RoomSpectatorView.tsx @@ -0,0 +1,8 @@ +import { FC } from 'react'; + +export const RoomSpectatorView: FC<{}> = props => +{ + return ( +
+ ); +}; diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx index a5295ca2..1cf885f6 100644 --- a/src/components/room/widgets/chat-input/ChatInputView.tsx +++ b/src/components/room/widgets/chat-input/ChatInputView.tsx @@ -1,7 +1,7 @@ import { HabboClubLevelEnum, RoomControllerLevel } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { createPortal } from 'react-dom'; -import { GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetFloodControlEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api'; +import { GetClubMemberLevel, GetConfiguration, GetRoomSession, GetSessionDataManager, LocalizeText, RoomWidgetChatMessage, RoomWidgetChatTypingMessage, RoomWidgetFloodControlEvent, RoomWidgetUpdateChatInputContentEvent, RoomWidgetUpdateInfostandUserEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../api'; import { Text } from '../../../../common'; import { UseEventDispatcherHook } from '../../../../hooks'; import { useRoomContext } from '../../RoomContext'; @@ -355,6 +355,8 @@ export const ChatInputView: FC<{}> = props => inputRef.current.parentElement.dataset.value = chatValue; }, [ chatValue ]); + if(GetRoomSession().isSpectator) return null; + return ( createPortal(