Update pet infostand

src/views/room/events/RoomWidgetUpdateInfostandPetEvent.ts

@@ -1,3 +1,4 @@
+import { PetFigureData } from 'nitro-renderer';
 import { RoomWidgetUpdateInfostandEvent } from './RoomWidgetUpdateInfostandEvent';
 
 export class RoomWidgetUpdateInfostandPetEvent extends RoomWidgetUpdateInfostandEvent
@@ -20,6 +21,8 @@ export class RoomWidgetUpdateInfostandPetEvent extends RoomWidgetUpdateInfostand
     public image: HTMLImageElement = null;
     public petType: number = 0;
     public petBreed: number = 0;
+    public petFigure: PetFigureData = null;
+    public posture: string = 'std';
     public isOwner: boolean = false;
     public ownerId: number = -1;
     public ownerName: string = '';

src/views/room/handlers/RoomWidgetInfostandHandler.ts

@@ -1,4 +1,4 @@
-import { IFurnitureData, Nitro, NitroEvent, ObjectDataFactory, PetType, RoomAdsUpdateComposer, RoomControllerLevel, RoomModerationParser, RoomObjectCategory, RoomObjectOperationType, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionUserBadgesEvent, RoomTradingLevelEnum, RoomUnitDropHandItemComposer, RoomUnitGiveHandItemComposer, RoomUnitGiveHandItemPetComposer, RoomUserData, RoomWidgetEnumItemExtradataParameter, SecurityLevel, Vector3d } from 'nitro-renderer';
+import { IFurnitureData, Nitro, NitroEvent, ObjectDataFactory, PetFigureData, PetType, RoomAdsUpdateComposer, RoomControllerLevel, RoomModerationParser, RoomObjectCategory, RoomObjectOperationType, RoomObjectType, RoomObjectVariable, RoomSessionPetInfoUpdateEvent, RoomSessionUserBadgesEvent, RoomTradingLevelEnum, RoomUnitDropHandItemComposer, RoomUnitGiveHandItemComposer, RoomUnitGiveHandItemPetComposer, RoomUserData, RoomWidgetEnumItemExtradataParameter, SecurityLevel, Vector3d } from 'nitro-renderer';
 import { GetConnection, GetRoomEngine, GetSessionDataManager, IsOwnerOfFurniture } from '../../../api';
 import { LocalizeText } from '../../../utils/LocalizeText';
 import { RoomWidgetObjectNameEvent, RoomWidgetUpdateEvent, RoomWidgetUpdateInfostandFurniEvent, RoomWidgetUpdateInfostandPetEvent, RoomWidgetUpdateInfostandRentableBotEvent, RoomWidgetUpdateInfostandUserEvent } from '../events';
@@ -598,27 +598,16 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
 
         if(!roomPetData) return;
 
-        const figure = roomPetData.figure;
+        const figure = new PetFigureData(roomPetData.figure);
-
-        const petType = this.getPetType(figure);
-        const petBreed = this.getPetBreed(figure);
 
         let posture: string = null;
 
-        if(petType === PetType.MONSTERPLANT)
+        if(figure.typeId === PetType.MONSTERPLANT)
         {
             if(petData.level >= petData._Str_20651) posture = 'std';
             else posture = ('grw' + petData.level);
         }
 
-        // var _local_8:String = (_local_4 + ((_local_7 != null) ? ("/posture=" + _local_7) : ""));
-        // var _local_9:BitmapData = (this._cachedPetImages.getValue(_local_8) as BitmapData);
-        // if (_local_9 == null)
-        // {
-        //     _local_9 = this._Str_2641(_local_4, _local_7);
-        //     this._cachedPetImages.add(_local_8, _local_9);
-        // }
-
         const isOwner = (petData.ownerId === GetSessionDataManager().userId);
         const infostandEvent = new RoomWidgetUpdateInfostandPetEvent(RoomWidgetUpdateInfostandPetEvent.PET_INFO);
 
@@ -627,8 +616,10 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
         infostandEvent.ownerId = petData.ownerId;
         infostandEvent.ownerName = petData.ownerName;
         infostandEvent.rarityLevel = petData.rarityLevel;
