nitro
/
nitro-react
mirror of https://github.com/billsonnn/nitro-react.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Pet package widget (#127)

This commit is contained in:
object 2023-01-12 07:51:33 +01:00 committed by GitHub
parent 2b7c54e989
commit 4bc9141ea3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 241 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/ui-config.json.example
View File

@ -17,6 +17,7 @@
"badge.descriptions.enabled": true,
"motto.max.length": 38,
"bot.name.max.length": 15,
"pet.package.name.max.length": 15,
"wired.action.bot.talk.to.avatar.max.length": 64,
"wired.action.bot.talk.max.length": 64,
"wired.action.chat.max.length": 100,

BIN
src/assets/images/pets/pet-package/gnome.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/pets/pet-package/leprechaun_box.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/assets/images/pets/pet-package/petbox_epic.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/images/pets/pet-package/pterosaur_egg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/pets/pet-package/val11_present.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/images/pets/pet-package/velociraptor_egg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
src/components/room/widgets/RoomWidgets.scss
View File

@ -107,3 +107,4 @@
@import './friend-request/FriendRequestDialogView';
@import './furniture/FurnitureWidgets';
@import './mysterybox/MysteryBoxExtensionView';
@import './pet-package/PetPackageWidgetView';

2
src/components/room/widgets/RoomWidgetsView.tsx
View File

@ -10,6 +10,7 @@ import { UserChooserWidgetView } from './choosers/UserChooserWidgetView';
import { DoorbellWidgetView } from './doorbell/DoorbellWidgetView';
import { FriendRequestWidgetView } from './friend-request/FriendRequestWidgetView';
import { FurnitureWidgetsView } from './furniture/FurnitureWidgetsView';
import { PetPackageWidgetView } from './pet-package/PetPackageWidgetView';
import { RoomFilterWordsWidgetView } from './room-filter-words/RoomFilterWordsWidgetView';
import { RoomThumbnailWidgetView } from './room-thumbnail/RoomThumbnailWidgetView';
import { RoomToolsWidgetView } from './room-tools/RoomToolsWidgetView';
@ -162,6 +163,7 @@ export const RoomWidgetsView: FC<{}> = props =>
<RoomFilterWordsWidgetView />
<RoomThumbnailWidgetView />
<FurniChooserWidgetView />
<PetPackageWidgetView />
<UserChooserWidgetView />
<WordQuizWidgetView />
<FriendRequestWidgetView />

120
src/components/room/widgets/pet-package/PetPackageWidgetView.scss Normal file
View File

@ -0,0 +1,120 @@
.nitro-pet-package
{
.pet-package-container-top
{
width: 400px;
height: 120px;
border-radius: 2px;
background-color: #0E3F52;
.package-image-gnome_box
{
width: 80px;
height: 84px;
position: relative;
background-image: url('@/assets/images/pets/pet-package/gnome.png');
background-repeat: no-repeat;
-webkit-mask-image: url('@/assets/images/pets/pet-package/gnome.png');
mask-image: url('@/assets/images/pets/pet-package/gnome.png');
}
.package-image-leprechaun_box
{
width: 80px;
height: 84px;
position: relative;
background-image: url('@/assets/images/pets/pet-package/leprechaun_box.png');
background-repeat: no-repeat;
-webkit-mask-image: url('@/assets/images/pets/pet-package/leprechaun_box.png');
mask-image: url('@/assets/images/pets/pet-package/leprechaun_box.png');
}
.package-image-val11_present
{
width: 80px;
height: 84px;
position: relative;
background-image: url('@/assets/images/pets/pet-package/val11_present.png');
background-repeat: no-repeat;
-webkit-mask-image: url('@/assets/images/pets/pet-package/val11_present.png');
mask-image: url('@/assets/images/pets/pet-package/val11_present.png');
}
.package-image-velociraptor_egg
{
width: 80px;
height: 84px;
position: relative;
background-image: url('@/assets/images/pets/pet-package/velociraptor_egg.png');
background-repeat: no-repeat;
-webkit-mask-image: url('@/assets/images/pets/pet-package/velociraptor_egg.png');
mask-image: url('@/assets/images/pets/pet-package/velociraptor_egg.png');
}
.package-image-pterosaur_egg
{
width: 80px;
height: 84px;
position: relative;
background-image: url('@/assets/images/pets/pet-package/pterosaur_egg.png');
background-repeat: no-repeat;
-webkit-mask-image: url('@/assets/images/pets/pet-package/pterosaur_egg.png');
mask-image: url('@/assets/images/pets/pet-package/pterosaur_egg.png');
}
.package-image-petbox_epic
{
width: 80px;
height: 84px;
position: relative;
background-image: url('@/assets/images/pets/pet-package/petbox_epic.png');
background-repeat: no-repeat;
-webkit-mask-image: url('@/assets/images/pets/pet-package/petbox_epic.png');
mask-image: url('@/assets/images/pets/pet-package/petbox_epic.png');
}
.package-text-big
{
font-size: 16px;
}
}
.pet-package-container-bottom
{
display: flex;
justify-content: center;
width: 400px;
height: 120px;
border-radius: 2px;
background-color: #E9E9E1;
.input-pet-package-container
{
width: 380px;
border: 1px solid black;
.input-pet-package
{
width: 350px;
border: 0;
outline: 0;
}
.package-pencil-image
{
width: 16px;
height: 16px;
position: relative;
background-image: url('@/assets/images/infostand/pencil-icon.png');
background-repeat: no-repeat;
-webkit-mask-image: url('@/assets/images/infostand/pencil-icon.png');
mask-image: url('@/assets/images/infostand/pencil-icon.png');
}
}
.text-decoration
{
text-decoration: underline;
}
}
}

