nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-23 14:40:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '@update/navigator' into dev

Browse Source
This commit is contained in:
Bill 2022-03-19 22:43:14 -04:00
commit c8fe1934f1
35 changed files with 743 additions and 616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -14,7 +14,7 @@
"@fortawesome/fontawesome-svg-core": "^6.1.0",
"@fortawesome/free-solid-svg-icons": "^6.1.0",
"@fortawesome/react-fontawesome": "^0.1.17",
"@nitrots/nitro-renderer": "^1.1.13",
"@nitrots/nitro-renderer": "^1.1.14",
"animate.css": "^4.1.1",
"classnames": "^2.3.1",
"cross-env": "^7.0.3",

5
public/index.html
View File

@ -23,7 +23,10 @@
<script>
const NitroConfig = {
"config.urls": [ '/renderer-config.json', '/ui-config.json' ],
"sso.ticket": (new URLSearchParams(window.location.search).get('sso') || null)
"sso.ticket": (new URLSearchParams(window.location.search).get('sso') || null),
"forward.type": (new URLSearchParams(window.location.search).get('room') ? 2 : -1),
"forward.id": (new URLSearchParams(window.location.search).get('room') || 0),
"friend.id": (new URLSearchParams(window.location.search).get('friend') || 0),
};
</script>
</body>

1
src/common/card/NitroCardView.scss
View File

@ -179,6 +179,7 @@ $nitro-card-tabs-height: 33px;
.nitro-card-tabs {
height: 100%;
min-height: $nitro-card-tabs-height;
max-height: $nitro-card-tabs-height;
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
}

2
src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
View File

@ -171,7 +171,7 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
switch(purchaseState)
{
case CatalogPurchaseState.CONFIRM:
return <Button variant='warning' onClick={ event => purchase() }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>;
return <Button variant="warning" onClick={ event => purchase() }>{ LocalizeText('catalog.marketplace.confirm_title') }</Button>;
case CatalogPurchaseState.PURCHASE:
return <Button disabled><LayoutLoadingSpinnerView /></Button>;
case CatalogPurchaseState.FAILED:

2
src/components/groups/GroupsView.tsx
View File

@ -93,14 +93,12 @@ export const GroupsView: FC<{}> = props =>
return (
<GroupsContextProvider value={ { groupCustomize, setGroupCustomize } }>
<div className="nitro-groups">
{ isCreatorVisible &&
<GroupCreatorView onClose={ () => setCreatorVisible(false) } /> }
{ !isCreatorVisible &&
<GroupManagerView /> }
<GroupMembersView />
<GroupInformationStandaloneView />
</div>
</GroupsContextProvider>
);
};

29
src/components/navigator/NavigatorContext.tsx
View File

@ -1,15 +1,32 @@
import { createContext, Dispatch, FC, ProviderProps, useContext } from 'react';
import { INavigatorAction, INavigatorState } from './reducers/NavigatorReducer';
import { NavigatorCategoryDataParser, NavigatorSearchResultSet, NavigatorTopLevelContext } from '@nitrots/nitro-renderer';
import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react';
import { NavigatorData } from './common/NavigatorData';
interface INavigatorContext
{
navigatorState: INavigatorState;
dispatchNavigatorState: Dispatch<INavigatorAction>;
categories: NavigatorCategoryDataParser[];
setCategories: Dispatch<SetStateAction<NavigatorCategoryDataParser[]>>;
topLevelContext: NavigatorTopLevelContext;
setTopLevelContext: Dispatch<SetStateAction<NavigatorTopLevelContext>>;
topLevelContexts: NavigatorTopLevelContext[];
setTopLevelContexts: Dispatch<SetStateAction<NavigatorTopLevelContext[]>>;
navigatorData: NavigatorData;
setNavigatorData: Dispatch<SetStateAction<NavigatorData>>;
searchResult: NavigatorSearchResultSet;
setSearchResult: Dispatch<SetStateAction<NavigatorSearchResultSet>>;
}
const NavigatorContext = createContext<INavigatorContext>({
navigatorState: null,
dispatchNavigatorState: null
categories: null,
setCategories: null,
topLevelContext: null,
setTopLevelContext: null,
topLevelContexts: null,
setTopLevelContexts: null,
navigatorData: null,
setNavigatorData: null,
searchResult: null,
setSearchResult: null
});
export const NavigatorContextProvider: FC<ProviderProps<INavigatorContext>> = props =>

258
src/components/navigator/NavigatorMessageHandler.tsx
View File

