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

Polish wired editor UI and variable handling

Browse Source
This commit is contained in:
Lorenzune
2026-04-08 16:18:16 +02:00
parent 0ebd37d91b
commit 5e9e3e1e4c
22 changed files with 926 additions and 1029 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wired/views/WiredBaseView.tsx
+42 -50
View File
@@ -1,6 +1,8 @@
import { GetRoomEngine, GetSessionDataManager } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
import { LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../api';
import wiredBgLeft from '../../../assets/images/wired/wired_bg_left.png';
import wiredBgRight from '../../../assets/images/wired/wired_bg_right.png';
import { Button, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
import { useWired, useWiredTools } from '../../../hooks';
import { WiredFurniSelectorView } from './WiredFurniSelectorView';
@@ -20,6 +22,7 @@ export interface WiredBaseViewProps
export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
{
const WIRED_CARD_WIDTH = 244;
const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null, hasSpecialInput = false, cardStyle = undefined, footer = null, footerCollapsible = true, selectionPreview = null } = props;
const [ wiredName, setWiredName ] = useState<string>(null);
const [ needsSave, setNeedsSave ] = useState<boolean>(false);
@@ -122,64 +125,53 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
const resolvedCardStyle: CSSProperties = { ...cardStyle };
if(resolvedCardStyle.width !== undefined)
{
if(typeof resolvedCardStyle.width === 'number')
{
resolvedCardStyle.maxWidth = Math.min(resolvedCardStyle.width, 324);
}
else if(typeof resolvedCardStyle.width === 'string')
{
const match = resolvedCardStyle.width.trim().match(/^(\d+(?:\.\d+)?)px$/i);
resolvedCardStyle.maxWidth = match ? `${ Math.min(parseFloat(match[1]), 324) }px` : resolvedCardStyle.width;
}
delete resolvedCardStyle.width;
}
if(resolvedCardStyle.minWidth === undefined) resolvedCardStyle.minWidth = 216;
if(resolvedCardStyle.maxWidth === undefined) resolvedCardStyle.maxWidth = 'min(90vw, 324px)';
resolvedCardStyle.width = WIRED_CARD_WIDTH;
resolvedCardStyle.minWidth = WIRED_CARD_WIDTH;
resolvedCardStyle.maxWidth = WIRED_CARD_WIDTH;
resolvedCardStyle.resize = 'none';
return (
<NitroCardView className="nitro-wired" theme="primary-slim" uniqueKey="nitro-wired" isResizable={ false } style={ resolvedCardStyle }>
<NitroCardHeaderView classNames={ [ 'nitro-wired__header' ] } headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ onClose } />
<NitroCardContentView classNames={ [ 'nitro-wired__content' ] } gap={ 2 }>
<NitroCardContentView classNames={ [ 'nitro-wired__content' ] } gap={ 0 }>
<div className="nitro-wired__section nitro-wired__summary">
<div className="flex items-center justify-center gap-1">
<i className={ `icon icon-wired-${ wiredType }` } />
<img className="nitro-wired__summary-bg nitro-wired__summary-bg--left" src={ wiredBgLeft } alt="" />
<img className="nitro-wired__summary-bg nitro-wired__summary-bg--right" src={ wiredBgRight } alt="" />
<div className="nitro-wired__summary-copy">
<Text bold className="nitro-wired__summary-title">{ wiredName }</Text>
</div>
</div>
{ !!children && <div className="nitro-wired__divider" /> }
{ !!children && <div className="nitro-wired__section nitro-wired__section--body">{ children }</div> }
{ (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
<>
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--selector">
{ selectionPreview || <WiredFurniSelectorView /> }
</div>
</> }
{ footer &&
<>
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--footer">
{ footerCollapsible
? (
<>
<button className="nitro-wired__advanced-toggle" type="button" onClick={ () => setShowFooter(value => !value) }>
{ LocalizeText(showFooter ? 'wiredfurni.params.sources.collapse' : 'wiredfurni.params.sources.expand') }
</button>
{ showFooter && <div className="nitro-wired__advanced-body">{ footer }</div> }
</>
)
: footer }
</div>
</> }
<div className="nitro-wired__divider" />
<div className="flex items-center gap-1 nitro-wired__actions">
<Button disabled={ !roomSettings.canModify } fullWidth variant="success" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--primary' ] } onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
<Button fullWidth variant="secondary" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--secondary' ] } onClick={ onClose }>{ LocalizeText('cancel') }</Button>
<div className="nitro-wired__body">
{ !!children && <div className="nitro-wired__divider" /> }
{ !!children && <div className="nitro-wired__section nitro-wired__section--body">{ children }</div> }
{ (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
<>
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--selector">
{ selectionPreview || <WiredFurniSelectorView /> }
</div>
</> }
{ footer &&
<>
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--footer">
{ footerCollapsible
? (
<>
<button className="nitro-wired__advanced-toggle" type="button" onClick={ () => setShowFooter(value => !value) }>
{ LocalizeText(showFooter ? 'wiredfurni.params.sources.collapse' : 'wiredfurni.params.sources.expand') }
</button>
{ showFooter && <div className="nitro-wired__advanced-body">{ footer }</div> }
</>
)
: footer }
</div>
</> }
<div className="nitro-wired__divider" />
<div className="flex items-center gap-1 nitro-wired__actions">
<Button disabled={ !roomSettings.canModify } fullWidth variant="success" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--primary' ] } onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
<Button fullWidth variant="secondary" classNames={ [ 'nitro-wired__button', 'nitro-wired__button--secondary' ] } onClick={ onClose }>{ LocalizeText('cancel') }</Button>
</div>
</div>
</NitroCardContentView>
</NitroCardView>
src/components/wired/views/WiredFurniSelectionSourceRow.tsx
+4 -2
View File
@@ -1,4 +1,4 @@
import { FC } from 'react';
import { FC, ReactNode } from 'react';
import { FaChevronLeft, FaChevronRight, FaMousePointer } from 'react-icons/fa';
import { LocalizeText } from '../../../api';
import { Button, Text } from '../../../common';
@@ -16,13 +16,14 @@ interface WiredFurniSelectionSourceRowProps
selectionLimit: number;
selectionEnabledValues: number[];
showSelectionToggle?: boolean;
headerContent?: ReactNode;
onChange: (value: number) => void;
onSelectionActivate?: () => void;
}
export const WiredFurniSelectionSourceRow: FC<WiredFurniSelectionSourceRowProps> = props =>
{
const { title = '', titleIsLiteral = false, options = [], value = 0, selectionKind = 'primary', selectionActive = false, selectionCount = 0, selectionLimit = 0, selectionEnabledValues = [], showSelectionToggle = true, onChange = null, onSelectionActivate = null } = props;
const { title = '', titleIsLiteral = false, options = [], value = 0, selectionKind = 'primary', selectionActive = false, selectionCount = 0, selectionLimit = 0, selectionEnabledValues = [], showSelectionToggle = true, headerContent = null, onChange = null, onSelectionActivate = null } = props;
const currentIndex = Math.max(0, options.findIndex(option => (option.value === value)));
const currentOption = options[currentIndex] ?? options[0];
const canActivateSelection = !!onSelectionActivate && selectionEnabledValues.includes(currentOption?.value);
@@ -45,6 +46,7 @@ export const WiredFurniSelectionSourceRow: FC<WiredFurniSelectionSourceRowProps>
<div className="nitro-wired__source-row">
<div className="flex items-center justify-between gap-2">
<Text>{ resolvedTitle }</Text>
{ headerContent }
{ showSelectionToggle &&
<button
type="button"
src/components/wired/views/WiredSourcesSelector.tsx
+8 -3
View File
@@ -46,10 +46,10 @@ const FURNI_SOURCE_LABEL_ORDER = [
const USER_SOURCE_LABEL_ORDER = [
'wiredfurni.params.sources.users.0',
'wiredfurni.params.sources.users.11',
'wiredfurni.params.sources.users.100',
'wiredfurni.params.sources.users.101',
'wiredfurni.params.sources.users.200',
'wiredfurni.params.sources.users.201',
'wiredfurni.params.sources.users.100',
'wiredfurni.params.sources.users.101',
'wiredfurni.params.sources.users.900'
];
@@ -219,7 +219,12 @@ export const WiredSourcesSelector: FC<WiredSourcesSelectorProps> = props =>
const { trigger = null } = useWired();
const availableUserSources = useAvailableUserSources(trigger, userSources, usersTitle, allowClickedUserSource);
const orderedFurniSources = useMemo(() => sortWiredSourceOptions(furniSources, 'furni'), [ furniSources ]);
const orderedUserSources = useMemo(() => sortWiredSourceOptions(availableUserSources, 'users'), [ availableUserSources ]);
const orderedUserSources = useMemo(() =>
{
if(usersTitle === BOT_SOURCE_TITLE) return [ ...availableUserSources ];
return sortWiredSourceOptions(availableUserSources, 'users');
}, [ availableUserSources, usersTitle ]);
useEffect(() =>
{
src/components/wired/views/actions/WiredActionLayoutView.tsx
+5
View File
@@ -55,6 +55,7 @@ import { WiredActionSetFurniStateToView } from './WiredActionSetFurniStateToView
import { WiredActionTeleportView } from './WiredActionTeleportView';
import { WiredActionToggleFurniStateView } from './WiredActionToggleFurniStateView';
import { WiredActionUnfreezeView } from './WiredActionUnfreezeView';
import { WiredActionNegativeCallAnotherStackView } from './WiredActionNegativeCallAnotherStackView';
import { WiredExtraFilterFurniView } from '../extras/WiredExtraFilterFurniView';
import { WiredExtraFilterFurniByVariableView } from '../extras/WiredExtraFilterFurniByVariableView';
import { WiredExtraFilterUserView } from '../extras/WiredExtraFilterUserView';
@@ -103,6 +104,8 @@ export const WiredActionLayoutView = (code: number) =>
return <WiredActionBotTeleportView />;
case WiredActionLayoutCode.CALL_ANOTHER_STACK:
return <WiredActionCallAnotherStackView />;
case WiredActionLayoutCode.NEG_CALL_ANOTHER_STACK:
return <WiredActionNegativeCallAnotherStackView />;
case WiredActionLayoutCode.CHASE:
return <WiredActionChaseView />;
case WiredActionLayoutCode.CHAT:
@@ -251,6 +254,8 @@ export const WiredActionLayoutView = (code: number) =>
return <WiredExtraTextInputVariableView />;
case WiredActionLayoutCode.SEND_SIGNAL:
return <WiredActionSendSignalView />;
case WiredActionLayoutCode.NEG_SEND_SIGNAL:
return <WiredActionSendSignalView />;
}
return null;
src/components/wired/views/actions/WiredActionNegativeCallAnotherStackView.tsx
+36
View File
@@ -0,0 +1,36 @@
import { FC, useEffect, useState } from 'react';
import { WiredFurniType } from '../../../../api';
import { useWired } from '../../../../hooks';
import { WiredSourcesSelector } from '../WiredSourcesSelector';
import { WiredActionBaseView } from './WiredActionBaseView';
export const WiredActionNegativeCallAnotherStackView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null } = useWired();
const [ furniSource, setFurniSource ] = useState<number>(() =>
{
if(trigger?.intData?.length >= 1) return trigger.intData[0];
return (trigger?.selectedItems?.length ?? 0) > 0 ? 100 : 0;
});
useEffect(() =>
{
if(!trigger) return;
if(trigger.intData.length >= 1) setFurniSource(trigger.intData[0]);
else setFurniSource((trigger.selectedItems?.length ?? 0) > 0 ? 100 : 0);
}, [ trigger ]);
const onChangeFurniSource = (next: number) => setFurniSource(next);
const save = () => setIntParams([ furniSource ]);
return (
<WiredActionBaseView
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT }
save={ save }
footer={ <WiredSourcesSelector showFurni={ true } furniSource={ furniSource } onChangeFurni={ onChangeFurniSource } /> } />
);
};
src/components/wired/views/extras/WiredExtraContextVariableView.tsx
+20 -3
View File
@@ -9,20 +9,37 @@ const MAX_NAME_LENGTH = 40;
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
export const WiredExtraContextVariableView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
@@ -48,7 +65,7 @@ export const WiredExtraContextVariableView: FC<{}> = () =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="flex flex-col gap-1">
src/components/wired/views/extras/WiredExtraRoomVariableView.tsx
+20 -3
View File
@@ -12,20 +12,37 @@ const MAX_NAME_LENGTH = 40;
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
export const WiredExtraRoomVariableView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
@@ -57,7 +74,7 @@ export const WiredExtraRoomVariableView: FC<{}> = () =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="flex flex-col gap-1">
src/components/wired/views/extras/WiredExtraUserVariableView.tsx
+20 -3
View File
@@ -12,20 +12,37 @@ const MAX_NAME_LENGTH = 40;
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
interface WiredExtraVariableViewProps
{
availabilityRoomValue: number;
@@ -76,7 +93,7 @@ export const WiredExtraVariableView: FC<WiredExtraVariableViewProps> = props =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="flex flex-col gap-1">
src/components/wired/views/extras/WiredExtraVariableEchoView.tsx
+20 -3
View File
@@ -34,20 +34,37 @@ const TARGET_BUTTONS: Array<{ key: EchoSourceTarget; icon: string; }> = [
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
const parseEditorData = (value: string): IEchoEditorData =>
{
if(!value?.trim().startsWith('{')) return {};
@@ -173,7 +190,7 @@ export const WiredExtraVariableEchoView: FC<{}> = () =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="nitro-wired__give-var-heading">
src/components/wired/views/extras/WiredExtraVariableReferenceView.tsx
+20 -3
View File
@@ -38,20 +38,37 @@ interface IVariableReferenceEditorData
const normalizeVariableName = (value: string) =>
{
let normalizedValue = (value ?? '').trim().replace(/[\t\r\n]/g, '');
let normalizedValue = (value ?? '').replace(/[\t\r\n]/g, '');
if(normalizedValue.includes('=')) normalizedValue = normalizedValue.substring(0, normalizedValue.indexOf('=')).trim();
while(normalizedValue.startsWith('@') || normalizedValue.startsWith('~'))
{
normalizedValue = normalizedValue.substring(1).trim();
normalizedValue = normalizedValue.substring(1);
}
normalizedValue = normalizedValue.replace(/\s+/g, '_');
normalizedValue = normalizedValue.replace(/[^A-Za-z0-9_]/g, '');
return normalizedValue.slice(0, MAX_NAME_LENGTH);
};
const handleVariableNameKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, setValue: (value: string) => void) =>
{
if(event.key !== ' ') return;
event.preventDefault();
const input = event.currentTarget;
const start = (input.selectionStart ?? input.value.length);
const end = (input.selectionEnd ?? start);
const nextValue = `${ input.value.substring(0, start) }_${ input.value.substring(end) }`;
setValue(normalizeVariableName(nextValue));
window.requestAnimationFrame(() => input.setSelectionRange(Math.min(start + 1, input.value.length + 1), Math.min(start + 1, input.value.length + 1)));
};
const parseEditorData = (value: string): IVariableReferenceEditorData =>
{
if(!value?.trim().startsWith('{')) return {};
@@ -187,7 +204,7 @@ export const WiredExtraVariableReferenceView: FC<{}> = () =>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-1">
<Text>{ LocalizeText('wiredfurni.params.variables.variable_name') }</Text>
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } />
<NitroInput maxLength={ MAX_NAME_LENGTH } type="text" value={ variableName } onChange={ event => setVariableName(normalizeVariableName(event.target.value)) } onKeyDown={ event => handleVariableNameKeyDown(event, setVariableName) } />
</div>
<div className="flex flex-col gap-1">
src/components/wired/views/extras/WiredExtraVariableTextConnectorView.tsx
+29 -2
View File
@@ -5,6 +5,26 @@ import { useWired } from '../../../../hooks';
import { WiredExtraBaseView } from './WiredExtraBaseView';
const DEFAULT_CONNECTOR_PLACEHOLDER = '0=text 1\n1=text 2\n2 = text 3';
const MAX_CONNECTOR_LINES = 30;
const MAX_CONNECTOR_CHARACTERS = 1000;
const truncateMappingsText = (value: string) =>
{
const normalizedValue = (value ?? '').replace(/\r/g, '');
const lines = normalizedValue.split('\n');
const limitedByLines = lines.slice(0, MAX_CONNECTOR_LINES).join('\n');
return (limitedByLines.length > MAX_CONNECTOR_CHARACTERS)
? limitedByLines.slice(0, MAX_CONNECTOR_CHARACTERS)
: limitedByLines;
};
const getLineCount = (value: string) =>
{
if(!value.length) return 0;
return value.split('\n').length;
};
export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
{
@@ -15,7 +35,7 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
{
if(!trigger) return;
setMappingsText(trigger.stringData || '');
setMappingsText(truncateMappingsText(trigger.stringData || ''));
}, [ trigger ]);
const save = () =>
@@ -24,6 +44,8 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
setStringParam(mappingsText ?? '');
};
const handleTextChange = (value: string) => setMappingsText(truncateMappingsText(value));
const placeholderText = (() =>
{
const localizedText = LocalizeText('wiredfurni.params.variables.connect_text.caption');
@@ -34,15 +56,20 @@ export const WiredExtraVariableTextConnectorView: FC<{}> = () =>
return localizedText;
})();
const lineCount = getLineCount(mappingsText);
const characterCount = mappingsText.length;
return (
<WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 400 } }>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.variables.connect_text.title') }</Text>
<textarea
className="form-control form-control-sm nitro-wired__resizable-textarea"
maxLength={ MAX_CONNECTOR_CHARACTERS }
placeholder={ placeholderText }
value={ mappingsText }
onChange={ event => setMappingsText(event.target.value) } />
onChange={ event => handleTextChange(event.target.value) } />
<Text small>{ `${ lineCount }/${ MAX_CONNECTOR_LINES } righe - ${ characterCount }/${ MAX_CONNECTOR_CHARACTERS } caratteri` }</Text>
</div>
</WiredExtraBaseView>
);
src/components/wired/views/selectors/WiredNeighborhoodSelectorView.tsx
+456
View File
@@ -0,0 +1,456 @@
import { GetRoomEngine } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
import { FaMinus, FaPlus, FaTimes } from 'react-icons/fa';
import { MdGridOn } from 'react-icons/md';
import { LocalizeText, WiredFurniType } from '../../../../api';
import sourceFurniIcon from '../../../../assets/images/wired/source_furni.png';
import sourceUserIcon from '../../../../assets/images/wired/source_user.png';
import { Button, Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { WiredFurniSelectionSourceRow } from '../WiredFurniSelectionSourceRow';
import { sortWiredSourceOptions, useAvailableUserSources } from '../WiredSourcesSelector';
import { WiredSelectorBaseView } from './WiredSelectorBaseView';
const SOURCE_USER_TRIGGER = 0;
const SOURCE_USER_SIGNAL = 1;
const SOURCE_USER_CLICKED = 2;
const SOURCE_FURNI_TRIGGER = 3;
const SOURCE_FURNI_PICKED = 4;
const SOURCE_FURNI_SIGNAL = 5;
const USER_SOURCES = sortWiredSourceOptions([
{ value: SOURCE_USER_TRIGGER, label: 'wiredfurni.params.sources.users.0' },
{ value: SOURCE_USER_SIGNAL, label: 'wiredfurni.params.sources.users.201' },
{ value: SOURCE_USER_CLICKED, label: 'wiredfurni.params.sources.users.11' }
], 'users');
const FURNI_SOURCES = sortWiredSourceOptions([
{ value: SOURCE_FURNI_TRIGGER, label: 'wiredfurni.params.sources.furni.0' },
{ value: SOURCE_FURNI_PICKED, label: 'wiredfurni.params.sources.furni.100' },
{ value: SOURCE_FURNI_SIGNAL, label: 'wiredfurni.params.sources.furni.201' }
], 'furni');
const SOURCE_GROUP_BUTTONS = [
{ key: 'user', icon: sourceUserIcon, isUserGroup: true },
{ key: 'furni', icon: sourceFurniIcon, isUserGroup: false }
] as const;
const TILE_W = 22;
const TILE_H = 11;
const GRID_RANGE = 4;
const CX = GRID_RANGE * TILE_W + TILE_W / 2;
const CY = GRID_RANGE * TILE_H + TILE_H / 2;
const GRID_PX_W = (GRID_RANGE * 2 + 1) * TILE_W;
const GRID_PX_H = (GRID_RANGE * 2 + 1) * TILE_H;
type Tile = { x: number; y: number };
const tileIncluded = (tiles: Tile[], x: number, y: number) => tiles.some(tile => (tile.x === x && tile.y === y));
const tileLeft = (rx: number, ry: number) => CX + (rx - ry) * (TILE_W / 2) - TILE_W / 2;
const tileTop = (rx: number, ry: number) => CY + (rx + ry) * (TILE_H / 2) - TILE_H / 2;
interface NeighborhoodGridProps
{
selectedTiles: Tile[];
targetTile: Tile;
invert: boolean;
onSetTile: (x: number, y: number, selected: boolean) => void;
onMoveTarget: (x: number, y: number) => void;
targetPlacementMode: boolean;
}
const NeighborhoodGrid: FC<NeighborhoodGridProps> = props =>
{
const { selectedTiles = [], targetTile, invert = false, onSetTile = null, onMoveTarget = null, targetPlacementMode = false } = props;
const [ dragMode, setDragMode ] = useState<'add' | 'remove' | 'target' | null>(null);
const tiles: JSX.Element[] = [];
useEffect(() =>
{
const stopDragging = () => setDragMode(null);
window.addEventListener('mouseup', stopDragging);
return () => window.removeEventListener('mouseup', stopDragging);
}, []);
const beginTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isSelected: boolean) =>
{
event.preventDefault();
if(targetPlacementMode)
{
setDragMode('target');
onMoveTarget && onMoveTarget(rx, ry);
return;
}
const nextDragMode = isSelected ? 'remove' : 'add';
setDragMode(nextDragMode);
onSetTile && onSetTile(rx, ry, nextDragMode === 'add');
};
const continueTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number) =>
{
if(!(event.buttons & 1) || !dragMode) return;
if(dragMode === 'target')
{
onMoveTarget && onMoveTarget(rx, ry);
return;
}
onSetTile && onSetTile(rx, ry, dragMode === 'add');
};
for(let ry = -GRID_RANGE; ry <= GRID_RANGE; ry++)
{
for(let rx = -GRID_RANGE; rx <= GRID_RANGE; rx++)
{
const isTarget = (rx === targetTile.x && ry === targetTile.y);
const isSelected = tileIncluded(selectedTiles, rx, ry);
const isActive = invert ? !isSelected : isSelected;
const left = tileLeft(rx, ry);
const top = tileTop(rx, ry);
const zIndex = rx + ry + GRID_RANGE * 2 + 10;
const diamondStyle: CSSProperties = {
position: 'absolute',
width: TILE_W,
height: TILE_H,
left,
top,
clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
backgroundColor: isActive ? '#3399ff' : '#2a3042',
cursor: 'pointer',
zIndex,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: isTarget ? '#ffffff' : 'transparent',
fontSize: 10
};
const borderStyle: CSSProperties = {
position: 'absolute',
width: TILE_W + (isTarget ? 6 : 2),
height: TILE_H + (isTarget ? 6 : 2),
left: left - (isTarget ? 3 : 1),
top: top - (isTarget ? 3 : 1),
clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
backgroundColor: isTarget ? '#ffffff' : (isActive ? '#1166cc' : '#1a2032'),
zIndex: zIndex - 1,
pointerEvents: 'none'
};
const outlineStyle: CSSProperties = {
position: 'absolute',
width: TILE_W + 4,
height: TILE_H + 4,
left: left - 2,
top: top - 2,
zIndex: zIndex + 1,
pointerEvents: 'none',
overflow: 'visible'
};
tiles.push(
<div key={ `border-${ rx }-${ ry }` } style={ borderStyle } />,
isTarget && (
<svg key={ `outline-${ rx }-${ ry }` } style={ outlineStyle } viewBox={ `0 0 ${ TILE_W + 4 } ${ TILE_H + 4 }` }>
<polygon
points={ `${ (TILE_W + 4) / 2 },2 ${ TILE_W + 2 },${ (TILE_H + 4) / 2 } ${ (TILE_W + 4) / 2 },${ TILE_H + 2 } 2,${ (TILE_H + 4) / 2 }` }
fill="none"
stroke="#ffffff"
strokeWidth="1" />
</svg>
),
<div
key={ `tile-${ rx }-${ ry }` }
style={ diamondStyle }
title={ `(${ rx }, ${ ry })` }
onMouseDown={ event => beginTileDrag(event, rx, ry, isSelected) }
onMouseEnter={ event => continueTileDrag(event, rx, ry) } />
);
}
}
return (
<div style={ { position: 'relative', width: GRID_PX_W, height: GRID_PX_H, flexShrink: 0 } } onContextMenu={ event => event.preventDefault() }>
{ tiles }
</div>
);
};
export const WiredNeighborhoodSelectorView: FC<{}> = () =>
{
const [ selectedTiles, setSelectedTiles ] = useState<Tile[]>([]);
const [ filterExisting, setFilterExisting ] = useState(false);
const [ invert, setInvert ] = useState(false);
const [ sourceType, setSourceType ] = useState(SOURCE_USER_TRIGGER);
const [ targetTile, setTargetTile ] = useState<Tile>({ x: 0, y: 0 });
const [ targetPlacementMode, setTargetPlacementMode ] = useState(false);
const [ curX, setCurX ] = useState(0);
const [ curY, setCurY ] = useState(0);
const { trigger = null, furniIds = [], setIntParams } = useWired();
const availableUserSources = useAvailableUserSources(trigger, USER_SOURCES);
useEffect(() =>
{
GetRoomEngine().areaSelectionManager.clearHighlight();
GetRoomEngine().areaSelectionManager.deactivate();
}, []);
useEffect(() =>
{
if(!trigger) return;
const params = trigger.intData;
if(params.length >= 1) setSourceType(params[0]);
if(params.length >= 2) setFilterExisting(params[1] === 1);
if(params.length >= 3) setInvert(params[2] === 1);
if(params.length >= 5) setTargetTile({ x: params[3], y: params[4] });
else setTargetTile({ x: 0, y: 0 });
if(params.length < 6)
{
setSelectedTiles([]);
return;
}
const tileCount = params[5];
const nextTiles: Tile[] = [];
for(let index = 0; index < tileCount; index++)
{
const tileIndex = 6 + index * 2;
if((tileIndex + 1) >= params.length) break;
nextTiles.push({ x: params[tileIndex], y: params[tileIndex + 1] });
}
setSelectedTiles(nextTiles);
}, [ trigger ]);
useEffect(() =>
{
if(sourceType !== SOURCE_USER_CLICKED) return;
if(availableUserSources.some(option => option.value === SOURCE_USER_CLICKED)) return;
setSourceType(SOURCE_USER_TRIGGER);
}, [ availableUserSources, sourceType ]);
const save = useCallback(() =>
{
setIntParams([
sourceType,
filterExisting ? 1 : 0,
invert ? 1 : 0,
targetTile.x,
targetTile.y,
selectedTiles.length,
...selectedTiles.flatMap(tile => [ tile.x, tile.y ])
]);
}, [ filterExisting, invert, selectedTiles, setIntParams, sourceType, targetTile.x, targetTile.y ]);
const setTileSelection = useCallback((x: number, y: number, selected: boolean) =>
{
setSelectedTiles(previous =>
{
const alreadySelected = tileIncluded(previous, x, y);
if(selected)
{
if(alreadySelected) return previous;
return [ ...previous, { x, y } ];
}
if(!alreadySelected) return previous;
return previous.filter(tile => !(tile.x === x && tile.y === y));
});
}, []);
const activeSources = useMemo(() => ((sourceType <= SOURCE_USER_CLICKED) ? availableUserSources : FURNI_SOURCES), [ availableUserSources, sourceType ]);
const isUserGroup = sourceType <= SOURCE_USER_CLICKED;
const currentIndex = Math.max(0, activeSources.findIndex(option => (option.value === sourceType)));
const currentSourceType = activeSources[currentIndex]?.value ?? sourceType;
useEffect(() =>
{
if(currentSourceType === sourceType) return;
setSourceType(currentSourceType);
}, [ currentSourceType, sourceType ]);
const changeGroup = useCallback((nextIsUserGroup: boolean) =>
{
if(nextIsUserGroup === isUserGroup) return;
const nextOptions = nextIsUserGroup ? availableUserSources : FURNI_SOURCES;
const nextIndex = Math.min(currentIndex, Math.max(0, nextOptions.length - 1));
const nextOption = nextOptions[nextIndex] ?? nextOptions[0];
if(nextOption) setSourceType(nextOption.value);
}, [ availableUserSources, currentIndex, isUserGroup ]);
const addTile = useCallback(() =>
{
setSelectedTiles(previous =>
{
if(tileIncluded(previous, curX, curY)) return previous;
return [ ...previous, { x: curX, y: curY } ];
});
}, [ curX, curY ]);
const removeTile = useCallback(() =>
{
setSelectedTiles(previous => previous.filter(tile => !(tile.x === curX && tile.y === curY)));
}, [ curX, curY ]);
const loadDefaultPattern = useCallback(() =>
{
const nextTiles: Tile[] = [];
for(let y = -2; y <= 2; y++)
{
for(let x = -2; x <= 2; x++)
{
if(x === 0 && y === 0) continue;
nextTiles.push({ x, y });
}
}
setSelectedTiles(nextTiles);
}, []);
const requiresFurni = (sourceType === SOURCE_FURNI_PICKED)
? WiredFurniType.STUFF_SELECTION_OPTION_BY_ID
: WiredFurniType.STUFF_SELECTION_OPTION_NONE;
return (
<WiredSelectorBaseView hasSpecialInput={ true } requiresFurni={ requiresFurni } save={ save } hideDelay={ true } cardStyle={ { width: '400px' } }>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.neighborhood_selection') }</Text>
<div className="flex items-center gap-1">
<Button
variant={ targetPlacementMode ? 'success' : 'secondary' }
className="px-2 py-1"
onClick={ () => setTargetPlacementMode(value => !value) }
title="Sposta target">
<span aria-hidden className="relative inline-block h-[14px] w-[14px]">
<span className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-current" />
<span className="absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-current" />
<span className="absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-current" />
</span>
</Button>
<Button variant="success" className="px-2 py-1" onClick={ addTile } title={ LocalizeText('wiredfurni.tooltip.select.tile') }>
<FaPlus />
</Button>
<Button variant="danger" className="px-2 py-1" onClick={ removeTile } title={ LocalizeText('wiredfurni.tooltip.remove.tile') }>
<FaMinus />
</Button>
<Button variant="primary" className="px-2 py-1" onClick={ loadDefaultPattern } title={ LocalizeText('wiredfurni.tooltip.remove.5x5_tile') }>
<MdGridOn />
</Button>
<Button variant="secondary" className="px-2 py-1" onClick={ () => setSelectedTiles([]) } title={ LocalizeText('wiredfurni.tooltip.remove.clear_tile') }>
<FaTimes />
</Button>
</div>
<div className="flex justify-center">
<NeighborhoodGrid
selectedTiles={ selectedTiles }
targetTile={ targetTile }
invert={ invert }
onSetTile={ setTileSelection }
onMoveTarget={ (x, y) => setTargetTile({ x, y }) }
targetPlacementMode={ targetPlacementMode } />
</div>
<div className="flex items-center gap-2">
<Text small>X:</Text>
<input
type="number"
className="form-control form-control-sm"
style={ { width: 56 } }
value={ curX }
min={ -GRID_RANGE }
max={ GRID_RANGE }
onChange={ event => setCurX(parseInt(event.target.value) || 0) } />
<Text small>Y:</Text>
<input
type="number"
className="form-control form-control-sm"
style={ { width: 56 } }
value={ curY }
min={ -GRID_RANGE }
max={ GRID_RANGE }
onChange={ event => setCurY(parseInt(event.target.value) || 0) } />
</div>
<hr className="m-0 bg-dark" />
<Text bold>{ LocalizeText('wiredfurni.params.selector_options_selector') }</Text>
<label className="flex items-center gap-1">
<input
type="checkbox"
className="form-check-input"
checked={ filterExisting }
onChange={ event => setFilterExisting(event.target.checked) } />
<Text small>{ LocalizeText('wiredfurni.params.selector_option.0') }</Text>
</label>
<label className="flex items-center gap-1">
<input
type="checkbox"
className="form-check-input"
checked={ invert }
onChange={ event => setInvert(event.target.checked) } />
<Text small>{ LocalizeText('wiredfurni.params.selector_option.1') }</Text>
</label>
<hr className="m-0 bg-dark" />
<WiredFurniSelectionSourceRow
title="wiredfurni.params.sources.merged.title.neighborhood"
options={ activeSources }
value={ sourceType }
selectionKind={ isUserGroup ? 'primary' : 'secondary' }
selectionActive={ sourceType === SOURCE_FURNI_PICKED }
selectionCount={ furniIds.length }
selectionLimit={ trigger?.maximumItemSelectionCount ?? 20 }
selectionEnabledValues={ [ SOURCE_FURNI_PICKED ] }
showSelectionToggle={ false }
headerContent={
<div className="nitro-wired__give-var-targets">
{ SOURCE_GROUP_BUTTONS.map(button => (
<button
key={ button.key }
type="button"
className={ `nitro-wired__give-var-target nitro-wired__give-var-target--${ button.key } ${ isUserGroup === button.isUserGroup ? 'is-active' : '' }` }
onClick={ () => changeGroup(button.isUserGroup) }>
<img src={ button.icon } alt={ button.key } />
</button>
)) }
</div>
}
onChange={ value => setSourceType(value) } />
{ sourceType === SOURCE_FURNI_PICKED &&
<Text small className="text-center">
{ LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ furniIds.length.toString(), (trigger?.maximumItemSelectionCount ?? 20).toString() ]) }
</Text> }
</div>
</WiredSelectorBaseView>
);
};
src/components/wired/views/selectors/WiredSelectorFurniNeighborhoodView.tsx
+3 -452
View File
@@ -1,453 +1,4 @@
import { GetRoomEngine } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useCallback, useEffect, useState } from 'react';
import { FaMinus, FaPlus, FaTimes } from 'react-icons/fa';
import { MdGridOn } from 'react-icons/md';
import { LocalizeText, WiredFurniType } from '../../../../api';
import { Button, Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { sortWiredSourceOptions } from '../WiredSourcesSelector';
import { WiredSelectorBaseView } from './WiredSelectorBaseView';
import { FC } from 'react';
import { WiredNeighborhoodSelectorView } from './WiredNeighborhoodSelectorView';
const SOURCE_USER_TRIGGER = 0;
const SOURCE_USER_SIGNAL = 1;
const SOURCE_USER_CLICKED = 2;
const SOURCE_FURNI_TRIGGER = 3;
const SOURCE_FURNI_PICKED = 4;
const SOURCE_FURNI_SIGNAL = 5;
const USER_SOURCES = sortWiredSourceOptions([
{ value: SOURCE_USER_TRIGGER, label: 'wiredfurni.params.sources.users.0' },
{ value: SOURCE_USER_SIGNAL, label: 'wiredfurni.params.sources.users.201' },
{ value: SOURCE_USER_CLICKED, label: 'wiredfurni.params.sources.users.11' },
], 'users');
const FURNI_SOURCES = sortWiredSourceOptions([
{ value: SOURCE_FURNI_TRIGGER, label: 'wiredfurni.params.sources.furni.0' },
{ value: SOURCE_FURNI_PICKED, label: 'wiredfurni.params.sources.furni.100' },
{ value: SOURCE_FURNI_SIGNAL, label: 'wiredfurni.params.sources.furni.201' },
], 'furni');
const TILE_W = 22;
const TILE_H = 11;
const GRID_RANGE = 4; // -4 … +4
const CX = GRID_RANGE * TILE_W + TILE_W / 2;
const CY = GRID_RANGE * TILE_H + TILE_H / 2;
const GRID_PX_W = (GRID_RANGE * 2 + 1) * TILE_W;
const GRID_PX_H = (GRID_RANGE * 2 + 1) * TILE_H;
type Tile = { x: number; y: number };
const tileIncluded = (tiles: Tile[], x: number, y: number) =>
tiles.some(t => t.x === x && t.y === y);
const tileLeft = (rx: number, ry: number) =>
CX + (rx - ry) * (TILE_W / 2) - TILE_W / 2;
const tileTop = (rx: number, ry: number) =>
CY + (rx + ry) * (TILE_H / 2) - TILE_H / 2;
interface GridProps {
selectedTiles: Tile[];
targetTile: Tile;
invert: boolean;
onSetTile: (x: number, y: number, selected: boolean) => void;
onMoveTarget: (x: number, y: number) => void;
targetPlacementMode: boolean;
}
const NeighborhoodGrid: FC<GridProps> = ({ selectedTiles, targetTile, invert, onSetTile, onMoveTarget, targetPlacementMode }) =>
{
const [ dragMode, setDragMode ] = useState<'add' | 'remove' | 'target' | null>(null);
const tiles: JSX.Element[] = [];
useEffect(() =>
{
const stopDragging = () => setDragMode(null);
window.addEventListener('mouseup', stopDragging);
return () => window.removeEventListener('mouseup', stopDragging);
}, []);
const beginTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isTarget: boolean, isSelected: boolean) =>
{
event.preventDefault();
if(targetPlacementMode)
{
setDragMode('target');
onMoveTarget(rx, ry);
return;
}
const nextMode = isSelected ? 'remove' : 'add';
setDragMode(nextMode);
onSetTile(rx, ry, nextMode === 'add');
};
const continueTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isTarget: boolean) =>
{
if(!(event.buttons & 1) || !dragMode) return;
if(dragMode === 'target')
{
onMoveTarget(rx, ry);
return;
}
onSetTile(rx, ry, dragMode === 'add');
};
for (let ry = -GRID_RANGE; ry <= GRID_RANGE; ry++)
{
for (let rx = -GRID_RANGE; rx <= GRID_RANGE; rx++)
{
const isTarget = rx === targetTile.x && ry === targetTile.y;
const isSelected = tileIncluded(selectedTiles, rx, ry);
const isActive = invert ? !isSelected : isSelected;
const left = tileLeft(rx, ry);
const top_ = tileTop(rx, ry);
const zIdx = rx + ry + GRID_RANGE * 2 + 10;
const bgColor = isActive
? '#3399ff'
: '#2a3042';
const borderColor = isTarget
? '#ffffff'
: isActive
? '#1166cc'
: '#1a2032';
const diamond: CSSProperties = {
position: 'absolute',
width: TILE_W,
height: TILE_H,
left,
top: top_,
clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
backgroundColor: bgColor,
cursor: 'pointer',
zIndex: zIdx,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: isTarget ? '#ffffff' : 'transparent',
fontSize: 10
};
const border: CSSProperties = {
position: 'absolute',
width: TILE_W + (isTarget ? 6 : 2),
height: TILE_H + (isTarget ? 6 : 2),
left: left - (isTarget ? 3 : 1),
top: top_ - (isTarget ? 3 : 1),
clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
backgroundColor: borderColor,
zIndex: zIdx - 1,
pointerEvents: 'none',
};
const targetOutline: CSSProperties = {
position: 'absolute',
width: TILE_W + 4,
height: TILE_H + 4,
left: left - 2,
top: top_ - 2,
zIndex: zIdx + 1,
pointerEvents: 'none',
overflow: 'visible'
};
tiles.push(
<div key={ `b-${ rx }-${ ry }` } style={ border } />,
isTarget && (
<svg key={ `o-${ rx }-${ ry }` } style={ targetOutline } viewBox={ `0 0 ${ TILE_W + 4 } ${ TILE_H + 4 }` }>
<polygon
points={ `${ (TILE_W + 4) / 2 },2 ${ TILE_W + 2 },${ (TILE_H + 4) / 2 } ${ (TILE_W + 4) / 2 },${ TILE_H + 2 } 2,${ (TILE_H + 4) / 2 }` }
fill="none"
stroke="#ffffff"
strokeWidth="1" />
</svg>
),
<div
key={ `t-${ rx }-${ ry }` }
style={ diamond }
title={ `(${ rx }, ${ ry })` }
onMouseDown={ event => beginTileDrag(event, rx, ry, isTarget, isSelected) }
onMouseEnter={ event => continueTileDrag(event, rx, ry, isTarget) } />,
);
}
}
return (
<div style={ { position: 'relative', width: GRID_PX_W, height: GRID_PX_H, flexShrink: 0 } } onContextMenu={ event => event.preventDefault() }>
{ tiles }
</div>
);
};
export const WiredSelectorFurniNeighborhoodView: FC<{}> = () =>
{
const [ selectedTiles, setSelectedTiles ] = useState<Tile[]>([]);
const [ filterExisting, setFilterExisting ] = useState(false);
const [ invert, setInvert ] = useState(false);
const [ sourceType, setSourceType ] = useState(SOURCE_USER_TRIGGER);
const [ targetTile, setTargetTile ] = useState<Tile>({ x: 0, y: 0 });
const [ targetPlacementMode, setTargetPlacementMode ] = useState(false);
const [ curX, setCurX ] = useState(0);
const [ curY, setCurY ] = useState(0);
const { trigger = null, furniIds = [], setIntParams } = useWired();
useEffect(() =>
{
GetRoomEngine().areaSelectionManager.clearHighlight();
GetRoomEngine().areaSelectionManager.deactivate();
}, []);
useEffect(() =>
{
if(!trigger) return;
const p = trigger.intData;
if(p.length >= 1) setSourceType(p[0]);
if(p.length >= 2) setFilterExisting(p[1] === 1);
if(p.length >= 3) setInvert(p[2] === 1);
if(p.length >= 5) setTargetTile({ x: p[3], y: p[4] });
else setTargetTile({ x: 0, y: 0 });
if(p.length >= 6)
{
const n = p[5];
const tiles: Tile[] = [];
for(let i = 0; i < n; i++)
{
const xi = 6 + i * 2;
if(xi + 1 < p.length) tiles.push({ x: p[xi], y: p[xi + 1] });
}
setSelectedTiles(tiles);
}
else
{
setSelectedTiles([]);
}
}, [ trigger ]);
const save = useCallback(() =>
{
const params: number[] = [
sourceType,
filterExisting ? 1 : 0,
invert ? 1 : 0,
targetTile.x,
targetTile.y,
selectedTiles.length,
...selectedTiles.flatMap(t => [ t.x, t.y ]),
];
setIntParams(params);
}, [ sourceType, filterExisting, invert, selectedTiles, targetTile.x, targetTile.y, setIntParams ]);
const setTileSelection = useCallback((x: number, y: number, selected: boolean) =>
{
setSelectedTiles(prev =>
{
const alreadySelected = tileIncluded(prev, x, y);
if(selected)
{
if(alreadySelected) return prev;
return [ ...prev, { x, y } ];
}
if(!alreadySelected) return prev;
return prev.filter(t => !(t.x === x && t.y === y));
});
}, []);
const moveTargetTile = useCallback((x: number, y: number) =>
{
setTargetTile({ x, y });
}, []);
const addTile = useCallback(() =>
{
if(!tileIncluded(selectedTiles, curX, curY))
setSelectedTiles(prev => [ ...prev, { x: curX, y: curY } ]);
}, [ curX, curY, selectedTiles ]);
const removeTile = useCallback(() =>
{
setSelectedTiles(prev => prev.filter(t => !(t.x === curX && t.y === curY)));
}, [ curX, curY ]);
const clearTiles = useCallback(() => setSelectedTiles([]), []);
const loadDefaultPattern = useCallback(() =>
{
const tiles: Tile[] = [];
for(let y = -2; y <= 2; y++)
{
for(let x = -2; x <= 2; x++)
{
if(x === 0 && y === 0) continue;
tiles.push({ x, y });
}
}
setSelectedTiles(tiles);
}, []);
const isUserGroup = sourceType <= SOURCE_USER_CLICKED;
const activeSources = isUserGroup ? USER_SOURCES : FURNI_SOURCES;
const groupOffset = isUserGroup ? 0 : SOURCE_FURNI_TRIGGER;
const groupIndex = sourceType - groupOffset;
const prevInGroup = () =>
setSourceType(groupOffset + (groupIndex - 1 + activeSources.length) % activeSources.length);
const nextInGroup = () =>
setSourceType(groupOffset + (groupIndex + 1) % activeSources.length);
const switchGroup = (toUser: boolean) =>
{
if(toUser === isUserGroup) return;
const newOffset = toUser ? 0 : SOURCE_FURNI_TRIGGER;
setSourceType(newOffset + groupIndex);
};
const requiresFurni = sourceType === SOURCE_FURNI_PICKED
? WiredFurniType.STUFF_SELECTION_OPTION_BY_ID
: WiredFurniType.STUFF_SELECTION_OPTION_NONE;
const pickedCount = furniIds.length;
const pickedLimit = trigger?.maximumItemSelectionCount ?? 20;
return (
<WiredSelectorBaseView hasSpecialInput={ true } requiresFurni={ requiresFurni } save={ save } hideDelay={ true } cardStyle={ { width: '400px' } }>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.neighborhood_selection') }</Text>
<div className="flex items-center gap-1">
<Button
variant={ targetPlacementMode ? 'success' : 'secondary' }
className="px-2 py-1"
onClick={ () => setTargetPlacementMode(value => !value) }
title="Sposta target">
<span aria-hidden className="relative inline-block h-[14px] w-[14px]">
<span className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-current" />
<span className="absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-current" />
<span className="absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-current" />
</span>
</Button>
<Button variant="success" className="px-2 py-1" onClick={ addTile } title={ LocalizeText('wiredfurni.tooltip.select.tile') }>
<FaPlus />
</Button>
<Button variant="danger" className="px-2 py-1" onClick={ removeTile } title={ LocalizeText('wiredfurni.tooltip.remove.tile') }>
<FaMinus />
</Button>
<Button variant="primary" className="px-2 py-1" onClick={ loadDefaultPattern } title={ LocalizeText('wiredfurni.tooltip.remove.5x5_tile') }>
<MdGridOn />
</Button>
<Button variant="secondary" className="px-2 py-1" onClick={ clearTiles } title={ LocalizeText('wiredfurni.tooltip.remove.clear_tile') }>
<FaTimes />
</Button>
</div>
<div className="flex justify-center">
<NeighborhoodGrid
selectedTiles={ selectedTiles }
targetTile={ targetTile }
invert={ invert }
onSetTile={ setTileSelection }
onMoveTarget={ moveTargetTile }
targetPlacementMode={ targetPlacementMode } />
</div>
<div className="flex items-center gap-2">
<Text small>X:</Text>
<input
type="number"
className="form-control form-control-sm"
style={ { width: 56 } }
value={ curX }
min={ -GRID_RANGE }
max={ GRID_RANGE }
onChange={ e => setCurX(parseInt(e.target.value) || 0) } />
<Text small>Y:</Text>
<input
type="number"
className="form-control form-control-sm"
style={ { width: 56 } }
value={ curY }
min={ -GRID_RANGE }
max={ GRID_RANGE }
onChange={ e => setCurY(parseInt(e.target.value) || 0) } />
</div>
<hr className="m-0 bg-dark" />
<Text bold>{ LocalizeText('wiredfurni.params.selector_options_selector') }</Text>
<label className="flex items-center gap-1">
<input
type="checkbox"
className="form-check-input"
checked={ filterExisting }
onChange={ e => setFilterExisting(e.target.checked) } />
<Text small>{ LocalizeText('wiredfurni.params.selector_option.0') }</Text>
</label>
<label className="flex items-center gap-1">
<input
type="checkbox"
className="form-check-input"
checked={ invert }
onChange={ e => setInvert(e.target.checked) } />
<Text small>{ LocalizeText('wiredfurni.params.selector_option.1') }</Text>
</label>
<hr className="m-0 bg-dark" />
<Text bold>{ LocalizeText('wiredfurni.params.sources.merged.title.neighborhood') }</Text>
<div className="flex gap-1">
<Button
fullWidth
variant={ isUserGroup ? 'primary' : 'secondary' }
onClick={ () => switchGroup(true) }>
{ LocalizeText('wiredfurni.params.furni_neighborhood.group.user') }
</Button>
<Button
fullWidth
variant={ !isUserGroup ? 'primary' : 'secondary' }
onClick={ () => switchGroup(false) }>
{ LocalizeText('wiredfurni.params.furni_neighborhood.group.furni') }
</Button>
</div>
<div className="flex items-center gap-2">
<Button variant="primary" className="px-2 py-1" onClick={ prevInGroup }>‹</Button>
<div className="flex flex-1 items-center justify-center">
<Text small>{ LocalizeText(activeSources[groupIndex].label) }</Text>
</div>
<Button variant="primary" className="px-2 py-1" onClick={ nextInGroup }>›</Button>
</div>
{ sourceType === SOURCE_FURNI_PICKED &&
<Text small className="text-center">
{ LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ pickedCount.toString(), pickedLimit.toString() ]) }
</Text> }
</div>
</WiredSelectorBaseView>
);
};
export const WiredSelectorFurniNeighborhoodView: FC<{}> = () => <WiredNeighborhoodSelectorView />;
src/components/wired/views/selectors/WiredSelectorUsersNeighborhoodView.tsx
+3 -453
View File
@@ -1,454 +1,4 @@
import { GetRoomEngine } from '@nitrots/nitro-renderer';
import { CSSProperties, FC, MouseEvent as ReactMouseEvent, useCallback, useEffect, useState } from 'react';
import { FaMinus, FaPlus, FaTimes } from 'react-icons/fa';
import { MdGridOn } from 'react-icons/md';
import { LocalizeText, WiredFurniType } from '../../../../api';
import { Button, Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { sortWiredSourceOptions } from '../WiredSourcesSelector';
import { WiredSelectorBaseView } from './WiredSelectorBaseView';
import { FC } from 'react';
import { WiredNeighborhoodSelectorView } from './WiredNeighborhoodSelectorView';
const SOURCE_USER_TRIGGER = 0;
const SOURCE_USER_SIGNAL = 1;
const SOURCE_USER_CLICKED = 2;
const SOURCE_FURNI_TRIGGER = 3;
const SOURCE_FURNI_PICKED = 4;
const SOURCE_FURNI_SIGNAL = 5;
const USER_SOURCES = sortWiredSourceOptions([
{ value: SOURCE_USER_TRIGGER, label: 'wiredfurni.params.sources.users.0' },
{ value: SOURCE_USER_SIGNAL, label: 'wiredfurni.params.sources.users.201' },
{ value: SOURCE_USER_CLICKED, label: 'wiredfurni.params.sources.users.11' },
], 'users');
const FURNI_SOURCES = sortWiredSourceOptions([
{ value: SOURCE_FURNI_TRIGGER, label: 'wiredfurni.params.sources.furni.0' },
{ value: SOURCE_FURNI_PICKED, label: 'wiredfurni.params.sources.furni.100' },
{ value: SOURCE_FURNI_SIGNAL, label: 'wiredfurni.params.sources.furni.201' },
], 'furni');
const TILE_W = 22;
const TILE_H = 11;
const GRID_RANGE = 4;
const CX = GRID_RANGE * TILE_W + TILE_W / 2;
const CY = GRID_RANGE * TILE_H + TILE_H / 2;
const GRID_PX_W = (GRID_RANGE * 2 + 1) * TILE_W;
const GRID_PX_H = (GRID_RANGE * 2 + 1) * TILE_H;
type Tile = { x: number; y: number };
const tileIncluded = (tiles: Tile[], x: number, y: number) =>
tiles.some(t => t.x === x && t.y === y);
const tileLeft = (rx: number, ry: number) =>
CX + (rx - ry) * (TILE_W / 2) - TILE_W / 2;
const tileTop = (rx: number, ry: number) =>
CY + (rx + ry) * (TILE_H / 2) - TILE_H / 2;
interface GridProps {
selectedTiles: Tile[];
targetTile: Tile;
invert: boolean;
onSetTile: (x: number, y: number, selected: boolean) => void;
onMoveTarget: (x: number, y: number) => void;
targetPlacementMode: boolean;
}
const NeighborhoodGrid: FC<GridProps> = ({ selectedTiles, targetTile, invert, onSetTile, onMoveTarget, targetPlacementMode }) =>
{
const [ dragMode, setDragMode ] = useState<'add' | 'remove' | 'target' | null>(null);
const tiles: JSX.Element[] = [];
useEffect(() =>
{
const stopDragging = () => setDragMode(null);
window.addEventListener('mouseup', stopDragging);
return () => window.removeEventListener('mouseup', stopDragging);
}, []);
const beginTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isTarget: boolean, isSelected: boolean) =>
{
event.preventDefault();
if(targetPlacementMode)
{
setDragMode('target');
onMoveTarget(rx, ry);
return;
}
const nextMode = isSelected ? 'remove' : 'add';
setDragMode(nextMode);
onSetTile(rx, ry, nextMode === 'add');
};
const continueTileDrag = (event: ReactMouseEvent<HTMLDivElement>, rx: number, ry: number, isTarget: boolean) =>
{
if(!(event.buttons & 1) || !dragMode) return;
if(dragMode === 'target')
{
onMoveTarget(rx, ry);
return;
}
onSetTile(rx, ry, dragMode === 'add');
};
for (let ry = -GRID_RANGE; ry <= GRID_RANGE; ry++)
{
for (let rx = -GRID_RANGE; rx <= GRID_RANGE; rx++)
{
const isTarget = rx === targetTile.x && ry === targetTile.y;
const isSelected = tileIncluded(selectedTiles, rx, ry);
const isActive = invert ? !isSelected : isSelected;
const left = tileLeft(rx, ry);
const top_ = tileTop(rx, ry);
const zIdx = rx + ry + GRID_RANGE * 2 + 10;
const bgColor = isActive
? '#3399ff'
: '#2a3042';
const borderColor = isTarget
? '#ffffff'
: isActive
? '#1166cc'
: '#1a2032';
const diamond: CSSProperties = {
position: 'absolute',
width: TILE_W,
height: TILE_H,
left,
top: top_,
clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
backgroundColor: bgColor,
cursor: 'pointer',
zIndex: zIdx,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: isTarget ? '#ffffff' : 'transparent',
fontSize: 10
};
const border: CSSProperties = {
position: 'absolute',
width: TILE_W + (isTarget ? 6 : 2),
height: TILE_H + (isTarget ? 6 : 2),
left: left - (isTarget ? 3 : 1),
top: top_ - (isTarget ? 3 : 1),
clipPath: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
backgroundColor: borderColor,
zIndex: zIdx - 1,
pointerEvents: 'none',
};
const targetOutline: CSSProperties = {
position: 'absolute',
width: TILE_W + 4,
height: TILE_H + 4,
left: left - 2,
top: top_ - 2,
zIndex: zIdx + 1,
pointerEvents: 'none',
overflow: 'visible'
};
tiles.push(
<div key={ `b-${ rx }-${ ry }` } style={ border } />,
isTarget && (
<svg key={ `o-${ rx }-${ ry }` } style={ targetOutline } viewBox={ `0 0 ${ TILE_W + 4 } ${ TILE_H + 4 }` }>
<polygon
points={ `${ (TILE_W + 4) / 2 },2 ${ TILE_W + 2 },${ (TILE_H + 4) / 2 } ${ (TILE_W + 4) / 2 },${ TILE_H + 2 } 2,${ (TILE_H + 4) / 2 }` }
fill="none"
stroke="#ffffff"
strokeWidth="1" />
</svg>
),
<div
key={ `t-${ rx }-${ ry }` }
style={ diamond }
title={ `(${ rx }, ${ ry })` }
onMouseDown={ event => beginTileDrag(event, rx, ry, isTarget, isSelected) }
onMouseEnter={ event => continueTileDrag(event, rx, ry, isTarget) } />,
);
}
}
return (
<div style={ { position: 'relative', width: GRID_PX_W, height: GRID_PX_H, flexShrink: 0 } } onContextMenu={ event => event.preventDefault() }>
{ tiles }
</div>
);
};
export const WiredSelectorUsersNeighborhoodView: FC<{}> = () =>
{
const [ selectedTiles, setSelectedTiles ] = useState<Tile[]>([]);
const [ filterExisting, setFilterExisting ] = useState(false);
const [ invert, setInvert ] = useState(false);
const [ sourceType, setSourceType ] = useState(SOURCE_USER_TRIGGER);
const [ targetTile, setTargetTile ] = useState<Tile>({ x: 0, y: 0 });
const [ targetPlacementMode, setTargetPlacementMode ] = useState(false);
const [ curX, setCurX ] = useState(0);
const [ curY, setCurY ] = useState(0);
const { trigger = null, furniIds = [], setIntParams } = useWired();
useEffect(() =>
{
GetRoomEngine().areaSelectionManager.clearHighlight();
GetRoomEngine().areaSelectionManager.deactivate();
}, []);
useEffect(() =>
{
if(!trigger) return;
const p = trigger.intData;
if(p.length >= 1) setSourceType(p[0]);
if(p.length >= 2) setFilterExisting(p[1] === 1);
if(p.length >= 3) setInvert(p[2] === 1);
if(p.length >= 5) setTargetTile({ x: p[3], y: p[4] });
else setTargetTile({ x: 0, y: 0 });
if(p.length >= 6)
{
const n = p[5];
const tiles: Tile[] = [];
for(let i = 0; i < n; i++)
{
const xi = 6 + i * 2;
if(xi + 1 < p.length) tiles.push({ x: p[xi], y: p[xi + 1] });
}
setSelectedTiles(tiles);
}
else
{
setSelectedTiles([]);
}
}, [ trigger ]);
const save = useCallback(() =>
{
const params: number[] = [
sourceType,
filterExisting ? 1 : 0,
invert ? 1 : 0,
targetTile.x,
targetTile.y,
selectedTiles.length,
...selectedTiles.flatMap(t => [ t.x, t.y ]),
];
setIntParams(params);
}, [ sourceType, filterExisting, invert, selectedTiles, targetTile.x, targetTile.y, setIntParams ]);
const setTileSelection = useCallback((x: number, y: number, selected: boolean) =>
{
setSelectedTiles(prev =>
{
const alreadySelected = tileIncluded(prev, x, y);
if(selected)
{
if(alreadySelected) return prev;
return [ ...prev, { x, y } ];
}
if(!alreadySelected) return prev;
return prev.filter(t => !(t.x === x && t.y === y));
});
}, []);
const moveTargetTile = useCallback((x: number, y: number) =>
{
setTargetTile({ x, y });
}, []);
const addTile = useCallback(() =>
{
if(!tileIncluded(selectedTiles, curX, curY))
setSelectedTiles(prev => [ ...prev, { x: curX, y: curY } ]);
}, [ curX, curY, selectedTiles ]);
const removeTile = useCallback(() =>
{
setSelectedTiles(prev => prev.filter(t => !(t.x === curX && t.y === curY)));
}, [ curX, curY ]);
const clearTiles = useCallback(() => setSelectedTiles([]), []);
const loadDefaultPattern = useCallback(() =>
{
const tiles: Tile[] = [];
for(let y = -2; y <= 2; y++)
{
for(let x = -2; x <= 2; x++)
{
if(x === 0 && y === 0) continue;
tiles.push({ x, y });
}
}
setSelectedTiles(tiles);
}, []);
const isUserGroup = sourceType <= SOURCE_USER_CLICKED;
const activeSources = isUserGroup ? USER_SOURCES : FURNI_SOURCES;
const groupOffset = isUserGroup ? 0 : SOURCE_FURNI_TRIGGER;
const groupIndex = sourceType - groupOffset;
const prevSource = () =>
setSourceType(groupOffset + ((groupIndex - 1 + activeSources.length) % activeSources.length));
const nextSource = () =>
setSourceType(groupOffset + ((groupIndex + 1) % activeSources.length));
const switchGroup = (toUser: boolean) =>
{
if(toUser === isUserGroup) return;
const newOffset = toUser ? 0 : SOURCE_FURNI_TRIGGER;
setSourceType(newOffset + groupIndex);
};
const requiresFurni = sourceType === SOURCE_FURNI_PICKED
? WiredFurniType.STUFF_SELECTION_OPTION_BY_ID
: WiredFurniType.STUFF_SELECTION_OPTION_NONE;
const pickedCount = furniIds.length;
const pickedLimit = trigger?.maximumItemSelectionCount ?? 20;
return (
<WiredSelectorBaseView hasSpecialInput={ true } requiresFurni={ requiresFurni } save={ save } hideDelay={ true } cardStyle={ { width: '400px' } }>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.neighborhood_selection') }</Text>
<div className="flex items-center gap-1">
<Button
variant={ targetPlacementMode ? 'success' : 'secondary' }
className="px-2 py-1"
onClick={ () => setTargetPlacementMode(value => !value) }
title="Sposta target">
<span aria-hidden className="relative inline-block h-[14px] w-[14px]">
<span className="absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-current" />
<span className="absolute left-0 top-1/2 h-px w-full -translate-y-1/2 bg-current" />
<span className="absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-1/2 rounded-full border border-current" />
</span>
</Button>
<Button variant="success" className="px-2 py-1" onClick={ addTile } title={ LocalizeText('wiredfurni.tooltip.select.tile') }>
<FaPlus />
</Button>
<Button variant="danger" className="px-2 py-1" onClick={ removeTile } title={ LocalizeText('wiredfurni.tooltip.remove.tile') }>
<FaMinus />
</Button>
<Button variant="primary" className="px-2 py-1" onClick={ loadDefaultPattern } title={ LocalizeText('wiredfurni.tooltip.remove.5x5_tile') }>
<MdGridOn />
</Button>
<Button variant="secondary" className="px-2 py-1" onClick={ clearTiles } title={ LocalizeText('wiredfurni.tooltip.remove.clear_tile') }>
<FaTimes />
</Button>
</div>
<div className="flex justify-center">
<NeighborhoodGrid
selectedTiles={ selectedTiles }
targetTile={ targetTile }
invert={ invert }
onSetTile={ setTileSelection }
onMoveTarget={ moveTargetTile }
targetPlacementMode={ targetPlacementMode } />
</div>
<div className="flex items-center gap-2">
<Text small>X:</Text>
<input
type="number"
className="form-control form-control-sm"
style={ { width: 56 } }
value={ curX }
min={ -GRID_RANGE }
max={ GRID_RANGE }
onChange={ e => setCurX(parseInt(e.target.value) || 0) } />
<Text small>Y:</Text>
<input
type="number"
className="form-control form-control-sm"
style={ { width: 56 } }
value={ curY }
min={ -GRID_RANGE }
max={ GRID_RANGE }
onChange={ e => setCurY(parseInt(e.target.value) || 0) } />
</div>
<hr className="m-0 bg-dark" />
<Text bold>{ LocalizeText('wiredfurni.params.selector_options_selector') }</Text>
<label className="flex items-center gap-1">
<input
type="checkbox"
className="form-check-input"
checked={ filterExisting }
onChange={ e => setFilterExisting(e.target.checked) } />
<Text small>{ LocalizeText('wiredfurni.params.selector_option.0') }</Text>
</label>
<label className="flex items-center gap-1">
<input
type="checkbox"
className="form-check-input"
checked={ invert }
onChange={ e => setInvert(e.target.checked) } />
<Text small>{ LocalizeText('wiredfurni.params.selector_option.1') }</Text>
</label>
<hr className="m-0 bg-dark" />
<Text bold>{ LocalizeText('wiredfurni.params.sources.merged.title.neighborhood') }</Text>
<div className="flex gap-1">
<Button
fullWidth
variant={ isUserGroup ? 'primary' : 'secondary' }
onClick={ () => switchGroup(true) }>
{ LocalizeText('wiredfurni.params.furni_neighborhood.group.user') }
</Button>
<Button
fullWidth
variant={ !isUserGroup ? 'primary' : 'secondary' }
onClick={ () => switchGroup(false) }>
{ LocalizeText('wiredfurni.params.furni_neighborhood.group.furni') }
</Button>
</div>
<div className="flex items-center gap-2">
<Button variant="primary" className="px-2 py-1" onClick={ prevSource }>&#8249;</Button>
<div className="flex flex-1 items-center justify-center">
<Text small>{ LocalizeText(activeSources[groupIndex].label) }</Text>
</div>
<Button variant="primary" className="px-2 py-1" onClick={ nextSource }>&#8250;</Button>
</div>
{ sourceType === SOURCE_FURNI_PICKED &&
<Text small className="text-center">
{ LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ pickedCount.toString(), pickedLimit.toString() ]) }
</Text> }
</div>
</WiredSelectorBaseView>
);
};
export const WiredSelectorUsersNeighborhoodView: FC<{}> = () => <WiredNeighborhoodSelectorView />;