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

More updates

Browse Source
This commit is contained in:
Bill 2021-07-21 05:31:36 -04:00
parent 918d2eb6bd
commit 8f883bc761
8 changed files with 98 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/avatareditor/sellable-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 229 B

6
src/assets/styles/icons.scss
View File

@ -329,6 +329,12 @@
}
}
&.sellable-icon {
background-image: url('../images/avatareditor/sellable-icon.png');
width: 17px;
height: 15px;
}
&.chatstyles-icon {
background-image: url('../images/chat/styles-icon.png');
width: 17px;

16
src/assets/styles/utils.scss
View File

@ -43,22 +43,6 @@ ul {
pointer-events: none;
}
.t-0 {
top: 0 !important;
}
.b-0 {
bottom: 0 !important;
}
.l-0 {
left: 0 !important;
}
.r-0 {
right: 0 !important;
}
.filter-none {
filter: unset !important;
}

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

@ -1,8 +1,8 @@
import { AvatarDirectionAngle, AvatarEditorFigureCategory, UserFigureComposer } from 'nitro-renderer';
import { AvatarDirectionAngle, AvatarEditorFigureCategory, FigureSetIdsMessageEvent, UserFigureComposer } from 'nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetSessionDataManager } from '../../api';
import { AvatarEditorEvent } from '../../events/avatar-editor';
import { SendMessageHook } from '../../hooks';
import { CreateMessageHook, SendMessageHook } from '../../hooks';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
import { LocalizeText } from '../../utils/LocalizeText';
@ -27,11 +27,41 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
const [ figureData, setFigureData ] = useState<FigureData>(null);
const [ categories, setCategories ] = useState<Map<string, IAvatarEditorCategoryModel>>(null);
const [ activeCategory, setActiveCategory ] = useState<IAvatarEditorCategoryModel>(null);
const [ figureSetIds, setFigureSetIds ] = useState<number[]>([]);
const [ boundFurnitureNames, setBoundFurnitureNames ] = useState<string[]>([]);
const [ lastFigure, setLastFigure ] = useState<string>(null);
const [ lastGender, setLastGender ] = useState<string>(null);
const [ needsReset, setNeedsReset ] = useState(false);
const [ isInitalized, setIsInitalized ] = useState(false);
const onAvatarEditorEvent = useCallback((event: AvatarEditorEvent) =>
{
switch(event.type)
{
case AvatarEditorEvent.SHOW_EDITOR:
setIsVisible(true);
setNeedsReset(true);
return;
case AvatarEditorEvent.HIDE_EDITOR:
setIsVisible(false);
return;
case AvatarEditorEvent.TOGGLE_EDITOR:
setIsVisible(prevValue =>
{
const flag = !prevValue;
if(flag) setNeedsReset(true);
return flag;
});
return;
}
}, []);
useUiEvent(AvatarEditorEvent.SHOW_EDITOR, onAvatarEditorEvent);
useUiEvent(AvatarEditorEvent.HIDE_EDITOR, onAvatarEditorEvent);
useUiEvent(AvatarEditorEvent.TOGGLE_EDITOR, onAvatarEditorEvent);
const selectCategory = useCallback((name: string) =>
{
if(!categories) return;
@ -87,34 +117,6 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
}
}, [ figures, figureData ]);
const onAvatarEditorEvent = useCallback((event: AvatarEditorEvent) =>
{
switch(event.type)
{
case AvatarEditorEvent.SHOW_EDITOR:
setIsVisible(true);
setNeedsReset(true);
return;
case AvatarEditorEvent.HIDE_EDITOR:
setIsVisible(false);
return;
case AvatarEditorEvent.TOGGLE_EDITOR:
setIsVisible(prevValue =>
{
const flag = !prevValue;
if(flag) setNeedsReset(true);
return flag;
});
return;
}
}, []);
useUiEvent(AvatarEditorEvent.SHOW_EDITOR, onAvatarEditorEvent);
useUiEvent(AvatarEditorEvent.HIDE_EDITOR, onAvatarEditorEvent);
useUiEvent(AvatarEditorEvent.TOGGLE_EDITOR, onAvatarEditorEvent);
const clearFigure = useCallback(() =>
{
loadAvatarInEditor(figureData.getFigureStringWithFace(0, false), figureData.gender, false);
@ -145,6 +147,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
const saveFigure = useCallback(() =>
{
SendMessageHook(new UserFigureComposer(figureData.gender, figureData.getFigureString()));
setIsVisible(false);
}, [ figureData ]);
const setGender = useCallback((gender: string) =>
@ -154,6 +157,18 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
setFigureData(figures.get(gender));
}, [ figures ]);
const onFigureSetIdsMessageEvent = useCallback((event: FigureSetIdsMessageEvent) =>
{
const parser = event.getParser();
setFigureSetIds(parser.figureSetIds);
setBoundFurnitureNames(parser.boundsFurnitureNames);
resetCategories();
}, [ resetCategories ]);
CreateMessageHook(FigureSetIdsMessageEvent, onFigureSetIdsMessageEvent);
useEffect(() =>
{
if(!categories) return;
@ -172,6 +187,18 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
return () => AvatarEditorUtilities.CURRENT_FIGURE = null;
}, [ figureData, resetCategories ]);
useEffect(() =>
{
AvatarEditorUtilities.FIGURE_SET_IDS = figureSetIds;
AvatarEditorUtilities.BOUND_FURNITURE_NAMES = boundFurnitureNames;
return () =>
{
AvatarEditorUtilities.FIGURE_SET_IDS = null;
AvatarEditorUtilities.BOUND_FURNITURE_NAMES = null;
}
}, [ figureSetIds, boundFurnitureNames ]);
useEffect(() =>
{
if(!isVisible) return;
@ -194,7 +221,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
setNeedsReset(false);
}, [ isVisible, isInitalized, needsReset, loadAvatarInEditor ]);
if(!isVisible) return null;
if(!isVisible || !figureData) return null;
return (
<NitroCardView className="nitro-avatar-editor">
@ -215,16 +242,15 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
{ activeCategory && <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> }
</div>
<div className="col-3 d-flex flex-column h-100">
{ figureData &&
<div className="figure-preview-container">
<AvatarEditorFigurePreviewView figureData={ figureData } />
<div className="avatar-spotlight" />
<div className="avatar-shadow" />
<div className="arrow-container">
<i className="icon arrow-left-icon" onClick={ event => rotateFigure(figureData.direction + 1) } />
<i className="icon arrow-right-icon" onClick={ event => rotateFigure(figureData.direction - 1) } />
</div>
</div> }
<div className="figure-preview-container">
<AvatarEditorFigurePreviewView figureData={ figureData } />
<div className="avatar-spotlight" />
<div className="avatar-shadow" />
<div className="arrow-container">
<i className="icon arrow-left-icon" onClick={ event => rotateFigure(figureData.direction + 1) } />
<i className="icon arrow-right-icon" onClick={ event => rotateFigure(figureData.direction - 1) } />
</div>
</div>
<div className="d-flex flex-column mt-1">
<div className="btn-group mb-1">
<button type="button" className="btn btn-sm btn-secondary" onClick={ resetFigure }>

18
src/views/avatar-editor/common/AvatarEditorUtilities.ts
View File

@ -11,6 +11,8 @@ export class AvatarEditorUtilities
private static MAX_PALETTES: number = 2;
public static CURRENT_FIGURE: FigureData = null;
public static FIGURE_SET_IDS: number[] = [];
public static BOUND_FURNITURE_NAMES: string[] = [];
public static getGender(gender: string): string
{
@ -33,6 +35,11 @@ export class AvatarEditorUtilities
return gender;
}
public static hasFigureSetId(setId: number): boolean
{
return (this.FIGURE_SET_IDS.indexOf(setId) >= 0);
}
public static createCategory(model: CategoryBaseModel, name: string): CategoryData
{
if(!model || !name || !this.CURRENT_FIGURE) return null;
@ -145,16 +152,9 @@ export class AvatarEditorUtilities
let isValid = true;
if(partSet.isSellable)
{
isValid = false;
//isValid = (this._inventoryService && this._inventoryService.hasFigureSetId(partSet.id));
}
if(partSet.isSellable) isValid = this.hasFigureSetId(partSet.id);
if(isValid)
{
partItems.push(new AvatarEditorGridPartItem(partSet, partColors, usesColors, isDisabled));
}
if(isValid) partItems.push(new AvatarEditorGridPartItem(partSet, partColors, usesColors, isDisabled));
}
i--;

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

@ -25,8 +25,9 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
return (
<NitroCardGridItemView itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } onClick={ () => onClick(partItem) }>
{ partItem.isHC && <CurrencyIcon type={ 'hc' } /> }
{ 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" /> }
</NitroCardGridItemView>
);
}

15
src/views/shared/currency-icon/CurrencyIcon.tsx
View File

@ -1,16 +1,21 @@
import { FC } from 'react';
import { FC, useMemo } from 'react';
import { GetConfiguration } from '../../../api';
import { CurrencyIconProps } from './CurrencyIcon.types';
export const CurrencyIcon: FC<CurrencyIconProps> = props =>
{
let url = GetConfiguration<string>('currency.asset.icon.url', '');
const { type = '', className = '', style = {}, ...rest } = props;
url = url.replace('%type%', props.type.toString());
const urlString = useMemo(() =>
{
let url = GetConfiguration<string>('currency.asset.icon.url', '');
url = `url(${ url })`;
url = url.replace('%type%', type.toString());
return `url(${ url })`;
}, [ type ]);
return (
<div className="nitro-currency-icon" style={ (url && url.length) ? { backgroundImage: url } : {} } />
<div className={ 'nitro-currency-icon ' + className } style={ { ...style, backgroundImage: urlString } } { ...rest } />
);
}

4
src/views/shared/currency-icon/CurrencyIcon.types.ts
View File

@ -1,4 +1,6 @@
export interface CurrencyIconProps
import { DetailsHTMLAttributes } from 'react';
export interface CurrencyIconProps extends DetailsHTMLAttributes<HTMLDivElement>
{
type: number | string;
}