@ -1,14 +1,38 @@
import { CantConnectMessageParser, GenericErrorEvent, GetGuestRoomResultEvent, LegacyExternalInterface, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomDoorbellRejectedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomInfoComposer, RoomScoreEvent, RoomSettingsUpdatedEvent, UserInfoEvent } from '@nitrots/nitro-renderer';
import { CanCreateRoomEventEvent, CantConnectMessageParser, FollowFriendMessageComposer, GenericErrorEvent, GetGuestRoomResultEvent, HabboWebTools, LegacyExternalInterface, NavigatorCategoriesComposer, NavigatorCategoriesEvent, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSearchEvent, NavigatorSettingsComposer, RoomCreatedEvent, RoomDataParser, RoomDoorbellAcceptedEvent, RoomDoorbellEvent, RoomDoorbellRejectedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomInfoComposer, RoomScoreEvent, RoomSettingsUpdatedEvent, SecurityLevel, UserInfoEvent, UserPermissionsEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { CreateRoomSession, GetSessionDataManager, LocalizeText, NotificationAlertType, NotificationUtilities, SendMessageComposer, VisitDesktop } from '../../api';
import { NavigatorEvent, UpdateDoorStateEvent } from '../../events';
import { DispatchUiEvent, UseMessageEventHook } from '../../hooks';
import { CreateLinkEvent, CreateRoomSession, GetConfiguration, GetSessionDataManager, LocalizeText, NotificationAlertType, NotificationUtilities, SendMessageComposer, TryVisitRoom, VisitDesktop } from '../../api';
import { UpdateDoorStateEvent } from '../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../hooks';
import { useNavigatorContext } from './NavigatorContext';
import { NavigatorActions } from './reducers/NavigatorReducer';
export const NavigatorMessageHandler: FC<{}> = props =>
{
const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext();
const { setCategories = null, setTopLevelContext = null, topLevelContexts = null, setTopLevelContexts = null, setNavigatorData = null, setSearchResult = null } = useNavigatorContext();
const onRoomSettingsUpdatedEvent = useCallback((event: RoomSettingsUpdatedEvent) =>
{
const parser = event.getParser();
SendMessageComposer(new RoomInfoComposer(parser.roomId, false, false));
}, []);
UseMessageEventHook(RoomSettingsUpdatedEvent, onRoomSettingsUpdatedEvent);
const onCanCreateRoomEventEvent = useCallback((event: CanCreateRoomEventEvent) =>
{
const parser = event.getParser();
if(parser.canCreate)
{
// show room event cvreate
return;
}
NotificationUtilities.simpleAlert(LocalizeText(`navigator.cannotcreateevent.error.${ parser.errorCode }`), null, null, null, LocalizeText('navigator.cannotcreateevent.title'));
}, []);
UseMessageEventHook(CanCreateRoomEventEvent, onCanCreateRoomEventEvent);
const onUserInfoEvent = useCallback((event: UserInfoEvent) =>
{
@ -16,32 +40,51 @@ export const NavigatorMessageHandler: FC<{}> = props =>
SendMessageComposer(new NavigatorSettingsComposer());
}, []);
const onUserPermissionsEvent = useCallback((event: UserPermissionsEvent) =>
{
const parser = event.getParser();
setNavigatorData(prevValue =>
{
const newValue = { ...prevValue };
newValue.eventMod = (parser.securityLevel >= SecurityLevel.MODERATOR);
newValue.roomPicker = (parser.securityLevel >= SecurityLevel.COMMUNITY);
return newValue;
});
}, [ setNavigatorData ]);
const onRoomForwardEvent = useCallback((event: RoomForwardEvent) =>
{
const parser = event.getParser();
SendMessageComposer(new RoomInfoComposer(parser.roomId, false, true));
TryVisitRoom(parser.roomId);
}, []);
const onRoomEntryInfoMessageEvent = useCallback((event: RoomEntryInfoMessageEvent) =>
{
const parser = event.getParser();
const roomInfoData = navigatorState.roomInfoData;
roomInfoData.currentRoomOwner = parser.isOwner;
roomInfoData.currentRoomId = parser.roomId;
setNavigatorData(prevValue =>
{
const newValue = { ...prevValue };
dispatchNavigatorState({
type: NavigatorActions.SET_ROOM_INFO_DATA,
payload: {
roomInfoData: roomInfoData
}
newValue.enteredGuestRoom = null;
newValue.currentRoomOwner = parser.isOwner;
newValue.currentRoomId = parser.roomId;
return newValue;
});
// close room info
// close room settings
// close room filter
SendMessageComposer(new RoomInfoComposer(parser.roomId, true, false));
if(LegacyExternalInterface.available) LegacyExternalInterface.call('legacyTrack', 'navigator', 'private', [ parser.roomId ]);
}, [ navigatorState, dispatchNavigatorState ]);
}, [ setNavigatorData ]);
const onGetGuestRoomResultEvent = useCallback((event: GetGuestRoomResultEvent) =>
{
@ -49,14 +92,28 @@ export const NavigatorMessageHandler: FC<{}> = props =>
if(parser.roomEnter)
{
const roomInfoData = navigatorState.roomInfoData;
roomInfoData.enteredGuestRoom = parser.data;
setNavigatorData(prevValue =>
{
const newValue = { ...prevValue };
dispatchNavigatorState({
type: NavigatorActions.SET_ROOM_INFO_DATA,
payload: {
roomInfoData: roomInfoData
newValue.enteredGuestRoom = parser.data;
newValue.currentRoomIsStaffPick = parser.staffPick;
const isCreated = (newValue.createdFlatId === parser.data.roomId);
if(!isCreated && parser.data.displayRoomEntryAd)
{
if(GetConfiguration<boolean>('roomenterad.habblet.enabled', false)) HabboWebTools.openRoomEnterAd();
}
newValue.createdFlatId = 0;
if(newValue.enteredGuestRoom && (newValue.enteredGuestRoom.habboGroupId > 0))
{
// close event info
}
return newValue;
});
}
else if(parser.roomForward)
@ -74,26 +131,38 @@ export const NavigatorMessageHandler: FC<{}> = props =>
}
}
if((parser.data.doorMode === RoomDataParser.NOOB_STATE) && !GetSessionDataManager().isAmbassador && !GetSessionDataManager().isRealNoob && !GetSessionDataManager().isModerator) return;
CreateRoomSession(parser.data.roomId);
}
else
{
const roomInfoData = navigatorState.roomInfoData;
roomInfoData.enteredGuestRoom = parser.data;
setNavigatorData(prevValue =>
{
const newValue = { ...prevValue };
dispatchNavigatorState({
type: NavigatorActions.SET_ROOM_INFO_DATA,
payload: {
roomInfoData: roomInfoData
}
newValue.enteredGuestRoom = parser.data;
newValue.currentRoomIsStaffPick = parser.staffPick;
return newValue;
});
}
}, [ dispatchNavigatorState, navigatorState ]);
}, [ setNavigatorData ]);
const onRoomScoreEvent = useCallback((event: RoomScoreEvent) =>
{
const parser = event.getParser();
}, [ ]);
setNavigatorData(prevValue =>
{
const newValue = { ...prevValue };
newValue.currentRoomRating = parser.totalLikes;
newValue.canRate = parser.canLike;
return newValue;
});
}, [ setNavigatorData ]);
const onRoomDoorbellEvent = useCallback((event: RoomDoorbellEvent) =>
{
@ -141,37 +210,57 @@ export const NavigatorMessageHandler: FC<{}> = props =>
{
const parser = event.getParser();
dispatchNavigatorState({
type: NavigatorActions.SET_TOP_LEVEL_CONTEXTS,
payload: {
topLevelContexts: parser.topLevelContexts
}
BatchUpdates(() =>
{
setTopLevelContexts(parser.topLevelContexts);
setTopLevelContext(parser.topLevelContexts.length ? parser.topLevelContexts[0] : null);
});
}, [ dispatchNavigatorState ]);
}, [ setTopLevelContexts, setTopLevelContext ]);
const onNavigatorSearchEvent = useCallback((event: NavigatorSearchEvent) =>
{
const parser = event.getParser();
dispatchNavigatorState({
type: NavigatorActions.SET_SEARCH_RESULT,
payload: {
searchResult: parser.result
BatchUpdates(() =>
{
setTopLevelContext(prevValue =>
{
let newValue = prevValue;
if(!newValue) newValue = ((topLevelContexts && topLevelContexts.length && topLevelContexts[0]) || null);
if(!newValue) return null;
if((parser.result.code !== newValue.code) && topLevelContexts && topLevelContexts.length)
{
for(const context of topLevelContexts)
{
if(context.code !== parser.result.code) continue;
newValue = context;
}
}
for(const context of topLevelContexts)
{
if(context.code !== parser.result.code) continue;
newValue = context;
}
return newValue;
});
}, [ dispatchNavigatorState ]);
setSearchResult(parser.result);
});
}, [ topLevelContexts, setTopLevelContext, setSearchResult ]);
const onNavigatorCategoriesEvent = useCallback((event: NavigatorCategoriesEvent) =>
{
const parser = event.getParser();
dispatchNavigatorState({
type: NavigatorActions.SET_CATEGORIES,
payload: {
categories: parser.categories
}
});
}, [ dispatchNavigatorState ]);
setCategories(parser.categories);
}, [ setCategories ]);
const onRoomCreatedEvent = useCallback((event: RoomCreatedEvent) =>
{
@ -184,20 +273,63 @@ export const NavigatorMessageHandler: FC<{}> = props =>
{
const parser = event.getParser();
dispatchNavigatorState({
type: NavigatorActions.SET_HOME_ROOM_ID,
payload: {
homeRoomId: parser.homeRoomId
}
});
}, [ dispatchNavigatorState ]);
let prevSettingsReceived = false;
const onRoomSettingsUpdatedEvent = useCallback((event: RoomSettingsUpdatedEvent) =>
setNavigatorData(prevValue =>
{
const parser = event.getParser();
prevSettingsReceived = prevValue.settingsReceived;
SendMessageComposer(new RoomInfoComposer(parser.roomId, false, false));
}, []);
const newValue = { ...prevValue };
newValue.homeRoomId = parser.homeRoomId;
newValue.settingsReceived = true;
return newValue;
});
if(prevSettingsReceived)
{
// refresh room info window
return;
}
let forwardType = -1;
let forwardId = -1;
if(GetConfiguration<string>('friend.id') !== undefined)
{
forwardType = 0;
SendMessageComposer(new FollowFriendMessageComposer(parseInt(GetConfiguration<string>('friend.id'))));
}
if((GetConfiguration<number>('forward.type') !== undefined) && (GetConfiguration<number>('forward.id') !== undefined))
{
forwardType = parseInt(GetConfiguration<string>('forward.type'));
forwardId = parseInt(GetConfiguration<string>('forward.id'))
}
if(forwardType === 2)
{
TryVisitRoom(forwardId);
}
else if((forwardType === -1) && (parser.roomIdToEnter > 0))
{
CreateLinkEvent('navigator/close');
CreateRoomSession(parser.roomIdToEnter);
if(parser.roomIdToEnter !== parser.homeRoomId)
{
CreateLinkEvent('navigator/close');
CreateRoomSession(parser.roomIdToEnter);
}
else
{
CreateLinkEvent('navigator/close');
CreateRoomSession(parser.homeRoomId);
}
}
}, [ setNavigatorData ]);
const onRoomEnterErrorEvent = useCallback((event: RoomEnterErrorEvent) =>
{
@ -226,12 +358,13 @@ export const NavigatorMessageHandler: FC<{}> = props =>
VisitDesktop();
}, []);
const onRoomCreatorEvent = useCallback((event: RoomEnterErrorEvent) =>
const onRoomCreatorEvent = useCallback((event: NavigatorOpenRoomCreatorEvent) =>
{
DispatchUiEvent(new NavigatorEvent(NavigatorEvent.SHOW_ROOM_CREATOR));
CreateLinkEvent('navigator/show');
}, []);
UseMessageEventHook(UserInfoEvent, onUserInfoEvent);
UseMessageEventHook(UserPermissionsEvent, onUserPermissionsEvent);
UseMessageEventHook(RoomForwardEvent, onRoomForwardEvent);
UseMessageEventHook(RoomEntryInfoMessageEvent, onRoomEntryInfoMessageEvent);
UseMessageEventHook(GetGuestRoomResultEvent, onGetGuestRoomResultEvent);
@ -245,7 +378,6 @@ export const NavigatorMessageHandler: FC<{}> = props =>
UseMessageEventHook(NavigatorCategoriesEvent, onNavigatorCategoriesEvent);
UseMessageEventHook(RoomCreatedEvent, onRoomCreatedEvent);
UseMessageEventHook(NavigatorHomeRoomEvent, onNavigatorHomeRoomEvent);
UseMessageEventHook(RoomSettingsUpdatedEvent, onRoomSettingsUpdatedEvent);
UseMessageEventHook(RoomEnterErrorEvent, onRoomEnterErrorEvent);
UseMessageEventHook(NavigatorOpenRoomCreatorEvent, onRoomCreatorEvent);

263
src/components/navigator/NavigatorView.tsx
View File

@ -1,64 +1,52 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomDataParser, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
import { AddEventLinkTracker, CreateLinkEvent, GoToDesktop, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
import { Column, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { NavigatorEvent, UpdateDoorStateEvent } from '../../events';
import { BatchUpdates, UseMountEffect, UseRoomSessionManagerEvent, UseUiEvent } from '../../hooks';
import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorCategoryDataParser, NavigatorInitComposer, NavigatorSearchComposer, NavigatorSearchResultSet, NavigatorTopLevelContext, RoomDataParser, RoomSessionEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { AddEventLinkTracker, GoToDesktop, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
import { Base, Column, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
import { UpdateDoorStateEvent } from '../../events';
import { BatchUpdates, UseRoomSessionManagerEvent, useSharedState, UseUiEvent } from '../../hooks';
import { NavigatorData } from './common/NavigatorData';
import { NavigatorContextProvider } from './NavigatorContext';
import { NavigatorMessageHandler } from './NavigatorMessageHandler';
import { initialNavigator, NavigatorActions, NavigatorReducer } from './reducers/NavigatorReducer';
import { NavigatorRoomCreatorView } from './views/creator/NavigatorRoomCreatorView';
import { NavigatorRoomDoorbellView } from './views/room-doorbell/NavigatorRoomDoorbellView';
import { NavigatorRoomInfoView } from './views/room-info/NavigatorRoomInfoView';
import { NavigatorRoomLinkView } from './views/room-link/NavigatorRoomLinkView';
import { NavigatorRoomPasswordView } from './views/room-password/NavigatorRoomPasswordView';
import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView';
import { NavigatorRoomDoorbellView } from './views/NavigatorRoomDoorbellView';
import { NavigatorRoomInfoView } from './views/NavigatorRoomInfoView';
import { NavigatorRoomLinkView } from './views/NavigatorRoomLinkView';
import { NavigatorRoomPasswordView } from './views/NavigatorRoomPasswordView';
import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView';
import { NavigatorSearchResultView } from './views/search-result/NavigatorSearchResultView';
import { LAST_SEARCH, NavigatorSearchView } from './views/search/NavigatorSearchView';
import { NavigatorSearchResultView } from './views/search/NavigatorSearchResultView';
import { NavigatorSearchView } from './views/search/NavigatorSearchView';
export const NavigatorView: FC<{}> = props =>
{
const [ isVisible, setIsVisible ] = useState(false);
const [ isReady, setIsReady ] = useState(false);
const [ isCreatorOpen, setCreatorOpen ] = useState(false);
const [ isRoomInfoOpen, setRoomInfoOpen ] = useState(false);
const [ isRoomLinkOpen, setRoomLinkOpen ] = useState(false);
const [ isLoading, setIsLoading ] = useState(false);
const [ needsInit, setNeedsInit ] = useState(true);
const [ needsSearch, setNeedsSearch ] = useState(false);
const [ categories, setCategories ] = useState<NavigatorCategoryDataParser[]>(null);
const [ topLevelContext, setTopLevelContext ] = useState<NavigatorTopLevelContext>(null);
const [ topLevelContexts, setTopLevelContexts ] = useState<NavigatorTopLevelContext[]>(null);
const [ navigatorData, setNavigatorData ] = useSharedState<NavigatorData>('@navigatorData', {
settingsReceived: false,
homeRoomId: 0,
enteredGuestRoom: null,
currentRoomOwner: false,
currentRoomId: 0,
currentRoomIsStaffPick: false,
createdFlatId: 0,
avatarId: 0,
roomPicker: false,
eventMod: false,
currentRoomRating: 0,
canRate: true
});
const [ searchResult, setSearchResult ] = useState<NavigatorSearchResultSet>(null);
const [ pendingDoorState, setPendingDoorState ] = useState<{ roomData: RoomDataParser, state: string }>(null);
const [ navigatorState, dispatchNavigatorState ] = useReducer(NavigatorReducer, initialNavigator);
const { needsNavigatorUpdate = true, topLevelContext = null, topLevelContexts = null, homeRoomId } = navigatorState;
const onNavigatorEvent = useCallback((event: NavigatorEvent) =>
{
switch(event.type)
{
case NavigatorEvent.SHOW_NAVIGATOR:
setIsVisible(true);
return;
case NavigatorEvent.HIDE_NAVIGATOR:
setIsVisible(false);
return;
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;
case NavigatorEvent.SHOW_ROOM_CREATOR:
setIsVisible(true);
setCreatorOpen(true);
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);
UseUiEvent(NavigatorEvent.SHOW_ROOM_CREATOR, onNavigatorEvent);
const pendingSearch = useRef<{ value: string, code: string }>(null);
const onUpdateDoorStateEvent = useCallback((event: UpdateDoorStateEvent) =>
{
@ -108,26 +96,67 @@ export const NavigatorView: FC<{}> = props =>
switch(event.type)
{
case RoomSessionEvent.CREATED:
BatchUpdates(() =>
{
setIsVisible(false);
setCreatorOpen(false);
});
return;
}
}, []);
UseRoomSessionManagerEvent(RoomSessionEvent.CREATED, onRoomSessionEvent);
const closePendingDoorState = useCallback((state: string) =>
{
if(state !== null)
{
setPendingDoorState(prevValue =>
{
return { ...prevValue, state };
});
}
else setPendingDoorState(null);
}, []);
const sendSearch = useCallback((searchValue: string, contextCode: string) =>
{
setCreatorOpen(false);
SendMessageComposer(new NavigatorSearchComposer(contextCode, searchValue));
setIsLoading(true);
}, []);
const goToHomeRoom = useCallback(() =>
const reloadCurrentSearch = useCallback(() =>
{
if(homeRoomId <= 0) return;
if(!isReady)
{
setNeedsSearch(true);
TryVisitRoom(homeRoomId);
}, [ homeRoomId ]);
return;
}
if(pendingSearch.current)
{
sendSearch(pendingSearch.current.value, pendingSearch.current.code);
pendingSearch.current = null;
return;
}
if(searchResult)
{
sendSearch(searchResult.data, searchResult.code);
return;
}
if(!topLevelContext) return;
sendSearch('', topLevelContext.code);
}, [ isReady, searchResult, topLevelContext, sendSearch ]);
const linkReceived = useCallback((url: string) =>
{
@ -137,13 +166,47 @@ export const NavigatorView: FC<{}> = props =>
switch(parts[1])
{
case 'goto':
if(parts.length > 2)
case 'show': {
BatchUpdates(() =>
{
setIsVisible(true);
setNeedsSearch(true);
});
return;
}
case 'hide':
setIsVisible(false);
return;
case 'toggle': {
if(isVisible)
{
setIsVisible(false);
return;
}
BatchUpdates(() =>
{
setIsVisible(true);
setNeedsSearch(true);
});
return;
}
case 'toggle-room-info':
setRoomInfoOpen(value => !value);
return;
case 'toggle-room-link':
setRoomLinkOpen(value => !value);
return;
case 'goto':
if(parts.length <= 2) return;
switch(parts[2])
{
case 'home':
goToHomeRoom();
if(navigatorData.homeRoomId <= 0) return;
TryVisitRoom(navigatorData.homeRoomId);
break;
default: {
const roomId = parseInt(parts[2]);
@ -151,7 +214,6 @@ export const NavigatorView: FC<{}> = props =>
TryVisitRoom(roomId);
}
}
}
return;
case 'create':
BatchUpdates(() =>
@ -169,24 +231,17 @@ export const NavigatorView: FC<{}> = props =>
if(parts.length > 3) searchValue = parts[3];
pendingSearch.current = { value: searchValue, code: topLevelContextCode };
BatchUpdates(() =>
{
setIsVisible(true);
sendSearch(searchValue, topLevelContextCode);
setNeedsSearch(true);
});
}
return;
}
}, [ goToHomeRoom, sendSearch ]);
const closePendingDoorState = useCallback((state: string) =>
{
if(state !== null)
{
setPendingDoorState(prevValue =>
{
return { roomData: prevValue.roomData, state };
});
}
else setPendingDoorState(null);
}, []);
}, [ isVisible, navigatorData.homeRoomId ]);
useEffect(() =>
{
@ -200,50 +255,42 @@ export const NavigatorView: FC<{}> = props =>
return () => RemoveLinkEventTracker(linkTracker);
}, [ linkReceived ]);
const enterRoomWebRequest = useCallback((k: string, _arg_2:boolean=false, _arg_3:string=null) =>
useEffect(() =>
{
SendMessageComposer(new ConvertGlobalRoomIdMessageComposer(k));
}, []);
if(!searchResult) return;
UseMountEffect(() =>
{
LegacyExternalInterface.addCallback(HabboWebTools.OPENROOM, enterRoomWebRequest);
});
setIsLoading(false);
}, [ searchResult ]);
useEffect(() =>
{
if(!needsNavigatorUpdate) return;
if(!isVisible || !isReady || !needsSearch) return;
dispatchNavigatorState({
type: NavigatorActions.SET_NEEDS_UPDATE,
payload: {
flag: false
}
});
reloadCurrentSearch();
setNeedsSearch(false);
}, [ isVisible, isReady, needsSearch, reloadCurrentSearch ]);
useEffect(() =>
{
if(isReady || !topLevelContext) return;
setIsReady(true);
}, [ isReady, topLevelContext ]);
useEffect(() =>
{
if(!isVisible || !needsInit) return;
SendMessageComposer(new NavigatorInitComposer());
}, [ needsNavigatorUpdate ]);
setNeedsInit(false);
}, [ isVisible, needsInit ]);
useEffect(() =>
{
if(!isVisible || !topLevelContext) return;
sendSearch('', topLevelContext.code);
}, [isVisible, sendSearch, topLevelContext])
useEffect(() =>
{
if(!topLevelContexts || !topLevelContexts.length) return;
sendSearch('', topLevelContexts[0].code);
}, [ topLevelContexts, sendSearch ]);
useEffect(() =>
{
if(!isVisible || !LAST_SEARCH || !LAST_SEARCH.length) return;
CreateLinkEvent(`navigator/search/${ LAST_SEARCH }`);
}, [ isVisible ]);
LegacyExternalInterface.addCallback(HabboWebTools.OPENROOM, (k: string, _arg_2: boolean = false, _arg_3: string = null) => SendMessageComposer(new ConvertGlobalRoomIdMessageComposer(k)));
}, []);
const getRoomDoorState = useMemo(() =>
{
@ -264,7 +311,7 @@ export const NavigatorView: FC<{}> = props =>
}, [ pendingDoorState, closePendingDoorState ]);
return (
<NavigatorContextProvider value={ { navigatorState, dispatchNavigatorState } }>
<NavigatorContextProvider value={ { categories, setCategories, topLevelContext, setTopLevelContext, topLevelContexts, setTopLevelContexts, navigatorData, setNavigatorData, searchResult, setSearchResult } }>
<NavigatorMessageHandler />
{ getRoomDoorState }
{ isVisible &&
@ -283,12 +330,14 @@ export const NavigatorView: FC<{}> = props =>
<FontAwesomeIcon icon="plus" />
</NitroCardTabsItemView>
</NitroCardTabsView>
<NitroCardContentView>
<NitroCardContentView position='relative'>
{ isLoading &&
<Base fit position="absolute" className="top-0 start-0 z-index-1 bg-muted opacity-0-5" /> }
{ !isCreatorOpen &&
<>
<NavigatorSearchView sendSearch={ sendSearch } />
<Column overflow="auto">
{ (navigatorState.searchResult && navigatorState.searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
{ (searchResult && searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
</Column>
</> }
{ isCreatorOpen && <NavigatorRoomCreatorView /> }

17
src/components/navigator/common/NavigatorData.ts Normal file
View File

@ -0,0 +1,17 @@
import { RoomDataParser } from '@nitrots/nitro-renderer';
export interface NavigatorData
{
homeRoomId: number;
settingsReceived: boolean;
enteredGuestRoom: RoomDataParser;
currentRoomOwner: boolean;
currentRoomId: number;
currentRoomIsStaffPick: boolean;
createdFlatId: number;
avatarId: number;
roomPicker: boolean;
eventMod: boolean;
currentRoomRating: number;
canRate: boolean;
}

4
src/components/navigator/common/RoomSettingsData.ts
View File

@ -33,7 +33,7 @@ export default class RoomSettingsData
public muteState: number;
public kickState: number;
public banState: number;
public bannedUsers: Map<number, string>;
public bannedUsers: any[];
public selectedUserToUnban: number;
constructor(parser: RoomSettingsParser)
@ -71,6 +71,6 @@ export default class RoomSettingsData
this.muteState = parser.moderationSettings.allowMute;
this.kickState = parser.moderationSettings.allowKick;
this.banState = parser.moderationSettings.allowBan;
this.bannedUsers = new Map<number, string>();
this.bannedUsers = [];
}
}

9
src/components/navigator/common/RoomSettingsUtils.ts
View File

@ -1,11 +1,10 @@
export function GetMaxVisitorsList(): number[]
const BuildMaxVisitorsList = () =>
{
const list: number[] = [];
for(let i = 10; i <= 100; i = i + 10)
{
list.push(i);
}
for(let i = 10; i <= 100; i = i + 10) list.push(i);
return list;
}
export const GetMaxVisitorsList = BuildMaxVisitorsList();

115
src/components/navigator/reducers/NavigatorReducer.tsx
View File

@ -1,115 +0,0 @@
import { NavigatorCategoryDataParser, NavigatorSearchResultSet, NavigatorTopLevelContext } from '@nitrots/nitro-renderer';
import { Reducer } from 'react';
import { RoomInfoData } from '../common/RoomInfoData';
export interface INavigatorState
{
needsNavigatorUpdate: boolean;
topLevelContext: NavigatorTopLevelContext;
topLevelContexts: NavigatorTopLevelContext[];
searchResult: NavigatorSearchResultSet;
categories: NavigatorCategoryDataParser[];
roomInfoData: RoomInfoData;
homeRoomId: number;
}
export interface INavigatorAction
{
type: string;
payload: {
flag?: boolean;
topLevelContext?: NavigatorTopLevelContext;
topLevelContexts?: NavigatorTopLevelContext[];
searchResult?: NavigatorSearchResultSet;
categories?: NavigatorCategoryDataParser[];
roomInfoData?: RoomInfoData;
homeRoomId?: number;
}
}
export class NavigatorActions
{
public static SET_NEEDS_UPDATE: string = 'NA_SET_NEEDS_UPDATE';
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';
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 = {
needsNavigatorUpdate: true,
topLevelContext: null,
topLevelContexts: null,
searchResult: null,
categories: null,
roomInfoData: new RoomInfoData(),
homeRoomId: null
}
export const NavigatorReducer: Reducer<INavigatorState, INavigatorAction> = (state, action) =>
{
switch(action.type)
{
case NavigatorActions.SET_NEEDS_UPDATE:
return { ...state, needsNavigatorUpdate: (action.payload.flag || false) };
case NavigatorActions.SET_TOP_LEVEL_CONTEXT: {
let topLevelContext = (action.payload.topLevelContext || state.topLevelContext || null);
let index = 0;
if(topLevelContext)
{
const foundIndex = state.topLevelContexts.indexOf(topLevelContext);
if(foundIndex > -1) index = foundIndex;
}
topLevelContext = (state.topLevelContexts[index] || null);
return { ...state, topLevelContext };
}
case NavigatorActions.SET_TOP_LEVEL_CONTEXTS: {
const topLevelContexts = (action.payload.topLevelContexts || state.topLevelContexts || null);
const topLevelContext = topLevelContexts[0];
return { ...state, topLevelContext, topLevelContexts };
}
case NavigatorActions.SET_SEARCH_RESULT: {
const searchResult = (action.payload.searchResult || state.searchResult || null);
const searchCode = searchResult.code;
let topLevelContext = state.topLevelContext;
if(searchCode !== topLevelContext.code)
{
for(const existingContext of state.topLevelContexts)
{
if(existingContext.code !== searchCode) continue;
topLevelContext = existingContext;
}
}
return { ...state, topLevelContext, searchResult };
}
case NavigatorActions.SET_CATEGORIES: {
const categories = (action.payload.categories || state.categories || null);
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;
}
}

15
src/components/navigator/views/creator/NavigatorRoomCreatorView.tsx → src/components/navigator/views/NavigatorRoomCreatorView.tsx
View File

@ -1,11 +1,11 @@
/* eslint-disable no-template-curly-in-string */
import { HabboClubLevelEnum, RoomCreateComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { GetClubMemberLevel, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, Text } from '../../../../common';
import { BatchUpdates } from '../../../../hooks';
import { IRoomModel, RoomModels } from '../../common/RoomModels';
import { useNavigatorContext } from '../../NavigatorContext';
import { GetClubMemberLevel, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../api';
import { Button, Column, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, Text } from '../../../common';
import { BatchUpdates } from '../../../hooks';
import { IRoomModel, RoomModels } from '../common/RoomModels';
import { useNavigatorContext } from '../NavigatorContext';
export const NavigatorRoomCreatorView: FC<{}> = props =>
{
@ -16,8 +16,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
const [ visitorsCount, setVisitorsCount ] = useState<number>(null);
const [ tradesSetting, setTradesSetting ] = useState<number>(0);
const [ selectedModelName, setSelectedModelName ] = useState<string>(RoomModels[0].name);
const { navigatorState = null } = useNavigatorContext();
const { categories = null } = navigatorState;
const { categories = null } = useNavigatorContext();
const getRoomModelImage = (name: string) => GetConfiguration<string>('images.url') + `/navigator/models/model_${ name }.png`;
@ -64,7 +63,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
</Column>
<Column grow gap={ 1 }>
<Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
<textarea className="flex-grow-1 form-control w-100" maxLength={255} onChange={event => setDescription(event.target.value)} placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } />
<textarea className="flex-grow-1 form-control form-control-sm w-100" maxLength={255} onChange={event => setDescription(event.target.value)} placeholder={ LocalizeText('navigator.createroom.roomdescinfo') } />
</Column>
<Column gap={ 1 }>
<Text>{ LocalizeText('navigator.category') }</Text>

12
src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx → src/components/navigator/views/NavigatorRoomDoorbellView.tsx
View File

@ -1,11 +1,11 @@
import { RoomDataParser } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { CreateRoomSession, GoToDesktop, LocalizeText } from '../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { Button } from '../../../../common/Button';
import { Column } from '../../../../common/Column';
import { Text } from '../../../../common/Text';
import { UpdateDoorStateEvent } from '../../../../events';
import { CreateRoomSession, GoToDesktop, LocalizeText } from '../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
import { Button } from '../../../common/Button';
import { Column } from '../../../common/Column';
import { Text } from '../../../common/Text';
import { UpdateDoorStateEvent } from '../../../events';
export interface NavigatorRoomDoorbellViewProps
{

77
src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx → src/components/navigator/views/NavigatorRoomInfoView.tsx
View File

@ -2,12 +2,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RoomMuteComposer, RoomSettingsComposer, RoomStaffPickComposer, SecurityLevel, UserHomeRoomComposer } from '@nitrots/nitro-renderer';
import classNames from 'classnames';
import { FC, useEffect, useState } from 'react';
import { GetGroupInformation, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../../common';
import { FloorplanEditorEvent, NavigatorEvent, RoomWidgetThumbnailEvent } from '../../../../events';
import { BatchUpdates, DispatchUiEvent } from '../../../../hooks';
import { useNavigatorContext } from '../../NavigatorContext';
import { NavigatorActions } from '../../reducers/NavigatorReducer';
import { CreateLinkEvent, GetGroupInformation, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../api';
import { Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common';
import { FloorplanEditorEvent, RoomWidgetThumbnailEvent } from '../../../events';
import { BatchUpdates, DispatchUiEvent } from '../../../hooks';
import { useNavigatorContext } from '../NavigatorContext';
export class NavigatorRoomInfoViewProps
{
@ -20,15 +19,14 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
const [ roomThumbnail, setRoomThumbnail ] = useState(null);
const [ isRoomPicked, setIsRoomPicked ] = useState(false);
const [ isRoomMuted, setIsRoomMuted ] = useState(false);
const { navigatorState = null, dispatchNavigatorState = null } = useNavigatorContext();
const { roomInfoData = null, homeRoomId = null } = navigatorState;
const { navigatorData = null } = useNavigatorContext();
const hasPermission = (permission: string) =>
{
switch(permission)
{
case 'settings':
return GetSessionDataManager().securityLevel >= SecurityLevel.MODERATOR || roomInfoData.currentRoomOwner;
return (GetSessionDataManager().userId === navigatorData.enteredGuestRoom.ownerId);
case 'staff_pick':
return GetSessionDataManager().securityLevel >= SecurityLevel.COMMUNITY;
default: return false;
@ -37,25 +35,18 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
const processAction = (action: string, value?: string) =>
{
if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
if(!navigatorData || !navigatorData.enteredGuestRoom) return;
switch(action)
{
case 'set_home_room':
let newRoomId = -1;
if(homeRoomId !== roomInfoData.enteredGuestRoom.roomId)
if(navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId)
{
newRoomId = roomInfoData.enteredGuestRoom.roomId;
newRoomId = navigatorData.enteredGuestRoom.roomId;
}
dispatchNavigatorState({
type: NavigatorActions.SET_HOME_ROOM_ID,
payload: {
homeRoomId: newRoomId
}
});
SendMessageComposer(new UserHomeRoomComposer(newRoomId));
return;
case 'navigator_search_tag':
@ -64,17 +55,17 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
DispatchUiEvent(new RoomWidgetThumbnailEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL));
return;
case 'open_group_info':
GetGroupInformation(roomInfoData.enteredGuestRoom.habboGroupId);
GetGroupInformation(navigatorData.enteredGuestRoom.habboGroupId);
return;
case 'toggle_room_link':
DispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
CreateLinkEvent('navigator/toggle-room-link');
return;
case 'open_room_settings':
SendMessageComposer(new RoomSettingsComposer(roomInfoData.enteredGuestRoom.roomId));
SendMessageComposer(new RoomSettingsComposer(navigatorData.enteredGuestRoom.roomId));
return;
case 'toggle_pick':
setIsRoomPicked(value => !value);
SendMessageComposer(new RoomStaffPickComposer(roomInfoData.enteredGuestRoom.roomId));
SendMessageComposer(new RoomStaffPickComposer(navigatorData.enteredGuestRoom.roomId));
return;
case 'toggle_mute':
setIsRoomMuted(value => !value);
@ -92,49 +83,49 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
useEffect(() =>
{
if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
if(!navigatorData) return;
BatchUpdates(() =>
{
setIsRoomPicked(roomInfoData.enteredGuestRoom.roomPicker);
setIsRoomMuted(roomInfoData.enteredGuestRoom.allInRoomMuted);
setIsRoomPicked(navigatorData.currentRoomIsStaffPick);
if(navigatorData.enteredGuestRoom) setIsRoomMuted(navigatorData.enteredGuestRoom.allInRoomMuted);
});
}, [ roomInfoData ]);
}, [ navigatorData ]);
if(!roomInfoData) return null;
if(!navigatorData.enteredGuestRoom) return null;
return (
<NitroCardView className="nitro-room-info" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings.roominfo') } onCloseClick={ () => processAction('close') } />
<NitroCardContentView className="text-black">
{ roomInfoData.enteredGuestRoom &&
{ navigatorData.enteredGuestRoom &&
<>
<Flex gap={ 2 } overflow="hidden">
<LayoutRoomThumbnailView roomId={ roomInfoData.enteredGuestRoom.roomId } customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef }>
<LayoutRoomThumbnailView roomId={ navigatorData.enteredGuestRoom.roomId } customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef }>
{ hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer top-0" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
</LayoutRoomThumbnailView>
<Column grow gap={ 1 } overflow="hidden">
<Flex gap={ 1 }>
<Column grow gap={ 1 }>
<Flex gap={ 1 }>
<i onClick={ () => processAction('set_home_room') } className={ 'flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': homeRoomId !== roomInfoData.enteredGuestRoom.roomId }) } />
<Text bold>{ roomInfoData.enteredGuestRoom.roomName }</Text>
<i onClick={ () => processAction('set_home_room') } className={ 'flex-shrink-0 icon icon-house-small cursor-pointer' + classNames({ ' gray': navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId }) } />
<Text bold>{ navigatorData.enteredGuestRoom.roomName }</Text>
</Flex>
{ roomInfoData.enteredGuestRoom.showOwner &&
{ navigatorData.enteredGuestRoom.showOwner &&
<Flex alignItems="center" gap={ 1 }>
<Text variant="muted">{ LocalizeText('navigator.roomownercaption') }</Text>
<Flex alignItems="center" gap={ 1 }>
<UserProfileIconView userId={ roomInfoData.enteredGuestRoom.ownerId } />
<Text>{ roomInfoData.enteredGuestRoom.ownerName }</Text>
<UserProfileIconView userId={ navigatorData.enteredGuestRoom.ownerId } />
<Text>{ navigatorData.enteredGuestRoom.ownerName }</Text>
</Flex>
</Flex> }
<Flex alignItems="center" gap={ 1 }>
<Text variant="muted">{ LocalizeText('navigator.roomrating') }</Text>
<Text>{ roomInfoData.enteredGuestRoom.score }</Text>
<Text>{ navigatorData.enteredGuestRoom.score }</Text>
</Flex>
{ (roomInfoData.enteredGuestRoom.tags.length > 0) &&
{ (navigatorData.enteredGuestRoom.tags.length > 0) &&
<Flex alignItems="center" gap={ 1 }>
{ roomInfoData.enteredGuestRoom.tags.map(tag =>
{ navigatorData.enteredGuestRoom.tags.map(tag =>
{
return <Text key={ tag } pointer className="bg-muted rounded p-1" onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text>
}) }
@ -143,15 +134,15 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
<Column alignItems="center" gap={ 1 }>
{ hasPermission('settings') &&
<i className="icon icon-cog cursor-pointer" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
<FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer" onClick={ event => DispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK)) } />
<FontAwesomeIcon icon="link" title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer" onClick={ event => CreateLinkEvent('navigator/toggle-room-link') } />
</Column>
</Flex>
<Text overflow="auto" style={ { maxHeight: 50 } }>{ roomInfoData.enteredGuestRoom.description }</Text>
{ (roomInfoData.enteredGuestRoom.habboGroupId > 0) &&
<Text overflow="auto" style={ { maxHeight: 50 } }>{ navigatorData.enteredGuestRoom.description }</Text>
{ (navigatorData.enteredGuestRoom.habboGroupId > 0) &&
<Flex pointer alignItems="center" gap={ 1 } onClick={ () => processAction('open_group_info') }>
<LayoutBadgeImageView className="flex-none" badgeCode={ roomInfoData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
<LayoutBadgeImageView className="flex-none" badgeCode={ navigatorData.enteredGuestRoom.groupBadgeCode } isGroup={ true } />
<Text underline>
{ LocalizeText('navigator.guildbase', ['groupName'], [roomInfoData.enteredGuestRoom.groupName]) }
{ LocalizeText('navigator.guildbase', ['groupName'], [navigatorData.enteredGuestRoom.groupName]) }
</Text>
</Flex> }
</Column>

33
src/components/navigator/views/NavigatorRoomLinkView.tsx Normal file
View File

@ -0,0 +1,33 @@
import { FC } from 'react';
import { GetConfiguration, LocalizeText } from '../../../api';
import { Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { useNavigatorContext } from '../NavigatorContext';
export class NavigatorRoomLinkViewProps
{
onCloseClick: () => void;
}
export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
{
const { onCloseClick = null } = props;
const { navigatorData = null } = useNavigatorContext();
if(!navigatorData.enteredGuestRoom) return null;
return (
<NitroCardView className="nitro-room-link" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('navigator.embed.title') } onCloseClick={ onCloseClick } />
<NitroCardContentView className="text-black d-flex align-items-center">
<Flex gap={ 2 }>
<LayoutRoomThumbnailView roomId={ navigatorData.enteredGuestRoom.roomId } customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef } />
<Column>
<Text bold fontSize={ 5 }>{ LocalizeText('navigator.embed.headline') }</Text>
<Text>{ LocalizeText('navigator.embed.info') }</Text>
<input type="text" readOnly className="form-control form-control-sm" value={ GetConfiguration<string>('navigator.embed.src').replace('%roomId%', navigatorData.enteredGuestRoom.roomId.toString()) } />
</Column>
</Flex>
</NitroCardContentView>
</NitroCardView>
);
};

12
src/components/navigator/views/room-password/NavigatorRoomPasswordView.tsx → src/components/navigator/views/NavigatorRoomPasswordView.tsx
View File

@ -1,11 +1,11 @@
import { RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { CreateRoomSession, LocalizeText } from '../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
import { Button } from '../../../../common/Button';
import { Column } from '../../../../common/Column';
import { Text } from '../../../../common/Text';
import { UpdateDoorStateEvent } from '../../../../events';
import { CreateRoomSession, LocalizeText } from '../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../common';
import { Button } from '../../../common/Button';
import { Column } from '../../../common/Column';
import { Text } from '../../../common/Text';
import { UpdateDoorStateEvent } from '../../../events';
export interface NavigatorRoomPasswordViewProps
{

68
src/components/navigator/views/room-link/NavigatorRoomLinkView.tsx
View File

@ -1,68 +0,0 @@
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { GetConfiguration, GetNitroInstance, LocalizeText } from '../../../../api';
import { Column, Flex, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { useNavigatorContext } from '../../NavigatorContext';
export class NavigatorRoomLinkViewProps
{
onCloseClick: () => void;
}
export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
{
const { onCloseClick = null } = props;
const [ roomThumbnail, setRoomThumbnail ] = useState(null);
const [ roomLink, setRoomLink ] = useState(null);
const { navigatorState = null } = useNavigatorContext();
const { roomInfoData = null } = navigatorState;
const elementRef = useRef<HTMLInputElement>();
useEffect(() =>
{
if(!roomInfoData || !roomInfoData.enteredGuestRoom) return;
if(roomInfoData.enteredGuestRoom.officialRoomPicRef)
{
setRoomThumbnail(GetConfiguration<string>('image.library.url') + roomInfoData.enteredGuestRoom.officialRoomPicRef);
}
const roomLinkRaw = GetNitroInstance().core.configuration.interpolate(LocalizeText('navigator.embed.src', ['roomId'], [roomInfoData.enteredGuestRoom.roomId.toString()]));
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 (
<NitroCardView className="nitro-room-link" theme="primary-slim">
<NitroCardHeaderView headerText={ LocalizeText('navigator.embed.title') } onCloseClick={ onCloseClick } />
<NitroCardContentView className="text-black d-flex align-items-center">
<Flex gap={ 2 }>
<LayoutRoomThumbnailView roomId={ roomInfoData.enteredGuestRoom.roomId } customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef } />
<Column>
<Text bold fontSize={ 5 }>{ LocalizeText('navigator.embed.headline') }</Text>
<Text>{ LocalizeText('navigator.embed.info') }</Text>
{ roomLink && <input ref={ elementRef } type="text" readOnly className="form-control form-control-sm" value={ roomLink } /> }
</Column>
</Flex>
</NitroCardContentView>
</NitroCardView>
);
};

6
src/components/navigator/views/room-settings/views/NavigatorRoomSettingsAccessTabView.tsx → src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
View File

@ -1,8 +1,8 @@
import { RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../api';
import { Column, Flex, Text } from '../../../../../common';
import RoomSettingsData from '../../../common/RoomSettingsData';
import { LocalizeText } from '../../../../api';
import { Column, Flex, Text } from '../../../../common';
import RoomSettingsData from '../../common/RoomSettingsData';
interface NavigatorRoomSettingsTabViewProps
{

26
src/components/navigator/views/room-settings/views/NavigatorRoomSettingsBasicTabView.tsx → src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
View File

@ -1,11 +1,11 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RoomDeleteComposer } from '@nitrots/nitro-renderer';
import { FC, useState } from 'react';
import { CreateLinkEvent, LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../../api';
import { Base, Flex, Text } from '../../../../../common';
import RoomSettingsData from '../../../common/RoomSettingsData';
import { GetMaxVisitorsList } from '../../../common/RoomSettingsUtils';
import { useNavigatorContext } from '../../../NavigatorContext';
import { FC } from 'react';
import { CreateLinkEvent, LocalizeText, NotificationUtilities, SendMessageComposer } from '../../../../api';
import { Base, Flex, Text } from '../../../../common';
import RoomSettingsData from '../../common/RoomSettingsData';
import { GetMaxVisitorsList } from '../../common/RoomSettingsUtils';
import { useNavigatorContext } from '../../NavigatorContext';
const DESC_MAX_LENGTH = 255;
@ -20,9 +20,7 @@ interface NavigatorRoomSettingsTabViewProps
export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
{
const { roomSettingsData = null, handleChange = null, close = null } = props;
const [ maxVisitorsList, setMaxVisitorsList ] = useState(GetMaxVisitorsList());
const { navigatorState = null } = useNavigatorContext();
const { categories = null } = navigatorState;
const { categories = null } = useNavigatorContext();
const deleteRoom = () =>
{
@ -50,19 +48,13 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
<Flex alignItems="center" gap={ 1 }>
<Text className="col-3">{ LocalizeText('navigator.category') }</Text>
<select className="form-select form-select-sm" value={ roomSettingsData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
{ categories && categories.map(category =>
{
return <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>
}) }
{ categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) }
</select>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<Text className="col-3">{ LocalizeText('navigator.maxvisitors') }</Text>
<select className="form-select form-select-sm" value={ roomSettingsData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
{ maxVisitorsList && maxVisitorsList.map(value =>
{
return <option key={ value } value={ value }>{ value }</option>
}) }
{ GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) }
</select>
</Flex>
<Flex alignItems="center" gap={ 1 }>

14
src/components/navigator/views/room-settings/views/NavigatorRoomSettingsModTabView.tsx → src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
View File

@ -1,8 +1,8 @@
import { RoomUnbanUserComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { LocalizeText, SendMessageComposer } from '../../../../../api';
import { Base, Button, Column, Grid, Text } from '../../../../../common';
import RoomSettingsData from '../../../common/RoomSettingsData';
import { LocalizeText, SendMessageComposer } from '../../../../api';
import { Base, Button, Column, Grid, Text } from '../../../../common';
import RoomSettingsData from '../../common/RoomSettingsData';
interface NavigatorRoomSettingsTabViewProps
{
@ -26,19 +26,19 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
return (
<Grid overflow="auto">
<Column size={ 6 }>
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ roomSettingsData.bannedUsers.size })</Text>
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ roomSettingsData.bannedUsers.length })</Text>
<Column className="bg-white rounded" overflow="hidden">
<Base className="list-container" overflow="auto">
{ Array.from(roomSettingsData.bannedUsers.entries()).map(([id, name], index) =>
{ roomSettingsData.bannedUsers.map((user, index) =>
{
return <Text key={index} className={ ((id === selectedUserId) ? 'selected' : '') } onClick={ event => setSelectedUserId(id)}> { name }</Text>
return <Text key={ index } className={ ((user.userId === selectedUserId) ? 'selected' : '') } onClick={ event => setSelectedUserId(user.userId)}>{ user.userName }</Text>
}) }
</Base>
</Column>
</Column>
<Column size={ 6 } justifyContent="end">
<Button disabled={ (selectedUserId < 1) } onClick={ event => unBanUser(selectedUserId) }>
{ LocalizeText('navigator.roomsettings.moderation.unban')} {selectedUserId > 0 && roomSettingsData.bannedUsers.get(selectedUserId) }
{/* { LocalizeText('navigator.roomsettings.moderation.unban')} {selectedUserId > 0 && roomSettingsData.bannedUsers.get(selectedUserId) } */}
</Button>
</Column>
</Grid>

6
src/components/navigator/views/room-settings/views/NavigatorRoomSettingsRightsTabView.tsx → src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
View File

@ -1,8 +1,8 @@
import { RemoveAllRightsMessageComposer, RoomTakeRightsComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { LocalizeText, SendMessageComposer } from '../../../../../api';
import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../../common';
import RoomSettingsData from '../../../common/RoomSettingsData';
import { LocalizeText, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../common';
import RoomSettingsData from '../../common/RoomSettingsData';
interface NavigatorRoomSettingsTabViewProps
{

120
src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
View File

@ -1,14 +1,15 @@
import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
import { RoomBannedUsersComposer, RoomSettingsEvent, RoomUsersWithRightsComposer, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
import { BannedUsersFromRoomEvent, FlatControllerAddedEvent, FlatControllerRemovedEvent, FlatControllersEvent } from '@nitrots/nitro-renderer/src/nitro/communication/messages/incoming/roomsettings';
import { FC, useCallback, useState } from 'react';
import { LocalizeText, SendMessageComposer } from '../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../common';
import { UseMessageEventHook } from '../../../../hooks';
import RoomSettingsData from '../../common/RoomSettingsData';
import { NavigatorRoomSettingsAccessTabView } from './views/NavigatorRoomSettingsAccessTabView';
import { NavigatorRoomSettingsBasicTabView } from './views/NavigatorRoomSettingsBasicTabView';
import { NavigatorRoomSettingsModTabView } from './views/NavigatorRoomSettingsModTabView';
import { NavigatorRoomSettingsRightsTabView } from './views/NavigatorRoomSettingsRightsTabView';
import { NavigatorRoomSettingsVipChatTabView } from './views/NavigatorRoomSettingsVipChatTabView';
import { NavigatorRoomSettingsAccessTabView } from './NavigatorRoomSettingsAccessTabView';
import { NavigatorRoomSettingsBasicTabView } from './NavigatorRoomSettingsBasicTabView';
import { NavigatorRoomSettingsModTabView } from './NavigatorRoomSettingsModTabView';
import { NavigatorRoomSettingsRightsTabView } from './NavigatorRoomSettingsRightsTabView';
import { NavigatorRoomSettingsVipChatTabView } from './NavigatorRoomSettingsVipChatTabView';
const TABS: string[] = [
'navigator.roomsettings.tab.1',
@ -23,6 +24,57 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
const [ roomSettingsData, setRoomSettingsData ] = useState<RoomSettingsData>(null);
const [ currentTab, setCurrentTab ] = useState(TABS[0]);
const onFlatControllersEvent = useCallback((event: FlatControllersEvent) =>
{
const parser = event.getParser();
if(!parser || !roomSettingsData) return;
if(roomSettingsData.roomId !== parser.roomId) return;
const data = Object.assign({}, roomSettingsData);
data.usersWithRights = new Map(parser.users);
setRoomSettingsData(data);
}, [ roomSettingsData] );
UseMessageEventHook(FlatControllersEvent, onFlatControllersEvent);
const onFlatControllerAddedEvent = useCallback((event: FlatControllerAddedEvent) =>
{
const parser = event.getParser();
if(!parser || !roomSettingsData) return;
if(roomSettingsData.roomId !== parser.roomId) return;
const data = Object.assign({}, roomSettingsData);
// add new controller
setRoomSettingsData(data);
}, [ roomSettingsData] );
UseMessageEventHook(FlatControllerAddedEvent, onFlatControllerAddedEvent);
const onFlatControllerRemovedEvent = useCallback((event: FlatControllerRemovedEvent) =>
{
const parser = event.getParser();
if(!parser || !roomSettingsData) return;
if(roomSettingsData.roomId !== parser.roomId) return;
const data = Object.assign({}, roomSettingsData);
// remove controller
setRoomSettingsData(data);
}, [ roomSettingsData] );
UseMessageEventHook(FlatControllerRemovedEvent, onFlatControllerRemovedEvent);
const updateSettings = useCallback((roomSettings: RoomSettingsData) =>
{
setRoomSettingsData(roomSettings);
@ -39,39 +91,24 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
SendMessageComposer(new RoomBannedUsersComposer(parser.roomId));
}, []);
const onRoomUsersWithRightsEvent = useCallback((event: RoomUsersWithRightsEvent) =>
{
const parser = event.getParser();
if(!parser || !roomSettingsData) return;
if(roomSettingsData.roomId !== parser.roomId) return;
const data = Object.assign({}, roomSettingsData);
data.usersWithRights = new Map(parser.users);
setRoomSettingsData(data);
}, [roomSettingsData]);
const onRoomBannedUsersEvent = useCallback((event: RoomBannedUsersEvent) =>
{
const parser = event.getParser();
if(!parser || !roomSettingsData) return;
if(roomSettingsData.roomId !== parser.roomId) return;
const data = Object.assign({}, roomSettingsData);
data.bannedUsers = new Map(parser.users);
setRoomSettingsData(data);
}, [roomSettingsData]);
UseMessageEventHook(RoomSettingsEvent, onRoomSettingsEvent);
UseMessageEventHook(RoomUsersWithRightsEvent, onRoomUsersWithRightsEvent);
UseMessageEventHook(RoomBannedUsersEvent, onRoomBannedUsersEvent);
const onBannedUsersFromRoomEvent = useCallback((event: BannedUsersFromRoomEvent) =>
{
const parser = event.getParser();
if(!parser || !roomSettingsData) return;
if(roomSettingsData.roomId !== parser.roomId) return;
const data = Object.assign({}, roomSettingsData);
data.bannedUsers = parser.bannedUsers;
setRoomSettingsData(data);
}, [roomSettingsData]);
UseMessageEventHook(BannedUsersFromRoomEvent, onBannedUsersFromRoomEvent);
const saveSettings = useCallback((data: RoomSettingsData) =>
{
@ -196,10 +233,13 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
roomSettings.chatDistance = Number(value);
save = false;
break;
case 'unban_user':
roomSettings.bannedUsers.delete(Number(value));
case 'unban_user': {
const index = roomSettings.bannedUsers.findIndex(user => (user.userId === Number(value)))
if(index > -1) roomSettings.bannedUsers.splice(index, 1);
save = false;
break;
}
case 'remove_rights_user':
roomSettings.usersWithRights.delete(Number(value));
save = false;

6
src/components/navigator/views/room-settings/views/NavigatorRoomSettingsVipChatTabView.tsx → src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
View File

@ -1,7 +1,7 @@
import { FC } from 'react';
import { LocalizeText } from '../../../../../api';
import { Column, Flex, Grid, Text } from '../../../../../common';
import RoomSettingsData from '../../../common/RoomSettingsData';
import { LocalizeText } from '../../../../api';
import { Column, Flex, Grid, Text } from '../../../../common';
import RoomSettingsData from '../../common/RoomSettingsData';
interface NavigatorRoomSettingsTabViewProps
{

0
src/components/navigator/views/search-result/NavigatorSearchResultItemInfoView.tsx → src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
View File

16
src/components/navigator/views/search-result/NavigatorSearchResultItemView.tsx → src/components/navigator/views/search/NavigatorSearchResultItemView.tsx
View File

@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, MouseEvent } from 'react';
import { CreateRoomSession, GetSessionDataManager, TryVisitRoom } from '../../../../api';
import { Flex, LayoutBadgeImageView, LayoutGridItemProps, LayoutRoomThumbnailView, Text } from '../../../../common';
import { Column, Flex, LayoutBadgeImageView, LayoutGridItemProps, LayoutRoomThumbnailView, Text } from '../../../../common';
import { UpdateDoorStateEvent } from '../../../../events';
import { DispatchUiEvent } from '../../../../hooks';
import { NavigatorSearchResultItemInfoView } from './NavigatorSearchResultItemInfoView';
@ -39,13 +39,7 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
return bg;
}
function openInfo(event: MouseEvent): void
{
event.stopPropagation();
console.log('info');
}
function visitRoom(): void
const visitRoom = (event: MouseEvent) =>
{
if(roomData.ownerId !== GetSessionDataManager().userId)
{
@ -71,7 +65,7 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
}
if(thumbnail) return (
<Flex pointer overflow="hidden" column={ true } alignItems="center" onClick={visitRoom} gap={0} className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-column border border-muted" {...rest}>
<Column pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 0 } className="navigator-item p-1 bg-light rounded-3 small mb-1 flex-column border border-muted" {...rest}>
<LayoutRoomThumbnailView roomId={roomData.roomId} customUrl={roomData.officialRoomPicRef} className="d-flex flex-column align-items-center justify-content-end mb-1">
<LayoutBadgeImageView badgeCode={roomData.groupBadgeCode} isGroup={true} className={ 'position-absolute top-0 start-0 m-1' } />
<Flex center className={ 'badge p-1 position-absolute m-1 ' + getUserCounterColor() } gap={ 1 }>
@ -89,7 +83,7 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
{ children }
</Flex>
</Flex>
</Column>
);
return (
@ -98,7 +92,7 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
<FontAwesomeIcon icon="user" />
{ roomData.userCount }
</Flex>
<Text truncate className="flex-grow-1">{ roomData.roomName }</Text>
<Text truncate grow>{ roomData.roomName }</Text>
<Flex reverse alignItems="center" gap={ 1 }>
<NavigatorSearchResultItemInfoView roomData={ roomData } />
{ roomData.habboGroupId > 0 && <i className="icon icon-navigator-room-group" /> }

0
src/components/navigator/views/search-result/NavigatorSearchResultView.tsx → src/components/navigator/views/search/NavigatorSearchResultView.tsx
View File

46
src/components/navigator/views/search/NavigatorSearchView.tsx
View File

@ -1,8 +1,10 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { FC, KeyboardEvent, useCallback, useEffect, useState } from 'react';
import React, { FC, KeyboardEvent, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../api';
import { Button } from '../../../../common/Button';
import { Flex } from '../../../../common/Flex';
import { BatchUpdates } from '../../../../hooks';
import { INavigatorSearchFilter } from '../../common/INavigatorSearchFilter';
import { SearchFilterOptions } from '../../common/SearchFilterOptions';
import { useNavigatorContext } from '../../NavigatorContext';
@ -11,18 +13,14 @@ export interface NavigatorSearchViewProps
sendSearch: (searchValue: string, contextCode: string) => void;
}
export let LAST_SEARCH: string = null;
export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
{
const { sendSearch = null } = props;
const [ searchFilterIndex, setSearchFilterIndex ] = useState(0);
const [ searchValue, setSearchValue ] = useState('');
const [ lastSearchQuery, setLastSearchQuery ] = useState('');
const { navigatorState = null } = useNavigatorContext();
const { topLevelContext = null, searchResult = null } = navigatorState;
const { topLevelContext = null, searchResult = null } = useNavigatorContext();
const processSearch = useCallback(() =>
const processSearch = () =>
{
if(!topLevelContext) return;
@ -32,11 +30,8 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
const searchQuery = ((searchFilter.query ? (searchFilter.query + ':') : '') + searchValue);
if(lastSearchQuery === searchQuery) return;
setLastSearchQuery(searchQuery);
sendSearch((searchQuery || ''), topLevelContext.code);
}, [ lastSearchQuery, searchFilterIndex, searchValue, topLevelContext, sendSearch ]);
}
const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
{
@ -47,20 +42,33 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
useEffect(() =>
{
if(!searchResult || !searchResult.data) return;
if(!searchResult) return null;
const searchResultDataParts = searchResult.data.split(':');
const split = searchResult.data.split(':');
LAST_SEARCH = `${ topLevelContext.code }/${ searchResult.data }`;
let filter: INavigatorSearchFilter = null;
let value: string = '';
if(searchResultDataParts.length === 2)
if(split.length >= 2)
{
let searchFilterIndex = SearchFilterOptions.findIndex(option => (option.query === searchResultDataParts[0]));
const [ query, ...rest ] = split;
if(searchFilterIndex > -1) setSearchFilterIndex(searchFilterIndex);
setSearchValue(searchResultDataParts[1]);
filter = SearchFilterOptions.find(option => (option.query === query));
value = rest.join(':');
}
}, [ searchResult, topLevelContext ]);
else
{
value = searchResult.data;
}
if(!filter) filter = SearchFilterOptions[0];
BatchUpdates(() =>
{
setSearchFilterIndex(SearchFilterOptions.findIndex(option => (option === filter)));
setSearchValue(value);
});
}, [ searchResult ]);
return (
<Flex fullWidth gap={ 1 }>

21
src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
View File

@ -3,19 +3,19 @@ import classNames from 'classnames';
import { FC, useCallback, useEffect, useState } from 'react';
import { CreateLinkEvent, LocalizeText, RoomWidgetZoomToggleMessage, SendMessageComposer } from '../../../../api';
import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes } from '../../../../common';
import { NavigatorEvent } from '../../../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook } from '../../../../hooks';
import { BatchUpdates, UseMessageEventHook, useSharedState } from '../../../../hooks';
import { NavigatorData } from '../../../navigator/common/NavigatorData';
import { useRoomContext } from '../../RoomContext';
export const RoomToolsWidgetView: FC<{}> = props =>
{
const [ isZoomedIn, setIsZoomedIn ] = useState(false);
const [ isLiked, setIsLiked ] = useState(false);
const [ roomName, setRoomName ] = useState(null);
const [ roomOwner, setRoomOwner ] = useState(null);
const [ roomTags, setRoomTags ] = useState(null);
const [ roomInfoDisplay, setRoomInfoDisplay ] = useState(false);
const [ isOpen, setIsOpen ] = useState(false);
const [ navigatorData, setNavigatorData ] = useSharedState<NavigatorData>('@navigatorData');
const { widgetHandler = null } = useRoomContext();
const handleToolClick = (action: string) =>
@ -23,7 +23,7 @@ export const RoomToolsWidgetView: FC<{}> = props =>
switch(action)
{
case 'settings':
DispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_INFO));
CreateLinkEvent('navigator/toggle-room-info');
return;
case 'zoom':
widgetHandler.processWidgetMessage(new RoomWidgetZoomToggleMessage(!isZoomedIn));
@ -33,13 +33,10 @@ export const RoomToolsWidgetView: FC<{}> = props =>
CreateLinkEvent('chat-history/toggle');
return;
case 'like_room':
if(isLiked) return;
SendMessageComposer(new RoomLikeRoomComposer(1));
setIsLiked(true);
return;
case 'toggle_room_link':
DispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_ROOM_LINK));
CreateLinkEvent('navigator/toggle-room-link');
return;
}
}
@ -69,13 +66,19 @@ export const RoomToolsWidgetView: FC<{}> = props =>
return () => clearTimeout(timeout);
}, [ roomName, roomOwner, roomTags ]);
useEffect(() =>
{
console.log(navigatorData);
}, [ navigatorData ]);
return (
<Flex className="nitro-room-tools-container" gap={ 2 }>
<Column center className="nitro-room-tools p-2">
<Base pointer title={ LocalizeText('room.settings.button.text') } className="icon icon-cog" onClick={ () => handleToolClick('settings') } />
<Base pointer title={ LocalizeText('room.zoom.button.text') } onClick={ () => handleToolClick('zoom') } className={ 'icon ' + classNames({ 'icon-zoom-less': !isZoomedIn, 'icon-zoom-more': isZoomedIn }) } />
<Base pointer title={ LocalizeText('room.chathistory.button.text') } onClick={ () => handleToolClick('chat_history') } className="icon icon-chat-history" />
{ !isLiked && <Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
{ navigatorData.canRate &&
<Base pointer title={ LocalizeText('room.like.button.text') } onClick={ () => handleToolClick('like_room') } className="icon icon-like-room" /> }
</Column>
<Column justifyContent="center">
<TransitionAnimation type={ TransitionAnimationTypes.SLIDE_LEFT } inProp={ isOpen } timeout={ 300 }>

4
src/components/toolbar/ToolbarView.tsx
View File

@ -2,7 +2,7 @@ import { Dispose, DropBounce, EaseOut, FigureUpdateEvent, JumpBy, Motions, Nitro
import { FC, useCallback, useState } from 'react';
import { CreateLinkEvent, GetSessionDataManager, GetUserProfile, OpenMessengerChat, VisitDesktop } from '../../api';
import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
import { AchievementsUIEvent, AchievementsUIUnseenCountEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, GuideToolEvent, InventoryEvent, ModToolsEvent, NavigatorEvent, UnseenItemTrackerUpdateEvent, UserSettingsUIEvent } from '../../events';
import { AchievementsUIEvent, AchievementsUIUnseenCountEvent, FriendsEvent, FriendsMessengerIconEvent, FriendsRequestCountEvent, GuideToolEvent, InventoryEvent, ModToolsEvent, UnseenItemTrackerUpdateEvent, UserSettingsUIEvent } from '../../events';
import { BatchUpdates, DispatchUiEvent, UseMessageEventHook, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
import { ToolbarViewItems } from './common/ToolbarViewItems';
import { ToolbarMeView } from './ToolbarMeView';
@ -135,7 +135,7 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
switch(item)
{
case ToolbarViewItems.NAVIGATOR_ITEM:
DispatchUiEvent(new NavigatorEvent(NavigatorEvent.TOGGLE_NAVIGATOR));
CreateLinkEvent('navigator/toggle');
return;
case ToolbarViewItems.INVENTORY_ITEM:
DispatchUiEvent(new InventoryEvent(InventoryEvent.TOGGLE_INVENTORY));

33
src/events/navigator/NavigatorEvent.ts
View File

@ -1,33 +0,0 @@
import { NitroEvent } from '@nitrots/nitro-renderer';
export class NavigatorEvent extends NitroEvent
{
public static SHOW_NAVIGATOR: string = 'NE_SHOW_NAVIGATOR';
public static HIDE_NAVIGATOR: string = 'NE_HIDE_NAVIGATOR';
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';
public static SHOW_ROOM_CREATOR: string = 'NE_TOGGLE_CREATOR';
private _roomId: number;
private _password: string;
constructor(type: string, roomId: number = -1, password = null)
{
super(type);
this._roomId = roomId;
this._password = password;
}
public get roomId(): number
{
return this._roomId;
}
public get password(): string
{
return this._password;
}
}

1
src/events/navigator/index.ts
View File

@ -1,2 +1 @@
export * from './NavigatorEvent';
export * from './UpdateDoorStateEvent';

67
src/hooks/UseSharedState.ts Normal file
View File

@ -0,0 +1,67 @@
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
const sharedStates: Map<string, any> = new Map();
const sharedSetters: Map<string, Dispatch<SetStateAction<any>>[]> = new Map();
export const useSharedState = <T>(key: string, initialValue?: T | (() => T)): [T, Dispatch<SetStateAction<T>>] =>
{
const [ state, setState ] = useState<T>(() =>
{
try
{
const item = sharedStates.get(key);
return item || initialValue;
}
catch (error)
{
console.error(error);
return initialValue;
}
});
const updateState: Dispatch<SetStateAction<T>> = data =>
{
try
{
const valueToStore = data instanceof Function ? data(state as T) : data;
const setters = sharedSetters.get(key);
if(setters) for(const setter of setters) setter(valueToStore);
sharedStates.set(key, valueToStore);
}
catch (error)
{
console.error(error);
}
};
useEffect(() =>
{
if(!key || !key.length) return;
let existing = sharedSetters.get(key);
if(!existing)
{
existing = [];
sharedSetters.set(key, existing);
}
existing.push(setState);
return () =>
{
const index = existing.findIndex(dispatch => (dispatch === setState));
if(index >= 0) existing.splice(index, 1);
}
}, [ key ]);
return [ state as T, updateState ];
}

1
src/hooks/index.ts
View File

@ -5,3 +5,4 @@ export * from './events/nitro';
export * from './events/ui';
export * from './messages';
export * from './UseMountEffect';
export * from './UseSharedState';

8
yarn.lock
View File

@ -1426,10 +1426,10 @@
"@jridgewell/resolve-uri" "^3.0.3"
"@jridgewell/sourcemap-codec" "^1.4.10"
"@nitrots/nitro-renderer@^1.1.13":
version "1.1.13"
resolved "https://registry.yarnpkg.com/@nitrots/nitro-renderer/-/nitro-renderer-1.1.13.tgz#0173ebda69c41031903461a21a4b3dfa0bd6fcaa"
integrity sha512-LGk8514m+/+Y50kOdkP7dVG9DXTNPM3kD/U+wDJBw6MPkxe0R2blhwPoELK02jO6Ehfoz5v+nlhNeUTHzRZzeg==
"@nitrots/nitro-renderer@^1.1.14":
version "1.1.14"
resolved "https://registry.yarnpkg.com/@nitrots/nitro-renderer/-/nitro-renderer-1.1.14.tgz#30c792572f4df26e85efab0342894bfeb10c3cfa"
integrity sha512-P4ruZ7eJ169q/pzsTN/AYf5pqr4ZoTCefvsAGHON4VSFqUO1vIivqqNmTgWJlBHMukj2VqrbLZukYrbt0+cUCQ==
dependencies:
"@pixi/canvas-renderer" "^6.2.2"
"@pixi/extract" "^6.2.2"