Merge branch 'added-buttons-animal-right-panel' into '@fix/fixes'

New buttons for animals in right panel (Issue #115)

See merge request nitro/nitro-react!73

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

@@ -1,7 +1,9 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC } from 'react';
+import { PetRespectComposer, PetType } from '@nitrots/nitro-renderer';
-import { AvatarInfoPet, LocalizeText } from '../../../../../api';
+import { FC, useEffect } from 'react';
-import { Base, Column, Flex, LayoutPetImageView, Text, UserProfileIconView } from '../../../../../common';
+import { AvatarInfoPet, CreateLinkEvent, GetConfiguration, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../../api';
+import { Base, Button, Column, Flex, LayoutPetImageView, Text, UserProfileIconView } from '../../../../../common';
+import { usePets, useRoom } from '../../../../../hooks';
 
 interface InfoStandWidgetPetViewProps
 {
@@ -12,10 +14,66 @@ interface InfoStandWidgetPetViewProps
 export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
 {
     const { avatarInfo = null, onClose = null } = props;
+    const { roomSession = null } = useRoom();
+    const { petRespect, changePetRespect } = usePets();
 
     if(!avatarInfo) return null;
 
+        useEffect(() =>
+    {
+        changePetRespect(avatarInfo.respectsPetLeft);
+
+    }, [ avatarInfo ]);
+
+    const processButtonAction = (action: string) =>
+    {
+        let hideMenu = true;
+
+        if (!action || action == '') return;
+
+        switch (action)
+        {
+            case 'respect':
+                let newRespectsLeftChange = 0;
+
+                changePetRespect(prevValue =>
+                {
+                    newRespectsLeftChange = (prevValue - 1);
+
+                    return newRespectsLeftChange;
+                });
+
+                GetSessionDataManager().givePetRespect(avatarInfo.id);
+                if(newRespectsLeftChange > 0) hideMenu = false;
+                break;
+            case 'buyfood':
+                CreateLinkEvent('catalog/open/' + GetConfiguration('catalog.links')['pets.buy_saddle']);
+                break;
+            case 'train':
+                // not coded
+                break;
+            case 'treat':
+                SendMessageComposer(new PetRespectComposer(avatarInfo.id));
+                break;
+            case 'compost':
+                roomSession?.compostPlant(avatarInfo.id);
+                break;
+            case 'pick_up':
+                roomSession?.pickupPet(avatarInfo.id);
+                break;
+        }
+
+        if(hideMenu) onClose();
+    }
+
+    useEffect(() =>
+    {
+        changePetRespect(avatarInfo.respectsPetLeft);
+
+    }, [ avatarInfo ]);
+
     return (
+        <Column gap={ 1 } alignItems="end">
             <Column className="nitro-infostand rounded">
                 <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
                     <Column gap={ 1 }>
@@ -65,7 +123,9 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
                         <hr className="m-0" />
                     </Column>
                     <Column gap={ 1 }>
+                        { avatarInfo.petType !== PetType.MONSTERPLANT &&
                             <Text variant="white" small wrap>{ LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }</Text>
+                        }
                         <Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
                         <hr className="m-0" />
                     </Column>
@@ -79,5 +139,38 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
                     </Column>
                 </Column>
             </Column>
+            <Flex gap={ 1 } justifyContent="end">
+                { avatarInfo.petType !== PetType.MONSTERPLANT &&
+                    <Button variant="dark" onClick={ event => processButtonAction('buyfood') }>
+                        { LocalizeText('infostand.button.buyfood') }
+                    </Button>
+                }
+                { avatarInfo.isOwner && avatarInfo.petType !== PetType.MONSTERPLANT &&
+                    <Button variant="dark" onClick={ event => processButtonAction('train') }>
+                        { LocalizeText('infostand.button.train') }
+                    </Button>
+                }
+                { !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) && avatarInfo.petType === PetType.MONSTERPLANT &&
+                    <Button variant="dark" onClick={ event => processButtonAction('treat') }>
+                        { LocalizeText('infostand.button.pettreat') }
+                    </Button>
+                }
+                { roomSession?.isRoomOwner && avatarInfo.petType === PetType.MONSTERPLANT &&
+                    <Button variant="dark" onClick={ event => processButtonAction('compost') }>
+                        { LocalizeText('infostand.button.compost') }
+                    </Button>
+                }
+                { avatarInfo.isOwner &&
+                    <Button variant="dark" onClick={ event => processButtonAction('pick_up') }>
+                        { LocalizeText('inventory.pets.pickup') }
+                    </Button>
+                }
+                { (petRespect > 0) && avatarInfo.petType !== PetType.MONSTERPLANT &&
+                    <Button variant="dark" onClick={ event => processButtonAction('respect') }>
+                        { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) }
+                    </Button>
+                }
+            </Flex>
+        </Column>
     );
 }

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

