mirror of
https://github.com/billsonnn/nitro-react.git
synced 2024-11-22 22:30:52 +01:00
InfoStand updates
This commit is contained in:
MyNameIsBatman
parent
9f76e9c90a
commit
6148839754
@ -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>
|
||||
|
||||
@ -13,13 +13,8 @@
|
||||
pointer-events: auto;
|
||||
box-shadow: inset 0 2px 0 rgba($white, .15), 0 1px 1px rgba($black, .1);
|
||||
|
||||
.avatar-image {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 130px;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: center;
|
||||
background-position-y: -8px !important;
|
||||
&.nitro-infostand-user {
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.pet-image {
|
||||
@ -52,56 +47,30 @@
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
|
||||
.grid-items {
|
||||
|
||||
.item-detail {
|
||||
height: 40px;
|
||||
max-height: 40px;
|
||||
}
|
||||
}
|
||||
.badge-image {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.motto-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
.motto-content {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.motto-input {
|
||||
width: 100%;
|
||||
padding: 5px 8px;
|
||||
background-color: rgba($secondary, 1);
|
||||
border-radius: 3px;
|
||||
height: 100%;
|
||||
font-size: 12px;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 0;
|
||||
color: rgba($white, 1);
|
||||
position: relative;
|
||||
background: transparent;
|
||||
resize: none;
|
||||
|
||||
i.icon {
|
||||
margin-right: 5px;
|
||||
&:focus {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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"/>
|
||||
|
||||
@ -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>
|
||||
</>);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user