New panel for pet training

src/components/room/widgets/RoomWidgetsView.tsx

@@ -10,6 +10,7 @@ import { UserChooserWidgetView } from './choosers/UserChooserWidgetView';
 import { DoorbellWidgetView } from './doorbell/DoorbellWidgetView';
 import { FriendRequestWidgetView } from './friend-request/FriendRequestWidgetView';
 import { FurnitureWidgetsView } from './furniture/FurnitureWidgetsView';
+import { PetTrainingPanelWidgetView } from './pet-training/PetTrainingPanelWidgetView';
 import { RoomThumbnailWidgetView } from './room-thumbnail/RoomThumbnailWidgetView';
 import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView';
 import { WordQuizWidgetView } from './word-quiz/WordQuizWidgetView';
@@ -75,7 +76,7 @@ export const RoomWidgetsView: FC<{}> = props =>
             }
 
             if(!updateEvent) return;
-            
+
             let dispatchEvent = true;
 
             if(RoomId.isRoomPreviewerId(updateEvent.roomId)) return;
@@ -163,6 +164,7 @@ export const RoomWidgetsView: FC<{}> = props =>
             <UserChooserWidgetView />
             <WordQuizWidgetView />
             <FriendRequestWidgetView />
+            <PetTrainingPanelWidgetView />
         </>
     );
 }

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx

