mirror of
https://github.com/duckietm/Nitro-V3.git
synced 2026-06-19 23:16:21 +00:00
🆙 Cleanup
This commit is contained in:
duckietm
@@ -1,7 +1,5 @@
|
||||
import { PurchasePrefixComposer } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { LocalizeText, SendMessageComposer, PRESET_PREFIX_EFFECTS, generateGradientColors } from '../../../../../api';
|
||||
import { PrefixPreview } from '../../../../../layout';
|
||||
import { LocalizeText, SanitizeHtml, SendMessageComposer, PRESET_PREFIX_EFFECTS, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../../api';
|
||||
import { CatalogLayoutProps } from './CatalogLayout.types';
|
||||
import data from '@emoji-mart/data';
|
||||
@@ -24,13 +22,11 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
}, [ page, hideNavigation ]);
|
||||
|
||||
const [ prefixText, setPrefixText ] = useState('');
|
||||
const [ colorMode, setColorMode ] = useState<'single' | 'perLetter' | 'gradient'>('single');
|
||||
const [ colorMode, setColorMode ] = useState<'single' | 'perLetter'>('single');
|
||||
const [ singleColor, setSingleColor ] = useState('#FFFFFF');
|
||||
const [ letterColors, setLetterColors ] = useState<Record<number, string>>({});
|
||||
const [ selectedLetterIndex, setSelectedLetterIndex ] = useState<number | null>(null);
|
||||
const [ customColorInput, setCustomColorInput ] = useState('#FFFFFF');
|
||||
const [ gradientStart, setGradientStart ] = useState('#FF0000');
|
||||
const [ gradientEnd, setGradientEnd ] = useState('#0066FF');
|
||||
const [ selectedIcon, setSelectedIcon ] = useState('');
|
||||
const [ showIconPicker, setShowIconPicker ] = useState(false);
|
||||
const [ selectedEffect, setSelectedEffect ] = useState('');
|
||||
@@ -40,16 +36,15 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
{
|
||||
if(colorMode === 'single') return singleColor;
|
||||
|
||||
if(colorMode === 'gradient')
|
||||
{
|
||||
const steps = Math.max(prefixText.length, 2);
|
||||
return generateGradientColors(gradientStart, gradientEnd, steps).join(',');
|
||||
}
|
||||
|
||||
if(!prefixText.length) return singleColor;
|
||||
|
||||
return [ ...prefixText ].map((_, i) => letterColors[i] || singleColor).join(',');
|
||||
}, [ colorMode, singleColor, letterColors, prefixText, gradientStart, gradientEnd ]);
|
||||
}, [ colorMode, singleColor, letterColors, prefixText ]);
|
||||
|
||||
const previewColors = useMemo(() =>
|
||||
{
|
||||
return parsePrefixColors(prefixText || '...', colorString || '#FFFFFF');
|
||||
}, [ prefixText, colorString ]);
|
||||
|
||||
const isValid = useMemo(() =>
|
||||
{
|
||||
@@ -57,12 +52,9 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
|
||||
if(colorMode === 'single') return /^#[0-9A-Fa-f]{6}$/.test(singleColor);
|
||||
|
||||
if(colorMode === 'gradient')
|
||||
return /^#[0-9A-Fa-f]{6}$/.test(gradientStart) && /^#[0-9A-Fa-f]{6}$/.test(gradientEnd);
|
||||
|
||||
const colors = colorString.split(',');
|
||||
return colors.every(c => /^#[0-9A-Fa-f]{6}$/.test(c));
|
||||
}, [ prefixText, colorMode, singleColor, colorString, gradientStart, gradientEnd ]);
|
||||
}, [ prefixText, colorMode, singleColor, colorString ]);
|
||||
|
||||
const handlePurchase = () =>
|
||||
{
|
||||
@@ -80,7 +72,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
setSingleColor(color);
|
||||
setCustomColorInput(color);
|
||||
}
|
||||
else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
|
||||
else if(selectedLetterIndex !== null)
|
||||
{
|
||||
setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: color }));
|
||||
setCustomColorInput(color);
|
||||
@@ -104,7 +96,7 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
{
|
||||
setSingleColor(value);
|
||||
}
|
||||
else if(colorMode === 'perLetter' && selectedLetterIndex !== null)
|
||||
else if(selectedLetterIndex !== null)
|
||||
{
|
||||
setLetterColors(prev => ({ ...prev, [selectedLetterIndex]: value }));
|
||||
}
|
||||
@@ -129,12 +121,18 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
setLetterColors(newColors);
|
||||
};
|
||||
|
||||
const hasMultiColor = colorMode === 'perLetter' && previewColors.length > 1 && new Set(previewColors).size > 1;
|
||||
|
||||
const currentActiveColor = colorMode === 'single'
|
||||
? singleColor
|
||||
: (selectedLetterIndex !== null ? (letterColors[selectedLetterIndex] || singleColor) : singleColor);
|
||||
|
||||
const effectStyle = getPrefixEffectStyle(selectedEffect, previewColors[0] || '#FFFFFF');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 h-full overflow-auto p-1">
|
||||
<style>{ PREFIX_EFFECT_KEYFRAMES }</style>
|
||||
|
||||
{ /* Header */ }
|
||||
{ page.localization.getImage(0) &&
|
||||
<img alt="" className="w-full rounded" src={ page.localization.getImage(0) } /> }
|
||||
@@ -150,37 +148,20 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
} }>
|
||||
<div className="absolute inset-0 rounded-lg opacity-20"
|
||||
style={ { background: 'radial-gradient(ellipse at center, rgba(100,149,237,0.3) 0%, transparent 70%)' } } />
|
||||
<span className="relative flex items-center">
|
||||
<PrefixPreview
|
||||
className="tracking-wide"
|
||||
color={ colorString }
|
||||
effect={ selectedEffect }
|
||||
icon={ selectedIcon }
|
||||
text={ prefixText || '...' }
|
||||
textSize="text-xl" />
|
||||
<span className="ml-2 text-white/80 text-lg font-medium">Username</span>
|
||||
<span className="relative text-xl font-bold tracking-wide" style={ effectStyle }>
|
||||
{ selectedIcon && <span className="mr-1">{ selectedIcon }</span> }
|
||||
<span style={ hasMultiColor ? effectStyle : { ...effectStyle, color: previewColors[0] || '#FFFFFF' } }>
|
||||
{'{'}
|
||||
{ hasMultiColor
|
||||
? [ ...(prefixText || '...') ].map((char, i) => (
|
||||
<span key={ i } style={ { color: previewColors[i] || previewColors[previewColors.length - 1], ...getPrefixEffectStyle(selectedEffect, previewColors[i]) } }>{ char }</span>
|
||||
))
|
||||
: (prefixText || '...')
|
||||
}
|
||||
{'}'}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{ /* Chat Bubble Preview */ }
|
||||
<div className="relative rounded-lg overflow-hidden p-2"
|
||||
style={ { background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.06)' } }>
|
||||
<div className="text-[10px] opacity-40 mb-1 uppercase font-bold tracking-wider">{ LocalizeText('catalog.prefix.chat.preview') }</div>
|
||||
<div className="chat-bubble bubble-0 type-0 max-w-[350px] relative z-1 wrap-break-word min-h-[26px] text-[14px]">
|
||||
<div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
|
||||
{ (prefixText || '...') &&
|
||||
<PrefixPreview
|
||||
className="mr-1"
|
||||
color={ colorString }
|
||||
effect={ selectedEffect }
|
||||
icon={ selectedIcon }
|
||||
text={ prefixText || '...' }
|
||||
textSize="text-[inherit]" /> }
|
||||
<b className="username">Username: </b>
|
||||
<span className="message">Hello everyone!</span>
|
||||
</div>
|
||||
<div className="pointer absolute left-[50%] translate-x-[-50%] w-[9px] h-[6px] bottom-[-5px]" />
|
||||
</div>
|
||||
<span className="relative ml-2 text-white/80 text-lg font-medium">Username</span>
|
||||
</div>
|
||||
|
||||
{ /* Text + Icon Row */ }
|
||||
@@ -237,7 +218,6 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
{ showIconPicker && (
|
||||
<>
|
||||
<div className="fixed inset-0" style={ { zIndex: 999, background: 'rgba(0,0,0,0.5)' } } onClick={ () => setShowIconPicker(false) } />
|
||||
<div ref={ pickerContainerRef } className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
|
||||
<div className="fixed rounded-xl overflow-hidden" style={ { zIndex: 1000, top: '50%', left: '50%', transform: 'translate(-50%, -50%)', boxShadow: '0 8px 32px rgba(0,0,0,0.6)' } }>
|
||||
<Picker
|
||||
data={ data }
|
||||
@@ -295,74 +275,14 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
|
||||
style={ {
|
||||
background: colorMode === 'perLetter' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
|
||||
borderRight: '1px solid rgba(0,0,0,0.1)',
|
||||
opacity: colorMode === 'perLetter' ? 1 : 0.6
|
||||
} }
|
||||
onClick={ () => { setColorMode('perLetter'); if(prefixText.length > 0) setSelectedLetterIndex(0); } }>
|
||||
{ LocalizeText('catalog.prefix.color.per.letter') }
|
||||
</button>
|
||||
<button
|
||||
className="flex-1 px-2 py-1.5 text-xs font-bold transition-all"
|
||||
style={ {
|
||||
background: colorMode === 'gradient' ? 'rgba(59,130,246,0.25)' : 'rgba(0,0,0,0.1)',
|
||||
opacity: colorMode === 'gradient' ? 1 : 0.6
|
||||
} }
|
||||
onClick={ () => { setColorMode('gradient'); setSelectedLetterIndex(null); } }>
|
||||
{ LocalizeText('catalog.prefix.color.gradient') }
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Gradient Controls */ }
|
||||
{ colorMode === 'gradient' && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-1 flex-1">
|
||||
<label
|
||||
className="relative cursor-pointer shrink-0"
|
||||
style={ {
|
||||
width: '24px', height: '24px', borderRadius: '6px',
|
||||
backgroundColor: gradientStart,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ gradientStart }40`
|
||||
} }>
|
||||
<input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
|
||||
type="color" value={ gradientStart }
|
||||
onChange={ e => setGradientStart(e.target.value) } />
|
||||
</label>
|
||||
<input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
|
||||
maxLength={ 7 } placeholder="#FF0000"
|
||||
style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
|
||||
type="text" value={ gradientStart }
|
||||
onChange={ e => { const v = e.target.value; setGradientStart(v); } } />
|
||||
</div>
|
||||
<span className="text-xs opacity-40">→</span>
|
||||
<div className="flex items-center gap-1 flex-1">
|
||||
<label
|
||||
className="relative cursor-pointer shrink-0"
|
||||
style={ {
|
||||
width: '24px', height: '24px', borderRadius: '6px',
|
||||
backgroundColor: gradientEnd,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ gradientEnd }40`
|
||||
} }>
|
||||
<input className="absolute inset-0 opacity-0 cursor-pointer" style={ { width: '100%', height: '100%' } }
|
||||
type="color" value={ gradientEnd }
|
||||
onChange={ e => setGradientEnd(e.target.value) } />
|
||||
</label>
|
||||
<input className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none"
|
||||
maxLength={ 7 } placeholder="#0066FF"
|
||||
style={ { background: 'rgba(0,0,0,0.15)', border: '1px solid rgba(0,0,0,0.1)', color: 'inherit', borderRadius: '5px' } }
|
||||
type="text" value={ gradientEnd }
|
||||
onChange={ e => { const v = e.target.value; setGradientEnd(v); } } />
|
||||
</div>
|
||||
</div>
|
||||
{ /* Gradient preview bar */ }
|
||||
<div className="h-2 rounded-full"
|
||||
style={ { background: `linear-gradient(to right, ${ gradientStart }, ${ gradientEnd })` } } />
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ /* Per-Letter Selector */ }
|
||||
{ colorMode === 'perLetter' && prefixText.length > 0 && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
@@ -427,49 +347,6 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
</div>
|
||||
) }
|
||||
|
||||
{ /* Color Palette (single & perLetter modes) */ }
|
||||
{ colorMode !== 'gradient' && (
|
||||
<div className="flex flex-col gap-1">
|
||||
{ colorMode === 'perLetter' && selectedLetterIndex !== null &&
|
||||
<span className="text-[10px] opacity-50 italic">
|
||||
{ LocalizeText('catalog.prefix.color.selected') } "{ prefixText[selectedLetterIndex] || '' }"
|
||||
</span>
|
||||
}
|
||||
<div className="grid gap-1" style={ { gridTemplateColumns: 'repeat(auto-fill, minmax(34px, 1fr))' } }>
|
||||
{ PRESET_COLORS.map((color, idx) =>
|
||||
{
|
||||
const isActive = currentActiveColor === color;
|
||||
return (
|
||||
<div
|
||||
key={ idx }
|
||||
className={ `aspect-square rounded cursor-pointer transition-all duration-100 border-2 ${ isActive ? 'scale-110 border-white shadow-lg' : 'border-transparent hover:scale-105' }` }
|
||||
style={ {
|
||||
backgroundColor: color,
|
||||
boxShadow: isActive ? `0 0 8px ${ color }, 0 0 0 1px rgba(0,0,0,0.3)` : 'inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.15)',
|
||||
zIndex: isActive ? 5 : 1
|
||||
} }
|
||||
onClick={ () => handleColorSelect(color) } />
|
||||
);
|
||||
}) }
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-0.5">
|
||||
<label
|
||||
className="relative cursor-pointer"
|
||||
style={ {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
borderRadius: '6px',
|
||||
backgroundColor: customColorInput,
|
||||
border: '2px solid rgba(0,0,0,0.2)',
|
||||
boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
|
||||
} }>
|
||||
<input
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
style={ { width: '100%', height: '100%' } }
|
||||
type="color"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleColorSelect(e.target.value) } />
|
||||
</label>
|
||||
{ /* Color Palette */ }
|
||||
<div className="flex flex-col gap-1">
|
||||
{ colorMode === 'perLetter' && selectedLetterIndex !== null &&
|
||||
@@ -506,22 +383,28 @@ export const CatalogLayoutCustomPrefixView: FC<CatalogLayoutProps> = props =>
|
||||
boxShadow: `0 0 6px ${ customColorInput }40, inset 0 1px 0 rgba(255,255,255,0.3)`
|
||||
} }>
|
||||
<input
|
||||
className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
|
||||
maxLength={ 7 }
|
||||
placeholder="#FFFFFF"
|
||||
style={ {
|
||||
background: 'rgba(0,0,0,0.15)',
|
||||
border: '1px solid rgba(0,0,0,0.1)',
|
||||
color: 'inherit',
|
||||
maxWidth: '80px',
|
||||
borderRadius: '5px'
|
||||
} }
|
||||
type="text"
|
||||
className="absolute inset-0 opacity-0 cursor-pointer"
|
||||
style={ { width: '100%', height: '100%' } }
|
||||
type="color"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleCustomColorChange(e.target.value) } />
|
||||
</div>
|
||||
onChange={ e => handleColorSelect(e.target.value) } />
|
||||
</label>
|
||||
<input
|
||||
className="flex-1 px-2 py-0.5 text-xs font-mono focus:outline-none transition-all"
|
||||
maxLength={ 7 }
|
||||
placeholder="#FFFFFF"
|
||||
style={ {
|
||||
background: 'rgba(0,0,0,0.15)',
|
||||
border: '1px solid rgba(0,0,0,0.1)',
|
||||
color: 'inherit',
|
||||
maxWidth: '80px',
|
||||
borderRadius: '5px'
|
||||
} }
|
||||
type="text"
|
||||
value={ customColorInput }
|
||||
onChange={ e => handleCustomColorChange(e.target.value) } />
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
|
||||
{ /* Purchase Footer */ }
|
||||
<div className="flex items-center justify-between mt-auto pt-2"
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
import { AddLinkEventTracker, GetSessionDataManager, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { AddLinkEventTracker, ILinkEventTracker, RemoveLinkEventTracker } from '@nitrots/nitro-renderer';
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
|
||||
import { useFurniEditor } from '../../hooks/furni-editor';
|
||||
import { FurniEditorCreateView } from './views/FurniEditorCreateView';
|
||||
import { FurniEditorEditView } from './views/FurniEditorEditView';
|
||||
import { FurniEditorSearchView } from './views/FurniEditorSearchView';
|
||||
|
||||
const TAB_SEARCH = 0;
|
||||
const TAB_EDIT = 1;
|
||||
const TAB_CREATE = 2;
|
||||
|
||||
export const FurniEditorView: FC<{}> = () =>
|
||||
{
|
||||
@@ -18,8 +16,8 @@ export const FurniEditorView: FC<{}> = () =>
|
||||
const {
|
||||
items, total, page, loading, error, clearError,
|
||||
selectedItem, catalogItems, furniDataEntry,
|
||||
interactions, lastResult,
|
||||
searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, createItem, loadInteractions
|
||||
interactions,
|
||||
searchItems, loadDetail, loadBySpriteId, updateItem, deleteItem, loadInteractions
|
||||
} = useFurniEditor();
|
||||
|
||||
useEffect(() =>
|
||||
@@ -59,14 +57,13 @@ export const FurniEditorView: FC<{}> = () =>
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const handler = (e: CustomEvent<{ spriteId: number }>) =>
|
||||
const handler = async (e: CustomEvent<{ spriteId: number }>) =>
|
||||
{
|
||||
const { spriteId } = e.detail;
|
||||
|
||||
if(!spriteId || spriteId <= 0) return;
|
||||
const ok = await loadBySpriteId(spriteId);
|
||||
|
||||
loadBySpriteId(spriteId);
|
||||
setActiveTab(TAB_EDIT);
|
||||
if(ok) setActiveTab(TAB_EDIT);
|
||||
};
|
||||
|
||||
window.addEventListener('furni-editor:open', handler as EventListener);
|
||||
@@ -74,10 +71,11 @@ export const FurniEditorView: FC<{}> = () =>
|
||||
return () => window.removeEventListener('furni-editor:open', handler as EventListener);
|
||||
}, [ loadBySpriteId ]);
|
||||
|
||||
const handleSelect = useCallback((id: number) =>
|
||||
const handleSelect = useCallback(async (id: number) =>
|
||||
{
|
||||
loadDetail(id);
|
||||
setActiveTab(TAB_EDIT);
|
||||
const ok = await loadDetail(id);
|
||||
|
||||
if(ok) setActiveTab(TAB_EDIT);
|
||||
}, [ loadDetail ]);
|
||||
|
||||
const handleBack = useCallback(() =>
|
||||
@@ -90,17 +88,10 @@ export const FurniEditorView: FC<{}> = () =>
|
||||
setIsVisible(false);
|
||||
}, []);
|
||||
|
||||
const handleCreated = useCallback((id: number) =>
|
||||
{
|
||||
loadDetail(id);
|
||||
setActiveTab(TAB_EDIT);
|
||||
}, [ loadDetail ]);
|
||||
|
||||
if(!GetSessionDataManager()?.isModerator) return null;
|
||||
if(!isVisible) return null;
|
||||
|
||||
return (
|
||||
<NitroCardView uniqueKey="furni-editor" className="min-w-[550px] w-[680px] min-h-[400px] h-[600px]">
|
||||
<NitroCardView uniqueKey="furni-editor" className="w-[620px] h-[520px]">
|
||||
<NitroCardHeaderView headerText="Furni Editor" onCloseClick={ handleClose } />
|
||||
<NitroCardTabsView>
|
||||
<NitroCardTabsItemView isActive={ activeTab === TAB_SEARCH } onClick={ () => setActiveTab(TAB_SEARCH) }>
|
||||
@@ -136,7 +127,6 @@ export const FurniEditorView: FC<{}> = () =>
|
||||
furniDataEntry={ furniDataEntry }
|
||||
interactions={ interactions }
|
||||
loading={ loading }
|
||||
lastResult={ lastResult }
|
||||
onUpdate={ updateItem }
|
||||
onDelete={ deleteItem }
|
||||
onBack={ handleBack }
|
||||
@@ -144,7 +134,6 @@ export const FurniEditorView: FC<{}> = () =>
|
||||
/>
|
||||
}
|
||||
|
||||
|
||||
</NitroCardContentView>
|
||||
</NitroCardView>
|
||||
);
|
||||
|
||||
@@ -1,23 +1,18 @@
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { FaPlus } from 'react-icons/fa';
|
||||
import { Column } from '../../../common';
|
||||
import { FC, useCallback, useState } from 'react';
|
||||
import { Button, Column, Flex, Text } from '../../../common';
|
||||
|
||||
interface FurniEditorCreateViewProps
|
||||
{
|
||||
interactions: string[];
|
||||
loading: boolean;
|
||||
lastResult: { success: boolean; message: string; id: number } | null;
|
||||
onCreate: (fields: Record<string, unknown>) => void;
|
||||
onCreate: (fields: Record<string, unknown>) => Promise<number | null>;
|
||||
onCreated: (id: number) => void;
|
||||
}
|
||||
|
||||
const inputClass = 'text-[11px] border-2 border-card-grid-item-border rounded px-2 py-1 bg-white focus:outline-none focus:border-primary transition-colors w-full';
|
||||
const labelClass = 'text-[9px] text-[#666] uppercase font-bold mb-0.5 block';
|
||||
|
||||
export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
|
||||
{
|
||||
const { interactions, loading, lastResult, onCreate, onCreated } = props;
|
||||
const [ toast, setToast ] = useState<{ type: 'success' | 'error'; message: string; id?: number } | null>(null);
|
||||
const { interactions, loading, onCreate, onCreated } = props;
|
||||
const [ success, setSuccess ] = useState<number | null>(null);
|
||||
|
||||
const [ form, setForm ] = useState({
|
||||
itemName: '',
|
||||
@@ -41,50 +36,39 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
|
||||
customparams: '',
|
||||
});
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!lastResult) return;
|
||||
|
||||
if(lastResult.success && lastResult.id > 0)
|
||||
{
|
||||
setToast({ type: 'success', message: `Item created with ID #${ lastResult.id }`, id: lastResult.id });
|
||||
setTimeout(() => onCreated(lastResult.id), 1500);
|
||||
}
|
||||
else if(!lastResult.success)
|
||||
{
|
||||
setToast({ type: 'error', message: lastResult.message });
|
||||
}
|
||||
|
||||
const timer = setTimeout(() => setToast(null), 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [ lastResult ]);
|
||||
|
||||
const setField = useCallback((key: string, value: unknown) =>
|
||||
{
|
||||
setForm(prev => ({ ...prev, [key]: value }));
|
||||
setSuccess(null);
|
||||
}, []);
|
||||
|
||||
const handleCreate = useCallback(() =>
|
||||
const handleCreate = useCallback(async () =>
|
||||
{
|
||||
if(!form.itemName || !form.publicName) return;
|
||||
onCreate(form);
|
||||
}, [ form, onCreate ]);
|
||||
|
||||
const id = await onCreate(form);
|
||||
|
||||
if(id)
|
||||
{
|
||||
setSuccess(id);
|
||||
setTimeout(() => onCreated(id), 1000);
|
||||
}
|
||||
}, [ form, onCreate, onCreated ]);
|
||||
|
||||
const inputClass = 'form-control form-control-sm';
|
||||
const labelClass = 'text-[11px] font-bold text-[#333] mb-0';
|
||||
|
||||
return (
|
||||
<Column gap={ 1 } className="h-full overflow-auto">
|
||||
{ /* Toast */ }
|
||||
{ toast &&
|
||||
<div className={ `rounded px-3 py-1.5 text-[11px] font-bold text-white ${ toast.type === 'success' ? 'bg-[#28a745]' : 'bg-[#dc3545]' }` }>
|
||||
{ toast.message }
|
||||
{ success &&
|
||||
<div className="bg-[#d4edda] border border-[#c3e6cb] rounded p-2 text-[#155724] text-xs">
|
||||
Item created with ID #{ success }!
|
||||
</div>
|
||||
}
|
||||
|
||||
{ /* Basic Info */ }
|
||||
<div className="border-2 border-card-grid-item-border rounded overflow-hidden">
|
||||
<div className="px-2.5 py-1.5 bg-[#f0f4f7]">
|
||||
<span className="text-[9px] text-primary uppercase font-bold tracking-wide">Basic Info</span>
|
||||
</div>
|
||||
<div className="p-2.5 bg-white grid grid-cols-2 gap-2">
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Basic Info</Text>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className={ labelClass }>Item Name *</label>
|
||||
<input className={ inputClass } value={ form.itemName } onChange={ e => setField('itemName', e.target.value) } placeholder="my_custom_furni" />
|
||||
@@ -99,7 +83,7 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
|
||||
</div>
|
||||
<div>
|
||||
<label className={ labelClass }>Type</label>
|
||||
<select className={ inputClass } value={ form.type } onChange={ e => setField('type', e.target.value) }>
|
||||
<select className="form-select form-select-sm" value={ form.type } onChange={ e => setField('type', e.target.value) }>
|
||||
<option value="s">Floor (s)</option>
|
||||
<option value="i">Wall (i)</option>
|
||||
</select>
|
||||
@@ -107,12 +91,9 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Dimensions */ }
|
||||
<div className="border-2 border-card-grid-item-border rounded overflow-hidden">
|
||||
<div className="px-2.5 py-1.5 bg-[#f0f4f7]">
|
||||
<span className="text-[9px] text-primary uppercase font-bold tracking-wide">Dimensions</span>
|
||||
</div>
|
||||
<div className="p-2.5 bg-white grid grid-cols-3 gap-2">
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Dimensions</Text>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label className={ labelClass }>Width</label>
|
||||
<input type="number" className={ inputClass } value={ form.width } onChange={ e => setField('width', Number(e.target.value)) } />
|
||||
@@ -128,17 +109,14 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Permissions */ }
|
||||
<div className="border-2 border-card-grid-item-border rounded overflow-hidden">
|
||||
<div className="px-2.5 py-1.5 bg-[#f0f4f7]">
|
||||
<span className="text-[9px] text-primary uppercase font-bold tracking-wide">Permissions</span>
|
||||
</div>
|
||||
<div className="p-2.5 bg-white grid grid-cols-3 gap-x-3 gap-y-1.5">
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Permissions</Text>
|
||||
<div className="grid grid-cols-3 gap-x-3 gap-y-1">
|
||||
{ [ 'allowStack', 'allowWalk', 'allowSit', 'allowLay', 'allowGift', 'allowTrade', 'allowRecycle', 'allowMarketplaceSell', 'allowInventoryStack' ].map(key => (
|
||||
<label key={ key } className="flex items-center gap-1.5 text-[11px] cursor-pointer hover:text-primary transition-colors">
|
||||
<label key={ key } className="flex items-center gap-1 text-[11px] cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="accent-primary"
|
||||
className="form-check-input"
|
||||
checked={ (form as any)[key] }
|
||||
onChange={ e => setField(key, e.target.checked) }
|
||||
/>
|
||||
@@ -148,44 +126,34 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Interaction */ }
|
||||
<div className="border-2 border-card-grid-item-border rounded overflow-hidden">
|
||||
<div className="px-2.5 py-1.5 bg-[#f0f4f7]">
|
||||
<span className="text-[9px] text-primary uppercase font-bold tracking-wide">Interaction</span>
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Interaction</Text>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="col-span-2">
|
||||
<label className={ labelClass }>Type</label>
|
||||
<select className="form-select form-select-sm" value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
|
||||
<option value="">none</option>
|
||||
{ interactions.map(i => (
|
||||
<option key={ i } value={ i }>{ i }</option>
|
||||
)) }
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={ labelClass }>Modes</label>
|
||||
<input type="number" className={ inputClass } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-2.5 bg-white">
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="col-span-2">
|
||||
<label className={ labelClass }>Type</label>
|
||||
<select className={ inputClass } value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
|
||||
<option value="">none</option>
|
||||
{ interactions.map(i => (
|
||||
<option key={ i } value={ i }>{ i }</option>
|
||||
)) }
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={ labelClass }>Modes</label>
|
||||
<input type="number" className={ inputClass } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<label className={ labelClass }>Custom Params</label>
|
||||
<input className={ inputClass } value={ form.customparams } onChange={ e => setField('customparams', e.target.value) } />
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label className={ labelClass }>Custom Params</label>
|
||||
<input className={ inputClass } value={ form.customparams } onChange={ e => setField('customparams', e.target.value) } />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Create Button */ }
|
||||
<div className="pt-1">
|
||||
<button
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded text-[11px] font-bold bg-[#28a745] text-white hover:bg-[#218838] transition-colors cursor-pointer disabled:opacity-50"
|
||||
disabled={ loading || !form.itemName || !form.publicName }
|
||||
onClick={ handleCreate }
|
||||
>
|
||||
<FaPlus className="text-[9px]" /> { loading ? 'Creating...' : 'Create Item' }
|
||||
</button>
|
||||
</div>
|
||||
<Flex className="mt-1">
|
||||
<Button variant="success" disabled={ loading || !form.itemName || !form.publicName } onClick={ handleCreate }>
|
||||
{ loading ? 'Creating...' : 'Create Item' }
|
||||
</Button>
|
||||
</Flex>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { FaSave, FaSync, FaTrash, FaArrowLeft } from 'react-icons/fa';
|
||||
import { Column } from '../../../common';
|
||||
import { LayoutFurniIconImageView } from '../../../common/layout/LayoutFurniIconImageView';
|
||||
import { Button, Column, Flex, Text } from '../../../common';
|
||||
import { CatalogRef, FurniDetail } from '../../../hooks/furni-editor';
|
||||
|
||||
interface FurniEditorEditViewProps
|
||||
@@ -11,24 +9,20 @@ interface FurniEditorEditViewProps
|
||||
furniDataEntry: Record<string, unknown> | null;
|
||||
interactions: string[];
|
||||
loading: boolean;
|
||||
lastResult: { success: boolean; message: string; id: number } | null;
|
||||
onUpdate: (id: number, fields: Record<string, unknown>) => void;
|
||||
onDelete: (id: number) => void;
|
||||
onUpdate: (id: number, fields: Record<string, unknown>) => Promise<boolean>;
|
||||
onDelete: (id: number) => Promise<boolean>;
|
||||
onBack: () => void;
|
||||
onRefresh: (id: number) => void;
|
||||
}
|
||||
|
||||
const ic = 'text-[13px] border border-[#c5cdd6] rounded px-2 py-1 bg-white focus:outline-none focus:border-[#1e7295] focus:shadow-[0_0_0_1px_rgba(30,114,149,0.15)] transition-all w-full';
|
||||
const ro = 'text-[13px] border border-[#d5dbe0] rounded px-2 py-1 bg-[#f0f2f4] text-[#777] w-full cursor-not-allowed';
|
||||
const lb = 'text-[11px] text-[#1e7295] uppercase font-bold tracking-wider leading-none';
|
||||
const sectionTitle = 'text-[12px] text-[#1e7295] uppercase font-bold tracking-wider';
|
||||
|
||||
export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
|
||||
{
|
||||
const { item, catalogItems, furniDataEntry, interactions, loading, lastResult, onUpdate, onDelete, onBack, onRefresh } = props;
|
||||
const { item, catalogItems, furniDataEntry, interactions, loading, onUpdate, onDelete, onBack, onRefresh } = props;
|
||||
|
||||
const [ form, setForm ] = useState({
|
||||
itemName: '',
|
||||
publicName: '',
|
||||
spriteId: 0,
|
||||
type: 's',
|
||||
width: 1,
|
||||
length: 1,
|
||||
@@ -48,14 +42,15 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
|
||||
});
|
||||
|
||||
const [ confirmDelete, setConfirmDelete ] = useState(false);
|
||||
const [ toast, setToast ] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!item) return;
|
||||
|
||||
setForm({
|
||||
itemName: item.itemName || '',
|
||||
publicName: item.publicName || '',
|
||||
spriteId: item.spriteId || 0,
|
||||
type: item.type || 's',
|
||||
width: item.width || 1,
|
||||
length: item.length || 1,
|
||||
@@ -77,119 +72,105 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
|
||||
setConfirmDelete(false);
|
||||
}, [ item ]);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
if(!lastResult) return;
|
||||
|
||||
setToast({ type: lastResult.success ? 'success' : 'error', message: lastResult.message });
|
||||
if(lastResult.success && lastResult.id > 0) onRefresh(lastResult.id);
|
||||
|
||||
const timer = setTimeout(() => setToast(null), 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [ lastResult ]);
|
||||
|
||||
const setField = useCallback((key: string, value: unknown) =>
|
||||
{
|
||||
setForm(prev => ({ ...prev, [key]: value }));
|
||||
}, []);
|
||||
|
||||
const handleSave = useCallback(() =>
|
||||
const handleSave = useCallback(async () =>
|
||||
{
|
||||
onUpdate(item.id, form);
|
||||
}, [ item, form, onUpdate ]);
|
||||
const ok = await onUpdate(item.id, form);
|
||||
|
||||
const handleDelete = useCallback(() =>
|
||||
if(ok) onRefresh(item.id);
|
||||
}, [ item, form, onUpdate, onRefresh ]);
|
||||
|
||||
const handleDelete = useCallback(async () =>
|
||||
{
|
||||
if(!confirmDelete) return setConfirmDelete(true);
|
||||
onDelete(item.id);
|
||||
}, [ confirmDelete, item, onDelete ]);
|
||||
|
||||
const ok = await onDelete(item.id);
|
||||
|
||||
if(ok) onBack();
|
||||
}, [ confirmDelete, item, onDelete, onBack ]);
|
||||
|
||||
const inputClass = 'form-control form-control-sm';
|
||||
const labelClass = 'text-[11px] font-bold text-[#333] mb-0';
|
||||
|
||||
return (
|
||||
<Column gap={ 0 } className="h-full overflow-auto">
|
||||
{ toast &&
|
||||
<div className={ `rounded px-2 py-1 text-[12px] font-bold text-white mb-1.5 shadow-sm ${ toast.type === 'success' ? 'bg-[#28a745]' : 'bg-[#dc3545]' }` }>
|
||||
{ toast.message }
|
||||
</div>
|
||||
}
|
||||
|
||||
{ /* Header */ }
|
||||
<div className="flex items-center gap-3 mb-2 pb-2 border-b-2 border-[#c5cdd6]">
|
||||
<div className="w-[46px] h-[46px] flex items-center justify-center bg-white rounded-md border border-[#c5cdd6] flex-shrink-0 shadow-sm overflow-hidden">
|
||||
<LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } style={ { transform: 'scale(1.2)' } } />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[14px] font-bold text-[#2d3748] truncate leading-tight">{ item.publicName }</div>
|
||||
<div className="flex items-center gap-1.5 text-[11px] mt-0.5">
|
||||
<span className="text-[#1e7295] font-bold cursor-pointer hover:underline" title="Click to copy ID" onClick={ () => { navigator.clipboard.writeText(String(item.id)); setToast({ type: 'success', message: `ID ${item.id} copied!` }); } }>#{item.id}</span>
|
||||
<span className="text-[#d0d5db]">|</span>
|
||||
<span className="text-[#4a5568]">sprite:<b>{ item.spriteId }</b></span>
|
||||
<span className="text-[#d0d5db]">|</span>
|
||||
<span className="truncate max-w-[140px] text-[#4a5568]">{ item.itemName }</span>
|
||||
<span className={ `px-2 py-[2px] rounded text-white text-[11px] font-bold ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#718096]' }` }>
|
||||
{ item.type === 's' ? 'FLOOR' : 'WALL' }
|
||||
</span>
|
||||
{ item.usageCount > 0 && <span className="text-[#e53e3e] font-bold">{ item.usageCount } in use</span> }
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1 flex-shrink-0">
|
||||
<button className="p-1.5 rounded-md bg-[#edf2f7] hover:bg-[#e2e8f0] cursor-pointer transition-colors" onClick={ () => onRefresh(item.id) } title="Refresh">
|
||||
<FaSync className="text-[9px] text-[#718096]" />
|
||||
</button>
|
||||
<button className="flex items-center gap-1 px-2 py-1 rounded-md text-[9px] font-bold bg-[#edf2f7] hover:bg-[#e2e8f0] text-[#4a5568] cursor-pointer transition-colors" onClick={ onBack }>
|
||||
<FaArrowLeft className="text-[7px]" /> Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Column gap={ 1 } className="h-full overflow-auto">
|
||||
<Flex gap={ 1 } alignItems="center" className="mb-1">
|
||||
<Button variant="secondary" onClick={ onBack }>Back</Button>
|
||||
<Flex alignItems="center" gap={ 1 } className="bg-[#e9ecef] px-2 py-0.5 rounded">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 text-[#1e7295]">
|
||||
<path fillRule="evenodd" d="M4.93 1.31a41.401 41.401 0 0 1 10.14 0C16.194 1.45 17 2.414 17 3.517V18.25a.75.75 0 0 1-1.075.676l-2.8-1.344-2.8 1.344a.75.75 0 0 1-.65 0l-2.8-1.344-2.8 1.344A.75.75 0 0 1 3 18.25V3.517c0-1.103.806-2.068 1.93-2.207Z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<Text bold className="text-[12px]">{ item.id }</Text>
|
||||
<span className="text-[#999] mx-0.5">|</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 text-[#1e7295]">
|
||||
<path d="M12.586 2.586a2 2 0 1 1 2.828 2.828l-3 3a2 2 0 0 1-2.828 0 1 1 0 0 0-1.414 1.414 4 4 0 0 0 5.656 0l3-3a4 4 0 0 0-5.656-5.656l-1.5 1.5a1 1 0 1 0 1.414 1.414l1.5-1.5ZM7.414 17.414a2 2 0 1 1-2.828-2.828l3-3a2 2 0 0 1 2.828 0 1 1 0 0 0 1.414-1.414 4 4 0 0 0-5.656 0l-3 3a4 4 0 0 0 5.656 5.656l1.5-1.5a1 1 0 1 0-1.414-1.414l-1.5 1.5Z" />
|
||||
</svg>
|
||||
<Text bold className="text-[12px]">{ item.spriteId }</Text>
|
||||
</Flex>
|
||||
<Text small variant="gray">({ item.usageCount } in use)</Text>
|
||||
</Flex>
|
||||
|
||||
{ /* Basic Info */ }
|
||||
<div className="grid grid-cols-4 gap-x-2 gap-y-1.5 pb-2 border-b-2 border-[#c5cdd6]">
|
||||
<div>
|
||||
<label className={ lb }>Item Name</label>
|
||||
<input className={ ro } value={ item.itemName } readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ lb }>Public Name</label>
|
||||
<input className={ ic } value={ form.publicName } onChange={ e => setField('publicName', e.target.value) } />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ lb }>Sprite ID</label>
|
||||
<input className={ ro } value={ item.spriteId } readOnly />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ lb }>Type</label>
|
||||
<select className={ ic } value={ form.type } onChange={ e => setField('type', e.target.value) }>
|
||||
<option value="s">Floor (s)</option>
|
||||
<option value="i">Wall (i)</option>
|
||||
</select>
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Basic Info</Text>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className={ labelClass }>Item Name</label>
|
||||
<input className={ inputClass } value={ form.itemName } onChange={ e => setField('itemName', e.target.value) } />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ labelClass }>Public Name</label>
|
||||
<input className={ inputClass } value={ form.publicName } onChange={ e => setField('publicName', e.target.value) } />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ labelClass }>Sprite ID</label>
|
||||
<input type="number" className={ inputClass } value={ form.spriteId } onChange={ e => setField('spriteId', Number(e.target.value)) } />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ labelClass }>Type</label>
|
||||
<select className="form-select form-select-sm" value={ form.type } onChange={ e => setField('type', e.target.value) }>
|
||||
<option value="s">Floor (s)</option>
|
||||
<option value="i">Wall (i)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Dimensions */ }
|
||||
<div className="pt-2 pb-2 border-b-2 border-[#c5cdd6]">
|
||||
<div className={ sectionTitle + ' mb-1' }>Dimensions</div>
|
||||
<div className="grid grid-cols-3 gap-x-2">
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Dimensions</Text>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label className={ lb }>Width</label>
|
||||
<input type="number" className={ ic } value={ form.width } onChange={ e => setField('width', Number(e.target.value)) } />
|
||||
<label className={ labelClass }>Width</label>
|
||||
<input type="number" className={ inputClass } value={ form.width } onChange={ e => setField('width', Number(e.target.value)) } />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ lb }>Length</label>
|
||||
<input type="number" className={ ic } value={ form.length } onChange={ e => setField('length', Number(e.target.value)) } />
|
||||
<label className={ labelClass }>Length</label>
|
||||
<input type="number" className={ inputClass } value={ form.length } onChange={ e => setField('length', Number(e.target.value)) } />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ lb }>Stack Height</label>
|
||||
<input type="number" step="0.01" className={ ic } value={ form.stackHeight } onChange={ e => setField('stackHeight', Number(e.target.value)) } />
|
||||
<label className={ labelClass }>Stack Height</label>
|
||||
<input type="number" step="0.01" className={ inputClass } value={ form.stackHeight } onChange={ e => setField('stackHeight', Number(e.target.value)) } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Permissions */ }
|
||||
<div className="pt-2 pb-2 border-b-2 border-[#c5cdd6]">
|
||||
<div className={ sectionTitle + ' mb-1' }>Permissions</div>
|
||||
<div className="grid grid-cols-3 gap-x-2 gap-y-[3px]">
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Permissions</Text>
|
||||
<div className="grid grid-cols-3 gap-x-3 gap-y-1">
|
||||
{ [ 'allowStack', 'allowWalk', 'allowSit', 'allowLay', 'allowGift', 'allowTrade', 'allowRecycle', 'allowMarketplaceSell', 'allowInventoryStack' ].map(key => (
|
||||
<label key={ key } className="flex items-center gap-1 text-[12px] text-[#4a5568] cursor-pointer hover:text-[#1e7295] transition-colors">
|
||||
<input type="checkbox" className="accent-[#1e7295] w-3 h-3" checked={ (form as any)[key] } onChange={ e => setField(key, e.target.checked) } />
|
||||
<label key={ key } className="flex items-center gap-1 text-[11px] cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="form-check-input"
|
||||
checked={ (form as any)[key] }
|
||||
onChange={ e => setField(key, e.target.checked) }
|
||||
/>
|
||||
{ key.replace('allow', '') }
|
||||
</label>
|
||||
)) }
|
||||
@@ -197,44 +178,72 @@ export const FurniEditorEditView: FC<FurniEditorEditViewProps> = props =>
|
||||
</div>
|
||||
|
||||
{ /* Interaction */ }
|
||||
<div className="pt-2">
|
||||
<div className={ sectionTitle + ' mb-1' }>Interaction</div>
|
||||
<div className="grid grid-cols-4 gap-x-2">
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Interaction</Text>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div className="col-span-2">
|
||||
<label className={ lb }>Type</label>
|
||||
<select className={ ic } value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
|
||||
<label className={ labelClass }>Type</label>
|
||||
<select className="form-select form-select-sm" value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
|
||||
<option value="">none</option>
|
||||
{ interactions.map(i => <option key={ i } value={ i }>{ i }</option>) }
|
||||
{ interactions.map(i => (
|
||||
<option key={ i } value={ i }>{ i }</option>
|
||||
)) }
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className={ lb }>Modes</label>
|
||||
<input type="number" className={ ic } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
|
||||
</div>
|
||||
<div>
|
||||
<label className={ lb }>Custom Params</label>
|
||||
<input className={ ic } value={ form.customparams } onChange={ e => setField('customparams', e.target.value) } />
|
||||
<label className={ labelClass }>Modes</label>
|
||||
<input type="number" className={ inputClass } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<label className={ labelClass }>Custom Params</label>
|
||||
<input className={ inputClass } value={ form.customparams } onChange={ e => setField('customparams', e.target.value) } />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ /* Catalog References */ }
|
||||
{ catalogItems.length > 0 &&
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">Catalog ({ catalogItems.length })</Text>
|
||||
<div className="text-[10px] space-y-0.5">
|
||||
{ catalogItems.map(ci => (
|
||||
<div key={ ci.id } className="flex justify-between bg-[#f5f5f5] px-2 py-0.5 rounded">
|
||||
<span>{ ci.catalogName } (page: { ci.pageName })</span>
|
||||
<span>{ ci.costCredits }c + { ci.costPoints }p</span>
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{ /* FurniData.json Entry */ }
|
||||
{ furniDataEntry &&
|
||||
<div className="bg-white rounded border border-[#ccc] p-2">
|
||||
<Text small bold variant="primary" className="mb-1 block">FurniData.json</Text>
|
||||
<div className="grid grid-cols-2 gap-x-3 gap-y-0.5 text-[10px]">
|
||||
{ Object.entries(furniDataEntry).map(([ key, value ]) => (
|
||||
<div key={ key } className="flex justify-between bg-[#f5f5f5] px-2 py-0.5 rounded">
|
||||
<span className="font-bold text-[#555]">{ key }</span>
|
||||
<span className="text-[#333] truncate ml-1 max-w-[120px] text-right">{ String(value ?? '') }</span>
|
||||
</div>
|
||||
)) }
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{ /* Actions */ }
|
||||
<div className="flex justify-between items-center mt-auto pt-2 border-t border-[#e2e8f0]">
|
||||
<button
|
||||
className="flex items-center gap-1 px-3 py-1.5 rounded-md text-[12px] font-bold bg-[#28a745] text-white hover:bg-[#218838] shadow-sm transition-all cursor-pointer disabled:opacity-50"
|
||||
disabled={ loading }
|
||||
onClick={ handleSave }
|
||||
>
|
||||
<FaSave className="text-[8px]" /> { loading ? 'Saving...' : 'Save' }
|
||||
</button>
|
||||
<button
|
||||
className={ `flex items-center gap-1 px-3 py-1.5 rounded-md text-[12px] font-bold text-white shadow-sm transition-all cursor-pointer disabled:opacity-50 ${ confirmDelete ? 'bg-[#dc3545] hover:bg-[#c82333]' : 'bg-[#e8993e] hover:bg-[#d98a30]' }` }
|
||||
<Flex gap={ 1 } justifyContent="between" className="mt-1">
|
||||
<Button variant="success" disabled={ loading } onClick={ handleSave }>
|
||||
{ loading ? 'Saving...' : 'Save' }
|
||||
</Button>
|
||||
<Button
|
||||
variant={ confirmDelete ? 'danger' : 'warning' }
|
||||
disabled={ loading || item.usageCount > 0 }
|
||||
onClick={ handleDelete }
|
||||
>
|
||||
<FaTrash className="text-[8px]" /> { confirmDelete ? 'Confirm' : 'Delete' }
|
||||
</button>
|
||||
</div>
|
||||
{ confirmDelete ? 'Confirm Delete' : 'Delete' }
|
||||
</Button>
|
||||
</Flex>
|
||||
</Column>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { FC, useCallback, useEffect, useState } from 'react';
|
||||
import { FaSearch } from 'react-icons/fa';
|
||||
import { Column, Text } from '../../../common';
|
||||
import { LayoutFurniIconImageView } from '../../../common/layout/LayoutFurniIconImageView';
|
||||
import { Button, Column, Flex, Text } from '../../../common';
|
||||
import { FurniItem } from '../../../hooks/furni-editor';
|
||||
|
||||
interface FurniEditorSearchViewProps
|
||||
@@ -14,8 +12,6 @@ interface FurniEditorSearchViewProps
|
||||
onSelect: (id: number) => void;
|
||||
}
|
||||
|
||||
const inputClass = 'text-[14px] border border-[#c5cdd6] rounded px-2 py-1.5 bg-white focus:outline-none focus:border-[#1e7295] transition-colors w-full';
|
||||
|
||||
export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
|
||||
{
|
||||
const { items, total, page, loading, onSearch, onSelect } = props;
|
||||
@@ -41,122 +37,97 @@ export const FurniEditorSearchView: FC<FurniEditorSearchViewProps> = props =>
|
||||
|
||||
return (
|
||||
<Column gap={ 1 } className="h-full">
|
||||
{ /* Search Bar */ }
|
||||
<div className="flex gap-2 items-end">
|
||||
<div className="flex-1">
|
||||
<label className="text-[12px] text-[#1e7295] uppercase font-bold mb-0.5 block">Search</label>
|
||||
<Flex gap={ 1 } alignItems="end">
|
||||
<Column gap={ 0 } className="flex-1">
|
||||
<Text small bold>Search</Text>
|
||||
<input
|
||||
type="text"
|
||||
className={ inputClass }
|
||||
className="form-control form-control-sm"
|
||||
placeholder="ID, name or sprite ID..."
|
||||
value={ query }
|
||||
onChange={ e => setQuery(e.target.value) }
|
||||
onKeyDown={ handleKeyDown }
|
||||
/>
|
||||
</div>
|
||||
<div className="w-[100px]">
|
||||
<label className="text-[12px] text-[#1e7295] uppercase font-bold mb-0.5 block">Type</label>
|
||||
<select className={ inputClass } value={ typeFilter } onChange={ e => setTypeFilter(e.target.value) }>
|
||||
</Column>
|
||||
<Column gap={ 0 } className="w-[80px]">
|
||||
<Text small bold>Type</Text>
|
||||
<select
|
||||
className="form-select form-select-sm"
|
||||
value={ typeFilter }
|
||||
onChange={ e => setTypeFilter(e.target.value) }
|
||||
>
|
||||
<option value="">All</option>
|
||||
<option value="s">Floor</option>
|
||||
<option value="i">Wall</option>
|
||||
<option value="s">Floor (s)</option>
|
||||
<option value="i">Wall (i)</option>
|
||||
</select>
|
||||
</div>
|
||||
<button
|
||||
className="flex items-center gap-1.5 px-4 py-1.5 rounded text-[13px] font-bold bg-[#1e7295] text-white hover:bg-[#185d79] transition-colors cursor-pointer disabled:opacity-50"
|
||||
disabled={ loading }
|
||||
onClick={ handleSearch }
|
||||
>
|
||||
<FaSearch className="text-[11px]" /> { loading ? '...' : 'Search' }
|
||||
</button>
|
||||
</div>
|
||||
</Column>
|
||||
<Button variant="primary" disabled={ loading } onClick={ handleSearch }>
|
||||
{ loading ? '...' : 'Search' }
|
||||
</Button>
|
||||
</Flex>
|
||||
|
||||
{ /* Results counter */ }
|
||||
{ total > 0 &&
|
||||
<div className="text-[13px] text-[#4a5568]">
|
||||
<b className="text-[#1e7295]">{ total }</b> items found { totalPages > 1 && <span>- Page <b>{ page }</b>/{ totalPages }</span> }
|
||||
</div>
|
||||
}
|
||||
|
||||
{ /* Results Table */ }
|
||||
<div className="flex-1 overflow-auto border border-[#c5cdd6] rounded bg-white">
|
||||
{ loading &&
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<div className="text-[14px] text-[#4a5568] animate-pulse">Loading...</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{ !loading && items.length === 0 &&
|
||||
<div className="flex items-center justify-center py-8 text-[14px] text-[#4a5568]">
|
||||
No items found
|
||||
</div>
|
||||
}
|
||||
|
||||
{ !loading && items.length > 0 &&
|
||||
<table className="w-full text-[14px]">
|
||||
<thead>
|
||||
<tr className="bg-[#f0f4f7] sticky top-0 text-[12px] text-[#1e7295] uppercase font-bold">
|
||||
<th className="px-2 py-2 text-center w-[44px]"></th>
|
||||
<th className="px-2 py-2 text-left w-[55px]">ID</th>
|
||||
<th className="px-2 py-2 text-left w-[60px]">Sprite</th>
|
||||
<th className="px-2 py-2 text-left">Name</th>
|
||||
<th className="px-2 py-2 text-left">Public Name</th>
|
||||
<th className="px-2 py-2 text-center w-[60px]">Type</th>
|
||||
<th className="px-2 py-2 text-left">Interaction</th>
|
||||
<Column gap={ 0 } className="flex-1 overflow-auto border border-[#ccc] rounded bg-white">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="bg-[#e8e8e8] sticky top-0">
|
||||
<th className="px-2 py-1 text-left">ID</th>
|
||||
<th className="px-2 py-1 text-left">Sprite</th>
|
||||
<th className="px-2 py-1 text-left">Name</th>
|
||||
<th className="px-2 py-1 text-left">Public Name</th>
|
||||
<th className="px-2 py-1 text-center">Type</th>
|
||||
<th className="px-2 py-1 text-left">Interaction</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ items.map(item => (
|
||||
<tr
|
||||
key={ item.id }
|
||||
className="cursor-pointer hover:bg-[#d4edfa] border-b border-[#eee] transition-colors"
|
||||
onClick={ () => onSelect(item.id) }
|
||||
>
|
||||
<td className="px-2 py-1 font-mono">{ item.id }</td>
|
||||
<td className="px-2 py-1 font-mono">{ item.spriteId }</td>
|
||||
<td className="px-2 py-1 truncate max-w-[120px]">{ item.itemName }</td>
|
||||
<td className="px-2 py-1 truncate max-w-[120px]">{ item.publicName }</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<span className={ `px-1 rounded text-white text-[10px] ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#6b7280]' }` }>
|
||||
{ item.type === 's' ? 'Floor' : 'Wall' }
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1 text-[10px]">{ item.interactionType || '-' }</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{ items.map(item => (
|
||||
<tr
|
||||
key={ item.id }
|
||||
className="cursor-pointer hover:bg-[#e8f4fb] border-b border-[#f0f0f0] transition-colors"
|
||||
onClick={ () => onSelect(item.id) }
|
||||
>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<div className="w-[34px] h-[34px] flex items-center justify-center mx-auto">
|
||||
<LayoutFurniIconImageView productType={ item.type } productClassId={ item.spriteId } />
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-2 py-1 font-mono text-[14px] text-[#1e7295] font-bold">{ item.id }</td>
|
||||
<td className="px-2 py-1 font-mono text-[14px] text-[#4a5568]">{ item.spriteId }</td>
|
||||
<td className="px-2 py-1 text-[14px] text-[#2d3748] truncate max-w-[130px]">{ item.itemName }</td>
|
||||
<td className="px-2 py-1 text-[14px] text-[#2d3748] truncate max-w-[130px]">{ item.publicName }</td>
|
||||
<td className="px-2 py-1 text-center">
|
||||
<span className={ `px-2 py-0.5 rounded text-white text-[11px] font-bold ${ item.type === 's' ? 'bg-[#1e7295]' : 'bg-[#718096]' }` }>
|
||||
{ item.type === 's' ? 'Floor' : 'Wall' }
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1 text-[14px] text-[#4a5568]">{ item.interactionType || '-' }</td>
|
||||
</tr>
|
||||
)) }
|
||||
</tbody>
|
||||
</table>
|
||||
}
|
||||
</div>
|
||||
)) }
|
||||
{ items.length === 0 && !loading &&
|
||||
<tr>
|
||||
<td colSpan={ 6 } className="px-2 py-4 text-center text-[#999]">No items found</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</Column>
|
||||
|
||||
{ /* Pagination */ }
|
||||
{ totalPages > 1 &&
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-[13px] text-[#4a5568]">
|
||||
Page <b>{ page }</b> of <b>{ totalPages }</b>
|
||||
</div>
|
||||
<div className="flex gap-1.5">
|
||||
<button
|
||||
className="px-3 py-1.5 rounded text-[13px] font-bold bg-[#edf2f7] hover:bg-[#e2e8f0] text-[#4a5568] transition-colors cursor-pointer disabled:opacity-40"
|
||||
<Flex gap={ 1 } justifyContent="between" alignItems="center">
|
||||
<Text small variant="gray">
|
||||
{ total } items - Page { page }/{ totalPages }
|
||||
</Text>
|
||||
<Flex gap={ 1 }>
|
||||
<Button
|
||||
variant="secondary"
|
||||
disabled={ page <= 1 }
|
||||
onClick={ () => onSearch(query, typeFilter, page - 1) }
|
||||
>
|
||||
Prev
|
||||
</button>
|
||||
<button
|
||||
className="px-3 py-1.5 rounded text-[13px] font-bold bg-[#edf2f7] hover:bg-[#e2e8f0] text-[#4a5568] transition-colors cursor-pointer disabled:opacity-40"
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
disabled={ page >= totalPages }
|
||||
onClick={ () => onSearch(query, typeFilter, page + 1) }
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
}
|
||||
</Column>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,32 @@
|
||||
import { FC, useEffect, useState } from 'react';
|
||||
import { FaTrashAlt } from 'react-icons/fa';
|
||||
import { IPrefixItem, LocalizeText } from '../../../../api';
|
||||
import { IPrefixItem, LocalizeText, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../api';
|
||||
import { useInventoryPrefixes, useNotification } from '../../../../hooks';
|
||||
import { NitroButton, PrefixPreview } from '../../../../layout';
|
||||
import { NitroButton } from '../../../../layout';
|
||||
|
||||
const PrefixPreview: FC<{ text: string; color: string; icon: string; effect?: string; className?: string; textSize?: string }> = ({ text, color, icon, effect = '', className = '', textSize = 'text-sm' }) =>
|
||||
{
|
||||
const colors = parsePrefixColors(text, color);
|
||||
const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
|
||||
const fxStyle = getPrefixEffectStyle(effect, colors[0] || '#FFFFFF');
|
||||
|
||||
return (
|
||||
<span className={ `font-bold ${ textSize } ${ className }` } style={ fxStyle }>
|
||||
{ effect === 'pulse' && <style>{ PREFIX_EFFECT_KEYFRAMES }</style> }
|
||||
{ icon && <span className="mr-0.5">{ icon }</span> }
|
||||
<span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
|
||||
{'{'}
|
||||
{ hasMultiColor
|
||||
? [ ...text ].map((char, i) => (
|
||||
<span key={ i } style={ { color: colors[i] || colors[colors.length - 1], ...getPrefixEffectStyle(effect, colors[i]) } }>{ char }</span>
|
||||
))
|
||||
: text
|
||||
}
|
||||
{'}'}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const PrefixItemView: FC<{
|
||||
prefix: IPrefixItem;
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { GetRoomEngine, RoomChatSettings, RoomObjectCategory } from '@nitrots/nitro-renderer';
|
||||
import { FC, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { ChatBubbleMessage } from '../../../../api';
|
||||
import { ChatBubbleMessage, parsePrefixColors, getPrefixEffectStyle, PREFIX_EFFECT_KEYFRAMES } from '../../../../api';
|
||||
import { useOnClickChat } from '../../../../hooks';
|
||||
import { PrefixPreview } from '../../../../layout';
|
||||
|
||||
interface ChatWidgetMessageViewProps
|
||||
{
|
||||
@@ -91,8 +90,27 @@ export const ChatWidgetMessageView: FC<ChatWidgetMessageViewProps> = ({
|
||||
) }
|
||||
</div>
|
||||
<div className="chat-content py-[5px] px-[6px] ml-[27px] leading-none min-h-[25px]">
|
||||
{ chat.prefixText &&
|
||||
<PrefixPreview className="mr-1" color={ chat.prefixColor } effect={ chat.prefixEffect } icon={ chat.prefixIcon } text={ chat.prefixText } textSize="text-[inherit]" /> }
|
||||
{ chat.prefixEffect === 'pulse' && <style>{ PREFIX_EFFECT_KEYFRAMES }</style> }
|
||||
{ chat.prefixText && (() => {
|
||||
const colors = parsePrefixColors(chat.prefixText, chat.prefixColor);
|
||||
const hasMultiColor = colors.length > 1 && new Set(colors).size > 1;
|
||||
const fxStyle = getPrefixEffectStyle(chat.prefixEffect, colors[0] || '#FFFFFF');
|
||||
return (
|
||||
<span className="prefix font-bold mr-1" style={ fxStyle }>
|
||||
{ chat.prefixIcon && <span className="mr-0.5 text-[13px]">{ chat.prefixIcon }</span> }
|
||||
<span style={ hasMultiColor ? fxStyle : { ...fxStyle, color: colors[0] || '#FFFFFF' } }>
|
||||
{'{'}
|
||||
{ hasMultiColor
|
||||
? [ ...chat.prefixText ].map((char, i) => (
|
||||
<span key={ i } style={ { color: colors[i] || colors[colors.length - 1], ...getPrefixEffectStyle(chat.prefixEffect, colors[i]) } }>{ char }</span>
|
||||
))
|
||||
: chat.prefixText
|
||||
}
|
||||
{'}'}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})() }
|
||||
<b className="username" dangerouslySetInnerHTML={ { __html: `${ chat.username }: ` } } />
|
||||
<span className={ `message${ chat.type === 1 ? ' italic text-[#595959]' : '' }` } dangerouslySetInnerHTML={ { __html: `${ chat.formattedText }` } } onClick={ onClickChat } />
|
||||
</div>
|
||||
|
||||
@@ -16,11 +16,10 @@ export const WiredTriggerAvatarSaysSomethingView: FC<{}> = () =>
|
||||
const [ hideMessage, setHideMessage ] = useState(false);
|
||||
const [ ownerOnly, setOwnerOnly ] = useState(false);
|
||||
const { trigger = null, setStringParam = null, setIntParams = null } = useWired();
|
||||
const isAnyTextMode = (matchMode === MATCH_ALL);
|
||||
|
||||
const save = () =>
|
||||
{
|
||||
setStringParam(isAnyTextMode ? '' : message);
|
||||
setStringParam(message);
|
||||
setIntParams([
|
||||
matchMode,
|
||||
hideMessage ? 1 : 0,
|
||||
@@ -40,11 +39,7 @@ export const WiredTriggerAvatarSaysSomethingView: FC<{}> = () =>
|
||||
<WiredTriggerBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save }>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Text bold>{ LocalizeText('wiredfurni.params.whatissaid') }</Text>
|
||||
<NitroInput
|
||||
disabled={ isAnyTextMode }
|
||||
type="text"
|
||||
value={ isAnyTextMode ? '' : message }
|
||||
onChange={ event => setMessage(event.target.value) } />
|
||||
<NitroInput type="text" value={ message } onChange={ event => setMessage(event.target.value) } />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="flex items-center gap-1">
|
||||
|
||||
Reference in New Issue
Block a user