nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 07:30:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update monsterplant infostand

Browse Source
This commit is contained in:
Bill 2022-08-17 23:01:22 -04:00
parent 5b6e33e58f
commit 2b6bf323da
3 changed files with 55 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/common/layout/LayoutCounterTimeView.tsx
View File

@ -1,6 +1,7 @@
import { FC, useMemo } from 'react';
import { Base, BaseProps, Column, Flex, Text } from '..';
import { LocalizeText } from '../../api';
import { Base, BaseProps } from '../Base';
import { Flex } from '../Flex';
interface LayoutCounterTimeViewProps extends BaseProps<HTMLDivElement>
{
@ -24,42 +25,19 @@ export const LayoutCounterTimeView: FC<LayoutCounterTimeViewProps> = props =>
}, [ classNames ]);
return (
<>
<Column gap={ 1 }>
<Flex gap={ 1 }>
<Column>
<Base classNames={ getClassNames } { ...rest }>
<div>{ day != '00' ? day : hour }</div>
{ children }
</Base>
<Text variant="white" small truncate center={ true }>{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }</Text>
</Column>
<Column>
<Base style={ { marginTop: '3px' } }>
:
</Base>
</Column>
<Column>
<Base classNames={ getClassNames } { ...rest }>
<div>{ minutes }</div>
{ children }
</Base>
<Text variant="white" small truncate center={ true }>{ LocalizeText('countdown_clock_unit_minutes') }</Text>
</Column>
<Column>
<Base style={ { marginTop: '3px' } }>
:
</Base>
</Column>
<Column>
<Base classNames={ getClassNames } { ...rest }>
<div>{ seconds }</div>
{ children }
</Base>
<Text variant="white" small truncate center={ true }>{ LocalizeText('countdown_clock_unit_seconds') }</Text>
</Column>
</Flex>
</Column>
</>
<Flex gap={ 1 }>
<Base classNames={ getClassNames } { ...rest }>
<div>{ day != '00' ? day : hour }{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }</div>
</Base>
<Base style={ { marginTop: '3px' } }>:</Base>
<Base classNames={ getClassNames } { ...rest }>
<div>{ minutes }{ LocalizeText('countdown_clock_unit_minutes') }</div>
</Base>
<Base style={ { marginTop: '3px' } }>:</Base>
<Base classNames={ getClassNames } { ...rest }>
<div>{ seconds }{ LocalizeText('countdown_clock_unit_seconds') }</div>
</Base>
{ children }
</Flex>
);
}

31
src/common/layout/LayoutPetImageView.tsx
View File

@ -20,6 +20,8 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
{
const { figure = '', typeId = -1, paletteId = -1, petColor = 0xFFFFFF, customParts = [], posture = 'std', headOnly = false, direction = 0, scale = 1, style = {}, ...rest } = props;
const [ petUrl, setPetUrl ] = useState<string>(null);
const [ width, setWidth ] = useState(0);
const [ height, setHeight ] = useState(0);
const isDisposed = useRef(false);
const getStyle = useMemo(() =>
@ -35,10 +37,13 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
if(!(scale % 1)) newStyle.imageRendering = 'pixelated';
}
newStyle.width = width;
newStyle.height = height;
if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
return newStyle;
}, [ petUrl, scale, style ]);
}, [ petUrl, scale, style, width, height ]);
useEffect(() =>
{
@ -67,8 +72,19 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
{
if(isDisposed.current) return;
if(image) setPetUrl(image.src);
else if(texture) setPetUrl(TextureUtils.generateImageUrl(texture));
if(image)
{
setPetUrl(image.src);
setWidth(image.width);
setHeight(image.height);
}
else if(texture)
{
setPetUrl(TextureUtils.generateImageUrl(texture));
setWidth(texture.width);
setHeight(texture.height);
}
},
imageFailed: (id) =>
{
@ -80,9 +96,12 @@ export const LayoutPetImageView: FC<LayoutPetImageViewProps> = props =>
{
const image = imageResult.getImage();
if(image) setPetUrl(image.src);
if(image)
{
setPetUrl(image.src);
setWidth(image.width);
setHeight(image.height);
}
}
}, [ figure, typeId, paletteId, petColor, customParts, posture, headOnly, direction ]);

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

@ -1,8 +1,8 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { PetRespectComposer, PetType } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { AvatarInfoPet, CreateLinkEvent, GetConfiguration, LocalizeText, SendMessageComposer, ConvertSeconds } from '../../../../../api';
import { Base, Button, Column, Flex, LayoutPetImageView, LayoutRarityLevelView, Text, UserProfileIconView, LayoutCounterTimeView } from '../../../../../common';
import { AvatarInfoPet, ConvertSeconds, CreateLinkEvent, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../../../api';
import { Base, Button, Column, Flex, LayoutCounterTimeView, LayoutPetImageView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../../common';
import { useRoom, useSessionInfo } from '../../../../../hooks';
interface InfoStandWidgetPetViewProps
@ -87,19 +87,15 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
</Column>
{ (avatarInfo.petType === PetType.MONSTERPLANT) &&
<>
<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>
<Column center gap={ 1 }>
<LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
<hr className="m-0" />
</Column>
<Column gap={ 1 }>
<Column gap={ 2 }>
{ !avatarInfo.dead &&
<Column alignItems="center" gap={ 1 }>
<Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
</Column> }
<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">
@ -109,20 +105,18 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
<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 />
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.growth') }</Text>
<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>
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.raritylevel', [ 'level' ], [ LocalizeText(`infostand.pet.raritylevel.${ avatarInfo.rarityLevel }`) ]) }</Text>
<LayoutRarityLevelView className="top-2 end-2" level={ avatarInfo.rarityLevel } />
</Column>
<br /><br />
<hr className="m-0" />
</Column>
<Column gap={ 1 }>
<Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
<hr className="m-0" />
</Column>