@@ -1,7 +1,7 @@
 import { PetRespectComposer, PetType, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomUnitGiveHandItemPetComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { AvatarInfoPet, CreateLinkEvent, GetConfiguration, GetOwnRoomObject, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { useRoom } from '../../../../../hooks';
+import { usePets, useRoom } from '../../../../../hooks';
 import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
@@ -21,8 +21,14 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
 {
     const { avatarInfo = null, onClose = null } = props;
     const [ mode, setMode ] = useState(MODE_NORMAL);
-    const [ respectsLeft, setRespectsLeft ] = useState(0);
     const { roomSession = null } = useRoom();
+    const { petRespect, changePetRespect } = usePets();
+
+    useEffect(() =>
+    {
+        changePetRespect(avatarInfo.respectsPetLeft);
+
+    }, [ avatarInfo ]);
 
     const canGiveHandItem = useMemo(() =>
     {
@@ -49,18 +55,18 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
             switch(name)
             {
                 case 'respect':
-                    let newRespectsLeft = 0;
+                    let newRespectsLeftChange = 0;
 
-                    setRespectsLeft(prevValue =>
+                    changePetRespect(prevValue =>
                     {
-                        newRespectsLeft = (prevValue - 1);
+                        newRespectsLeftChange = (prevValue - 1);
 
-                        return newRespectsLeft;
+                        return newRespectsLeftChange;
                     });
 
                     GetSessionDataManager().givePetRespect(avatarInfo.id);
 
-                    if(newRespectsLeft > 0) hideMenu = false;
+                    if(newRespectsLeftChange > 0) hideMenu = false;
                     break;
                 case 'treat':
                     SendMessageComposer(new PetRespectComposer(avatarInfo.id));
@@ -132,7 +138,8 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
             return MODE_NORMAL;
         });
 
-        setRespectsLeft(avatarInfo.respectsPetLeft);
+        changePetRespect(avatarInfo.respectsPetLeft);
+
     }, [ avatarInfo ]);
 
     return (
@@ -142,9 +149,9 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
             </ContextMenuHeaderView>
             { (mode === MODE_NORMAL) &&
                 <>
-                    { (respectsLeft > 0) &&
+                    { (petRespect > 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('respect') }>
-                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) }
+                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) }
                         </ContextMenuListItemView> }
                     <ContextMenuListItemView onClick={ event => processAction('train') }>
                         { LocalizeText('infostand.button.train') }
@@ -170,9 +177,9 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                         <input type="checkbox" checked={ !!avatarInfo.publiclyRideable } readOnly={ true } />
                         { LocalizeText('infostand.button.toggle_riding_permission') }
                     </ContextMenuListItemView>
-                    { (respectsLeft > 0) &&
+                    { (petRespect > 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('respect') }>
-                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) }
+                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) }
                         </ContextMenuListItemView> }
                     <ContextMenuListItemView onClick={ event => processAction('train') }>
                         { LocalizeText('infostand.button.train') }
@@ -189,9 +196,9 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                     <ContextMenuListItemView onClick={ event => processAction('dismount') }>
                         { LocalizeText('infostand.button.dismount') }
                     </ContextMenuListItemView>
-                    { (respectsLeft > 0) &&
+                    { (petRespect > 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('respect') }>
-                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) }
+                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) }
                         </ContextMenuListItemView> }
                 </> }
             { (mode === MODE_MONSTER_PLANT) &&
@@ -209,7 +216,7 @@ export const AvatarInfoWidgetOwnPetView: FC<AvatarInfoWidgetOwnPetViewProps> = p
                         </ContextMenuListItemView> }
                     { !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) &&
                         <ContextMenuListItemView onClick={ event => processAction('treat') }>
