nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix avatar part item opacity

Browse Source
This commit is contained in:
Bill 2021-08-31 20:02:59 -04:00
parent de899e05ad
commit b04927df60
8 changed files with 29 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/layout/card/grid/item/NitroCardGridItemView.scss
View File

@ -9,6 +9,8 @@
position: relative;
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
&.theme-default {
@ -67,15 +69,6 @@
background-position-y: 12px !important;
}
.background {
background-position: center;
background-repeat: no-repeat;
&.disabled {
opacity: 0.5;
}
}
.trade-button {
position: absolute;
bottom: 2px;

6
src/layout/card/grid/item/NitroCardGridItemView.tsx
View File

@ -1,4 +1,3 @@
import classNames from 'classnames';
import { FC } from 'react';
import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView';
import { useNitroCardGridContext } from '../context';
@ -7,15 +6,14 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types';
export const NitroCardGridItemView: FC<NitroCardGridItemViewProps> = props =>
{
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, backgroundDisabled = false, children = null, ...rest } = props;
const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, children = null, ...rest } = props;
const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext();
const imageUrl = `url(${ itemImage })`;
return (
<div className={ `${ columns === undefined ? 'col' : ('col-' + columns) } pb-1 grid-item-container` }>
<div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } { ...rest }>
<div className={'background position-absolute w-100 h-100' + classNames({ ' disabled': backgroundDisabled })} style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) }></div>
<div className={ `grid-item ${ theme } cursor-pointer${ itemActive ? ' active' : '' }${ itemUnique ? ' unique-item' : '' }${ itemUnseen ? ' unseen' : ''}${ (itemImage === null ? ' icon loading-icon': '')} ${ className || '' }` } style={ itemImage ? { ...style, backgroundImage: imageUrl } : (itemColor ? { ...style, backgroundColor: itemColor } : style) } { ...rest }>
{ (itemCount > 1) &&
<span className="position-absolute badge border bg-danger px-1 rounded-circle">{ itemCount }</span> }
{ itemUnique &&

1
src/layout/card/grid/item/NitroCardGridItemView.types.ts
View File

@ -10,5 +10,4 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes<HTMLDi
itemUniqueNumber?: number;
itemUnseen?: boolean;
columns?: number;
backgroundDisabled?: boolean;
}

14
src/views/avatar-editor/AvatarEditorView.tsx
View File

