Fix pet training window

src/components/room/widgets/RoomWidgetsView.tsx

@@ -10,7 +10,6 @@ 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 { RoomFilterWordsWidgetView } from './room-filter-words/RoomFilterWordsWidgetView';
 import { RoomThumbnailWidgetView } from './room-thumbnail/RoomThumbnailWidgetView';
 import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView';
@@ -166,7 +165,6 @@ export const RoomWidgetsView: FC<{}> = props =>
             <UserChooserWidgetView />
             <WordQuizWidgetView />
             <FriendRequestWidgetView />
-            <PetTrainingPanelWidgetView />
         </>
     );
 }

src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx

@@ -1,26 +1,27 @@
-import { DesktopViewEvent, PetTrainingPanelMessageEvent } from '@nitrots/nitro-renderer';
+import { IRoomUserData, PetTrainingMessageParser, PetTrainingPanelMessageEvent } from '@nitrots/nitro-renderer';
-import { FC } from 'react';
+import { FC, useState } from 'react';
-import { AvatarInfoPet, LocalizeText } from '../../../../api';
+import { LocalizeText } from '../../../../api';
 import { Button, Column, Flex, Grid, LayoutPetImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
-import { useAvatarInfoWidget, useMessageEvent, useRoom, useSessionInfo } from '../../../../hooks';
+import { useMessageEvent, useRoom, useSessionInfo } from '../../../../hooks';
 
-export const PetTrainingPanelWidgetView: FC<{}> = props =>
+export const AvatarInfoPetTrainingPanelView: FC<{}> = props =>
 {
-    const { avatarInfo = null, petTrainInformation = null, setPetTrainInformation = null } = useAvatarInfoWidget();
+    const [ petData, setPetData ] = useState<IRoomUserData>(null);
+    const [ petTrainInformation, setPetTrainInformation ] = useState<PetTrainingMessageParser>(null);
     const { chatStyleId = 0 } = useSessionInfo();
     const { roomSession = null } = useRoom();
 
-    useMessageEvent<DesktopViewEvent>(DesktopViewEvent, event =>
-    {
-        setPetTrainInformation(null);
-    });
-
     useMessageEvent<PetTrainingPanelMessageEvent>(PetTrainingPanelMessageEvent, event =>
     {
         const parser = event.getParser();
 
         if (!parser) return;
 
+        const roomPetData = roomSession.userDataManager.getPetData(parser.petId);
+
+        if(!roomPetData) return;
+
+        setPetData(roomPetData);
         setPetTrainInformation(parser);
     });
 
@@ -31,7 +32,7 @@ export const PetTrainingPanelWidgetView: FC<{}> = props =>
         roomSession?.sendChatMessage(`${ petName } ${ commandName }`, chatStyleId);
     }
 
-    if(!petTrainInformation) return null;
+    if(!petData || !petTrainInformation) return null;
 
     return (
         <NitroCardView uniqueKey="user-settings" className="user-settings-window no-resize" theme="primary-slim">
@@ -40,15 +41,15 @@ export const PetTrainingPanelWidgetView: FC<{}> = props =>
                 <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 } />
+                            <LayoutPetImageView figure={ petData.figure } posture={ 'std' } direction={ 2 } />
                         </Column>
-                        <Text variant="black" small wrap>{ (avatarInfo as AvatarInfoPet)?.name }</Text>
+                        <Text variant="black" small wrap>{ petData.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((avatarInfo as AvatarInfoPet)?.name, LocalizeText(`pet.command.${ command }`)) }>{ LocalizeText(`pet.command.${ command }`) }</Button>
+                            <Button key={ index } disabled={ !petTrainInformation.enabledCommands.includes(command) } onClick={ () => processPetAction(petData.name, LocalizeText(`pet.command.${ command }`)) }>{ LocalizeText(`pet.command.${ command }`) }</Button>
                         )
                     }
                 </Grid>

src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx

@@ -3,6 +3,7 @@ import { FC, useState } from 'react';
 import { AvatarInfoFurni, AvatarInfoPet, AvatarInfoRentableBot, AvatarInfoUser, GetConfiguration, GetSessionDataManager, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api';
 import { Column } from '../../../../common';
 import { useAvatarInfoWidget, useRoom, useRoomEngineEvent, useRoomSessionManagerEvent, useUiEvent } from '../../../../hooks';
+import { AvatarInfoPetTrainingPanelView } from './AvatarInfoPetTrainingPanelView';
 import { AvatarInfoRentableBotChatView } from './AvatarInfoRentableBotChatView';
 import { AvatarInfoUseProductConfirmView } from './AvatarInfoUseProductConfirmView';
 import { AvatarInfoUseProductView } from './AvatarInfoUseProductView';
@@ -132,6 +133,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
             }) }
             { rentableBotChatEvent && <AvatarInfoRentableBotChatView chatEvent={ rentableBotChatEvent } onClose={ () => setRentableBotChatEvent(null) }/> }
             { confirmingProduct && <AvatarInfoUseProductConfirmView item={ confirmingProduct } onClose={ () => updateConfirmingProduct(null) } /> }
+            <AvatarInfoPetTrainingPanelView />
         </>
     )
 }

src/hooks/rooms/widgets/useAvatarInfoWidget.ts

@@ -1,4 +1,4 @@
-import { PetTrainingMessageParser, RoomEngineObjectEvent, RoomEngineUseProductEvent, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionPetStatusUpdateEvent, RoomSessionUserDataUpdateEvent } from '@nitrots/nitro-renderer';
+import { 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,7 +14,6 @@ const useAvatarInfoWidgetState = () =>
     const [ nameBubbles, setNameBubbles ] = useState<AvatarInfoName[]>([]);
     const [ productBubbles, setProductBubbles ] = useState<UseProductItem[]>([]);
     const [ confirmingProduct, setConfirmingProduct ] = useState<UseProductItem>(null);
-    const [ petTrainInformation, setPetTrainInformation ] = useState<PetTrainingMessageParser>(null);
     const [ pendingPetId, setPendingPetId ] = useState<number>(-1);
     const [ isDecorating, setIsDecorating ] = useState(false);
     const { friends = [] } = useFriends();
@@ -66,7 +65,6 @@ const useAvatarInfoWidgetState = () =>
     const getObjectInfo = (objectId: number, category: number) =>
     {
         let info: IAvatarInfo = null;
-        setPetTrainInformation(null);
 
         switch(category)
         {
@@ -274,7 +272,6 @@ const useAvatarInfoWidgetState = () =>
     useObjectDeselectedEvent(event =>
     {
         setAvatarInfo(null);
-        setPetTrainInformation(null);
         setProductBubbles([]);
     });
 
@@ -352,7 +349,7 @@ const useAvatarInfoWidgetState = () =>
         roomSession.isDecorating = isDecorating;
     }, [ roomSession, isDecorating ]);
 
-    return { avatarInfo, setAvatarInfo, activeNameBubble, setActiveNameBubble, nameBubbles, productBubbles, confirmingProduct, petTrainInformation, setPetTrainInformation, isDecorating, setIsDecorating, removeNameBubble, removeProductBubble, updateConfirmingProduct, getObjectName };
+    return { avatarInfo, setAvatarInfo, activeNameBubble, setActiveNameBubble, nameBubbles, productBubbles, confirmingProduct, isDecorating, setIsDecorating, removeNameBubble, removeProductBubble, updateConfirmingProduct, getObjectName };
 }
 
 export const useAvatarInfoWidget = useAvatarInfoWidgetState;