-                            { LocalizeText('infostand.button.treat') }
+                            { LocalizeText('infostand.button.pettreat') }
                         </ContextMenuListItemView> }
                     { !avatarInfo.dead && (avatarInfo.level === avatarInfo.maximumLevel) && avatarInfo.breedable &&
                         <>

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

@@ -1,7 +1,7 @@
 import { PetRespectComposer, PetType, RoomControllerLevel, RoomObjectCategory, RoomObjectType, RoomObjectVariable, RoomUnitGiveHandItemPetComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { AvatarInfoPet, GetOwnRoomObject, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { useRoom } from '../../../../../hooks';
+import { usePets, useRoom } from '../../../../../hooks';
 import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
@@ -21,8 +21,14 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
 {
     const { avatarInfo = null, onClose = null } = props;
     const [ mode, setMode ] = useState(MODE_NORMAL);
-    const [ respectsLeft, setRespectsLeft ] = useState(0);
     const { roomSession = null } = useRoom();
+    const { petRespect, changePetRespect } = usePets();
+
+    useEffect(() =>
+    {
+        changePetRespect(avatarInfo.respectsPetLeft);
+
+    }, [ avatarInfo ]);
 
     const canPickUp = useMemo(() =>
     {
@@ -54,18 +60,18 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
             switch(name)
             {
                 case 'respect':
-                    let newRespectsLeft = 0;
+                    let newRespectsLeftChange = 0;
 
-                    setRespectsLeft(prevValue =>
+                    changePetRespect(prevValue =>
                     {
-                        newRespectsLeft = (prevValue - 1);
+                        newRespectsLeftChange = (prevValue - 1);
 
-                        return newRespectsLeft;
+                        return newRespectsLeftChange;
                     });
 
                     GetSessionDataManager().givePetRespect(avatarInfo.id);
 
-                    if(newRespectsLeft > 0) hideMenu = false;
+                    if(newRespectsLeftChange > 0) hideMenu = false;
                     break;
                 case 'treat':
                     SendMessageComposer(new PetRespectComposer(avatarInfo.id));
@@ -99,7 +105,8 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
             return MODE_NORMAL;
         });
 
-        setRespectsLeft(avatarInfo.respectsPetLeft);
+        changePetRespect(avatarInfo.respectsPetLeft);
+
     }, [ avatarInfo ]);
 
     return (
@@ -107,9 +114,9 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
             <ContextMenuHeaderView>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
-            { (mode === MODE_NORMAL) && (respectsLeft > 0) &&
+            { (mode === MODE_NORMAL) && (petRespect > 0) &&
                 <ContextMenuListItemView onClick={ event => processAction('respect') }>
-                    { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) }
+                    { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) }
                 </ContextMenuListItemView> }
             { (mode === MODE_SADDLED_UP) &&
                 <>
@@ -117,9 +124,9 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
                         <ContextMenuListItemView onClick={ event => processAction('mount') }>
                             { LocalizeText('infostand.button.mount') }
                         </ContextMenuListItemView> }
-                    { (respectsLeft > 0) &&
+                    { (petRespect > 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('respect') }>
-                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) }
+                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) }
                         </ContextMenuListItemView> }
                 </> }
             { (mode === MODE_RIDING) &&
@@ -127,14 +134,14 @@ export const AvatarInfoWidgetPetView: FC<AvatarInfoWidgetPetViewProps> = props =
                     <ContextMenuListItemView onClick={ event => processAction('dismount') }>
                         { LocalizeText('infostand.button.dismount') }
                     </ContextMenuListItemView>
-                    { (respectsLeft > 0) &&
+                    { (petRespect > 0) &&
                         <ContextMenuListItemView onClick={ event => processAction('respect') }>
-                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) }
+                            { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) }
                         </ContextMenuListItemView> }
                 </> }
             { (mode === MODE_MONSTER_PLANT) && !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) &&
                 <ContextMenuListItemView onClick={ event => processAction('treat') }>
-                    { LocalizeText('infostand.button.treat') }
+                    { LocalizeText('infostand.button.pettreat') }
                 </ContextMenuListItemView> }
             { canPickUp &&
                 <ContextMenuListItemView onClick={ event => processAction('pick_up') }>

src/hooks/index.ts

@@ -12,6 +12,7 @@ export * from './inventory';
 export * from './mod-tools';
 export * from './navigator';
 export * from './notification';
+export * from './pets';
 export * from './purse';
 export * from './rooms';
 export * from './session';

src/hooks/pets/index.ts

@@ -0,0 +1 @@
+export * from './usePets';

src/hooks/pets/usePets.ts

@@ -0,0 +1,16 @@
+import { useState } from 'react';
+import { useBetween } from 'use-between';
+
+const usePetsState = () =>
+{
+    const [ petRespect, setPetRespect ] = useState(0);
+
+    const changePetRespect = (respects: React.SetStateAction<number>) =>
+    {
+        setPetRespect(respects);
+    }
+
+    return { petRespect, setPetRespect, changePetRespect };
+}
+
+export const usePets = () => useBetween(usePetsState);