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;