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

Wardrobe updates

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/styles/bootstrap/_variables.scss
View File

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

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

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

32
src/views/avatar-editor/AvatarEditorView.scss
View File

@ -83,8 +83,36 @@
.wardrobe-grid {
.grid-item-container {
height: 100% !important;
max-height: 100% !important;
height: 142px !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;
}
}
}
}
}

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

@ -79,14 +79,25 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
const onUserWardrobePageEvent = useCallback((event: UserWardrobePageEvent) =>
{
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)
}, []);
@ -280,7 +291,7 @@ export const AvatarEditorView: FC<AvatarEditorViewProps> = props =>
<div className="row h-100">
<div className="col-9 d-flex flex-column h-100">
{ (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 className="col-3 d-flex flex-column h-100">
<div className="figure-preview-container">

59
src/views/avatar-editor/views/wardrobe/AvatarEditorWardrobeView.tsx
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 { NitroCardGridView } from '../../../../layout/card/grid/NitroCardGridView';
import { NitroCardGridThemes } from '../../../../layout/card/grid/NitroCardGridView.types';
@ -7,20 +10,40 @@ import { AvatarEditorWardrobeViewProps } from './AvatarEditorWardrobeView.types'
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[] = [];
while(i < figures.length)
savedFigures.forEach((figure, index) =>
{
const figure = figures[i];
let figureString = null;
let gender = null;
@ -31,24 +54,24 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
}
items.push(
<NitroCardGridItemView key={ i } columns={ 2 }>
<AvatarImageView figure={ figureString } gender={ gender } />
<NitroCardGridItemView key={ index } className="flex-column justify-content-end">
{ 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>
);
i++
}
});
return items;
}, [ figures ]);
console.log(figures.length);
}, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
return (
<div className="row h-100">
<div className="col-12 d-flex h-100">
<NitroCardGridView className="wardrobe-grid" columns={ 12 } theme={ NitroCardGridThemes.THEME_DEFAULT }>
{ savedFigures }
<NitroCardGridView className="wardrobe-grid" columns={ 5 } theme={ NitroCardGridThemes.THEME_DEFAULT }>
{ figures }
</NitroCardGridView>
</div>
</div>

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

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