mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-26 15:40:51 +01:00
Update component (incluying pet buttons right)
This commit is contained in:
object
parent
05d0e9cbc1
commit
42d2cb9e54
@ -1,7 +1,9 @@
|
|||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
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, useState } from 'react';
|
||||||
import { Base, Column, Flex, LayoutPetImageView, Text, UserProfileIconView } from '../../../../../common';
|
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
|
interface InfoStandWidgetPetViewProps
|
||||||
{
|
{
|
||||||
@ -12,72 +14,285 @@ interface InfoStandWidgetPetViewProps
|
|||||||
export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
|
export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
|
||||||
{
|
{
|
||||||
const { avatarInfo = null, onClose = null } = 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;
|
if(!avatarInfo) return null;
|
||||||
|
|
||||||
return (
|
useEffect(() =>
|
||||||
<Column className="nitro-infostand rounded">
|
{
|
||||||
<Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
|
changePetRespect(avatarInfo.respectsPetLeft);
|
||||||
<Column gap={ 1 }>
|
setRemainingGrowTime(avatarInfo.remainingGrowTime);
|
||||||
<Flex alignItems="center" justifyContent="between" gap={ 1 }>
|
setRemainingTimeToLive(avatarInfo.remainingTimeToLive);
|
||||||
<Text variant="white" small wrap>{ avatarInfo.name }</Text>
|
|
||||||
<FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ onClose } />
|
}, [ avatarInfo ]);
|
||||||
</Flex>
|
|
||||||
<Text variant="white" small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
|
const processButtonAction = (action: string) =>
|
||||||
<hr className="m-0" />
|
{
|
||||||
</Column>
|
let hideMenu = true;
|
||||||
<Column gap={ 1 }>
|
|
||||||
<Flex gap={ 1 }>
|
if (!action || action == '') return;
|
||||||
<Column fullWidth overflow="hidden" className="body-image pet p-1">
|
|
||||||
<LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
|
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 (
|
||||||
|
<Column gap={ 1 } alignItems="end">
|
||||||
|
<Column className="nitro-infostand rounded">
|
||||||
|
<Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
|
||||||
|
<Column gap={ 1 }>
|
||||||
|
<Flex alignItems="center" justifyContent="between" gap={ 1 }>
|
||||||
|
<Text variant="white" small wrap>{ avatarInfo.name }</Text>
|
||||||
|
<FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ onClose } />
|
||||||
|
</Flex>
|
||||||
|
<Text variant="white" small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
|
||||||
|
<hr className="m-0" />
|
||||||
</Column>
|
</Column>
|
||||||
<Column grow gap={ 1 }>
|
<Column gap={ 1 }>
|
||||||
<Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
|
<Flex gap={ 1 }>
|
||||||
<Column alignItems="center" gap={ 1 }>
|
<Column fullWidth overflow="hidden" className="body-image pet p-1">
|
||||||
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
|
<LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
|
||||||
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
|
</Column>
|
||||||
<Flex fit center position="absolute">
|
<Column grow gap={ 1 }>
|
||||||
<Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
|
<Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
|
||||||
</Flex>
|
<Column alignItems="center" gap={ 1 }>
|
||||||
<Base className="bg-info rounded pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
|
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
|
||||||
</Base>
|
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
|
||||||
</Column>
|
<Flex fit center position="absolute">
|
||||||
<Column alignItems="center" gap={ 1 }>
|
<Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
|
||||||
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
|
</Flex>
|
||||||
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
|
<Base className="bg-info rounded pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
|
||||||
<Flex fit center position="absolute">
|
</Base>
|
||||||
<Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
|
</Column>
|
||||||
</Flex>
|
<Column alignItems="center" gap={ 1 }>
|
||||||
<Base className="bg-purple rounded pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
|
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
|
||||||
</Base>
|
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
|
||||||
</Column>
|
<Flex fit center position="absolute">
|
||||||
<Column alignItems="center" gap={ 1 }>
|
<Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
|
||||||
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
|
</Flex>
|
||||||
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
|
<Base className="bg-purple rounded pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
|
||||||
<Flex fit center position="absolute">
|
</Base>
|
||||||
<Text variant="white" small>{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
|
</Column>
|
||||||
</Flex>
|
<Column alignItems="center" gap={ 1 }>
|
||||||
<Base className="bg-success rounded pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
|
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
|
||||||
</Base>
|
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
|
||||||
</Column>
|
<Flex fit center position="absolute">
|
||||||
|
<Text variant="white" small>{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
|
||||||
|
</Flex>
|
||||||
|
<Base className="bg-success rounded pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
|
||||||
|
</Base>
|
||||||
|
</Column>
|
||||||
|
</Column>
|
||||||
|
</Flex>
|
||||||
|
<hr className="m-0" />
|
||||||
</Column>
|
</Column>
|
||||||
</Flex>
|
<Column gap={ 1 }>
|
||||||
<hr className="m-0" />
|
<Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
|
||||||
</Column>
|
<hr className="m-0" />
|
||||||
<Column gap={ 1 }>
|
</Column>
|
||||||
<Text variant="white" small wrap>{ LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }</Text>
|
<Column gap={ 1 }>
|
||||||
<Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
|
<Flex alignItems="center" gap={ 1 }>
|
||||||
<hr className="m-0" />
|
<UserProfileIconView userId={ avatarInfo.ownerId } />
|
||||||
</Column>
|
<Text variant="white" small wrap>
|
||||||
<Column gap={ 1 }>
|
{ LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }
|
||||||
<Flex alignItems="center" gap={ 1 }>
|
</Text>
|
||||||
<UserProfileIconView userId={ avatarInfo.ownerId } />
|
</Flex>
|
||||||
<Text variant="white" small wrap>
|
</Column>
|
||||||
{ LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }
|
</Column>
|
||||||
</Text>
|
|
||||||
</Flex>
|
|
||||||
</Column>
|
</Column>
|
||||||
|
<Flex gap={ 1 } justifyContent="end">
|
||||||
|
<Button variant="dark" onClick={ event => processButtonAction('buyfood') }>
|
||||||
|
{ LocalizeText('infostand.button.buyfood') }
|
||||||
|
</Button>
|
||||||
|
{ avatarInfo.isOwner &&
|
||||||
|
<Button variant="dark" onClick={ event => processButtonAction('train') }>
|
||||||
|
{ LocalizeText('infostand.button.train') }
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
{ avatarInfo.isOwner &&
|
||||||
|
<Button variant="dark" onClick={ event => processButtonAction('pick_up') }>
|
||||||
|
{ LocalizeText('inventory.pets.pickup') }
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
{ (petRespect > 0) &&
|
||||||
|
<Button variant="dark" onClick={ event => processButtonAction('respect') }>
|
||||||
|
{ LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespect.toString() ]) }
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
</Flex>
|
||||||
</Column>
|
</Column>
|
||||||
</Column>
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const InfoStandMonsterplantPet = () =>
|
||||||
|
{
|
||||||
|
return (
|
||||||
|
<Column gap={ 1 } alignItems="end">
|
||||||
|
<Column className="nitro-infostand rounded">
|
||||||
|
<Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
|
||||||
|
<Column gap={ 1 }>
|
||||||
|
<Flex alignItems="center" justifyContent="between" gap={ 1 }>
|
||||||
|
<Text variant="white" small wrap>{ avatarInfo.name }</Text>
|
||||||
|
<FontAwesomeIcon icon="times" className="cursor-pointer" onClick={ onClose } />
|
||||||
|
</Flex>
|
||||||
|
<Text variant="white" small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
|
||||||
|
<hr className="m-0" />
|
||||||
|
</Column>
|
||||||
|
<Column gap={ 1 }>
|
||||||
|
<Flex gap={ 1 }>
|
||||||
|
<Column fullWidth overflow="hidden" className="body-image-plant pet p-1">
|
||||||
|
<LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
|
||||||
|
</Column>
|
||||||
|
{ !avatarInfo.dead &&
|
||||||
|
<Column grow gap={ 1 }>
|
||||||
|
<Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
|
||||||
|
</Column>
|
||||||
|
}
|
||||||
|
</Flex>
|
||||||
|
<hr className="m-0" />
|
||||||
|
</Column>
|
||||||
|
<br /><br />
|
||||||
|
<Column gap={ 1 }>
|
||||||
|
<Column alignItems="center" gap={ 1 }>
|
||||||
|
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.wellbeing') }</Text>
|
||||||
|
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
|
||||||
|
<Flex fit center position="absolute">
|
||||||
|
<Text variant="white" small>{ 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] }</Text>
|
||||||
|
</Flex>
|
||||||
|
<Base className="bg-success rounded pet-stats" style={ { width: avatarInfo.dead ? '0' : Math.round((avatarInfo.maximumTimeToLive * 100) / (remainingTimeToLive)).toString() } } />
|
||||||
|
</Base>
|
||||||
|
</Column>
|
||||||
|
<br /><br />
|
||||||
|
<br /><br />
|
||||||
|
{ remainingGrowTime != 0 && remainingGrowTime > 0 &&
|
||||||
|
<Column alignItems="center" gap={ 1 }>
|
||||||
|
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.growth') }</Text> <br />
|
||||||
|
<LayoutCounterTimeView className="top-2 end-2" day={ ConvertSeconds(remainingGrowTime).split(':')[0] } hour={ ConvertSeconds(remainingGrowTime).split(':')[1] } minutes={ ConvertSeconds(remainingGrowTime).split(':')[2] } seconds={ ConvertSeconds(remainingGrowTime).split(':')[3] } />
|
||||||
|
</Column>
|
||||||
|
}
|
||||||
|
<br /><br />
|
||||||
|
<br /><br />
|
||||||
|
<Column alignItems="center" gap={ 1 }>
|
||||||
|
<Text variant="white" small truncate>{ LocalizeText('Nivel de rareza:') }</Text>
|
||||||
|
<LayoutRarityLevelView className="top-2 end-2" level={ avatarInfo.rarityLevel } />
|
||||||
|
</Column>
|
||||||
|
<br /><br />
|
||||||
|
<Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
|
||||||
|
<hr className="m-0" />
|
||||||
|
</Column>
|
||||||
|
<Column gap={ 1 }>
|
||||||
|
<Flex alignItems="center" gap={ 1 }>
|
||||||
|
<UserProfileIconView userId={ avatarInfo.ownerId } />
|
||||||
|
<Text variant="white" small wrap>
|
||||||
|
{ LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</Column>
|
||||||
|
</Column>
|
||||||
|
</Column>
|
||||||
|
<Flex gap={ 1 } justifyContent="end">
|
||||||
|
{ !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) &&
|
||||||
|
<Button variant="dark" onClick={ event => processButtonAction('treat') }>
|
||||||
|
{ LocalizeText('infostand.button.pettreat') }
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
{ roomSession?.isRoomOwner &&
|
||||||
|
<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>
|
||||||
|
}
|
||||||
|
</Flex>
|
||||||
|
</Column>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{ avatarInfo.petType !== PetType.MONSTERPLANT &&
|
||||||
|
<InfoStandNormalPet />
|
||||||
|
}
|
||||||
|
{ avatarInfo.petType === PetType.MONSTERPLANT &&
|
||||||
|
<InfoStandMonsterplantPet />
|
||||||
|
}
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user