mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
🆙 Redone the avatar editor
This commit is contained in:
duckietm
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 225 B |
Binary file not shown.
|
After Width: | Height: | Size: 330 B |
Binary file not shown.
|
After Width: | Height: | Size: 231 B |
Binary file not shown.
|
After Width: | Height: | Size: 247 B |
Binary file not shown.
|
After Width: | Height: | Size: 256 B |
@@ -1,10 +1,11 @@
|
||||
import { AvatarEditorFigureCategory, AvatarFigurePartType, FigureDataContainer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { IAvatarEditorCategory } from '../../api';
|
||||
import { CreateLinkEvent, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategory } from '../../api';
|
||||
import { LayoutCurrencyIcon } from '../../common';
|
||||
import { useAvatarEditor } from '../../hooks';
|
||||
import { AvatarEditorIcon } from './AvatarEditorIcon';
|
||||
import { AvatarEditorFigureSetView } from './figure-set';
|
||||
import { AvatarEditorPaletteSetView } from './palette-set';
|
||||
import { AvatarEditorAdvancedColorView, AvatarEditorPaletteSetView } from './palette-set';
|
||||
|
||||
export const AvatarEditorModelView: FC<{
|
||||
name: string,
|
||||
@@ -14,6 +15,8 @@ export const AvatarEditorModelView: FC<{
|
||||
const { name = '', categories = [] } = props;
|
||||
const [ didChange, setDidChange ] = useState<boolean>(false);
|
||||
const [ activeSetType, setActiveSetType ] = useState<string>('');
|
||||
const [ advancedColorMode, setAdvancedColorMode ] = useState<boolean>(false);
|
||||
const hasHC = GetClubMemberLevel() > 0;
|
||||
const { maxPaletteCount = 1, gender = null, setGender = null, selectedColorParts = null, getFirstSelectableColor = null, selectEditorColor = null } = useAvatarEditor();
|
||||
|
||||
const activeCategory = useMemo(() =>
|
||||
@@ -46,34 +49,56 @@ export const AvatarEditorModelView: FC<{
|
||||
if(!activeCategory) return null;
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-12 gap-2 overflow-hidden">
|
||||
<div className="flex flex-col col-span-2">
|
||||
<div className="flex flex-col overflow-hidden h-full gap-1">
|
||||
{ /* ── Category / gender selector row ── */ }
|
||||
<div className="flex items-center px-2 gap-3 shrink-0">
|
||||
{ (name === AvatarEditorFigureCategory.GENERIC) &&
|
||||
<>
|
||||
<div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
|
||||
<div className="category-item flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.MALE) }>
|
||||
<AvatarEditorIcon icon="male" selected={ gender === FigureDataContainer.MALE } />
|
||||
</div>
|
||||
<div className="category-item items-center justify-center cursor-pointer flex" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
|
||||
<div className="category-item flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
|
||||
<AvatarEditorIcon icon="female" selected={ gender === FigureDataContainer.FEMALE } />
|
||||
</div>
|
||||
</> }
|
||||
{ (name !== AvatarEditorFigureCategory.GENERIC) && (categories.length > 0) && categories.map(category =>
|
||||
{
|
||||
return (
|
||||
<div key={ category.setType } className="category-item items-center justify-center cursor-pointer flex" onClick={ event => selectSet(category.setType) }>
|
||||
<AvatarEditorIcon icon={ category.setType } selected={ (activeSetType === category.setType) } />
|
||||
{ (name !== AvatarEditorFigureCategory.GENERIC) && categories.map(category =>
|
||||
<div
|
||||
key={ category.setType }
|
||||
className="category-item flex items-center justify-center cursor-pointer"
|
||||
onClick={ event => selectSet(category.setType) }>
|
||||
<AvatarEditorIcon icon={ category.setType } selected={ activeSetType === category.setType } />
|
||||
</div>
|
||||
);
|
||||
}) }
|
||||
) }
|
||||
</div>
|
||||
<div className="flex flex-col overflow-hidden col-span-5">
|
||||
<AvatarEditorFigureSetView category={ activeCategory } columnCount={ 3 } />
|
||||
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<AvatarEditorFigureSetView category={ activeCategory } columnCount={ 6 } />
|
||||
</div>
|
||||
<div className="flex flex-col overflow-hidden col-span-5">
|
||||
|
||||
<div className="flex shrink-0 items-center justify-end px-2">
|
||||
<button
|
||||
className={ `flex items-center gap-1 text-xs px-2 py-0.5 rounded border cursor-pointer transition-colors ${ advancedColorMode ? 'bg-sky-400 border-sky-300 text-white' : 'bg-sky-900/30 border-sky-600/50 text-white hover:text-yellow-800' }` }
|
||||
onClick={ () => hasHC ? setAdvancedColorMode(prev => !prev) : CreateLinkEvent('habboUI/open/hccenter') }
|
||||
>
|
||||
Advanced Color
|
||||
<LayoutCurrencyIcon type="hc" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{ /* ── Colour palette row at bottom ── */ }
|
||||
<div className={ `flex shrink-0 overflow-hidden gap-2 ${ maxPaletteCount === 2 ? 'dual-palette' : '' }` } style={ { height: '160px' } }>
|
||||
{ (maxPaletteCount >= 1) &&
|
||||
<AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 5 } paletteIndex={ 0 } /> }
|
||||
<div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
|
||||
{ advancedColorMode
|
||||
? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 0 } />
|
||||
: <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 0 } /> }
|
||||
</div> }
|
||||
{ (maxPaletteCount === 2) &&
|
||||
<AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 5 } paletteIndex={ 1 } /> }
|
||||
<div className="flex-1 min-w-0 overflow-hidden avatar-editor-palette-set-view">
|
||||
{ advancedColorMode
|
||||
? <AvatarEditorAdvancedColorView category={ activeCategory } paletteIndex={ 1 } />
|
||||
: <AvatarEditorPaletteSetView category={ activeCategory } columnCount={ 14 } paletteIndex={ 1 } /> }
|
||||
</div> }
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,19 +2,18 @@ import { AddLinkEventTracker, AvatarEditorFigureCategory, GetSessionDataManager,
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FaDice, FaRedo, FaTrash } from 'react-icons/fa';
|
||||
import { AvatarEditorAction, LocalizeText, SendMessageComposer } from '../../api';
|
||||
import { Button, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
|
||||
import { Button, ButtonGroup, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
|
||||
import { useAvatarEditor } from '../../hooks';
|
||||
import { AvatarEditorFigurePreviewView } from './AvatarEditorFigurePreviewView';
|
||||
import { AvatarEditorModelView } from './AvatarEditorModelView';
|
||||
import { AvatarEditorWardrobeView } from './AvatarEditorWardrobeView';
|
||||
|
||||
const DEFAULT_MALE_FIGURE: string = 'hr-100.hd-180-7.ch-215-66.lg-270-79.sh-305-62.ha-1002-70.wa-2007';
|
||||
const DEFAULT_FEMALE_FIGURE: string = 'hr-515-33.hd-600-1.ch-635-70.lg-716-66-62.sh-735-68';
|
||||
|
||||
export const AvatarEditorView: FC<{}> = props =>
|
||||
{
|
||||
const [ isVisible, setIsVisible ] = useState(false);
|
||||
const { setIsVisible: setEditorVisibility, avatarModels, activeModelKey, setActiveModelKey, loadAvatarData, getFigureStringWithFace, gender, figureSetIds = [], randomizeCurrentFigure = null, getFigureString = null } = useAvatarEditor();
|
||||
const { setIsVisible: setEditorVisibility, avatarModels, activeModelKey, setActiveModelKey, loadAvatarData, getFigureStringWithFace, gender, randomizeCurrentFigure = null, getFigureString = null } = useAvatarEditor();
|
||||
|
||||
const isWardrobeOpen = (activeModelKey === AvatarEditorFigureCategory.WARDROBE);
|
||||
|
||||
const processAction = (action: string) =>
|
||||
{
|
||||
@@ -74,48 +73,53 @@ export const AvatarEditorView: FC<{}> = props =>
|
||||
if(!isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView className="w-[620px] h-[374px] nitro-avatar-editor" uniqueKey="avatar-editor">
|
||||
<NitroCardView
|
||||
className={ `nitro-avatar-editor ${ isWardrobeOpen ? 'w-[880px]' : 'w-[620px]' } h-[374px]` }
|
||||
uniqueKey="avatar-editor">
|
||||
<NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
|
||||
<NitroCardTabsView>
|
||||
<NitroCardTabsView classNames={ ['avatar-editor-tabs'] }>
|
||||
{ Object.keys(avatarModels).map(modelKey =>
|
||||
{
|
||||
const isActive = (activeModelKey === modelKey);
|
||||
const isWardrobe = (modelKey === AvatarEditorFigureCategory.WARDROBE);
|
||||
|
||||
return (
|
||||
<NitroCardTabsItemView key={ modelKey } isActive={ isActive } onClick={ event => setActiveModelKey(modelKey) }>
|
||||
{ LocalizeText(`avatareditor.category.${ modelKey }`) }
|
||||
<div className={ isWardrobe ? 'tab-wardrobe' : `tab ${ modelKey }` } />
|
||||
</NitroCardTabsItemView>
|
||||
);
|
||||
}) }
|
||||
</NitroCardTabsView>
|
||||
<NitroCardContentView>
|
||||
<Grid className="grid gap-2 overflow-hidden">
|
||||
<div className="flex flex-col col-span-9 overflow-hidden">
|
||||
{ ((activeModelKey.length > 0) && (activeModelKey !== AvatarEditorFigureCategory.WARDROBE)) &&
|
||||
<div className="flex gap-2 overflow-hidden h-full">
|
||||
{ /* left: model view or wardrobe */ }
|
||||
<div className="flex flex-col flex-1 min-w-0 overflow-hidden">
|
||||
{ (activeModelKey.length > 0 && !isWardrobeOpen) &&
|
||||
<AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
|
||||
{ (activeModelKey === AvatarEditorFigureCategory.WARDROBE) &&
|
||||
{ isWardrobeOpen &&
|
||||
<AvatarEditorWardrobeView /> }
|
||||
</div>
|
||||
<div className="flex flex-col col-span-3 overflow-hidden gap-1">
|
||||
{ /* right: preview + actions */ }
|
||||
<div className="flex flex-col shrink-0 w-[120px] gap-1 overflow-hidden">
|
||||
<AvatarEditorFigurePreviewView />
|
||||
<div className="flex flex-col grow! gap-1">
|
||||
<div className="relative inline-flex align-middle">
|
||||
<Button className="flex-auto " variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
|
||||
<ButtonGroup className="w-full">
|
||||
<Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
|
||||
<FaRedo className="fa-icon" />
|
||||
</Button>
|
||||
<Button className="flex-auto" variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
|
||||
<Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
|
||||
<FaTrash className="fa-icon" />
|
||||
</Button>
|
||||
<Button className="flex-auto" variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
|
||||
<Button variant="secondary" className="flex-1" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
|
||||
<FaDice className="fa-icon" />
|
||||
</Button>
|
||||
</div>
|
||||
</ButtonGroup>
|
||||
<Button className="w-full" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
|
||||
{ LocalizeText('avatareditor.save') }
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Grid>
|
||||
</div>
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { AvatarFigurePartType } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { AvatarEditorThumbnailsHelper, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
|
||||
import { AvatarEditorThumbnailsHelper, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
|
||||
import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
|
||||
import { useAvatarEditor } from '../../../hooks';
|
||||
import { InfiniteGrid } from '../../../layout';
|
||||
@@ -17,7 +17,9 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
const [ assetUrl, setAssetUrl ] = useState<string>('');
|
||||
const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
|
||||
|
||||
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
|
||||
const clubLevel = partItem.partSet?.clubLevel ?? 0;
|
||||
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (clubLevel > 0);
|
||||
const isLocked = isHC && (GetClubMemberLevel() < clubLevel);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
@@ -25,17 +27,19 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
|
||||
const loadImage = async () =>
|
||||
{
|
||||
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && ((partItem.partSet?.clubLevel ?? 0) > 0);
|
||||
const partClubLevel = partItem.partSet?.clubLevel ?? 0;
|
||||
const partIsHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (partClubLevel > 0);
|
||||
const partIsLocked = partIsHC && (GetClubMemberLevel() < partClubLevel);
|
||||
|
||||
let url: string = null;
|
||||
|
||||
if(setType === AvatarFigurePartType.HEAD)
|
||||
{
|
||||
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), isHC);
|
||||
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked);
|
||||
}
|
||||
else
|
||||
{
|
||||
url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, isHC);
|
||||
url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, partIsLocked);
|
||||
}
|
||||
|
||||
if(url && url.length) setAssetUrl(url);
|
||||
@@ -47,7 +51,7 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
if(!partItem) return null;
|
||||
|
||||
return (
|
||||
<InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } style={ { flex: '1', backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
|
||||
<InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }` } style={ { backgroundPosition: (setType === AvatarFigurePartType.HEAD) ? 'center -35px' : 'center' } } { ...rest }>
|
||||
{ !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
|
||||
{ partItem.isClear && <AvatarEditorIcon icon="clear" /> }
|
||||
{ !partItem.isClear && partItem.partSet.isSellable && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
|
||||
|
||||
@@ -29,7 +29,7 @@ export const AvatarEditorFigureSetView: FC<{
|
||||
};
|
||||
|
||||
return (
|
||||
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
|
||||
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ 50 } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
|
||||
{
|
||||
if(!item) return null;
|
||||
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import { IPartColor } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useMemo, useRef } from 'react';
|
||||
import { ColorUtils, GetClubMemberLevel, IAvatarEditorCategory } from '../../../api';
|
||||
import { useAvatarEditor } from '../../../hooks';
|
||||
|
||||
const findNearestColor = (hex: string, colors: IPartColor[]): IPartColor | null =>
|
||||
{
|
||||
const r = parseInt(hex.slice(1, 3), 16);
|
||||
const g = parseInt(hex.slice(3, 5), 16);
|
||||
const b = parseInt(hex.slice(5, 7), 16);
|
||||
const maxLevel = GetClubMemberLevel();
|
||||
let nearest: IPartColor | null = null;
|
||||
let minDist = Infinity;
|
||||
|
||||
for(const color of colors)
|
||||
{
|
||||
if(color.clubLevel > maxLevel) continue;
|
||||
|
||||
const cr = (color.rgb >> 16) & 0xFF;
|
||||
const cg = (color.rgb >> 8) & 0xFF;
|
||||
const cb = color.rgb & 0xFF;
|
||||
const dist = (r - cr) ** 2 + (g - cg) ** 2 + (b - cb) ** 2;
|
||||
|
||||
if(dist < minDist) { minDist = dist; nearest = color; }
|
||||
}
|
||||
|
||||
return nearest;
|
||||
};
|
||||
|
||||
export const AvatarEditorAdvancedColorView: FC<{
|
||||
category: IAvatarEditorCategory;
|
||||
paletteIndex: number;
|
||||
}> = ({ category, paletteIndex }) =>
|
||||
{
|
||||
const { selectedColorParts = null, selectEditorColor = null } = useAvatarEditor();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const selectedColor = useMemo(() =>
|
||||
{
|
||||
if(!selectedColorParts?.[category?.setType]?.[paletteIndex]) return null;
|
||||
|
||||
return selectedColorParts[category.setType][paletteIndex];
|
||||
}, [ category, selectedColorParts, paletteIndex ]);
|
||||
|
||||
const hexColor = useMemo(() =>
|
||||
ColorUtils.makeColorNumberHex((selectedColor?.rgb ?? 0) & 0xFFFFFF),
|
||||
[ selectedColor ]);
|
||||
|
||||
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
{
|
||||
const colors = category?.colorItems?.[paletteIndex];
|
||||
|
||||
if(!colors) return;
|
||||
|
||||
const nearest = findNearestColor(e.target.value, colors);
|
||||
|
||||
if(nearest) selectEditorColor(category.setType, paletteIndex, nearest.id);
|
||||
}, [ category, paletteIndex, selectEditorColor ]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full p-1.5">
|
||||
<div
|
||||
className="flex-1 rounded-lg cursor-pointer relative border-2 border-white/20 overflow-hidden"
|
||||
style={{ backgroundColor: hexColor }}
|
||||
onClick={ () => inputRef.current?.click() }
|
||||
>
|
||||
<input
|
||||
ref={ inputRef }
|
||||
type="color"
|
||||
value={ hexColor }
|
||||
onChange={ handleChange }
|
||||
className="absolute opacity-0 inset-0 w-full h-full cursor-pointer"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 py-1 text-center bg-black/40">
|
||||
<span className="text-xs font-mono font-bold text-white">
|
||||
{ hexColor.toUpperCase() }
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,6 +1,6 @@
|
||||
import { ColorConverter, IPartColor } from '@nitrots/nitro-renderer';
|
||||
import { FC } from 'react';
|
||||
import { GetConfigurationValue } from '../../../api';
|
||||
import { GetClubMemberLevel, GetConfigurationValue } from '../../../api';
|
||||
import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
|
||||
import { InfiniteGrid } from '../../../layout';
|
||||
|
||||
@@ -16,9 +16,10 @@ export const AvatarEditorPaletteSetItem: FC<{
|
||||
if(!partColor) return null;
|
||||
|
||||
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (partColor.clubLevel > 0);
|
||||
const isLocked = isHC && (GetClubMemberLevel() < partColor.clubLevel);
|
||||
|
||||
return (
|
||||
<InfiniteGrid.Item itemHighlight className="clear-bg" itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
|
||||
<InfiniteGrid.Item itemHighlight className={ `clear-bg aspect-square${ isLocked ? ' opacity-50' : '' }` } itemActive={ isSelected } itemColor={ ColorConverter.int2rgb(partColor.rgb) } { ...rest }>
|
||||
{ isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
|
||||
</InfiniteGrid.Item>
|
||||
);
|
||||
|
||||
@@ -24,7 +24,7 @@ export const AvatarEditorPaletteSetView: FC<{
|
||||
};
|
||||
|
||||
return (
|
||||
<InfiniteGrid<IPartColor> columnCount={ columnCount } itemRender={ (item: IPartColor) =>
|
||||
<InfiniteGrid<IPartColor> columnCount={ columnCount } estimateSize={ 18 } squareItems itemRender={ (item: IPartColor) =>
|
||||
{
|
||||
if(!item) return null;
|
||||
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export * from './AvatarEditorAdvancedColorView';
|
||||
export * from './AvatarEditorPaletteSetItemView';
|
||||
export * from './AvatarEditorPaletteSetView';
|
||||
|
||||
@@ -7,6 +7,41 @@
|
||||
src: url("@/assets/webfonts/Ubuntu-C.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Habbo;
|
||||
src: url("@/assets/webfonts/Habbo.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Habbo;
|
||||
src: url("@/assets/webfonts/Habbo-b.ttf");
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Habbo;
|
||||
src: url("@/assets/webfonts/Habbo-i.ttf");
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Habbo;
|
||||
src: url("@/assets/webfonts/Habbo-m.ttf");
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Habbo;
|
||||
src: url("@/assets/webfonts/Habbo-t.ttf");
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
@@ -793,3 +828,160 @@ body {
|
||||
.bg-card-tabs {
|
||||
background-color: #185d79; /* Match bg-card-header */
|
||||
}
|
||||
|
||||
/* ── Avatar Editor ─────────────────────────────────────────────────────── */
|
||||
|
||||
.color-picker-frame {
|
||||
border-image-source: url('@/assets/images/avatareditor/color_frame.png');
|
||||
border-image-slice: 6 6 6 6 fill;
|
||||
border-image-width: 6px 6px 6px 6px;
|
||||
width: 14px;
|
||||
height: 21px;
|
||||
border-radius: 4px;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
border-image-source: url('@/assets/images/avatareditor/color_frame_active.png');
|
||||
height: 21px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.hc-icon {
|
||||
background-image: url('@/assets/images/avatareditor/hc_icon.png');
|
||||
height: 9px;
|
||||
width: 10px;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
.avatar-parts {
|
||||
border: none !important;
|
||||
height: 42px;
|
||||
width: 42px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 2rem !important;
|
||||
overflow: visible !important;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 0 3px #dbdad5 !important;
|
||||
background-color: #cecdc8 !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.part-selected {
|
||||
box-shadow: 0 0 0 3px #c5c3c0 !important;
|
||||
background-color: #b1b1b1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
padding: 3px;
|
||||
height: 50px;
|
||||
border-radius: 0.3rem;
|
||||
background-color: #a7a6a2;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.avatar-parts-container {
|
||||
height: 70%;
|
||||
}
|
||||
|
||||
.avatar-color-palette-container {
|
||||
height: 30%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.dual-palette {
|
||||
display: flex !important;
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.avatar-editor-palette-set-view {
|
||||
padding-right: 15px !important;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* ── Avatar Editor tab icons ───────────────────────────────────────────── */
|
||||
|
||||
.avatar-editor-tabs {
|
||||
position: relative;
|
||||
|
||||
.tab {
|
||||
background-position-x: center;
|
||||
background-position-y: center;
|
||||
background-repeat: no-repeat;
|
||||
width: 34px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.hd { background-image: url('@/assets/images/wardrobe/hd.png'); }
|
||||
.head { background-image: url('@/assets/images/wardrobe/head.png'); }
|
||||
.torso { background-image: url('@/assets/images/wardrobe/torso.png'); }
|
||||
.legs { background-image: url('@/assets/images/wardrobe/legs.png'); }
|
||||
|
||||
.tab-wardrobe {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
background-size: 38px 28px;
|
||||
background-image: url('@/assets/images/wardrobe/wardrobe.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
filter: contrast(1.2) brightness(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Avatar Editor misc ─────────────────────────────────────────────────── */
|
||||
|
||||
|
||||
.saved-outfits-title {
|
||||
color: #a7a6a2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nitro-avatar-editor-wardrobe-container {
|
||||
background-color: #cacaca;
|
||||
border-radius: 0.3rem;
|
||||
border: solid 1px #000;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
padding: 10px 12px 10px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.nitro-avatar-editor-wardrobe-figure-preview {
|
||||
border-image-source: url('@/assets/images/avatareditor/wardrobe_user_bg.png');
|
||||
border-image-slice: 4 4 4 4 fill;
|
||||
border-image-width: 4px 4px 4px 4px;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.avatar-shadow {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 25px;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
margin: 0 auto;
|
||||
border-radius: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.20);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 5;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -9,12 +9,13 @@ type Props<T> = {
|
||||
columnCount: number;
|
||||
overscan?: number;
|
||||
estimateSize?: number;
|
||||
squareItems?: boolean;
|
||||
itemRender?: (item: T, index?: number) => ReactElement;
|
||||
}
|
||||
|
||||
const InfiniteGridRoot = <T,>(props: Props<T>) =>
|
||||
{
|
||||
const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, itemRender = null } = props;
|
||||
const { items = [], columnCount = 4, overscan = 5, estimateSize = 45, squareItems = false, itemRender = null } = props;
|
||||
const parentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const virtualizer = useVirtualizer({
|
||||
@@ -72,7 +73,7 @@ const InfiniteGridRoot = <T,>(props: Props<T>) =>
|
||||
className={ `grid grid-cols-${ columnCount } gap-1 absolute top-0 left-0 last:pb-0 w-full` }
|
||||
data-index={ virtualRow.index }
|
||||
style={ {
|
||||
height: virtualRow.size,
|
||||
...(!squareItems && { height: virtualRow.size }),
|
||||
transform: `translateY(${ virtualRow.start }px)`
|
||||
} }>
|
||||
{ Array.from(Array(columnCount)).map((e, i) =>
|
||||
@@ -144,7 +145,9 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
|
||||
className={ classNames(
|
||||
'flex flex-col items-center justify-center cursor-pointer overflow-hidden relative bg-center bg-no-repeat w-full rounded-md border-2',
|
||||
(itemImage && (!backgroundImageUrl || !backgroundImageUrl.length)) && 'nitro-icon icon-loading',
|
||||
itemActive ? 'border-card-grid-item-active bg-card-grid-item-active' : 'border-card-grid-item-border bg-card-grid-item',
|
||||
itemActive
|
||||
? (itemColor ? 'border-card-grid-item-active' : 'border-card-grid-item-active bg-card-grid-item-active')
|
||||
: (itemColor ? 'border-card-grid-item-border' : 'border-card-grid-item-border bg-card-grid-item'),
|
||||
(itemUniqueSoldout || (itemUniqueNumber > 0)) && 'unique-item',
|
||||
itemUniqueSoldout && 'sold-out',
|
||||
itemUnseen && ' bg-green-500 bg-opacity-40',
|
||||
|
||||
+10
-7
@@ -1,6 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
|
||||
const { generateShades } = require('./css-utils/CSSColorUtils');
|
||||
const {
|
||||
generateShades
|
||||
} = require('./css-utils/CSSColorUtils');
|
||||
|
||||
const colors = {
|
||||
'toolbar': '#555555',
|
||||
@@ -58,7 +60,6 @@ const boxShadow = {
|
||||
'room-previewer': '-2px -2px rgba(0, 0, 0, 0.4), inset 3px 3px rgba(0, 0, 0, 0.2);'
|
||||
};
|
||||
|
||||
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
@@ -73,7 +74,7 @@ module.exports = {
|
||||
},
|
||||
|
||||
fontFamily: {
|
||||
sans: [ 'Ubuntu' ],
|
||||
sans: ['Ubuntu'],
|
||||
},
|
||||
colors: generateShades(colors),
|
||||
boxShadow,
|
||||
@@ -83,8 +84,8 @@ module.exports = {
|
||||
spacing: {
|
||||
'card-header': '33px',
|
||||
'card-tabs': '33px',
|
||||
'navigator-w': '420px',
|
||||
'navigator-h': '440px',
|
||||
'navigator-w': '480px',
|
||||
'navigator-h': '520px',
|
||||
'inventory-w': '528px',
|
||||
'inventory-h': '320px'
|
||||
},
|
||||
@@ -128,6 +129,8 @@ module.exports = {
|
||||
'col-span-10',
|
||||
'col-span-11',
|
||||
'col-span-12',
|
||||
'grid-cols-13',
|
||||
'grid-cols-14',
|
||||
'grid-rows-1',
|
||||
'grid-rows-2',
|
||||
'grid-rows-3',
|
||||
@@ -146,8 +149,8 @@ module.exports = {
|
||||
darkMode: 'class',
|
||||
variants: {
|
||||
extend: {
|
||||
divideColor: [ 'group-hover' ],
|
||||
backgroundColor: [ 'group-focus' ],
|
||||
divideColor: ['group-hover'],
|
||||
backgroundColor: ['group-focus'],
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
|
||||
Reference in New Issue
Block a user