From ed211519a7a8a4b8824582dc5e26d76dcb4159a4 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Sat, 23 Apr 2022 16:00:14 -0300 Subject: [PATCH] Spectator Mode --- .../room_spectator_bottom_left.png | Bin 0 -> 461 bytes .../room_spectator_bottom_right.png | Bin 0 -> 456 bytes .../room_spectator_middle_bottom.png | Bin 0 -> 98 bytes .../room_spectator_middle_left.png | Bin 0 -> 94 bytes .../room_spectator_middle_right.png | Bin 0 -> 94 bytes .../room_spectator_middle_top.png | Bin 0 -> 95 bytes .../room_spectator_top_left.png | Bin 0 -> 408 bytes .../room_spectator_top_right.png | Bin 0 -> 412 bytes src/components/room/RoomView.scss | 1 + src/components/room/RoomView.tsx | 4 +++ .../room/spectator/RoomSpectatorView.scss | 26 ++++++++++++++++++ .../room/spectator/RoomSpectatorView.tsx | 8 ++++++ .../room/widgets/chat-input/ChatInputView.tsx | 4 ++- 13 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 src/assets/images/room-spectator/room_spectator_bottom_left.png create mode 100644 src/assets/images/room-spectator/room_spectator_bottom_right.png create mode 100644 src/assets/images/room-spectator/room_spectator_middle_bottom.png create mode 100644 src/assets/images/room-spectator/room_spectator_middle_left.png create mode 100644 src/assets/images/room-spectator/room_spectator_middle_right.png create mode 100644 src/assets/images/room-spectator/room_spectator_middle_top.png create mode 100644 src/assets/images/room-spectator/room_spectator_top_left.png create mode 100644 src/assets/images/room-spectator/room_spectator_top_right.png create mode 100644 src/components/room/spectator/RoomSpectatorView.scss create mode 100644 src/components/room/spectator/RoomSpectatorView.tsx 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 0000000000000000000000000000000000000000..01688cb295d0e7551042935ed2f4f3109aba7c77 GIT binary patch literal 461 zcmeAS@N?(olHy`uVBq!ia0vp^(LkKX!3HEf8uQy37#OE`x;TbZ+3@i2r9VQgauiG$dG6K)(p$WA zfY2Bh`DR&W!}Md@@<3wy)VA4A65X&CWQ=vv?%P1-Z-t!K>l$+JvL{BDv*tXQy0J0* zz`vT^e}D1qIkZXm7e__QUdHMjFTTv2bl|^g)l1_`?eCiX7uf6li@Oor9oJ>oET6bO z;!A|kFNuFXjMp`jwad;ey8ftN)Zk2$QJ-%1d*eyXv!fmS6kAWv^3yBpbiJ;zBqefl z>bp|6z5}+=k;Rd{wZ~lJRcD{)IKp&;bI)t5?sc8K+nLJ#&sj2=X`@0J)BDAzH>D)< zUrc>opOsRbaJWr(Ln1dY6j;r28hNF+9l*jrKR2IYH`k`;ayMgv(Zt~C>gTe~DWM4f DB_q~? literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..59c8ef2c2daef66a18a2a2dd18dea786943ace29 GIT binary patch literal 456 zcmeAS@N?(olHy`uVBq!ia0vp^(LkKX!3HEf8uQy37#RCKT^vIyZoR#}F}K-4qAhWj zM$oG-aSFNL5@mM1nb>(kq^Dpaw}2Ac=i(>SHX5VgvaN**K^72w3d4zy9obBEK)eM#_ zONxXXT>zn0*t_`Tt7^25Y8F+H{$gTe~ HDWM4fUf$6q literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..ba6fdecccebd3460ca5d32675b070dbddbbab852 GIT binary patch literal 98 zcmeAS@N?(olHy`uVBq!ia0vp^j6kf$!3HE*_k3grQktGFjv*Ddk`odVew@E>@#4q% x2d9Xhh+3-L@3^P_|37=?h`YX(>l|Gf7`EN_?kMv1F9T{~@O1TaS?83{1OP^IAYK3f literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..6d9aaa7958b41a907aacae0e1025f191f43c5418 GIT binary patch literal 94 zcmeAS@N?(olHy`uVBq!ia0vp^!a&T(!3HF4{HDeLDOFDw$B>F!$vZU9f1NLJ=D>ju t|Ns8}{{Oe@jld0>+K2!5_3>@6VOaQ6#dBs-r7BPZgQu&X%Q~loCIAFlAkzQ< literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..9d963b3d111202dc6ba066b300ee3e378186d025 GIT binary patch literal 94 zcmeAS@N?(olHy`uVBq!ia0vp^!a&T(!3HF4{HDeLDOFDw$B>F!$q5MwKki?=`0@Uf tsSoS-b69iL{r~s3e!?H$O1(t}3}&7xo*jP_76LUec)I$ztaD0e0sy?l9^n80 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..f6559cee0eb6b9c10edbe88989d77f6781520a82 GIT binary patch literal 95 zcmeAS@N?(olHy`uVBq!ia0vp^j6f{R!3HD)xzixJtr z2d=!_-1X+TmG;Kd-_B^o9Ae>CY`M7NefgJ|9Z$3Qru*~Uf4_bAw9Ezu>1~JF)^12V z9Cl;+Q9i{N^NuO>KVD%i)#q@&fB(I>_w%f4AIvTO9J%rN=Zu8( zm=iNMray6i@WEL3cMtdfij%ir7+<<{DB1AWzVo+Uq)v~j;9Qedm-WwDSyQ}D#E8-3 z-jb-YGl#YxD2ol3UoHAZnLGYaY-8=aC2`-Twf=XFJ761MG!z$;~z zb7RBpW8VtbK-oYkUTL#8CSXNC7En5o8$^J`fsE+mY*1mKNOS^B7%tBW)?y!9$H3lL W`0exJA! z9_ubY7um^Q>gP25^~B(UmeLpn)oH0^jk1+<%`b^x$=}B|ao>Ia$fQXM2ikNuBy#86 z*uYwL{f7PIr8c`aJg+<#G|%?M%g<9bO?mqI?N@%QHws@eXRSJzDE=sJ|6x9-{WjAl z2Ql;Q-gJ@s%hSD5zaOhUomP3wEkEy@Mc>ZUs+en0i_Md_|Kse42rF6qJz@L2XQ!>Q z7?<|erMy{oTB>bf2BW*#ubCTHPcO`7{C*)@`tSUW;o={p_p{Wly|{tgh4bbR9bJ-0V7-{zGz z19E=<^f&~R1qmN+g9!Drw?h~(5jK#*#KUGAsu^&}z?5#_ebcw`{K>AuZ`}tiSb?F= N;OXk;vd$@?2>@0kz9#?x literal 0 HcmV?d00001 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(