From 2f1bbf83f95613ffd2226e1d5099225e148cf8a2 Mon Sep 17 00:00:00 2001 From: Bill Date: Sun, 11 Jul 2021 02:37:56 -0400 Subject: [PATCH] Update avatar info use product --- src/assets/images/modtool/m_icon.png | Bin 0 -> 299 bytes .../avatar-info/monsterplant-preview.png | Bin 0 -> 2048 bytes .../avatar-info/preview-background.png | Bin 0 -> 7756 bytes .../stickie-widget/stickie-christmas.png | Bin 0 -> 1272 bytes src/views/room/widgets/RoomWidgets.scss | 1 + .../avatar-info/AvatarInfoWidgetView.scss | 13 ++ .../avatar-info/AvatarInfoWidgetView.tsx | 35 ++- .../AvatarInfoUseProductConfirmView.tsx | 200 +++++++++++++++++- .../use-product/AvatarInfoUseProductView.tsx | 39 ++-- .../AvatarInfoUseProductView.types.ts | 3 +- 10 files changed, 250 insertions(+), 41 deletions(-) create mode 100644 src/assets/images/modtool/m_icon.png create mode 100644 src/assets/images/room-widgets/avatar-info/monsterplant-preview.png create mode 100644 src/assets/images/room-widgets/avatar-info/preview-background.png create mode 100644 src/assets/images/room-widgets/stickie-widget/stickie-christmas.png create mode 100644 src/views/room/widgets/avatar-info/AvatarInfoWidgetView.scss diff --git a/src/assets/images/modtool/m_icon.png b/src/assets/images/modtool/m_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..1116b4ded8492bfb4d0ff477b8281f9cea5c0e0f GIT binary patch literal 299 zcmeAS@N?(olHy`uVBq!ia0vp^(m*W7!3-o{9iMsyNHG=%xjQkeJ16rJ$YDu$^mSxl z*x1kgCy^D%R}An8aeephosyE$|NsAIp820P^UTaMXVPZQ1WFnkrvU+w@wWcKIUvPd z666;QR0ahMUjB@qfWn*w9+AaBSz!=nWSBKa0w`GH>Eak-;lKB?wNQfskAtH?&w;=E zIdvK{5}y7zHt~U&i9{549f!8llJGA{e1+aOw{Rb0*|w%_GN)egtFjw;k4tmR81B6= zkd!@WE!iXZDvS5mqnY0pUi4-=&Sa~7xX$R$F=^Sf+0tjOt-T=G-xa01O>5h}-TCEp eKi6+5V{-q(nRP&T@d}_j7(8A5T-G@yGywpMymChX literal 0 HcmV?d00001 diff --git a/src/assets/images/room-widgets/avatar-info/monsterplant-preview.png b/src/assets/images/room-widgets/avatar-info/monsterplant-preview.png new file mode 100644 index 0000000000000000000000000000000000000000..8d3d771ef46781f618464db09215eff640b7aa74 GIT binary patch literal 2048 zcmbW2`9Bj39LJX{rqSVyJn@v9BoT6@FgbD#Ifh}vMrh8+7$L*s%n?bvupvid_Atwa z4G{^`9GiF?QPP1td;W#z^Ll+g@7L#-&+Gf!_wgM&OAzoZ5C8yxz*aXMxpd>&S&)~T zmmdQXxi}W-Xn6yGAC+C>7QP@eTQdNl6)Sw;%g^oYcWj(*ap?z#XXWMQWyDq$roMa< z(%wyY-d2jvfOvT8IRt~T3AXtKLH8h+y4&l5y=@!uk3$hwmvwaBknn?qrz7viQ(`lbUS3_Byx3Qo&>#0u6g`CC#*h)Sp>celS&k$m&_c*>Ckl zfK`AhQUcD}pk!x>qV$;B0yGVwF_~+M3({@P3O-t=9c@oemxa-KaDP?SG8hb4388cO zhrsw&PDlS=0Aj{^9d}14+{!%?01%=4=VLTvJq!R4cmlp@=ImzKF%62J za68Gr5X=*N-ZUE5h|daBnZ;mL-)lzyJUR*)D>Vcoj1i{$8)m@Nl@TqJRfFuXl}6{z zYbPFsAP2DlG&x*KbopAGN*K|wNV3lv)`JwpuUim7IrUckJCO5E=f#A1?u9 zL5iE^*gOX6^q;YDsZ?UrUjp>h0R2CP;N^S6JbEufnh*H``j&UxUKy8$_krm7r{%Ew zu(b%Z_Cj9vcn;VNK}IMJLq(QFq)8k&vOqJMRU%tJy z^@^3*ro6}}mDyK80_W4&jtNp*YJD4Db*?d*K1kRrv`M=q5cTBKjB zs1m2CQPW+6iWp+;jE^V6!7AU2vUc=6TdtjJQK`^e^kaIO&!Z?dY;E$CY9o~FRIWJq z4}H&l{8n$foa~icmLjtBg4~JL?g-3B;)1!ENQBElX2tbnbe2j!RO9%mfX=1RjI{EL z4yP@XI^AU_D%}qwMWdB>r+un@9S|o7SY?$;vGC zO-=dc6fr@Z|Nfbk2=ANqK(|Fb?~JTr=}DDiu$*NvL@g-tiM46kC|j%;5#T#p`p*Mi>Ri;{gH`enzT z?&8LIROQ#5v5?REs=nlV3F~w6{-XI@v=+=p+Se8{VI(CDeQ%CHkp;}D(^UoI0sU9d z$D2G-5J6;q#?$nqtaUz4gWox$(Z`Z=;CEi(LQa314!wx|?qL?}jZHre#6t%q^COho z**vZdI-#?cCl`g(sCpOt)%=b%VyLBA1N}qyx zz}tt{ReGgiiK$#FF523-2h5zhz~)co_PAu18rl7FK$07yXs@iV(Cv9 zR%TDA%aEu-n!FpHc~iiRK#F7QvVu=@~e z8z`n|8HWZ&_~7{G`MYP>7hYdaX6`E^zE`x=_?{^mu|^Fz;`HJKowM<)@=qaoX@X=ik96b8*ISBu$L@Xy&^-ITY zgUqCzRGz)^Oq?)q>Xp3AL&30N-n-<4{a+(W^ElB;r}wJ*bXU^e+1pC55}_k^V!zsw zzV#apmO!!rab$(7G5z-PbDO9hZNkSVG=HrC8v*5jh-BG;+3ht4;A__}%h*409~@TJ zn2GxhhIRZ{W6#2aAIoAfL3NQ8n0$-gE+J$A!a;j-;CZk3ae13=g2>Osm-gOdJS+f9 z@zD04mN#MUvcY3i?MXy41~Y--F)+>Fru$XqMmFJk<$t9mDZSz90zWiyN90(L?(U+ zoN>PCz!%y`3;3fOx+_s%pvCrE&`~cSPZ$|ZS-)=+ogQHdZ2Tg!AW5HM+ZdBfi6(Vu z>_hJ2-o8YVNnBajf_g2TQ}20{ogE_2R_tLRtLH+pWKtCDrhIm+_n^$#?cXbbpD_eE ztA|W#P&3<_vp;5AVhfm;N7bp$psRJ`8T!=2s4n%cHC^B0cbrep+4&kwyC1Nh(wn>U zDQR<{#sr>C1M<}U%S8x)@!(iel3XF~RP84}q`=}C7^A>P$^Y~D>I(ZjkeYv)SIYkH zhS0L%RFqMxjOO0N?XgOwA@c6#4}~sNZ}H$E(d>5;v{G|(rkNA|LzI~lwlva4VRF9} N0DQ~tCjJIAWP@ literal 0 HcmV?d00001 diff --git a/src/assets/images/room-widgets/avatar-info/preview-background.png b/src/assets/images/room-widgets/avatar-info/preview-background.png new file mode 100644 index 0000000000000000000000000000000000000000..dea4f08dd49c0ddbc562e6eb17c854411d830cab GIT binary patch literal 7756 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 i@)lm?69u#M_4OZ#A^v;!G(p?|0000 = props => }); }, [ confirmingProduct ]); + const clearProductBubbles = useCallback(() => + { + setProductBubbles([]); + }, []); + const clearInfoStandEvent = useCallback(() => { setInfoStandEvent(null); @@ -67,6 +72,12 @@ export const AvatarInfoWidgetView: FC = props => setName(null); }, []); + const updateConfirmingProduct = useCallback((product: UseProductItem) => + { + setConfirmingProduct(product); + setProductBubbles([]); + }, []); + const onRoomWidgetRoomEngineUpdateEvent = useCallback((event: RoomWidgetRoomEngineUpdateEvent) => { switch(event.type) @@ -131,20 +142,20 @@ export const AvatarInfoWidgetView: FC = props => { if(infoStandEvent instanceof RoomWidgetUpdateInfostandFurniEvent) { - if(infoStandEvent.id === event.id) setInfoStandEvent(null); + if(infoStandEvent.id === event.id) clearInfoStandEvent(); } else if((infoStandEvent instanceof RoomWidgetUpdateInfostandUserEvent) || (infoStandEvent instanceof RoomWidgetUpdateInfostandRentableBotEvent)) { - if(infoStandEvent.roomIndex === event.id) setInfoStandEvent(null); + if(infoStandEvent.roomIndex === event.id) clearInfoStandEvent(); } else if(infoStandEvent instanceof RoomWidgetUpdateInfostandPetEvent) { - if(infoStandEvent.roomIndex === event.id) setInfoStandEvent(null); + if(infoStandEvent.roomIndex === event.id) clearInfoStandEvent(); } } - }, [ name, infoStandEvent, nameBubbles, productBubbles, removeNameBubble ]); + }, [ name, infoStandEvent, nameBubbles, productBubbles, removeNameBubble, clearInfoStandEvent ]); CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.USER_REMOVED, eventDispatcher, onRoomObjectRemoved); CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.FURNI_REMOVED, eventDispatcher, onRoomObjectRemoved); @@ -179,9 +190,9 @@ export const AvatarInfoWidgetView: FC = props => const onObjectDeselected = useCallback((event: RoomWidgetRoomObjectUpdateEvent) => { - if(infoStandEvent) setInfoStandEvent(null); + if(infoStandEvent) clearInfoStandEvent(); if(productBubbles.length) setProductBubbles([]); - }, [ infoStandEvent, productBubbles ]); + }, [ infoStandEvent, productBubbles, clearInfoStandEvent ]); CreateEventDispatcherHook(RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED, eventDispatcher, onObjectDeselected); @@ -190,7 +201,8 @@ export const AvatarInfoWidgetView: FC = props => if(event.category !== RoomObjectCategory.UNIT) return; setName(event); - }, []); + clearProductBubbles(); + }, [ clearProductBubbles ]); CreateEventDispatcherHook(RoomWidgetObjectNameEvent.TYPE, eventDispatcher, onRoomWidgetObjectNameEvent); @@ -198,9 +210,11 @@ export const AvatarInfoWidgetView: FC = props => { if(name) setName(null); - if(event.type === RoomWidgetUpdateInfostandFurniEvent.FURNI) setInfoStandEvent(null); + if(event.type === RoomWidgetUpdateInfostandFurniEvent.FURNI) clearInfoStandEvent(); else setInfoStandEvent(event); - }, [ name ]); + + clearProductBubbles(); + }, [ name, clearInfoStandEvent, clearProductBubbles ]); CreateEventDispatcherHook(RoomWidgetUpdateInfostandFurniEvent.FURNI, eventDispatcher, onRoomWidgetUpdateInfostandEvent); CreateEventDispatcherHook(RoomWidgetUpdateInfostandUserEvent.OWN_USER, eventDispatcher, onRoomWidgetUpdateInfostandEvent); @@ -225,6 +239,7 @@ export const AvatarInfoWidgetView: FC = props => const onRoomWidgetUseProductBubbleEvent = useCallback((event: RoomWidgetUseProductBubbleEvent) => { + setConfirmingProduct(null); setProductBubbles(prevValue => { const newBubbles = [ ...prevValue ]; @@ -342,7 +357,7 @@ export const AvatarInfoWidgetView: FC = props => }) } { (productBubbles.length > 0) && productBubbles.map((item, index) => { - return removeProductBubble(index) } />; + return removeProductBubble(index) } />; }) } { rentableBotChatEvent && } { confirmingProduct && setConfirmingProduct(null) } /> } diff --git a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx b/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx index 32ea2d7d..8a7b2bf9 100644 --- a/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx +++ b/src/views/room/widgets/avatar-info/views/use-product-confirm/AvatarInfoUseProductConfirmView.tsx @@ -1,9 +1,10 @@ -import { IFurnitureData, RoomObjectCategory, RoomUserData } from 'nitro-renderer'; -import { FC, useCallback, useEffect, useState } from 'react'; -import { GetFurnitureDataForRoomObject } from '../../../../../../api'; +import { IFurnitureData, PetCustomPart, PetFigureData, RoomObjectCategory, RoomObjectVariable, RoomUserData } from 'nitro-renderer'; +import { FC, useCallback, useEffect, useMemo, useState } from 'react'; +import { GetFurnitureDataForRoomObject, GetRoomEngine } from '../../../../../../api'; import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout'; import { LocalizeText } from '../../../../../../utils/LocalizeText'; import { FurniCategory } from '../../../../../inventory/common/FurniCategory'; +import { PetImageView } from '../../../../../shared/pet-image/PetImageView'; import { useRoomContext } from '../../../../context/RoomContext'; import { RoomWidgetUseProductMessage } from '../../../../messages'; import { AvatarInfoUseProductConfirmViewProps } from './AvatarInfoUseProductConfirmView.types'; @@ -28,7 +29,145 @@ export const AvatarInfoUseProductConfirmView: FC { widgetHandler.processWidgetMessage(new RoomWidgetUseProductMessage(RoomWidgetUseProductMessage.PET_PRODUCT, item.requestRoomObjectId, petData.webID)); - }, [ widgetHandler, item, petData ]); + + close(); + }, [ widgetHandler, item, petData, close ]); + + const getPetImage = useMemo(() => + { + if(!petData || !furniData) return null; + + const petFigureData = new PetFigureData(petData.figure); + const customParts = furniData.customParams.split(' '); + const petIndex = parseInt(customParts[0]); + + switch(furniData.specialType) + { + case FurniCategory._Str_7696: { + if(customParts.length < 2) return null; + + const currentPalette = GetRoomEngine().getPetColorResult(petIndex, petFigureData.paletteId); + const possiblePalettes = GetRoomEngine().getPetColorResultsForTag(petIndex, customParts[1]); + + let paletteId = -1; + + for(const result of possiblePalettes) + { + if(result.breed === currentPalette.breed) + { + paletteId = parseInt(result.id); + + break; + } + } + + return + } + case FurniCategory._Str_7297: { + if(customParts.length < 4) return null; + + const newCustomParts: PetCustomPart[] = []; + + const _local_6 = customParts[1].split(',').map(piece => parseInt(piece)); + const _local_7 = customParts[2].split(",").map(piece => parseInt(piece)); + const _local_8 = customParts[3].split(",").map(piece => parseInt(piece)); + + let _local_10 = 0; + + while(_local_10 < _local_6.length) + { + const _local_13 = _local_6[_local_10]; + const _local_15 = petFigureData.getCustomPart(_local_13); + + let _local_12 = _local_8[_local_10]; + + if (_local_15 != null) _local_12 = _local_15.paletteId; + + newCustomParts.push(new PetCustomPart(_local_13, _local_7[_local_10], _local_12)); + + _local_10++; + } + + return ; + } + case FurniCategory._Str_7954: { + if(customParts.length < 3) return null; + + const newCustomParts: PetCustomPart[] = []; + + const _local_6 = customParts[1].split(",").map(piece => parseInt(piece)); + const _local_8 = customParts[2].split(",").map(piece => parseInt(piece)); + + let _local_10 = 0; + + while(_local_10 < _local_6.length) + { + const _local_13 = _local_6[_local_10]; + const _local_15 = petFigureData.getCustomPart(_local_13); + + let _local_14 = -1; + + if(_local_15 != null) _local_14 = _local_15.partId; + + newCustomParts.push(new PetCustomPart(_local_6[_local_10], _local_14, _local_8[_local_10])); + + _local_10++; + } + + return ; + } + case FurniCategory._Str_6096: { + if(customParts.length < 4) return null; + + const newCustomParts: PetCustomPart[] = []; + + const _local_6 = customParts[1].split(',').map(piece => parseInt(piece)); + const _local_7 = customParts[2].split(",").map(piece => parseInt(piece)); + const _local_8 = customParts[3].split(",").map(piece => parseInt(piece)); + + let _local_10 = 0; + + while(_local_10 < _local_6.length) + { + newCustomParts.push(new PetCustomPart(_local_6[_local_10], _local_7[_local_10], _local_8[_local_10])); + + _local_10++; + } + + for(const _local_21 of petFigureData.customParts) + { + if(_local_6.indexOf(_local_21.layerId) === -1) + { + newCustomParts.push(_local_21); + } + } + + return ; + } + case FurniCategory._Str_8726: + case FurniCategory._Str_6915: + case FurniCategory._Str_9449: { + let posture = 'rip'; + + const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, petData.roomIndex, RoomObjectCategory.UNIT); + + if(roomObject) + { + posture = roomObject.model.getValue(RoomObjectVariable.FIGURE_POSTURE); + + if(posture === 'rip') + { + const level = petData.petLevel; + + if(level < 7) posture = `grw${ level }`; + else posture = 'std'; + } + } + + return ; + } + } + }, [ petData, furniData, roomSession ]); useEffect(() => { @@ -72,11 +211,60 @@ export const AvatarInfoUseProductConfirmView: FC + - +
+
+ { getPetImage } +
+
+
+ { (mode === _Str_11906) && + <> +
{ LocalizeText('useproduct.widget.text.shampoo', [ 'productName' ], [ furniData.name ] ) }
+
{ LocalizeText('useproduct.widget.info.shampoo') }
+ } + { (mode === _Str_11214) && + <> +
{ LocalizeText('useproduct.widget.text.custompart', [ 'productName' ], [ furniData.name ] ) }
+
{ LocalizeText('useproduct.widget.info.custompart') }
+ } + { (mode === _Str_11733) && + <> +
{ LocalizeText('useproduct.widget.text.custompartshampoo', [ 'productName' ], [ furniData.name ] ) }
+
{ LocalizeText('useproduct.widget.info.custompartshampoo') }
+ } + { (mode === _Str_11369) && + <> +
{ LocalizeText('useproduct.widget.text.saddle', [ 'productName' ], [ furniData.name ] ) }
+
{ LocalizeText('useproduct.widget.info.saddle') }
+ } + { (mode === _Str_8759) && + <> +
{ LocalizeText('useproduct.widget.text.revive_monsterplant', [ 'productName' ], [ furniData.name ] ) }
+
{ LocalizeText('useproduct.widget.info.revive_monsterplant') }
+ } + { (mode === _Str_8432) && + <> +
{ LocalizeText('useproduct.widget.text.rebreed_monsterplant', [ 'productName' ], [ furniData.name ] ) }
+
{ LocalizeText('useproduct.widget.info.rebreed_monsterplant') }
+ } + { (mode === _Str_9653) && + <> +
{ LocalizeText('useproduct.widget.text.fertilize_monsterplant', [ 'productName' ], [ furniData.name ] ) }
+
{ LocalizeText('useproduct.widget.info.fertilize_monsterplant') }
+ } +
+
+ + +
+
+
) diff --git a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx b/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx index f2e66720..aca532b0 100644 --- a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx +++ b/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.tsx @@ -20,7 +20,7 @@ const _Str_14611: number = 7; export const AvatarInfoUseProductView: FC = props => { - const { item = null, setConfirmingProduct = null, close = null } = props; + const { item = null, updateConfirmingProduct = null, close = null } = props; const [ mode, setMode ] = useState(0); const { roomSession = null } = useRoomContext(); @@ -64,30 +64,23 @@ export const AvatarInfoUseProductView: FC = props const processAction = useCallback((name: string) => { - let hideMenu = true; - - if(name) + if(!name) return; + + switch(name) { - switch(name) - { - case 'use_product': - case 'use_product_shampoo': - case 'use_product_custom_part': - case 'use_product_custom_part_shampoo': - case 'use_product_saddle': - case 'replace_product_saddle': - case 'revive_monsterplant': - case 'rebreed_monsterplant': - case 'fertilize_monsterplant': - setConfirmingProduct(item); - break; - default: - break; - } + case 'use_product': + case 'use_product_shampoo': + case 'use_product_custom_part': + case 'use_product_custom_part_shampoo': + case 'use_product_saddle': + case 'replace_product_saddle': + case 'revive_monsterplant': + case 'rebreed_monsterplant': + case 'fertilize_monsterplant': + updateConfirmingProduct(item); + break; } - - if(hideMenu) close(); - }, [ item, setConfirmingProduct, close ]); + }, [ item, updateConfirmingProduct ]); return ( diff --git a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts b/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts index 1407ee5e..f759da68 100644 --- a/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts +++ b/src/views/room/widgets/avatar-info/views/use-product/AvatarInfoUseProductView.types.ts @@ -1,9 +1,8 @@ -import { Dispatch, SetStateAction } from 'react'; import { UseProductItem } from '../../../../events'; export interface AvatarInfoUseProductViewProps { item: UseProductItem; - setConfirmingProduct: Dispatch>; + updateConfirmingProduct: (product: UseProductItem) => void; close: () => void; }