2021-06-30 18:05:10 +02:00
|
|
|
/* eslint-disable no-template-curly-in-string */
|
2021-08-06 05:38:57 +02:00
|
|
|
import { HabboClubLevelEnum, RoomCreateComposer } from '@nitrots/nitro-renderer';
|
2022-01-12 03:51:48 +01:00
|
|
|
import { FC, useEffect, useState } from 'react';
|
2022-03-27 18:05:35 +02:00
|
|
|
import { GetClubMemberLevel, GetConfiguration, IRoomModel, LocalizeText, RoomModels, SendMessageComposer } from '../../../api';
|
2022-03-20 03:40:26 +01:00
|
|
|
import { Button, Column, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, Text } from '../../../common';
|
|
|
|
import { useNavigatorContext } from '../NavigatorContext';
|
2021-06-12 04:53:56 +02:00
|
|
|
|
2022-01-12 03:51:48 +01:00
|
|
|
export const NavigatorRoomCreatorView: FC<{}> = props =>
|
2021-06-12 04:53:56 +02:00
|
|
|
{
|
2022-01-12 03:51:48 +01:00
|
|
|
const [ maxVisitorsList, setMaxVisitorsList ] = useState<number[]>(null);
|
|
|
|
const [ name, setName ] = useState<string>(null);
|
|
|
|
const [ description, setDescription ] = useState<string>(null);
|
|
|
|
const [ category, setCategory ] = useState<number>(null);
|
|
|
|
const [ visitorsCount, setVisitorsCount ] = useState<number>(null);
|
|
|
|
const [ tradesSetting, setTradesSetting ] = useState<number>(0);
|
|
|
|
const [ selectedModelName, setSelectedModelName ] = useState<string>(RoomModels[0].name);
|
2022-03-19 05:26:57 +01:00
|
|
|
const { categories = null } = useNavigatorContext();
|
2021-06-30 04:15:32 +02:00
|
|
|
|
2022-01-12 03:51:48 +01:00
|
|
|
const getRoomModelImage = (name: string) => GetConfiguration<string>('images.url') + `/navigator/models/model_${ name }.png`;
|
|
|
|
|
2022-03-17 02:33:44 +01:00
|
|
|
const selectModel = (model: IRoomModel, index: number) =>
|
2022-01-12 03:51:48 +01:00
|
|
|
{
|
2022-03-17 02:33:44 +01:00
|
|
|
if(!model || (model.clubLevel > GetClubMemberLevel())) return;
|
2022-01-12 03:51:48 +01:00
|
|
|
|
2022-03-16 05:42:20 +01:00
|
|
|
setSelectedModelName(RoomModels[index].name);
|
2022-01-12 03:51:48 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const createRoom = () =>
|
|
|
|
{
|
2022-03-03 10:11:31 +01:00
|
|
|
SendMessageComposer(new RoomCreateComposer(name, description, 'model_' + selectedModelName, Number(category), Number(visitorsCount), tradesSetting));
|
2022-01-12 03:51:48 +01:00
|
|
|
}
|
2021-06-30 04:15:32 +02:00
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
|
|
|
if(!maxVisitorsList)
|
|
|
|
{
|
|
|
|
const list = [];
|
|
|
|
|
2022-01-12 03:51:48 +01:00
|
|
|
for(let i = 10; i <= 100; i = i + 10) list.push(i);
|
2021-06-30 04:15:32 +02:00
|
|
|
|
2022-04-01 23:08:50 +02:00
|
|
|
setMaxVisitorsList(list);
|
|
|
|
setVisitorsCount(list[0]);
|
2021-06-30 04:15:32 +02:00
|
|
|
}
|
2021-06-30 18:05:10 +02:00
|
|
|
}, [ maxVisitorsList ]);
|
2021-06-30 04:15:32 +02:00
|
|
|
|
|
|
|
useEffect(() =>
|
|
|
|
{
|
2022-03-17 02:33:44 +01:00
|
|
|
if(categories && categories.length) setCategory(categories[0].id);
|
2021-06-30 04:15:32 +02:00
|
|
|
}, [ categories ]);
|
|
|
|
|
|
|
|
return (
|
2022-01-12 03:51:48 +01:00
|
|
|
<Column overflow="hidden">
|
2022-02-23 07:57:36 +01:00
|
|
|
<Grid overflow="hidden">
|
|
|
|
<Column size={ 6 } gap={ 1 } overflow="auto">
|
2022-02-23 03:14:32 +01:00
|
|
|
<Column gap={ 1 }>
|
|
|
|
<Text>{ LocalizeText('navigator.createroom.roomnameinfo') }</Text>
|
2022-03-17 11:07:27 +01:00
|
|
|
<input type="text" className="form-control form-control-sm" maxLength={ 60 } onChange={ event => setName(event.target.value) } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } />
|
2022-03-17 02:33:44 +01:00
|
|
|
</Column>
|
|
|
|
<Column grow gap={ 1 }>
|
|
|
|
<Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
|
2022-03-19 05:26:57 +01:00
|
|
|
<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') } />
|
2022-02-23 03:14:32 +01:00
|
|
|
</Column>
|
|
|
|
<Column gap={ 1 }>
|
|
|
|
<Text>{ LocalizeText('navigator.category') }</Text>
|
|
|
|
<select className="form-select form-select-sm" onChange={ event => setCategory(Number(event.target.value)) }>
|
2022-03-17 02:33:44 +01:00
|
|
|
{ categories && (categories.length > 0) && categories.map(category =>
|
2022-04-01 19:33:08 +02:00
|
|
|
{
|
|
|
|
return <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>
|
|
|
|
}) }
|
2022-02-23 03:14:32 +01:00
|
|
|
</select>
|
|
|
|
</Column>
|
|
|
|
<Column gap={ 1 }>
|
|
|
|
<Text>{ LocalizeText('navigator.maxvisitors') }</Text>
|
|
|
|
<select className="form-select form-select-sm" onChange={ event => setVisitorsCount(Number(event.target.value)) }>
|
|
|
|
{ maxVisitorsList && maxVisitorsList.map(value =>
|
2022-04-01 19:33:08 +02:00
|
|
|
{
|
|
|
|
return <option key={ value } value={ value }>{ value }</option>
|
|
|
|
}) }
|
2022-02-23 03:14:32 +01:00
|
|
|
</select>
|
|
|
|
</Column>
|
|
|
|
<Column gap={ 1 }>
|
|
|
|
<Text>{ LocalizeText('navigator.tradesettings') }</Text>
|
|
|
|
<select className="form-select form-select-sm" onChange={ event => setTradesSetting(Number(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>
|
|
|
|
</Column>
|
2022-01-12 03:51:48 +01:00
|
|
|
</Column>
|
2022-02-23 03:14:32 +01:00
|
|
|
<Column size={ 6 } gap={ 1 } overflow="auto">
|
|
|
|
{
|
2022-03-16 05:42:20 +01:00
|
|
|
RoomModels.map((model, index )=>
|
2022-04-01 19:33:08 +02:00
|
|
|
{
|
|
|
|
return (<LayoutGridItem fullHeight key={ model.name } onClick={ () => selectModel(model, index) } itemActive={ (selectedModelName === model.name) } overflow="unset" gap={ 0 } className="p-1" disabled={ (GetClubMemberLevel() < model.clubLevel) }>
|
|
|
|
<Flex fullHeight center overflow="hidden">
|
|
|
|
<img alt="" src={ getRoomModelImage(model.name) } />
|
|
|
|
</Flex>
|
|
|
|
<Text bold>{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</Text>
|
|
|
|
{ model.clubLevel > HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon position="absolute" className="top-1 end-1" type="hc" /> }
|
|
|
|
</LayoutGridItem>);
|
|
|
|
})
|
2022-02-23 03:14:32 +01:00
|
|
|
}
|
2022-01-12 03:51:48 +01:00
|
|
|
</Column>
|
|
|
|
</Grid>
|
2022-03-17 11:07:27 +01:00
|
|
|
<Button fullWidth variant={ (!name || (name.length < 3)) ? 'danger' : 'success' } onClick={ createRoom } disabled={ (!name || (name.length < 3)) }>{ LocalizeText('navigator.createroom.create') }</Button>
|
2022-01-12 03:51:48 +01:00
|
|
|
</Column>
|
2021-06-30 04:15:32 +02:00
|
|
|
);
|
2021-06-12 04:53:56 +02:00
|
|
|
}
|