PetInfoStand

src/assets/styles/bootstrap/_variables.scss

@@ -81,6 +81,7 @@ $warning:       $yellow !default;
 $danger:        #C23027 !default;
 $light:         #DFDFDF !default;
 $dark:          $gray-900 !default;
+$light-dark:    $gray-800 !default;
 
 
 // scss-docs-end theme-color-variables
@@ -99,9 +100,11 @@ $theme-colors: (
   "danger":     $danger,
   "light":      $light,
   "dark":       $dark,
+  "light-dark": $light-dark,
   "white":      $white,
   "black":      $black,
-  "muted":      $muted
+  "muted":      $muted,
+  "purple":     $purple
 ) !default;
 // scss-docs-end theme-colors-map
 

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

@@ -29,7 +29,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background-color: rgba($secondary, 1);
+            background-color: rgba($light-dark, 1);
             width: 100%;
             max-width: 68px;
             border-radius: 3px;
@@ -77,4 +77,8 @@
     .button-container {
 	    pointer-events: auto;
     }
+
+    .pet-stats {
+        height: 21px;
+    }
 }

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

@@ -6,6 +6,7 @@ import { RoomWidgetRoomObjectMessage } from '../../messages';
 import { InfoStandWidgetViewProps } from './InfoStandWidgetView.types';
 import { InfoStandWidgetBotView } from './views/bot/InfoStandWidgetBotView';
 import { InfoStandWidgetFurniView } from './views/furni/InfoStandWidgetFurniView';
+import { InfoStandWidgetPetView } from './views/pet/InfoStandWidgetPetView';
 import { InfoStandWidgetRentableBotView } from './views/rentable-bot/InfoStandWidgetRentableBotView';
 import { InfoStandWidgetUserView } from './views/user/InfoStandWidgetUserView';
 
@@ -111,6 +112,8 @@ export const InfoStandWidgetView: FC<InfoStandWidgetViewProps> = props =>
                 return <InfoStandWidgetBotView botData={ (infoStandEvent as RoomWidgetUpdateInfostandUserEvent) } close={ closeInfostand } />;
             case RoomWidgetUpdateInfostandRentableBotEvent.RENTABLE_BOT:
                 return <InfoStandWidgetRentableBotView rentableBotData={ (infoStandEvent as RoomWidgetUpdateInfostandRentableBotEvent) } close={ closeInfostand } />;
+            case RoomWidgetUpdateInfostandPetEvent.PET_INFO:
+                return <InfoStandWidgetPetView petData={ (infoStandEvent as RoomWidgetUpdateInfostandPetEvent) } close={ closeInfostand } />
         }
 
         return null;

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

@@ -0,0 +1,58 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { PetImageView } from '../../../../../pet-image/PetImageView';
+import { InfoStandWidgetPetViewProps } from './InfoStandWidgetPetView.types';
+
+export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
+{
+    const { petData = null, close = null } = props;
+
+    if(!petData) return null;
+
+    return (<>
+        <div className="d-flex flex-column bg-dark nitro-card nitro-infostand rounded nitro-infostand-user">
+            <div className="container-fluid content-area">
+                <div className="d-flex justify-content-between align-items-center">
+                    <div>{ petData.name }</div>
+                    <i className="fas fa-times cursor-pointer" onClick={ close }></i>
+                </div>
+                <hr className="m-0 my-1"/>
+                <div className="d-flex">
+                    <div className="body-image w-100">
+                        <PetImageView typeId={ petData.petType } paletteId={ petData.petBreed } direction={ 4 } />
+                    </div>
+                    <div className="w-100 d-flex flex-column justify-content-center align-items-center">
+                        <div className="text-center mb-2">{ LocalizeText('pet.breed.' + petData.petType + '.' + petData.petBreed) }</div>
+                        <div className="text-center">{ LocalizeText('pet.level', ['level', 'maxlevel'], [petData.level.toString(), petData.maximumLevel.toString()]) }</div>
+                    </div>
+                </div>
+                <hr className="m-0 my-1"/>
+                <div className="text-center mb-1">
+                    <div>{ LocalizeText('infostand.pet.text.happiness') }</div>
+                    <div className="bg-light-dark rounded p-1 position-relative">
+                        <div className="w-100 position-absolute">{ petData.happyness + '/' + petData.maximumHappyness }</div>
+                        <div className="bg-info rounded pet-stats" style={{ width: (petData.happyness/petData.maximumHappyness)*100 +'%' }}></div>
+                    </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>
+    </>);
+}

src/views/room/widgets/infostand/views/pet/InfoStandWidgetPetView.types.ts

@@ -0,0 +1,7 @@
+import { RoomWidgetUpdateInfostandPetEvent } from '../../../../events';
+
+export interface InfoStandWidgetPetViewProps
+{
+    petData: RoomWidgetUpdateInfostandPetEvent;
+    close: () => void;
+}

src/views/room/widgets/infostand/views/user/InfoStandWidgetUserView.tsx

@@ -94,7 +94,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                         </div>
                     </div>
                     <hr className="m-0 my-1"/>
-                    <div className="bg-secondary rounded py-1 px-2 small">
+                    <div className="bg-light-dark rounded py-1 px-2 small">
                         { userData.type !== RoomWidgetUpdateInfostandUserEvent.OWN_USER && <div className="motto-content">{ motto }</div> }
                         { userData.type === RoomWidgetUpdateInfostandUserEvent.OWN_USER && <div className="d-flex justify-content-between align-items-center">
                             <div className="me-2">