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

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

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

See merge request nitro/nitro-react!73
This commit is contained in:
Bill 2022-08-17 22:48:11 +00:00
commit cfe35224cb
6 changed files with 216 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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<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 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 pet p-1">
<LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
</Column>
<Column grow gap={ 1 }>
<Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
<Column alignItems="center" gap={ 1 }>
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
<Flex fit center position="absolute">
<Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
</Flex>
<Base className="bg-info rounded pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
</Base>
<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 pet p-1">
<LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
</Column>
<Column alignItems="center" gap={ 1 }>
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
<Flex fit center position="absolute">
<Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
</Flex>
<Base className="bg-purple rounded pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
</Base>
<Column grow gap={ 1 }>
<Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
<Column alignItems="center" gap={ 1 }>
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
<Flex fit center position="absolute">
<Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
</Flex>
<Base className="bg-info rounded pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
</Base>
</Column>
<Column alignItems="center" gap={ 1 }>
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
<Flex fit center position="absolute">
<Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
</Flex>
<Base className="bg-purple rounded pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
</Base>
</Column>
<Column alignItems="center" gap={ 1 }>
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
<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>
<Column alignItems="center" gap={ 1 }>
<Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
<Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
<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 gap={ 1 }>
<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>
<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>
</Flex>
<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>
<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.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>
);
}

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

@ -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 &&
<>

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

@ -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') }>

1
src/hooks/index.ts
View File

@ -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';

1
src/hooks/pets/index.ts Normal file
View File

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

16
src/hooks/pets/usePets.ts Normal file
View File

@ -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);