Pet package widget (#127)

public/ui-config.json.example

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

src/components/room/widgets/RoomWidgets.scss

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

src/components/room/widgets/RoomWidgetsView.tsx

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

src/components/room/widgets/pet-package/PetPackageWidgetView.scss

@@ -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;
+        }
+    }
+}

src/components/room/widgets/pet-package/PetPackageWidgetView.tsx

@@ -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>
+            }
+        </>
+    );
+}

src/hooks/rooms/widgets/index.ts

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

src/hooks/rooms/widgets/usePetPackageWidget.ts

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