42
src/components/room/widgets/pet-package/PetPackageWidgetView.tsx Normal file
View File

@ -0,0 +1,42 @@
import { FC } from 'react';
import { Button } from 'react-bootstrap';
import { GetConfiguration, LocalizeText } from '../../../../api';
import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
import { usePetPackageWidget } from '../../../../hooks';
export const PetPackageWidgetView: FC<{}> = props =>
{
const { isVisible = false, errorResult = null, petName = null, objectType = null, onChangePetName = null, onConfirm = null, onClose = null } = usePetPackageWidget();
return (
<>
{ isVisible &&
<NitroCardView className="nitro-pet-package no-resize" theme="primary-slim">
<NitroCardHeaderView center headerText={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage.open') } onCloseClick={ () => onClose() } />
<NitroCardContentView>
<Flex className="pet-package-container-top p-3">
<div className={ `package-image-${ objectType } flex-shrink-0` }></div>
<div className="m-2">
<Text variant="white" className="package-text-big">{ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage') }</Text>
</div>
</Flex>
<Flex className="pet-package-container-bottom p-2">
<Column gap={ 1 }>
<Flex alignItems="center" className="bg-white rounded py-1 px-2 input-pet-package-container">
<input type="text" className="form-control form-control-sm input-pet-package" maxLength={ GetConfiguration('pet.package.name.max.length') } placeholder={ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.select') : LocalizeText('widgets.petpackage.name.title') } value={ petName } onChange={ event => onChangePetName(event.target.value) } />
<div className="package-pencil-image flex-shrink-0 small fa-icon"></div>
</Flex>
{ (errorResult.length > 0) &&
<Base className="invalid-feedback d-block m-0">{ errorResult }</Base> }
<Flex className="mt-2" gap={ 5 } display="flex" justifyContent="center" alignItems="center">
<Text pointer className="text-decoration" onClick={ () => onClose() }>{ LocalizeText('cancel') }</Text>
<Button variant={ petName.length < 3 ? 'danger' : 'success' } disabled={ petName.length < 3 } onClick={ () => onConfirm() }>{ objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.pick') : LocalizeText('furni.petpackage.confirm') }</Button>
</Flex>
</Column>
</Flex>
</NitroCardContentView>
</NitroCardView>
}
</>
);
}

1
src/hooks/rooms/widgets/index.ts
View File

@ -6,6 +6,7 @@ export * from './useDoorbellWidget';
export * from './useFilterWordsWidget';
export * from './useFriendRequestWidget';
export * from './useFurniChooserWidget';
export * from './usePetPackageWidget';
export * from './usePollWidget';
export * from './useUserChooserWidget';
export * from './useWordQuizWidget';

74
src/hooks/rooms/widgets/usePetPackageWidget.ts Normal file
View File

@ -0,0 +1,74 @@
import { OpenPetPackageMessageComposer, RoomObjectCategory, RoomSessionPetPackageEvent } from '@nitrots/nitro-renderer';
import { useState } from 'react';
import { GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../api';
import { useRoomSessionManagerEvent } from '../../events';
const usePetPackageWidgetState = () =>
{
const [ isVisible, setIsVisible ] = useState<boolean>(false);
const [ objectId, setObjectId ] = useState<number>(-1);
const [ objectType, setObjectType ] = useState<string>('');
const [ petName, setPetName ] = useState<string>('');
const [ errorResult, setErrorResult ] = useState<string>('');
const onClose = () =>
{
setErrorResult('');
setPetName('');
setObjectType('');
setObjectId(-1);
setIsVisible(false);
}
const onConfirm = () =>
{
SendMessageComposer(new OpenPetPackageMessageComposer(objectId, petName));
}
const onChangePetName = (petName: string) =>
{
setPetName(petName);
if (errorResult.length > 0) setErrorResult('');
}
const getErrorResult = (errorCode: number) =>
{
if (!errorCode || errorCode === 0) return;
switch(errorCode)
{
case 1:
return setErrorResult(LocalizeText('catalog.alert.petname.long'));
case 2:
return setErrorResult(LocalizeText('catalog.alert.petname.short'));
case 3:
return setErrorResult(LocalizeText('catalog.alert.petname.chars'));
case 4:
return setErrorResult(LocalizeText('catalog.alert.petname.bobba'));
}
}
useRoomSessionManagerEvent<RoomSessionPetPackageEvent>(RoomSessionPetPackageEvent.RSOPPE_OPEN_PET_PACKAGE_REQUESTED, event =>
{
if (!event) return;
const roomObject = GetRoomEngine().getRoomObject(event.session.roomId, event.objectId, RoomObjectCategory.FLOOR);
setObjectId(event.objectId);
setObjectType(roomObject.type);
setIsVisible(true);
});
useRoomSessionManagerEvent<RoomSessionPetPackageEvent>(RoomSessionPetPackageEvent.RSOPPE_OPEN_PET_PACKAGE_RESULT, event =>
{
if (!event) return;
if (event.nameValidationStatus === 0) onClose();
if (event.nameValidationStatus !== 0) getErrorResult(event.nameValidationStatus);
});
return { isVisible, errorResult, petName, objectType, onChangePetName, onConfirm, onClose };
}
export const usePetPackageWidget = usePetPackageWidgetState;