From a9a03648d5af33e810c9e790d83ddc788b23b40b Mon Sep 17 00:00:00 2001 From: object Date: Wed, 10 Aug 2022 16:14:52 +0000 Subject: [PATCH 1/5] Adding new buttons in right panel --- .../infostand/InfoStandWidgetPetView.tsx | 215 +++++++++++++----- 1 file changed, 154 insertions(+), 61 deletions(-) diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx index 7847f439..5d803b33 100644 --- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx +++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx @@ -1,7 +1,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { FC } from 'react'; -import { AvatarInfoPet, LocalizeText } from '../../../../../api'; -import { Base, Column, Flex, LayoutPetImageView, Text, UserProfileIconView } from '../../../../../common'; +import { PetRespectComposer, PetType } from '@nitrots/nitro-renderer'; +import { FC, useEffect } from 'react'; +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,72 +14,163 @@ interface InfoStandWidgetPetViewProps export const InfoStandWidgetPetView: FC = 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 ( - - - - - { avatarInfo.name } - - - { LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) } -
- - - - - - - - { LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) } - - { LocalizeText('infostand.pet.text.happiness') } - - - { avatarInfo.happyness + '/' + avatarInfo.maximumHappyness } - - - + + + + + + { avatarInfo.name } + + + { LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) } +
+ + + + + - - { LocalizeText('infostand.pet.text.experience') } - - - { avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal } - - - + + { LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) } + + { LocalizeText('infostand.pet.text.happiness') } + + + { avatarInfo.happyness + '/' + avatarInfo.maximumHappyness } + + + + + + { LocalizeText('infostand.pet.text.experience') } + + + { avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal } + + + + + + { LocalizeText('infostand.pet.text.energy') } + + + { avatarInfo.energy + '/' + avatarInfo.maximumEnergy } + + + + - - { LocalizeText('infostand.pet.text.energy') } - - - { avatarInfo.energy + '/' + avatarInfo.maximumEnergy } - - - - - - -
- - - { LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) } - { LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) } -
- - - - - - { LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) } - - + +
+ + + { avatarInfo.petType !== PetType.MONSTERPLANT && + { LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) } + } + { LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) } +
+ + + + + + { LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) } + + + + + { avatarInfo.petType !== PetType.MONSTERPLANT && + + } + { avatarInfo.isOwner && avatarInfo.petType !== PetType.MONSTERPLANT && + + } + { !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) && avatarInfo.petType === PetType.MONSTERPLANT && + + } + { roomSession?.isRoomOwner && avatarInfo.petType === PetType.MONSTERPLANT && + + } + { avatarInfo.isOwner && + + } + { (petRespect > 0) && avatarInfo.petType !== PetType.MONSTERPLANT && + + } + ); } From 058088b7896c31709b8a9083ec4eeef52c2c0106 Mon Sep 17 00:00:00 2001 From: object Date: Wed, 10 Aug 2022 16:24:22 +0000 Subject: [PATCH 2/5] Listening new states for the respects count --- .../menu/AvatarInfoWidgetOwnPetView.tsx | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnPetView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnPetView.tsx index 107393b5..763a7a00 100644 --- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnPetView.tsx +++ b/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 = 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 = 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 = p return MODE_NORMAL; }); - setRespectsLeft(avatarInfo.respectsPetLeft); + changePetRespect(avatarInfo.respectsPetLeft); + }, [ avatarInfo ]); return ( @@ -142,9 +149,9 @@ export const AvatarInfoWidgetOwnPetView: FC = p { (mode === MODE_NORMAL) && <> - { (respectsLeft > 0) && + { (petRespect > 0) && processAction('respect') }> - { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) } + { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) } } processAction('train') }> { LocalizeText('infostand.button.train') } @@ -170,9 +177,9 @@ export const AvatarInfoWidgetOwnPetView: FC = p { LocalizeText('infostand.button.toggle_riding_permission') } - { (respectsLeft > 0) && + { (petRespect > 0) && processAction('respect') }> - { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) } + { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) } } processAction('train') }> { LocalizeText('infostand.button.train') } @@ -189,9 +196,9 @@ export const AvatarInfoWidgetOwnPetView: FC = p processAction('dismount') }> { LocalizeText('infostand.button.dismount') } - { (respectsLeft > 0) && + { (petRespect > 0) && processAction('respect') }> - { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) } + { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) } } } { (mode === MODE_MONSTER_PLANT) && @@ -209,7 +216,7 @@ export const AvatarInfoWidgetOwnPetView: FC = p } { !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) && processAction('treat') }> - { LocalizeText('infostand.button.treat') } + { LocalizeText('infostand.button.pettreat') } } { !avatarInfo.dead && (avatarInfo.level === avatarInfo.maximumLevel) && avatarInfo.breedable && <> From 6afbba964d29536d5b6731845be7473e63784941 Mon Sep 17 00:00:00 2001 From: object Date: Wed, 10 Aug 2022 16:29:43 +0000 Subject: [PATCH 3/5] Listening new state for respects and replace treat --- .../menu/AvatarInfoWidgetPetView.tsx | 37 +++++++++++-------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetPetView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetPetView.tsx index a4cc6721..29090b49 100644 --- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetPetView.tsx +++ b/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 = 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 = 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 = props = return MODE_NORMAL; }); - setRespectsLeft(avatarInfo.respectsPetLeft); + changePetRespect(avatarInfo.respectsPetLeft); + }, [ avatarInfo ]); return ( @@ -107,9 +114,9 @@ export const AvatarInfoWidgetPetView: FC = props = { avatarInfo.name } - { (mode === MODE_NORMAL) && (respectsLeft > 0) && + { (mode === MODE_NORMAL) && (petRespect > 0) && processAction('respect') }> - { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) } + { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) } } { (mode === MODE_SADDLED_UP) && <> @@ -117,9 +124,9 @@ export const AvatarInfoWidgetPetView: FC = props = processAction('mount') }> { LocalizeText('infostand.button.mount') } } - { (respectsLeft > 0) && + { (petRespect > 0) && processAction('respect') }> - { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) } + { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) } } } { (mode === MODE_RIDING) && @@ -127,14 +134,14 @@ export const AvatarInfoWidgetPetView: FC = props = processAction('dismount') }> { LocalizeText('infostand.button.dismount') } - { (respectsLeft > 0) && + { (petRespect > 0) && processAction('respect') }> - { LocalizeText('infostand.button.petrespect', [ 'count' ], [ respectsLeft.toString() ]) } + { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) } } } { (mode === MODE_MONSTER_PLANT) && !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) && processAction('treat') }> - { LocalizeText('infostand.button.treat') } + { LocalizeText('infostand.button.pettreat') } } { canPickUp && processAction('pick_up') }> From 7b90987b293454ac1028a09ccc99ccafc4f12bea Mon Sep 17 00:00:00 2001 From: object Date: Wed, 10 Aug 2022 16:30:40 +0000 Subject: [PATCH 4/5] Add new global export --- src/hooks/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 91a23d23..98a0d049 100644 --- a/src/hooks/index.ts +++ b/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'; From d2b2c363aa49d9922d58dd0acf07eadcf5308e87 Mon Sep 17 00:00:00 2001 From: object Date: Wed, 10 Aug 2022 16:32:13 +0000 Subject: [PATCH 5/5] New hook for the pets --- src/hooks/pets/index.ts | 1 + src/hooks/pets/usePets.ts | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 src/hooks/pets/index.ts create mode 100644 src/hooks/pets/usePets.ts diff --git a/src/hooks/pets/index.ts b/src/hooks/pets/index.ts new file mode 100644 index 00000000..055b581e --- /dev/null +++ b/src/hooks/pets/index.ts @@ -0,0 +1 @@ +export * from './usePets'; diff --git a/src/hooks/pets/usePets.ts b/src/hooks/pets/usePets.ts new file mode 100644 index 00000000..6453458e --- /dev/null +++ b/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) => + { + setPetRespect(respects); + } + + return { petRespect, setPetRespect, changePetRespect }; +} + +export const usePets = () => useBetween(usePetsState);