mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
Add NFT avatar tab and wired extras UI
This commit is contained in:
Lorenzune
@@ -9,7 +9,7 @@ const DEFAULT_DIRECTION: number = 4;
|
||||
export const AvatarEditorFigurePreviewView: FC<{}> = props =>
|
||||
{
|
||||
const [ direction, setDirection ] = useState<number>(DEFAULT_DIRECTION);
|
||||
const { getFigureString = null } = useAvatarEditor();
|
||||
const { getFigureString = null, gender = 'M' } = useAvatarEditor();
|
||||
|
||||
const rotateFigure = (newDirection: number) =>
|
||||
{
|
||||
@@ -28,7 +28,7 @@ export const AvatarEditorFigurePreviewView: FC<{}> = props =>
|
||||
|
||||
return (
|
||||
<div className="flex flex-col figure-preview-container overflow-hidden relative">
|
||||
<LayoutAvatarImageView direction={ direction } figure={ getFigureString } scale={ 2 } />
|
||||
<LayoutAvatarImageView direction={ direction } figure={ getFigureString } gender={ gender } scale={ 2 } />
|
||||
<AvatarEditorIcon className="avatar-spotlight" icon="spotlight" />
|
||||
<div className="avatar-shadow" />
|
||||
<div className="arrow-container">
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
import { AvatarFigurePartType, FigureDataContainer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { CreateLinkEvent, GetClubMemberLevel, IAvatarEditorCategory } from '../../api';
|
||||
import { LayoutAvatarImageView, LayoutCurrencyIcon } from '../../common';
|
||||
import { useAvatarEditor } from '../../hooks';
|
||||
import { AvatarEditorIcon } from './AvatarEditorIcon';
|
||||
import { AvatarEditorFigureSetView } from './figure-set';
|
||||
import { AvatarEditorAdvancedColorView, AvatarEditorPaletteSetView } from './palette-set';
|
||||
|
||||
export const AvatarEditorNftView: FC<{
|
||||
categories: IAvatarEditorCategory[];
|
||||
}> = props =>
|
||||
{
|
||||
const { categories = [] } = props;
|
||||
const [ didChange, setDidChange ] = useState(false);
|
||||
const [ activeSetType, setActiveSetType ] = useState('');
|
||||
const [ advancedColorMode, setAdvancedColorMode ] = useState(false);
|
||||
const hasHC = GetClubMemberLevel() > 0;
|
||||
const { maxPaletteCount = 1, selectedColorParts = null, getFirstSelectableColor = null, selectEditorColor = null, gender = null, setGender = null, getFigureString = '' } = useAvatarEditor();
|
||||
|
||||
const activeCategory = useMemo(() =>
|
||||
{
|
||||
return categories.find(category => category.setType === activeSetType) ?? null;
|
||||
}, [ categories, activeSetType ]);
|
||||
|
||||
const selectSet = useCallback((setType: string) =>
|
||||
{
|
||||
const selectedPalettes = selectedColorParts[setType];
|
||||
|
||||
if(!selectedPalettes || !selectedPalettes.length) selectEditorColor(setType, 0, getFirstSelectableColor(setType));
|
||||
|
||||
setActiveSetType(setType);
|
||||
}, [ getFirstSelectableColor, selectEditorColor, selectedColorParts ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!categories || !categories.length || !didChange) return;
|
||||
|
||||
selectSet(categories[0]?.setType);
|
||||
setDidChange(false);
|
||||
}, [ categories, didChange, selectSet ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setDidChange(true);
|
||||
}, [ categories ]);
|
||||
|
||||
if(!categories.length || !activeCategory)
|
||||
{
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center h-full text-sm text-[#888] gap-2">
|
||||
<div className="text-lg font-bold text-white">NFT</div>
|
||||
<div>No NFT items available.</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col overflow-hidden h-full gap-1">
|
||||
<div className="flex items-center px-2 gap-2 shrink-0 flex-wrap">
|
||||
{ categories.map(category =>
|
||||
<div
|
||||
key={ category.setType }
|
||||
className="category-item flex items-center justify-center cursor-pointer"
|
||||
onClick={ event => selectSet(category.setType) }>
|
||||
{ (category.setType === AvatarFigurePartType.HEAD)
|
||||
? (
|
||||
<div className={ `relative flex items-center justify-center w-[28px] h-[28px] rounded-full overflow-hidden border ${ activeSetType === category.setType ? 'border-white bg-white/20' : 'border-white/30 bg-black/20' }` }>
|
||||
<LayoutAvatarImageView classNames={ ['!w-[28px]', '!h-[28px]', '!left-0'] } direction={ 2 } figure={ getFigureString } gender={ gender } headOnly={ true } scale={ 0.42 } />
|
||||
</div>
|
||||
)
|
||||
: <AvatarEditorIcon icon={ category.setType } selected={ activeSetType === category.setType } /> }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
|
||||
{ (activeSetType === AvatarFigurePartType.HEAD) &&
|
||||
<div className="flex items-center px-2 gap-2 shrink-0">
|
||||
<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 flex items-center justify-center cursor-pointer" onClick={ event => setGender(AvatarFigurePartType.FEMALE) }>
|
||||
<AvatarEditorIcon icon="female" selected={ gender === FigureDataContainer.FEMALE } />
|
||||
</div>
|
||||
</div> }
|
||||
|
||||
<div className="flex-1 min-h-0 overflow-hidden">
|
||||
<AvatarEditorFigureSetView category={ activeCategory } columnCount={ 6 } />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<div className={ `flex shrink-0 overflow-hidden gap-2 ${ maxPaletteCount === 2 ? 'dual-palette' : '' }` } style={ { height: '160px' } }>
|
||||
{ (maxPaletteCount >= 1) &&
|
||||
<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) &&
|
||||
<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>
|
||||
);
|
||||
};
|
||||
@@ -6,6 +6,7 @@ import { Button, ButtonGroup, NitroCardContentView, NitroCardHeaderView, NitroCa
|
||||
import { useAvatarEditor } from '../../hooks';
|
||||
import { AvatarEditorFigurePreviewView } from './AvatarEditorFigurePreviewView';
|
||||
import { AvatarEditorModelView } from './AvatarEditorModelView';
|
||||
import { AvatarEditorNftView } from './AvatarEditorNftView';
|
||||
import { AvatarEditorPetView } from './AvatarEditorPetView';
|
||||
import { AvatarEditorWardrobeView } from './AvatarEditorWardrobeView';
|
||||
|
||||
@@ -16,6 +17,7 @@ export const AvatarEditorView: FC<{}> = props =>
|
||||
|
||||
const isWardrobeOpen = (activeModelKey === AvatarEditorFigureCategory.WARDROBE);
|
||||
const isPetsOpen = (activeModelKey === AvatarEditorFigureCategory.PETS);
|
||||
const isNftOpen = (activeModelKey === AvatarEditorFigureCategory.NFT);
|
||||
|
||||
const processAction = (action: string) =>
|
||||
{
|
||||
@@ -85,10 +87,12 @@ export const AvatarEditorView: FC<{}> = props =>
|
||||
const isActive = (activeModelKey === modelKey);
|
||||
const isWardrobe = (modelKey === AvatarEditorFigureCategory.WARDROBE);
|
||||
const isPets = (modelKey === AvatarEditorFigureCategory.PETS);
|
||||
const isNft = (modelKey === AvatarEditorFigureCategory.NFT);
|
||||
|
||||
let tabClass = `tab ${ modelKey }`;
|
||||
if(isWardrobe) tabClass = 'tab-wardrobe';
|
||||
else if(isPets) tabClass = 'tab-pets';
|
||||
else if(isNft) tabClass = 'tab-nft';
|
||||
|
||||
return (
|
||||
<NitroCardTabsItemView key={ modelKey } isActive={ isActive } onClick={ event => setActiveModelKey(modelKey) }>
|
||||
@@ -101,12 +105,14 @@ export const AvatarEditorView: FC<{}> = props =>
|
||||
<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 && !isPetsOpen) &&
|
||||
{ (activeModelKey.length > 0 && !isWardrobeOpen && !isPetsOpen && !isNftOpen) &&
|
||||
<AvatarEditorModelView categories={ avatarModels[activeModelKey] } name={ activeModelKey } /> }
|
||||
{ isWardrobeOpen &&
|
||||
<AvatarEditorWardrobeView /> }
|
||||
{ isPetsOpen &&
|
||||
<AvatarEditorPetView categories={ avatarModels[activeModelKey] } /> }
|
||||
{ isNftOpen &&
|
||||
<AvatarEditorNftView categories={ avatarModels[activeModelKey] } /> }
|
||||
</div>
|
||||
{ /* right: preview + actions */ }
|
||||
<div className="flex flex-col shrink-0 w-[120px] gap-1 overflow-hidden">
|
||||
|
||||
@@ -20,6 +20,7 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
const clubLevel = partItem.partSet?.clubLevel ?? 0;
|
||||
const isHC = !GetConfigurationValue<boolean>('hc.disabled', false) && (clubLevel > 0);
|
||||
const isLocked = isHC && (GetClubMemberLevel() < clubLevel);
|
||||
const isSellableNotOwned = partItem.isSellableNotOwned ?? false;
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
@@ -35,26 +36,36 @@ export const AvatarEditorFigureSetItemView: FC<{
|
||||
|
||||
if(setType === AvatarFigurePartType.HEAD)
|
||||
{
|
||||
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked);
|
||||
url = await AvatarEditorThumbnailsHelper.buildForFace(getFigureStringWithFace(partItem.id), partIsLocked || isSellableNotOwned);
|
||||
}
|
||||
else
|
||||
{
|
||||
url = await AvatarEditorThumbnailsHelper.build(setType, partItem, partItem.usesColor, selectedColorParts[setType] ?? null, partIsLocked);
|
||||
url = await AvatarEditorThumbnailsHelper.build(
|
||||
setType,
|
||||
partItem,
|
||||
partItem.usesColor,
|
||||
selectedColorParts[setType] ?? null,
|
||||
partIsLocked || isSellableNotOwned
|
||||
);
|
||||
}
|
||||
|
||||
if(url && url.length) setAssetUrl(url);
|
||||
};
|
||||
|
||||
loadImage();
|
||||
}, [ setType, partItem, selectedColorParts, getFigureStringWithFace ]);
|
||||
}, [ setType, partItem, selectedColorParts, getFigureStringWithFace, isSellableNotOwned ]);
|
||||
|
||||
if(!partItem) return null;
|
||||
|
||||
return (
|
||||
<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 }>
|
||||
<InfiniteGrid.Item itemActive={ isSelected } itemImage={ (partItem.isClear ? undefined : assetUrl) } className={ `avatar-parts mx-auto${ isSelected ? ' part-selected' : '' }${ isSellableNotOwned ? ' pet-sellable-locked' : '' }` } 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" /> }
|
||||
{ !partItem.isClear && partItem.partSet.isSellable && !isSellableNotOwned && <AvatarEditorIcon className="inset-e-1 bottom-1 absolute" icon="sellable" /> }
|
||||
{ isSellableNotOwned &&
|
||||
<div className="pet-sellable-badge">
|
||||
<LayoutCurrencyIcon type={ -1 } />
|
||||
</div> }
|
||||
</InfiniteGrid.Item>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
export * from './AvatarEditorFigurePreviewView';
|
||||
export * from './AvatarEditorIcon';
|
||||
export * from './AvatarEditorModelView';
|
||||
export * from './AvatarEditorNftView';
|
||||
export * from './AvatarEditorPetView';
|
||||
export * from './AvatarEditorView';
|
||||
export * from './AvatarEditorWardrobeView';
|
||||
|
||||
@@ -57,8 +57,10 @@ import { WiredExtraMoveCarryUsersView } from '../extras/WiredExtraMoveCarryUsers
|
||||
import { WiredExtraExecuteInOrderView } from '../extras/WiredExtraExecuteInOrderView';
|
||||
import { WiredExtraExecutionLimitView } from '../extras/WiredExtraExecutionLimitView';
|
||||
import { WiredExtraMoveNoAnimationView } from '../extras/WiredExtraMoveNoAnimationView';
|
||||
import { WiredExtraOrEvalView } from '../extras/WiredExtraOrEvalView';
|
||||
import { WiredExtraMovePhysicsView } from '../extras/WiredExtraMovePhysicsView';
|
||||
import { WiredExtraRandomView } from '../extras/WiredExtraRandomView';
|
||||
import { WiredExtraTextOutputUsernameView } from '../extras/WiredExtraTextOutputUsernameView';
|
||||
import { WiredExtraUnseenView } from '../extras/WiredExtraUnseenView';
|
||||
|
||||
export const WiredActionLayoutView = (code: number) =>
|
||||
@@ -189,6 +191,10 @@ export const WiredActionLayoutView = (code: number) =>
|
||||
return <WiredExtraExecuteInOrderView />;
|
||||
case WiredActionLayoutCode.EXECUTION_LIMIT_EXTRA:
|
||||
return <WiredExtraExecutionLimitView />;
|
||||
case WiredActionLayoutCode.OR_EVAL_EXTRA:
|
||||
return <WiredExtraOrEvalView />;
|
||||
case WiredActionLayoutCode.TEXT_OUTPUT_USERNAME_EXTRA:
|
||||
return <WiredExtraTextOutputUsernameView />;
|
||||
case WiredActionLayoutCode.SEND_SIGNAL:
|
||||
return <WiredActionSendSignalView />;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,143 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { LocalizeText, WiredFurniType } from '../../../../api';
|
||||
import { Text } from '../../../../common';
|
||||
import { useWired } from '../../../../hooks';
|
||||
import { WiredSourceOption, WiredSourcesSelector } from '../WiredSourcesSelector';
|
||||
import { WiredExtraBaseView } from './WiredExtraBaseView';
|
||||
|
||||
const MODE_ALL = 0;
|
||||
const MODE_AT_LEAST_ONE = 1;
|
||||
const MODE_NOT_ALL = 2;
|
||||
const MODE_NONE = 3;
|
||||
const MODE_LESS_THAN = 4;
|
||||
const MODE_EXACTLY = 5;
|
||||
const MODE_MORE_THAN = 6;
|
||||
const MIN_COMPARE_VALUE = 0;
|
||||
const MAX_COMPARE_VALUE = 100;
|
||||
const DEFAULT_COMPARE_VALUE = 1;
|
||||
const COMPARE_VALUE_PATTERN = /^\d*$/;
|
||||
const CONDITION_EVALUATION_INTERACTION_TYPES = [ 'wf_cnd_*', 'wf_xtra_*' ];
|
||||
const CONDITION_EVALUATION_ERROR_KEY = 'wiredfurni.error.condition_evaluation_furni';
|
||||
|
||||
const FURNI_SOURCES: WiredSourceOption[] = [
|
||||
{ value: 100, label: 'wiredfurni.params.sources.furni.100' },
|
||||
{ value: 0, label: 'wiredfurni.params.sources.furni.0' },
|
||||
{ value: 200, label: 'wiredfurni.params.sources.furni.200' },
|
||||
{ value: 201, label: 'wiredfurni.params.sources.furni.201' }
|
||||
];
|
||||
|
||||
const MODE_OPTIONS = [ MODE_ALL, MODE_AT_LEAST_ONE, MODE_NOT_ALL, MODE_NONE ];
|
||||
const COMPARISON_OPTIONS = [ MODE_LESS_THAN, MODE_EXACTLY, MODE_MORE_THAN ];
|
||||
|
||||
const normalizeEvaluationMode = (value: number) => ([ ...MODE_OPTIONS, ...COMPARISON_OPTIONS ].includes(value) ? value : MODE_ALL);
|
||||
const normalizeFurniSource = (value: number) => (FURNI_SOURCES.some(option => option.value === value) ? value : 0);
|
||||
const normalizeCompareValue = (value: number) =>
|
||||
{
|
||||
if(isNaN(value)) return DEFAULT_COMPARE_VALUE;
|
||||
|
||||
return Math.max(MIN_COMPARE_VALUE, Math.min(MAX_COMPARE_VALUE, Math.floor(value)));
|
||||
};
|
||||
|
||||
export const WiredExtraOrEvalView: FC<{}> = () =>
|
||||
{
|
||||
const { trigger = null, setIntParams = null, setStringParam = null, setAllowedInteractionTypes = null, setAllowedInteractionErrorKey = null } = useWired();
|
||||
const [ evaluationMode, setEvaluationMode ] = useState(MODE_ALL);
|
||||
const [ furniSource, setFurniSource ] = useState(0);
|
||||
const [ compareValue, setCompareValue ] = useState(DEFAULT_COMPARE_VALUE);
|
||||
const [ compareValueInput, setCompareValueInput ] = useState(DEFAULT_COMPARE_VALUE.toString());
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
setAllowedInteractionTypes(CONDITION_EVALUATION_INTERACTION_TYPES);
|
||||
setAllowedInteractionErrorKey(CONDITION_EVALUATION_ERROR_KEY);
|
||||
|
||||
return () =>
|
||||
{
|
||||
setAllowedInteractionTypes(null);
|
||||
setAllowedInteractionErrorKey(null);
|
||||
};
|
||||
}, [ setAllowedInteractionErrorKey, setAllowedInteractionTypes ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!trigger) return;
|
||||
|
||||
setEvaluationMode(normalizeEvaluationMode((trigger.intData.length > 0) ? trigger.intData[0] : MODE_ALL));
|
||||
setFurniSource(normalizeFurniSource((trigger.intData.length > 1) ? trigger.intData[1] : 0));
|
||||
const nextCompareValue = normalizeCompareValue((trigger.intData.length > 2) ? trigger.intData[2] : DEFAULT_COMPARE_VALUE);
|
||||
setCompareValue(nextCompareValue);
|
||||
setCompareValueInput(nextCompareValue.toString());
|
||||
}, [ trigger ]);
|
||||
|
||||
const updateCompareValue = (value: number) =>
|
||||
{
|
||||
const nextValue = normalizeCompareValue(value);
|
||||
|
||||
setCompareValue(nextValue);
|
||||
setCompareValueInput(nextValue.toString());
|
||||
};
|
||||
|
||||
const updateCompareValueInput = (value: string) =>
|
||||
{
|
||||
if(!COMPARE_VALUE_PATTERN.test(value)) return;
|
||||
|
||||
setCompareValueInput(value);
|
||||
|
||||
if(!value.length)
|
||||
{
|
||||
setCompareValue(MIN_COMPARE_VALUE);
|
||||
return;
|
||||
}
|
||||
|
||||
updateCompareValue(parseInt(value));
|
||||
};
|
||||
|
||||
const save = () =>
|
||||
{
|
||||
setIntParams([ normalizeEvaluationMode(evaluationMode), normalizeFurniSource(furniSource), normalizeCompareValue(compareValue) ]);
|
||||
setStringParam('');
|
||||
};
|
||||
|
||||
return (
|
||||
<WiredExtraBaseView
|
||||
hasSpecialInput={ true }
|
||||
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT }
|
||||
save={ save }
|
||||
cardStyle={ { width: 360 } }
|
||||
footer={ <WiredSourcesSelector showFurni={ true } furniSource={ furniSource } furniSources={ FURNI_SOURCES } onChangeFurni={ value => setFurniSource(normalizeFurniSource(value)) } /> }>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Text>{ LocalizeText('wiredfurni.params.eval_mode') }</Text>
|
||||
{ MODE_OPTIONS.map(mode =>
|
||||
{
|
||||
return (
|
||||
<label key={ mode } className="flex items-center gap-1 cursor-pointer">
|
||||
<input checked={ (evaluationMode === mode) } className="form-check-input" name="wiredExtraOrEvalMode" type="radio" onChange={ () => setEvaluationMode(mode) } />
|
||||
<Text>{ LocalizeText(`wiredfurni.params.eval_mode.${ mode }`) }</Text>
|
||||
</label>
|
||||
);
|
||||
}) }
|
||||
{ COMPARISON_OPTIONS.map(mode =>
|
||||
{
|
||||
const isSelected = (evaluationMode === mode);
|
||||
|
||||
return (
|
||||
<label key={ mode } className="flex items-center gap-2 cursor-pointer">
|
||||
<input checked={ isSelected } className="form-check-input" name="wiredExtraOrEvalMode" type="radio" onChange={ () => setEvaluationMode(mode) } />
|
||||
<Text>{ LocalizeText(`wiredfurni.params.eval_mode.cmp.${ mode - MODE_LESS_THAN }`) }</Text>
|
||||
<input
|
||||
className="form-control form-control-sm w-16"
|
||||
inputMode="numeric"
|
||||
max={ MAX_COMPARE_VALUE }
|
||||
min={ MIN_COMPARE_VALUE }
|
||||
type="text"
|
||||
value={ compareValueInput }
|
||||
onBlur={ () => setCompareValueInput(normalizeCompareValue(compareValue).toString()) }
|
||||
onChange={ event => updateCompareValueInput(event.target.value) }
|
||||
onFocus={ () => setEvaluationMode(mode) } />
|
||||
</label>
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
</WiredExtraBaseView>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,123 @@
|
||||
import { FC, useEffect, useMemo, useState } from 'react';
|
||||
import { LocalizeText, WiredFurniType } from '../../../../api';
|
||||
import { Text } from '../../../../common';
|
||||
import { useWired } from '../../../../hooks';
|
||||
import { NitroInput } from '../../../../layout';
|
||||
import { WiredSourcesSelector, CLICKED_USER_SOURCE_VALUE } from '../WiredSourcesSelector';
|
||||
import { WiredExtraBaseView } from './WiredExtraBaseView';
|
||||
|
||||
const TYPE_SINGLE = 1;
|
||||
const TYPE_MULTIPLE = 2;
|
||||
const DEFAULT_PLACEHOLDER_NAME = '';
|
||||
const DEFAULT_DELIMITER = ', ';
|
||||
const MAX_PLACEHOLDER_NAME_LENGTH = 32;
|
||||
const MAX_DELIMITER_LENGTH = 16;
|
||||
const PLACEHOLDER_WRAPPER_PATTERN = /^\$\((.*)\)$/;
|
||||
|
||||
const normalizePlaceholderType = (value: number) => ((value === TYPE_MULTIPLE) ? TYPE_MULTIPLE : TYPE_SINGLE);
|
||||
const normalizeUserSource = (value: number) => ((value === 0) || (value === 200) || (value === 201) || (value === CLICKED_USER_SOURCE_VALUE) ? value : 0);
|
||||
const normalizePlaceholderName = (value: string) =>
|
||||
{
|
||||
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
|
||||
|
||||
if(PLACEHOLDER_WRAPPER_PATTERN.test(normalizedValue))
|
||||
{
|
||||
normalizedValue = normalizedValue.substring(2, normalizedValue.length - 1).trim();
|
||||
}
|
||||
|
||||
return normalizedValue.slice(0, MAX_PLACEHOLDER_NAME_LENGTH);
|
||||
};
|
||||
|
||||
const normalizeDelimiter = (value: string) =>
|
||||
{
|
||||
if(value === undefined || value === null) return DEFAULT_DELIMITER;
|
||||
|
||||
return value.replace(/[\t\r\n]/g, '').slice(0, MAX_DELIMITER_LENGTH);
|
||||
};
|
||||
|
||||
const splitStringData = (value: string) =>
|
||||
{
|
||||
if(!value?.length) return [ DEFAULT_PLACEHOLDER_NAME, DEFAULT_DELIMITER ];
|
||||
|
||||
const parts = value.split('\t');
|
||||
|
||||
if(parts.length <= 1) return [ value, DEFAULT_DELIMITER ];
|
||||
|
||||
return [ parts[0], parts[1] ];
|
||||
};
|
||||
|
||||
const escapeHtml = (value: string) => value
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
|
||||
export const WiredExtraTextOutputUsernameView: FC<{}> = () =>
|
||||
{
|
||||
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
|
||||
const [ placeholderName, setPlaceholderName ] = useState(DEFAULT_PLACEHOLDER_NAME);
|
||||
const [ placeholderType, setPlaceholderType ] = useState(TYPE_SINGLE);
|
||||
const [ delimiter, setDelimiter ] = useState(DEFAULT_DELIMITER);
|
||||
const [ userSource, setUserSource ] = useState(0);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!trigger) return;
|
||||
|
||||
const [ nextPlaceholderName, nextDelimiter ] = splitStringData(trigger.stringData);
|
||||
|
||||
setPlaceholderName(normalizePlaceholderName(nextPlaceholderName));
|
||||
setDelimiter(normalizeDelimiter(nextDelimiter));
|
||||
setPlaceholderType(normalizePlaceholderType((trigger.intData.length > 0) ? trigger.intData[0] : TYPE_SINGLE));
|
||||
setUserSource(normalizeUserSource((trigger.intData.length > 1) ? trigger.intData[1] : 0));
|
||||
}, [ trigger ]);
|
||||
|
||||
const previewToken = useMemo(() =>
|
||||
{
|
||||
const effectiveName = normalizePlaceholderName(placeholderName) || 'placeholder';
|
||||
|
||||
return `$(${ effectiveName })`;
|
||||
}, [ placeholderName ]);
|
||||
|
||||
const previewHtml = useMemo(() => LocalizeText('wiredfurni.params.texts.placeholder_preview', [ 'placeholder' ], [ escapeHtml(previewToken) ]), [ previewToken ]);
|
||||
|
||||
const save = () =>
|
||||
{
|
||||
setIntParams([ normalizePlaceholderType(placeholderType), normalizeUserSource(userSource) ]);
|
||||
setStringParam(`${ normalizePlaceholderName(placeholderName) }\t${ normalizeDelimiter(delimiter) }`);
|
||||
};
|
||||
|
||||
return (
|
||||
<WiredExtraBaseView
|
||||
hasSpecialInput={ true }
|
||||
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
|
||||
save={ save }
|
||||
cardStyle={ { width: 400 } }
|
||||
footer={ <WiredSourcesSelector showUsers={ true } userSource={ userSource } onChangeUsers={ value => setUserSource(normalizeUserSource(value)) } /> }>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.placeholder_name') }</Text>
|
||||
<NitroInput maxLength={ MAX_PLACEHOLDER_NAME_LENGTH } type="text" value={ placeholderName } onChange={ event => setPlaceholderName(normalizePlaceholderName(event.target.value)) } />
|
||||
</div>
|
||||
<Text dangerouslySetInnerHTML={ { __html: previewHtml } } />
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type') }</Text>
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input checked={ (placeholderType === TYPE_SINGLE) } className="form-check-input" name="wiredTextOutputUsernameType" type="radio" onChange={ () => setPlaceholderType(TYPE_SINGLE) } />
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type.1') }</Text>
|
||||
</label>
|
||||
<label className="flex items-center gap-1 cursor-pointer">
|
||||
<input checked={ (placeholderType === TYPE_MULTIPLE) } className="form-check-input" name="wiredTextOutputUsernameType" type="radio" onChange={ () => setPlaceholderType(TYPE_MULTIPLE) } />
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.placeholder_type.2') }</Text>
|
||||
</label>
|
||||
</div>
|
||||
{ placeholderType === TYPE_MULTIPLE &&
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text>{ LocalizeText('wiredfurni.params.texts.select_delimiter') }</Text>
|
||||
<NitroInput maxLength={ MAX_DELIMITER_LENGTH } type="text" value={ delimiter } onChange={ event => setDelimiter(normalizeDelimiter(event.target.value)) } />
|
||||
</div> }
|
||||
</div>
|
||||
</WiredExtraBaseView>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user