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 source selection flows

Browse Source
This commit is contained in:
Lorenzune
2026-03-25 03:26:27 +01:00
parent 6472b1cc27
commit 56a0be64d9
35 changed files with 4137 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/wired/views/WiredBaseView.tsx
+48 -20
View File
@@ -14,14 +14,16 @@ export interface WiredBaseViewProps
validate?: () => boolean;
cardStyle?: CSSProperties;
footer?: ReactNode;
footerCollapsible?: boolean;
selectionPreview?: ReactNode;
}
export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
{
const { wiredType = '', requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, children = null, hasSpecialInput = false, cardStyle = undefined, footer = null } = props;
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 [ wiredDescription, setWiredDescription ] = useState<string>(null);
const [ needsSave, setNeedsSave ] = useState<boolean>(false);
const [ showFooter, setShowFooter ] = useState(false);
const { trigger = null, setTrigger = null, setIntParams = null, setStringParam = null, setFurniIds = null, setAllowsFurni = null, saveWired = null } = useWired();
const clearRoomAreaSelection = () =>
@@ -59,6 +61,8 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
{
if(!trigger) return;
setShowFooter(false);
WiredSelectionVisualizer.clearAllSelectionShaders();
const spriteId = (trigger.spriteId || -1);
@@ -67,12 +71,10 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
if(!furniData)
{
setWiredName(('NAME: ' + spriteId));
setWiredDescription(('NAME: ' + spriteId));
}
else
{
setWiredName(furniData.name);
setWiredDescription(furniData.description);
}
if(hasSpecialInput)
@@ -115,36 +117,62 @@ export const WiredBaseView: FC<PropsWithChildren<WiredBaseViewProps>> = props =>
if(resolvedCardStyle.width !== undefined)
{
resolvedCardStyle.minWidth = resolvedCardStyle.width;
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)';
return (
<NitroCardView className="nitro-wired" theme="primary-slim" uniqueKey="nitro-wired" isResizable={ false } style={ resolvedCardStyle }>
<NitroCardHeaderView headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ onClose } />
<NitroCardContentView>
<div className="flex flex-col gap-1">
<div className="flex items-center gap-1">
<NitroCardHeaderView classNames={ [ 'nitro-wired__header' ] } headerText={ LocalizeText('wiredfurni.title') } onCloseClick={ onClose } />
<NitroCardContentView classNames={ [ 'nitro-wired__content' ] } gap={ 2 }>
<div className="nitro-wired__section nitro-wired__summary">
<div className="flex items-center justify-center gap-1">
<i className={ `icon icon-wired-${ wiredType }` } />
<Text bold>{ wiredName }</Text>
<Text bold className="nitro-wired__summary-title">{ wiredName }</Text>
</div>
<Text small>{ wiredDescription }</Text>
</div>
{ !!children && <hr className="m-0 bg-dark" /> }
{ children }
{ !!children && <div className="nitro-wired__divider" /> }
{ !!children && <div className="nitro-wired__section nitro-wired__section--body">{ children }</div> }
{ (requiresFurni > WiredFurniType.STUFF_SELECTION_OPTION_NONE) &&
<>
<hr className="m-0 bg-dark" />
<WiredFurniSelectorView />
<div className="nitro-wired__divider" />
<div className="nitro-wired__section nitro-wired__section--selector">
{ selectionPreview || <WiredFurniSelectorView /> }
</div>
</> }
{ footer &&
<>
<hr className="m-0 bg-dark" />
{ 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="flex items-center gap-1">
<Button fullWidth variant="success" onClick={ onSave }>{ LocalizeText('wiredfurni.ready') }</Button>
<Button fullWidth variant="secondary" onClick={ onClose }>{ LocalizeText('cancel') }</Button>
<div className="nitro-wired__divider" />
<div className="flex items-center gap-1 nitro-wired__actions">
<Button 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>
</NitroCardContentView>
</NitroCardView>
src/components/wired/views/WiredFurniSelectionSourceRow.tsx
+66
View File
@@ -0,0 +1,66 @@
import { FC } from 'react';
import { FaChevronLeft, FaChevronRight, FaMousePointer } from 'react-icons/fa';
import { LocalizeText } from '../../../api';
import { Button, Text } from '../../../common';
import { WiredSourceOption } from './WiredSourcesSelector';
interface WiredFurniSelectionSourceRowProps
{
title: string;
titleIsLiteral?: boolean;
options: WiredSourceOption[];
value: number;
selectionKind: 'primary' | 'secondary';
selectionActive: boolean;
selectionCount: number;
selectionLimit: number;
selectionEnabledValues: number[];
showSelectionToggle?: boolean;
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 currentIndex = Math.max(0, options.findIndex(option => (option.value === value)));
const currentOption = options[currentIndex] ?? options[0];
const canActivateSelection = !!onSelectionActivate && selectionEnabledValues.includes(currentOption?.value);
const shouldShowCount = selectionEnabledValues.includes(currentOption?.value);
const countText = selectionLimit ? `[${ selectionCount }/${ selectionLimit }]` : `[${ selectionCount }]`;
const labelText = currentOption ? LocalizeText(currentOption.label) : '';
const displayText = shouldShowCount ? `${ labelText } ${ countText }` : labelText;
const resolvedTitle = titleIsLiteral ? title : LocalizeText(title);
const cycleValue = (direction: -1 | 1) =>
{
if(!options.length || !onChange) return;
const nextIndex = (currentIndex + direction + options.length) % options.length;
onChange(options[nextIndex].value);
};
return (
<div className="nitro-wired__source-row">
<div className="flex items-center justify-between gap-2">
<Text>{ resolvedTitle }</Text>
{ showSelectionToggle &&
<button
type="button"
className={ `nitro-wired__selection-toggle nitro-wired__selection-toggle--${ selectionKind } ${ selectionActive ? 'is-active' : '' }` }
disabled={ !canActivateSelection }
onClick={ () => onSelectionActivate && onSelectionActivate() }>
<FaMousePointer />
</button> }
</div>
<div className="flex items-center gap-1">
<Button variant="primary" classNames={ [ 'nitro-wired__picker-button' ] } className="px-2 py-1" onClick={ () => cycleValue(-1) }><FaChevronLeft /></Button>
<div className="flex min-w-0 flex-1 items-center justify-center nitro-wired__picker-label">
<Text small className="text-center">{ displayText }</Text>
</div>
<Button variant="primary" classNames={ [ 'nitro-wired__picker-button' ] } className="px-2 py-1" onClick={ () => cycleValue(1) }><FaChevronRight /></Button>
</div>
</div>
);
};
src/components/wired/views/WiredFurniSelectorView.tsx
+3 -3
View File
@@ -8,9 +8,9 @@ export const WiredFurniSelectorView: FC<{}> = props =>
const { trigger = null, furniIds = [] } = useWired();
return (
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }</Text>
<Text small>{ LocalizeText('wiredfurni.pickfurnis.desc') }</Text>
<div className="flex flex-col gap-1 nitro-wired__furni-selector">
<Text bold className="nitro-wired__furni-selector-title">{ LocalizeText('wiredfurni.pickfurnis.caption', [ 'count', 'limit' ], [ furniIds.length.toString(), trigger.maximumItemSelectionCount.toString() ]) }</Text>
<Text small className="nitro-wired__furni-selector-description">{ LocalizeText('wiredfurni.pickfurnis.desc') }</Text>
</div>
);
};
src/components/wired/views/WiredSourcesSelector.tsx
+198 -24
View File
@@ -1,13 +1,15 @@
import { FC } from 'react';
import { FurnitureFloorUpdateEvent, GetRoomEngine, GetSessionDataManager, RoomEngineObjectEvent, RoomObjectCategory, RoomObjectVariable, Triggerable } from '@nitrots/nitro-renderer';
import { FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import { LocalizeText } from '../../../api';
import { GetRoomSession, LocalizeText } from '../../../api';
import { Button, Text } from '../../../common';
import { useMessageEvent, useNitroEvent, useWired } from '../../../hooks';
export const FURNI_SOURCES = [
{ value: 0, label: 'wiredfurni.params.sources.furni.0' },
{ value: 100, label: 'wiredfurni.params.sources.furni.100' },
{ value: 200, label: 'wiredfurni.params.sources.furni.200' },
{ value: 201, label: 'wiredfurni.params.sources.furni.201' }
{ value: 201, label: 'wiredfurni.params.sources.furni.201' },
{ value: 0, label: 'wiredfurni.params.sources.furni.0' }
];
export const USER_SOURCES = [
@@ -16,6 +18,9 @@ export const USER_SOURCES = [
{ value: 201, label: 'wiredfurni.params.sources.users.201' }
];
export const CLICKED_USER_SOURCE_VALUE = 11;
export const CLICKED_USER_SOURCE = { value: CLICKED_USER_SOURCE_VALUE, label: 'wiredfurni.params.sources.users.11' };
export const BOT_SOURCES = [
{ value: 0, label: 'wiredfurni.params.sources.users.0' },
{ value: 100, label: 'wiredfurni.params.sources.users.100' },
@@ -29,6 +34,45 @@ export interface WiredSourceOption
label: string;
}
const FURNI_SOURCE_LABEL_ORDER = [
'wiredfurni.params.sources.furni.100',
'wiredfurni.params.sources.furni.101',
'wiredfurni.params.sources.furni.200',
'wiredfurni.params.sources.furni.201',
'wiredfurni.params.sources.furni.0',
'wiredfurni.params.sources.furni.900'
];
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.900'
];
const getSourceSortIndex = (label: string, category: 'furni' | 'users') =>
{
const order = (category === 'furni') ? FURNI_SOURCE_LABEL_ORDER : USER_SOURCE_LABEL_ORDER;
const index = order.indexOf(label);
return (index >= 0) ? index : (order.length + 1);
};
export const sortWiredSourceOptions = (options: WiredSourceOption[], category: 'furni' | 'users') =>
{
return [ ...options ].sort((left, right) =>
{
const orderDifference = getSourceSortIndex(left.label, category) - getSourceSortIndex(right.label, category);
if(orderDifference !== 0) return orderDifference;
return left.value - right.value;
});
};
interface WiredSourcesSelectorProps
{
showFurni?: boolean;
@@ -39,10 +83,122 @@ interface WiredSourcesSelectorProps
usersTitle?: string;
furniSources?: WiredSourceOption[];
userSources?: WiredSourceOption[];
allowClickedUserSource?: boolean;
furniDetail?: ReactNode;
userDetail?: ReactNode;
onChangeFurni?: (source: number) => void;
onChangeUsers?: (source: number) => void;
}
const BOT_SOURCE_TITLE = 'wiredfurni.params.sources.users.title.bots';
const CLICK_USER_TRIGGER_NAME = 'wf_trg_click_user';
const isClickUserTriggerName = (value?: string) =>
{
if(!value) return false;
return value.toLowerCase().startsWith(CLICK_USER_TRIGGER_NAME);
};
const hasClickUserTriggerInStack = (trigger: Triggerable) =>
{
if(!trigger) return false;
const roomSession = GetRoomSession();
const roomId = roomSession?.roomId ?? GetRoomEngine().activeRoomId;
if(roomId == null || roomId < 0) return false;
const triggerObject = GetRoomEngine().getRoomObject(roomId, trigger.id, RoomObjectCategory.FLOOR);
if(!triggerObject) return false;
const triggerLocation = triggerObject.getLocation();
const roomObjects = GetRoomEngine().getRoomObjects(roomId, RoomObjectCategory.FLOOR) || [];
for(const roomObject of roomObjects)
{
if(!roomObject) continue;
const location = roomObject.getLocation();
if(!location || location.x !== triggerLocation.x || location.y !== triggerLocation.y) continue;
const typeId = roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_TYPE_ID);
const furniData = GetSessionDataManager().getFloorItemData(typeId);
if(isClickUserTriggerName(furniData?.className) || isClickUserTriggerName(furniData?.fullName) || isClickUserTriggerName(furniData?.name)) return true;
}
return false;
};
export const getAvailableUserSources = (trigger: Triggerable, userSources: WiredSourceOption[], currentUserSource: number, usersTitle = 'wiredfurni.params.sources.users.title', allowClickedUserSource = true) =>
{
if(!allowClickedUserSource || usersTitle === BOT_SOURCE_TITLE) return userSources;
if(userSources.some(option => option.value === CLICKED_USER_SOURCE_VALUE)) return userSources;
if(!hasClickUserTriggerInStack(trigger)) return userSources;
const triggerIndex = userSources.findIndex(option => option.value === 0);
if(triggerIndex === -1) return [ ...userSources, CLICKED_USER_SOURCE ];
return [
...userSources.slice(0, triggerIndex + 1),
CLICKED_USER_SOURCE,
...userSources.slice(triggerIndex + 1)
];
};
export const useAvailableUserSources = (trigger: Triggerable, userSources: WiredSourceOption[] = USER_SOURCES, usersTitle = 'wiredfurni.params.sources.users.title', allowClickedUserSource = true) =>
{
const [ hasClickUserTrigger, setHasClickUserTrigger ] = useState(false);
const refreshStackSources = useCallback(() =>
{
setHasClickUserTrigger(hasClickUserTriggerInStack(trigger));
}, [ trigger ]);
useEffect(() =>
{
refreshStackSources();
if(!trigger) return;
const intervalId = window.setInterval(refreshStackSources, 100);
return () => window.clearInterval(intervalId);
}, [ refreshStackSources, trigger ]);
useNitroEvent<RoomEngineObjectEvent>([
RoomEngineObjectEvent.ADDED,
RoomEngineObjectEvent.REMOVED,
RoomEngineObjectEvent.PLACED,
RoomEngineObjectEvent.CONTENT_UPDATED
], event =>
{
if(!trigger) return;
if(event.category !== RoomObjectCategory.FLOOR) return;
const roomSession = GetRoomSession();
const roomId = roomSession?.roomId ?? GetRoomEngine().activeRoomId;
if(event.roomId !== roomId) return;
refreshStackSources();
}, !!trigger);
useMessageEvent<FurnitureFloorUpdateEvent>(FurnitureFloorUpdateEvent, () =>
{
if(!trigger) return;
refreshStackSources();
});
return useMemo(() => getAvailableUserSources(trigger, userSources, 0, usersTitle, allowClickedUserSource && hasClickUserTrigger), [ allowClickedUserSource, hasClickUserTrigger, trigger, userSources, usersTitle ]);
};
export const WiredSourcesSelector: FC<WiredSourcesSelectorProps> = props =>
{
const {
@@ -54,35 +210,51 @@ export const WiredSourcesSelector: FC<WiredSourcesSelectorProps> = props =>
usersTitle = 'wiredfurni.params.sources.users.title',
furniSources = FURNI_SOURCES,
userSources = USER_SOURCES,
allowClickedUserSource = true,
furniDetail = null,
userDetail = null,
onChangeFurni = null,
onChangeUsers = null
} = 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 furniIndex = Math.max(0, furniSources.findIndex(s => s.value === furniSource));
const userIndex = Math.max(0, userSources.findIndex(s => s.value === userSource));
useEffect(() =>
{
if(!showUsers || !onChangeUsers) return;
if(userSource !== CLICKED_USER_SOURCE_VALUE) return;
if(availableUserSources.some(source => source.value === CLICKED_USER_SOURCE_VALUE)) return;
onChangeUsers(0);
}, [ availableUserSources, onChangeUsers, showUsers, userSource ]);
const furniIndex = Math.max(0, orderedFurniSources.findIndex(s => s.value === furniSource));
const userIndex = Math.max(0, orderedUserSources.findIndex(s => s.value === userSource));
const prevFurni = () =>
{
const next = (furniIndex - 1 + furniSources.length) % furniSources.length;
onChangeFurni && onChangeFurni(furniSources[next].value);
const next = (furniIndex - 1 + orderedFurniSources.length) % orderedFurniSources.length;
onChangeFurni && onChangeFurni(orderedFurniSources[next].value);
};
const nextFurni = () =>
{
const next = (furniIndex + 1) % furniSources.length;
onChangeFurni && onChangeFurni(furniSources[next].value);
const next = (furniIndex + 1) % orderedFurniSources.length;
onChangeFurni && onChangeFurni(orderedFurniSources[next].value);
};
const prevUsers = () =>
{
const next = (userIndex - 1 + userSources.length) % userSources.length;
onChangeUsers && onChangeUsers(userSources[next].value);
const next = (userIndex - 1 + orderedUserSources.length) % orderedUserSources.length;
onChangeUsers && onChangeUsers(orderedUserSources[next].value);
};
const nextUsers = () =>
{
const next = (userIndex + 1) % userSources.length;
onChangeUsers && onChangeUsers(userSources[next].value);
const next = (userIndex + 1) % orderedUserSources.length;
onChangeUsers && onChangeUsers(orderedUserSources[next].value);
};
if(!showFurni && !showUsers) return null;
@@ -92,13 +264,14 @@ export const WiredSourcesSelector: FC<WiredSourcesSelectorProps> = props =>
{ showFurni &&
<>
<Text bold>{ LocalizeText(furniTitle) }</Text>
<div className="flex items-center gap-2">
<Button variant="primary" className="px-2 py-1" onClick={ prevFurni }><FaChevronLeft /></Button>
<div className="flex flex-1 items-center justify-center">
<Text small>{ LocalizeText(furniSources[furniIndex].label) }</Text>
<div className="flex items-center gap-1">
<Button variant="primary" classNames={ [ 'nitro-wired__picker-button' ] } className="px-2 py-1" onClick={ prevFurni }><FaChevronLeft /></Button>
<div className="flex min-w-0 flex-1 items-center justify-center nitro-wired__picker-label">
<Text small className="text-center">{ LocalizeText(orderedFurniSources[furniIndex].label) }</Text>
</div>
<Button variant="primary" className="px-2 py-1" onClick={ nextFurni }><FaChevronRight /></Button>
<Button variant="primary" classNames={ [ 'nitro-wired__picker-button' ] } className="px-2 py-1" onClick={ nextFurni }><FaChevronRight /></Button>
</div>
{ furniDetail && <div className="nitro-wired__source-detail">{ furniDetail }</div> }
</> }
{ showFurni && showUsers && <hr className="m-0 bg-dark" /> }
@@ -106,13 +279,14 @@ export const WiredSourcesSelector: FC<WiredSourcesSelectorProps> = props =>
{ showUsers &&
<>
<Text bold>{ LocalizeText(usersTitle) }</Text>
<div className="flex items-center gap-2">
<Button variant="primary" className="px-2 py-1" onClick={ prevUsers }><FaChevronLeft /></Button>
<div className="flex flex-1 items-center justify-center">
<Text small>{ LocalizeText(userSources[userIndex].label) }</Text>
<div className="flex items-center gap-1">
<Button variant="primary" classNames={ [ 'nitro-wired__picker-button' ] } className="px-2 py-1" onClick={ prevUsers }><FaChevronLeft /></Button>
<div className="flex min-w-0 flex-1 items-center justify-center nitro-wired__picker-label">
<Text small className="text-center">{ LocalizeText(orderedUserSources[userIndex].label) }</Text>
</div>
<Button variant="primary" className="px-2 py-1" onClick={ nextUsers }><FaChevronRight /></Button>
<Button variant="primary" classNames={ [ 'nitro-wired__picker-button' ] } className="px-2 py-1" onClick={ nextUsers }><FaChevronRight /></Button>
</div>
{ userDetail && <div className="nitro-wired__source-detail">{ userDetail }</div> }
</> }
</div>
);
src/components/wired/views/actions/WiredActionBaseView.tsx
+6 -4
View File
@@ -14,11 +14,13 @@ export interface WiredActionBaseViewProps
cardStyle?: CSSProperties;
hideDelay?: boolean;
footer?: ReactNode;
footerCollapsible?: boolean;
selectionPreview?: ReactNode;
}
export const WiredActionBaseView: FC<PropsWithChildren<WiredActionBaseViewProps>> = props =>
{
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, hasSpecialInput = false, children = null, cardStyle = undefined, hideDelay = false, footer = null } = props;
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, hasSpecialInput = false, children = null, cardStyle = undefined, hideDelay = false, footer = null, footerCollapsible = true, selectionPreview = null } = props;
const { trigger = null, actionDelay = 0, setActionDelay = null } = useWired();
useEffect(() =>
@@ -27,10 +29,10 @@ export const WiredActionBaseView: FC<PropsWithChildren<WiredActionBaseViewProps>
}, [ trigger, setActionDelay ]);
return (
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } validate={ validate } wiredType="action" cardStyle={ cardStyle } footer={ footer }>
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } validate={ validate } wiredType="action" cardStyle={ cardStyle } footer={ footer } footerCollapsible={ footerCollapsible } selectionPreview={ selectionPreview }>
{ children }
{ !hideDelay && !!children && <hr className="m-0 bg-dark" /> }
{ !hideDelay && <div className="flex flex-col">
{ !hideDelay && !!children && <div className="nitro-wired__divider" /> }
{ !hideDelay && <div className="flex flex-col nitro-wired__section nitro-wired__section--delay">
<Text bold>{ LocalizeText('wiredfurni.params.delay', [ 'seconds' ], [ GetWiredTimeLocale(actionDelay) ]) }</Text>
<Slider
max={ 20 }
src/components/wired/views/actions/WiredActionBotGiveHandItemView.tsx
+3 -3
View File
@@ -4,7 +4,7 @@ import { Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { NitroInput } from '../../../../layout';
import { WiredActionBaseView } from './WiredActionBaseView';
import { WiredSourceOption, WiredSourcesSelector } from '../WiredSourcesSelector';
import { CLICKED_USER_SOURCE_VALUE, WiredSourceOption, WiredSourcesSelector } from '../WiredSourcesSelector';
import { WiredHandItemField } from '../WiredHandItemField';
const USER_SOURCE_OPTIONS: WiredSourceOption[] = [
@@ -20,7 +20,7 @@ const BOT_SOURCE_OPTIONS: WiredSourceOption[] = [
{ value: 201, label: 'wiredfurni.params.sources.users.201' }
];
const normalizeUserSource = (value: number) => (USER_SOURCE_OPTIONS.some(option => (option.value === value)) ? value : 0);
const normalizeUserSource = (value: number) => ((value === CLICKED_USER_SOURCE_VALUE) || USER_SOURCE_OPTIONS.some(option => (option.value === value)) ? value : 0);
const normalizeBotSource = (value: number, hasBotName = false) => (BOT_SOURCE_OPTIONS.some(option => (option.value === value)) ? value : (hasBotName ? 100 : 0));
export const WiredActionBotGiveHandItemView: FC<{}> = props =>
@@ -56,7 +56,7 @@ export const WiredActionBotGiveHandItemView: FC<{}> = props =>
<div className="flex flex-col gap-2">
<WiredSourcesSelector showUsers={ true } userSource={ userSource } userSources={ USER_SOURCE_OPTIONS } onChangeUsers={ setUserSource } />
<hr className="m-0 bg-dark" />
<WiredSourcesSelector showUsers={ true } userSource={ botSource } userSources={ BOT_SOURCE_OPTIONS } usersTitle="wiredfurni.params.sources.users.title.bots" onChangeUsers={ value => setBotSource(normalizeBotSource(value, (botName.length > 0))) } />
<WiredSourcesSelector showUsers={ true } userSource={ botSource } userSources={ BOT_SOURCE_OPTIONS } usersTitle="wiredfurni.params.sources.users.title.bots" allowClickedUserSource={ false } onChangeUsers={ value => setBotSource(normalizeBotSource(value, (botName.length > 0))) } />
</div>
}>
<div className="form-check">
src/components/wired/views/actions/WiredActionFurniToFurniView.tsx
+30 -47
View File
@@ -1,8 +1,8 @@
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../../api';
import { Button, Text } from '../../../../common';
import { WiredFurniType, WiredSelectionVisualizer } from '../../../../api';
import { useWired } from '../../../../hooks';
import { WiredSourcesSelector, FURNI_SOURCES, WiredSourceOption } from '../WiredSourcesSelector';
import { WiredFurniSelectionSourceRow } from '../WiredFurniSelectionSourceRow';
import { FURNI_SOURCES, sortWiredSourceOptions, WiredSourceOption } from '../WiredSourcesSelector';
import { WiredActionBaseView } from './WiredActionBaseView';
const SOURCE_TRIGGER = 0;
@@ -10,12 +10,12 @@ const SOURCE_SELECTED = 100;
const SOURCE_SECONDARY_SELECTED = 101;
const FURNI_DELIMITER = ';';
const TARGET_FURNI_SOURCES: WiredSourceOption[] = [
const TARGET_FURNI_SOURCES: WiredSourceOption[] = sortWiredSourceOptions([
{ value: 0, label: 'wiredfurni.params.sources.furni.0' },
{ value: SOURCE_SECONDARY_SELECTED, label: 'wiredfurni.params.sources.furni.101' },
{ value: 200, label: 'wiredfurni.params.sources.furni.200' },
{ value: 201, label: 'wiredfurni.params.sources.furni.201' }
];
], 'furni');
type SelectionMode = 'move' | 'target';
@@ -185,49 +185,32 @@ export const WiredActionFurniToFurniView: FC<{}> = () =>
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID }
save={ save }
footer={
selectionPreview={
<div className="flex flex-col gap-2">
<WiredSourcesSelector
showFurni={ true }
furniTitle="wiredfurni.params.sources.furni.title.mv.0"
furniSources={ FURNI_SOURCES }
furniSource={ moveSource }
onChangeFurni={ setMoveSource } />
<hr className="m-0 bg-dark" />
<WiredSourcesSelector
showFurni={ true }
furniTitle="wiredfurni.params.sources.furni.title.mv.1"
furniSources={ TARGET_FURNI_SOURCES }
furniSource={ targetSource }
onChangeFurni={ value => setTargetSource((value === SOURCE_SELECTED) ? SOURCE_SECONDARY_SELECTED : value) } />
<WiredFurniSelectionSourceRow
title="wiredfurni.params.sources.furni.title.mv.0"
options={ FURNI_SOURCES }
value={ moveSource }
selectionKind="primary"
selectionActive={ selectionMode === 'move' }
selectionCount={ moveFurniIds.length }
selectionLimit={ selectionLimit }
selectionEnabledValues={ [ SOURCE_SELECTED ] }
onChange={ setMoveSource }
onSelectionActivate={ () => switchSelection('move') } />
<WiredFurniSelectionSourceRow
title="wiredfurni.params.sources.furni.title.mv.1"
options={ TARGET_FURNI_SOURCES }
value={ targetSource }
selectionKind="secondary"
selectionActive={ selectionMode === 'target' }
selectionCount={ targetFurniIds.length }
selectionLimit={ selectionLimit }
selectionEnabledValues={ [ SOURCE_SECONDARY_SELECTED ] }
onChange={ value => setTargetSource((value === SOURCE_SELECTED) ? SOURCE_SECONDARY_SELECTED : value) }
onSelectionActivate={ () => switchSelection('target') } />
</div>
}>
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('wiredfurni.params.sources.furni.title.mv.0') }</Text>
<div className="flex items-center gap-2">
<Button
variant={ (selectionMode === 'move') ? 'primary' : 'secondary' }
disabled={ moveSource !== SOURCE_SELECTED }
onClick={ () => switchSelection('move') }>
{ LocalizeText('wiredfurni.params.sources.furni.100') }
</Button>
<Text small>{ selectionLimit ? `${ moveFurniIds.length }/${ selectionLimit }` : moveFurniIds.length }</Text>
</div>
</div>
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('wiredfurni.params.sources.furni.title.mv.1') }</Text>
<div className="flex items-center gap-2">
<Button
variant={ (selectionMode === 'target') ? 'primary' : 'secondary' }
disabled={ targetSource !== SOURCE_SECONDARY_SELECTED }
onClick={ () => switchSelection('target') }>
{ LocalizeText('wiredfurni.params.sources.furni.101') }
</Button>
<Text small>{ selectionLimit ? `${ targetFurniIds.length }/${ selectionLimit }` : targetFurniIds.length }</Text>
</div>
</div>
</div>
</WiredActionBaseView>
}
/>
);
};
src/components/wired/views/actions/WiredActionLayoutView.tsx
+6
View File
@@ -54,6 +54,8 @@ import { WiredExtraFilterFurniView } from '../extras/WiredExtraFilterFurniView';
import { WiredExtraFilterUserView } from '../extras/WiredExtraFilterUserView';
import { WiredExtraAnimationTimeView } from '../extras/WiredExtraAnimationTimeView';
import { WiredExtraMoveCarryUsersView } from '../extras/WiredExtraMoveCarryUsersView';
import { WiredExtraExecuteInOrderView } from '../extras/WiredExtraExecuteInOrderView';
import { WiredExtraExecutionLimitView } from '../extras/WiredExtraExecutionLimitView';
import { WiredExtraMoveNoAnimationView } from '../extras/WiredExtraMoveNoAnimationView';
import { WiredExtraMovePhysicsView } from '../extras/WiredExtraMovePhysicsView';
import { WiredExtraRandomView } from '../extras/WiredExtraRandomView';
@@ -183,6 +185,10 @@ export const WiredActionLayoutView = (code: number) =>
return <WiredExtraUnseenView />;
case WiredActionLayoutCode.RANDOM_EXTRA:
return <WiredExtraRandomView />;
case WiredActionLayoutCode.EXEC_IN_ORDER_EXTRA:
return <WiredExtraExecuteInOrderView />;
case WiredActionLayoutCode.EXECUTION_LIMIT_EXTRA:
return <WiredExtraExecutionLimitView />;
case WiredActionLayoutCode.SEND_SIGNAL:
return <WiredActionSendSignalView />;
}
src/components/wired/views/actions/WiredActionSendSignalView.tsx
+44 -36
View File
@@ -1,8 +1,9 @@
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../../api';
import { Button, Text } from '../../../../common';
import { Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { WiredSourcesSelector } from '../WiredSourcesSelector';
import { WiredFurniSelectionSourceRow } from '../WiredFurniSelectionSourceRow';
import { FURNI_SOURCES, USER_SOURCES } from '../WiredSourcesSelector';
import { WiredActionBaseView } from './WiredActionBaseView';
const ANTENNA_INTERACTION_TYPES = [ 'antenna' ];
@@ -184,7 +185,6 @@ export const WiredActionSendSignalView: FC<{}> = () =>
}, []);
const selectionLimit = trigger?.maximumItemSelectionCount ?? 0;
const forwardSelectionEnabled = (furniSource === SOURCE_SELECTED);
return (
<WiredActionBaseView
@@ -192,40 +192,48 @@ export const WiredActionSendSignalView: FC<{}> = () =>
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID }
cardStyle={ { width: '400px' } }
save={ save }
footer={ (
<WiredSourcesSelector
showFurni={ true }
showUsers={ true }
furniSource={ furniSource }
userSource={ userSource }
onChangeFurni={ onChangeFurniSource }
onChangeUsers={ setUserSource } />
) }>
selectionPreview={
<div className="flex flex-col gap-2">
<WiredFurniSelectionSourceRow
title="Antenne:"
titleIsLiteral={ true }
options={ [ { value: SOURCE_SELECTED, label: 'wiredfurni.params.sources.furni.100' } ] }
value={ SOURCE_SELECTED }
selectionKind="primary"
selectionActive={ selectionMode === 'antenna' }
selectionCount={ antennaIds.length }
selectionLimit={ selectionLimit }
selectionEnabledValues={ [ SOURCE_SELECTED ] }
onChange={ () => {} }
onSelectionActivate={ () => switchSelection('antenna') } />
<WiredFurniSelectionSourceRow
title="Furni da mandare avanti:"
titleIsLiteral={ true }
options={ FURNI_SOURCES }
value={ furniSource }
selectionKind="secondary"
selectionActive={ selectionMode === 'furni' }
selectionCount={ forwardFurniIds.length }
selectionLimit={ selectionLimit }
selectionEnabledValues={ [ SOURCE_SELECTED ] }
onChange={ onChangeFurniSource }
onSelectionActivate={ () => switchSelection('furni') } />
<WiredFurniSelectionSourceRow
title="Utenti da mandare avanti:"
titleIsLiteral={ true }
options={ USER_SOURCES }
value={ userSource }
selectionKind="secondary"
selectionActive={ false }
selectionCount={ 0 }
selectionLimit={ 0 }
selectionEnabledValues={ [] }
showSelectionToggle={ false }
onChange={ setUserSource } />
</div>
}
>
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-1">
<Text bold>Antenne selezionate</Text>
<div className="flex items-center gap-2">
<Button
variant={ (selectionMode === 'antenna') ? 'primary' : 'secondary' }
onClick={ () => switchSelection('antenna') }>
Antenne
</Button>
<Text small>{ selectionLimit ? `${ antennaIds.length }/${ selectionLimit }` : antennaIds.length }</Text>
</div>
</div>
<div className="flex flex-col gap-1">
<Text bold>Furni selezionati</Text>
<div className="flex items-center gap-2">
<Button
variant={ (selectionMode === 'furni') ? 'primary' : 'secondary' }
disabled={ !forwardSelectionEnabled }
onClick={ () => switchSelection('furni') }>
Furni
</Button>
<Text small>{ selectionLimit ? `${ forwardFurniIds.length }/${ selectionLimit }` : forwardFurniIds.length }</Text>
</div>
</div>
<Text bold>{ LocalizeText('wiredfurni.params.signal.options') }</Text>
<div className="form-check">
<input
src/components/wired/views/conditions/WiredConditionActorDirView.tsx
+1
View File
@@ -49,6 +49,7 @@ export const WiredConditionActorDirView: FC<{}> = () =>
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
save={ save }
footerCollapsible={ false }
footer={
<div className="flex flex-col gap-2">
<button className="btn btn-link p-0 align-self-start" type="button" onClick={ () => setShowAdvanced(value => !value) }>
src/components/wired/views/conditions/WiredConditionBaseView.tsx
+4 -2
View File
@@ -8,16 +8,18 @@ export interface WiredConditionBaseViewProps
requiresFurni: number;
save: () => void;
footer?: ReactNode;
footerCollapsible?: boolean;
selectionPreview?: ReactNode;
}
export const WiredConditionBaseView: FC<PropsWithChildren<WiredConditionBaseViewProps>> = props =>
{
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null, footer = null } = props;
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null, footer = null, footerCollapsible = true, selectionPreview = null } = props;
const onSave = () => (save && save());
return (
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ onSave } wiredType="condition" footer={ footer }>
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ onSave } wiredType="condition" footer={ footer } footerCollapsible={ footerCollapsible } selectionPreview={ selectionPreview }>
{ children }
</WiredBaseView>
);
src/components/wired/views/conditions/WiredConditionFurniIsOfTypeView.tsx
+30 -45
View File
@@ -1,8 +1,9 @@
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import { LocalizeText, WiredFurniType, WiredSelectionVisualizer } from '../../../../api';
import { Button, Text } from '../../../../common';
import { Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { FURNI_SOURCES, WiredSourceOption, WiredSourcesSelector } from '../WiredSourcesSelector';
import { WiredFurniSelectionSourceRow } from '../WiredFurniSelectionSourceRow';
import { FURNI_SOURCES, sortWiredSourceOptions, WiredSourceOption } from '../WiredSourcesSelector';
import { WiredConditionBaseView } from './WiredConditionBaseView';
const SOURCE_TRIGGER = 0;
@@ -10,10 +11,10 @@ const SOURCE_SELECTED = 100;
const SOURCE_SECONDARY_SELECTED = 101;
const FURNI_DELIMITER = ';';
const MATCH_FURNI_SOURCES: WiredSourceOption[] = [
const MATCH_FURNI_SOURCES: WiredSourceOption[] = sortWiredSourceOptions([
...FURNI_SOURCES,
{ value: SOURCE_SECONDARY_SELECTED, label: 'wiredfurni.params.sources.furni.101' }
];
], 'furni');
type SelectionMode = 'primary' | 'secondary';
@@ -194,23 +195,33 @@ export const WiredConditionFurniIsOfTypeView: FC<WiredConditionFurniIsOfTypeView
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_OR_BY_TYPE }
save={ save }
footer={
selectionPreview={
<div className="flex flex-col gap-2">
<WiredSourcesSelector
showFurni={ true }
furniTitle="wiredfurni.params.sources.furni.title.match.0"
furniSources={ MATCH_FURNI_SOURCES }
furniSource={ matchSource }
onChangeFurni={ setMatchSource } />
<hr className="m-0 bg-dark" />
<WiredSourcesSelector
showFurni={ true }
furniTitle="wiredfurni.params.sources.furni.title.match.1"
furniSources={ MATCH_FURNI_SOURCES }
furniSource={ compareSource }
onChangeFurni={ setCompareSource } />
<WiredFurniSelectionSourceRow
title="wiredfurni.params.sources.furni.title.match.0"
options={ MATCH_FURNI_SOURCES }
value={ matchSource }
selectionKind="primary"
selectionActive={ selectionMode === 'primary' }
selectionCount={ primaryFurniIds.length }
selectionLimit={ selectionLimit }
selectionEnabledValues={ [ SOURCE_SELECTED ] }
onChange={ setMatchSource }
onSelectionActivate={ () => switchSelection('primary') } />
<WiredFurniSelectionSourceRow
title="wiredfurni.params.sources.furni.title.match.1"
options={ MATCH_FURNI_SOURCES }
value={ compareSource }
selectionKind="secondary"
selectionActive={ selectionMode === 'secondary' }
selectionCount={ secondaryFurniIds.length }
selectionLimit={ selectionLimit }
selectionEnabledValues={ [ SOURCE_SECONDARY_SELECTED ] }
onChange={ setCompareSource }
onSelectionActivate={ () => switchSelection('secondary') } />
</div>
}>
}
>
<div className="flex flex-col gap-2">
<Text bold>{ LocalizeText('wiredfurni.params.quantifier_selection') }</Text>
{ [ 0, 1 ].map(value => (
@@ -220,32 +231,6 @@ export const WiredConditionFurniIsOfTypeView: FC<WiredConditionFurniIsOfTypeView
</label>
)) }
</div>
<div className="flex flex-col gap-3">
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('wiredfurni.params.sources.furni.title.match.0') }</Text>
<div className="flex items-center gap-2">
<Button
variant={ (selectionMode === 'primary') ? 'primary' : 'secondary' }
disabled={ matchSource !== SOURCE_SELECTED && compareSource !== SOURCE_SELECTED }
onClick={ () => switchSelection('primary') }>
{ LocalizeText('wiredfurni.params.sources.furni.100') }
</Button>
<Text small>{ selectionLimit ? `${ primaryFurniIds.length }/${ selectionLimit }` : primaryFurniIds.length }</Text>
</div>
</div>
<div className="flex flex-col gap-1">
<Text bold>{ LocalizeText('wiredfurni.params.sources.furni.title.match.1') }</Text>
<div className="flex items-center gap-2">
<Button
variant={ (selectionMode === 'secondary') ? 'primary' : 'secondary' }
disabled={ matchSource !== SOURCE_SECONDARY_SELECTED && compareSource !== SOURCE_SECONDARY_SELECTED }
onClick={ () => switchSelection('secondary') }>
{ LocalizeText('wiredfurni.params.sources.furni.101') }
</Button>
<Text small>{ selectionLimit ? `${ secondaryFurniIds.length }/${ selectionLimit }` : secondaryFurniIds.length }</Text>
</div>
</div>
</div>
</WiredConditionBaseView>
);
};
src/components/wired/views/conditions/WiredConditionHasAltitudeView.tsx
+1
View File
@@ -127,6 +127,7 @@ export const WiredConditionHasAltitudeView: FC<{}> = () =>
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_BY_ID_BY_TYPE_OR_FROM_CONTEXT }
save={ save }
footerCollapsible={ false }
footer={
<div className="flex flex-col gap-2">
<button className="btn btn-link p-0 align-self-start" type="button" onClick={ () => setShowAdvanced(value => !value) }>
src/components/wired/views/conditions/WiredConditionSelectionQuantityView.tsx
+7 -5
View File
@@ -3,6 +3,7 @@ import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
import { LocalizeText, WiredFurniType } from '../../../../api';
import { Button, Slider, Text } from '../../../../common';
import { useWired } from '../../../../hooks';
import { sortWiredSourceOptions, useAvailableUserSources } from '../WiredSourcesSelector';
import { WiredConditionBaseView } from './WiredConditionBaseView';
const SOURCE_GROUP_USERS = 0;
@@ -18,11 +19,11 @@ const USER_SOURCES = [
{ value: 201, label: 'wiredfurni.params.sources.users.201' }
];
const FURNI_SOURCES = [
const FURNI_SOURCES = sortWiredSourceOptions([
{ value: 0, label: 'wiredfurni.params.sources.furni.0' },
{ value: 200, label: 'wiredfurni.params.sources.furni.200' },
{ value: 201, label: 'wiredfurni.params.sources.furni.201' }
];
], 'furni');
const clampQuantity = (value: number) =>
{
@@ -39,6 +40,7 @@ const normalizeSource = (value: number, allowed: number[]) =>
export const WiredConditionSelectionQuantityView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
const availableUserSources = sortWiredSourceOptions(useAvailableUserSources(trigger, USER_SOURCES), 'users');
const [ comparison, setComparison ] = useState(1);
const [ quantity, setQuantity ] = useState(0);
const [ quantityInput, setQuantityInput ] = useState('0');
@@ -59,11 +61,11 @@ export const WiredConditionSelectionQuantityView: FC<{}> = () =>
setQuantity(nextQuantity);
setQuantityInput(nextQuantity.toString());
setSourceGroup(nextSourceGroup);
setUserSource(nextSourceGroup === SOURCE_GROUP_USERS ? normalizeSource(nextSourceType, USER_SOURCES.map(source => source.value)) : 0);
setUserSource(nextSourceGroup === SOURCE_GROUP_USERS ? normalizeSource(nextSourceType, availableUserSources.map(source => source.value)) : 0);
setFurniSource(nextSourceGroup === SOURCE_GROUP_FURNI ? normalizeSource(nextSourceType, FURNI_SOURCES.map(source => source.value)) : 0);
}, [ trigger ]);
}, [ availableUserSources, trigger ]);
const activeSources = useMemo(() => (sourceGroup === SOURCE_GROUP_FURNI) ? FURNI_SOURCES : USER_SOURCES, [ sourceGroup ]);
const activeSources = useMemo(() => (sourceGroup === SOURCE_GROUP_FURNI) ? FURNI_SOURCES : availableUserSources, [ availableUserSources, sourceGroup ]);
const activeSource = (sourceGroup === SOURCE_GROUP_FURNI) ? furniSource : userSource;
const activeSourceIndex = Math.max(0, activeSources.findIndex(source => source.value === activeSource));
src/components/wired/views/conditions/WiredConditionTeamHasRankView.tsx
+1
View File
@@ -48,6 +48,7 @@ export const WiredConditionTeamHasRankView: FC<{}> = () =>
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
save={ save }
footerCollapsible={ false }
footer={
<div className="flex flex-col gap-2">
<button className="btn btn-link p-0 align-self-start" type="button" onClick={ () => setShowAdvanced(value => !value) }>
src/components/wired/views/conditions/WiredConditionTeamHasScoreView.tsx
+1
View File
@@ -87,6 +87,7 @@ export const WiredConditionTeamHasScoreView: FC<{}> = () =>
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
save={ save }
footerCollapsible={ false }
footer={
<div className="flex flex-col gap-2">
<button className="btn btn-link p-0 align-self-start" type="button" onClick={ () => setShowAdvanced(value => !value) }>
src/components/wired/views/conditions/WiredConditionTriggererMatchView.tsx
+1
View File
@@ -73,6 +73,7 @@ export const WiredConditionTriggererMatchView: FC<WiredConditionTriggererMatchVi
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
save={ save }
footerCollapsible={ false }
footer={
<div className="flex flex-col gap-2">
<button className="btn btn-link p-0 align-self-start" type="button" onClick={ () => setShowAdvanced(value => !value) }>
src/components/wired/views/conditions/WiredConditionUserPerformsActionView.tsx
+1
View File
@@ -95,6 +95,7 @@ export const WiredConditionUserPerformsActionView: FC<WiredConditionUserPerforms
hasSpecialInput={ true }
requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE }
save={ save }
footerCollapsible={ false }
footer={
<div className="flex flex-col gap-2">
<button className="btn btn-link p-0 align-self-start" type="button" onClick={ () => setShowAdvanced(value => !value) }>
src/components/wired/views/extras/WiredExtraBaseView.tsx
+4 -2
View File
@@ -12,11 +12,13 @@ export interface WiredExtraBaseViewProps
validate?: () => boolean;
cardStyle?: CSSProperties;
footer?: ReactNode;
footerCollapsible?: boolean;
selectionPreview?: ReactNode;
}
export const WiredExtraBaseView: FC<PropsWithChildren<WiredExtraBaseViewProps>> = props =>
{
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, hasSpecialInput = false, children = null, cardStyle = undefined, footer = null } = props;
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, hasSpecialInput = false, children = null, cardStyle = undefined, footer = null, footerCollapsible = true, selectionPreview = null } = props;
const { trigger = null, setActionDelay = null } = useWired();
useEffect(() =>
@@ -25,7 +27,7 @@ export const WiredExtraBaseView: FC<PropsWithChildren<WiredExtraBaseViewProps>>
}, [ trigger, setActionDelay ]);
return (
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } validate={ validate } wiredType="extra" cardStyle={ cardStyle } footer={ footer }>
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } validate={ validate } wiredType="extra" cardStyle={ cardStyle } footer={ footer } footerCollapsible={ footerCollapsible } selectionPreview={ selectionPreview }>
{ children }
</WiredBaseView>
);
src/components/wired/views/extras/WiredExtraExecuteInOrderView.tsx
+17
View File
@@ -0,0 +1,17 @@
import { FC } from 'react';
import { WiredFurniType } from '../../../../api';
import { useWired } from '../../../../hooks';
import { WiredExtraBaseView } from './WiredExtraBaseView';
export const WiredExtraExecuteInOrderView: 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: 320 } } />;
};
src/components/wired/views/extras/WiredExtraExecutionLimitView.tsx
+84
View File
@@ -0,0 +1,84 @@
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_EXECUTIONS = 1;
const MAX_EXECUTIONS = 100;
const DEFAULT_EXECUTIONS = 1;
const MIN_TIME_WINDOW_MS = 1000;
const MAX_TIME_WINDOW_MS = 10000;
const DEFAULT_TIME_WINDOW_MS = 1000;
const TIME_WINDOW_STEP_MS = 500;
const normalizeExecutions = (value: number) =>
{
if(isNaN(value)) return DEFAULT_EXECUTIONS;
return Math.max(MIN_EXECUTIONS, Math.min(MAX_EXECUTIONS, Math.round(value)));
};
const normalizeTimeWindow = (value: number) =>
{
if(isNaN(value)) return DEFAULT_TIME_WINDOW_MS;
const clampedValue = Math.max(MIN_TIME_WINDOW_MS, Math.min(MAX_TIME_WINDOW_MS, value));
return Math.round(clampedValue / TIME_WINDOW_STEP_MS) * TIME_WINDOW_STEP_MS;
};
const formatTimeWindow = (value: number) =>
{
const seconds = value / 1000;
return Number.isInteger(seconds) ? seconds.toString() : seconds.toFixed(1);
};
export const WiredExtraExecutionLimitView: FC<{}> = () =>
{
const { trigger = null, setIntParams = null, setStringParam = null } = useWired();
const [ executions, setExecutions ] = useState(DEFAULT_EXECUTIONS);
const [ timeWindowMs, setTimeWindowMs ] = useState(DEFAULT_TIME_WINDOW_MS);
useEffect(() =>
{
if(!trigger) return;
setExecutions(normalizeExecutions((trigger.intData.length > 0) ? trigger.intData[0] : DEFAULT_EXECUTIONS));
setTimeWindowMs(normalizeTimeWindow((trigger.intData.length > 1) ? trigger.intData[1] : DEFAULT_TIME_WINDOW_MS));
}, [ trigger ]);
const save = () =>
{
setIntParams([ normalizeExecutions(executions), normalizeTimeWindow(timeWindowMs) ]);
setStringParam('');
};
return (
<WiredExtraBaseView hasSpecialInput={ true } requiresFurni={ WiredFurniType.STUFF_SELECTION_OPTION_NONE } save={ save } cardStyle={ { width: 380 } }>
<div className="flex flex-col gap-2">
<div className="flex flex-col gap-2">
<Text>{ LocalizeText('wiredfurni.params.setexecutions', [ 'amount' ], [ executions.toString() ]) }</Text>
<Slider
min={ MIN_EXECUTIONS }
max={ MAX_EXECUTIONS }
step={ 1 }
value={ executions }
onChange={ value => setExecutions(normalizeExecutions(Array.isArray(value) ? value[0] : Number(value))) } />
<Text small>{ executions }</Text>
</div>
<div className="flex flex-col gap-2">
<Text>{ LocalizeText('wiredfurni.params.settimewindow', [ 'timewindow' ], [ formatTimeWindow(timeWindowMs) ]) }</Text>
<Slider
min={ MIN_TIME_WINDOW_MS }
max={ MAX_TIME_WINDOW_MS }
step={ TIME_WINDOW_STEP_MS }
value={ timeWindowMs }
onChange={ value => setTimeWindowMs(normalizeTimeWindow(Array.isArray(value) ? value[0] : Number(value))) } />
<Text small>{ formatTimeWindow(timeWindowMs) }s</Text>
</div>
</div>
</WiredExtraBaseView>
);
};
src/components/wired/views/extras/WiredExtraMoveCarryUsersView.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export const WiredExtraMoveCarryUsersView: FC<{}> = () =>
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)) } /> }>
footer={ <WiredSourcesSelector showUsers={ true } userSource={ userSource } userSources={ USER_SOURCES } usersTitle="wiredfurni.params.sources.users.title.carry" allowClickedUserSource={ false } 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">
src/components/wired/views/extras/WiredExtraMovePhysicsView.tsx
+1
View File
@@ -89,6 +89,7 @@ export const WiredExtraMovePhysicsView: FC<{}> = () =>
userSource={ moveThroughUsersSource }
userSources={ USER_SOURCES }
usersTitle="wiredfurni.params.sources.users.title.physics.0"
allowClickedUserSource={ false }
onChangeUsers={ value => setMoveThroughUsersSource(normalizeSource(value, USER_SOURCES)) } /> }
</div>
);
src/components/wired/views/selectors/WiredSelectorBaseView.tsx
+4 -2
View File
@@ -11,14 +11,16 @@ export interface WiredSelectorBaseViewProps
cardStyle?: CSSProperties;
hideDelay?: boolean;
footer?: ReactNode;
footerCollapsible?: boolean;
selectionPreview?: ReactNode;
}
export const WiredSelectorBaseView: FC<PropsWithChildren<WiredSelectorBaseViewProps>> = props =>
{
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, hasSpecialInput = false, children = null, cardStyle = undefined, footer = null } = props;
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, validate = null, hasSpecialInput = false, children = null, cardStyle = undefined, footer = null, footerCollapsible = true, selectionPreview = null } = props;
return (
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } validate={ validate } wiredType="selector" cardStyle={ cardStyle } footer={ footer }>
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ save } validate={ validate } wiredType="selector" cardStyle={ cardStyle } footer={ footer } footerCollapsible={ footerCollapsible } selectionPreview={ selectionPreview }>
{ children }
</WiredBaseView>
);
src/components/wired/views/selectors/WiredSelectorFurniNeighborhoodView.tsx
+5 -4
View File
@@ -5,6 +5,7 @@ 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';
const SOURCE_USER_TRIGGER = 0;
@@ -14,17 +15,17 @@ const SOURCE_FURNI_TRIGGER = 3;
const SOURCE_FURNI_PICKED = 4;
const SOURCE_FURNI_SIGNAL = 5;
const USER_SOURCES = [
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 = [
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;
src/components/wired/views/selectors/WiredSelectorUsersNeighborhoodView.tsx
+5 -4
View File
@@ -5,6 +5,7 @@ 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';
const SOURCE_USER_TRIGGER = 0;
@@ -14,17 +15,17 @@ const SOURCE_FURNI_TRIGGER = 3;
const SOURCE_FURNI_PICKED = 4;
const SOURCE_FURNI_SIGNAL = 5;
const USER_SOURCES = [
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 = [
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;
src/components/wired/views/triggers/WiredTriggerBaseView.tsx
+4 -2
View File
@@ -8,16 +8,18 @@ export interface WiredTriggerBaseViewProps
requiresFurni: number;
save: () => void;
footer?: ReactNode;
footerCollapsible?: boolean;
selectionPreview?: ReactNode;
}
export const WiredTriggerBaseView: FC<PropsWithChildren<WiredTriggerBaseViewProps>> = props =>
{
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null, footer = null } = props;
const { requiresFurni = WiredFurniType.STUFF_SELECTION_OPTION_NONE, save = null, hasSpecialInput = false, children = null, footer = null, footerCollapsible = true, selectionPreview = null } = props;
const onSave = () => (save && save());
return (
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ onSave } wiredType="trigger" footer={ footer }>
<WiredBaseView hasSpecialInput={ hasSpecialInput } requiresFurni={ requiresFurni } save={ onSave } wiredType="trigger" footer={ footer } footerCollapsible={ footerCollapsible } selectionPreview={ selectionPreview }>
{ children }
</WiredBaseView>
);