Wardrobe updates

This commit is contained in:
Bill 2021-07-21 23:53:47 -04:00
parent 4ecb6ba5b6
commit 65a9428ae9
6 changed files with 107 additions and 40 deletions

View File

@ -80,7 +80,8 @@ $cello-light: #21516e !default;
$cello-dark: #1e465e !default; $cello-dark: #1e465e !default;
$pale-sky: #677181 !default; $pale-sky: #677181 !default;
$oslo-gray: #8F9297 !default; $oslo-gray: #8F9297 !default;
$ghost: #c8cad0 !default;
$gray-chateau: #a3a7b1 !default;
$success: $green !default; $success: $green !default;
$info: $cyan !default; $info: $cyan !default;
$warning: $yellow !default; $warning: $yellow !default;

View File

@ -64,11 +64,9 @@
} }
.avatar-image { .avatar-image {
width: 100% !important;
height: 100% !important;
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: -32px !important; background-position-y: 12px !important;
} }
.trade-button { .trade-button {

View File

@ -83,8 +83,36 @@
.wardrobe-grid { .wardrobe-grid {
.grid-item-container { .grid-item-container {
height: 100% !important; height: 142px !important;
max-height: 100% !important; max-height: 142px !important;
.grid-item {
background-color: $ghost;
.avatar-image {
position: absolute;
bottom: 0;
background-position-y: -23px !important;
z-index: 3;
}
.figure-button-container {
background-color: $gray-chateau;
z-index: 2;
}
&:after {
position: absolute;
content: '';
height: 50%;
bottom: 0;
left: 0;
right: 0;
background-color: $gray-chateau;
box-shadow: 0 0 8px 2px rgba($white,.6);
z-index: 1;
}
}
} }
} }
} }

View File

@ -79,14 +79,25 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
const onUserWardrobePageEvent = useCallback((event: UserWardrobePageEvent) => const onUserWardrobePageEvent = useCallback((event: UserWardrobePageEvent) =>
{ {
const parser = event.getParser(); const parser = event.getParser();
const savedFigures: [ string, string ][] = [];
const savedFigures: [ string, string ][] = new Array(MAX_SAVED_FIGURES); let i = 0;
for(const value of parser.looks.values()) while(i < MAX_SAVED_FIGURES)
{ {
console.log(value); savedFigures.push([ null, null ]);
i++;
} }
for(let [ index, value ] of parser.looks.entries())
{
console.log(index, value);
savedFigures[(index - 1)] = [ value[0], value[1] ];
}
console.log(savedFigures);
setSavedFigures(savedFigures) setSavedFigures(savedFigures)
}, []); }, []);
@ -280,7 +291,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
<div className="row h-100"> <div className="row h-100">
<div className="col-9 d-flex flex-column h-100"> <div className="col-9 d-flex flex-column h-100">
{ (activeCategory && !isWardrobeVisible) && <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> } { (activeCategory && !isWardrobeVisible) && <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> }
{ isWardrobeVisible && <AvatarEditorWardrobeView figures={ savedFigures } /> } { isWardrobeVisible && <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } /> }
</div> </div>
<div className="col-3 d-flex flex-column h-100"> <div className="col-3 d-flex flex-column h-100">
<div className="figure-preview-container"> <div className="figure-preview-container">

View File

@ -1,4 +1,7 @@
import { FC, useMemo } from 'react'; import { UserWardrobeSaveComposer } from 'nitro-renderer';
import { FC, useCallback, useMemo } from 'react';
import { Button } from 'react-bootstrap';
import { SendMessageHook } from '../../../../hooks';
import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView'; import { NitroCardGridItemView } from '../../../../layout/card/grid/item/NitroCardGridItemView';
import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView'; import { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types'; import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
@ -7,20 +10,40 @@ import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types'
export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props => export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props =>
{ {
const { figures = [] } = props; const { figureData = null, savedFigures = [], setSavedFigures = null, loadAvatarInEditor = null } = props;
const savedFigures = useMemo(() => const wearFigureAtIndex = useCallback((index: number) =>
{ {
if(!figures) return []; if((index >= savedFigures.length) || (index < 0)) return;
let i = 0; const [ figure, gender ] = savedFigures[index];
loadAvatarInEditor(figure, gender);
}, [ savedFigures, loadAvatarInEditor ]);
const saveFigureAtWardrobeIndex = useCallback((index: number) =>
{
if(!figureData || (index >= savedFigures.length) || (index < 0)) return;
const newFigures = [ ...savedFigures ];
const figure = figureData.getFigureString();
const gender = figureData.gender;
newFigures[index] = [ figure, gender ];
setSavedFigures(newFigures);
SendMessageHook(new UserWardrobeSaveComposer((index + 1), figure, gender));
}, [ figureData, savedFigures, setSavedFigures ]);
const figures = useMemo(() =>
{
if(!savedFigures) return [];
const items: JSX.Element[] = []; const items: JSX.Element[] = [];
while(i < figures.length) savedFigures.forEach((figure, index) =>
{ {
const figure = figures[i];
let figureString = null; let figureString = null;
let gender = null; let gender = null;
@ -31,24 +54,24 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
} }
items.push( items.push(
<NitroCardGridItemView key={ i } columns={ 2 }> <NitroCardGridItemView key={ index } className="flex-column justify-content-end">
<AvatarImageView figure={ figureString } gender={ gender } /> { figureString && <AvatarImageView figure={ figureString } gender={ gender } direction={ 2 } /> }
<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> }
</div>
</NitroCardGridItemView> </NitroCardGridItemView>
); );
});
i++
}
return items; return items;
}, [ figures ]); }, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
console.log(figures.length);
return ( return (
<div className="row h-100"> <div className="row h-100">
<div className="col-12 d-flex h-100"> <div className="col-12 d-flex h-100">
<NitroCardGridView className="wardrobe-grid" columns={ 12 } theme={ NitroCardGridThemes.THEME_DEFAULT }> <NitroCardGridView className="wardrobe-grid" columns={ 5 } theme={ NitroCardGridThemes.THEME_DEFAULT }>
{ savedFigures } { figures }
</NitroCardGridView> </NitroCardGridView>
</div> </div>
</div> </div>

View File

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