InfoStand updates

src/views/inventory/views/badge/InventoryBadgeView.tsx

@@ -95,7 +95,7 @@ export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
                                     <p className="mb-0">{ LocalizeBadgeName(badge) }</p>
                                 </div>
                             </div>
-                            <button type="button" className={ 'btn btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
+                            <button type="button" className={ 'btn btn-' + (isWearingBadge(badge) ? 'danger' : 'success') } disabled={ !isWearingBadge(badge) && !canWearBadges() } onClick={ toggleBadge }>{ LocalizeText(isWearingBadge(badge) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge')}</button>
                         </div> }
                     <div className="d-flex justify-content-center align-items-center bg-primary rounded p-1">
                         <div className="h6 m-0 text-white">{ LocalizeText('achievements_score_description', [ 'score' ], [ '0' ]) }</div>

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

@@ -13,13 +13,8 @@
 	    pointer-events: auto;
         box-shadow: inset 0 2px 0 rgba($white, .15), 0 1px 1px rgba($black, .1);
 
-        .avatar-image {
+        &.nitro-infostand-user {
-            position: relative;
+            max-width: 180px;
-            width: 90px;
-            height: 130px;
-            background-repeat: no-repeat;
-            background-position-x: center;
-            background-position-y: -8px !important;
         }
 
         .pet-image {
@@ -52,56 +47,30 @@
             }
         }
 
-        .grid-container {
+        .badge-image {
-    
+            width: 45px;
-            .grid-items {
+            height: 45px;
-        
-                .item-detail {
-                    height: 40px;
-                    max-height: 40px;
-                }
-            }
         }
 
-        .motto-container {
+        .motto-content {
-            display: flex;
+            min-height: 18px;
-            align-items: center;
+        }
-            min-height: 28px;
+
+        .motto-input {
             width: 100%;
-            padding: 5px 8px;
+            height: 100%;
-            background-color: rgba($secondary, 1);
+            font-size: 12px;
-            border-radius: 3px;
+            padding: 0;
+            outline: 0;
+            border: 0;
+            color: rgba($white, 1);
+            position: relative;
+            background: transparent;
+            resize: none;
 
-            i.icon {
+            &:focus {
-                margin-right: 5px;
+                font-style: italic;
             }
-
-            .motto {
-                font-size: 12px;
-                width: 100%;
-                word-break: break-word;
-            }
-
-            .motto-input {
-                width: 100%;
-                height: 100%;
-                font-size: 12px;
-                padding: 0;
-                outline: 0;
-                border: 0;
-                color: rgba($white, 1);
-                position: relative;
-                background: transparent;
-                resize: none;
-
-                &:focus {
-                    font-style: italic;
-                }
-            }
-        }
-
-        p {
-            display: block;
         }
     }
 

src/views/room/widgets/infostand/views/furni/InfoStandWidgetFurniView.tsx

@@ -13,6 +13,7 @@ const PICKUP_MODE_FULL: number = 2;
 export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props =>
 {
     const { furniData = null, close = null } = props;
+    
     const [ pickupMode, setPickupMode ] = useState(0);
     const [ canMove, setCanMove ] = useState(false);
     const [ canRotate, setCanRotate ] = useState(false);
@@ -180,7 +181,7 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
             <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 className="">{ furniData.name }</div>
+                        <div>{ furniData.name }</div>
                         <i className="fas fa-times cursor-pointer" onClick={ close }></i>
                     </div>
                     <hr className="m-0 my-1"/>

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

@@ -1,9 +1,118 @@
-import { FC } from 'react';
+import classNames from 'classnames';
+import { FC, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
+import { LocalizeText } from '../../../../../../utils/LocalizeText';
+import { AvatarImageView } from '../../../../../avatar-image/AvatarImageView';
+import { BadgeImageView } from '../../../../../badge-image/BadgeImageView';
+import { RoomWidgetUpdateInfostandUserEvent } from '../../../../events/RoomWidgetUpdateInfostandUserEvent';
 import { InfoStandWidgetUserViewProps } from './InfoStandWidgetUserView.types';
 
 export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =>
 {
     const { userData = null, close = null } = props;
 
-    return null;
+    const [ motto, setMotto ]                       = useState(null);
+    const [ isEditingMotto, setIsEditingMotto ]   = useState(false);
+
+    const inputRef = useRef<HTMLInputElement>();
+
+    useEffect(() =>
+    {
+        setIsEditingMotto(false);
+        setMotto(null);
+        
+        if(!motto) setMotto(userData.motto);
+    }, [ userData ]);
+
+    const saveMotto = useCallback(() =>
+    {
+        setIsEditingMotto(false);
+    }, [ motto ]);
+
+    const editMotto = useCallback(() =>
+    {
+        setIsEditingMotto(true);
+        setTimeout(() =>
+        {
+            if(inputRef.current) inputRef.current.focus();
+        }, 100);
+    }, [ inputRef ]);
+
+    const onKeyDownEvent = useCallback((event: KeyboardEvent<HTMLInputElement>) =>
+    {
+        switch(event.key)
+        {
+            case 'Enter':
+                saveMotto();
+
+                const target = (event.target as HTMLInputElement);
+                target.blur();
+                return;
+        }
+        
+    }, []);
+
+    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>{ userData.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">
+                            <AvatarImageView figure={ userData.figure } direction={ 4 } />
+                        </div>
+                        <div>
+                            <div className="d-flex justify-content-between">
+                                <div className="badge-image">
+                                    { userData.badges[0] && <BadgeImageView badgeCode={ userData.badges[0] } /> }
+                                </div>
+                                <div className="badge-image">
+                                    { userData.groupId > 0 && <BadgeImageView badgeCode={ userData.groupBadgeId } isGroup={ true } /> }
+                                </div>
+                            </div>
+                            <div className="d-flex justify-content-between">
+                                <div className="badge-image">
+                                    { userData.badges[1] && <BadgeImageView badgeCode={ userData.badges[1] } /> }
+                                </div>
+                                <div className="badge-image">
+                                    { userData.badges[2] && <BadgeImageView badgeCode={ userData.badges[2] } /> }
+                                </div>
+                            </div>
+                            <div className="d-flex justify-content-between">
+                                <div className="badge-image">
+                                    { userData.badges[3] && <BadgeImageView badgeCode={ userData.badges[3] } /> }
+                                </div>
+                                <div className="badge-image">
+                                    { userData.badges[4] && <BadgeImageView badgeCode={ userData.badges[4] } /> }
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <hr className="m-0 my-1"/>
+                    <div className="bg-secondary 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">
+                                <i className="fas fa-pencil-alt"></i>
+                            </div>
+                            <div className="h-100 w-100">
+                                { !isEditingMotto && <div className="motto-content cursor-pointer w-100 text-wrap text-break" onClick={ () => editMotto() }>{ motto }</div> }
+                                <input ref={ inputRef } type="text" className={ "motto-input" + classNames({ ' d-none': !isEditingMotto }) } maxLength={ 38 } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ () => saveMotto() } onKeyDown={ event => onKeyDownEvent(event) }/>
+                            </div>
+                        </div> }
+                    </div>
+                    <hr className="m-0 my-1"/>
+                    <div>
+                        { LocalizeText('infostand.text.achievement_score') + ' ' + userData.achievementScore }
+                    </div>
+                    { userData.carryItem > 0 && <>
+                        <hr className="m-0 my-1"/>
+                        { LocalizeText('infostand.text.handitem', ['item'], [LocalizeText('handitem' + userData.carryItem)]) }
+                    </> }
+                </div>
+            </div>
+        </>);
 }