duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Fix Room Settings / HC now hidden when not HC and small fixes

Browse Source
This commit is contained in:
duckietm
2026-03-03 09:12:12 +01:00
parent 312edc3bf0
commit 7c01337984
7 changed files with 221 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/card/NitroCardHeaderView.tsx
+6 -1
View File
@@ -7,13 +7,15 @@ interface NitroCardHeaderViewProps extends ColumnProps
headerText: string;
isGalleryPhoto?: boolean;
noCloseButton?: boolean;
isInfoToHabboPages?: boolean;
onReportPhoto?: (event: MouseEvent) => void;
onClickInfoHabboPages?: (event: MouseEvent) => void;
onCloseClick: (event: MouseEvent) => void;
}
export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
{
const { headerText = null, isGalleryPhoto = false, noCloseButton = false, onReportPhoto = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
const { headerText = null, isGalleryPhoto = false, noCloseButton = false, isInfoToHabboPages = false, onReportPhoto = null, onClickInfoHabboPages = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
@@ -32,6 +34,9 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
<FaFlag className="fa-icon" />
</Base>
}
{ isInfoToHabboPages &&
<Base className="absolute right-8 nitro-card-header-info-habbopages cursor-pointer" position="absolute" onClick={ onClickInfoHabboPages } />
}
<div className="absolute flex items-center justify-center cursor-pointer right-2 p-[2px] ubuntu-close-button" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown }>
</div>
src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
+45 -45
View File
@@ -1,7 +1,7 @@
import { RoomDataParser } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { IRoomData, LocalizeText } from '../../../../api';
import { Text } from '../../../../common';
import { Column, Flex, Text } from '../../../../common';
interface NavigatorRoomSettingsTabViewProps
{
@@ -21,7 +21,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
if(!isTryingPassword || ((password.length <= 0) || (confirmPassword.length <= 0) || (password !== confirmPassword))) return;
handleChange('password', password);
};
}
useEffect(() =>
{
@@ -32,57 +32,57 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
return (
<>
<div className="flex flex-col gap-1">
<Text small bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
<Text small>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
</div>
<div className="overflow-auto">
<div className="flex flex-col gap-1">
<Text small bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
<div className="flex items-center gap-1">
<input checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
<Text small>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
</div>
<div className="flex items-center gap-1">
<input checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } />
<Text small>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
</div>
<div className="flex items-center gap-1">
<input checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } />
<Text small>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
</div>
<div className="flex w-full gap-1">
<input checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => setIsTryingPassword(event.target.checked) } />
<Column gap={ 1 }>
<Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
<Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
</Column>
<Column overflow="auto">
<Column gap={ 1 }>
<Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
<Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } />
<Text>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } />
<Text>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
</Flex>
<Flex fullWidth gap={ 1 }>
<input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } onChange={ event => setIsTryingPassword(event.target.checked) } />
{ !isTryingPassword && (roomData.lockState !== RoomDataParser.PASSWORD_STATE) &&
<Text small>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
<Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
{ (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) &&
<div className="flex flex-col gap-1">
<Text small>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
<input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.password') } type="password" value={ password } onChange={ event => setPassword(event.target.value) } onFocus={ event => setIsTryingPassword(true) } />
<Column gap={ 1 }>
<Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
<input type="password" className="form-control form-control-sm col-4" value={ password } onChange={ event => setPassword(event.target.value) } placeholder={ LocalizeText('navigator.roomsettings.password') } onFocus={ event => setIsTryingPassword(true) } />
{ isTryingPassword && (password.length <= 0) &&
<Text small bold variant="danger">
<Text bold small variant="danger">
{ LocalizeText('navigator.roomsettings.passwordismandatory') }
</Text> }
<input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } type="password" value={ confirmPassword } onBlur={ saveRoomPassword } onChange={ event => setConfirmPassword(event.target.value) } />
<input type="password" className="form-control form-control-sm col-4" value={ confirmPassword } onChange={ event => setConfirmPassword(event.target.value) } onBlur={ saveRoomPassword } placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } />
{ isTryingPassword && ((password.length > 0) && (password !== confirmPassword)) &&
<Text small bold variant="danger">
<Text bold small variant="danger">
{ LocalizeText('navigator.roomsettings.invalidconfirm') }
</Text> }
</div> }
</div>
</div>
<div className="flex flex-col gap-1">
<Text small bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
<div className="flex items-center gap-1">
<input checked={ roomData.allowPets } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets', event.target.checked) } />
<Text small>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
</div>
<div className="flex items-center gap-1">
<input checked={ roomData.allowPetsEat } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
<Text small>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
</div>
</div>
</div>
</Column> }
</Flex>
</Column>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="checkbox" checked={ roomData.allowPets } onChange={ event => handleChange('allow_pets', event.target.checked) } />
<Text>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<input className="form-check-input" type="checkbox" checked={ roomData.allowPetsEat } onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
<Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
</Flex>
</Column>
</Column>
</>
);
};
src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
+41 -42
View File
@@ -1,10 +1,9 @@
import { CreateLinkEvent, RoomDeleteComposer, RoomSettingsSaveErrorEvent, RoomSettingsSaveErrorParser } from '@nitrots/nitro-renderer';
import { RoomDeleteComposer, RoomSettingsSaveErrorEvent, RoomSettingsSaveErrorParser } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { FaTimes } from 'react-icons/fa';
import { GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
import { Column, Text } from '../../../../common';
import { CreateLinkEvent, GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
import { Base, Column, Flex, Text } from '../../../../common';
import { useMessageEvent, useNavigator, useNotification } from '../../../../hooks';
import { NitroInput } from '../../../../layout';
const ROOM_NAME_MIN_LENGTH = 3;
const ROOM_NAME_MAX_LENGTH = 60;
@@ -34,9 +33,9 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
{
const parser = event.getParser();
if(!parser) return;
if (!parser) return;
switch(parser.code)
switch (parser.code)
{
case RoomSettingsSaveErrorParser.ERROR_INVALID_TAG:
setTypeError('navigator.roomsettings.unacceptablewords');
@@ -51,7 +50,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
const deleteRoom = () =>
{
showConfirm(LocalizeText('navigator.roomsettings.deleteroom.confirm.message', [ 'room_name' ], [ roomData.roomName ]), () =>
showConfirm(LocalizeText('navigator.roomsettings.deleteroom.confirm.message', [ 'room_name' ], [ roomData.roomName ] ), () =>
{
SendMessageComposer(new RoomDeleteComposer(roomData.roomId));
@@ -60,21 +59,21 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
CreateLinkEvent('navigator/search/myworld_view');
},
null, null, null, LocalizeText('navigator.roomsettings.deleteroom.confirm.title'));
};
}
const saveRoomName = () =>
{
if((roomName === roomData.roomName) || (roomName.length < ROOM_NAME_MIN_LENGTH) || (roomName.length > ROOM_NAME_MAX_LENGTH)) return;
handleChange('name', roomName);
};
}
const saveRoomDescription = () =>
{
if((roomDescription === roomData.roomDescription) || (roomDescription.length > DESC_MAX_LENGTH)) return;
handleChange('description', roomDescription);
};
}
const saveTags = (index: number) =>
{
@@ -87,7 +86,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
setTypeError('');
setTagIndex(index);
handleChange('tags', (roomTag1 === '' && roomTag2 !== '') ? [ roomTag2 ] : [ roomTag1, roomTag2 ]);
};
}
useEffect(() =>
{
@@ -99,44 +98,44 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
return (
<>
<div className="flex items-center gap-1">
<Text small className="col-span-3">{ LocalizeText('navigator.roomname') }</Text>
<Flex alignItems="center" gap={ 1 }>
<Text className="col-3">{ LocalizeText('navigator.roomname') }</Text>
<Column fullWidth gap={ 0 }>
<NitroInput className="form-control-sm" maxLength={ ROOM_NAME_MAX_LENGTH } value={ roomName } onBlur={ saveRoomName } onChange={ event => setRoomName(event.target.value) } />
<input className="form-control form-control-sm" value={ roomName } maxLength={ ROOM_NAME_MAX_LENGTH } onChange={ event => setRoomName(event.target.value) } onBlur={ saveRoomName } />
{ (roomName.length < ROOM_NAME_MIN_LENGTH) &&
<Text bold small variant="danger">
{ LocalizeText('navigator.roomsettings.roomnameismandatory') }
</Text> }
</Column>
</div>
<div className="flex items-center gap-1">
<Text small className="col-span-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
<textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem] rounded-[.2rem] form-control-sm" maxLength={ DESC_MAX_LENGTH } value={ roomDescription } onBlur={ saveRoomDescription } onChange={ event => setRoomDescription(event.target.value) } />
</div>
<div className="flex items-center gap-1">
<Text small className="col-span-3">{ LocalizeText('navigator.category') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<Text className="col-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
<textarea className="form-control form-control-sm" value={ roomDescription } maxLength={ DESC_MAX_LENGTH } onChange={ event => setRoomDescription(event.target.value) } onBlur={ saveRoomDescription } />
</Flex>
<Flex alignItems="center" gap={ 1 }>
<Text className="col-3">{ LocalizeText('navigator.category') }</Text>
<select className="form-select form-select-sm" value={ roomData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
{ categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) }
</select>
</div>
<div className="flex items-center gap-1">
<Text small className="col-span-3">{ LocalizeText('navigator.maxvisitors') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<Text className="col-3">{ LocalizeText('navigator.maxvisitors') }</Text>
<select className="form-select form-select-sm" value={ roomData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
{ GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) }
</select>
</div>
<div className="flex items-center gap-0">
<Text small className="col-span-3">{ LocalizeText('navigator.tradesettings') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<Text className="col-3">{ LocalizeText('navigator.tradesettings') }</Text>
<select className="form-select form-select-sm" value={ roomData.tradeState } onChange={ event => handleChange('trade_state', event.target.value) }>
<option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
<option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
<option value="2">{ LocalizeText('navigator.roomsettings.trade_allowed') }</option>
</select>
</div>
<div className="flex items-center gap-1">
<Text small className="col-span-3">{ LocalizeText('navigator.tags') }</Text>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<Text className="col-3">{ LocalizeText('navigator.tags') }</Text>
<Column fullWidth gap={ 0 }>
<NitroInput className="form-control-sm" value={ roomTag1 } onBlur={ () => saveTags(0) } onChange={ event => setRoomTag1(event.target.value) } />
<input className="form-control form-control-sm" value={ roomTag1 } onChange={ event => setRoomTag1(event.target.value) } onBlur={ () => saveTags(0) } />
{ (roomTag1.length > TAGS_MAX_LENGTH) &&
<Text bold small variant="danger">
{ LocalizeText('navigator.roomsettings.toomanycharacters') }
@@ -147,23 +146,23 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
</Text> }
</Column>
<Column fullWidth gap={ 0 }>
<NitroInput className="form-control-sm" value={ roomTag2 } onBlur={ () => saveTags(1) } onChange={ event => setRoomTag2(event.target.value) } />
<input className="form-control form-control-sm" value={ roomTag2 } onChange={ event => setRoomTag2(event.target.value) } onBlur={ () => saveTags(1) } />
{ (roomTag2.length > TAGS_MAX_LENGTH) &&
<Text bold small variant="danger">
{ LocalizeText('navigator.roomsettings.toomanycharacters') }
</Text> }
{ (tagIndex === 1 && typeError != '') &&
<Text bold small variant="danger">
{ LocalizeText(typeError) }
</Text> }
<Text bold small variant="danger">
{ LocalizeText(typeError) }
</Text> }
</Column>
</div>
<div className="flex items-center gap-1">
<div className="col-span-1" />
<input checked={ roomData.allowWalkthrough } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
<Text small>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
</div>
<Text small bold pointer underline className="flex items-center justify-center gap-1" variant="danger" onClick={ deleteRoom }>
</Flex>
<Flex alignItems="center" gap={ 1 }>
<Base className="col-3" />
<input className="form-check-input" type="checkbox" checked={ roomData.allowWalkthrough } onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
<Text>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
</Flex>
<Text variant="danger" underline bold pointer className="d-flex justify-content-center align-items-center gap-1" onClick={ deleteRoom }>
<FaTimes className="fa-icon" />
{ LocalizeText('navigator.roomsettings.delete') }
</Text>
src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+23 -23
View File
@@ -27,12 +27,12 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
if(index >= 0) newValue.splice(index, 1);
return newValue;
});
})
SendMessageComposer(new RoomUnbanUserComposer(userId, roomData.roomId));
setSelectedUserId(-1);
};
}
useMessageEvent<BannedUsersFromRoomEvent>(BannedUsersFromRoomEvent, event =>
{
@@ -51,15 +51,15 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
return (
<Grid overflow="auto">
<Column size={ 6 }>
<Text small bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
<Flex className="bg-white rounded list-container p-2" overflow="hidden">
<Column fullWidth gap={ 1 } overflow="auto">
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
<Flex overflow="hidden" className="bg-white rounded list-container p-2">
<Column fullWidth overflow="auto" gap={ 1 }>
{ bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
{
return (
<Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
<UserProfileIconView userName={ user.userName } />
<Text small grow pointer onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
<UserProfileIconView userName={ user.userId } />
<Text pointer grow onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
</Flex>
);
}) }
@@ -70,9 +70,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
</Button>
</Column>
<Column size={ 6 }>
<div className="flex flex-col gap-1">
<Text small bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
<div className="flex items-center gap-1">
<Column gap={ 1 }>
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
<Flex alignItems="center" gap={ 1 }>
<select className="form-select form-select-sm" value={ roomData.moderationSettings.allowMute } onChange={ event => handleChange('moderation_mute', event.target.value) }>
<option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
{ LocalizeText('navigator.roomsettings.moderation.none') }
@@ -81,11 +81,11 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
{ LocalizeText('navigator.roomsettings.moderation.rights') }
</option>
</select>
</div>
</div>
<div className="flex flex-col gap-1">
<Text small bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
<div className="flex items-center gap-1">
</Flex>
</Column>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
<Flex alignItems="center" gap={ 1 }>
<select className="form-select form-select-sm" value={ roomData.moderationSettings.allowKick } onChange={ event => handleChange('moderation_kick', event.target.value) }>
<option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
{ LocalizeText('navigator.roomsettings.moderation.none') }
@@ -97,11 +97,11 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
{ LocalizeText('navigator.roomsettings.moderation.all') }
</option>
</select>
</div>
</div>
<div className="flex flex-col gap-1">
<Text small bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
<div className="flex items-center gap-1">
</Flex>
</Column>
<Column gap={ 1 }>
<Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
<Flex alignItems="center" gap={ 1 }>
<select className="form-select form-select-sm" value={ roomData.moderationSettings.allowBan } onChange={ event => handleChange('moderation_ban', event.target.value) }>
<option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
{ LocalizeText('navigator.roomsettings.moderation.none') }
@@ -110,9 +110,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
{ LocalizeText('navigator.roomsettings.moderation.rights') }
</option>
</select>
</div>
</div>
</Flex>
</Column>
</Column>
</Grid>
);
};
}
src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
+93 -16
View File
@@ -1,8 +1,8 @@
import { FlatControllerAddedEvent, FlatControllerRemovedEvent, FlatControllersEvent, RemoveAllRightsMessageComposer, RoomTakeRightsComposer, RoomUsersWithRightsComposer } from '@nitrots/nitro-renderer';
import { FlatControllerAddedEvent, FlatControllerRemovedEvent, FlatControllersEvent, RemoveAllRightsMessageComposer, RoomGiveRightsComposer, RoomTakeRightsComposer, RoomUsersWithRightsComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../common';
import { useMessageEvent } from '../../../../hooks';
import { useFriends, useMessageEvent } from '../../../../hooks';
interface NavigatorRoomSettingsTabViewProps
{
@@ -10,10 +10,38 @@ interface NavigatorRoomSettingsTabViewProps
handleChange: (field: string, value: string | number | boolean) => void;
}
const STAFF_CHAT_ID = -1;
const STAFF_CHAT_NAME = 'Staff Chat';
export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
{
const { roomData = null } = props;
const [ usersWithRights, setUsersWithRights ] = useState<Map<number, string>>(new Map());
const { onlineFriends = [], offlineFriends = [] } = useFriends();
const allFriendsRaw = [ ...onlineFriends, ...offlineFriends ];
const allFriends = allFriendsRaw.filter(friend =>
{
if(friend.id === STAFF_CHAT_ID) return false;
if(friend.name === STAFF_CHAT_NAME) return false;
if(friend.id <= 0) return false;
return true;
});
const filteredUsersWithRights = new Map(
Array.from(usersWithRights.entries()).filter(([ id, name ]) =>
{
if(id === STAFF_CHAT_ID) return false;
if(name === STAFF_CHAT_NAME) return false;
if(id <= 0) return false;
return true;
})
);
const friendsWithoutRights = allFriends.filter(friend => !filteredUsersWithRights.has(friend.id));
useMessageEvent<FlatControllersEvent>(FlatControllersEvent, event =>
{
@@ -58,34 +86,83 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
useEffect(() =>
{
if(!roomData) return;
SendMessageComposer(new RoomUsersWithRightsComposer(roomData.roomId));
}, [ roomData.roomId ]);
}, [ roomData?.roomId ]);
return (
<Grid>
<Column size={ 6 }>
<Text small bold>
{ LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ usersWithRights.size.toString(), usersWithRights.size.toString() ]) }
<Text bold>
{ LocalizeText(
'navigator.flatctrls.userswithrights',
[ 'displayed', 'total' ],
[
filteredUsersWithRights.size.toString(),
filteredUsersWithRights.size.toString()
]
) }
</Text>
<Flex className="bg-white rounded list-container p-2" overflow="hidden">
<Column fullWidth gap={ 1 } overflow="auto">
{ Array.from(usersWithRights.entries()).map(([ id, name ], index) =>
<Flex overflow="hidden" className="p-2 bg-white rounded list-container">
<Column fullWidth overflow="auto" gap={ 1 }>
{ Array.from(filteredUsersWithRights.entries()).map(([ id, name ], index) =>
{
return (
<Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
<UserProfileIconView userName={ name } />
<Text small grow pointer onClick={ event => SendMessageComposer(new RoomTakeRightsComposer(id)) }> { name }</Text>
<Flex key={ `${id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
<UserProfileIconView userId={ id } />
<Text
pointer
grow
onClick={ () => SendMessageComposer(new RoomTakeRightsComposer(id)) }>
{ name }
</Text>
</Flex>
);
}) }
</Column>
</Flex>
<Button
variant="danger"
disabled={ !filteredUsersWithRights.size }
onClick={ () => roomData && SendMessageComposer(new RemoveAllRightsMessageComposer(roomData.roomId)) }>
{ LocalizeText('navigator.flatctrls.clear') }
</Button>
</Column>
<Column size={ 6 }>
<Text bold>
{ LocalizeText(
'navigator.flatctrls.friends',
[ 'displayed', 'total' ],
[
friendsWithoutRights.length.toString(),
allFriends.length.toString()
]
) }
</Text>
<Flex overflow="hidden" className="p-2 bg-white rounded list-container">
<Column fullWidth overflow="auto" gap={ 1 }>
{ friendsWithoutRights.map((friend, index) =>
{
return (
<Flex key={ `${friend.id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
<UserProfileIconView userId={ friend.id } />
<Text
pointer
grow
onClick={ () => SendMessageComposer(new RoomGiveRightsComposer(friend.id)) }>
{ friend.name }
</Text>
</Flex>
);
}) }
</Column>
</Flex>
</Column>
<Column justifyContent="end" size={ 6 }>
<Button disabled={ !usersWithRights.size } variant="danger" onClick={ event => SendMessageComposer(new RemoveAllRightsMessageComposer(roomData.roomId)) } >
{ LocalizeText('navigator.flatctrls.clear') }
</Button>
</Column>
</Grid>
);
};
src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import { RoomBannedUsersComposer, RoomDataParser, RoomSettingsDataEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
import { FC, useState } from 'react';
import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
import { CreateLinkEvent, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../common';
import { useMessageEvent } from '../../../../hooks';
import { NavigatorRoomSettingsAccessTabView } from './NavigatorRoomSettingsAccessTabView';
@@ -182,7 +182,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
return (
<NitroCardView className="nitro-room-settings" uniqueKey="nitro-room-settings">
<NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings') } onCloseClick={ onClose } />
<NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings') } isInfoToHabboPages={ currentTab === TABS[3] } onClickInfoHabboPages={ () => { if(currentTab === TABS[3]) CreateLinkEvent('habbopages/chat/options'); } } onCloseClick={ onClose } />
<NitroCardTabsView>
{ TABS.map(tab =>
{
src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
+11 -10
View File
@@ -1,6 +1,6 @@
import { RoomChatSettings } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { IRoomData, LocalizeText } from '../../../../api';
import { GetClubMemberLevel, IRoomData, LocalizeText } from '../../../../api';
import { Column, Grid, Text } from '../../../../common';
import { NitroInput } from '../../../../layout';
@@ -14,6 +14,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
{
const { roomData = null, handleChange = null } = props;
const [ chatDistance, setChatDistance ] = useState<number>(0);
const isHC = GetClubMemberLevel() > 0;
useEffect(() =>
{
@@ -26,45 +27,45 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
<Text small bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text>
<Text small>{ LocalizeText('navigator.roomsettings.vip.info') }</Text>
</div>
<Grid overflow="auto">
<Grid className={ !isHC ? 'opacity-50 pointer-events-none' : '' } overflow="auto">
<Column gap={ 1 } size={ 6 }>
<Text small bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text>
<Text small>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
<select className="form-select form-select-sm" value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
<select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
<option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
<option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
</select>
<select className="form-select form-select-sm" value={ roomData.chatSettings.weight } onChange={ event => handleChange('chat_weight', event.target.value) }>
<select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.weight } onChange={ event => handleChange('chat_weight', event.target.value) }>
<option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
<option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
<option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
</select>
<select className="form-select form-select-sm" value={ roomData.chatSettings.speed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
<select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.speed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
<option value={ RoomChatSettings.CHAT_SCROLL_SPEED_FAST }>{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
<option value={ RoomChatSettings.CHAT_SCROLL_SPEED_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
<option value={ RoomChatSettings.CHAT_SCROLL_SPEED_SLOW }>{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
</select>
<select className="form-select form-select-sm" value={ roomData.chatSettings.protection } onChange={ event => handleChange('flood_protection', event.target.value) }>
<select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.protection } onChange={ event => handleChange('flood_protection', event.target.value) }>
<option value={ RoomChatSettings.FLOOD_FILTER_LOOSE }>{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
<option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
<option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
</select>
<Text small>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
<NitroInput className="form-control-sm" min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
<NitroInput className="form-control-sm" disabled={ !isHC } min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
</Column>
<Column gap={ 1 } size={ 6 }>
<Text small bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text>
<div className="flex items-center gap-1">
<input checked={ roomData.hideWalls } className="form-check-input" type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
<input checked={ roomData.hideWalls } className="form-check-input" disabled={ !isHC } type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
<Text small>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
</div>
<select className="form-select form-select-sm" value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
<select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
<option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
<option value="1">{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
<option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
<option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
</select>
<select className="form-select form-select-sm" value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
<select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
<option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
<option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
<option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>