diff --git a/src/events/user-settings/UserSettingsUIEvent.ts b/src/events/user-settings/UserSettingsUIEvent.ts new file mode 100644 index 00000000..4ce30d88 --- /dev/null +++ b/src/events/user-settings/UserSettingsUIEvent.ts @@ -0,0 +1,8 @@ +import { NitroEvent } from '@nitrots/nitro-renderer'; + +export class UserSettingsUIEvent extends NitroEvent +{ + public static SHOW_USER_SETTINGS: string = 'NE_SHOW_USER_SETTINGS'; + public static HIDE_USER_SETTINGS: string = 'NE_HIDE_USER_SETTINGS'; + public static TOGGLE_USER_SETTINGS: string = 'NE_TOGGLE_USER_SETTINGS'; +} diff --git a/src/views/main/MainView.tsx b/src/views/main/MainView.tsx index eab47e1c..4b52836f 100644 --- a/src/views/main/MainView.tsx +++ b/src/views/main/MainView.tsx @@ -14,6 +14,7 @@ import { NotificationCenterView } from '../notification-center/NotificationCente import { RightSideView } from '../right-side/RightSideView'; import { RoomHostView } from '../room-host/RoomHostView'; import { ToolbarView } from '../toolbar/ToolbarView'; +import { UserSettingsView } from '../user-settings/UserSettingsView'; import { WiredView } from '../wired/WiredView'; import { MainViewProps } from './MainView.types'; @@ -60,6 +61,7 @@ export const MainView: FC = props => + ); } diff --git a/src/views/purse/PurseView.tsx b/src/views/purse/PurseView.tsx index 8d7ae11c..6737f28a 100644 --- a/src/views/purse/PurseView.tsx +++ b/src/views/purse/PurseView.tsx @@ -1,6 +1,8 @@ import { FriendlyTime, HabboClubLevelEnum, UserCurrencyComposer, UserSubscriptionComposer } from '@nitrots/nitro-renderer'; import { FC, useCallback, useEffect, useMemo, useState } from 'react'; import { GetConfiguration } from '../../api'; +import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; +import { dispatchUiEvent } from '../../hooks'; import { SendMessageHook } from '../../hooks/messages/message-event'; import { LocalizeText } from '../../utils/LocalizeText'; import { CurrencyIcon } from '../shared/currency-icon/CurrencyIcon'; @@ -18,6 +20,11 @@ export const PurseView: FC<{}> = props => const [ purse, setPurse ] = useState(new Purse()); const [ updateId, setUpdateId ] = useState(-1); + const handleUserSettingsClick = useCallback(() => + { + dispatchUiEvent(new UserSettingsUIEvent(UserSettingsUIEvent.TOGGLE_USER_SETTINGS)); + }, []); + const displayedCurrencies = useMemo(() => { return GetConfiguration('system.currency.types', []); @@ -130,7 +137,7 @@ export const PurseView: FC<{}> = props =>
-
+
diff --git a/src/views/user-settings/UserSettingsView.tsx b/src/views/user-settings/UserSettingsView.tsx new file mode 100644 index 00000000..61523f33 --- /dev/null +++ b/src/views/user-settings/UserSettingsView.tsx @@ -0,0 +1,130 @@ +import { NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer } from '@nitrots/nitro-renderer'; +import { FC, useCallback, useState } from 'react'; +import { UserSettingsUIEvent } from '../../events/user-settings/UserSettingsUIEvent'; +import { CreateMessageHook, dispatchMainEvent, SendMessageHook, useUiEvent } from '../../hooks'; +import { NitroCardContentView, NitroCardHeaderView } from '../../layout'; +import { NitroCardView } from '../../layout/card/NitroCardView'; +import { LocalizeText } from '../../utils'; + +export const UserSettingsView: FC<{}> = props => +{ + const [isVisible, setIsVisible] = useState(false); + const [useOldChat, setUseOldChat] = useState(false); + const [allowRoomInvites, setAllowRoomInvites] = useState(false); + const [cameraFollowDisabled, setCameraFollowDisabled] = useState(false); + const [systemVolume, setSystemVolume] = useState(0); + const [furniVolume, setFurniVolume] = useState(0); + const [traxVolume, setTraxVolume] = useState(0); + const [flags, setFlags] = useState(0); + const [chatType, setChatType] = useState(0); + + const onUserSettingsUIEvent = useCallback((event: UserSettingsUIEvent) => + { + switch (event.type) + { + case UserSettingsUIEvent.SHOW_USER_SETTINGS: + setIsVisible(true); + return; + case UserSettingsUIEvent.HIDE_USER_SETTINGS: + setIsVisible(false); + return; + case UserSettingsUIEvent.TOGGLE_USER_SETTINGS: + setIsVisible(value => !value); + return; + } + }, []); + + useUiEvent(UserSettingsUIEvent.SHOW_USER_SETTINGS, onUserSettingsUIEvent); + useUiEvent(UserSettingsUIEvent.HIDE_USER_SETTINGS, onUserSettingsUIEvent); + useUiEvent(UserSettingsUIEvent.TOGGLE_USER_SETTINGS, onUserSettingsUIEvent); + + const updateUserSettings = useCallback(() => + { + const event = new NitroSettingsEvent(NitroSettingsEvent.SETTINGS_UPDATED); + event.flags = flags; + event.oldChat = useOldChat; + event.roomInvites = allowRoomInvites; + event.volumeFurni = furniVolume; + event.volumeSystem = systemVolume; + event.volumeTrax = traxVolume; + event.oldChat = useOldChat; + event.chatType = chatType + event.cameraFollow = cameraFollowDisabled; + dispatchMainEvent(event); + }, [allowRoomInvites, cameraFollowDisabled, chatType, flags, furniVolume, systemVolume, traxVolume, useOldChat]); + + const onUserSettingsEvent = useCallback((event: UserSettingsEvent) => + { + const parser = event.getParser(); + + setAllowRoomInvites(parser.roomInvites); + setCameraFollowDisabled(parser.cameraFollow); + setFurniVolume(parser.volumeFurni); + setSystemVolume(parser.volumeSystem); + setTraxVolume(parser.volumeTrax); + setUseOldChat(parser.oldChat); + setChatType(parser.chatType); + setFlags(parser.flags); + + updateUserSettings(); + console.log(parser); + }, [updateUserSettings]); + + CreateMessageHook(UserSettingsEvent, onUserSettingsEvent); + + const processAction = useCallback((type: string, value?: string | number | boolean) => + { + switch (type) + { + case 'close_view': + setIsVisible(false); + return; + case 'oldchat': + setUseOldChat(Boolean(value)); + SendMessageHook(new UserSettingsOldChatComposer(useOldChat)); + updateUserSettings(); + return; + case 'room_invites': + setAllowRoomInvites(Boolean(value)); + SendMessageHook(new UserSettingsRoomInvitesComposer(allowRoomInvites)); + updateUserSettings(); + return; + case 'camera_follow': + setCameraFollowDisabled(value as boolean); + SendMessageHook(new UserSettingsCameraFollowComposer(cameraFollowDisabled)); + updateUserSettings(); + console.log(value as boolean); + console.log(cameraFollowDisabled); + return; + } + }, [allowRoomInvites, cameraFollowDisabled, updateUserSettings, useOldChat]); + + if (!isVisible) return null; + + return ( +
+ + processAction('close_view')} /> + +
+ processAction('oldchat', event.target.checked)} /> + +
+
+ processAction('room_invites', event.target.checked)} /> + +
+
+ processAction('camera_follow', event.target.checked)} /> + +
+
{LocalizeText('widget.memenu.settings.volume')}
+
+ +
+ +
+
+
+ ); +}