-        infostandEvent.petType = petType;
+        infostandEvent.petType = figure.typeId;
-        infostandEvent.petBreed = petBreed;
+        infostandEvent.petBreed = figure.paletteId;
+        infostandEvent.petFigure = figure;
+        infostandEvent.posture = posture;
         infostandEvent.isOwner = isOwner;
         infostandEvent.roomIndex = roomPetData.roomIndex;
         infostandEvent.level = petData.level;
@@ -748,6 +739,11 @@ export class RoomWidgetInfostandHandler extends RoomWidgetHandler
         return this.getPetFigurePart(figure, 1);
     }
 
+    private getPetColor(figure: string): number
+    {
+        return this.getPetFigurePart(figure, 2);
+    }
+
     private getPetFigurePart(figure: string, index: number): number
     {
         if(!figure || !figure.length) return -1;

src/views/room/widgets/infostand/InfoStandWidgetView.scss

@@ -7,11 +7,12 @@
 
     .nitro-infostand {
         position: relative;
-        min-width: 190px;
+        min-width: 200px;
-        max-width: 190px;
+        max-width: 200px;
         z-index: $infostand-zindex;
 	    pointer-events: auto;
-        box-shadow: inset 0 2px 0 rgba($white, .15), 0 1px 1px rgba($black, .1);
+        box-shadow: inset 0 2px 0 rgba($white, .15), inset 0 -2px rgba($black, .1), 0 1px rgba($black, .1);
+        border: 1px solid rgba($black, 0.1);
 
         .form-control-sm {
             height: 25px;
@@ -19,14 +20,6 @@
             padding: 0.1rem 0.25rem;
         }
 
-        .pet-image {
-            position: relative;
-            width: 100%;
-            height: 130px;
-            background-repeat: no-repeat;
-            background-position: center;
-        }
-
         .body-image {
             display: flex;
             align-items: center;
@@ -37,6 +30,10 @@
             border-radius: 3px;
             margin-right: 5px;
 
+            &.pet {
+                max-width: 75px;
+            }
+
             &.bot {
                 background-image: url('../../../../assets/images/infostand/bot_background.png');
                 background-repeat: no-repeat;
@@ -81,6 +78,6 @@
     }
 
     .pet-stats {
-        height: 21px;
+        height: 18px;
     }
 }

src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.tsx

@@ -10,48 +10,52 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
     if(!petData) return null;
 
     return (<>
-        <div className="d-flex flex-column bg-dark nitro-card nitro-infostand rounded nitro-infostand-user">
+        <div className="d-flex flex-column bg-dark nitro-card nitro-infostand rounded">
             <div className="container-fluid content-area">
                 <div className="d-flex justify-content-between align-items-center">
-                    <div>{ petData.name }</div>
+                    <div className="small text-wrap">
+                        { petData.name }<br />
+                        { LocalizeText('pet.breed.' + petData.petType + '.' + petData.petBreed) }</div>
                     <i className="fas fa-times cursor-pointer" onClick={ close }></i>
                 </div>
-                <hr className="m-0 my-1"/>
+                <hr className="m-0 my-1" />
                 <div className="d-flex">
-                    <div className="body-image w-100">
+                    <div className="body-image pet w-100">
-                        <PetImageView typeId={ petData.petType } paletteId={ petData.petBreed } direction={ 4 } />
+                        <PetImageView typeId={ petData.petType } paletteId={ petData.petBreed } color={ petData.petFigure.color } posture={ petData.posture } direction={ 4 } />
                     </div>
-                    <div className="w-100 d-flex flex-column justify-content-center align-items-center">
+                    <div className="w-100 d-flex flex-column align-items-center">
-                        <div className="text-center mb-2">{ LocalizeText('pet.breed.' + petData.petType + '.' + petData.petBreed) }</div>
+                        <div className="small text-center mb-1">{ LocalizeText('pet.level', ['level', 'maxlevel'], [petData.level.toString(), petData.maximumLevel.toString()]) }</div>
-                        <div className="text-center">{ LocalizeText('pet.level', ['level', 'maxlevel'], [petData.level.toString(), petData.maximumLevel.toString()]) }</div>
+                        <div className="text-center mb-1 w-100">
+                            <div className="small text-wrap mb-1">{ LocalizeText('infostand.pet.text.happiness') }</div>
+                            <div className="bg-light-dark rounded position-relative overflow-hidden">
+                                <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{ petData.happyness + '/' + petData.maximumHappyness }</div>
+                                <div className="bg-info rounded pet-stats" style={{ width: (petData.happyness / petData.maximumHappyness) * 100 + '%' }} />
+                            </div>
+                        </div>
+                        <div className="text-center mb-1 w-100">
+                            <div className="small text-wrap mb-1">{ LocalizeText('infostand.pet.text.experience') }</div>
+                            <div className="bg-light-dark rounded position-relative overflow-hidden">
+                                <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{ petData.experience + '/' + petData.levelExperienceGoal }</div>
+                                <div className="small bg-purple rounded pet-stats" style={{ width: ((petData.experience / petData.levelExperienceGoal) * 100 + '%') }} />
+                            </div>
+                        </div>
+                        <div className="text-center w-100">
+                            <div className="small text-wrap mb-1">{ LocalizeText('infostand.pet.text.energy') }</div>
+                            <div className="bg-light-dark rounded position-relative overflow-hidden">
+                                <div className="d-flex justify-content-center align-items-center w-100 h-100 position-absolute small top-0">{ petData.energy + '/' + petData.maximumEnergy }</div>
+                                <div className="small bg-success rounded pet-stats" style={{ width: (petData.energy/petData.maximumEnergy)*100 +'%' }}></div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <hr className="m-0 my-1"/>
+                <hr className="m-0 my-1" />
-                <div className="text-center mb-1">
+                <div className="small text-wrap">{ LocalizeText('infostand.text.petrespect', ['count'], [petData.respect.toString()]) }</div>
-                    <div>{ LocalizeText('infostand.pet.text.happiness') }</div>
+                <div className="small text-wrap">{ LocalizeText('pet.age', ['age'], [petData.age.toString()]) }</div>
-                    <div className="bg-light-dark rounded p-1 position-relative">
+                <hr className="m-0 my-1" />
-                        <div className="w-100 position-absolute">{ petData.happyness + '/' + petData.maximumHappyness }</div>
+                <div className="d-flex align-items-center">
-                        <div className="bg-info rounded pet-stats" style={{ width: (petData.happyness/petData.maximumHappyness)*100 +'%' }}></div>
+                    <i className="icon icon-user-profile me-1 cursor-pointer" />
-                    </div>
+                    <div className="small text-wrap">{ LocalizeText('infostand.text.petowner', ['name'], [petData.ownerName]) }</div>
                 </div>
-                <div className="text-center">
-                    <div>{ LocalizeText('infostand.pet.text.experience') }</div>
-                    <div className="bg-light-dark rounded p-1 position-relative">
-                        <div className="w-100 position-absolute">{ petData.experience + '/' + petData.levelExperienceGoal }</div>
-                        <div className="bg-purple rounded pet-stats" style={{ width: (petData.experience/petData.levelExperienceGoal)*100 +'%' }}></div>
-                    </div>
-                </div>
-                <div className="text-center">
-                    <div>{ LocalizeText('infostand.pet.text.energy') }</div>
-                    <div className="bg-light-dark rounded p-1 position-relative">
-                        <div className="w-100 position-absolute">{ petData.energy + '/' + petData.maximumEnergy }</div>
-                        <div className="bg-success rounded pet-stats" style={{ width: (petData.energy/petData.maximumEnergy)*100 +'%' }}></div>
-                    </div>
-                </div>
-                <hr className="m-0 my-1"/>
-                <div className="text-center">{ LocalizeText('infostand.text.petrespect', ['count'], [petData.respect.toString()]) }</div>
-                <div className="text-center">{ LocalizeText('pet.age', ['age'], [petData.age.toString()]) }</div>
-                <div className="text-center">{ LocalizeText('infostand.text.petowner', ['name'], [petData.ownerName]) }</div>
             </div>
         </div>
     </>);