From e00dd44888c575b14aab1e596fa6dd5f642839c6 Mon Sep 17 00:00:00 2001 From: MyNameIsBatman Date: Tue, 29 Jun 2021 23:15:32 -0300 Subject: [PATCH] Room Creator --- .../navigator/NavigatorMessageHandler.tsx | 24 +++- src/views/navigator/NavigatorView.tsx | 16 ++- .../navigator/reducers/NavigatorReducer.tsx | 13 +- .../creator/NavigatorRoomCreatorView.scss | 26 ++++ .../creator/NavigatorRoomCreatorView.tsx | 128 +++++++++++++++++- .../creator/NavigatorRoomCreatorView.types.ts | 40 ++++++ 6 files changed, 236 insertions(+), 11 deletions(-) diff --git a/src/views/navigator/NavigatorMessageHandler.tsx b/src/views/navigator/NavigatorMessageHandler.tsx index 69819bba..bde182e4 100644 --- a/src/views/navigator/NavigatorMessageHandler.tsx +++ b/src/views/navigator/NavigatorMessageHandler.tsx @@ -1,6 +1,7 @@ -import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer'; +import { GenericErrorEvent, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorMetadataEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomForwardEvent, RoomInfoComposer, RoomInfoEvent, RoomInfoOwnerEvent, UserInfoEvent } from 'nitro-renderer'; import { FC, useCallback } from 'react'; import { GetRoomSessionManager, GetSessionDataManager } from '../../api'; +import { VisitRoom } from '../../api/navigator/VisitRoom'; import { CreateMessageHook, SendMessageHook } from '../../hooks/messages/message-event'; import { useNavigatorContext } from './context/NavigatorContext'; import { NavigatorMessageHandlerProps } from './NavigatorMessageHandler.types'; @@ -126,6 +127,25 @@ export const NavigatorMessageHandler: FC = props = }); }, [ dispatchNavigatorState ]); + const onNavigatorCategoriesEvent = useCallback((event: NavigatorCategoriesEvent) => + { + const parser = event.getParser(); + + dispatchNavigatorState({ + type: NavigatorActions.SET_CATEGORIES, + payload: { + categories: parser.categories + } + }); + }, [ dispatchNavigatorState ]); + + const onRoomCreatedEvent = useCallback((event: RoomCreatedEvent) => + { + const parser = event.getParser(); + + VisitRoom(parser.roomId); + }, []); + CreateMessageHook(UserInfoEvent, onUserInfoEvent); CreateMessageHook(RoomForwardEvent, onRoomForwardEvent); CreateMessageHook(RoomInfoOwnerEvent, onRoomInfoOwnerEvent); @@ -135,6 +155,8 @@ export const NavigatorMessageHandler: FC = props = CreateMessageHook(GenericErrorEvent, onGenericErrorEvent); CreateMessageHook(NavigatorMetadataEvent, onNavigatorMetadataEvent); CreateMessageHook(NavigatorSearchEvent, onNavigatorSearchEvent); + CreateMessageHook(NavigatorCategoriesEvent, onNavigatorCategoriesEvent); + CreateMessageHook(RoomCreatedEvent, onRoomCreatedEvent); return null; } diff --git a/src/views/navigator/NavigatorView.tsx b/src/views/navigator/NavigatorView.tsx index 6a81cf73..e1c1ecb3 100644 --- a/src/views/navigator/NavigatorView.tsx +++ b/src/views/navigator/NavigatorView.tsx @@ -10,6 +10,7 @@ import { NavigatorContextProvider } from './context/NavigatorContext'; import { NavigatorMessageHandler } from './NavigatorMessageHandler'; import { NavigatorViewProps } from './NavigatorView.types'; import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer'; +import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView'; import { NavigatorSearchResultSetView } from './views/search-result-set/NavigatorSearchResultSetView'; import { NavigatorSearchView } from './views/search/NavigatorSearchView'; @@ -46,6 +47,7 @@ export const NavigatorView: FC = props => { case RoomSessionEvent.CREATED: setIsVisible(false); + setCreatorOpen(false); return; } }, []); @@ -54,6 +56,7 @@ export const NavigatorView: FC = props => const sendSearch = useCallback((searchValue: string, contextCode: string) => { + setCreatorOpen(false); SendMessageHook(new NavigatorSearchComposer(contextCode, searchValue)); }, []); @@ -83,7 +86,7 @@ export const NavigatorView: FC = props => { isVisible && - setIsVisible(false) } /> + setIsVisible(false) } /> { topLevelContexts.map((context, index) => { @@ -93,14 +96,17 @@ export const NavigatorView: FC = props => ); }) } - - + setCreatorOpen(true) }> +
- - + { !isCreatorOpen && <> + + + } + { isCreatorOpen && }
} diff --git a/src/views/navigator/reducers/NavigatorReducer.tsx b/src/views/navigator/reducers/NavigatorReducer.tsx index fdfa3d2b..f6da40e4 100644 --- a/src/views/navigator/reducers/NavigatorReducer.tsx +++ b/src/views/navigator/reducers/NavigatorReducer.tsx @@ -1,4 +1,4 @@ -import { NavigatorSearchResultSet, NavigatorTopLevelContext } from 'nitro-renderer'; +import { NavigatorCategoryDataParser, NavigatorSearchResultSet, NavigatorTopLevelContext } from 'nitro-renderer'; import { Reducer } from 'react'; export interface INavigatorState @@ -7,6 +7,7 @@ export interface INavigatorState topLevelContext: NavigatorTopLevelContext; topLevelContexts: NavigatorTopLevelContext[]; searchResult: NavigatorSearchResultSet; + categories: NavigatorCategoryDataParser[]; } export interface INavigatorAction @@ -17,6 +18,7 @@ export interface INavigatorAction topLevelContext?: NavigatorTopLevelContext; topLevelContexts?: NavigatorTopLevelContext[]; searchResult?: NavigatorSearchResultSet; + categories?: NavigatorCategoryDataParser[]; } } @@ -26,13 +28,15 @@ export class NavigatorActions public static SET_TOP_LEVEL_CONTEXT: string = 'NA_SET_TOP_LEVEL_CONTEXT'; 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'; } export const initialNavigator: INavigatorState = { needsNavigatorUpdate: true, topLevelContext: null, topLevelContexts: null, - searchResult: null + searchResult: null, + categories: null } export const NavigatorReducer: Reducer = (state, action) => @@ -81,6 +85,11 @@ export const NavigatorReducer: Reducer = (sta return { ...state, topLevelContext, searchResult }; } + case NavigatorActions.SET_CATEGORIES: { + const categories = (action.payload.categories || state.categories || null); + + return { ...state, categories }; + } default: return state; } diff --git a/src/views/navigator/views/creator/NavigatorRoomCreatorView.scss b/src/views/navigator/views/creator/NavigatorRoomCreatorView.scss index e69de29b..ea0addeb 100644 --- a/src/views/navigator/views/creator/NavigatorRoomCreatorView.scss +++ b/src/views/navigator/views/creator/NavigatorRoomCreatorView.scss @@ -0,0 +1,26 @@ +.room-model-list { + display: flex; + overflow-x: auto; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; + -webkit-overflow-scrolling: touch; + + > div { + border-color: $grid-border-color !important; + background-color: $grid-bg-color; + + &.active { + border-color: $grid-active-border-color !important; + background-color: $grid-active-bg-color; + } + + &.disabled { + cursor: not-allowed; + + img { + opacity: .5; + filter: grayscale(1); + } + } + } +} diff --git a/src/views/navigator/views/creator/NavigatorRoomCreatorView.tsx b/src/views/navigator/views/creator/NavigatorRoomCreatorView.tsx index 2be3bdef..e82d1a79 100644 --- a/src/views/navigator/views/creator/NavigatorRoomCreatorView.tsx +++ b/src/views/navigator/views/creator/NavigatorRoomCreatorView.tsx @@ -1,7 +1,129 @@ -import { FC } from 'react'; -import { NavigatorRoomCreatorViewProps } from './NavigatorRoomCreatorView.types'; +import classNames from 'classnames'; +import { HabboClubLevelEnum, RoomCreateComposer } from 'nitro-renderer'; +import { FC, useCallback, useEffect, useState } from 'react'; +import { GetConfiguration, GetSessionDataManager } from '../../../../api'; +import { SendMessageHook } from '../../../../hooks/messages'; +import { LocalizeText } from '../../../../utils/LocalizeText'; +import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon'; +import { useNavigatorContext } from '../../context/NavigatorContext'; +import { NavigatorRoomCreatorViewProps, NAVIGATOR_ROOM_MODELS } from './NavigatorRoomCreatorView.types'; export const NavigatorRoomCreatorView: FC = props => { - return null; + const { navigatorState = null } = useNavigatorContext(); + const { categories = null } = navigatorState; + + const [ maxVisitorsList, setMaxVisitorsList ] = useState(null); + const [ name, setName ] = useState(null); + const [ description, setDescription ] = useState(null); + const [ category, setCategory ] = useState(null); + const [ visitorsCount, setVisitorsCount ] = useState(null); + const [ tradesSetting, setTradesSetting ] = useState(0); + const [ selectedModelName, setSelectedModelName ] = useState(NAVIGATOR_ROOM_MODELS[0].name); + + useEffect(() => + { + if(!maxVisitorsList) + { + const list = []; + + for(let i = 10; i <= 100; i = i + 10) + { + list.push(i); + } + + setMaxVisitorsList(list); + setVisitorsCount(list[0]); + } + }, []); + + useEffect(() => + { + if(categories) setCategory(categories[0].id); + }, [ categories ]); + + const getRoomModelImage = useCallback((name: string) => + { + return GetConfiguration('images.url') + `/navigator/models/model_${ name }.png`; + }, []); + + const selectModel = useCallback((name: string) => + { + const model = NAVIGATOR_ROOM_MODELS.find(model => model.name === name); + + if(!model) return; + + if(model.clubLevel > GetSessionDataManager().clubLevel) return; + + setSelectedModelName(name); + }, [ setSelectedModelName ]); + + const createRoom = useCallback(() => + { + if(!name || name.length < 3) return; + + SendMessageHook(new RoomCreateComposer(name, description, 'model_' + selectedModelName, Number(category), Number(visitorsCount), tradesSetting)); + }, [ name, description, category, visitorsCount, tradesSetting, selectedModelName ]); + + return ( +
+
+
+
+ + setName(e.target.value) } /> +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + setDescription(e.target.value) } /> +
+
+ { + NAVIGATOR_ROOM_MODELS.map(model => + { + return (
selectModel(model.name) } className={ 'h-100 cursor-pointer d-flex flex-column justify-content-center align-items-center p-1 me-2 rounded border border-2' + classNames({' active': selectedModelName === model.name, ' disabled': GetSessionDataManager().clubLevel < model.clubLevel}) }> + +
{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }
+ { model.clubLevel > HabboClubLevelEnum.NO_CLUB && } +
); + }) + } +
+ +
+ ); } diff --git a/src/views/navigator/views/creator/NavigatorRoomCreatorView.types.ts b/src/views/navigator/views/creator/NavigatorRoomCreatorView.types.ts index cbc4e26b..99183177 100644 --- a/src/views/navigator/views/creator/NavigatorRoomCreatorView.types.ts +++ b/src/views/navigator/views/creator/NavigatorRoomCreatorView.types.ts @@ -1,4 +1,44 @@ +import { HabboClubLevelEnum } from 'nitro-renderer'; + export interface NavigatorRoomCreatorViewProps { } + +export const NAVIGATOR_ROOM_MODELS: { clubLevel: number, tileSize: number, name: string }[] = [ + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 104, name: 'a'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 94, name: 'b'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 36, name: 'c'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 84, name: 'd'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 80, name: 'e'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 80, name: 'f'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 416, name: 'i'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 320, name: 'j'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 448, name: 'k'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 352, name: 'l'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 384, name: 'm'}, + { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 372, name: 'n'}, + { clubLevel: HabboClubLevelEnum.CLUB, tileSize: 80, name: 'g'}, + { clubLevel: HabboClubLevelEnum.CLUB, tileSize: 74, name: 'h'}, + { clubLevel: HabboClubLevelEnum.CLUB, tileSize: 416, name: 'o'}, + { clubLevel: HabboClubLevelEnum.CLUB, tileSize: 352, name: 'p'}, + { clubLevel: HabboClubLevelEnum.CLUB, tileSize: 304, name: 'q'}, + { clubLevel: HabboClubLevelEnum.CLUB, tileSize: 336, name: 'r'}, + { clubLevel: HabboClubLevelEnum.CLUB, tileSize: 748, name: 'u'}, + { clubLevel: HabboClubLevelEnum.CLUB, tileSize: 438, name: 'v'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 540, name: 't'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 512, name: 'w'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 396, name: 'x'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 440, name: 'y'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 456, name: 'z'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 208, name: '0'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 1009, name: '1'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 1044, name: '2'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 183, name: '3'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 254, name: '4'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 1024, name: '5'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 801, name: '6'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 354, name: '7'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 888, name: '8'}, + { clubLevel: HabboClubLevelEnum.VIP, tileSize: 926, name: '9'} +];