From da66f518a08d07085dc30b1e7d2e58cdf2a50355 Mon Sep 17 00:00:00 2001 From: object Date: Sat, 13 Aug 2022 19:29:58 +0000 Subject: [PATCH 1/8] New util for monsterplants --- src/api/utils/ConvertSeconds.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/api/utils/ConvertSeconds.ts diff --git a/src/api/utils/ConvertSeconds.ts b/src/api/utils/ConvertSeconds.ts new file mode 100644 index 00000000..f559dea9 --- /dev/null +++ b/src/api/utils/ConvertSeconds.ts @@ -0,0 +1,9 @@ +export const ConvertSeconds = (seconds: number) => +{ + let numDays = Math.floor(seconds / 86400); + let numHours = Math.floor((seconds % 86400) / 3600); + let numMinutes = Math.floor(((seconds % 86400) % 3600) / 60); + let numSeconds = ((seconds % 86400) % 3600) % 60; + + return numDays.toString().padStart(2, '0') + ':' + numHours.toString().padStart(2, '0') + ':' + numMinutes.toString().padStart(2, '0') + ':' + numSeconds.toString().padStart(2, '0'); +} From eb6bb015691975e7ee0e33c11c24ac823f9c0caf Mon Sep 17 00:00:00 2001 From: object Date: Sat, 13 Aug 2022 19:31:25 +0000 Subject: [PATCH 2/8] New export for monsterplants --- src/api/utils/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/api/utils/index.ts b/src/api/utils/index.ts index eeb74fce..c2f1d4b1 100644 --- a/src/api/utils/index.ts +++ b/src/api/utils/index.ts @@ -1,5 +1,6 @@ export * from './CloneObject'; export * from './ColorUtils'; +export * from './ConvertSeconds'; export * from './LocalizeBadgeDescription'; export * from './LocalizeBageName'; export * from './LocalizeFormattedNumber'; From 653089622ea6e05381ccd137e72210cb20b19310 Mon Sep 17 00:00:00 2001 From: object Date: Sat, 13 Aug 2022 19:32:29 +0000 Subject: [PATCH 3/8] New image for counter-time monsterplant --- src/assets/images/infostand/countown-timer.png | Bin 0 -> 219 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/images/infostand/countown-timer.png diff --git a/src/assets/images/infostand/countown-timer.png b/src/assets/images/infostand/countown-timer.png new file mode 100644 index 0000000000000000000000000000000000000000..ebfe62911d9265e43efe5527abe3d7fa44633f0c GIT binary patch literal 219 zcmeAS@N?(olHy`uVBq!ia0vp^DnKm5!3-qrzQ4@^QjEnx?oJHr&dIz4a#+$GeH|GX zHuiJ>Nn{1`g#vs+T!FMD5Lj6T1qCT7DFL}WP4hvj*-C=^g8zd6!{+@<_5(#Y3p^r= z85sBugD~Uq{1qucK?hG4#}Etu2z1%?K#2uTS}h6O@RSq-aJtn1+PNn+?Q_`3Em zcSF|<&Za=uE1^f61bE6_*RX^#P8B%!Y|R=5)svi!+4Ej$0?lIZboFyt=akR{02b3g Ai2wiq literal 0 HcmV?d00001 From 8f6e26cf44d6b4df26404c9a3070b7c2c7d2194b Mon Sep 17 00:00:00 2001 From: object Date: Sat, 13 Aug 2022 19:33:50 +0000 Subject: [PATCH 4/8] Added scss for image counter monsterplant --- src/common/index.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/common/index.scss b/src/common/index.scss index 3a08bf3c..9178bec6 100644 --- a/src/common/index.scss +++ b/src/common/index.scss @@ -299,6 +299,19 @@ } } +.nitro-counter-time { + width: 36px; + height: 28px; + background: url("../assets/images/infostand/countown-timer.png"); + + div { + line-height: 28px; + text-align: center; + color: $white; + font-weight: bold; + } +} + .avatar-image { position: relative; width: 90px; From e33966cd2308b55d803f60fe911e3a918a6d7144 Mon Sep 17 00:00:00 2001 From: object Date: Sat, 13 Aug 2022 19:35:15 +0000 Subject: [PATCH 5/8] New layout for monsterplant --- src/common/layout/LayoutCounterTimeView.tsx | 65 +++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/common/layout/LayoutCounterTimeView.tsx diff --git a/src/common/layout/LayoutCounterTimeView.tsx b/src/common/layout/LayoutCounterTimeView.tsx new file mode 100644 index 00000000..36150820 --- /dev/null +++ b/src/common/layout/LayoutCounterTimeView.tsx @@ -0,0 +1,65 @@ +import { FC, useMemo } from 'react'; +import { Base, BaseProps, Column, Flex, Text } from '..'; +import { LocalizeText } from '../../api'; + +interface LayoutCounterTimeViewProps extends BaseProps +{ + day: string; + hour: string; + minutes: string; + seconds: string; +} + +export const LayoutCounterTimeView: FC = props => +{ + const { day = '00', hour = '00', minutes = '00', seconds = '00', classNames = [], children = null, ...rest } = props; + + const getClassNames = useMemo(() => + { + const newClassNames: string[] = [ 'nitro-counter-time' ]; + + if(classNames.length) newClassNames.push(...classNames); + + return newClassNames; + }, [ classNames ]); + + return ( + <> + + + + +
{ day != '00' ? day : hour }
+ { children } + + { day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') } + + + + : + + + + +
{ minutes }
+ { children } + + { LocalizeText('countdown_clock_unit_minutes') } + + + + : + + + + +
{ seconds }
+ { children } + + { LocalizeText('countdown_clock_unit_seconds') } + + + + + ); +} From 0e70d1a5fdcda31339835af1f8f548e5c85af2a3 Mon Sep 17 00:00:00 2001 From: object Date: Sat, 13 Aug 2022 19:35:49 +0000 Subject: [PATCH 6/8] Added new export layout --- src/common/layout/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/common/layout/index.ts b/src/common/layout/index.ts index a7bdd15c..3c4238e1 100644 --- a/src/common/layout/index.ts +++ b/src/common/layout/index.ts @@ -1,6 +1,7 @@ export * from './LayoutAvatarImageView'; export * from './LayoutBackgroundImage'; export * from './LayoutBadgeImageView'; +export * from './LayoutCounterTimeView'; export * from './LayoutCurrencyIcon'; export * from './LayoutFurniIconImageView'; export * from './LayoutFurniImageView'; From 05d0e9cbc1e852b0c62003f36983ac2c1c9d613c Mon Sep 17 00:00:00 2001 From: object Date: Sat, 13 Aug 2022 19:37:29 +0000 Subject: [PATCH 7/8] Css for monsterplant --- .../widgets/avatar-info/AvatarInfoWidgetView.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss index 7edd0c7b..558b0297 100644 --- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss +++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss @@ -70,6 +70,17 @@ } } + .body-image-plant { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + max-width: 68px; + height: 85px; + max-height: 90px; + border-radius: $border-radius; + } + .badge-image { width: 45px; height: 45px; From 42d2cb9e5496860a5c057a0364d646d709ef596b Mon Sep 17 00:00:00 2001 From: object Date: Sat, 13 Aug 2022 19:45:26 +0000 Subject: [PATCH 8/8] Update component (incluying pet buttons right) --- .../infostand/InfoStandWidgetPetView.tsx | 341 ++++++++++++++---- 1 file changed, 278 insertions(+), 63 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..f7a6792f 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, useState } from 'react'; +import { AvatarInfoPet, ConvertSeconds, CreateLinkEvent, GetConfiguration, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../../api'; +import { Base, Button, Column, Flex, LayoutCounterTimeView, LayoutPetImageView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../../common'; +import { usePets, useRoom } from '../../../../../hooks'; interface InfoStandWidgetPetViewProps { @@ -12,72 +14,285 @@ interface InfoStandWidgetPetViewProps export const InfoStandWidgetPetView: FC = props => { const { avatarInfo = null, onClose = null } = props; + const { roomSession = null } = useRoom(); + const { petRespect, changePetRespect } = usePets(); + const [ remainingGrowTime, setRemainingGrowTime ] = useState(0); + const [ remainingTimeToLive, setRemainingTimeToLive ] = useState(0); if(!avatarInfo) return null; - return ( - - - - - { avatarInfo.name } - - - { LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) } -
- - - - - + useEffect(() => + { + changePetRespect(avatarInfo.respectsPetLeft); + setRemainingGrowTime(avatarInfo.remainingGrowTime); + setRemainingTimeToLive(avatarInfo.remainingTimeToLive); + + }, [ 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); + setRemainingGrowTime(avatarInfo.remainingGrowTime); + setRemainingTimeToLive(avatarInfo.remainingTimeToLive); + + }, [ avatarInfo ]); + + useEffect(() => + { + if (avatarInfo.petType === PetType.MONSTERPLANT && !avatarInfo.dead) + { + const interval = setInterval(() => + { + let newRemaingGrowTime = 0; + let newRemaingLiveTime = 0; + + setRemainingGrowTime(prevValue => + { + newRemaingGrowTime = (prevValue - 1); + + return newRemaingGrowTime; + }); + + setRemainingTimeToLive(prevValue => + { + newRemaingLiveTime = (prevValue - 1); + + return newRemaingLiveTime; + }); + + }, 1000); + + return () => clearInterval(interval); + } + + }, [ avatarInfo ]); + + const InfoStandNormalPet = () => + { + 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 } - - - - - - { LocalizeText('infostand.pet.text.experience') } - - - { avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal } - - - - - - { LocalizeText('infostand.pet.text.energy') } - - - { avatarInfo.energy + '/' + avatarInfo.maximumEnergy } - - - - + + + + + + + { 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.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) } - { LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) } -
- - - - - - { LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) } - - + + { LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) } +
+ + + + + + { LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) } + + + + + + + { avatarInfo.isOwner && + + } + { avatarInfo.isOwner && + + } + { (petRespect > 0) && + + } + - + ); + } + + const InfoStandMonsterplantPet = () => + { + return ( + + + + + + { avatarInfo.name } + + + { LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) } +
+ + + + + + + { !avatarInfo.dead && + + { LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) } + + } + +
+ +

+ + + { LocalizeText('infostand.pet.text.wellbeing') } + + + { avatarInfo.dead ? '00:00:00' : ConvertSeconds((remainingTimeToLive == 0 ? avatarInfo.remainingTimeToLive : remainingTimeToLive)).split(':')[1] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[2] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[3] } + + + + +

+

+ { remainingGrowTime != 0 && remainingGrowTime > 0 && + + { LocalizeText('infostand.pet.text.growth') }
+ + + } +

+

+ + { LocalizeText('Nivel de rareza:') } + + +

+ { LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) } +
+ + + + + + { LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) } + + + + + + + { !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) && + + } + { roomSession?.isRoomOwner && + + } + { avatarInfo.isOwner && + + } + + + ); + } + + return ( + <> + { avatarInfo.petType !== PetType.MONSTERPLANT && + + } + { avatarInfo.petType === PetType.MONSTERPLANT && + + } + ); }