From 4bc9141ea304846fb48c2dfb553937ae2b1e093c Mon Sep 17 00:00:00 2001 From: object <110488133+oobjectt@users.noreply.github.com> Date: Thu, 12 Jan 2023 07:51:33 +0100 Subject: [PATCH] Pet package widget (#127) --- public/ui-config.json.example | 1 + src/assets/images/pets/pet-package/gnome.png | Bin 0 -> 1600 bytes .../pets/pet-package/leprechaun_box.png | Bin 0 -> 1520 bytes .../images/pets/pet-package/petbox_epic.png | Bin 0 -> 2180 bytes .../images/pets/pet-package/pterosaur_egg.png | Bin 0 -> 1631 bytes .../images/pets/pet-package/val11_present.png | Bin 0 -> 2720 bytes .../pets/pet-package/velociraptor_egg.png | Bin 0 -> 1511 bytes src/components/room/widgets/RoomWidgets.scss | 1 + .../room/widgets/RoomWidgetsView.tsx | 2 + .../pet-package/PetPackageWidgetView.scss | 120 ++++++++++++++++++ .../pet-package/PetPackageWidgetView.tsx | 42 ++++++ src/hooks/rooms/widgets/index.ts | 1 + .../rooms/widgets/usePetPackageWidget.ts | 74 +++++++++++ 13 files changed, 241 insertions(+) create mode 100644 src/assets/images/pets/pet-package/gnome.png create mode 100644 src/assets/images/pets/pet-package/leprechaun_box.png create mode 100644 src/assets/images/pets/pet-package/petbox_epic.png create mode 100644 src/assets/images/pets/pet-package/pterosaur_egg.png create mode 100644 src/assets/images/pets/pet-package/val11_present.png create mode 100644 src/assets/images/pets/pet-package/velociraptor_egg.png create mode 100644 src/components/room/widgets/pet-package/PetPackageWidgetView.scss create mode 100644 src/components/room/widgets/pet-package/PetPackageWidgetView.tsx create mode 100644 src/hooks/rooms/widgets/usePetPackageWidget.ts diff --git a/public/ui-config.json.example b/public/ui-config.json.example index 8b1ab50b..2187bc03 100644 --- a/public/ui-config.json.example +++ b/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, diff --git a/src/assets/images/pets/pet-package/gnome.png b/src/assets/images/pets/pet-package/gnome.png new file mode 100644 index 0000000000000000000000000000000000000000..2c3882802278c259ba0f5a07d6ac467c67dff235 GIT binary patch literal 1600 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 V(Y~5D$Q0iQK%-ocOnY4Xe*yh$$o>ET literal 0 HcmV?d00001 diff --git a/src/assets/images/pets/pet-package/pterosaur_egg.png b/src/assets/images/pets/pet-package/pterosaur_egg.png new file mode 100644 index 0000000000000000000000000000000000000000..43ee1418ab722ebea561ceb72fe7381d61408c7e GIT binary patch literal 1631 zcmb`H`#;kS6vsFBrZul}sYPy~+7MPtjc2oFr*+F(=c zyPnDkY5n_A>6=GaMju~$(adc~uruDh>%kih0Mdu57&dE`yTT)%xs}e-{th7*sRD3NrD`>E*9Ed*>d(H-6yGU!e zOdpG@DJNoB4lZOHGSxQyqC=UG5yrtEjz6^@9tdUgN#(Dy?9*Ju0PDc>%LI337epQ6ko zDpqF-4w8C5UjOy@k4A%|7W(X-Z%Yw28ZnnkVyA6wS4;ma8*@LqdvP(=OL@2?a2}W; z*JN=RembbYh_W#{+p^m*GE*2+4~ojsMKH~kim5~S|NNy=+1WT|pfO)D6QVkCDGht~ zPF}-GuuV3;=0WrDdVp#jc&=@P(VT!j#EtlQ${V2(UNgEuj5vZy_|si9J?DAP)raQQ zAbc>KHzzrC5cBrk0s*gI2hJkQEyGq-e|n&{u5tsAsy;d6V1m6JPUa`z?pP(xAi9Cvuqe%f!e~L`{W*TfE*t&29pW>NeX}V0CB+j2wn_%H zH}Ds4OJvDwVkKj?wO_U-PA+;S953?K6-C8&J)e3pd$E@zd1{?^3p%w@jH~=x6W#e_ zbja!ez*_Kxr(bVdI*I=R?A*L?l{5M3<=6+V8T1}vGO54UG`$;I%;j6oL?xi~Zde=xA2x+SD6zo%g&=xYfv|9rG}~x}qBosx?2dh@Pr{ ziPq+kk6C*^Ov39JWv@g0pXY2sZjCeTd1o6=tCo*-H90dp!;0DD<_%_I zJGzzpTuf&4ZG$B}#%-u)XyI{DI#8 z)kvUyd!p)|-T}?96wQY6<=hs_GeG@!<%uH0=bE3DzA}9@EGv=f!E^j2G8Qeh@y19O zk(m`ii8?2PWU?s$)y-HmqCBDl(G~?frM#Rs{BrS~?wY4DxF*&)i1jnTlM+wZlKk{` zhl2K}sQob!vj;BjE)-VACu`AO-DYij2m%mwO_62S*=3Mo<0I{gf~rLKn(*9Xk2f11 zotRhB*3?2`f#ls)#_rkc8BnbCfU-c6rBETr5c@YYL+DyP(~xiM;V^E8oOC%U(Iw-aY#8Ar4%!z@1x1^6>J<26862AFg(w@%{zE C?iq*x literal 0 HcmV?d00001 diff --git a/src/assets/images/pets/pet-package/val11_present.png b/src/assets/images/pets/pet-package/val11_present.png new file mode 100644 index 0000000000000000000000000000000000000000..3d371b5b3747985100af5278106f3c87b5462982 GIT binary patch literal 2720 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 N002ovPDHLkV1jkP!14e9 literal 0 HcmV?d00001 diff --git a/src/components/room/widgets/RoomWidgets.scss b/src/components/room/widgets/RoomWidgets.scss index a6e0b347..6198731b 100644 --- a/src/components/room/widgets/RoomWidgets.scss +++ b/src/components/room/widgets/RoomWidgets.scss @@ -107,3 +107,4 @@ @import './friend-request/FriendRequestDialogView'; @import './furniture/FurnitureWidgets'; @import './mysterybox/MysteryBoxExtensionView'; +@import './pet-package/PetPackageWidgetView'; diff --git a/src/components/room/widgets/RoomWidgetsView.tsx b/src/components/room/widgets/RoomWidgetsView.tsx index 8f1bd8a6..c2202995 100644 --- a/src/components/room/widgets/RoomWidgetsView.tsx +++ b/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 => + diff --git a/src/components/room/widgets/pet-package/PetPackageWidgetView.scss b/src/components/room/widgets/pet-package/PetPackageWidgetView.scss new file mode 100644 index 00000000..9c5a4131 --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx b/src/components/room/widgets/pet-package/PetPackageWidgetView.tsx new file mode 100644 index 00000000..048c9aa3 --- /dev/null +++ b/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 && + + onClose() } /> + + +
+
+ { objectType === 'gnome_box' ? LocalizeText('widgets.gnomepackage.name.title') : LocalizeText('furni.petpackage') } +
+ + + + + onChangePetName(event.target.value) } /> +
+ + { (errorResult.length > 0) && + { errorResult } } + + onClose() }>{ LocalizeText('cancel') } + + + + + + + } + + ); +} diff --git a/src/hooks/rooms/widgets/index.ts b/src/hooks/rooms/widgets/index.ts index bb8b9e88..99844508 100644 --- a/src/hooks/rooms/widgets/index.ts +++ b/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'; diff --git a/src/hooks/rooms/widgets/usePetPackageWidget.ts b/src/hooks/rooms/widgets/usePetPackageWidget.ts new file mode 100644 index 00000000..0b61de0f --- /dev/null +++ b/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(false); + const [ objectId, setObjectId ] = useState(-1); + const [ objectType, setObjectType ] = useState(''); + const [ petName, setPetName ] = useState(''); + const [ errorResult, setErrorResult ] = useState(''); + + 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.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.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;