@ -1,6 +1,6 @@
import { AvatarDirectionAngle, AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
import { AvatarDirectionAngle, AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetClubMemberLevel, GetSessionDataManager, LocalizeText } from '../../api';
import { GetAvatarRenderManager, GetClubMemberLevel, GetSessionDataManager, LocalizeText } from '../../api';
import { AvatarEditorEvent } from '../../events/avatar-editor';
import { CreateMessageHook, SendMessageHook } from '../../hooks';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
@ -31,7 +31,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
const [ activeCategory, setActiveCategory ] = useState<IAvatarEditorCategoryModel>(null);
const [ figureSetIds, setFigureSetIds ] = useState<number[]>([]);
const [ boundFurnitureNames, setBoundFurnitureNames ] = useState<string[]>([]);
const [ savedFigures, setSavedFigures ] = useState<[ string, string ][]>(new Array(MAX_SAVED_FIGURES));
const [ savedFigures, setSavedFigures ] = useState<[ IAvatarFigureContainer, string ][]>(new Array(MAX_SAVED_FIGURES));
const [ isWardrobeVisible, setIsWardrobeVisible ] = useState(false);
const [ lastFigure, setLastFigure ] = useState<string>(null);
const [ lastGender, setLastGender ] = useState<string>(null);
@ -79,7 +79,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
const onUserWardrobePageEvent = useCallback((event: UserWardrobePageEvent) =>
{
const parser = event.getParser();
const savedFigures: [ string, string ][] = [];
const savedFigures: [ IAvatarFigureContainer, string ][] = [];
let i = 0;
@ -90,9 +90,11 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
i++;
}
for(let [ index, value ] of parser.looks.entries())
for(let [ index, [ look, gender ] ] of parser.looks.entries())
{
savedFigures[(index - 1)] = [ value[0], value[1] ];
const container = GetAvatarRenderManager().createFigureContainer(look);
savedFigures[(index - 1)] = [ container, gender ];
}
setSavedFigures(savedFigures)

7
src/views/avatar-editor/common/AvatarEditorGridPartItem.ts
View File

@ -1,9 +1,10 @@
import { AvatarFigurePartType, IAvatarImageListener, IAvatarRenderManager, IFigurePart, IFigurePartSet, IGraphicAsset, IPartColor, NitroContainer, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
import { AvatarFigurePartType, IAvatarImageListener, IAvatarRenderManager, IFigurePart, IFigurePartSet, IGraphicAsset, IPartColor, NitroAlphaFilter, NitroContainer, NitroSprite, TextureUtils } from '@nitrots/nitro-renderer';
import { GetAvatarRenderManager } from '../../../api';
import { FigureData } from './FigureData';
export class AvatarEditorGridPartItem implements IAvatarImageListener
{
private static ALPHA_FILTER: NitroAlphaFilter = new NitroAlphaFilter(0.2);
private static THUMB_DIRECTIONS: number[] = [2, 6, 0, 4, 3, 1];
private static DRAW_ORDER: string[] = [
AvatarFigurePartType.LEFT_HAND_ITEM,
@ -209,7 +210,7 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener
this._isSellable = false;
}
//if(this._isDisabled) this.setAlpha(container, 0.2);
if(this._isDisabled) this.setAlpha(container, 0.2);
this._imageUrl = TextureUtils.generateImageUrl(container);
@ -218,7 +219,7 @@ export class AvatarEditorGridPartItem implements IAvatarImageListener
private setAlpha(container: NitroContainer, alpha: number): NitroContainer
{
container.alpha = alpha;
container.filters = [ AvatarEditorGridPartItem.ALPHA_FILTER ];
return container;
}

2
src/views/avatar-editor/views/figure-set-item/AvatarEditorFigureSetItemView.tsx
View File

@ -24,7 +24,7 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
})
return (
<NitroCardGridItemView backgroundDisabled={ partItem.isDisabled } itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }>
<NitroCardGridItemView itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }>
{ partItem.isHC && <CurrencyIcon className="position-absolute end-1 bottom-1" type={ 'hc' } /> }
{ partItem.isClear && <i className="icon clear-icon" /> }
{ partItem.isSellable && <i className="position-absolute icon sellable-icon end-1 bottom-1" /> }

22
src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
View File

@ -1,11 +1,13 @@
import { SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback, useMemo } from 'react';
import { Button } from 'react-bootstrap';
import { GetAvatarRenderManager } from '../../../../api';
import { SendMessageHook } from '../../../../hooks';
import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
import { AvatarImageView } from '../../../shared/avatar-image/AvatarImageView';
import { CurrencyIcon } from '../../../shared/currency-icon/CurrencyIcon';
import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types';
export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props =>
@ -18,7 +20,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
const [ figure, gender ] = savedFigures[index];
loadAvatarInEditor(figure, gender);
loadAvatarInEditor(figure.getFigureString(), gender);
}, [ savedFigures, loadAvatarInEditor ]);
const saveFigureAtWardrobeIndex = useCallback((index: number) =>
@ -30,7 +32,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
const figure = figureData.getFigureString();
const gender = figureData.gender;
newFigures[index] = [ figure, gender ];
newFigures[index] = [ GetAvatarRenderManager().createFigureContainer(figure), gender ];
setSavedFigures(newFigures);
SendMessageHook(new SaveWardrobeOutfitMessageComposer((index + 1), figure, gender));
@ -42,23 +44,17 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
const items: JSX.Element[] = [];
savedFigures.forEach((figure, index) =>
savedFigures.forEach(([ figureContainer, gender ], index) =>
{
let figureString = null;
let gender = null;
if(figure)
{
figureString = (figure[0] || null);
gender = (figure[1] || null);
}
const clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
items.push(
<NitroCardGridItemView key={ index } className="flex-column justify-content-end">
{ figureString && <AvatarImageView figure={ figureString } gender={ gender } direction={ 2 } /> }
{ figureContainer && <AvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
{ clubLevel > 0 && <CurrencyIcon type="hc" /> }
<div className="d-flex w-100 figure-button-container p-1">
<Button variant="link" size="sm" className="w-100" onClick={ event => saveFigureAtWardrobeIndex(index) }>Save</Button>
{ figureString && <Button variant="link" size="sm" className="w-100" onClick={ event => wearFigureAtIndex(index) }>Use</Button> }
{ figureContainer && <Button variant="link" size="sm" className="w-100" onClick={ event => wearFigureAtIndex(index) }>Use</Button> }
</div>
</NitroCardGridItemView>
);

5
src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.types.ts
View File

@ -1,10 +1,11 @@
import { IAvatarFigureContainer } from '@nitrots/nitro-renderer';
import { Dispatch, SetStateAction } from 'react';
import { FigureData } from '../../common/FigureData';
export interface AvatarEditorWardrobeViewProps
{
figureData: FigureData;
savedFigures: [ string, string ][];
setSavedFigures: Dispatch<SetStateAction<[ string, string][]>>;
savedFigures: [ IAvatarFigureContainer, string ][];
setSavedFigures: Dispatch<SetStateAction<[ IAvatarFigureContainer, string][]>>;
loadAvatarInEditor: (figure: string, gender: string, reset?: boolean) => void;
}