@@ -28,7 +28,7 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
     useEffect(() =>
     {
         if((avatarInfo.petType !== PetType.MONSTERPLANT) || avatarInfo.dead) return;
-        
+
         const interval = setInterval(() =>
         {
             setRemainingGrowTime(prevValue => (prevValue - 1));
@@ -57,7 +57,7 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
                 CreateLinkEvent('catalog/open/' + GetConfiguration('catalog.links')['pets.buy_saddle']);
                 break;
             case 'train':
-                // not coded
+                roomSession?.requestPetCommands(avatarInfo.id);
                 break;
             case 'treat':
                 SendMessageComposer(new PetRespectComposer(avatarInfo.id));

src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnPetView.tsx

@@ -60,7 +60,7 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                     SendMessageComposer(new RoomUnitGiveHandItemPetComposer(avatarInfo.id));
                     break;
                 case 'train':
-                //this.widget._Str_23877();
+                    roomSession.requestPetCommands(avatarInfo.id);
                     break;
                 case 'pick_up':
                     roomSession.pickupPet(avatarInfo.id);

src/components/room/widgets/pet-training/PetTrainingPanelWidgetView.tsx

@@ -0,0 +1,56 @@
+import { DesktopViewEvent, PetTrainingPanelMessageEvent } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { AvatarInfoPet, LocalizeText } from '../../../../api';
+import { Button, Column, Flex, Grid, LayoutPetImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { useAvatarInfoWidget, useMessageEvent } from '../../../../hooks';
+
+export const PetTrainingPanelWidgetView: FC<{}> = props =>
+{
+    const { avatarInfo = null, petTrainInformation = null, setTrainPetInformation = null } = useAvatarInfoWidget();
+
+    useMessageEvent<DesktopViewEvent>(DesktopViewEvent, event =>
+    {
+        setTrainPetInformation(null);
+    });
+
+    useMessageEvent<PetTrainingPanelMessageEvent>(PetTrainingPanelMessageEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if (!parser) return;
+
+        setTrainPetInformation(parser);
+    });
+
+    const processPetAction = (petId: number, type: string) =>
+    {
+        if (!petId || !type) return;
+
+        // packet for pet actions
+    }
+
+    if(!petTrainInformation) return null;
+
+    return (
+        <NitroCardView uniqueKey="user-settings" className="user-settings-window no-resize" theme="primary-slim">
+            <NitroCardHeaderView headerText={ LocalizeText('widgets.pet.commands.title') } onCloseClick={ () => setTrainPetInformation(null) } />
+            <NitroCardContentView className="text-black">
+                <Flex alignItems="center" justifyContent="center" gap={ 2 }>
+                    <Grid columnCount={ 2 }>
+                        <Column fullWidth overflow="hidden" className="body-image pet p-1">
+                            <LayoutPetImageView figure={ (avatarInfo as AvatarInfoPet)?.petFigure } posture={ (avatarInfo as AvatarInfoPet)?.posture } direction={ 2 } />
+                        </Column>
+                        <Text variant="white" small wrap>{ (avatarInfo as AvatarInfoPet)?.name }</Text>
+                    </Grid>
+                </Flex>
+                <Grid columnCount={ 2 }>
+                    {
+                        (petTrainInformation.commands && petTrainInformation.commands.length > 0) && petTrainInformation.commands.map((command, index) =>
+                            <Button key={ index } disabled={ !petTrainInformation.enabledCommands.includes(command) } onClick={ () => processPetAction(petTrainInformation.petId, LocalizeText('pet.command.' + command)) }>{ LocalizeText('pet.command.' + command) }</Button>
+                        )
+                    }
+                </Grid>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+};

src/hooks/rooms/widgets/useAvatarInfoWidget.ts

@@ -1,4 +1,4 @@
-import { RoomEngineObjectEvent, RoomEngineUseProductEvent, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionPetStatusUpdateEvent, RoomSessionUserDataUpdateEvent } from '@nitrots/nitro-renderer';
+import { PetTrainingMessageParser, RoomEngineObjectEvent, RoomEngineUseProductEvent, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionPetStatusUpdateEvent, RoomSessionUserDataUpdateEvent } from '@nitrots/nitro-renderer';
 import { useEffect, useState } from 'react';
 import { AvatarInfoFurni, AvatarInfoName, AvatarInfoPet, AvatarInfoRentableBot, AvatarInfoUser, AvatarInfoUtilities, CanManipulateFurniture, FurniCategory, GetRoomEngine, GetSessionDataManager, IAvatarInfo, IsOwnerOfFurniture, RoomWidgetUpdateRoomObjectEvent, UseProductItem } from '../../../api';
 import { useRoomEngineEvent, useRoomSessionManagerEvent, useUiEvent } from '../../events';
@@ -14,6 +14,7 @@ const useAvatarInfoWidgetState = () =>
     const [ nameBubbles, setNameBubbles ] = useState<AvatarInfoName[]>([]);
     const [ productBubbles, setProductBubbles ] = useState<UseProductItem[]>([]);
     const [ confirmingProduct, setConfirmingProduct ] = useState<UseProductItem>(null);
+    const [ petTrainInformation, setTrainPetInformation ] = useState<PetTrainingMessageParser>(null);
     const [ pendingPetId, setPendingPetId ] = useState<number>(-1);
     const [ isDecorating, setIsDecorating ] = useState(false);
     const { friends = [] } = useFriends();
@@ -65,6 +66,7 @@ const useAvatarInfoWidgetState = () =>
     const getObjectInfo = (objectId: number, category: number) =>
     {
         let info: IAvatarInfo = null;
+        setTrainPetInformation(null);
 
         switch(category)
         {
@@ -272,6 +274,7 @@ const useAvatarInfoWidgetState = () =>
     useObjectDeselectedEvent(event =>
     {
         setAvatarInfo(null);
+        setTrainPetInformation(null);
         setProductBubbles([]);
     });
 
@@ -349,7 +352,7 @@ const useAvatarInfoWidgetState = () =>
         roomSession.isDecorating = isDecorating;
     }, [ roomSession, isDecorating ]);
 
-    return { avatarInfo, setAvatarInfo, activeNameBubble, setActiveNameBubble, nameBubbles, productBubbles, confirmingProduct, isDecorating, setIsDecorating, removeNameBubble, removeProductBubble, updateConfirmingProduct, getObjectName };
+    return { avatarInfo, setAvatarInfo, activeNameBubble, setActiveNameBubble, nameBubbles, productBubbles, confirmingProduct, petTrainInformation, setTrainPetInformation, isDecorating, setIsDecorating, removeNameBubble, removeProductBubble, updateConfirmingProduct, getObjectName };
 }
 
 export const useAvatarInfoWidget = useAvatarInfoWidgetState;