+ Optional message type, overrides default
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/mod-tools/views/user/ModToolsUserView.tsx b/Coolui v3 test/src/components/mod-tools/views/user/ModToolsUserView.tsx
new file mode 100644
index 0000000000..6f65700c58
--- /dev/null
+++ b/Coolui v3 test/src/components/mod-tools/views/user/ModToolsUserView.tsx
@@ -0,0 +1,156 @@
+import { CreateLinkEvent, GetModeratorUserInfoMessageComposer, ModeratorUserInfoData, ModeratorUserInfoEvent } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useMemo, useState } from 'react';
+import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../../../api';
+import { Button, Column, DraggableWindowPosition, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { useMessageEvent } from '../../../../hooks';
+import { ModToolsUserModActionView } from './ModToolsUserModActionView';
+import { ModToolsUserRoomVisitsView } from './ModToolsUserRoomVisitsView';
+import { ModToolsUserSendMessageView } from './ModToolsUserSendMessageView';
+
+interface ModToolsUserViewProps
+{
+ userId: number;
+ onCloseClick: () => void;
+}
+
+export const ModToolsUserView: FC = props =>
+{
+ const { onCloseClick = null, userId = null } = props;
+ const [ userInfo, setUserInfo ] = useState(null);
+ const [ sendMessageVisible, setSendMessageVisible ] = useState(false);
+ const [ modActionVisible, setModActionVisible ] = useState(false);
+ const [ roomVisitsVisible, setRoomVisitsVisible ] = useState(false);
+
+ const userProperties = useMemo(() =>
+ {
+ if(!userInfo) return null;
+
+ return [
+ {
+ localeKey: 'modtools.userinfo.userName',
+ value: userInfo.userName,
+ showOnline: true
+ },
+ {
+ localeKey: 'modtools.userinfo.cfhCount',
+ value: userInfo.cfhCount.toString()
+ },
+ {
+ localeKey: 'modtools.userinfo.abusiveCfhCount',
+ value: userInfo.abusiveCfhCount.toString()
+ },
+ {
+ localeKey: 'modtools.userinfo.cautionCount',
+ value: userInfo.cautionCount.toString()
+ },
+ {
+ localeKey: 'modtools.userinfo.banCount',
+ value: userInfo.banCount.toString()
+ },
+ {
+ localeKey: 'modtools.userinfo.lastSanctionTime',
+ value: userInfo.lastSanctionTime
+ },
+ {
+ localeKey: 'modtools.userinfo.tradingLockCount',
+ value: userInfo.tradingLockCount.toString()
+ },
+ {
+ localeKey: 'modtools.userinfo.tradingExpiryDate',
+ value: userInfo.tradingExpiryDate
+ },
+ {
+ localeKey: 'modtools.userinfo.minutesSinceLastLogin',
+ value: FriendlyTime.format(userInfo.minutesSinceLastLogin * 60, '.ago', 2)
+ },
+ {
+ localeKey: 'modtools.userinfo.lastPurchaseDate',
+ value: userInfo.lastPurchaseDate
+ },
+ {
+ localeKey: 'modtools.userinfo.primaryEmailAddress',
+ value: userInfo.primaryEmailAddress
+ },
+ {
+ localeKey: 'modtools.userinfo.identityRelatedBanCount',
+ value: userInfo.identityRelatedBanCount.toString()
+ },
+ {
+ localeKey: 'modtools.userinfo.registrationAgeInMinutes',
+ value: FriendlyTime.format(userInfo.registrationAgeInMinutes * 60, '.ago', 2)
+ },
+ {
+ localeKey: 'modtools.userinfo.userClassification',
+ value: userInfo.userClassification
+ }
+ ];
+ }, [ userInfo ]);
+
+ useMessageEvent(ModeratorUserInfoEvent, event =>
+ {
+ const parser = event.getParser();
+
+ if(!parser || parser.data.userId !== userId) return;
+
+ setUserInfo(parser.data);
+ });
+
+ useEffect(() =>
+ {
+ SendMessageComposer(new GetModeratorUserInfoMessageComposer(userId));
+ }, [ userId ]);
+
+ if(!userInfo) return null;
+
+ return (
+ <>
+
+ onCloseClick() } />
+
+
+
+
+
+ { userProperties.map( (property, index) =>
+ {
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ { sendMessageVisible &&
+ setSendMessageVisible(false) } /> }
+ { modActionVisible &&
+ setModActionVisible(false) } /> }
+ { roomVisitsVisible &&
+ setRoomVisitsVisible(false) } /> }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/navigator/NavigatorView.tsx b/Coolui v3 test/src/components/navigator/NavigatorView.tsx
new file mode 100644
index 0000000000..813c390e5e
--- /dev/null
+++ b/Coolui v3 test/src/components/navigator/NavigatorView.tsx
@@ -0,0 +1,240 @@
+import { NitroCard } from '@layout/NitroCard';
+import { AddLinkEventTracker, ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { FaPlus } from 'react-icons/fa';
+import { LocalizeText, SendMessageComposer, TryVisitRoom } from '../../api';
+import { useNavigator, useNitroEvent } from '../../hooks';
+import { NavigatorDoorStateView } from './views/NavigatorDoorStateView';
+import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView';
+import { NavigatorRoomInfoView } from './views/NavigatorRoomInfoView';
+import { NavigatorRoomLinkView } from './views/NavigatorRoomLinkView';
+import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView';
+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 { searchResult = null, topLevelContext = null, topLevelContexts = null, navigatorData = null } = useNavigator();
+ const pendingSearch = useRef<{ value: string, code: string }>(null);
+ const elementRef = useRef();
+
+ useNitroEvent(RoomSessionEvent.CREATED, event =>
+ {
+ setIsVisible(false);
+ setCreatorOpen(false);
+ });
+
+ const sendSearch = useCallback((searchValue: string, contextCode: string) =>
+ {
+ setCreatorOpen(false);
+
+ SendMessageComposer(new NavigatorSearchComposer(contextCode, searchValue));
+
+ setIsLoading(true);
+ }, []);
+
+ const reloadCurrentSearch = useCallback(() =>
+ {
+ if(!isReady)
+ {
+ setNeedsSearch(true);
+
+ 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 ]);
+
+ useEffect(() =>
+ {
+ const linkTracker: ILinkEventTracker = {
+ linkReceived: (url: string) =>
+ {
+ const parts = url.split('/');
+
+ if(parts.length < 2) return;
+
+ switch(parts[1])
+ {
+ case 'show': {
+ setIsVisible(true);
+ setNeedsSearch(true);
+ return;
+ }
+ case 'hide':
+ setIsVisible(false);
+ return;
+ case 'toggle': {
+ if(isVisible)
+ {
+ setIsVisible(false);
+
+ return;
+ }
+
+ 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':
+ if(navigatorData.homeRoomId <= 0) return;
+
+ TryVisitRoom(navigatorData.homeRoomId);
+ break;
+ default: {
+ const roomId = parseInt(parts[2]);
+
+ TryVisitRoom(roomId);
+ }
+ }
+ return;
+ case 'create':
+ setIsVisible(true);
+ setCreatorOpen(true);
+ return;
+ case 'search':
+ if(parts.length > 2)
+ {
+ const topLevelContextCode = parts[2];
+
+ let searchValue = '';
+
+ if(parts.length > 3) searchValue = parts[3];
+
+ pendingSearch.current = { value: searchValue, code: topLevelContextCode };
+
+ setIsVisible(true);
+ setNeedsSearch(true);
+ }
+ return;
+ }
+ },
+ eventUrlPrefix: 'navigator/'
+ };
+
+ AddLinkEventTracker(linkTracker);
+
+ return () => RemoveLinkEventTracker(linkTracker);
+ }, [ isVisible, navigatorData ]);
+
+ useEffect(() =>
+ {
+ if(!searchResult) return;
+
+ setIsLoading(false);
+
+ if(elementRef && elementRef.current) elementRef.current.scrollTop = 0;
+ }, [ searchResult ]);
+
+ useEffect(() =>
+ {
+ if(!isVisible || !isReady || !needsSearch) return;
+
+ reloadCurrentSearch();
+
+ setNeedsSearch(false);
+ }, [ isVisible, isReady, needsSearch, reloadCurrentSearch ]);
+
+ useEffect(() =>
+ {
+ if(isReady || !topLevelContext) return;
+
+ setIsReady(true);
+ }, [ isReady, topLevelContext ]);
+
+ useEffect(() =>
+ {
+ if(!isVisible || !needsInit) return;
+
+ SendMessageComposer(new NavigatorInitComposer());
+
+ setNeedsInit(false);
+ }, [ isVisible, needsInit ]);
+
+ useEffect(() =>
+ {
+ LegacyExternalInterface.addCallback(HabboWebTools.OPENROOM, (k: string, _arg_2: boolean = false, _arg_3: string = null) => SendMessageComposer(new ConvertGlobalRoomIdMessageComposer(k)));
+ }, []);
+
+ return (
+ <>
+ { isVisible &&
+
+ setIsVisible(false) } />
+
+ { topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) =>
+ {
+ return (
+ sendSearch('', context.code) }>
+ { LocalizeText(('navigator.toplevelview.' + context.code)) }
+
+ );
+ }) }
+ setCreatorOpen(true) }>
+
+
+
+ { !isCreatorOpen &&
+ <>
+
+ }
+ setRoomInfoOpen(false) } /> }
+ { isRoomLinkOpen && setRoomLinkOpen(false) } /> }
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/navigator/views/NavigatorRoomCreatorView.tsx b/Coolui v3 test/src/components/navigator/views/NavigatorRoomCreatorView.tsx
new file mode 100644
index 0000000000..8469af36f6
--- /dev/null
+++ b/Coolui v3 test/src/components/navigator/views/NavigatorRoomCreatorView.tsx
@@ -0,0 +1,123 @@
+
+import { CreateFlatMessageComposer, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { GetClubMemberLevel, GetConfigurationValue, IRoomModel, LocalizeText, SendMessageComposer } from '../../../api';
+import { Button, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, Text } from '../../../common';
+import { useNavigator } from '../../../hooks';
+import { NitroInput } from '../../../layout';
+
+export const NavigatorRoomCreatorView: FC<{}> = props =>
+{
+ const [ maxVisitorsList, setMaxVisitorsList ] = useState(null);
+ const [ name, setName ] = useState(null);
+ const [ description, setDescription ] = useState(null);
+ const [ category, setCategory ] = useState(null);
+ const [ visitorsCount, setVisitorsCount ] = useState(null);
+ const [ tradesSetting, setTradesSetting ] = useState(0);
+ const [ roomModels, setRoomModels ] = useState([]);
+ const [ selectedModelName, setSelectedModelName ] = useState('');
+ const { categories = null } = useNavigator();
+
+ const hcDisabled = GetConfigurationValue('hc.disabled', false);
+
+ const getRoomModelImage = (name: string) => GetConfigurationValue('images.url') + `/navigator/models/model_${ name }.png`;
+
+ const selectModel = (model: IRoomModel, index: number) =>
+ {
+ if(!model || (model.clubLevel > GetClubMemberLevel())) return;
+
+ setSelectedModelName(roomModels[index].name);
+ };
+
+ const createRoom = () =>
+ {
+ SendMessageComposer(new CreateFlatMessageComposer(name, description, 'model_' + selectedModelName, Number(category), Number(visitorsCount), tradesSetting));
+ };
+
+ useEffect(() =>
+ {
+ if(!maxVisitorsList)
+ {
+ const list = [];
+
+ for(let i = 10; i <= 100; i = i + 10) list.push(i);
+
+ setMaxVisitorsList(list);
+ setVisitorsCount(list[0]);
+ }
+ }, [ maxVisitorsList ]);
+
+ useEffect(() =>
+ {
+ if(categories && categories.length) setCategory(categories[0].id);
+ }, [ categories ]);
+
+ useEffect(() =>
+ {
+ const models = GetConfigurationValue('navigator.room.models');
+
+ if(models && models.length)
+ {
+ setRoomModels(models);
+ setSelectedModelName(models[0].name);
+ }
+ }, []);
+
+ return (
+
| { LocalizeText(property.localeKey) } | ++ { property.value } + { property.showOnline && + } + | +
|---|
+ { (searchResult && searchResult.results.map((result, index) =>
+ }
+ { isCreatorOpen &&
+ { doorData && doorData.roomInfo && doorData.roomInfo.roomName }
+ { (doorData.state === DoorStateType.START_DOORBELL) &&
+ { LocalizeText('navigator.doorbell.info') } }
+ { (doorData.state === DoorStateType.STATE_WAITING) &&
+ { LocalizeText('navigator.doorbell.waiting') } }
+ { (doorData.state === DoorStateType.STATE_NO_ANSWER) &&
+ { LocalizeText('navigator.doorbell.no.answer') } }
+ { (doorData.state === DoorStateType.START_PASSWORD) &&
+ { LocalizeText('navigator.password.info') } }
+ { (doorData.state === DoorStateType.STATE_WRONG_PASSWORD) &&
+ { LocalizeText('navigator.password.retryinfo') } }
+
+ { isDoorbell &&
+
+ { (doorData.state === DoorStateType.START_DOORBELL) &&
+ }
+
+
}
+ { !isDoorbell &&
+ <>
+
+ { LocalizeText('navigator.password.enter') }
+ setPassword(event.target.value) } />
+
+
+
+
+
+ }
+
+
+
+
+ { LocalizeText('widget.custom.stack.height.text') }
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/FurnitureStickieView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/FurnitureStickieView.tsx
new file mode 100644
index 0000000000..fec4845484
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/FurnitureStickieView.tsx
@@ -0,0 +1,66 @@
+import { FC, useEffect, useState } from 'react';
+import { ColorUtils } from '../../../../api';
+import { DraggableWindow, DraggableWindowPosition } from '../../../../common';
+import { useFurnitureStickieWidget } from '../../../../hooks';
+
+const STICKIE_COLORS = [ '9CCEFF', 'FF9CFF', '9CFF9C', 'FFFF33' ];
+const STICKIE_COLOR_NAMES = [ 'blue', 'pink', 'green', 'yellow' ];
+const STICKIE_TYPES = [ 'post_it', 'post_it_shakesp', 'post_it_dreams', 'post_it_xmas', 'post_it_vd', 'post_it_juninas' ];
+const STICKIE_TYPE_NAMES = [ 'post_it', 'shakesp', 'dreams', 'christmas', 'heart', 'juninas' ];
+
+const getStickieColorName = (color: string) =>
+{
+ let index = STICKIE_COLORS.indexOf(color);
+
+ if(index === -1) index = 0;
+
+ return STICKIE_COLOR_NAMES[index];
+};
+
+const getStickieTypeName = (type: string) =>
+{
+ let index = STICKIE_TYPES.indexOf(type);
+
+ if(index === -1) index = 0;
+
+ return STICKIE_TYPE_NAMES[index];
+};
+
+export const FurnitureStickieView: FC<{}> = props =>
+{
+ const { objectId = -1, color = '0', text = '', type = '', canModify = false, updateColor = null, updateText = null, trash = null, onClose = null } = useFurnitureStickieWidget();
+ const [ isEditing, setIsEditing ] = useState(false);
+
+ useEffect(() =>
+ {
+ setIsEditing(false);
+ }, [ objectId, color, text, type ]);
+
+ if(objectId === -1) return null;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
new file mode 100644
index 0000000000..741a35eee8
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/FurnitureStackHeightView.tsx
@@ -0,0 +1,58 @@
+import { FurnitureStackHeightComposer } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { LocalizeText, SendMessageComposer } from '../../../../api';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { useFurnitureStackHeightWidget } from '../../../../hooks';
+
+export const FurnitureStackHeightView: FC<{}> = props =>
+{
+ const { objectId = -1, height = 0, maxHeight = 40, onClose = null, updateHeight = null } = useFurnitureStackHeightWidget();
+ const [ tempHeight, setTempHeight ] = useState('');
+
+ const updateTempHeight = (value: string) =>
+ {
+ setTempHeight(value);
+
+ const newValue = parseFloat(value);
+
+ if(isNaN(newValue) || (newValue === height)) return;
+
+ updateHeight(newValue);
+ };
+
+ useEffect(() =>
+ {
+ setTempHeight(height.toString());
+ }, [ height ]);
+
+ if(objectId === -1) return null;
+
+ return (
+
+ { LocalizeText('navigator.createroom.roomnameinfo') }
+ setName(event.target.value) } />
+
+
+ { LocalizeText('navigator.createroom.roomdescinfo') }
+
+
+
+
+ { state.valueNow }
}
+ step={ 0.01 }
+ value={ height }
+ onChange={ event => updateHeight(event) } />
+ updateTempHeight(event.target.value) } />
+
+
+
+
+
+ (null);
+ const { objectId = -1, videoId = null, videoStart = 0, videoEnd = 0, currentVideoState = null, selectedVideo = null, playlists = [], onClose = null, previous = null, next = null, pause = null, play = null, selectVideo = null } = useFurnitureYoutubeWidget();
+
+ const onStateChange = (event: { target: YouTubePlayer; data: number }) =>
+ {
+ setPlayer(event.target);
+
+ if(objectId === -1) return;
+
+ switch(event.target.getPlayerState())
+ {
+ case -1:
+ case 1:
+ if(currentVideoState === 2)
+ {
+ //event.target.pauseVideo();
+ }
+
+ if(currentVideoState !== 1) play();
+ return;
+ case 2:
+ if(currentVideoState !== 2) pause();
+ }
+ };
+
+ useEffect(() =>
+ {
+ if((currentVideoState === null) || !player) return;
+
+ if((currentVideoState === YoutubeVideoPlaybackStateEnum.PLAYING) && (player.getPlayerState() !== YoutubeVideoPlaybackStateEnum.PLAYING))
+ {
+ player.playVideo();
+
+ return;
+ }
+
+ if((currentVideoState === YoutubeVideoPlaybackStateEnum.PAUSED) && (player.getPlayerState() !== YoutubeVideoPlaybackStateEnum.PAUSED))
+ {
+ player.pauseVideo();
+
+ return;
+ }
+ }, [ currentVideoState, player ]);
+
+ if(objectId === -1) return null;
+
+ const youtubeOptions: Options = {
+ height: '375',
+ width: '500',
+ playerVars: {
+ autoplay: 1,
+ disablekb: 1,
+ controls: 0,
+ origin: window.origin,
+ modestbranding: 1,
+ start: videoStart,
+ end: videoEnd
+ }
+ };
+
+ return (
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
new file mode 100644
index 0000000000..a818152b3f
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { useRoom } from '../../../../../hooks';
+
+interface EffectBoxConfirmViewProps
+{
+ objectId: number;
+ onClose: () => void;
+}
+
+export const EffectBoxConfirmView: FC = props =>
+{
+ const { objectId = -1, onClose = null } = props;
+ const { roomSession = null } = useRoom();
+
+ const useProduct = () =>
+ {
+ roomSession.useMultistateItem(objectId);
+
+ onClose();
+ };
+
+ return (
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
new file mode 100644
index 0000000000..7976d99ce9
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
@@ -0,0 +1,130 @@
+import { ContextMenuEnum, CustomUserNotificationMessageEvent, GetSessionDataManager, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { GetGroupInformation, LocalizeText } from '../../../../../api';
+import { EFFECTBOX_OPEN, GROUP_FURNITURE, MONSTERPLANT_SEED_CONFIRMATION, MYSTERYTROPHY_OPEN_DIALOG, PURCHASABLE_CLOTHING_CONFIRMATION, useFurnitureContextMenuWidget, useMessageEvent, useNotification } from '../../../../../hooks';
+import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
+import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
+import { ContextMenuView } from '../../context-menu/ContextMenuView';
+import { FurnitureMysteryBoxOpenDialogView } from '../FurnitureMysteryBoxOpenDialogView';
+import { FurnitureMysteryTrophyOpenDialogView } from '../FurnitureMysteryTrophyOpenDialogView';
+import { EffectBoxConfirmView } from './EffectBoxConfirmView';
+import { MonsterPlantSeedConfirmView } from './MonsterPlantSeedConfirmView';
+import { PurchasableClothingConfirmView } from './PurchasableClothingConfirmView';
+
+export const FurnitureContextMenuView: FC<{}> = props =>
+{
+ const { closeConfirm = null, processAction = null, onClose = null, objectId = -1, mode = null, confirmMode = null, confirmingObjectId = -1, groupData = null, isGroupMember = false, objectOwnerId = -1 } = useFurnitureContextMenuWidget();
+ const { simpleAlert = null } = useNotification();
+
+ useMessageEvent(CustomUserNotificationMessageEvent, event =>
+ {
+ const parser = event.getParser();
+
+ if(!parser) return;
+
+ // HOPPER_NO_COSTUME = 1; HOPPER_NO_HC = 2; GATE_NO_HC = 3; STARS_NOT_CANDIDATE = 4 (not coded in Emulator); STARS_NOT_ENOUGH_USERS = 5 (not coded in Emulator);
+
+ switch(parser.count)
+ {
+ case 1:
+ simpleAlert(LocalizeText('costumehopper.costumerequired.bodytext'), null, 'catalog/open/temporary_effects' , LocalizeText('costumehopper.costumerequired.buy'), LocalizeText('costumehopper.costumerequired.header'), null);
+ break;
+ case 2:
+ simpleAlert(LocalizeText('viphopper.viprequired.bodytext'), null, 'catalog/open/habbo_club' , LocalizeText('viprequired.buy.vip'), LocalizeText('viprequired.header'), null);
+ break;
+ case 3:
+ simpleAlert(LocalizeText('gate.viprequired.bodytext'), null, 'catalog/open/habbo_club' , LocalizeText('viprequired.buy.vip'), LocalizeText('gate.viprequired.title'), null);
+ break;
+ }
+ });
+
+ const isOwner = GetSessionDataManager().userId === objectOwnerId;
+
+ return (
+ <>
+ { (confirmMode === MONSTERPLANT_SEED_CONFIRMATION) &&
+
+ { (mode === ContextMenuEnum.FRIEND_FURNITURE) &&
+ <>
+
+ { LocalizeText('friendfurni.context.title') }
+
+ processAction('use_friend_furni') }>
+ { LocalizeText('friendfurni.context.use') }
+
+ }
+ { (mode === ContextMenuEnum.MONSTERPLANT_SEED) &&
+ <>
+
+ { LocalizeText('furni.mnstr_seed.name') }
+
+ processAction('use_monsterplant_seed') }>
+ { LocalizeText('widget.monsterplant_seed.button.use') }
+
+ }
+ { (mode === ContextMenuEnum.RANDOM_TELEPORT) &&
+ <>
+
+ { LocalizeText('furni.random_teleport.name') }
+
+ processAction('use_random_teleport') }>
+ { LocalizeText('widget.random_teleport.button.use') }
+
+ }
+ { (mode === ContextMenuEnum.PURCHASABLE_CLOTHING) &&
+ <>
+
+ { LocalizeText('furni.generic_usable.name') }
+
+ processAction('use_purchaseable_clothing') }>
+ { LocalizeText('widget.generic_usable.button.use') }
+
+ }
+ { (mode === ContextMenuEnum.MYSTERY_BOX) &&
+ <>
+
+ { LocalizeText('mysterybox.context.title') }
+
+ processAction('use_mystery_box') }>
+ { LocalizeText('mysterybox.context.' + ((isOwner) ? 'owner' : 'other') + '.use') }
+
+ }
+ { (mode === ContextMenuEnum.MYSTERY_TROPHY) &&
+ <>
+
+ { LocalizeText('mysterytrophy.header.title') }
+
+ processAction('use_mystery_trophy') }>
+ { LocalizeText('friendfurni.context.use') }
+
+ }
+ { (mode === GROUP_FURNITURE) && groupData &&
+ <>
+ GetGroupInformation(groupData.guildId) }>
+ { groupData.guildName }
+
+ { !isGroupMember &&
+ processAction('join_group') }>
+ { LocalizeText('widget.furniture.button.join.group') }
+ }
+ processAction('go_to_group_homeroom') }>
+ { LocalizeText('widget.furniture.button.go.to.group.home.room') }
+
+ { groupData.guildHasReadableForum &&
+ processAction('open_forum') }>
+ { LocalizeText('widget.furniture.button.open_group_forum') }
+ }
+ }
+ }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
new file mode 100644
index 0000000000..4a5ed984ee
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
@@ -0,0 +1,85 @@
+import { IFurnitureData, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { FurniCategory, GetFurnitureDataForRoomObject, LocalizeText } from '../../../../../api';
+import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { useRoom } from '../../../../../hooks';
+
+interface MonsterPlantSeedConfirmViewProps
+{
+ objectId: number;
+ onClose: () => void;
+}
+
+const MODE_DEFAULT: number = -1;
+const MODE_MONSTERPLANT_SEED: number = 0;
+
+export const MonsterPlantSeedConfirmView: FC = props =>
+{
+ const { objectId = -1, onClose = null } = props;
+ const [ furniData, setFurniData ] = useState(null);
+ const [ mode, setMode ] = useState(MODE_DEFAULT);
+ const { roomSession = null } = useRoom();
+
+ const useProduct = () =>
+ {
+ roomSession.useMultistateItem(objectId);
+
+ onClose();
+ };
+
+ useEffect(() =>
+ {
+ if(!roomSession || (objectId === -1)) return;
+
+ const furniData = GetFurnitureDataForRoomObject(roomSession.roomId, objectId, RoomObjectCategory.FLOOR);
+
+ if(!furniData) return;
+
+ setFurniData(furniData);
+
+ let mode = MODE_DEFAULT;
+
+ switch(furniData.specialType)
+ {
+ case FurniCategory.MONSTERPLANT_SEED:
+ mode = MODE_MONSTERPLANT_SEED;
+ break;
+ }
+
+ if(mode === MODE_DEFAULT)
+ {
+ onClose();
+
+ return;
+ }
+
+ setMode(mode);
+ }, [ roomSession, objectId, onClose ]);
+
+ if(mode === MODE_DEFAULT) return null;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
new file mode 100644
index 0000000000..85a6f8062e
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
@@ -0,0 +1,104 @@
+import { AvatarFigurePartType, GetAvatarRenderManager, GetSessionDataManager, RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { FurniCategory, GetFurnitureDataForRoomObject, LocalizeText, SendMessageComposer } from '../../../../../api';
+import { Button, Column, LayoutAvatarImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { useRoom } from '../../../../../hooks';
+
+interface PurchasableClothingConfirmViewProps
+{
+ objectId: number;
+ onClose: () => void;
+}
+
+const MODE_DEFAULT: number = -1;
+const MODE_PURCHASABLE_CLOTHING: number = 0;
+
+export const PurchasableClothingConfirmView: FC = props =>
+{
+ const { objectId = -1, onClose = null } = props;
+ const [ mode, setMode ] = useState(MODE_DEFAULT);
+ const [ gender, setGender ] = useState(AvatarFigurePartType.MALE);
+ const [ newFigure, setNewFigure ] = useState(null);
+ const { roomSession = null } = useRoom();
+
+ const useProduct = () =>
+ {
+ SendMessageComposer(new RedeemItemClothingComposer(objectId));
+ SendMessageComposer(new UserFigureComposer(gender, newFigure));
+
+ onClose();
+ };
+
+ useEffect(() =>
+ {
+ let mode = MODE_DEFAULT;
+
+ const figure = GetSessionDataManager().figure;
+ const gender = GetSessionDataManager().gender;
+ const validSets: number[] = [];
+
+ if(roomSession && (objectId >= 0))
+ {
+ const furniData = GetFurnitureDataForRoomObject(roomSession.roomId, objectId, RoomObjectCategory.FLOOR);
+
+ if(furniData)
+ {
+ switch(furniData.specialType)
+ {
+ case FurniCategory.FIGURE_PURCHASABLE_SET:
+ mode = MODE_PURCHASABLE_CLOTHING;
+
+ const setIds = furniData.customParams.split(',').map(part => parseInt(part));
+
+ for(const setId of setIds)
+ {
+ if(GetAvatarRenderManager().isValidFigureSetForGender(setId, gender)) validSets.push(setId);
+ }
+
+ break;
+ }
+ }
+ }
+
+ if(mode === MODE_DEFAULT)
+ {
+ onClose();
+
+ return;
+ }
+
+ setGender(gender);
+ setNewFigure(GetAvatarRenderManager().getFigureStringWithFigureIds(figure, gender, validSets));
+
+ // if owns clothing, change to it
+
+ setMode(mode);
+ }, [ roomSession, objectId, onClose ]);
+
+ if(mode === MODE_DEFAULT) return null;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
new file mode 100644
index 0000000000..7550af9bf4
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/DiskInventoryView.tsx
@@ -0,0 +1,94 @@
+import { CreateLinkEvent, GetSoundManager, IAdvancedMap, MusicPriorities } from '@nitrots/nitro-renderer';
+import { FC, MouseEvent, useCallback, useEffect, useState } from 'react';
+import { CatalogPageName, GetConfigurationValue, GetDiskColor, LocalizeText } from '../../../../../api';
+import { AutoGrid, Button, Flex, LayoutGridItem, Text } from '../../../../../common';
+
+export interface DiskInventoryViewProps
+{
+ diskInventory: IAdvancedMap;
+ addToPlaylist: (diskId: number, slotNumber: number) => void;
+}
+
+export const DiskInventoryView: FC = props =>
+{
+ const { diskInventory = null, addToPlaylist = null } = props;
+ const [ selectedItem, setSelectedItem ] = useState(-1);
+ const [ previewSongId, setPreviewSongId ] = useState(-1);
+
+ const previewSong = useCallback((event: MouseEvent, songId: number) =>
+ {
+ event.stopPropagation();
+
+ setPreviewSongId(prevValue => (prevValue === songId) ? -1 : songId);
+ }, []);
+
+ const addSong = useCallback((event: MouseEvent, diskId: number) =>
+ {
+ event.stopPropagation();
+
+ addToPlaylist(diskId, GetSoundManager().musicController?.getRoomItemPlaylist()?.length);
+ }, [ addToPlaylist ]);
+
+ const openCatalogPage = () =>
+ {
+ CreateLinkEvent('catalog/open/' + CatalogPageName.TRAX_SONGS);
+ };
+
+ useEffect(() =>
+ {
+ if(previewSongId === -1) return;
+
+ GetSoundManager().musicController?.playSong(previewSongId, MusicPriorities.PRIORITY_SONG_PLAY, 0, 0, 0, 0);
+
+ return () =>
+ {
+ GetSoundManager().musicController?.stop(MusicPriorities.PRIORITY_SONG_PLAY);
+ };
+ }, [ previewSongId ]);
+
+ useEffect(() =>
+ {
+ return () => setPreviewSongId(-1);
+ }, []);
+
+ return (<>
+ 
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx
new file mode 100644
index 0000000000..611eba2195
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/FurniturePlaylistEditorWidgetView.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../common';
+import { useFurniturePlaylistEditorWidget } from '../../../../../hooks';
+import { DiskInventoryView } from './DiskInventoryView';
+import { SongPlaylistView } from './SongPlaylistView';
+
+export const FurniturePlaylistEditorWidgetView: FC<{}> = props =>
+{
+ const { objectId = -1, currentPlayingIndex = -1, playlist = null, diskInventory = null, onClose = null, togglePlayPause = null, removeFromPlaylist = null, addToPlaylist = null } = useFurniturePlaylistEditorWidget();
+
+ if(objectId === -1) return null;
+
+ return (
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
new file mode 100644
index 0000000000..95289a7266
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/playlist-editor/SongPlaylistView.tsx
@@ -0,0 +1,78 @@
+import { ISongInfo } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { GetConfigurationValue, GetDiskColor, LocalizeText } from '../../../../../api';
+import { Button, Text } from '../../../../../common';
+
+export interface SongPlaylistViewProps
+{
+ furniId: number;
+ playlist: ISongInfo[];
+ currentPlayingIndex: number;
+ removeFromPlaylist(slotNumber: number): void;
+ togglePlayPause(furniId: number, position: number): void;
+}
+
+export const SongPlaylistView: FC = props =>
+{
+ const { furniId = -1, playlist = null, currentPlayingIndex = -1, removeFromPlaylist = null, togglePlayPause = null } = props;
+ const [ selectedItem, setSelectedItem ] = useState(-1);
+
+ const action = (index: number) =>
+ {
+ if(selectedItem === index) removeFromPlaylist(index);
+ };
+
+ const playPause = (furniId: number, selectedItem: number) =>
+ {
+ togglePlayPause(furniId, selectedItem !== -1 ? selectedItem : 0);
+ };
+
+ return (<>
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/furniture/FurnitureTrophyView.tsx b/Coolui v3 test/src/components/room/widgets/furniture/FurnitureTrophyView.tsx
new file mode 100644
index 0000000000..2e08af0658
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/furniture/FurnitureTrophyView.tsx
@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { LayoutTrophyView } from '../../../../common';
+import { useFurnitureTrophyWidget } from '../../../../hooks';
+
+export const FurnitureTrophyView: FC<{}> = props =>
+{
+ const { objectId = -1, color = '1', senderName = '', date = '', message = '', onClose = null } = useFurnitureTrophyWidget();
+
+ if(objectId === -1) return null;
+
+ return
+ { canModify &&
+ <>
+
+ { type == 'post_it' &&
+ <>
+ { STICKIE_COLORS.map(color =>
+ {
+ return
+ updateColor(color) } />;
+ }) }
+ }
+ }
+
+
+
+ { (!isEditing || !canModify) ?
+ (canModify && setIsEditing(true)) }>{ text }
: }
+
+
+
+ { (videoId && videoId.length > 0) &&
+ setPlayer(event.target) } onStateChange={ onStateChange } />
+ }
+ { (!videoId || videoId.length === 0) &&
+
+ { LocalizeText('widget.furni.video_viewer.no_videos') }
+ }
+
+
+
+
+
+
+ { playlists && playlists.map((entry, index) =>
+ {
+ return (
+ selectVideo(entry.video) }>
+ { entry.title }
+
+ );
+ }) }
+
+
+ { LocalizeText('widget.furni.video_viewer.playlists') }
+
+
+ { LocalizeText('effectbox.header.description') }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { LocalizeText('useproduct.widget.text.plant_seed', [ 'productName' ], [ furniData.name ]) }
+ { LocalizeText('useproduct.widget.info.plant_seed') }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ { LocalizeText('useproduct.widget.text.bind_clothing') }
+ { LocalizeText('useproduct.widget.info.bind_clothing') }
+
+
+
+
+
+
+
+
+
+ { LocalizeText('playlist.editor.my.music') }
+
+
+ { diskInventory && diskInventory.getKeys().map((key, index) =>
+ {
+ const diskId = diskInventory.getKey(index);
+ const songId = diskInventory.getWithIndex(index);
+ const songInfo = GetSoundManager().musicController?.getSongInfo(songId);
+
+ return (
+ setSelectedItem(prev => prev === index ? -1 : index) }>
+ { songInfo?.name }
+ { (selectedItem === index) &&
+
+
+
+
+ }
+ );
+ }) }
+
+
+
+
+
+
+ { LocalizeText('playlist.editor.text.get.more.music') }
+{ LocalizeText('playlist.editor.text.you.have.no.songdisks.available') }
+ { LocalizeText('playlist.editor.text.you.can.buy.some.from.the.catalogue') }
+
+
+
+
+
+
+
+
+
+
+ { LocalizeText('playlist.editor.playlist') }
+
+
+ }
+ { (playlist && playlist.length > 0) &&
+ <>
+ { (currentPlayingIndex === -1) &&
+
+ }
+ { (currentPlayingIndex !== -1) &&
+ (true);
+ const [ keyColor, setKeyColor ] = useState('');
+ const [ boxColor, setBoxColor ] = useState('');
+
+ useNitroEvent(MysteryBoxKeysUpdateEvent.MYSTERY_BOX_KEYS_UPDATE, event =>
+ {
+ setKeyColor(event.keyColor);
+ setBoxColor(event.boxColor);
+ });
+
+ const getRgbColor = (color: string) =>
+ {
+ const colorInt = colorMap[color];
+
+ return ColorUtils.int2rgb(colorInt);
+ };
+
+ if(keyColor === '' && boxColor === '') return null;
+
+ return (
+
+{
+ objectId: number;
+ category: number;
+ noFollow?: boolean;
+}
+
+export const ObjectLocationView: FC = props =>
+{
+ const { objectId = -1, category = -1, noFollow = false, ...rest } = props;
+ const [ pos, setPos ] = useState<{ x: number, y: number }>({ x: -1, y: -1 });
+ const elementRef = useRef();
+
+ useEffect(() =>
+ {
+ let remove = false;
+
+ const getObjectLocation = () =>
+ {
+ const roomSession = GetRoomSession();
+ const objectBounds = GetRoomObjectBounds(roomSession.roomId, objectId, category, 1);
+
+ return objectBounds;
+ };
+
+ const updatePosition = () =>
+ {
+ const bounds = getObjectLocation();
+
+ if(!bounds || !elementRef.current) return;
+
+ setPos({
+ x: Math.round(((bounds.left + (bounds.width / 2)) - (elementRef.current.offsetWidth / 2))),
+ y: Math.round((bounds.top - elementRef.current.offsetHeight) + 10)
+ });
+ };
+
+ if(noFollow)
+ {
+ updatePosition();
+ }
+ else
+ {
+ remove = true;
+
+ GetTicker().add(updatePosition);
+ }
+
+ return () =>
+ {
+ if(remove) GetTicker().remove(updatePosition);
+ };
+ }, [ objectId, category, noFollow ]);
+
+ return
+ { playlist && playlist.map((songInfo, index) =>
+ {
+ return
+ { (!playlist || playlist.length === 0) &&
+ <> setSelectedItem(prev => prev === index ? -1 : index) }>
+
+ action(index) } />
+ { songInfo.name }
+
;
+ }) }
+
+
+
+ { LocalizeText('playlist.editor.add.songs.to.your.playlist') }
+{ LocalizeText('playlist.editor.text.click.song.to.choose.click.again.to.move') }
+
+
+
+ }
+
+ }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx b/Coolui v3 test/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
new file mode 100644
index 0000000000..1e1828627b
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
@@ -0,0 +1,67 @@
+import { MysteryBoxKeysUpdateEvent } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { ColorUtils, LocalizeText } from '../../../../api';
+import { Flex, LayoutGridItem, Text } from '../../../../common';
+import { useNitroEvent } from '../../../../hooks';
+
+const colorMap = {
+ 'purple': 9452386,
+ 'blue': 3891856,
+ 'green': 6459451,
+ 'yellow': 10658089,
+ 'lilac': 6897548,
+ 'orange': 10841125,
+ 'turquoise': 2661026,
+ 'red': 10104881
+};
+
+export const MysteryBoxExtensionView: FC<{}> = props =>
+{
+ const [ isOpen, setIsOpen ] = useState
+ { LocalizeText('playlist.editor.text.now.playing.in.your.room') }
+
+ { playlist[currentPlayingIndex]?.name + ' - ' + playlist[currentPlayingIndex]?.creator }
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/object-location/ObjectLocationView.tsx b/Coolui v3 test/src/components/room/widgets/object-location/ObjectLocationView.tsx
new file mode 100644
index 0000000000..0bd1a4837f
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/object-location/ObjectLocationView.tsx
@@ -0,0 +1,61 @@
+import { GetTicker } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useRef, useState } from 'react';
+import { GetRoomObjectBounds, GetRoomSession } from '../../../../api';
+import { BaseProps } from '../../../../common';
+
+interface ObjectLocationViewProps extends BaseProps
+ setIsOpen(value => !value) }>
+ { LocalizeText('mysterybox.tracker.title') }
+ { isOpen &&
+ { isOpen &&
+ <>
+ { LocalizeText('mysterybox.tracker.description') }
+
+
+
+
+
+
+
+ }
+
+
+
+
+
+
+ -1) ? 'visible' : 'hidden' } } { ...rest } />;
+};
diff --git a/Coolui v3 test/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
new file mode 100644
index 0000000000..9b4ff4a166
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx
@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import { GetConfigurationValue, LocalizeText } from '../../../../api';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { usePetPackageWidget } from '../../../../hooks';
+
+export const PetPackageWidgetView: FC<{}> = props =>
+{
+ const { isVisible = false, errorResult = null, petName = null, objectType = null, onChangePetName = null, onConfirm = null, onClose = null } = usePetPackageWidget();
+
+ return (
+ <>
+ { isVisible &&
+
+ onClose() } />
+
+
+
+ }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx
new file mode 100644
index 0000000000..bbed44b1f8
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/room-filter-words/RoomFilterWordsWidgetView.tsx
@@ -0,0 +1,75 @@
+import { UpdateRoomFilterMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { LocalizeText, SendMessageComposer } from '../../../../api';
+import { Button, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { useFilterWordsWidget, useNavigator } from '../../../../hooks';
+import { NitroInput, classNames } from '../../../../layout';
+
+export const RoomFilterWordsWidgetView: FC<{}> = props =>
+{
+ const [ word, setWord ] = useState('bobba');
+ const [ selectedWord, setSelectedWord ] = useState('');
+ const [ isSelectingWord, setIsSelectingWord ] = useState(false);
+ const { wordsFilter = [], isVisible = null, setWordsFilter, onClose = null } = useFilterWordsWidget();
+ const { navigatorData = null } = useNavigator();
+
+ const processAction = (isAddingWord: boolean) =>
+ {
+ if((isSelectingWord) ? (!selectedWord) : (!word)) return;
+
+ SendMessageComposer(new UpdateRoomFilterMessageComposer(navigatorData.enteredGuestRoom.roomId, isAddingWord, (isSelectingWord ? selectedWord : word)));
+ setSelectedWord('');
+ setWord('bobba');
+ setIsSelectingWord(false);
+
+ if(isAddingWord && wordsFilter.includes((isSelectingWord ? selectedWord : word))) return;
+
+ setWordsFilter(prevValue =>
+ {
+ const newWords = [ ...prevValue ];
+
+ isAddingWord ? newWords.push((isSelectingWord ? selectedWord : word)) : newWords.splice(newWords.indexOf((isSelectingWord ? selectedWord : word)), 1);
+
+ return newWords;
+ });
+ };
+
+ const onTyping = (word: string) =>
+ {
+ setWord(word);
+ setIsSelectingWord(false);
+ };
+
+ const onSelectedWord = (word: string) =>
+ {
+ setSelectedWord(word);
+ setIsSelectingWord(true);
+ };
+
+ if(!isVisible) return null;
+
+ return (
+
+ onClose() } />
+
+
+ onTyping(event.target.value) } />
+
+
+
+ { wordsFilter && (wordsFilter.length > 0) && wordsFilter.map((word, index) =>
+ {
+ return (
+ onSelectedWord(word) }>
+ { word }
+
+ );
+ }) }
+
+
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
new file mode 100644
index 0000000000..07cf84185d
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
@@ -0,0 +1,55 @@
+import { DesktopViewEvent, GetSessionDataManager } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { Flex, Text } from '../../../../common';
+import { useMessageEvent, useRoomPromote } from '../../../../hooks';
+import { RoomPromoteEditWidgetView, RoomPromoteMyOwnEventWidgetView, RoomPromoteOtherEventWidgetView } from './views';
+
+export const RoomPromotesWidgetView: FC<{}> = props =>
+{
+ const [ isEditingPromote, setIsEditingPromote ] = useState(false);
+ const [ isOpen, setIsOpen ] = useState(true);
+ const { promoteInformation, setPromoteInformation } = useRoomPromote();
+
+ useMessageEvent(DesktopViewEvent, event =>
+ {
+ setPromoteInformation(null);
+ });
+
+ if(!promoteInformation) return null;
+
+ return (
+ <>
+ { promoteInformation.data.adId !== -1 &&
+ = props =>
+{
+ const { eventId = -1, eventName = '', eventDescription = '', setIsEditingPromote = null } = props;
+ const [ newEventName, setNewEventName ] = useState(eventName);
+ const [ newEventDescription, setNewEventDescription ] = useState(eventDescription);
+
+ const updatePromote = () =>
+ {
+ SendMessageComposer(new EditEventMessageComposer(eventId, newEventName, newEventDescription));
+ setIsEditingPromote(false);
+ };
+
+ return (
+
+ setIsEditingPromote(false) } />
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx
new file mode 100644
index 0000000000..e53497d036
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx
@@ -0,0 +1,36 @@
+import { CreateLinkEvent } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Button, Flex, Grid, Text } from '../../../../../common';
+import { useRoomPromote } from '../../../../../hooks';
+
+interface RoomPromoteMyOwnEventWidgetViewProps
+{
+ eventDescription: string;
+ setIsEditingPromote: (value: boolean) => void;
+}
+
+export const RoomPromoteMyOwnEventWidgetView: FC = props =>
+{
+ const { eventDescription = '', setIsEditingPromote = null } = props;
+ const { setIsExtended } = useRoomPromote();
+
+ const extendPromote = () =>
+ {
+ setIsExtended(true);
+ CreateLinkEvent('catalog/open/room_event');
+ };
+
+ return (
+ <>
+
+ { eventDescription }
+
+
+
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx
new file mode 100644
index 0000000000..3a3ed08af4
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx
@@ -0,0 +1,30 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Column, Flex, Text } from '../../../../../common';
+
+interface RoomPromoteOtherEventWidgetViewProps
+{
+ eventDescription: string;
+}
+
+export const RoomPromoteOtherEventWidgetView: FC = props =>
+{
+ const { eventDescription = '' } = props;
+
+ return (
+ <>
+
+ { eventDescription }
+
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/room-promotes/views/index.ts b/Coolui v3 test/src/components/room/widgets/room-promotes/views/index.ts
new file mode 100644
index 0000000000..da746917f6
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/room-promotes/views/index.ts
@@ -0,0 +1,3 @@
+export * from './RoomPromoteEditWidgetView';
+export * from './RoomPromoteMyOwnEventWidgetView';
+export * from './RoomPromoteOtherEventWidgetView';
diff --git a/Coolui v3 test/src/components/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx
new file mode 100644
index 0000000000..a14744c259
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/room-thumbnail/RoomThumbnailWidgetView.tsx
@@ -0,0 +1,41 @@
+import { GetRoomEngine, NitroRenderTexture } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { LayoutMiniCameraView } from '../../../../common';
+import { RoomWidgetThumbnailEvent } from '../../../../events';
+import { useRoom, useUiEvent } from '../../../../hooks';
+
+export const RoomThumbnailWidgetView: FC<{}> = props =>
+{
+ const [ isVisible, setIsVisible ] = useState(false);
+ const { roomSession = null } = useRoom();
+
+ useUiEvent([
+ RoomWidgetThumbnailEvent.SHOW_THUMBNAIL,
+ RoomWidgetThumbnailEvent.HIDE_THUMBNAIL,
+ RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL ], event =>
+ {
+ switch(event.type)
+ {
+ case RoomWidgetThumbnailEvent.SHOW_THUMBNAIL:
+ setIsVisible(true);
+ return;
+ case RoomWidgetThumbnailEvent.HIDE_THUMBNAIL:
+ setIsVisible(false);
+ return;
+ case RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL:
+ setIsVisible(value => !value);
+ return;
+ }
+ });
+
+ const receiveTexture = async (texture: NitroRenderTexture) =>
+ {
+ await GetRoomEngine().saveTextureAsScreenshot(texture, true);
+
+ setIsVisible(false);
+ };
+
+ if(!isVisible) return null;
+
+ return setIsVisible(false) } />;
+};
diff --git a/Coolui v3 test/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
new file mode 100644
index 0000000000..19d382ac8f
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -0,0 +1,162 @@
+import { CreateLinkEvent, GetGuestRoomResultEvent, GetRoomEngine, NavigatorSearchComposer, RateFlatMessageComposer } from '@nitrots/nitro-renderer';
+import { AnimatePresence, motion } from 'framer-motion';
+import { classNames } from '../../../../layout';
+import { FC, useEffect, useState } from 'react';
+import { GetConfigurationValue, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
+import { Text } from '../../../../common';
+import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
+
+export const RoomToolsWidgetView: FC<{}> = props => {
+ const [areBubblesMuted, setAreBubblesMuted] = useState(false);
+ const [isZoomedIn, setIsZoomedIn] = useState(false);
+ const [roomName, setRoomName] = useState(null);
+ const [roomOwner, setRoomOwner] = useState(null);
+ const [roomTags, setRoomTags] = useState(null);
+ const [isOpen, setIsOpen] = useState(false);
+ const [isOpenHistory, setIsOpenHistory] = useState(false);
+ const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
+ const { navigatorData = null } = useNavigator();
+ const { roomSession = null } = useRoom();
+
+ const handleToolClick = (action: string, value?: string) => {
+ if (!roomSession) return;
+
+ switch (action) {
+ case 'settings':
+ CreateLinkEvent('navigator/toggle-room-info');
+ return;
+ case 'zoom':
+ setIsZoomedIn(prevValue => {
+ if (GetConfigurationValue('room.zoom.enabled', true)) {
+ const scale = GetRoomEngine().getRoomInstanceRenderingCanvasScale(roomSession.roomId, 1);
+ GetRoomEngine().setRoomInstanceRenderingCanvasScale(roomSession.roomId, 1, scale === 1 ? 0.5 : 1);
+ } else {
+ const geometry = GetRoomEngine().getRoomInstanceGeometry(roomSession.roomId, 1);
+ if (geometry) geometry.performZoom();
+ }
+ return !prevValue;
+ });
+ return;
+ case 'chat_history':
+ CreateLinkEvent('chat-history/toggle');
+ return;
+ case 'hiddenbubbles':
+ CreateLinkEvent('nitrobubblehidden/toggle');
+ setAreBubblesMuted(prev => !prev);
+ return;
+ case 'like_room':
+ SendMessageComposer(new RateFlatMessageComposer(1));
+ return;
+ case 'toggle_room_link':
+ CreateLinkEvent('navigator/toggle-room-link');
+ return;
+ case 'navigator_search_tag':
+ CreateLinkEvent(`navigator/search/${value}`);
+ SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${value}`));
+ return;
+ case 'room_history':
+ if (roomHistory.length > 0) setIsOpenHistory(prev => !prev);
+ return;
+ case 'room_history_back':
+ const prevIndex = roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) - 1;
+ if (prevIndex >= 0) TryVisitRoom(roomHistory[prevIndex].roomId);
+ return;
+ case 'room_history_next':
+ const nextIndex = roomHistory.findIndex(room => room.roomId === navigatorData.currentRoomId) + 1;
+ if (nextIndex < roomHistory.length) TryVisitRoom(roomHistory[nextIndex].roomId);
+ return;
+ }
+ };
+
+ const onChangeRoomHistory = (roomId: number, roomName: string) => {
+ let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]');
+ if (newStorage.some((room: { roomId: number }) => room.roomId === roomId)) return;
+
+ if (newStorage.length >= 10) newStorage.shift();
+ newStorage = [...newStorage, { roomId, roomName }];
+
+ setRoomHistory(newStorage);
+ SetLocalStorage('nitro.room.history', newStorage);
+ };
+
+ useMessageEvent(GetGuestRoomResultEvent, event => {
+ const parser = event.getParser();
+ if (!parser.roomEnter || (parser.data.roomId !== roomSession.roomId)) return;
+
+ if (roomName !== parser.data.roomName) setRoomName(parser.data.roomName);
+ if (roomOwner !== parser.data.ownerName) setRoomOwner(parser.data.ownerName);
+ if (roomTags !== parser.data.tags) setRoomTags(parser.data.tags);
+ onChangeRoomHistory(parser.data.roomId, parser.data.roomName);
+ });
+
+ useEffect(() => {
+ setIsOpen(true);
+ const timeout = setTimeout(() => setIsOpen(false), 5000);
+ return () => clearTimeout(timeout);
+ }, [roomName, roomOwner, roomTags]);
+
+ useEffect(() => {
+ setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]'));
+ }, []);
+
+ useEffect(() => {
+ const handleTabClose = () => {
+ window.localStorage.removeItem('nitro.room.history');
+ };
+ window.addEventListener('beforeunload', handleTabClose);
+ return () => window.removeEventListener('beforeunload', handleTabClose);
+ }, []);
+
+ return (
+
+
+
+
+ { objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage') }
+
+
+
+
+
+
+ onChangePetName(event.target.value) } />
+
+
+ { (errorResult.length > 0) &&
+ { errorResult }
}
+
+ onClose() }>{ LocalizeText('cancel') }
+
+
+
+
+ }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
new file mode 100644
index 0000000000..bb3e6102d2
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
@@ -0,0 +1,45 @@
+import { EditEventMessageComposer } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { LocalizeText, SendMessageComposer } from '../../../../../api';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { NitroInput } from '../../../../../layout';
+
+interface RoomPromoteEditWidgetViewProps
+{
+ eventId: number;
+ eventName: string;
+ eventDescription: string;
+ setIsEditingPromote: (value: boolean) => void;
+}
+
+export const RoomPromoteEditWidgetView: FC
+ setIsOpen(value => !value) }>
+ { promoteInformation.data.eventName }
+ { isOpen &&
+ { (isOpen && GetSessionDataManager().userId !== promoteInformation.data.ownerAvatarId) &&
+ setIsEditingPromote(true) }
+ />
+ }
+ { isEditingPromote &&
+ setIsEditingPromote(false) }
+ />
+ }
+
+
+ { LocalizeText('navigator.eventsettings.name') }
+ setNewEventName(event.target.value) } />
+
+
+ { LocalizeText('navigator.eventsettings.desc') }
+
+
+
+
+
+ +
+
+
+
+
+ { LocalizeText('navigator.eventinprogress') }
+
+
+
+
handleToolClick('settings')} />
+
handleToolClick('zoom')} />
+
handleToolClick('chat_history')} />
+
handleToolClick('hiddenbubbles')} />
+
+ {navigatorData.canRate && (
+
handleToolClick('like_room')} />
+ )}
+
+{
+ userId: number;
+}
+
+export const UserLocationView: FC = props =>
+{
+ const { userId = -1, ...rest } = props;
+ const { roomSession = null } = useRoom();
+
+ if((userId === -1) || !roomSession) return null;
+
+ const userData = roomSession.userDataManager.getUserData(userId);
+
+ if(!userData) return null;
+
+ return = props =>
+{
+ const { question = null, canVote = null, vote = null, noVotes = null, yesVotes = null } = props;
+
+ return (
+
+ { !canVote &&
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx b/Coolui v3 test/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx
new file mode 100644
index 0000000000..b1925a0c80
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/word-quiz/WordQuizVoteView.tsx
@@ -0,0 +1,24 @@
+import { RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { VALUE_KEY_DISLIKE } from '../../../../api';
+import { BaseProps } from '../../../../common';
+import { ObjectLocationView } from '../object-location/ObjectLocationView';
+
+interface WordQuizVoteViewProps extends BaseProps
+{
+ userIndex: number;
+ vote: string;
+}
+
+export const WordQuizVoteView: FC = props =>
+{
+ const { userIndex = null, vote = null, ...rest } = props;
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/room/widgets/word-quiz/WordQuizWidgetView.tsx b/Coolui v3 test/src/components/room/widgets/word-quiz/WordQuizWidgetView.tsx
new file mode 100644
index 0000000000..d433d3504c
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/word-quiz/WordQuizWidgetView.tsx
@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { VALUE_KEY_DISLIKE, VALUE_KEY_LIKE } from '../../../../api';
+import { useWordQuizWidget } from '../../../../hooks';
+import { WordQuizQuestionView } from './WordQuizQuestionView';
+import { WordQuizVoteView } from './WordQuizVoteView';
+
+export const WordQuizWidgetView: FC<{}> = props =>
+{
+ const { question = null, answerSent = false, answerCounts = null, userAnswers = null, vote = null } = useWordQuizWidget();
+
+ return (
+ <>
+ { question &&
+ & DetailedHTMLProps, HTMLDivElement>>((props, ref) =>
+{
+ const { icon = null, className = null, ...rest } = props;
+
+ return (
+
+ );
+});
+
+ToolbarItemView.displayName = 'ToolbarItemView';
diff --git a/Coolui v3 test/src/components/toolbar/ToolbarMeView.tsx b/Coolui v3 test/src/components/toolbar/ToolbarMeView.tsx
new file mode 100644
index 0000000000..c420fce84f
--- /dev/null
+++ b/Coolui v3 test/src/components/toolbar/ToolbarMeView.tsx
@@ -0,0 +1,49 @@
+import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
+import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile } from '../../api';
+import { Flex, LayoutItemCountView } from '../../common';
+import { GuideToolEvent } from '../../events';
+
+export const ToolbarMeView: FC>;
+}>> = props =>
+{
+ const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
+ const elementRef = useRef();
+
+ useEffect(() =>
+ {
+ const roomSession = GetRoomSession();
+
+ if(!roomSession) return;
+
+ GetRoomEngine().selectRoomObject(roomSession.roomId, roomSession.ownRoomIndex, RoomObjectCategory.UNIT);
+ }, []);
+
+ useEffect(() =>
+ {
+ const onClick = (event: MouseEvent) => setMeExpanded(false);
+
+ document.addEventListener('click', onClick);
+
+ return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
+ }, [ setMeExpanded ]);
+
+ return (
+
+ { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
+
handleToolClick('toggle_room_link')} />
+
+ );
+};
\ No newline at end of file
diff --git a/Coolui v3 test/src/components/room/widgets/user-location/UserLocationView.tsx b/Coolui v3 test/src/components/room/widgets/user-location/UserLocationView.tsx
new file mode 100644
index 0000000000..f7b9daac42
--- /dev/null
+++ b/Coolui v3 test/src/components/room/widgets/user-location/UserLocationView.tsx
@@ -0,0 +1,24 @@
+import { RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { BaseProps } from '../../../../common';
+import { useRoom } from '../../../../hooks';
+import { ObjectLocationView } from '../object-location/ObjectLocationView';
+
+interface UserLocationViewProps extends BaseProps handleToolClick('room_history')} />
+
+
+
+ {isOpen && (
+
+
+ )}
+ {isOpenHistory && (
+
+
+ )}
+
+
+
+
+
+
+
+ {roomName}
+ {roomOwner}
+
+ {roomTags && roomTags.length > 0 && (
+
+ {roomTags.map((tag, index) => (
+ handleToolClick('navigator_search_tag', tag)}>
+ #{tag}
+
+ ))}
+
+ )}
+
+ {roomHistory.map(history => (
+ TryVisitRoom(history.roomId)}>
+ {history.roomName}
+
+ ))}
+
+
+ { question }
+
}
+ { canVote &&
+
+ { noVotes }
+
+
+ { yesVotes }
+
+
+ { question }
+
}
+
+ vote(VALUE_KEY_DISLIKE) }>
+
+
+ vote(VALUE_KEY_LIKE) }>
+
+
+
+
+
+
+ DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
+
CreateLinkEvent('achievements/toggle') }>
+ { (unseenAchievementCount > 0) &&
+
+ GetUserProfile(GetSessionDataManager().userId) } />
+
CreateLinkEvent('navigator/search/myworld_view') } />
+
CreateLinkEvent('avatar-editor/toggle') } />
+
CreateLinkEvent('user-settings/toggle') } />
+ { children }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/toolbar/ToolbarView.tsx b/Coolui v3 test/src/components/toolbar/ToolbarView.tsx
new file mode 100644
index 0000000000..27e6a4ab33
--- /dev/null
+++ b/Coolui v3 test/src/components/toolbar/ToolbarView.tsx
@@ -0,0 +1,117 @@
+import { CreateLinkEvent, Dispose, DropBounce, EaseOut, GetSessionDataManager, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
+import { AnimatePresence, motion } from 'framer-motion';
+import { FC, useState } from 'react';
+import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
+import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
+import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
+import { ToolbarItemView } from './ToolbarItemView';
+import { ToolbarMeView } from './ToolbarMeView';
+
+export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
+{
+ const { isInRoom } = props;
+ const [ isMeExpanded, setMeExpanded ] = useState(false);
+ const [ useGuideTool, setUseGuideTool ] = useState(false);
+ const { userFigure = null } = useSessionInfo();
+ const { getFullCount = 0 } = useInventoryUnseenTracker();
+ const { getTotalUnseen = 0 } = useAchievements();
+ const { requests = [] } = useFriends();
+ const { iconState = MessengerIconState.HIDDEN } = useMessenger();
+ const isMod = GetSessionDataManager().isModerator;
+
+ useMessageEvent(PerkAllowancesMessageEvent, event =>
+ {
+ setUseGuideTool(event.getParser().isAllowed(PerkEnum.USE_GUIDE_TOOL));
+ });
+
+ useNitroEvent(NitroToolbarAnimateIconEvent.ANIMATE_ICON, event =>
+ {
+ const animationIconToToolbar = (iconName: string, image: HTMLImageElement, x: number, y: number) =>
+ {
+ const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
+
+ if(!target) return;
+
+ image.className = 'toolbar-icon-animation';
+ image.style.visibility = 'visible';
+ image.style.left = (x + 'px');
+ image.style.top = (y + 'px');
+
+ document.body.append(image);
+
+ const targetBounds = target.getBoundingClientRect();
+ const imageBounds = image.getBoundingClientRect();
+
+ const left = (imageBounds.x - targetBounds.x);
+ const top = (imageBounds.y - targetBounds.y);
+ const squared = Math.sqrt(((left * left) + (top * top)));
+ const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
+ const height = 20;
+
+ const motionName = (`ToolbarBouncing[${ iconName }]`);
+
+ if(!Motions.getMotionByTag(motionName))
+ {
+ Motions.runMotion(new Queue(new Wait((wait + 8)), new DropBounce(target, 400, 12))).tag = motionName;
+ }
+
+ const motion = new Queue(new EaseOut(new JumpBy(image, wait, ((targetBounds.x - imageBounds.x) + height), (targetBounds.y - imageBounds.y), 100, 1), 1), new Dispose(image));
+
+ Motions.runMotion(motion);
+ };
+
+ animationIconToToolbar('icon-inventory', event.image, event.x, event.y);
+ });
+
+ return (
+ <>
+ { isMeExpanded && (
+ )}
+
+
+
+
+
+ {
+ setMeExpanded(!isMeExpanded);
+ event.stopPropagation();
+ } }>
+
+ { isInRoom &&
+ VisitDesktop() } /> }
+ { !isInRoom &&
+ CreateLinkEvent('navigator/goto/home') } /> }
+ CreateLinkEvent('navigator/toggle') } />
+ { GetConfigurationValue('game.center.enabled') &&
+ CreateLinkEvent('games/toggle') } /> }
+ CreateLinkEvent('catalog/toggle') } />
+ CreateLinkEvent('inventory/toggle') }>
+ { (getFullCount > 0) &&
+
+ { isInRoom &&
+ CreateLinkEvent('camera/toggle') } /> }
+ { isMod &&
+ CreateLinkEvent('mod-tools/toggle') } /> }
+
+
+
+
+ CreateLinkEvent('friends/toggle') }>
+ { (requests.length > 0) &&
+
+ { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
+ OpenMessengerChat() } /> }
+
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/user-profile/FriendsContainerView.tsx b/Coolui v3 test/src/components/user-profile/FriendsContainerView.tsx
new file mode 100644
index 0000000000..b92b82d014
--- /dev/null
+++ b/Coolui v3 test/src/components/user-profile/FriendsContainerView.tsx
@@ -0,0 +1,27 @@
+import { RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { LocalizeText } from '../../api';
+import { RelationshipsContainerView } from './RelationshipsContainerView';
+
+interface FriendsContainerViewProps
+{
+ relationships: RelationshipStatusInfoMessageParser;
+ friendsCount: number;
+}
+
+export const FriendsContainerView: FC = props =>
+{
+ const { relationships = null, friendsCount = null } = props;
+
+ return (
+ = props =>
+{
+ const { itsMe = null, groups = null, onLeaveGroup = null, overflow = 'hidden', gap = 2, ...rest } = props;
+ const [ selectedGroupId, setSelectedGroupId ] = useState(null);
+ const [ groupInformation, setGroupInformation ] = useState(null);
+
+ useMessageEvent(GroupInformationEvent, event =>
+ {
+ const parser = event.getParser();
+
+ if(!selectedGroupId || (selectedGroupId !== parser.id) || parser.flag) return;
+
+ setGroupInformation(parser);
+ });
+
+ useEffect(() =>
+ {
+ if(!selectedGroupId) return;
+
+ SendMessageComposer(new GroupInformationComposer(selectedGroupId, false));
+ }, [ selectedGroupId ]);
+
+ useEffect(() =>
+ {
+ setGroupInformation(null);
+
+ if(groups.length > 0)
+ {
+ setSelectedGroupId(prevValue =>
+ {
+ if(prevValue === groups[0].groupId)
+ {
+ SendMessageComposer(new GroupInformationComposer(groups[0].groupId, false));
+ }
+
+ return groups[0].groupId;
+ });
+ }
+ }, [ groups ]);
+
+ if(!groups || !groups.length)
+ {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+ { groups.map((group, index) =>
+ {
+ return (
+ setSelectedGroupId(group.groupId) }>
+ { itsMe &&
+ ToggleFavoriteGroup(group) } /> }
+
+ );
+ }) }
+
+
+
+ { groupInformation &&
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/user-profile/RelationshipsContainerView.tsx b/Coolui v3 test/src/components/user-profile/RelationshipsContainerView.tsx
new file mode 100644
index 0000000000..7bdca660a8
--- /dev/null
+++ b/Coolui v3 test/src/components/user-profile/RelationshipsContainerView.tsx
@@ -0,0 +1,62 @@
+import { RelationshipStatusEnum, RelationshipStatusInfoMessageParser } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { GetUserProfile, LocalizeText } from '../../api';
+import { Flex, LayoutAvatarImageView } from '../../common';
+
+interface RelationshipsContainerViewProps
+{
+ relationships: RelationshipStatusInfoMessageParser;
+}
+
+interface RelationshipsContainerRelationshipViewProps
+{
+ type: number;
+}
+
+export const RelationshipsContainerView: FC = props =>
+{
+ const { relationships = null } = props;
+
+ const RelationshipComponent = ({ type }: RelationshipsContainerRelationshipViewProps) =>
+ {
+ const relationshipInfo = (relationships && relationships.relationshipStatusMap.hasKey(type)) ? relationships.relationshipStatusMap.getValue(type) : null;
+ const relationshipName = RelationshipStatusEnum.RELATIONSHIP_NAMES[type].toLocaleLowerCase();
+
+ return (
+ (null);
+ const [ userBadges, setUserBadges ] = useState([]);
+ const [ userRelationships, setUserRelationships ] = useState(null);
+
+ const onClose = () =>
+ {
+ setUserProfile(null);
+ setUserBadges([]);
+ setUserRelationships(null);
+ };
+
+ const onLeaveGroup = () =>
+ {
+ if(!userProfile || (userProfile.id !== GetSessionDataManager().userId)) return;
+
+ GetUserProfile(userProfile.id);
+ };
+
+ useMessageEvent(UserCurrentBadgesEvent, event =>
+ {
+ const parser = event.getParser();
+
+ if(!userProfile || (parser.userId !== userProfile.id)) return;
+
+ setUserBadges(parser.badges);
+ });
+
+ useMessageEvent(RelationshipStatusInfoEvent, event =>
+ {
+ const parser = event.getParser();
+
+ if(!userProfile || (parser.userId !== userProfile.id)) return;
+
+ setUserRelationships(parser);
+ });
+
+ useMessageEvent(UserProfileEvent, event =>
+ {
+ const parser = event.getParser();
+
+ let isSameProfile = false;
+
+ setUserProfile(prevValue =>
+ {
+ if(prevValue && prevValue.id) isSameProfile = (prevValue.id === parser.id);
+
+ return parser;
+ });
+
+ if(!isSameProfile)
+ {
+ setUserBadges([]);
+ setUserRelationships(null);
+ }
+
+ SendMessageComposer(new UserCurrentBadgesComposer(parser.id));
+ SendMessageComposer(new UserRelationshipsComposer(parser.id));
+ });
+
+ useMessageEvent(ExtendedProfileChangedMessageEvent, event =>
+ {
+ const parser = event.getParser();
+
+ if(parser.userId != userProfile?.id) return;
+
+ GetUserProfile(parser.userId);
+ });
+
+ useNitroEvent(RoomEngineObjectEvent.SELECTED, event =>
+ {
+ if(!userProfile) return;
+
+ if(event.category !== RoomObjectCategory.UNIT) return;
+
+ const userData = GetRoomSession().userDataManager.getUserDataByIndex(event.objectId);
+
+ if(userData.type !== RoomObjectType.USER) return;
+
+ GetUserProfile(userData.webID);
+ });
+
+ if(!userProfile) return null;
+
+ return (
+
+
+
+
+
+ CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`) }>
+
+ { LocalizeText('extendedprofile.rooms') }
+
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/user-settings/UserSettingsView.tsx b/Coolui v3 test/src/components/user-settings/UserSettingsView.tsx
new file mode 100644
index 0000000000..d52df7438f
--- /dev/null
+++ b/Coolui v3 test/src/components/user-settings/UserSettingsView.tsx
@@ -0,0 +1,188 @@
+import { AddLinkEventTracker, ILinkEventTracker, NitroSettingsEvent, RemoveLinkEventTracker, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
+import { DispatchMainEvent, DispatchUiEvent, LocalizeText, SendMessageComposer } from '../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useMessageEvent } from '../../hooks';
+import { classNames } from '../../layout';
+
+export const UserSettingsView: FC<{}> = props =>
+{
+ const [ isVisible, setIsVisible ] = useState(false);
+ const [ userSettings, setUserSettings ] = useState(null);
+ const [ catalogPlaceMultipleObjects, setCatalogPlaceMultipleObjects ] = useCatalogPlaceMultipleItems();
+ const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation();
+
+ const processAction = (type: string, value?: boolean | number | string) =>
+ {
+ let doUpdate = true;
+
+ const clone = userSettings.clone();
+
+ switch(type)
+ {
+ case 'close_view':
+ setIsVisible(false);
+ doUpdate = false;
+ return;
+ case 'oldchat':
+ clone.oldChat = value as boolean;
+ SendMessageComposer(new UserSettingsOldChatComposer(clone.oldChat));
+ break;
+ case 'room_invites':
+ clone.roomInvites = value as boolean;
+ SendMessageComposer(new UserSettingsRoomInvitesComposer(clone.roomInvites));
+ break;
+ case 'camera_follow':
+ clone.cameraFollow = value as boolean;
+ SendMessageComposer(new UserSettingsCameraFollowComposer(clone.cameraFollow));
+ break;
+ case 'system_volume':
+ clone.volumeSystem = value as number;
+ clone.volumeSystem = Math.max(0, clone.volumeSystem);
+ clone.volumeSystem = Math.min(100, clone.volumeSystem);
+ break;
+ case 'furni_volume':
+ clone.volumeFurni = value as number;
+ clone.volumeFurni = Math.max(0, clone.volumeFurni);
+ clone.volumeFurni = Math.min(100, clone.volumeFurni);
+ break;
+ case 'trax_volume':
+ clone.volumeTrax = value as number;
+ clone.volumeTrax = Math.max(0, clone.volumeTrax);
+ clone.volumeTrax = Math.min(100, clone.volumeTrax);
+ break;
+ }
+
+ if(doUpdate) setUserSettings(clone);
+
+ DispatchMainEvent(clone);
+ };
+
+ const saveRangeSlider = (type: string) =>
+ {
+ switch(type)
+ {
+ case 'volume':
+ SendMessageComposer(new UserSettingsSoundComposer(Math.round(userSettings.volumeSystem), Math.round(userSettings.volumeFurni), Math.round(userSettings.volumeTrax)));
+ break;
+ }
+ };
+
+ useMessageEvent(UserSettingsEvent, event =>
+ {
+ const parser = event.getParser();
+ const settingsEvent = new NitroSettingsEvent();
+
+ settingsEvent.volumeSystem = parser.volumeSystem;
+ settingsEvent.volumeFurni = parser.volumeFurni;
+ settingsEvent.volumeTrax = parser.volumeTrax;
+ settingsEvent.oldChat = parser.oldChat;
+ settingsEvent.roomInvites = parser.roomInvites;
+ settingsEvent.cameraFollow = parser.cameraFollow;
+ settingsEvent.flags = parser.flags;
+ settingsEvent.chatType = parser.chatType;
+
+ setUserSettings(settingsEvent);
+ DispatchMainEvent(settingsEvent);
+ });
+
+ useEffect(() =>
+ {
+ const linkTracker: ILinkEventTracker = {
+ linkReceived: (url: string) =>
+ {
+ const parts = url.split('/');
+
+ if(parts.length < 2) return;
+
+ switch(parts[1])
+ {
+ case 'show':
+ setIsVisible(true);
+ return;
+ case 'hide':
+ setIsVisible(false);
+ return;
+ case 'toggle':
+ setIsVisible(prevValue => !prevValue);
+ return;
+ }
+ },
+ eventUrlPrefix: 'user-settings/'
+ };
+
+ AddLinkEventTracker(linkTracker);
+
+ return () => RemoveLinkEventTracker(linkTracker);
+ }, []);
+
+ useEffect(() =>
+ {
+ if(!userSettings) return;
+
+ DispatchUiEvent(userSettings);
+ }, [ userSettings ]);
+
+ if(!isVisible || !userSettings) return null;
+
+ return (
+
+ processAction('close_view') } />
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/WiredView.tsx b/Coolui v3 test/src/components/wired/WiredView.tsx
new file mode 100644
index 0000000000..0f073abdd1
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/WiredView.tsx
@@ -0,0 +1,21 @@
+import { ConditionDefinition, TriggerDefinition, WiredActionDefinition } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { useWired } from '../../hooks';
+import { WiredActionLayoutView } from './views/actions/WiredActionLayoutView';
+import { WiredConditionLayoutView } from './views/conditions/WiredConditionLayoutView';
+import { WiredTriggerLayoutView } from './views/triggers/WiredTriggerLayoutView';
+
+export const WiredView: FC<{}> = props =>
+{
+ const { trigger = null } = useWired();
+
+ if(!trigger) return null;
+
+ if(trigger instanceof WiredActionDefinition) return WiredActionLayoutView(trigger.code);
+
+ if(trigger instanceof TriggerDefinition) return WiredTriggerLayoutView(trigger.code);
+
+ if(trigger instanceof ConditionDefinition) return WiredConditionLayoutView(trigger.code);
+
+ return null;
+};
diff --git a/Coolui v3 test/src/components/wired/views/WiredBaseView.tsx b/Coolui v3 test/src/components/wired/views/WiredBaseView.tsx
new file mode 100644
index 0000000000..8e8fb374fc
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/WiredBaseView.tsx
@@ -0,0 +1,114 @@
+import { GetSessionDataManager } from '@nitrots/nitro-renderer';
+import { FC, PropsWithChildren, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../api';
+import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { useWired } from '../../../hooks';
+import { WiredFurniSelectorView } from './WiredFurniSelectorView';
+
+export interface WiredBaseViewProps
+{
+ wiredType: string;
+ requiresFurni: number;
+ hasSpecialInput: boolean;
+ save: () => void;
+ validate?: () => boolean;
+}
+
+export const WiredBaseView: FC> = props =>
+{
+ const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null, hasSpecialInput = false } = props;
+ const [ wiredName, setWiredName ] = useState(null);
+ const [ wiredDescription, setWiredDescription ] = useState(null);
+ const [ needsSave, setNeedsSave ] = useState(false);
+ const { trigger = null, setTrigger = null, setIntParams = null, setStringParam = null, setFurniIds = null, setAllowsFurni = null, saveWired = null } = useWired();
+
+ const onClose = () => setTrigger(null);
+
+ const onSave = () =>
+ {
+ if(validate && !validate()) return;
+
+ if(save) save();
+
+ setNeedsSave(true);
+ };
+
+ useEffect(() =>
+ {
+ if(!needsSave) return;
+
+ saveWired();
+
+ setNeedsSave(false);
+ }, [ needsSave, saveWired ]);
+
+ useEffect(() =>
+ {
+ if(!trigger) return;
+
+ const spriteId = (trigger.spriteId || -1);
+ const furniData = GetSessionDataManager().getFloorItemData(spriteId);
+
+ if(!furniData)
+ {
+ setWiredName(('NAME: ' + spriteId));
+ setWiredDescription(('NAME: ' + spriteId));
+ }
+ else
+ {
+ setWiredName(furniData.name);
+ setWiredDescription(furniData.description);
+ }
+
+ if(hasSpecialInput)
+ {
+ setIntParams(trigger.intData);
+ setStringParam(trigger.stringData);
+ }
+
+ if(requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE)
+ {
+ setFurniIds(prevValue =>
+ {
+ if(prevValue && prevValue.length) WiredSelectionVisualizer.clearSelectionShaderFromFurni(prevValue);
+
+ if(trigger.selectedItems && trigger.selectedItems.length)
+ {
+ WiredSelectionVisualizer.applySelectionShaderToFurni(trigger.selectedItems);
+
+ return trigger.selectedItems;
+ }
+
+ return [];
+ });
+ }
+
+ setAllowsFurni(requiresFurni);
+ }, [ trigger, hasSpecialInput, requiresFurni, setIntParams, setStringParam, setFurniIds, setAllowsFurni ]);
+
+ return (
+
+
+
} + { children } + { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) && + <> +
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/WiredFurniSelectorView.tsx b/Coolui v3 test/src/components/wired/views/WiredFurniSelectorView.tsx
new file mode 100644
index 0000000000..1363326bda
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/WiredFurniSelectorView.tsx
@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../api';
+import { Text } from '../../../common';
+import { useWired } from '../../../hooks';
+
+export const WiredFurniSelectorView: FC<{}> = props =>
+{
+ const { trigger = null, furniIds = [] } = useWired();
+
+ return (
+ > = props =>
+{
+ const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
+ const { trigger = null, actionDelay = 0, setActionDelay = null } = useWired();
+
+ useEffect(() =>
+ {
+ setActionDelay((trigger as WiredActionDefinition).delayInPulses);
+ }, [ trigger, setActionDelay ]);
+
+ return (
+
+ { children }
+ { !!children &&
} +
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
new file mode 100644
index 0000000000..e359037f67
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotChangeFigureView.tsx
@@ -0,0 +1,39 @@
+import { GetSessionDataManager } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WIRED_STRING_DELIMETER, WiredFurniType } from '../../../../api';
+import { Button, LayoutAvatarImageView, Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+const DEFAULT_FIGURE: string = 'hd-180-1.ch-210-66.lg-270-82.sh-290-81';
+
+export const WiredActionBotChangeFigureView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const [ figure, setFigure ] = useState('');
+ const { trigger = null, setStringParam = null } = useWired();
+
+ const save = () => setStringParam((botName + WIRED_STRING_DELIMETER + figure));
+
+ useEffect(() =>
+ {
+ const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
+
+ if(data.length > 0) setBotName(data[0]);
+ if(data.length > 1) setFigure(data[1].length > 0 ? data[1] : DEFAULT_FIGURE);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
new file mode 100644
index 0000000000..9576ea04dc
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotFollowAvatarView.tsx
@@ -0,0 +1,44 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionBotFollowAvatarView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const [ followMode, setFollowMode ] = useState(-1);
+ const { trigger = null, setStringParam = null, setIntParams = null } = useWired();
+
+ const save = () =>
+ {
+ setStringParam(botName);
+ setIntParams([ followMode ]);
+ };
+
+ useEffect(() =>
+ {
+ setBotName(trigger.stringData);
+ setFollowMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
new file mode 100644
index 0000000000..0dc2bc480f
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
@@ -0,0 +1,43 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+const ALLOWED_HAND_ITEM_IDS: number[] = [ 2, 5, 7, 8, 9, 10, 27 ];
+
+export const WiredActionBotGiveHandItemView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const [ handItemId, setHandItemId ] = useState(-1);
+ const { trigger = null, setStringParam = null, setIntParams = null } = useWired();
+
+ const save = () =>
+ {
+ setStringParam(botName);
+ setIntParams([ handItemId ]);
+ };
+
+ useEffect(() =>
+ {
+ setBotName(trigger.stringData);
+ setHandItemId((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionBotMoveView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotMoveView.tsx
new file mode 100644
index 0000000000..644b34e1e6
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotMoveView.tsx
@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionBotMoveView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const { trigger = null, setStringParam = null } = useWired();
+
+ const save = () => setStringParam(botName);
+
+ useEffect(() =>
+ {
+ setBotName(trigger.stringData);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
new file mode 100644
index 0000000000..b69a9724d0
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTalkToAvatarView.tsx
@@ -0,0 +1,53 @@
+import { FC, useEffect, useState } from 'react';
+import { GetConfigurationValue, LocalizeText, WIRED_STRING_DELIMETER, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionBotTalkToAvatarView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const [ message, setMessage ] = useState('');
+ const [ talkMode, setTalkMode ] = useState(-1);
+ const { trigger = null, setStringParam = null, setIntParams = null } = useWired();
+
+ const save = () =>
+ {
+ setStringParam(botName + WIRED_STRING_DELIMETER + message);
+ setIntParams([ talkMode ]);
+ };
+
+ useEffect(() =>
+ {
+ const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
+
+ if(data.length > 0) setBotName(data[0]);
+ if(data.length > 1) setMessage(data[1].length > 0 ? data[1] : '');
+
+ setTalkMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTalkView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTalkView.tsx
new file mode 100644
index 0000000000..31b6a14ce3
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTalkView.tsx
@@ -0,0 +1,53 @@
+import { FC, useEffect, useState } from 'react';
+import { GetConfigurationValue, LocalizeText, WIRED_STRING_DELIMETER, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionBotTalkView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const [ message, setMessage ] = useState('');
+ const [ talkMode, setTalkMode ] = useState(-1);
+ const { trigger = null, setStringParam = null, setIntParams = null } = useWired();
+
+ const save = () =>
+ {
+ setStringParam(botName + WIRED_STRING_DELIMETER + message);
+ setIntParams([ talkMode ]);
+ };
+
+ useEffect(() =>
+ {
+ const data = trigger.stringData.split(WIRED_STRING_DELIMETER);
+
+ if(data.length > 0) setBotName(data[0]);
+ if(data.length > 1) setMessage(data[1].length > 0 ? data[1] : '');
+
+ setTalkMode((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTeleportView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
new file mode 100644
index 0000000000..1979930dca
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionBotTeleportView.tsx
@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionBotTeleportView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const { trigger = null, setStringParam = null } = useWired();
+
+ const save = () => setStringParam(botName);
+
+ useEffect(() =>
+ {
+ setBotName(trigger.stringData);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionCallAnotherStackView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionCallAnotherStackView.tsx
new file mode 100644
index 0000000000..69c17fe1f5
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionCallAnotherStackView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionCallAnotherStackView: FC<{}> = props =>
+{
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionFleeView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionFleeView.tsx
new file mode 100644
index 0000000000..e3e5776082
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionFleeView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionFleeView: FC<{}> = props =>
+{
+ return
+
+ Reward limit not set. Make sure rewards are badges or non-tradeable items.
+ }
+ { limitEnabled &&
+ setRewardsLimit(event) } /> }
+
+
+
+ If checked each reward will be given once to each user. This will disable the probabilities option.
+
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
new file mode 100644
index 0000000000..02d228112a
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionGiveScoreToPredefinedTeamView.tsx
@@ -0,0 +1,67 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionGiveScoreToPredefinedTeamView: FC<{}> = props =>
+{
+ const [ points, setPoints ] = useState(1);
+ const [ time, setTime ] = useState(1);
+ const [ selectedTeam, setSelectedTeam ] = useState(1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ points, time, selectedTeam ]);
+
+ useEffect(() =>
+ {
+ if(trigger.intData.length >= 2)
+ {
+ setPoints(trigger.intData[0]);
+ setTime(trigger.intData[1]);
+ setSelectedTeam(trigger.intData[2]);
+ }
+ else
+ {
+ setPoints(1);
+ setTime(1);
+ setSelectedTeam(1);
+ }
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionGiveScoreView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
new file mode 100644
index 0000000000..a2b9f86bee
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionGiveScoreView.tsx
@@ -0,0 +1,52 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionGiveScoreView: FC<{}> = props =>
+{
+ const [ points, setPoints ] = useState(1);
+ const [ time, setTime ] = useState(1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ points, time ]);
+
+ useEffect(() =>
+ {
+ if(trigger.intData.length >= 2)
+ {
+ setPoints(trigger.intData[0]);
+ setTime(trigger.intData[1]);
+ }
+ else
+ {
+ setPoints(1);
+ setTime(1);
+ }
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionJoinTeamView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
new file mode 100644
index 0000000000..10b8c24f2c
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionJoinTeamView.tsx
@@ -0,0 +1,35 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionJoinTeamView: FC<{}> = props =>
+{
+ const [ selectedTeam, setSelectedTeam ] = useState(-1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ selectedTeam ]);
+
+ useEffect(() =>
+ {
+ setSelectedTeam((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
new file mode 100644
index 0000000000..002426d089
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionKickFromRoomView.tsx
@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionKickFromRoomView: FC<{}> = props =>
+{
+ const [ message, setMessage ] = useState('');
+ const { trigger = null, setStringParam = null } = useWired();
+
+ const save = () => setStringParam(message);
+
+ useEffect(() =>
+ {
+ setMessage(trigger.stringData);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionLayoutView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionLayoutView.tsx
new file mode 100644
index 0000000000..36d14d4936
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionLayoutView.tsx
@@ -0,0 +1,85 @@
+import { WiredActionLayoutCode } from '../../../../api';
+import { WiredActionBotChangeFigureView } from './WiredActionBotChangeFigureView';
+import { WiredActionBotFollowAvatarView } from './WiredActionBotFollowAvatarView';
+import { WiredActionBotGiveHandItemView } from './WiredActionBotGiveHandItemView';
+import { WiredActionBotMoveView } from './WiredActionBotMoveView';
+import { WiredActionBotTalkToAvatarView } from './WiredActionBotTalkToAvatarView';
+import { WiredActionBotTalkView } from './WiredActionBotTalkView';
+import { WiredActionBotTeleportView } from './WiredActionBotTeleportView';
+import { WiredActionCallAnotherStackView } from './WiredActionCallAnotherStackView';
+import { WiredActionChaseView } from './WiredActionChaseView';
+import { WiredActionChatView } from './WiredActionChatView';
+import { WiredActionFleeView } from './WiredActionFleeView';
+import { WiredActionGiveRewardView } from './WiredActionGiveRewardView';
+import { WiredActionGiveScoreToPredefinedTeamView } from './WiredActionGiveScoreToPredefinedTeamView';
+import { WiredActionGiveScoreView } from './WiredActionGiveScoreView';
+import { WiredActionJoinTeamView } from './WiredActionJoinTeamView';
+import { WiredActionKickFromRoomView } from './WiredActionKickFromRoomView';
+import { WiredActionLeaveTeamView } from './WiredActionLeaveTeamView';
+import { WiredActionMoveAndRotateFurniView } from './WiredActionMoveAndRotateFurniView';
+import { WiredActionMoveFurniToView } from './WiredActionMoveFurniToView';
+import { WiredActionMoveFurniView } from './WiredActionMoveFurniView';
+import { WiredActionMuteUserView } from './WiredActionMuteUserView';
+import { WiredActionResetView } from './WiredActionResetView';
+import { WiredActionSetFurniStateToView } from './WiredActionSetFurniStateToView';
+import { WiredActionTeleportView } from './WiredActionTeleportView';
+import { WiredActionToggleFurniStateView } from './WiredActionToggleFurniStateView';
+
+export const WiredActionLayoutView = (code: number) =>
+{
+ switch(code)
+ {
+ case WiredActionLayoutCode.BOT_CHANGE_FIGURE:
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
new file mode 100644
index 0000000000..0b6d78155e
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionMoveFurniToView.tsx
@@ -0,0 +1,76 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+const directionOptions: { value: number, icon: string }[] = [
+ {
+ value: 0,
+ icon: 'ne'
+ },
+ {
+ value: 2,
+ icon: 'se'
+ },
+ {
+ value: 4,
+ icon: 'sw'
+ },
+ {
+ value: 6,
+ icon: 'nw'
+ }
+];
+
+export const WiredActionMoveFurniToView: FC<{}> = props =>
+{
+ const [ spacing, setSpacing ] = useState(-1);
+ const [ movement, setMovement ] = useState(-1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ movement, spacing ]);
+
+ useEffect(() =>
+ {
+ if(trigger.intData.length >= 2)
+ {
+ setSpacing(trigger.intData[1]);
+ setMovement(trigger.intData[0]);
+ }
+ else
+ {
+ setSpacing(-1);
+ setMovement(-1);
+ }
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionMoveFurniView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
new file mode 100644
index 0000000000..1a7c0edf72
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionMoveFurniView.tsx
@@ -0,0 +1,100 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+const directionOptions: { value: number, icon: string }[] = [
+ {
+ value: 4,
+ icon: 'ne'
+ },
+ {
+ value: 5,
+ icon: 'se'
+ },
+ {
+ value: 6,
+ icon: 'sw'
+ },
+ {
+ value: 7,
+ icon: 'nw'
+ },
+ {
+ value: 2,
+ icon: 'mv-2'
+ },
+ {
+ value: 3,
+ icon: 'mv-3'
+ },
+ {
+ value: 1,
+ icon: 'mv-1'
+ }
+];
+
+const rotationOptions: number[] = [ 0, 1, 2, 3 ];
+
+export const WiredActionMoveFurniView: FC<{}> = props =>
+{
+ const [ movement, setMovement ] = useState(-1);
+ const [ rotation, setRotation ] = useState(-1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ movement, rotation ]);
+
+ useEffect(() =>
+ {
+ if(trigger.intData.length >= 2)
+ {
+ setMovement(trigger.intData[0]);
+ setRotation(trigger.intData[1]);
+ }
+ else
+ {
+ setMovement(-1);
+ setRotation(-1);
+ }
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionMuteUserView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionMuteUserView.tsx
new file mode 100644
index 0000000000..a5e2a3df51
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionMuteUserView.tsx
@@ -0,0 +1,44 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { GetConfigurationValue, LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionMuteUserView: FC<{}> = props =>
+{
+ const [ time, setTime ] = useState(-1);
+ const [ message, setMessage ] = useState('');
+ const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
+
+ const save = () =>
+ {
+ setIntParams([ time ]);
+ setStringParam(message);
+ };
+
+ useEffect(() =>
+ {
+ setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ setMessage(trigger.stringData);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionResetView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionResetView.tsx
new file mode 100644
index 0000000000..eed03e3ac2
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionResetView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionResetView: FC<{}> = props =>
+{
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionTeleportView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionTeleportView.tsx
new file mode 100644
index 0000000000..04ef42de8c
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionTeleportView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredActionBaseView } from './WiredActionBaseView';
+
+export const WiredActionTeleportView: FC<{}> = props =>
+{
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsGroupMemberView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsGroupMemberView.tsx
new file mode 100644
index 0000000000..0f425f3529
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsGroupMemberView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionActorIsGroupMemberView: FC<{}> = props =>
+{
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
new file mode 100644
index 0000000000..5a46f6448e
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsWearingBadgeView.tsx
@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionActorIsWearingBadgeView: FC<{}> = props =>
+{
+ const [ badge, setBadge ] = useState('');
+ const { trigger = null, setStringParam = null } = useWired();
+
+ const save = () => setStringParam(badge);
+
+ useEffect(() =>
+ {
+ setBadge(trigger.stringData);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
new file mode 100644
index 0000000000..42188cc078
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionActorIsWearingEffectView.tsx
@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionActorIsWearingEffectView: FC<{}> = props =>
+{
+ const [ effect, setEffect ] = useState(-1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ effect ]);
+
+ useEffect(() =>
+ {
+ setEffect(trigger?.intData[0] ?? 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionBaseView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionBaseView.tsx
new file mode 100644
index 0000000000..5782942cb3
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionBaseView.tsx
@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredBaseView } from '../WiredBaseView';
+
+export interface WiredConditionBaseViewProps
+{
+ hasSpecialInput: boolean;
+ requiresFurni: number;
+ save: () => void;
+}
+
+export const WiredConditionBaseView: FC> = props =>
+{
+ const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
+
+ const onSave = () => (save && save());
+
+ return (
+
+ { children }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
new file mode 100644
index 0000000000..8eedbf3ba3
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionDateRangeView.tsx
@@ -0,0 +1,59 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredDateToString, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionDateRangeView: FC<{}> = props =>
+{
+ const [ startDate, setStartDate ] = useState('');
+ const [ endDate, setEndDate ] = useState('');
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () =>
+ {
+ let startDateMili = 0;
+ let endDateMili = 0;
+
+ const startDateInstance = new Date(startDate);
+ const endDateInstance = new Date(endDate);
+
+ if(startDateInstance && endDateInstance)
+ {
+ startDateMili = startDateInstance.getTime() / 1000;
+ endDateMili = endDateInstance.getTime() / 1000;
+ }
+
+ setIntParams([ startDateMili, endDateMili ]);
+ };
+
+ useEffect(() =>
+ {
+ if(trigger.intData.length >= 2)
+ {
+ let startDate = new Date();
+ let endDate = new Date();
+
+ if(trigger.intData[0] > 0) startDate = new Date((trigger.intData[0] * 1000));
+
+ if(trigger.intData[1] > 0) endDate = new Date((trigger.intData[1] * 1000));
+
+ setStartDate(WiredDateToString(startDate));
+ setEndDate(WiredDateToString(endDate));
+ }
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniHasAvatarOnView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniHasAvatarOnView.tsx
new file mode 100644
index 0000000000..5575e13e98
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniHasAvatarOnView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionFurniHasAvatarOnView: FC<{}> = props =>
+{
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
new file mode 100644
index 0000000000..44c193595d
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniHasNotFurniOnView.tsx
@@ -0,0 +1,35 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionFurniHasNotFurniOnView: FC<{}> = props =>
+{
+ const [ requireAll, setRequireAll ] = useState(-1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ requireAll ]);
+
+ useEffect(() =>
+ {
+ setRequireAll((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx
new file mode 100644
index 0000000000..5cda9f79c4
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionFurniIsOfTypeView: FC<{}> = props =>
+{
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionLayoutView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionLayoutView.tsx
new file mode 100644
index 0000000000..a1a88c2a95
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionLayoutView.tsx
@@ -0,0 +1,64 @@
+import { WiredConditionlayout } from '../../../../api';
+import { WiredConditionActorHasHandItemView } from './WiredConditionActorHasHandItem';
+import { WiredConditionActorIsGroupMemberView } from './WiredConditionActorIsGroupMemberView';
+import { WiredConditionActorIsOnFurniView } from './WiredConditionActorIsOnFurniView';
+import { WiredConditionActorIsTeamMemberView } from './WiredConditionActorIsTeamMemberView';
+import { WiredConditionActorIsWearingBadgeView } from './WiredConditionActorIsWearingBadgeView';
+import { WiredConditionActorIsWearingEffectView } from './WiredConditionActorIsWearingEffectView';
+import { WiredConditionDateRangeView } from './WiredConditionDateRangeView';
+import { WiredConditionFurniHasAvatarOnView } from './WiredConditionFurniHasAvatarOnView';
+import { WiredConditionFurniHasFurniOnView } from './WiredConditionFurniHasFurniOnView';
+import { WiredConditionFurniHasNotFurniOnView } from './WiredConditionFurniHasNotFurniOnView';
+import { WiredConditionFurniIsOfTypeView } from './WiredConditionFurniIsOfTypeView';
+import { WiredConditionFurniMatchesSnapshotView } from './WiredConditionFurniMatchesSnapshotView';
+import { WiredConditionTimeElapsedLessView } from './WiredConditionTimeElapsedLessView';
+import { WiredConditionTimeElapsedMoreView } from './WiredConditionTimeElapsedMoreView';
+import { WiredConditionUserCountInRoomView } from './WiredConditionUserCountInRoomView';
+
+export const WiredConditionLayoutView = (code: number) =>
+{
+ switch(code)
+ {
+ case WiredConditionlayout.ACTOR_HAS_HANDITEM:
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
new file mode 100644
index 0000000000..a31efdb986
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionTimeElapsedMoreView.tsx
@@ -0,0 +1,33 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionTimeElapsedMoreView: FC<{}> = props =>
+{
+ const [ time, setTime ] = useState(-1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ time ]);
+
+ useEffect(() =>
+ {
+ setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
new file mode 100644
index 0000000000..d6557213f0
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/conditions/WiredConditionUserCountInRoomView.tsx
@@ -0,0 +1,52 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredConditionBaseView } from './WiredConditionBaseView';
+
+export const WiredConditionUserCountInRoomView: FC<{}> = props =>
+{
+ const [ min, setMin ] = useState(1);
+ const [ max, setMax ] = useState(0);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ min, max ]);
+
+ useEffect(() =>
+ {
+ if(trigger.intData.length >= 2)
+ {
+ setMin(trigger.intData[0]);
+ setMax(trigger.intData[1]);
+ }
+ else
+ {
+ setMin(1);
+ setMax(0);
+ }
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
new file mode 100644
index 0000000000..2d948a4b52
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarEnterRoomView.tsx
@@ -0,0 +1,39 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerAvatarEnterRoomView: FC<{}> = props =>
+{
+ const [ username, setUsername ] = useState('');
+ const [ avatarMode, setAvatarMode ] = useState(0);
+ const { trigger = null, setStringParam = null } = useWired();
+
+ const save = () => setStringParam((avatarMode === 1) ? username : '');
+
+ useEffect(() =>
+ {
+ setUsername(trigger.stringData);
+ setAvatarMode(trigger.stringData ? 1 : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
new file mode 100644
index 0000000000..e2d9dd35c8
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarSaysSomethingView.tsx
@@ -0,0 +1,46 @@
+import { GetSessionDataManager } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerAvatarSaysSomethingView: FC<{}> = props =>
+{
+ const [ message, setMessage ] = useState('');
+ const [ triggererAvatar, setTriggererAvatar ] = useState(-1);
+ const { trigger = null, setStringParam = null, setIntParams = null } = useWired();
+
+ const save = () =>
+ {
+ setStringParam(message);
+ setIntParams([ triggererAvatar ]);
+ };
+
+ useEffect(() =>
+ {
+ setMessage(trigger.stringData);
+ setTriggererAvatar((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarWalksOffFurniView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarWalksOffFurniView.tsx
new file mode 100644
index 0000000000..fc6c198480
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerAvatarWalksOffFurniView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerAvatarWalksOffFurniView: FC<{}> = props =>
+{
+ return > = props =>
+{
+ const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null } = props;
+
+ const onSave = () => (save && save());
+
+ return (
+
+ { children }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx
new file mode 100644
index 0000000000..6aa3fde546
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerBotReachedAvatarView.tsx
@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerBotReachedAvatarView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const { trigger = null, setStringParam = null } = useWired();
+
+ const save = () => setStringParam(botName);
+
+ useEffect(() =>
+ {
+ setBotName(trigger.stringData);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx
new file mode 100644
index 0000000000..0034603a11
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerBotReachedStuffView.tsx
@@ -0,0 +1,28 @@
+import { FC, useEffect, useState } from 'react';
+import { LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { NitroInput } from '../../../../layout';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerBotReachedStuffView: FC<{}> = props =>
+{
+ const [ botName, setBotName ] = useState('');
+ const { trigger = null, setStringParam = null } = useWired();
+
+ const save = () => setStringParam(botName);
+
+ useEffect(() =>
+ {
+ setBotName(trigger.stringData);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerCollisionView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerCollisionView.tsx
new file mode 100644
index 0000000000..d7efc34074
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerCollisionView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerCollisionView: FC<{}> = props =>
+{
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
new file mode 100644
index 0000000000..b20e7ed708
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyLongView.tsx
@@ -0,0 +1,33 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { FriendlyTime, LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggeExecutePeriodicallyLongView: FC<{}> = props =>
+{
+ const [ time, setTime ] = useState(1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ time ]);
+
+ useEffect(() =>
+ {
+ setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
new file mode 100644
index 0000000000..35471ce79d
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerExecutePeriodicallyView.tsx
@@ -0,0 +1,33 @@
+import { FC, useEffect, useState } from 'react';
+import ReactSlider from 'react-slider';
+import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggeExecutePeriodicallyView: FC<{}> = props =>
+{
+ const [ time, setTime ] = useState(1);
+ const { trigger = null, setIntParams = null } = useWired();
+
+ const save = () => setIntParams([ time ]);
+
+ useEffect(() =>
+ {
+ setTime((trigger.intData.length > 0) ? trigger.intData[0] : 0);
+ }, [ trigger ]);
+
+ return (
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerGameEndsView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerGameEndsView.tsx
new file mode 100644
index 0000000000..476ed70335
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerGameEndsView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerGameEndsView: FC<{}> = props =>
+{
+ return
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerToggleFurniView.tsx b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerToggleFurniView.tsx
new file mode 100644
index 0000000000..474848174f
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/triggers/WiredTriggerToggleFurniView.tsx
@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { WiredFurniType } from '../../../../api';
+import { WiredTriggerBaseView } from './WiredTriggerBaseView';
+
+export const WiredTriggerToggleFurniView: FC<{}> = props =>
+{
+ return */
+ line-height: 1.5;
+ border-radius: 0.2rem;
+ min-height: calc(1.5em + 0.5rem + 2px); /* Matches your inline style */
+}
+
+/* Optional: Styling for radio/checkbox inputs */
+.form-check-input {
+ /* No font-size here since it’s an input’s appearance, not text */
+ margin-top: 0.25rem; /* Align with small text */
+}
+
+/* If you have
+
+ );
+};
diff --git a/Coolui v3 test/src/components/user-profile/GroupsContainerView.tsx b/Coolui v3 test/src/components/user-profile/GroupsContainerView.tsx
new file mode 100644
index 0000000000..3ffd78745f
--- /dev/null
+++ b/Coolui v3 test/src/components/user-profile/GroupsContainerView.tsx
@@ -0,0 +1,90 @@
+import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer';
+import { FC, useEffect, useState } from 'react';
+import { SendMessageComposer, ToggleFavoriteGroup } from '../../api';
+import { AutoGrid, Column, Grid, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../common';
+import { useMessageEvent } from '../../hooks';
+import { GroupInformationView } from '../groups/views/GroupInformationView';
+
+interface GroupsContainerViewProps extends GridProps
+{
+ itsMe: boolean;
+ groups: HabboGroupEntryData[];
+ onLeaveGroup: () => void;
+}
+
+export const GroupsContainerView: FC+ { LocalizeText('extendedprofile.friends.count') } { friendsCount } +
+
+
+ { LocalizeText('extendedprofile.relstatus') }
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+ <>
+
+
+
+
+ (relationshipInfo && (relationshipInfo.randomFriendId >= 1) && GetUserProfile(relationshipInfo.randomFriendId)) }> + { (!relationshipInfo || (relationshipInfo.friendCount === 0)) && + LocalizeText('extendedprofile.add.friends') } + { (relationshipInfo && (relationshipInfo.friendCount >= 1)) && + relationshipInfo.randomFriendName } +
+ { (relationshipInfo && (relationshipInfo.friendCount >= 1)) && +
+
}
+ + { (!relationshipInfo || (relationshipInfo.friendCount === 0)) && + LocalizeText('extendedprofile.no.friends.in.this.category') } + { (relationshipInfo && (relationshipInfo.friendCount > 1)) && + LocalizeText(`extendedprofile.relstatus.others.${ relationshipName }`, [ 'count' ], [ (relationshipInfo.friendCount - 1).toString() ]) } + +
+
+
+ );
+};
diff --git a/Coolui v3 test/src/components/user-profile/UserProfileView.tsx b/Coolui v3 test/src/components/user-profile/UserProfileView.tsx
new file mode 100644
index 0000000000..f57612be77
--- /dev/null
+++ b/Coolui v3 test/src/components/user-profile/UserProfileView.tsx
@@ -0,0 +1,125 @@
+import { CreateLinkEvent, ExtendedProfileChangedMessageEvent, GetSessionDataManager, RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectType, UserCurrentBadgesComposer, UserCurrentBadgesEvent, UserProfileEvent, UserProfileParser, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { GetRoomSession, GetUserProfile, LocalizeText, SendMessageComposer } from '../../api';
+import { Flex, Grid, LayoutBadgeImageView, Text } from '../../common';
+import { useMessageEvent, useNitroEvent } from '../../hooks';
+import { NitroCard } from '../../layout';
+import { FriendsContainerView } from './FriendsContainerView';
+import { GroupsContainerView } from './GroupsContainerView';
+import { UserContainerView } from './UserContainerView';
+
+export const UserProfileView: FC<{}> = props =>
+{
+ const [ userProfile, setUserProfile ] = useState
+
+
+
+
+
+ { userProfile.username }
+{ userProfile.motto }
+
+
+ + { LocalizeText('extendedprofile.created') } { userProfile.registration } +
++ { LocalizeText('extendedprofile.last.login') } { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) } +
++ { LocalizeText('extendedprofile.achievementscore') } { userProfile.achievementPoints } +
+
+ { userProfile.isOnline &&
+ }
+ { !userProfile.isOnline &&
+ }
+
+
+ { canSendFriendRequest &&
+ { LocalizeText('extendedprofile.addasafriend') } }
+ { !canSendFriendRequest &&
+ <>
+
+ { isOwnProfile &&
+
+ { LocalizeText('extendedprofile.me') }
} + { userProfile.isMyFriend && +{ LocalizeText('extendedprofile.friend') }
} + { (requestSent || userProfile.requestSent) && +{ LocalizeText('extendedprofile.friendrequestsent') }
} + } +
+
+
+ { userBadges && (userBadges.length > 0) && userBadges.map((badge, index) =>
+
+ { userRelationships &&
+
+
+
+
+ processAction('oldchat', event.target.checked) } />
+ { LocalizeText('memenu.settings.chat.prefer.old.chat') }
+
+
+ processAction('room_invites', event.target.checked) } />
+ { LocalizeText('memenu.settings.other.ignore.room.invites') }
+
+
+ processAction('camera_follow', event.target.checked) } />
+ { LocalizeText('memenu.settings.other.disable.room.camera.follow') }
+
+
+ setCatalogPlaceMultipleObjects(event.target.checked) } />
+ { LocalizeText('memenu.settings.other.place.multiple.objects') }
+
+
+ setCatalogSkipPurchaseConfirmation(event.target.checked) } />
+ { LocalizeText('memenu.settings.other.skip.purchase.confirmation') }
+
+
+ { LocalizeText('widget.memenu.settings.volume') }
+
+
+ { LocalizeText('widget.memenu.settings.volume.ui') }
+
+
+ { (userSettings.volumeSystem === 0) && = 50) && 'text-muted', 'fa-icon') } /> }
+ { (userSettings.volumeSystem > 0) && = 50) && 'text-muted', 'fa-icon') } /> }
+ processAction('system_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') } />
+
+
+ { LocalizeText('widget.memenu.settings.volume.furni') }
+
+
+ { (userSettings.volumeFurni === 0) && = 50) && 'text-muted', 'fa-icon') } /> }
+ { (userSettings.volumeFurni > 0) && = 50) && 'text-muted', 'fa-icon') } /> }
+ processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') } />
+
+
+ { LocalizeText('widget.memenu.settings.volume.trax') }
+
+
+ { (userSettings.volumeTrax === 0) && = 50) && 'text-muted', 'fa-icon') } /> }
+ { (userSettings.volumeTrax > 0) && = 50) && 'text-muted', 'fa-icon') } /> }
+ processAction('trax_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') } />
+
+
+ { wiredDescription }
+
+ { !!children &&
+
+ { wiredName }
+
+ } + { children } + { (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) && + <> +
+
+
+
+
+
+ { LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }
+ { LocalizeText('wiredfurni.pickfurnis.desc') }
+
+ );
+};
diff --git a/Coolui v3 test/src/components/wired/views/actions/WiredActionBaseView.tsx b/Coolui v3 test/src/components/wired/views/actions/WiredActionBaseView.tsx
new file mode 100644
index 0000000000..aef1cdbaab
--- /dev/null
+++ b/Coolui v3 test/src/components/wired/views/actions/WiredActionBaseView.tsx
@@ -0,0 +1,41 @@
+import { WiredActionDefinition } from '@nitrots/nitro-renderer';
+import { FC, PropsWithChildren, useEffect } from 'react';
+import ReactSlider from 'react-slider';
+import { GetWiredTimeLocale, LocalizeText, WiredFurniType } from '../../../../api';
+import { Text } from '../../../../common';
+import { useWired } from '../../../../hooks';
+import { WiredBaseView } from '../WiredBaseView';
+
+export interface WiredActionBaseViewProps
+{
+ hasSpecialInput: boolean;
+ requiresFurni: number;
+ save: () => void;
+}
+
+export const WiredActionBaseView: FC} +
+ { LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(actionDelay) ]) }
+ setActionDelay(event) } />
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+
+
+ setFollowMode(1) } />
+ { LocalizeText('wiredfurni.params.start.following') }
+
+
+ setFollowMode(0) } />
+ { LocalizeText('wiredfurni.params.stop.following') }
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.handitem') }
+
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.message') }
+ ('wired.action.bot.talk.to.avatar.max.length', 64) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+
+
+
+
+ setTalkMode(0) } />
+ { LocalizeText('wiredfurni.params.talk') }
+
+
+ setTalkMode(1) } />
+ { LocalizeText('wiredfurni.params.whisper') }
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.message') }
+ ('wired.action.bot.talk.max.length', 64) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+
+
+
+
+ setTalkMode(0) } />
+ { LocalizeText('wiredfurni.params.talk') }
+
+
+ setTalkMode(1) } />
+ { LocalizeText('wiredfurni.params.shout') }
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.message') }
+ ('wired.action.chat.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+
+
+ setLimitEnabled(event.target.checked) } />
+ { LocalizeText('wiredfurni.params.prizelimit', [ 'amount' ], [ limitEnabled ? rewardsLimit.toString() : '' ]) }
+
+ { !limitEnabled &&
+ +
+ How often can a user be rewarded?
+
+
+
+ { (rewardTime > 0) && setLimitationInterval(Number(event.target.value)) } /> }
+
+ +
+ setUniqueRewards(e.target.checked) } />
+ Unique rewards
+
+ +
+ Rewards
+
+
+
+ { rewards && rewards.map((reward, index) =>
+ {
+ return (
+
+
+ updateReward(index, reward.isBadge, e.target.value, reward.probability) } />
+ updateReward(index, reward.isBadge, reward.itemCode, Number(e.target.value)) } />
+ { (index > 0) &&
+ }
+
+ );
+ }) }
+
+ updateReward(index, e.target.checked, reward.itemCode, reward.probability) } />
+ Badge?
+
+
+ { LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }
+ setPoints(event) } />
+
+
+ { LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }
+ setTime(event) } />
+
+
+ { LocalizeText('wiredfurni.params.team') }
+ { [ 1, 2, 3, 4 ].map(value =>
+ {
+ return (
+
+
+ setSelectedTeam(value) } />
+ { LocalizeText('wiredfurni.params.team.' + value) }
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.setpoints', [ 'points' ], [ points.toString() ]) }
+ setPoints(event) } />
+
+
+ { LocalizeText('wiredfurni.params.settimesingame', [ 'times' ], [ time.toString() ]) }
+ setTime(event) } />
+
+
+ { LocalizeText('wiredfurni.params.team') }
+ { [ 1, 2, 3, 4 ].map(team =>
+ {
+ return (
+
+
+ setSelectedTeam(team) } />
+ { LocalizeText(`wiredfurni.params.team.${ team }`) }
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.message') }
+ ('wired.action.kick.from.room.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.startdir') }
+
+
+ { directionOptions.map(option =>
+ {
+ return (
+
+
+ setMovement(option.value) } />
+
+
+
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.turn') }
+ { rotationOptions.map(option =>
+ {
+ return (
+
+
+ setRotation(option) } />
+ { LocalizeText(`wiredfurni.params.turn.${ option }`) }
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.emptytiles', [ 'tiles' ], [ spacing.toString() ]) }
+ setSpacing(event) } />
+
+
+ { LocalizeText('wiredfurni.params.startdir') }
+
+
+ { directionOptions.map(value =>
+ {
+ return (
+
+
+ setMovement(value.value) } />
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.movefurni') }
+
+
+ setMovement(0) } />
+ { LocalizeText('wiredfurni.params.movefurni.0') }
+
+
+ { directionOptions.map(option =>
+ {
+ return (
+
+
+ setMovement(option.value) } />
+
+
+ );
+ }) }
+
+
+ { LocalizeText('wiredfurni.params.rotatefurni') }
+ { rotationOptions.map(option =>
+ {
+ return (
+
+
+ setRotation(option) } />
+
+ { [ 1, 2 ].includes(option) && }
+ { LocalizeText(`wiredfurni.params.rotatefurni.${ option }`) }
+
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.length.minutes', [ 'minutes' ], [ time.toString() ]) }
+ setTime(event) } />
+
+
+ { LocalizeText('wiredfurni.params.message') }
+ ('wired.action.mute.user.max.length', 100) } type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.conditions') }
+
+
+ setStateFlag(event.target.checked ? 1 : 0) } />
+ { LocalizeText('wiredfurni.params.condition.state') }
+
+
+ setDirectionFlag(event.target.checked ? 1 : 0) } />
+ { LocalizeText('wiredfurni.params.condition.direction') }
+
+
+ setPositionFlag(event.target.checked ? 1 : 0) } />
+ { LocalizeText('wiredfurni.params.condition.position') }
+
+
+ { LocalizeText('wiredfurni.params.handitem') }
+
+
+
+ { LocalizeText('wiredfurni.params.team') }
+ { teamIds.map(value =>
+ {
+ return (
+
+
+ setSelectedTeam(value) } />
+ { LocalizeText(`wiredfurni.params.team.${ value }`) }
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.badgecode') }
+ setBadge(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.tooltip.effectid') }
+ setEffect(parseInt(event.target.value)) } />
+
+
+ { LocalizeText('wiredfurni.params.startdate') }
+ setStartDate(e.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.enddate') }
+ setEndDate(e.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.requireall') }
+ { [ 0, 1 ].map(value =>
+ {
+ return (
+
+
+ setRequireAll(value) } />
+ { LocalizeText('wiredfurni.params.requireall.' + value) }
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.not_requireall') }
+ { [ 0, 1 ].map(value =>
+ {
+ return (
+
+
+ setRequireAll(value) } />
+ { LocalizeText(`wiredfurni.params.not_requireall.${ value }`) }
+
+ );
+ }) }
+
+ { LocalizeText('wiredfurni.params.conditions') }
+
+
+ setStateFlag(event.target.checked ? 1 : 0) } />
+ { LocalizeText('wiredfurni.params.condition.state') }
+
+
+ setDirectionFlag(event.target.checked ? 1 : 0) } />
+ { LocalizeText('wiredfurni.params.condition.direction') }
+
+
+ setPositionFlag(event.target.checked ? 1 : 0) } />
+ { LocalizeText('wiredfurni.params.condition.position') }
+
+
+ { LocalizeText('wiredfurni.params.allowbefore', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }
+ setTime(event) } />
+
+
+ { LocalizeText('wiredfurni.params.allowafter', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }
+ setTime(event) } />
+
+
+ { LocalizeText('wiredfurni.params.usercountmin', [ 'value' ], [ min.toString() ]) }
+ setMin(event) } />
+
+
+ { LocalizeText('wiredfurni.params.usercountmax', [ 'value' ], [ max.toString() ]) }
+ setMax(event) } />
+
+
+ { LocalizeText('wiredfurni.params.picktriggerer') }
+ setUsername(event.target.value) } /> }
+
+
+ setAvatarMode(0) } />
+ { LocalizeText('wiredfurni.params.anyavatar') }
+
+
+ setAvatarMode(1) } />
+ { LocalizeText('wiredfurni.params.certainavatar') }
+
+ { (avatarMode === 1) &&
+
+ { LocalizeText('wiredfurni.params.whatissaid') }
+ setMessage(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.picktriggerer') }
+
+
+ setTriggererAvatar(0) } />
+ { LocalizeText('wiredfurni.params.anyavatar') }
+
+
+ setTriggererAvatar(1) } />
+ { GetSessionDataManager().userName }
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.bot.name') }
+ setBotName(event.target.value) } />
+
+
+ { LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }
+ setTime(event) } />
+
+
+ { LocalizeText('wiredfurni.params.setlongtime', [ 'time' ], [ FriendlyTime.format(time * 5).toString() ]) }
+ setTime(event) } />
+
+
+ { LocalizeText('wiredfurni.params.settime', [ 'seconds' ], [ GetWiredTimeLocale(time) ]) }
+ setTime(event) } />
+
+
+ { LocalizeText('wiredfurni.params.setscore', [ 'points' ], [ points.toString() ]) }
+ setPoints(event) } />
+
+