mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-10-24 03:33:09 +02:00
230 lines
9.8 KiB
TypeScript
230 lines
9.8 KiB
TypeScript
import { RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
|
|
import { FC, useCallback, useReducer, useRef, useState } from 'react';
|
|
import { GetRoomSession } from '../../api';
|
|
import { Base, Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
|
|
import { ModToolsEvent, ModToolsOpenRoomChatlogEvent, ModToolsOpenRoomInfoEvent, ModToolsOpenUserInfoEvent } from '../../events';
|
|
import { DispatchUiEvent, UseRoomEngineEvent, UseUiEvent } from '../../hooks';
|
|
import { ISelectedUser } from './common/ISelectedUser';
|
|
import { ModToolsContextProvider } from './ModToolsContext';
|
|
import { ModToolsMessageHandler } from './ModToolsMessageHandler';
|
|
import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
|
|
import { ModToolsChatlogView } from './views/room/ModToolsChatlogView';
|
|
import { ModToolsRoomView } from './views/room/ModToolsRoomView';
|
|
import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView';
|
|
import { ModToolsUserChatlogView } from './views/user/ModToolsUserChatlogView';
|
|
import { ModToolsUserView } from './views/user/ModToolsUserView';
|
|
|
|
export const ModToolsView: FC<{}> = props =>
|
|
{
|
|
const [ isVisible, setIsVisible ] = useState(false);
|
|
const [ selectedUser, setSelectedUser] = useState<ISelectedUser>(null);
|
|
const [ isTicketsVisible, setIsTicketsVisible ] = useState(false);
|
|
const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools);
|
|
const { currentRoomId = null, openRooms = null, openRoomChatlogs = null, openUserChatlogs = null, openUserInfo = null } = modToolsState;
|
|
const elementRef = useRef<HTMLDivElement>(null);
|
|
|
|
const onModToolsEvent = useCallback((event: ModToolsEvent) =>
|
|
{
|
|
switch(event.type)
|
|
{
|
|
case ModToolsEvent.SHOW_MOD_TOOLS:
|
|
setIsVisible(true);
|
|
return;
|
|
case ModToolsEvent.HIDE_MOD_TOOLS:
|
|
setIsVisible(false);
|
|
return;
|
|
case ModToolsEvent.TOGGLE_MOD_TOOLS:
|
|
setIsVisible(value => !value);
|
|
return;
|
|
}
|
|
}, []);
|
|
|
|
UseUiEvent(ModToolsEvent.SHOW_MOD_TOOLS, onModToolsEvent);
|
|
UseUiEvent(ModToolsEvent.HIDE_MOD_TOOLS, onModToolsEvent);
|
|
UseUiEvent(ModToolsEvent.TOGGLE_MOD_TOOLS, onModToolsEvent);
|
|
|
|
const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
|
|
{
|
|
if(event.category !== RoomObjectCategory.UNIT) return;
|
|
|
|
const roomSession = GetRoomSession();
|
|
|
|
if(!roomSession) return;
|
|
|
|
const userData = roomSession.userDataManager.getUserDataByIndex(event.objectId);
|
|
|
|
if(!userData || userData.type !== RoomObjectType.USER) return;
|
|
|
|
setSelectedUser({ userId: userData.webID, username: userData.name });
|
|
}, []);
|
|
|
|
UseRoomEngineEvent(RoomEngineObjectEvent.SELECTED, onRoomEngineObjectEvent);
|
|
|
|
const handleClick = useCallback((action: string, value?: string) =>
|
|
{
|
|
if(!action) return;
|
|
|
|
switch(action)
|
|
{
|
|
case 'toggle_room': {
|
|
if(!openRooms)
|
|
{
|
|
DispatchUiEvent(new ModToolsOpenRoomInfoEvent(currentRoomId));
|
|
return;
|
|
}
|
|
|
|
if(openRooms.indexOf(currentRoomId) > -1)
|
|
{
|
|
handleClick('close_room', currentRoomId.toString());
|
|
}
|
|
else
|
|
{
|
|
DispatchUiEvent(new ModToolsOpenRoomInfoEvent(currentRoomId));
|
|
}
|
|
return;
|
|
}
|
|
case 'close_room': {
|
|
const itemIndex = openRooms.indexOf(Number(value));
|
|
|
|
const clone = Array.from(openRooms);
|
|
clone.splice(itemIndex, 1);
|
|
|
|
dispatchModToolsState({
|
|
type: ModToolsActions.SET_OPEN_ROOMS,
|
|
payload: {
|
|
openRooms: clone
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
case 'toggle_room_chatlog': {
|
|
if(!openRoomChatlogs)
|
|
{
|
|
DispatchUiEvent(new ModToolsOpenRoomChatlogEvent(currentRoomId));
|
|
return;
|
|
}
|
|
|
|
if(openRoomChatlogs.indexOf(currentRoomId) > -1)
|
|
{
|
|
handleClick('close_room_chatlog', currentRoomId.toString());
|
|
}
|
|
else
|
|
{
|
|
DispatchUiEvent(new ModToolsOpenRoomChatlogEvent(currentRoomId));
|
|
}
|
|
return;
|
|
}
|
|
case 'close_room_chatlog': {
|
|
const itemIndex = openRoomChatlogs.indexOf(Number(value));
|
|
|
|
const clone = Array.from(openRoomChatlogs);
|
|
clone.splice(itemIndex, 1);
|
|
|
|
dispatchModToolsState({
|
|
type: ModToolsActions.SET_OPEN_ROOM_CHATLOGS,
|
|
payload: {
|
|
openRoomChatlogs: clone
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
case 'toggle_user_info': {
|
|
|
|
if(!selectedUser) return;
|
|
|
|
const userId = selectedUser.userId;
|
|
|
|
if(!openUserInfo)
|
|
{
|
|
DispatchUiEvent(new ModToolsOpenUserInfoEvent(userId));
|
|
return;
|
|
}
|
|
|
|
if(openUserInfo.indexOf(userId) > -1)
|
|
{
|
|
handleClick('close_user_info', userId.toString());
|
|
}
|
|
else
|
|
{
|
|
DispatchUiEvent(new ModToolsOpenUserInfoEvent(userId));
|
|
}
|
|
return;
|
|
}
|
|
case 'close_user_info': {
|
|
const itemIndex = openUserInfo.indexOf(Number(value));
|
|
|
|
const clone = Array.from(openUserInfo);
|
|
clone.splice(itemIndex, 1);
|
|
|
|
dispatchModToolsState({
|
|
type: ModToolsActions.SET_OPEN_USERINFO,
|
|
payload: {
|
|
openUserInfo: clone
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
case 'close_user_chatlog': {
|
|
const itemIndex = openUserChatlogs.indexOf(Number(value));
|
|
|
|
const clone = Array.from(openUserChatlogs);
|
|
clone.splice(itemIndex, 1);
|
|
|
|
dispatchModToolsState({
|
|
type: ModToolsActions.SET_OPEN_USER_CHATLOGS,
|
|
payload: {
|
|
openUserChatlogs: clone
|
|
}
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
}, [openRooms, currentRoomId, openRoomChatlogs, selectedUser, openUserInfo, openUserChatlogs]);
|
|
|
|
return (
|
|
<ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
|
|
<ModToolsMessageHandler />
|
|
{ isVisible &&
|
|
<NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } theme="primary-slim" >
|
|
<NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
|
|
<NitroCardContentView className="text-black" gap={ 1 }>
|
|
<Button gap={ 1 } onClick={ event => handleClick('toggle_room') } disabled={ !currentRoomId } className="position-relative">
|
|
<Base className="icon icon-small-room position-absolute start-1"/> Room Tool
|
|
</Button>
|
|
<Button innerRef={ elementRef } gap={ 1 } onClick={ event => handleClick('toggle_room_chatlog') } disabled={ !currentRoomId } className="position-relative">
|
|
<Base className="icon icon-chat-history position-absolute start-1"/> Chatlog Tool
|
|
</Button>
|
|
<Button gap={ 1 } onClick={ () => handleClick('toggle_user_info') } disabled={ !selectedUser } className="position-relative">
|
|
<Base className="icon icon-user position-absolute start-1"/> User: { selectedUser ? selectedUser.username : '' }
|
|
</Button>
|
|
<Button gap={ 1 } onClick={ () => setIsTicketsVisible(value => !value) } className="position-relative">
|
|
<Base className="icon icon-tickets position-absolute start-1"/> Report Tool
|
|
</Button>
|
|
</NitroCardContentView>
|
|
</NitroCardView> }
|
|
{ openRooms && openRooms.map(roomId =>
|
|
{
|
|
return <ModToolsRoomView key={ roomId } roomId={ roomId } onCloseClick={ () => handleClick('close_room', roomId.toString()) } />;
|
|
})
|
|
}
|
|
{ openRoomChatlogs && openRoomChatlogs.map(roomId =>
|
|
{
|
|
return <ModToolsChatlogView key={ roomId } roomId={ roomId } onCloseClick={ () => handleClick('close_room_chatlog', roomId.toString()) } />;
|
|
})
|
|
}
|
|
{ openUserInfo && openUserInfo.map(userId =>
|
|
{
|
|
return <ModToolsUserView key={userId} userId={userId} onCloseClick={ () => handleClick('close_user_info', userId.toString())}/>
|
|
})
|
|
}
|
|
{ openUserChatlogs && openUserChatlogs.map(userId =>
|
|
{
|
|
return <ModToolsUserChatlogView key={userId} userId={userId} onCloseClick={ () => handleClick('close_user_chatlog', userId.toString())}/>
|
|
})
|
|
}
|
|
|
|
{ isTicketsVisible && <ModToolsTicketsView onCloseClick={ () => setIsTicketsVisible(false) } /> }
|
|
</ModToolsContextProvider>
|
|
);
|
|
}
|