duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

🆙 Reverting furnieditor

Browse Source
This commit is contained in:
duckietm
2026-03-23 12:00:31 +01:00
parent a0d0b5c4a4
commit accb69d6c9
17 changed files with 742 additions and 3668 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/wired/WiredActionLayoutCode.ts
+4
View File
@@ -56,4 +56,8 @@ export class WiredActionLayoutCode
public static USERS_HANDITEM_SELECTOR: number = 55;
public static FILTER_FURNI_EXTRA: number = 56;
public static FILTER_USER_EXTRA: number = 57;
public static MOVE_CARRY_USERS_EXTRA: number = 58;
public static MOVE_NO_ANIMATION_EXTRA: number = 59;
public static ANIMATION_TIME_EXTRA: number = 60;
public static MOVE_PHYSICS_EXTRA: number = 61;
}
src/components/furni-editor/FurniEditorView.tsx
+11 -22
View File
@@ -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>
);
src/components/furni-editor/views/FurniEditorCreateView.tsx
+43 -75
View File
@@ -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,16 +126,12 @@ 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>
<div className="p-2.5 bg-white">
<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={ inputClass } value={ form.interactionType } onChange={ e => setField('interactionType', e.target.value) }>
<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>
@@ -169,23 +143,17 @@ export const FurniEditorCreateView: FC<FurniEditorCreateViewProps> = props =>
<input type="number" className={ inputClass } value={ form.interactionModesCount } onChange={ e => setField('interactionModesCount', Number(e.target.value)) } />
</div>
</div>
<div className="mt-2">
<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>
</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>
);
};
src/components/furni-editor/views/FurniEditorEditView.tsx
+121 -112
View File
@@ -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 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={ lb }>Item Name</label>
<input className={ ro } value={ item.itemName } readOnly />
<label className={ labelClass }>Item Name</label>
<input className={ inputClass } value={ form.itemName } onChange={ e => setField('itemName', e.target.value) } />
</div>
<div>
<label className={ lb }>Public Name</label>
<input className={ ic } value={ form.publicName } onChange={ e => setField('publicName', e.target.value) } />
<label className={ labelClass }>Public Name</label>
<input className={ inputClass } 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 />
<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={ lb }>Type</label>
<select className={ ic } value={ form.type } onChange={ e => setField('type', e.target.value) }>
<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)) } />
<label className={ labelClass }>Modes</label>
<input type="number" className={ inputClass } 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) } />
</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>
);
};
src/components/furni-editor/views/FurniEditorSearchView.tsx
+56 -85
View File
@@ -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) }>
<option value="">All</option>
<option value="s">Floor</option>
<option value="i">Wall</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 }
</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) }
>
<FaSearch className="text-[11px]" /> { loading ? '...' : 'Search' }
</button>
</div>
<option value="">All</option>
<option value="s">Floor (s)</option>
<option value="i">Wall (i)</option>
</select>
</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]">
<Column gap={ 0 } className="flex-1 overflow-auto border border-[#ccc] rounded bg-white">
<table className="w-full text-xs">
<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>
<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-[#e8f4fb] border-b border-[#f0f0f0] transition-colors"
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">
<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]' }` }>
<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-[14px] text-[#4a5568]">{ item.interactionType || '-' }</td>
<td className="px-2 py-1 text-[10px]">{ item.interactionType || '-' }</td>
</tr>
)) }
{ items.length === 0 && !loading &&
<tr>
<td colSpan={ 6 } className="px-2 py-4 text-center text-[#999]">No items found</td>
</tr>
}
</tbody>
</table>
}
</div>
</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>
);
src/components/wired/views/actions/WiredActionFurniToFurniView.tsx
+16 -5
View File
@@ -81,9 +81,14 @@ export const WiredActionFurniToFurniView: FC<{}> = () =>
if(mode === 'move' && !canEditMove) return;
if(mode === 'target' && !canEditTarget) return;
const nextMoveIds = (selectionMode === 'move') ? [ ...furniIds ] : [ ...moveFurniIds ];
const nextTargetIds = (selectionMode === 'target') ? [ ...furniIds ] : [ ...targetFurniIds ];
setMoveFurniIds(nextMoveIds);
setTargetFurniIds(nextTargetIds);
setSelectionMode(mode);
setFurniIds([ ...(mode === 'move' ? moveFurniIds : targetFurniIds) ]);
}, [ moveSource, targetSource, moveFurniIds, targetFurniIds, setFurniIds ]);
setFurniIds([ ...(mode === 'move' ? nextMoveIds : nextTargetIds) ]);
}, [ selectionMode, furniIds, moveSource, targetSource, moveFurniIds, targetFurniIds, setFurniIds ]);
useEffect(() =>
{
@@ -153,10 +158,16 @@ export const WiredActionFurniToFurniView: FC<{}> = () =>
const save = useCallback(() =>
{
const nextMoveIds = (selectionMode === 'move') ? [ ...furniIds ] : [ ...moveFurniIds ];
const nextTargetIds = (selectionMode === 'target') ? [ ...furniIds ] : [ ...targetFurniIds ];
setMoveFurniIds(nextMoveIds);
setTargetFurniIds(nextTargetIds);
if(selectionMode === 'target')
{
setSelectionMode('move');
setFurniIds([ ...moveFurniIds ]);
setFurniIds([ ...nextMoveIds ]);
}
setIntParams([
@@ -164,8 +175,8 @@ export const WiredActionFurniToFurniView: FC<{}> = () =>
targetSource
]);
setStringParam(serializeIds(targetFurniIds));
}, [ selectionMode, moveFurniIds, moveSource, targetSource, targetFurniIds, setFurniIds, setIntParams, setStringParam ]);
setStringParam(serializeIds(nextTargetIds));
}, [ selectionMode, furniIds, moveFurniIds, moveSource, targetSource, targetFurniIds, setFurniIds, setIntParams, setStringParam ]);
const selectionLimit = trigger?.maximumItemSelectionCount ?? 0;
src/components/wired/views/actions/WiredActionLayoutView.tsx
+12
View File
@@ -52,6 +52,10 @@ import { WiredActionToggleFurniStateView } from './WiredActionToggleFurniStateVi
import { WiredActionUnfreezeView } from './WiredActionUnfreezeView';
import { WiredExtraFilterFurniView } from '../extras/WiredExtraFilterFurniView';
import { WiredExtraFilterUserView } from '../extras/WiredExtraFilterUserView';
import { WiredExtraAnimationTimeView } from '../extras/WiredExtraAnimationTimeView';
import { WiredExtraMoveCarryUsersView } from '../extras/WiredExtraMoveCarryUsersView';
import { WiredExtraMoveNoAnimationView } from '../extras/WiredExtraMoveNoAnimationView';
import { WiredExtraMovePhysicsView } from '../extras/WiredExtraMovePhysicsView';
export const WiredActionLayoutView = (code: number) =>
{
@@ -165,6 +169,14 @@ export const WiredActionLayoutView = (code: number) =>
return <WiredExtraFilterFurniView />;
case WiredActionLayoutCode.FILTER_USER_EXTRA:
return <WiredExtraFilterUserView />;
case WiredActionLayoutCode.MOVE_CARRY_USERS_EXTRA:
return <WiredExtraMoveCarryUsersView />;
case WiredActionLayoutCode.MOVE_NO_ANIMATION_EXTRA:
return <WiredExtraMoveNoAnimationView />;
case WiredActionLayoutCode.ANIMATION_TIME_EXTRA:
return <WiredExtraAnimationTimeView />;
case WiredActionLayoutCode.MOVE_PHYSICS_EXTRA:
return <WiredExtraMovePhysicsView />;
case WiredActionLayoutCode.SEND_SIGNAL:
return <WiredActionSendSignalView />;
}
src/components/wired/views/actions/WiredActionSendSignalView.tsx
+30 -7
View File
@@ -115,17 +115,28 @@ export const WiredActionSendSignalView: FC<{}> = () =>
if(mode === selectionMode) return;
if(mode === 'furni' && furniSource !== SOURCE_SELECTED) return;
const nextAntennaIds = (selectionMode === 'antenna') ? [ ...furniIds ] : [ ...antennaIds ];
const nextForwardFurniIds = (selectionMode === 'furni') ? [ ...furniIds ] : [ ...forwardFurniIds ];
setAntennaIds(nextAntennaIds);
setForwardFurniIds(nextForwardFurniIds);
setSelectionMode(mode);
if(setFurniIds) setFurniIds([ ...((mode === 'antenna') ? antennaIds : forwardFurniIds) ]);
}, [ selectionMode, furniSource, antennaIds, forwardFurniIds, setFurniIds ]);
if(setFurniIds) setFurniIds([ ...((mode === 'antenna') ? nextAntennaIds : nextForwardFurniIds) ]);
}, [ selectionMode, furniSource, furniIds, antennaIds, forwardFurniIds, setFurniIds ]);
const onChangeFurniSource = (next: number) =>
{
if(forwardFurniIds.length) setForwardFurniIds([]);
const nextAntennaIds = (selectionMode === 'antenna') ? [ ...furniIds ] : [ ...antennaIds ];
setAntennaIds(nextAntennaIds);
if(forwardFurniIds.length || selectionMode === 'furni')
{
setForwardFurniIds([]);
}
if(selectionMode === 'furni')
{
if(setFurniIds) setFurniIds([ ...antennaIds ]);
if(setFurniIds) setFurniIds([ ...nextAntennaIds ]);
setSelectionMode('antenna');
}
@@ -134,7 +145,19 @@ export const WiredActionSendSignalView: FC<{}> = () =>
const save = useCallback(() =>
{
const antennaSource = (antennaIds && antennaIds.length) ? antennaIds[0] : 0;
const nextAntennaIds = (selectionMode === 'antenna') ? [ ...furniIds ] : [ ...antennaIds ];
const nextForwardFurniIds = (selectionMode === 'furni') ? [ ...furniIds ] : [ ...forwardFurniIds ];
setAntennaIds(nextAntennaIds);
setForwardFurniIds(nextForwardFurniIds);
if(selectionMode === 'furni')
{
setSelectionMode('antenna');
if(setFurniIds) setFurniIds([ ...nextAntennaIds ]);
}
const antennaSource = (nextAntennaIds && nextAntennaIds.length) ? nextAntennaIds[0] : 0;
setIntParams([
antennaSource,
@@ -145,8 +168,8 @@ export const WiredActionSendSignalView: FC<{}> = () =>
0,
]);
setStringParam(serializeForwardIds(forwardFurniIds));
}, [ antennaIds, furniSource, userSource, signalPerFurni, signalPerUser, forwardFurniIds, setIntParams, setStringParam ]);
setStringParam(serializeForwardIds(nextForwardFurniIds));
}, [ selectionMode, furniIds, antennaIds, furniSource, userSource, signalPerFurni, signalPerUser, forwardFurniIds, setFurniIds, setIntParams, setStringParam ]);
useEffect(() =>
{
src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx
+16 -5
View File
@@ -85,9 +85,14 @@ export const WiredConditionFurniIsOfTypeView: FC<WiredConditionFurniIsOfTypeView
if(mode === 'primary' && !canEditPrimary) return;
if(mode === 'secondary' && !canEditSecondary) return;
const nextPrimaryIds = (selectionMode === 'primary') ? [ ...furniIds ] : [ ...primaryFurniIds ];
const nextSecondaryIds = (selectionMode === 'secondary') ? [ ...furniIds ] : [ ...secondaryFurniIds ];
setPrimaryFurniIds(nextPrimaryIds);
setSecondaryFurniIds(nextSecondaryIds);
setSelectionMode(mode);
setFurniIds([ ...(mode === 'primary' ? primaryFurniIds : secondaryFurniIds) ]);
}, [ matchSource, compareSource, primaryFurniIds, secondaryFurniIds, setFurniIds ]);
setFurniIds([ ...(mode === 'primary' ? nextPrimaryIds : nextSecondaryIds) ]);
}, [ selectionMode, furniIds, matchSource, compareSource, primaryFurniIds, secondaryFurniIds, setFurniIds ]);
useEffect(() =>
{
@@ -161,10 +166,16 @@ export const WiredConditionFurniIsOfTypeView: FC<WiredConditionFurniIsOfTypeView
const save = useCallback(() =>
{
const nextPrimaryIds = (selectionMode === 'primary') ? [ ...furniIds ] : [ ...primaryFurniIds ];
const nextSecondaryIds = (selectionMode === 'secondary') ? [ ...furniIds ] : [ ...secondaryFurniIds ];
setPrimaryFurniIds(nextPrimaryIds);
setSecondaryFurniIds(nextSecondaryIds);
if(selectionMode === 'secondary')
{
setSelectionMode('primary');
setFurniIds([ ...primaryFurniIds ]);
setFurniIds([ ...nextPrimaryIds ]);
}
setIntParams([
@@ -172,8 +183,8 @@ export const WiredConditionFurniIsOfTypeView: FC<WiredConditionFurniIsOfTypeView
compareSource,
quantifier
]);
setStringParam(serializeIds(secondaryFurniIds));
}, [ selectionMode, primaryFurniIds, matchSource, compareSource, quantifier, secondaryFurniIds, setFurniIds, setIntParams, setStringParam ]);
setStringParam(serializeIds(nextSecondaryIds));
}, [ selectionMode, furniIds, primaryFurniIds, matchSource, compareSource, quantifier, secondaryFurniIds, setFurniIds, setIntParams, setStringParam ]);
const selectionLimit = trigger?.maximumItemSelectionCount ?? 0;
const quantifierKeyPrefix = negative ? 'wiredfurni.params.quantifier.furni.neg' : 'wiredfurni.params.quantifier.furni';
src/components/wired/views/extras/WiredExtraAnimationTimeView.tsx
+47
View File
@@ -0,0 +1,47 @@
import { FC, useEffect, useState } from 'react';
import { LocalizeText, WiredFurniType } from '../../../../api';
import { Slider, Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { WiredExtraBaseView } from './WiredExtraBaseView';
const MIN_DURATION = 50;
const MAX_DURATION = 2000;
const STEP_DURATION = 50;
const DEFAULT_DURATION = 500;
const normalizeDuration = (value: number) =>
{
if(isNaN(value)) return DEFAULT_DURATION;
return Math.max(MIN_DURATION, Math.min(MAX_DURATION, Math.round(value / STEP_DURATION) * STEP_DURATION));
};
export const WiredExtraAnimationTimeView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
const [ duration, setDuration ] = useState(DEFAULT_DURATION);
useEffect(() =>
{
if(!trigger) return;
setDuration(normalizeDuration((trigger.intData.length > 0) ? trigger.intData[0] : DEFAULT_DURATION));
}, [ trigger ]);
const save = () =>
{
setIntParams([ normalizeDuration(duration) ]);
setStringParam('');
};
return (
<WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 380 } }>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.anim_time.title') }</Text>
<Text>{ LocalizeText('wiredfurni.params.anim_time.description') }</Text>
<Text bold>{ LocalizeText('wiredfurni.params.anim_time.value', [ 'ms' ], [ duration.toString() ]) }</Text>
<Slider min={ MIN_DURATION } max={ MAX_DURATION } step={ STEP_DURATION } value={ duration } onChange={ value => setDuration(normalizeDuration(Array.isArray(value) ? value[0] : Number(value))) } />
</div>
</WiredExtraBaseView>
);
};
src/components/wired/views/extras/WiredExtraMoveCarryUsersView.tsx
+62
View File
@@ -0,0 +1,62 @@
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 CARRY_MODE_DIRECT = 0;
const CARRY_MODE_SAME_TILE = 1;
const SOURCE_ALL_ROOM_USERS = 900;
const USER_SOURCES: WiredSourceOption[] = [
{ value: SOURCE_ALL_ROOM_USERS, label: 'wiredfurni.params.sources.users.900' },
{ value: 0, label: 'wiredfurni.params.sources.users.0' },
{ value: 200, label: 'wiredfurni.params.sources.users.200' },
{ value: 201, label: 'wiredfurni.params.sources.users.201' }
];
const normalizeCarryMode = (value: number) => ((value === CARRY_MODE_SAME_TILE) ? CARRY_MODE_SAME_TILE : CARRY_MODE_DIRECT);
const normalizeUserSource = (value: number) => (USER_SOURCES.some(option => option.value === value) ? value : 0);
export const WiredExtraMoveCarryUsersView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
const [ carryMode, setCarryMode ] = useState(CARRY_MODE_DIRECT);
const [ userSource, setUserSource ] = useState(0);
useEffect(() =>
{
if(!trigger) return;
setCarryMode(normalizeCarryMode((trigger.intData.length > 0) ? trigger.intData[0] : CARRY_MODE_DIRECT));
setUserSource(normalizeUserSource((trigger.intData.length > 1) ? trigger.intData[1] : 0));
}, [ trigger ]);
const save = () =>
{
setIntParams([ normalizeCarryMode(carryMode), normalizeUserSource(userSource) ]);
setStringParam('');
};
return (
<WiredExtraBaseView
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
save={ save }
cardStyle={ { width: 420 } }
footer={ <WiredSourcesSelector showUsers={ true } userSource={ userSource } userSources={ USER_SOURCES } usersTitle="wiredfurni.params.sources.users.title.carry" onChangeUsers={ value => setUserSource(normalizeUserSource(value)) } /> }>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.carry_mode') }</Text>
<label className="flex items-center gap-1 cursor-pointer">
<input checked={ (carryMode === CARRY_MODE_DIRECT) } className="form-check-input" name="wiredCarryMode" type="radio" onChange={ () => setCarryMode(CARRY_MODE_DIRECT) } />
<Text>{ LocalizeText('wiredfurni.params.carry_mode.0') }</Text>
</label>
<label className="flex items-center gap-1 cursor-pointer">
<input checked={ (carryMode === CARRY_MODE_SAME_TILE) } className="form-check-input" name="wiredCarryMode" type="radio" onChange={ () => setCarryMode(CARRY_MODE_SAME_TILE) } />
<Text>{ LocalizeText('wiredfurni.params.carry_mode.1') }</Text>
</label>
</div>
</WiredExtraBaseView>
);
};
src/components/wired/views/extras/WiredExtraMoveNoAnimationView.tsx
+25
View File
@@ -0,0 +1,25 @@
import { FC } from 'react';
import { LocalizeText, WiredFurniType } from '../../../../api';
import { Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { WiredExtraBaseView } from './WiredExtraBaseView';
export const WiredExtraMoveNoAnimationView: FC<{}> = () =>
{
const { setIntParams = null, setStringParam = null } = useWired();
const save = () =>
{
setIntParams([]);
setStringParam('');
};
return (
<WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 360 } }>
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('wiredfurni.params.mov_no_animation.title') }</Text>
<Text>{ LocalizeText('wiredfurni.params.mov_no_animation.description') }</Text>
</div>
</WiredExtraBaseView>
);
};
src/components/wired/views/extras/WiredExtraMovePhysicsView.tsx
+120
View File
@@ -0,0 +1,120 @@
import { FC, useEffect, useMemo, 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 SOURCE_ALL_ROOM = 900;
const DEFAULT_SOURCE = 0;
const FURNI_SOURCES: WiredSourceOption[] = [
{ value: SOURCE_ALL_ROOM, label: 'wiredfurni.params.sources.furni.900' },
{ 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 USER_SOURCES: WiredSourceOption[] = [
{ value: SOURCE_ALL_ROOM, label: 'wiredfurni.params.sources.users.900' },
{ value: 0, label: 'wiredfurni.params.sources.users.0' },
{ value: 200, label: 'wiredfurni.params.sources.users.200' },
{ value: 201, label: 'wiredfurni.params.sources.users.201' }
];
const normalizeSource = (value: number, options: WiredSourceOption[]) => (options.some(option => option.value === value) ? value : DEFAULT_SOURCE);
const getFlag = (value: number) => (value === 1);
export const WiredExtraMovePhysicsView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
const [ keepAltitude, setKeepAltitude ] = useState(false);
const [ moveThroughFurni, setMoveThroughFurni ] = useState(false);
const [ moveThroughUsers, setMoveThroughUsers ] = useState(false);
const [ blockByFurni, setBlockByFurni ] = useState(false);
const [ moveThroughFurniSource, setMoveThroughFurniSource ] = useState(DEFAULT_SOURCE);
const [ blockByFurniSource, setBlockByFurniSource ] = useState(DEFAULT_SOURCE);
const [ moveThroughUsersSource, setMoveThroughUsersSource ] = useState(DEFAULT_SOURCE);
useEffect(() =>
{
if(!trigger) return;
setKeepAltitude(getFlag(trigger.intData[0] ?? 0));
setMoveThroughFurni(getFlag(trigger.intData[1] ?? 0));
setMoveThroughUsers(getFlag(trigger.intData[2] ?? 0));
setBlockByFurni(getFlag(trigger.intData[3] ?? 0));
setMoveThroughFurniSource(normalizeSource((trigger.intData[4] ?? DEFAULT_SOURCE), FURNI_SOURCES));
setBlockByFurniSource(normalizeSource((trigger.intData[5] ?? DEFAULT_SOURCE), FURNI_SOURCES));
setMoveThroughUsersSource(normalizeSource((trigger.intData[6] ?? DEFAULT_SOURCE), USER_SOURCES));
}, [ trigger ]);
const save = () =>
{
setIntParams([
keepAltitude ? 1 : 0,
moveThroughFurni ? 1 : 0,
moveThroughUsers ? 1 : 0,
blockByFurni ? 1 : 0,
normalizeSource(moveThroughFurniSource, FURNI_SOURCES),
normalizeSource(blockByFurniSource, FURNI_SOURCES),
normalizeSource(moveThroughUsersSource, USER_SOURCES)
]);
setStringParam('');
};
const footer = useMemo(() =>
{
if(!moveThroughFurni && !blockByFurni && !moveThroughUsers) return null;
return (
<div className="flex flex-col gap-3">
{ moveThroughFurni &&
<WiredSourcesSelector
showFurni={ true }
furniSource={ moveThroughFurniSource }
furniSources={ FURNI_SOURCES }
furniTitle="wiredfurni.params.sources.furni.title.physics.0"
onChangeFurni={ value => setMoveThroughFurniSource(normalizeSource(value, FURNI_SOURCES)) } /> }
{ blockByFurni &&
<WiredSourcesSelector
showFurni={ true }
furniSource={ blockByFurniSource }
furniSources={ FURNI_SOURCES }
furniTitle="wiredfurni.params.sources.furni.title.physics.1"
onChangeFurni={ value => setBlockByFurniSource(normalizeSource(value, FURNI_SOURCES)) } /> }
{ moveThroughUsers &&
<WiredSourcesSelector
showUsers={ true }
userSource={ moveThroughUsersSource }
userSources={ USER_SOURCES }
usersTitle="wiredfurni.params.sources.users.title.physics.0"
onChangeUsers={ value => setMoveThroughUsersSource(normalizeSource(value, USER_SOURCES)) } /> }
</div>
);
}, [ blockByFurni, blockByFurniSource, moveThroughFurni, moveThroughFurniSource, moveThroughUsers, moveThroughUsersSource ]);
return (
<WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 430 } } footer={ footer }>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.select_options') }</Text>
<label className="flex items-center gap-2 cursor-pointer">
<input checked={ keepAltitude } className="form-check-input" type="checkbox" onChange={ event => setKeepAltitude(event.target.checked) } />
<Text>{ LocalizeText('wiredfurni.params.movephysics.keep_altitude') }</Text>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input checked={ moveThroughFurni } className="form-check-input" type="checkbox" onChange={ event => setMoveThroughFurni(event.target.checked) } />
<Text>{ LocalizeText('wiredfurni.params.movephysics.move_through_furni') }</Text>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input checked={ moveThroughUsers } className="form-check-input" type="checkbox" onChange={ event => setMoveThroughUsers(event.target.checked) } />
<Text>{ LocalizeText('wiredfurni.params.movephysics.move_through_users') }</Text>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input checked={ blockByFurni } className="form-check-input" type="checkbox" onChange={ event => setBlockByFurni(event.target.checked) } />
<Text>{ LocalizeText('wiredfurni.params.movephysics.block_by_furni') }</Text>
</label>
</div>
</WiredExtraBaseView>
);
};
src/components/wired/views/selectors/WiredSelectorFurniByTypeView.tsx
+1 -6
View File
@@ -12,7 +12,7 @@ export const WiredSelectorFurniByTypeView: FC<{}> = () =>
const [ filterExisting, setFilterExisting ] = useState(false);
const [ invert, setInvert ] = useState(false);
const { trigger = null, setIntParams, setSelectByType } = useWired();
const { trigger = null, setIntParams } = useWired();
useEffect(() =>
{
@@ -24,11 +24,6 @@ export const WiredSelectorFurniByTypeView: FC<{}> = () =>
if(p.length >= 4) setInvert(p[3] === 1);
}, [ trigger ]);
useEffect(() =>
{
setSelectByType(true);
}, [ setSelectByType ]);
const save = useCallback(() =>
{
setIntParams([
src/hooks/furni-editor/useFurniEditor.ts
+144 -78
View File
@@ -1,7 +1,4 @@
import { FurniEditorBySpriteComposer, FurniEditorCreateComposer, FurniEditorDeleteComposer, FurniEditorDetailComposer, FurniEditorDetailEvent as FurniEditorDetailMsgEvent, FurniEditorInteractionsComposer, FurniEditorInteractionsEvent as FurniEditorInteractionsMsgEvent, FurniEditorResultEvent as FurniEditorResultMsgEvent, FurniEditorSearchComposer, FurniEditorSearchEvent as FurniEditorSearchMsgEvent, FurniEditorUpdateComposer } from '@nitrots/nitro-renderer';
import { useCallback, useState } from 'react';
import { SendMessageComposer } from '../../api';
import { useMessageEvent } from '../events';
export interface FurniItem
{
@@ -49,6 +46,18 @@ export interface CatalogRef
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[]>([]);
@@ -60,114 +69,171 @@ export const useFurniEditor = () =>
const [ catalogItems, setCatalogItems ] = useState<CatalogRef[]>([]);
const [ interactions, setInteractions ] = useState<string[]>([]);
const [ furniDataEntry, setFurniDataEntry ] = useState<Record<string, unknown> | null>(null);
const [ lastResult, setLastResult ] = useState<{ success: boolean; message: string; id: number } | null>(null);
const clearError = useCallback(() => setError(null), []);
// Listen for search results
useMessageEvent(FurniEditorSearchMsgEvent, (event: any) =>
const searchItems = useCallback(async (query: string, type: string, pg: number) =>
{
const parser = event.getParser();
setItems(parser.items);
setTotal(parser.total);
setPage(parser.page);
setLoading(false);
});
// Listen for detail results
useMessageEvent(FurniEditorDetailMsgEvent, (event: any) =>
{
const parser = event.getParser();
setSelectedItem(parser.item as FurniDetail);
setCatalogItems(parser.catalogItems as CatalogRef[]);
setLoading(true);
setError(null);
try
{
setFurniDataEntry(parser.furniDataJson ? JSON.parse(parser.furniDataJson) : null);
}
catch
{
setFurniDataEntry(null);
}
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);
});
// Listen for interactions results
useMessageEvent(FurniEditorInteractionsMsgEvent, (event: any) =>
{
const parser = event.getParser();
setInteractions(parser.interactions);
});
// Listen for operation results (update/create/delete)
useMessageEvent(FurniEditorResultMsgEvent, (event: any) =>
{
const parser = event.getParser();
setLastResult({ success: parser.success, message: parser.message, id: parser.id });
setLoading(false);
if(!parser.success)
{
setError(parser.message);
}
}, []);
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)
});
const searchItems = useCallback((query: string, type: string, pg: number) =>
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);
SendMessageComposer(new FurniEditorSearchComposer(query, type, pg));
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 loadDetail = useCallback((id: number) =>
const deleteItem = useCallback(async (id: number) =>
{
setLoading(true);
setError(null);
SendMessageComposer(new FurniEditorDetailComposer(id));
try
{
await apiFetch(`${ API_BASE }/delete?id=${ id }`, { method: 'POST' });
return true;
}
catch(e: any)
{
setError(e.message);
return false;
}
finally
{
setLoading(false);
}
}, []);
const loadBySpriteId = useCallback((spriteId: number) =>
const loadInteractions = useCallback(async () =>
{
setLoading(true);
setError(null);
SendMessageComposer(new FurniEditorBySpriteComposer(spriteId));
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 updateItem = useCallback((id: number, fields: Record<string, unknown>) =>
const loadBySpriteId = useCallback(async (spriteId: number): Promise<boolean> =>
{
setLoading(true);
setError(null);
SendMessageComposer(new FurniEditorUpdateComposer(id, JSON.stringify(fields)));
}, []);
try
{
const data = await apiFetch<{ id: number }>(`${ API_BASE }/by-sprite?spriteId=${ spriteId }`);
const createItem = useCallback((fields: Record<string, unknown>) =>
return await loadDetail(data.id);
}
catch(e: any)
{
setLoading(true);
setError(null);
SendMessageComposer(new FurniEditorCreateComposer(JSON.stringify(fields)));
}, []);
setError(e.message);
const deleteItem = useCallback((id: number) =>
{
setLoading(true);
setError(null);
SendMessageComposer(new FurniEditorDeleteComposer(id));
}, []);
const loadInteractions = useCallback(() =>
{
SendMessageComposer(new FurniEditorInteractionsComposer());
}, []);
return false;
}
}, [ loadDetail ]);
return {
items, total, page, loading, error, clearError,
selectedItem, setSelectedItem, catalogItems, furniDataEntry,
interactions, lastResult,
interactions,
searchItems, loadDetail, loadBySpriteId, updateItem, createItem, deleteItem, loadInteractions
};
};
src/hooks/wired/useWired.ts
+2 -3
View File
@@ -13,7 +13,7 @@ const useWiredState = () =>
const [ furniIds, setFurniIds ] = useState<number[]>([]);
const [ actionDelay, setActionDelay ] = useState<number>(0);
const [ allowsFurni, setAllowsFurni ] = useState<number>(WiredFurniType.STUFF_SELECTION_OPTION_NONE);
const [ selectByType, setSelectByType ] = useState<boolean>(false);
const selectByType = false;
const [ neighborhoodTiles, setNeighborhoodTiles ] = useState<{ x: number; y: number }[] | null>(null);
const [ neighborhoodInvert, setNeighborhoodInvert ] = useState<boolean>(false);
const [ allowedInteractionTypes, setAllowedInteractionTypes ] = useState<string[] | null>(null);
@@ -303,7 +303,6 @@ const useWiredState = () =>
return [];
});
setAllowsFurni(WiredFurniType.STUFF_SELECTION_OPTION_NONE);
setSelectByType(false);
setNeighborhoodTiles(null);
setNeighborhoodInvert(false);
setAllowedInteractionTypes(null);
@@ -311,7 +310,7 @@ const useWiredState = () =>
};
}, [ trigger ]);
return { trigger, setTrigger, intParams, setIntParams, stringParam, setStringParam, furniIds, setFurniIds, actionDelay, setActionDelay, setAllowsFurni, saveWired, selectObjectForWired, setSelectByType, setNeighborhoodTiles, setNeighborhoodInvert, setAllowedInteractionTypes, setAllowedInteractionErrorKey };
return { trigger, setTrigger, intParams, setIntParams, stringParam, setStringParam, furniIds, setFurniIds, actionDelay, setActionDelay, setAllowsFurni, saveWired, selectObjectForWired, setNeighborhoodTiles, setNeighborhoodInvert, setAllowedInteractionTypes, setAllowedInteractionErrorKey };
};
export const useWired = () => useBetween(useWiredState);
yarn.lock
-3238
View File
File diff suppressed because it is too large Load Diff