mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 15:06:20 +00:00
DuckieTM
@@ -109,22 +109,6 @@ export class AvatarEditorThumbnailsHelper
|
||||
container.addChild(sprite);
|
||||
}
|
||||
|
||||
if(container.children.length > 0)
|
||||
{
|
||||
const isPetPart = parts.some(p => p.type === 'pt' || p.type === 'ptl' || p.type === 'ptr');
|
||||
|
||||
if(isPetPart)
|
||||
{
|
||||
const bounds = container.getBounds();
|
||||
|
||||
for(const child of container.children)
|
||||
{
|
||||
(child as NitroSprite).position.x -= bounds.x;
|
||||
(child as NitroSprite).position.y -= bounds.y;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return container;
|
||||
};
|
||||
|
||||
@@ -133,9 +117,9 @@ export class AvatarEditorThumbnailsHelper
|
||||
const resetFigure = async (figure: string) =>
|
||||
{
|
||||
const container = buildContainer(part, useColors, partColors, isDisabled);
|
||||
const imageUrl = await TextureUtils.generateImageUrl(container);
|
||||
const imageUrl = await TextureUtils.generateImageUrl({ target: container, resolution: 1 });
|
||||
|
||||
AvatarEditorThumbnailsHelper.THUMBNAIL_CACHE.set(thumbnailKey, imageUrl);
|
||||
if(imageUrl) AvatarEditorThumbnailsHelper.THUMBNAIL_CACHE.set(thumbnailKey, imageUrl);
|
||||
|
||||
resolve(imageUrl);
|
||||
};
|
||||
|
||||
@@ -9,7 +9,6 @@ import { CampaignView } from './campaign/CampaignView';
|
||||
import { CatalogView } from './catalog/CatalogView';
|
||||
import { ChatHistoryView } from './chat-history/ChatHistoryView';
|
||||
import { FloorplanEditorView } from './floorplan-editor/FloorplanEditorView';
|
||||
import { FurniEditorView } from './furni-editor/FurniEditorView';
|
||||
import { FriendsView } from './friends/FriendsView';
|
||||
import { GameCenterView } from './game-center/GameCenterView';
|
||||
import { GroupsView } from './groups/GroupsView';
|
||||
@@ -121,7 +120,6 @@ export const MainView: FC<{}> = props =>
|
||||
<CampaignView />
|
||||
<GameCenterView />
|
||||
<FloorplanEditorView />
|
||||
<FurniEditorView />
|
||||
<YoutubeTvView />
|
||||
<ExternalPluginLoader />
|
||||
</>
|
||||
|
||||
@@ -1,45 +1,81 @@
|
||||
import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
|
||||
import { classNames } from '../../layout';
|
||||
|
||||
type AvatarIconType = 'male' | 'female' | 'clear' | 'sellable';
|
||||
import arrowLeftIcon from '../../assets/images/avatareditor/arrow-left-icon.png';
|
||||
import arrowRightIcon from '../../assets/images/avatareditor/arrow-right-icon.png';
|
||||
import caIcon from '../../assets/images/avatareditor/ca-icon.png';
|
||||
import caSelectedIcon from '../../assets/images/avatareditor/ca-selected-icon.png';
|
||||
import ccIcon from '../../assets/images/avatareditor/cc-icon.png';
|
||||
import ccSelectedIcon from '../../assets/images/avatareditor/cc-selected-icon.png';
|
||||
import chIcon from '../../assets/images/avatareditor/ch-icon.png';
|
||||
import chSelectedIcon from '../../assets/images/avatareditor/ch-selected-icon.png';
|
||||
import clearIcon from '../../assets/images/avatareditor/clear-icon.png';
|
||||
import cpIcon from '../../assets/images/avatareditor/cp-icon.png';
|
||||
import cpSelectedIcon from '../../assets/images/avatareditor/cp-selected-icon.png';
|
||||
import eaIcon from '../../assets/images/avatareditor/ea-icon.png';
|
||||
import eaSelectedIcon from '../../assets/images/avatareditor/ea-selected-icon.png';
|
||||
import faIcon from '../../assets/images/avatareditor/fa-icon.png';
|
||||
import faSelectedIcon from '../../assets/images/avatareditor/fa-selected-icon.png';
|
||||
import femaleIcon from '../../assets/images/avatareditor/female-icon.png';
|
||||
import femaleSelectedIcon from '../../assets/images/avatareditor/female-selected-icon.png';
|
||||
import haIcon from '../../assets/images/avatareditor/ha-icon.png';
|
||||
import haSelectedIcon from '../../assets/images/avatareditor/ha-selected-icon.png';
|
||||
import heIcon from '../../assets/images/avatareditor/he-icon.png';
|
||||
import heSelectedIcon from '../../assets/images/avatareditor/he-selected-icon.png';
|
||||
import hrIcon from '../../assets/images/avatareditor/hr-icon.png';
|
||||
import hrSelectedIcon from '../../assets/images/avatareditor/hr-selected-icon.png';
|
||||
import lgIcon from '../../assets/images/avatareditor/lg-icon.png';
|
||||
import lgSelectedIcon from '../../assets/images/avatareditor/lg-selected-icon.png';
|
||||
import maleIcon from '../../assets/images/avatareditor/male-icon.png';
|
||||
import maleSelectedIcon from '../../assets/images/avatareditor/male-selected-icon.png';
|
||||
import sellableIcon from '../../assets/images/avatareditor/sellable-icon.png';
|
||||
import shIcon from '../../assets/images/avatareditor/sh-icon.png';
|
||||
import shSelectedIcon from '../../assets/images/avatareditor/sh-selected-icon.png';
|
||||
import waIcon from '../../assets/images/avatareditor/wa-icon.png';
|
||||
import waSelectedIcon from '../../assets/images/avatareditor/wa-selected-icon.png';
|
||||
|
||||
const ICON_MAP: Record<string, { normal: string; selected?: string }> = {
|
||||
'arrow-left': { normal: arrowLeftIcon },
|
||||
'arrow-right': { normal: arrowRightIcon },
|
||||
'ca': { normal: caIcon, selected: caSelectedIcon },
|
||||
'cc': { normal: ccIcon, selected: ccSelectedIcon },
|
||||
'ch': { normal: chIcon, selected: chSelectedIcon },
|
||||
'clear': { normal: clearIcon },
|
||||
'cp': { normal: cpIcon, selected: cpSelectedIcon },
|
||||
'ea': { normal: eaIcon, selected: eaSelectedIcon },
|
||||
'fa': { normal: faIcon, selected: faSelectedIcon },
|
||||
'female': { normal: femaleIcon, selected: femaleSelectedIcon },
|
||||
'ha': { normal: haIcon, selected: haSelectedIcon },
|
||||
'he': { normal: heIcon, selected: heSelectedIcon },
|
||||
'hr': { normal: hrIcon, selected: hrSelectedIcon },
|
||||
'lg': { normal: lgIcon, selected: lgSelectedIcon },
|
||||
'male': { normal: maleIcon, selected: maleSelectedIcon },
|
||||
'sellable': { normal: sellableIcon },
|
||||
'sh': { normal: shIcon, selected: shSelectedIcon },
|
||||
'wa': { normal: waIcon, selected: waSelectedIcon },
|
||||
};
|
||||
|
||||
export const AvatarEditorIcon = forwardRef<HTMLDivElement, PropsWithChildren<{
|
||||
icon: AvatarIconType;
|
||||
icon: string;
|
||||
selected?: boolean;
|
||||
}> & DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>((props, ref) =>
|
||||
{
|
||||
const { icon = null, selected = false, className = null, ...rest } = props;
|
||||
const { icon = null, selected = false, className = null, children, ...rest } = props;
|
||||
|
||||
/*
|
||||
switch (icon)
|
||||
{
|
||||
case 'male':
|
||||
const iconEntry = icon ? ICON_MAP[icon] : null;
|
||||
|
||||
if(!iconEntry) return null;
|
||||
|
||||
break;
|
||||
const src = (selected && iconEntry.selected) ? iconEntry.selected : iconEntry.normal;
|
||||
|
||||
case 'arrow-left':
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
//statements;
|
||||
break;
|
||||
|
||||
}
|
||||
*/
|
||||
return (
|
||||
<div
|
||||
ref={ ref }
|
||||
|
||||
className={ classNames(
|
||||
'nitro-avatar-editor-spritesheet',
|
||||
'cursor-pointer',
|
||||
`${ icon }-icon`,
|
||||
selected && 'selected',
|
||||
className
|
||||
) }
|
||||
{ ...rest } />
|
||||
className={ classNames('flex items-center justify-center cursor-pointer', className) }
|
||||
{ ...rest }>
|
||||
<img src={ src } alt={ icon } className="h-[22px] w-auto object-contain pointer-events-none" draggable={ false } />
|
||||
{ children }
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { AvatarEditorFigureCategory, AvatarFigurePartType } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { AvatarEditorThumbnailsHelper, GetClubMemberLevel, GetConfigurationValue, IAvatarEditorCategoryPartItem } from '../../../api';
|
||||
import { LayoutCurrencyIcon, LayoutGridItemProps } from '../../../common';
|
||||
@@ -15,7 +14,7 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
{
|
||||
const { setType = null, partItem = null, isSelected = false, width = '100%', ...rest } = props;
|
||||
const [ assetUrl, setAssetUrl ] = useState<string>('');
|
||||
const { activeModelKey = '', selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
|
||||
const { selectedColorParts = null, getFigureStringWithFace = null } = useAvatarEditor();
|
||||
|
||||
const clubLevel = partItem.partSet?.clubLevel ?? 0;
|
||||
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (clubLevel > 0);
|
||||
@@ -24,7 +23,9 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!setType || !setType.length || !partItem) return;
|
||||
setAssetUrl('');
|
||||
|
||||
if(!setType || !setType.length || !partItem || partItem.isClear) return;
|
||||
|
||||
const loadImage = async () =>
|
||||
{
|
||||
@@ -34,7 +35,7 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
|
||||
let url: string = null;
|
||||
|
||||
if(setType === AvatarFigurePartType.HEAD && activeModelKey !== AvatarEditorFigureCategory.NFT)
|
||||
if(setType === 'hd')
|
||||
{
|
||||
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked || isSellableNotOwned);
|
||||
}
|
||||
@@ -53,12 +54,27 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
};
|
||||
|
||||
loadImage();
|
||||
}, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned, activeModelKey ]);
|
||||
}, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned ]);
|
||||
|
||||
if(!partItem) return null;
|
||||
|
||||
const isHead = (setType === 'hd');
|
||||
|
||||
return (
|
||||
<InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ !partItem.isClear && isSellableNotOwned ? ' pet-sellable-locked' : '' }` } style={ { backgroundPosition: (setType === AvatarFigurePartType.HEAD && activeModelKey !== AvatarEditorFigureCategory.NFT) ? 'center -35px' : 'center' } } { ...rest }>
|
||||
<InfiniteGrid.Item
|
||||
itemActive={ isSelected }
|
||||
itemImage={ (!partItem.isClear && isHead) ? assetUrl : undefined }
|
||||
className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ !partItem.isClear && isSellableNotOwned ? ' pet-sellable-locked' : '' }` }
|
||||
style={ isHead ? { backgroundSize: '200%', backgroundPosition: 'center -32px' } : undefined }
|
||||
{ ...rest }
|
||||
>
|
||||
{ !partItem.isClear && assetUrl && !isHead &&
|
||||
<img
|
||||
src={ assetUrl }
|
||||
alt=""
|
||||
className="absolute inset-0 w-full h-full object-contain pointer-events-none image-rendering-pixelated"
|
||||
draggable={ false }
|
||||
/> }
|
||||
{ !partItem.isClear && isHC && <LayoutCurrencyIcon className="absolute inset-e-1 bottom-1" type="hc" /> }
|
||||
{ partItem.isClear && <AvatarEditorIcon icon="clear" /> }
|
||||
{ !partItem.isClear && partItem.partSet.isSellable && !isSellableNotOwned && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
|
||||
|
||||
@@ -7,9 +7,10 @@ import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
|
||||
export const AvatarEditorFigureSetView: FC<{
|
||||
category: IAvatarEditorCategory;
|
||||
columnCount: number;
|
||||
estimateSize?: number;
|
||||
}> = props =>
|
||||
{
|
||||
const { category = null, columnCount = 3 } = props;
|
||||
const { category = null, columnCount = 3, estimateSize = 50 } = props;
|
||||
const { selectedParts = null, selectEditorPart } = useAvatarEditor();
|
||||
|
||||
const isPartItemSelected = (partItem: IAvatarEditorCategoryPartItem) =>
|
||||
@@ -29,7 +30,7 @@ export const AvatarEditorFigureSetView: FC<{
|
||||
};
|
||||
|
||||
return (
|
||||
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ 50 } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
|
||||
<InfiniteGrid<IAvatarEditorCategoryPartItem> columnCount={ columnCount } estimateSize={ estimateSize } itemRender={ (item: IAvatarEditorCategoryPartItem) =>
|
||||
{
|
||||
if(!item) return null;
|
||||
|
||||
|
||||
@@ -111,7 +111,7 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
className={ `flex items-center gap-2 mx-1 px-1.5 py-1.5 rounded cursor-pointer transition-all duration-150 ${ showFavorites ? 'bg-primary text-white' : 'hover:bg-card-grid-item-active' }` }
|
||||
onClick={ () => setShowFavorites(!showFavorites) }
|
||||
>
|
||||
<div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
|
||||
<div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
|
||||
<FaHeart className={ `text-xs ${ showFavorites ? 'text-white' : totalFavs > 0 ? 'text-danger' : 'text-muted' }` } />
|
||||
{ totalFavs > 0 &&
|
||||
<span className="absolute -top-1 -right-1 min-w-[14px] h-[14px] bg-danger text-white text-[8px] font-bold rounded-full flex items-center justify-center px-0.5 leading-none">
|
||||
@@ -163,7 +163,7 @@ const CatalogModernViewInner: FC<{}> = () =>
|
||||
activateNode(child);
|
||||
} }
|
||||
>
|
||||
<div className="w-[28px] h-[24px] flex items-center justify-center shrink-0 relative">
|
||||
<div className="w-7 h-6 flex items-center justify-center shrink-0 relative">
|
||||
<CatalogIconView icon={ child.iconId } />
|
||||
{ isHidden && <FaEyeSlash className="absolute -bottom-0.5 -right-0.5 text-[7px] text-danger" /> }
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
import { FC, useMemo } from 'react';
|
||||
import { GetConfigurationValue } from '../../../../api';
|
||||
import { LayoutImage } from '../../../../common';
|
||||
|
||||
export interface CatalogIconViewProps
|
||||
{
|
||||
icon: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const CatalogIconView: FC<CatalogIconViewProps> = props =>
|
||||
{
|
||||
const { icon = 0 } = props;
|
||||
const { icon = 0, className = '' } = props;
|
||||
|
||||
const getIconUrl = useMemo(() =>
|
||||
const iconUrl = useMemo(() =>
|
||||
{
|
||||
return ((GetConfigurationValue<string>('catalog.asset.icon.url')).replace('%name%', icon.toString()));
|
||||
}, [ icon ]);
|
||||
|
||||
return <LayoutImage imageUrl={ getIconUrl } style={ { width: 20, height: 20 } } />;
|
||||
return <img src={ iconUrl } alt="" className={ `w-5 h-5 object-contain image-rendering-pixelated ${ className }` } draggable={ false } />;
|
||||
};
|
||||
|
||||
@@ -19,8 +19,8 @@ export const CatalogRailItemView: FC<CatalogRailItemViewProps> = props =>
|
||||
title={ node.localization }
|
||||
onClick={ onClick }
|
||||
>
|
||||
<div className="w-[30px] h-[30px] flex items-center justify-center shrink-0">
|
||||
<CatalogIconView icon={ node.iconId } />
|
||||
<div className="w-8 h-8 flex items-center justify-center shrink-0">
|
||||
<CatalogIconView icon={ node.iconId } className="w-6 h-6" />
|
||||
</div>
|
||||
<span className={ `text-[11px] font-medium whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-200 truncate ${ isActive ? 'text-catalog-accent' : 'text-catalog-text' }` }>
|
||||
{ node.localization }
|
||||
|
||||
@@ -121,7 +121,7 @@ export const CatalogFavoritesView: FC<CatalogFavoritesViewProps> = props =>
|
||||
onClick={ () => { openPageByOfferId(fav.offerId); onClose(); } }
|
||||
>
|
||||
{ /* Furni icon */ }
|
||||
<div className="w-[28px] h-[28px] flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
|
||||
<div className="w-7 h-7 flex items-center justify-center shrink-0 bg-white rounded border border-card-grid-item-border overflow-hidden">
|
||||
{ fav.iconUrl
|
||||
? <img className="max-w-full max-h-full object-contain image-rendering-pixelated" src={ fav.iconUrl } />
|
||||
: fav.nodeIconId !== null
|
||||
|
||||
@@ -86,7 +86,7 @@ export const CatalogNavigationItemView: FC<CatalogNavigationItemViewProps> = pro
|
||||
>
|
||||
{ adminMode &&
|
||||
<FaArrowsAlt className="text-[7px] text-muted cursor-grab shrink-0 opacity-0 group-hover/nav:opacity-60" /> }
|
||||
<div className="w-[20px] h-[20px] flex items-center justify-center shrink-0">
|
||||
<div className="w-5 h-5 flex items-center justify-center shrink-0">
|
||||
<CatalogIconView icon={ node.iconId } />
|
||||
</div>
|
||||
<span className="flex-1 truncate" title={ adminMode ? `Page ID: ${ node.pageId }` : undefined }>{ node.localization }</span>
|
||||
|
||||
@@ -574,19 +574,6 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
|
||||
onClick={ () => setDropdownOpen(!dropdownOpen) }>
|
||||
{ dropdownOpen ? `${LocalizeText('widget.furni.present.close')} Buildtools` : `${LocalizeText('navigator.roomsettings.doormode.open')} Buildtools` }
|
||||
</button>
|
||||
<button
|
||||
className="w-full text-white text-xs bg-[#1e7295] hover:bg-[#1a617f] border border-[#ffffff33] rounded px-2 py-1 cursor-pointer transition-colors"
|
||||
onClick={ () =>
|
||||
{
|
||||
const roomObject = GetRoomEngine().getRoomObject(roomSession.roomId, avatarInfo.id, avatarInfo.isWallItem ? RoomObjectCategory.WALL : RoomObjectCategory.FLOOR);
|
||||
const typeId = roomObject?.model?.getValue(RoomObjectVariable.FURNITURE_TYPE_ID);
|
||||
|
||||
CreateLinkEvent('furni-editor/show');
|
||||
|
||||
if(typeId) window.dispatchEvent(new CustomEvent('furni-editor:open', { detail: { spriteId: typeId } }));
|
||||
} }>
|
||||
Edit Furni
|
||||
</button>
|
||||
{ dropdownOpen &&
|
||||
<div className="flex gap-[4px] w-full">
|
||||
{ /* Left panel: position + rotation */ }
|
||||
|
||||
@@ -96,8 +96,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
|
||||
<ToolbarItemView icon="camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
|
||||
{ isMod &&
|
||||
<ToolbarItemView icon="modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
|
||||
{ isMod &&
|
||||
<ToolbarItemView icon="catalog" onClick={ event => CreateLinkEvent('furni-editor/toggle') } /> }
|
||||
</Flex>
|
||||
<Flex alignItems="center" justifyContent="center" className="flex-1 min-w-0 max-w-[600px] mx-auto" id="toolbar-chat-input-container" />
|
||||
<Flex alignItems="center" gap={ 2 } className="flex-shrink-0">
|
||||
|
||||
+24
-242
@@ -30,51 +30,45 @@ body {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: .5rem
|
||||
width: .625rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar:horizontal {
|
||||
height: .5rem
|
||||
height: .625rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar:not(:horizontal) {
|
||||
width: .5rem
|
||||
width: .625rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:horizontal {
|
||||
border-bottom: .25rem solid rgba(0, 0, 0, .1)
|
||||
::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, .08);
|
||||
border-radius: .5rem;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:not(:horizontal) {
|
||||
border-right: .25rem solid rgba(0, 0, 0, .1)
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(30, 114, 149, .35);
|
||||
border-radius: .5rem;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal {
|
||||
border-bottom: .25rem solid rgba(30, 114, 149, .4)
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(30, 114, 149, .6);
|
||||
border-radius: .5rem;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal:hover {
|
||||
border-bottom: .25rem solid rgba(30, 114, 149, .8)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:horizontal:active {
|
||||
border-bottom: .25rem solid #185D79
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:not(:horizontal) {
|
||||
border-right: .25rem solid rgba(30, 114, 149, .4)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:not(:horizontal):hover {
|
||||
border-right: .25rem solid rgba(30, 114, 149, .8)
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:not(:horizontal):active {
|
||||
border-right: .25rem solid #185D79
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: #185D79;
|
||||
border-radius: .5rem;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: rgba(0, 0, 0, .1)
|
||||
background: rgba(0, 0, 0, .08);
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@@ -447,219 +441,7 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.nitro-avatar-editor-spritesheet {
|
||||
background: url('@/assets/images/avatareditor/avatar-editor-spritesheet.png') transparent no-repeat;
|
||||
|
||||
&.arrow-left-icon {
|
||||
width: 28px;
|
||||
height: 21px;
|
||||
background-position: -226px -131px;
|
||||
}
|
||||
|
||||
&.arrow-right-icon {
|
||||
width: 28px;
|
||||
height: 21px;
|
||||
background-position: -226px -162px;
|
||||
}
|
||||
|
||||
&.ca-icon {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-position: -226px -61px;
|
||||
|
||||
&.selected {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
background-position: -226px -96px;
|
||||
}
|
||||
}
|
||||
|
||||
&.cc-icon {
|
||||
width: 31px;
|
||||
height: 29px;
|
||||
background-position: -145px -5px;
|
||||
|
||||
&.selected {
|
||||
width: 31px;
|
||||
height: 29px;
|
||||
background-position: -145px -44px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ch-icon {
|
||||
width: 29px;
|
||||
height: 24px;
|
||||
background-position: -186px -39px;
|
||||
|
||||
&.selected {
|
||||
width: 29px;
|
||||
height: 24px;
|
||||
background-position: -186px -73px;
|
||||
}
|
||||
}
|
||||
|
||||
&.clear-icon {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
background-position: -145px -157px;
|
||||
}
|
||||
|
||||
&.cp-icon {
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
background-position: -145px -264px;
|
||||
|
||||
&.selected {
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
background-position: -186px -5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.ea-icon {
|
||||
width: 35px;
|
||||
height: 16px;
|
||||
background-position: -226px -193px;
|
||||
|
||||
&.selected {
|
||||
width: 35px;
|
||||
height: 16px;
|
||||
background-position: -226px -219px;
|
||||
}
|
||||
}
|
||||
|
||||
&.fa-icon {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
background-position: -186px -137px;
|
||||
|
||||
&.selected {
|
||||
width: 27px;
|
||||
height: 20px;
|
||||
background-position: -186px -107px;
|
||||
}
|
||||
}
|
||||
|
||||
&.female-icon {
|
||||
width: 18px;
|
||||
height: 27px;
|
||||
background-position: -186px -202px;
|
||||
|
||||
&.selected {
|
||||
width: 18px;
|
||||
height: 27px;
|
||||
background-position: -186px -239px;
|
||||
}
|
||||
}
|
||||
|
||||
&.ha-icon {
|
||||
width: 25px;
|
||||
height: 22px;
|
||||
background-position: -226px -245px;
|
||||
|
||||
&.selected {
|
||||
width: 25px;
|
||||
height: 22px;
|
||||
background-position: -226px -277px;
|
||||
}
|
||||
}
|
||||
|
||||
&.he-icon {
|
||||
width: 31px;
|
||||
height: 27px;
|
||||
background-position: -145px -83px;
|
||||
|
||||
&.selected {
|
||||
width: 31px;
|
||||
height: 27px;
|
||||
background-position: -145px -120px;
|
||||
}
|
||||
}
|
||||
|
||||
&.hr-icon {
|
||||
width: 29px;
|
||||
height: 25px;
|
||||
background-position: -145px -194px;
|
||||
|
||||
&.selected {
|
||||
width: 29px;
|
||||
height: 25px;
|
||||
background-position: -145px -229px;
|
||||
}
|
||||
}
|
||||
|
||||
&.lg-icon {
|
||||
width: 19px;
|
||||
height: 20px;
|
||||
background-position: -303px -45px;
|
||||
|
||||
&.selected {
|
||||
width: 19px;
|
||||
height: 20px;
|
||||
background-position: -303px -75px;
|
||||
}
|
||||
}
|
||||
|
||||
&.loading-icon {
|
||||
width: 21px;
|
||||
height: 25px;
|
||||
background-position: -186px -167px;
|
||||
}
|
||||
|
||||
|
||||
&.male-icon {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
background-position: -186px -276px;
|
||||
|
||||
&.selected {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
background-position: -272px -5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.sellable-icon {
|
||||
width: 17px;
|
||||
height: 15px;
|
||||
background-position: -303px -105px;
|
||||
}
|
||||
|
||||
|
||||
&.sh-icon {
|
||||
width: 37px;
|
||||
height: 10px;
|
||||
background-position: -303px -5px;
|
||||
|
||||
&.selected {
|
||||
width: 37px;
|
||||
height: 10px;
|
||||
background-position: -303px -25px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.spotlight-icon {
|
||||
width: 130px;
|
||||
height: 305px;
|
||||
background-position: -5px -5px;
|
||||
}
|
||||
|
||||
|
||||
&.wa-icon {
|
||||
width: 36px;
|
||||
height: 18px;
|
||||
background-position: -226px -5px;
|
||||
|
||||
&.selected {
|
||||
width: 36px;
|
||||
height: 18px;
|
||||
background-position: -226px -33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* Avatar editor icons are now rendered as <img> tags via AvatarEditorIcon.tsx */
|
||||
|
||||
.nitro-avatar-editor-wardrobe-figure-preview {
|
||||
background-color: #677181;
|
||||
@@ -710,7 +492,7 @@ body {
|
||||
|
||||
|
||||
.category-item {
|
||||
height: 40px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.figure-preview-container {
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from './useFurniEditor';
|
||||
@@ -1,239 +0,0 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
|
||||
export interface FurniItem
|
||||
{
|
||||
id: number;
|
||||
spriteId: number;
|
||||
itemName: string;
|
||||
publicName: string;
|
||||
type: string;
|
||||
width: number;
|
||||
length: number;
|
||||
stackHeight: number;
|
||||
allowStack: boolean;
|
||||
allowWalk: boolean;
|
||||
allowSit: boolean;
|
||||
allowLay: boolean;
|
||||
interactionType: string;
|
||||
interactionModesCount: number;
|
||||
}
|
||||
|
||||
export interface FurniDetail extends FurniItem
|
||||
{
|
||||
allowGift: boolean;
|
||||
allowTrade: boolean;
|
||||
allowRecycle: boolean;
|
||||
allowMarketplaceSell: boolean;
|
||||
allowInventoryStack: boolean;
|
||||
vendingIds: string;
|
||||
customparams: string;
|
||||
effectIdMale: number;
|
||||
effectIdFemale: number;
|
||||
clothingOnWalk: string;
|
||||
multiheight: string;
|
||||
description: string;
|
||||
usageCount: number;
|
||||
}
|
||||
|
||||
export interface CatalogRef
|
||||
{
|
||||
id: number;
|
||||
catalogName: string;
|
||||
costCredits: number;
|
||||
costPoints: number;
|
||||
pointsType: number;
|
||||
pageId: number;
|
||||
pageName: string;
|
||||
}
|
||||
|
||||
const API_BASE = '/api/admin/furni-editor';
|
||||
|
||||
async function apiFetch<T>(url: string, options?: RequestInit): Promise<T>
|
||||
{
|
||||
const res = await fetch(url, { credentials: 'include', ...options });
|
||||
const data = await res.json();
|
||||
|
||||
if(!res.ok || data.error) throw new Error(data.error || 'API error');
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
export const useFurniEditor = () =>
|
||||
{
|
||||
const [ items, setItems ] = useState<FurniItem[]>([]);
|
||||
const [ total, setTotal ] = useState(0);
|
||||
const [ page, setPage ] = useState(1);
|
||||
const [ loading, setLoading ] = useState(false);
|
||||
const [ error, setError ] = useState<string | null>(null);
|
||||
const [ selectedItem, setSelectedItem ] = useState<FurniDetail | null>(null);
|
||||
const [ catalogItems, setCatalogItems ] = useState<CatalogRef[]>([]);
|
||||
const [ interactions, setInteractions ] = useState<string[]>([]);
|
||||
const [ furniDataEntry, setFurniDataEntry ] = useState<Record<string, unknown> | null>(null);
|
||||
|
||||
const clearError = useCallback(() => setError(null), []);
|
||||
|
||||
const searchItems = useCallback(async (query: string, type: string, pg: number) =>
|
||||
{
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try
|
||||
{
|
||||
const params = new URLSearchParams({ q: query, limit: '20', page: String(pg) });
|
||||
|
||||
if(type) params.set('type', type);
|
||||
|
||||
const data = await apiFetch<{ items: FurniItem[]; total: number; page: number }>(`${ API_BASE }?${ params }`);
|
||||
|
||||
setItems(data.items);
|
||||
setTotal(data.total);
|
||||
setPage(data.page);
|
||||
}
|
||||
catch(e: any)
|
||||
{
|
||||
setError(e.message);
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadDetail = useCallback(async (id: number): Promise<boolean> =>
|
||||
{
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try
|
||||
{
|
||||
const data = await apiFetch<{ item: FurniDetail; catalogItems: CatalogRef[]; furniDataEntry: Record<string, unknown> | null }>(`${ API_BASE }/detail?id=${ id }`);
|
||||
|
||||
setSelectedItem(data.item);
|
||||
setCatalogItems(data.catalogItems);
|
||||
setFurniDataEntry(data.furniDataEntry);
|
||||
|
||||
return true;
|
||||
}
|
||||
catch(e: any)
|
||||
{
|
||||
setError(e.message);
|
||||
|
||||
return false;
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const updateItem = useCallback(async (id: number, fields: Record<string, unknown>) =>
|
||||
{
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try
|
||||
{
|
||||
await apiFetch(`${ API_BASE }/update?id=${ id }`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(fields)
|
||||
});
|
||||
|
||||
return true;
|
||||
}
|
||||
catch(e: any)
|
||||
{
|
||||
setError(e.message);
|
||||
|
||||
return false;
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const createItem = useCallback(async (fields: Record<string, unknown>) =>
|
||||
{
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try
|
||||
{
|
||||
const data = await apiFetch<{ id: number }>(`${ API_BASE }`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(fields)
|
||||
});
|
||||
|
||||
return data.id;
|
||||
}
|
||||
catch(e: any)
|
||||
{
|
||||
setError(e.message);
|
||||
|
||||
return null;
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const deleteItem = useCallback(async (id: number) =>
|
||||
{
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
try
|
||||
{
|
||||
await apiFetch(`${ API_BASE }/delete?id=${ id }`, { method: 'POST' });
|
||||
|
||||
return true;
|
||||
}
|
||||
catch(e: any)
|
||||
{
|
||||
setError(e.message);
|
||||
|
||||
return false;
|
||||
}
|
||||
finally
|
||||
{
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const loadInteractions = useCallback(async () =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const data = await apiFetch<{ interactions: Array<string | { name: string }> }>(`${ API_BASE }/interactions`);
|
||||
|
||||
setInteractions(data.interactions.map(i => typeof i === 'string' ? i : i.name));
|
||||
}
|
||||
catch {}
|
||||
}, []);
|
||||
|
||||
const loadBySpriteId = useCallback(async (spriteId: number): Promise<boolean> =>
|
||||
{
|
||||
try
|
||||
{
|
||||
const data = await apiFetch<{ id: number }>(`${ API_BASE }/by-sprite?spriteId=${ spriteId }`);
|
||||
|
||||
return await loadDetail(data.id);
|
||||
}
|
||||
catch(e: any)
|
||||
{
|
||||
setError(e.message);
|
||||
|
||||
return false;
|
||||
}
|
||||
}, [ loadDetail ]);
|
||||
|
||||
return {
|
||||
items, total, page, loading, error, clearError,
|
||||
selectedItem, setSelectedItem, catalogItems, furniDataEntry,
|
||||
interactions,
|
||||
searchItems, loadDetail, loadBySpriteId, updateItem, createItem, deleteItem, loadInteractions
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user